/* One visible knob, one real accessible input. Native-like gestures, pixel silhouette. */
.knob{margin:auto 0;position:relative}.cell .rotary-input,#rack[data-rows="3"] .rotary-input{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);margin:0;opacity:0;cursor:ns-resize;touch-action:none;z-index:2}.knob:focus-within{outline:3px solid #f7a52d;outline-offset:3px}.knob:after{pointer-events:none}#rack[data-rows="3"] .knob{width:40px;height:40px;margin:auto 0}
button{color:#172126;-webkit-tap-highlight-color:transparent;clip-path:polygon(0 6px,2px 6px,2px 2px,6px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 6px),0 calc(100% - 6px))}button:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #f7a52d}button:active:not(:disabled){translate:1px 2px;box-shadow:inset 2px 2px #172126}.toggle[aria-pressed=true]{box-shadow:inset 2px 2px #9b2d1b,inset -2px -2px #ff8866}#parts button{color:#172126}#parts{padding-bottom:10px;scroll-padding-bottom:10px}.parts-heading span{display:inline!important}.unit-art button{min-height:36px}#close-editor{min-width:40px;min-height:36px}
@media(max-width:580px){.parts-heading span{font-size:8px}#parts button{min-height:40px}.unit-art button{min-height:40px}#identity-form footer button,#close-editor{min-height:44px}.knob{min-width:61px;min-height:61px}#rack[data-rows="3"] .knob{min-width:44px;min-height:44px}}
#parts button{font-size:14px;min-width:0}#parts button>span{flex:none}.cell.unavailable .toggle{font-size:13px;line-height:1.1}.cell output{white-space:nowrap}
/* Stepped outer border and separately inset face, so corner outlines stay connected. */
button{--button-face:#d3d7ce;position:relative;isolation:isolate;border:0!important;background:#172126!important;box-shadow:none!important}button::before{content:'';position:absolute;inset:2px;background:var(--button-face);z-index:-1;clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));box-shadow:inset 2px 2px #ffffff55,inset -2px -2px #00000044}button:focus-visible::before{box-shadow:inset 0 0 0 3px #f7a52d}button:active:not(:disabled)::before{box-shadow:inset 2px 2px #0008}.unit-art button{--button-face:#e7e5d8}.unit-art button:hover{--button-face:#fff8df}#parts button[aria-current=true]{--button-face:var(--unit-accent)}.toggle{--button-face:#e7e5d8}.toggle[aria-pressed=true]{--button-face:#ed4628}.toggle[aria-pressed=true]::before{box-shadow:inset 2px 2px #0005,inset -2px -2px #fff4}.cell.unavailable .toggle{--button-face:#728171}#identity-form #save-editor{--button-face:#294c36}

.toggle[aria-pressed=true]:focus-visible::before{box-shadow:inset 0 0 0 3px #f7a52d}