/* Bildpunkt hardware primitives. Import tokens.css first. Art is edge-localized.
 * Layout consumes semantic spacing roles. Artwork calibration stays literal:
 * knob-face-study's 7px inset, pedal-card's 0/6/4px frame, icon optical offsets,
 * sprite slices, fader-thumb offsets, fixed faces and their absolute hit regions.
 * Spacing tokens never scale minimum touch targets or physical control geometry.
 */
@font-face{font-family:"Redaction 50";src:url("./assets/Redaction50-Regular.ttf") format("truetype");font-display:swap}
.tw-scope{font-family:var(--tw-glass-font-display);background:var(--tw-case);color:var(--tw-seam);font-synthesis:none}
.tw-scope *{box-sizing:border-box}
/* Code examples and numeric readouts use the existing sans, never a third family. */
:where(.tw-scope,.tw-dialog,.tw-card,.tw-asset-card,.tw-glass-panel) :is(pre,code,kbd,samp),.tw-code{font-family:var(--tw-glass-font-ui);font-variant-numeric:tabular-nums}
:where(.tw-scope) output,.tw-readout,.tw-control-output,.tw-control-value{font-variant-numeric:tabular-nums}
.tw-scope :is(button,input,select,textarea){font:inherit}
.tw-scope :is(button,input,select,textarea,a):focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}
/* Approved Glass Pixel color roles, with the quieter dev.4 silhouette.
 * A single face replaces stacked backplates. Selective 1px texture stays at edges.
 * Skin changes texture only; palette and tint own color through semantic variables. */
:is(.tw-button,.tw-glass-button){--tw-cap:var(--tw-glass);--tw-button-face:var(--tw-button-neutral);--tw-button-edge:var(--tw-button-neutral-edge);--tw-button-label:var(--tw-button-ink);position:relative;isolation:isolate;min-height:var(--tw-touch);padding:var(--tw-space-control-padding-block) var(--tw-space-control-padding-inline);border:0;border-radius:8px;background:transparent;color:var(--tw-button-label);cursor:pointer;touch-action:manipulation;line-height:1.1;text-shadow:none;box-shadow:none;clip-path:none}
:is(.tw-button,.tw-glass-button)::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--tw-button-edge);border-bottom:2px solid var(--tw-button-base);border-radius:inherit;background-color:var(--tw-button-face);background-image:var(--tw-button-texture,url("./assets/button-edge-cast.svg")),linear-gradient(135deg,#ffffff24,transparent 52%);background-position:left top,left top;background-size:100% 100%,100% 100%;background-repeat:no-repeat;pointer-events:none;image-rendering:pixelated}
:is(.tw-button,.tw-glass-button):hover:not(:disabled,[aria-disabled=true])::before{filter:brightness(1.06)}
:is(.tw-button,.tw-glass-button):active:not(:disabled,[aria-disabled=true]),:is(.tw-button,.tw-glass-button)[aria-pressed=true]:not(:disabled,[aria-disabled=true]){translate:0 1px}
:is(.tw-button,.tw-glass-button)[aria-pressed=true]:not(:disabled,[aria-disabled=true])::before{border-bottom-width:1px}
:is(.tw-button,.tw-glass-button,.tw-tab):focus-visible,.tw-scope :is(.tw-button,.tw-glass-button,.tw-tab):focus-visible{outline:3px solid var(--tw-glass-ink);outline-offset:3px;box-shadow:0 0 0 3px var(--tw-glass-light)}
.tw-button--accent,.tw-glass-button--primary,:is(.tw-button,.tw-glass-button)[aria-pressed=true]{--tw-cap:var(--tw-accent);--tw-button-face:var(--tw-button-primary);--tw-button-edge:var(--tw-button-primary-edge);--tw-button-label:var(--tw-button-on-primary)}
.tw-button--signal,.tw-glass-button--signal,:is(.tw-button--signal,.tw-glass-button--signal)[aria-pressed=true]{--tw-cap:var(--tw-button-signal);--tw-button-face:var(--tw-button-signal);--tw-button-edge:var(--tw-button-signal-edge);--tw-button-label:var(--tw-button-on-signal)}
.tw-button--dark{--tw-cap:var(--tw-recess);--tw-button-face:var(--tw-button-base);--tw-button-edge:var(--tw-button-base);--tw-button-label:var(--tw-button-on-base)}
.tw-tabs{display:flex;flex-wrap:wrap;gap:var(--tw-space-control-gap)}
/* The rule meets the visual cap 8px inside the 44px hit target. One rule
 * follows the last wrapped row, never a label. Vertical/carousel lists omit it. */
.tw-tabs:where(:not(.tw-carousel-indicators,[aria-orientation=vertical])){position:relative}
.tw-tabs:where(:not(.tw-carousel-indicators,[aria-orientation=vertical]))::before{content:"";position:absolute;inset:auto 0 8px;height:1px;background:color-mix(in srgb,var(--tw-glass-ink) 18%,transparent);pointer-events:none}
/* A compact 32px visual cap sits inside the generous transparent target.
 * Transparent 4px/8px borders keep hover fill and dither off the hit-area edges.
 * The 12px pixel field fades behind lower glyphs; ink always paints above it.
 * Palette roles supply color. Selection opacity eases; the texture stays still. */
.tw-tab{--tw-tab-line:var(--tw-accent-indicator,color-mix(in srgb,var(--tw-accent) 72%,var(--tw-glass-ink)));display:inline-flex;align-items:center;justify-content:center;position:relative;isolation:isolate;box-sizing:border-box;min-width:44px;min-height:max(44px,var(--tw-touch));max-width:100%;white-space:normal;overflow-wrap:anywhere;padding:2px var(--tw-space-control-padding-inline) 10px;border:0 solid transparent;border-block-width:4px 8px;border-radius:4px;background:transparent;background-clip:padding-box;color:var(--tw-glass-muted);cursor:pointer;touch-action:manipulation;line-height:1.1;text-shadow:none;box-shadow:none;translate:none;transition:background-color 160ms ease,color 160ms ease}
.tw-tab::before,.tw-tab::after{content:"";display:block;position:absolute;inset:auto 8px 0;pointer-events:none;opacity:0;transition:opacity 180ms ease-out}
.tw-tab::before{bottom:2px;height:12px;z-index:-1;background:linear-gradient(90deg,var(--tw-tab-line),var(--tw-accent-fill,var(--tw-accent)) 44%,color-mix(in srgb,var(--tw-accent-fill,var(--tw-accent)) 65%,var(--tw-button-signal)) 76%,var(--tw-tab-line));-webkit-mask:url("./assets/tab-dither-rise.svg") left bottom/64px 12px repeat-x;mask:url("./assets/tab-dither-rise.svg") left bottom/64px 12px repeat-x;image-rendering:pixelated}
.tw-tab::after{height:2px;background:var(--tw-tab-line);clip-path:polygon(0 1px,2px 1px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 1px,100% 1px,100% 2px,0 2px)}
.tw-tab:hover:not(:disabled,[aria-disabled=true]){background-color:color-mix(in srgb,var(--tw-glass-ink) 5%,transparent);color:var(--tw-glass-ink)}
.tw-tab[aria-selected=true]{color:var(--tw-glass-ink)}
.tw-tab[aria-selected=true]::before,.tw-tab[aria-selected=true]::after{opacity:1}
.tw-tab:is(:disabled,[aria-disabled=true]){color:var(--tw-muted);cursor:not-allowed;opacity:1}
.tw-tab:is(:disabled,[aria-disabled=true])::before{display:none}
/* Numbered carousel steps share the exact button face, edge asset and color roles.
 * Geometry is the only specialization; there is no copied or substitute texture. */
.tw-carousel-indicators{justify-content:center;gap:var(--tw-space-label-gap);min-width:0}
.tw-button.tw-carousel-step{min-width:44px;min-height:44px;padding:var(--tw-space-component-padding-compact);font-variant-numeric:tabular-nums}
.tw-carousel-step[aria-selected=true]{--tw-cap:var(--tw-accent);--tw-button-face:var(--tw-button-primary);--tw-button-edge:var(--tw-button-primary-edge);--tw-button-label:var(--tw-button-on-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){.tw-tab,.tw-tab::before,.tw-tab::after{transition:none}}
:is(.tw-button,.tw-glass-button):disabled,.tw-tab:disabled{--tw-button-face:var(--tw-button-neutral);--tw-button-edge:var(--tw-button-neutral-edge);--tw-button-label:var(--tw-button-ink);cursor:not-allowed;text-shadow:none;opacity:1}
.tw-card{position:relative;border:0;background-color:var(--tw-plate);background-image:none;background-position:2px 2px,right 2px bottom 2px,left top;background-size:60px 60px,60px 60px,540px 300px;background-repeat:no-repeat;color:var(--tw-ink);box-shadow:none;image-rendering:pixelated;border-radius:var(--tw-surface-radius,12px)}
.tw-card__header{padding:var(--tw-space-component-padding);border-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--tw-space-control-gap);box-shadow:none;border-radius:var(--tw-surface-radius,12px)}
.tw-card__header strong{font-size:24px;font-weight:normal;line-height:1}
.tw-card__body{padding:var(--tw-space-component-padding)}
.tw-card__body p{margin:0;line-height:1.3;color:var(--tw-ink);font-size:19px}
.tw-chip{display:inline-block;padding:var(--tw-space-control-padding-compact) var(--tw-space-component-padding-compact);border:0;background:var(--tw-accent);color:var(--tw-seam);font-size:14px;white-space:nowrap;border-radius:var(--tw-surface-radius,12px)}
.tw-field{display:grid;gap:var(--tw-space-label-gap);min-width:0;color:var(--tw-ink)}
.tw-field>span{font-size:18px}
.tw-input{width:100%;min-height:var(--tw-touch);padding:var(--tw-space-control-padding-block) var(--tw-space-control-padding-inline);border:1px solid var(--tw-plate-shadow);border-radius:8px;background:var(--tw-glass);color:var(--tw-glass-ink);box-shadow:none;font-size:18px}
.tw-input:disabled{opacity:1}
.tw-toggle{display:inline-flex;align-items:center;gap:var(--tw-space-control-gap);min-height:var(--tw-touch);cursor:pointer;color:var(--tw-ink);font-size:18px}
/* A native checkbox with a 44px hit area and a quiet, inset glass track.
 * The exact cast-button asset adds sparse 1px edge dither, not a second backplate.
 * The thumb shares button face lighting; switch colors keep their contrast roles. */
.tw-toggle input{appearance:none;-webkit-appearance:none;position:relative;flex:none;box-sizing:border-box;width:56px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;cursor:pointer;vertical-align:middle}
.tw-toggle input::before{content:"";position:absolute;inset:8px 1px;border:1px solid var(--tw-control-edge,var(--tw-muted));border-radius:11px;background-color:var(--tw-glass);background-image:var(--tw-button-texture,url("./assets/button-edge-cast.svg"));background-position:left top;background-size:100% 100%;background-repeat:no-repeat;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--tw-glass-ink) 9%,transparent);image-rendering:pixelated;pointer-events:none;transition:background-color 160ms ease,border-color 160ms ease}
.tw-toggle input::after{content:"";position:absolute;left:5px;top:12px;width:20px;height:20px;border:0;border-radius:7px;background-color:var(--tw-muted);background-image:var(--tw-button-texture,url("./assets/button-edge-cast.svg")),linear-gradient(135deg,#ffffff24,transparent 52%);background-position:left top,left top;background-size:100% 100%,100% 100%;background-repeat:no-repeat;box-shadow:inset 0 1px 0 #ffffff24;image-rendering:pixelated;pointer-events:none;transform:translateX(0);transition:transform 160ms ease,background-color 160ms ease}
.tw-toggle input:checked::before{background-color:var(--tw-accent-fill,var(--tw-accent));border-color:var(--tw-accent-edge,var(--tw-accent))}
.tw-toggle input:checked::after{left:5px;top:12px;width:20px;height:20px;border:0;transform:translateX(26px);background-color:var(--tw-on-accent-fill,var(--tw-on-accent,var(--tw-glass)))}
.tw-toggle input:disabled{cursor:not-allowed;opacity:1}
@media(prefers-reduced-motion:reduce){.tw-toggle input::before,.tw-toggle input::after{transition:none}}
.tw-knob{display:grid;justify-items:center;gap:var(--tw-space-label-gap);width:max-content;max-width:100%;color:var(--tw-ink)}
.tw-knob>span{font-size:18px}
.tw-knob__face{position:relative;width:80px;height:80px;background:transparent url("./assets/knob-05-clean.png") center/64px 64px no-repeat;image-rendering:pixelated}
.tw-knob__face::before{content:"";position:absolute;inset:0;background:url("./assets/dial-scale.svg") center/80px 80px no-repeat;image-rendering:pixelated;pointer-events:none}
.tw-knob__face::after{content:"";position:absolute;left:38px;top:12px;width:4px;height:9px;background:#f3d6a1;box-shadow:2px 0 #9d7a42,0 2px #3a392f;transform-origin:2px 28px;transform:rotate(var(--tw-angle,-135deg));pointer-events:none}
.tw-knob input{width:120px;accent-color:var(--tw-accent)}
.tw-knob output{font-size:17px}
@media(max-width:600px){.tw-card__header{align-items:flex-start;flex-direction:column}}
.tw-card__body p{font-family:var(--tw-glass-font-ui);font-size:14px;line-height:1.5}
.tw-knob__face{background-image:url("./assets/knob-detail-14-radial.png");background-size:64px 64px}
.tw-knob__face::before,.tw-knob__face::after{display:none}
.tw-knob__face svg[data-bildpunkt-indicator]{display:block;shape-rendering:crispEdges}
.tw-fader{--tw-fader-cap:url("./assets/fader-cast.png");display:grid;gap:var(--tw-space-label-gap);min-width:136px;color:var(--tw-ink);font-size:18px}.tw-fader[data-skin="steel"]{--tw-fader-cap:url("./assets/fader-steel.png")}.tw-fader__input{appearance:none;-webkit-appearance:none;width:136px;height:44px;margin:0;background:transparent;cursor:ew-resize;image-rendering:pixelated}.tw-fader__input::-webkit-slider-runnable-track{height:8px;border:2px solid var(--tw-seam);background:var(--tw-recess);box-shadow:0 2px var(--tw-plate-light),inset 0 2px var(--tw-plate-shadow)}.tw-fader__input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:28px;margin-top:-12px;border:0;border-radius:0;background:var(--tw-fader-cap) center/32px 28px no-repeat;filter:drop-shadow(2px 3px var(--tw-seam));image-rendering:pixelated}.tw-fader__input::-moz-range-track{height:8px;border:2px solid var(--tw-seam);background:var(--tw-recess)}.tw-fader__input::-moz-range-thumb{width:32px;height:28px;border:0;border-radius:0;background:var(--tw-fader-cap) center/32px 28px no-repeat;image-rendering:pixelated}.tw-fader__input:disabled{opacity:1;cursor:not-allowed}.tw-fader__input:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}.tw-fader output{font-size:16px}.tw-fader--vertical{justify-items:center;min-width:64px}.tw-fader--vertical .tw-fader__input{writing-mode:vertical-lr;direction:rtl;width:44px;height:136px;cursor:ns-resize}.tw-fader--vertical .tw-fader__input::-webkit-slider-runnable-track{width:8px;height:136px}.tw-fader--vertical .tw-fader__input::-webkit-slider-thumb{margin-left:-12px;margin-top:0}
.tw-rocker{position:relative;isolation:isolate;display:grid;grid-template-columns:44px 54px 44px;width:max-content;min-height:44px;align-items:center;color:var(--tw-button-ink)}.tw-rocker::before{content:"";position:absolute;z-index:-1;inset:0;border:1px solid var(--tw-button-neutral-edge);border-bottom:2px solid var(--tw-button-base);border-radius:8px;background:var(--tw-button-texture,url("./assets/button-edge-cast.svg")) left top/100% 100% no-repeat,linear-gradient(135deg,#ffffff24,transparent 52%),var(--tw-button-neutral);image-rendering:pixelated;pointer-events:none}.tw-rocker button{width:44px;height:44px;border:0;background:transparent;color:inherit;font:26px var(--tw-glass-font-display);cursor:pointer}.tw-rocker button:disabled{opacity:1;cursor:not-allowed}.tw-rocker button:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-5px}.tw-rocker button:active{transform:translateY(1px)}.tw-rocker span{text-align:center;font-size:16px}
.tw-knob-faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:var(--tw-space-component-gap)}.tw-knob-face-study{margin:0;min-height:116px;padding:7px;border:0;background:var(--tw-recess);color:var(--tw-ink);text-align:center;display:grid;justify-items:center;align-content:start;gap:var(--tw-space-label-gap);border-radius:var(--tw-surface-radius,12px)}.tw-knob-face-study>span{display:block;width:72px;height:72px;background-position:center;background-size:64px 64px;background-repeat:no-repeat;image-rendering:pixelated}.tw-knob-face-study figcaption{font-size:14px;line-height:1.1}
/* Radial navigation: the state is a printed ring segment, not a square cap.
 * The 44px button remains the hit target. Its decorative SVG is aligned to the
 * whole 180px dial, so two-pixel dither remains square at every destination. */
.tw-navigation{position:relative;width:180px;height:193px;flex:none;color:var(--tw-ink)}
.tw-navigation__print{position:absolute;inset:0;width:180px;height:180px;pointer-events:none;fill:none;stroke:var(--tw-ink);stroke-width:1.1;opacity:.46;shape-rendering:crispEdges}
.tw-navigation__destination{position:absolute;isolation:isolate;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--tw-ink);opacity:1;cursor:pointer}
.tw-navigation__destination img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.tw-navigation__destination svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;pointer-events:none}
.tw-navigation__destination .tw-icon{width:24px;height:24px;fill:currentColor;stroke:none}
.tw-navigation__destination .tw-navigation__sector{position:absolute;z-index:-1;width:180px;height:180px;max-width:none;overflow:visible;fill:none;stroke:none;pointer-events:none}
.tw-navigation__sector-wash,.tw-navigation__sector-dither{fill:var(--tw-accent);opacity:0;transition:opacity 130ms ease-out}
.tw-navigation__sector-dither{shape-rendering:crispEdges}
.tw-navigation__sector-edge{fill:none;stroke:var(--tw-accent);stroke-width:2;opacity:0;transition:opacity 130ms ease-out}
.tw-navigation__destination[aria-current=page] .tw-navigation__sector-wash{opacity:.035}
.tw-navigation__destination[aria-current=page] .tw-navigation__sector-dither{opacity:.44}
.tw-navigation__destination[aria-current=page] .tw-navigation__sector-edge{opacity:1}
.tw-navigation__destination.is-preview .tw-navigation__sector-wash{opacity:.055}
.tw-navigation__destination.is-preview .tw-navigation__sector-dither{opacity:.72}
.tw-navigation__sector-focus-halo,.tw-navigation__sector-focus{fill:none;stroke:var(--tw-case);stroke-width:5;opacity:0}
.tw-navigation__sector-focus{stroke:var(--tw-focus,var(--tw-ink));stroke-width:3}
.tw-navigation .tw-navigation__destination:focus-visible{outline:none;box-shadow:none}
.tw-navigation__destination:focus-visible :is(.tw-navigation__sector-focus-halo,.tw-navigation__sector-focus){opacity:1}
.tw-navigation__destination:is(:disabled,[aria-disabled=true]){color:var(--tw-muted);cursor:not-allowed}
.tw-navigation__knob{position:absolute;left:52px;top:52px;width:76px;height:76px;min-height:76px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;touch-action:none;cursor:grab}
.tw-navigation__knob:active{cursor:grabbing}
.tw-navigation .tw-navigation__knob:focus-visible{outline:2px solid var(--tw-focus,var(--tw-ink));outline-offset:2px;box-shadow:0 0 0 2px var(--tw-case)}
.tw-navigation__knob img,.tw-navigation__knob svg{position:absolute;inset:0;width:76px;height:76px;image-rendering:pixelated;pointer-events:none}
.tw-navigation__knob img{filter:drop-shadow(1px 3px 0 #10171488)}
.tw-navigation__knob svg{shape-rendering:crispEdges}
.tw-navigation__knob .face{fill:#f7c780}
.tw-navigation__knob .shadow{fill:#141b18;transform:translate(1px,1px)}
.tw-navigation__caption{position:absolute;top:180px;left:0;right:0;margin:0;text-align:center;font:12px var(--tw-glass-font-ui);color:var(--tw-ink)}
@media(prefers-reduced-motion:reduce){.tw-navigation__sector-wash,.tw-navigation__sector-dither,.tw-navigation__sector-edge{transition:none}}
@media(forced-colors:active){
 .tw-navigation__print{stroke:GrayText;opacity:1}
 .tw-navigation__destination{color:ButtonText}
 .tw-navigation__sector-wash,.tw-navigation__sector-dither{display:none}
 .tw-navigation__sector-edge{stroke:Highlight;forced-color-adjust:none}
 .tw-navigation__sector-focus-halo{stroke:Canvas;forced-color-adjust:none}
 .tw-navigation__sector-focus{stroke:ButtonText;forced-color-adjust:none}
 .tw-navigation__destination:is(:disabled,[aria-disabled=true]) .tw-navigation__sector-edge{stroke:GrayText}
 .tw-navigation .tw-navigation__knob:focus-visible{outline-color:Highlight;box-shadow:none}
}

.tw-pedal{display:grid;justify-items:center;width:180px;min-height:228px;padding:var(--tw-space-component-padding-compact);background:var(--tw-recess);border:0;box-shadow:none;border-radius:var(--tw-surface-radius,12px)}.tw-pedal__art{position:relative;width:160px;height:160px}.tw-pedal__art>img{width:160px;height:160px;image-rendering:pixelated;pointer-events:none}.tw-pedal__footswitch{position:absolute;left:29%;top:57%;width:42%;height:35%;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer}.tw-pedal__footswitch:active{background:#f8ba5829}.tw-pedal__footswitch:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-2px}.tw-pedal__status{display:flex;align-items:center;gap:var(--tw-space-label-gap);color:var(--tw-ink);font:12px var(--tw-glass-font-ui)}.tw-pedal__status i{display:block;width:6px;height:6px;background:#6e766e;box-shadow:0 0 0 1px #151c18}.tw-pedal[data-enabled=true] .tw-pedal__status i{background:#ffbd6e;box-shadow:0 0 5px #ffbd6e}.tw-pedal[data-enabled=false] .tw-pedal__art>img{filter:saturate(.25) brightness(.78)}
.tw-knob__face input[type=range]{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:80px;height:80px;margin:0;opacity:0;cursor:ns-resize;touch-action:none}.tw-knob__face:focus-within{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:2px}.tw-knob__face input[type=range]:focus-visible{outline:none}

.tw-choices{display:flex;flex-wrap:wrap;gap:var(--tw-space-control-gap);padding:var(--tw-space-component-padding-compact);border:0;color:var(--tw-ink);border-radius:var(--tw-surface-radius,12px)}.tw-choices legend{padding:0 var(--tw-space-component-padding-compact);font-size:18px}.tw-choice{position:relative;display:grid;justify-items:center;gap:var(--tw-space-label-gap);min-width:90px;min-height:96px;padding:var(--tw-space-component-padding-compact);border:0;background:var(--tw-recess);cursor:pointer;border-radius:var(--tw-surface-radius,12px)}.tw-choice:has(input:checked){outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:2px}.tw-choice:has(input:focus-visible){outline:3px solid var(--tw-glass-light);outline-offset:3px}.tw-choice input{position:absolute;inset:0;opacity:0;cursor:pointer}.tw-choice img{width:64px;height:64px;image-rendering:pixelated}.tw-choice i{display:block;width:60px;height:60px;background:var(--choice-color);border:0;border-radius:var(--tw-surface-radius,12px)}.tw-choice span{font-size:16px}.tw-choice--color{min-height:90px}
.tw-readout{display:grid;gap:var(--tw-space-label-gap);max-width:330px;padding:var(--tw-space-component-padding);border:0;background:var(--tw-glass);color:var(--tw-glass-ink);box-shadow:none;border-radius:var(--tw-surface-radius,12px)}.tw-readout span{font-size:17px}.tw-readout strong{font-size:32px;font-weight:400}.tw-readout meter{width:100%;height:16px;accent-color:var(--tw-accent)}.tw-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-component-gap)}.tw-input:is(textarea){resize:vertical;min-height:88px}.tw-input[type=color]{padding:var(--tw-space-control-padding-compact);width:70px;height:44px;cursor:pointer}
.tw-disclosure{position:relative;color:var(--tw-ink)}.tw-disclosure summary{display:flex;align-items:center;min-height:44px;padding:var(--tw-space-control-padding-block) var(--tw-space-control-padding-inline);border:0;background:var(--tw-recess);cursor:pointer;border-radius:var(--tw-surface-radius,12px)}.tw-disclosure[open]{z-index:2}.tw-disclosure:not(.tw-disclosure--quiet) button{display:block;width:100%;margin-top:var(--tw-space-label-gap)}.tw-carousel{display:flex;align-items:center;gap:var(--tw-space-control-gap);max-width:390px}.tw-carousel>:is(.tw-button,.tw-glass-button){min-width:44px;padding:var(--tw-space-component-padding-compact)}.tw-carousel__card{flex:1;min-width:0}.tw-carousel__card strong{font-size:20px;font-weight:400}.tw-carousel__card p{margin:var(--tw-space-label-gap) 0 0;font-size:13px}.tw-dialog{max-width:min(400px,calc(100vw - var(--tw-space-page-gutter-compact) * 2));padding:var(--tw-space-component-padding);border:0;background:var(--tw-case);color:var(--tw-seam);box-shadow:none;border-radius:var(--tw-surface-radius,12px)}.tw-dialog::backdrop{background:#111b1bcc}.tw-dialog h3{margin:0 0 var(--tw-space-component-gap);font-size:28px;font-weight:400}.tw-dialog p{margin:0 0 var(--tw-space-component-gap);font:14px/1.5 var(--tw-glass-font-ui)}.tw-dialog form{margin-top:var(--tw-space-component-gap)}
@media(max-width:600px){.tw-field-grid{grid-template-columns:1fr}.tw-carousel{max-width:100%}}
.tw-knob__face[data-tw-indicator="tick"]::before,.tw-knob__face[data-tw-indicator="early"]::before{display:block}.tw-knob__face[data-tw-indicator="tick"]::after,.tw-knob__face[data-tw-indicator="early"]::after{display:block;left:calc(var(--tw-tick-x,16)*2px + 6px);top:calc(var(--tw-tick-y,5)*2px + 6px);width:4px;height:4px;transform:none;background:#f3dab0;box-shadow:2px 0 #b49967,0 2px #8f7e52}.tw-knob__face[data-tw-indicator="early"]::after{height:6px;background:#f0c479;box-shadow:2px 0 #695734,0 2px #332e1c}
.tw-knob__face[data-tw-indicator="tick"][data-tw-legacy-face="bakelite"]::after{background:#e7d6b1;box-shadow:2px 0 #a99878,0 2px #74654c}
.tw-pedal-card{--tw-pedal-case:#eb8c38;display:flex;flex-direction:column;align-items:center;gap:0;width:195px;min-width:195px;min-height:267px;padding:0 6px 4px;border:0;border-top:0;background:color-mix(in srgb,var(--tw-pedal-case) 24%,#1c2825);box-shadow:none;color:var(--tw-ink);border-radius:var(--tw-surface-radius,12px)}.tw-pedal-card__header{width:100%;height:53px;display:flex;align-items:center;gap:var(--tw-space-label-gap);border-bottom:1px solid var(--tw-plate-light)}.tw-pedal-card__header strong{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:17px/1.1 var(--tw-glass-font-display)}.tw-pedal-card__edit{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:#f5ca8b;font:14px var(--tw-glass-font-display);cursor:pointer}.tw-pedal-card__edit:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-2px}.tw-pedal-card__art{position:relative;width:180px;height:180px;flex:none}.tw-pedal-card__art>img{width:180px;height:180px;image-rendering:pixelated;pointer-events:none}.tw-pedal-card__art::after{z-index:1;content:"";position:absolute;left:12%;right:12%;top:44%;height:13%;background:#171e1c;pointer-events:none}.tw-pedal-card__print{position:absolute;left:12%;right:12%;top:44%;height:13%;display:flex;align-items:center;justify-content:center;color:var(--tw-pedal-case);font:12px/1 var(--tw-glass-font-ui);font-weight:700;letter-spacing:.14em;z-index:2;pointer-events:none}.tw-pedal-card__switch{position:absolute;left:29%;top:57%;width:42%;height:35%;min-height:44px;border:0;padding:0;background:transparent;z-index:3;cursor:pointer}.tw-pedal-card__switch:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-2px}.tw-pedal-card__switch:active{background:#f8ba5829}.tw-pedal-card__status{display:flex;align-items:center;justify-content:center;gap:var(--tw-space-label-gap);height:16px;color:var(--tw-ink);font:10px var(--tw-glass-font-ui);letter-spacing:.1em}.tw-pedal-card__status i{width:5px;height:5px;background:#6e766e;box-shadow:0 0 0 1px #151c18}.tw-pedal-card[data-enabled=true] .tw-pedal-card__status i{background:#ffbd6e;box-shadow:0 0 5px #ffbd6e}.tw-pedal-card[data-enabled=false] .tw-pedal-card__art>img{filter:saturate(.6) brightness(.72)}
@media(max-height:650px) and (min-width:700px){.tw-pedal-card{width:174px;min-width:174px;min-height:228px}.tw-pedal-card__header{height:44px}.tw-pedal-card__header strong{font-size:14px}.tw-pedal-card__art,.tw-pedal-card__art>img{width:150px;height:150px}}
.tw-module-directory{display:grid;gap:var(--tw-space-section-gap)}.tw-module-directory__section h3{margin:0 0 var(--tw-space-component-gap);font:21px var(--tw-glass-font-display);color:var(--tw-ink)}.tw-module-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tw-space-component-gap)}.tw-module-entry{display:flex;align-items:flex-start;gap:var(--tw-space-control-gap);min-width:0;min-height:74px;padding:var(--tw-space-component-padding);border:0;background:var(--tw-plate);color:var(--tw-ink);text-align:left;cursor:pointer;border-radius:var(--tw-surface-radius,12px)}.tw-module-entry>svg{width:24px;height:24px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}.tw-module-entry>.tw-icon{fill:currentColor;stroke:none;pointer-events:none}.tw-module-entry__copy{display:flex;flex-direction:column;gap:var(--tw-space-label-gap);min-width:0}.tw-module-entry strong{font:17px/1.1 var(--tw-glass-font-display)}.tw-module-entry small{font:10px/1.3 var(--tw-glass-font-ui)}.tw-module-entry__status{opacity:.8;text-transform:none;letter-spacing:.06em}.tw-module-entry:disabled{opacity:1;cursor:default}.tw-module-entry:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-3px}
.tw-guitar-list{display:grid;gap:var(--tw-space-component-gap)}.tw-guitar-entry{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tw-space-label-gap);min-height:74px;padding:var(--tw-space-component-padding);border:0;background:var(--tw-plate);color:var(--tw-ink);text-align:left;cursor:pointer;border-radius:var(--tw-surface-radius,12px)}.tw-guitar-entry strong{font:22px var(--tw-glass-font-display)}.tw-guitar-entry span,.tw-guitar-entry small{font:12px/1.4 var(--tw-glass-font-ui)}.tw-guitar-entry[aria-current=true]{outline:2px solid var(--tw-focus,var(--tw-accent-light));outline-offset:-3px}.tw-guitar-entry:disabled{opacity:1;cursor:default}.tw-guitar-entry:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}
.tw-effect-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tw-space-component-gap)}.tw-effect-picker__card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--tw-space-label-gap);min-width:0;min-height:120px;padding:var(--tw-space-component-padding);border:0;background:var(--tw-plate);color:var(--tw-ink);text-align:left;cursor:pointer;border-radius:var(--tw-surface-radius,12px)}.tw-effect-picker__card img{width:44px;height:44px;image-rendering:pixelated}.tw-effect-picker__card strong{font:17px/1.1 var(--tw-glass-font-display)}.tw-effect-picker__card small{font:10px/1.3 var(--tw-glass-font-ui)}.tw-effect-picker__card:disabled{opacity:1;cursor:default}.tw-effect-picker__card:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent-light));outline-offset:3px}
.tw-asset-card{padding:var(--tw-space-component-padding);border:0;background:var(--tw-recess);color:var(--tw-ink);border-radius:var(--tw-surface-radius,12px)}.tw-asset-card h3{margin:0;font:22px var(--tw-glass-font-display)}.tw-asset-card p{margin:var(--tw-space-component-gap) 0;overflow-wrap:anywhere;font:14px/1.5 var(--tw-glass-font-ui)}.tw-asset-card__status{font:11px var(--tw-glass-font-ui);color:var(--tw-accent-light)}.tw-asset-card__actions{display:flex;flex-wrap:wrap;gap:var(--tw-space-control-gap);margin-top:var(--tw-space-component-gap)}.tw-asset-card--capture{border-style:dashed}.tw-empty{padding:var(--tw-space-component-padding);border:0;font:14px var(--tw-glass-font-ui);color:var(--tw-muted);border-radius:var(--tw-surface-radius,12px)}
@media(max-width:580px){.tw-module-entries{grid-template-columns:1fr}.tw-effect-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Shared typography is explicit, including adoption outside a tw-scope. */
:is(.tw-button,.tw-glass-button,.tw-tab),.tw-scope :is(.tw-button,.tw-glass-button,.tw-tab){font:400 16px/1.1 var(--tw-glass-font-display)}
[data-tw-cap="cast"]{--tw-button-texture:url("./assets/button-edge-cast.svg")}
[data-tw-cap="steel"]{--tw-button-texture:url("./assets/button-edge-steel.svg")}

/* Explicit opt-in predecessor retains its historical stepped plate rendering. */
:is([data-tw-cap="previous"] :is(.tw-button,.tw-glass-button),:is(.tw-button,.tw-glass-button)[data-tw-cap="previous"]){background:transparent;color:var(--tw-glass-ink);text-shadow:none;clip-path:none;--tw-previous-shape: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));box-shadow:none}
:is([data-tw-cap="previous"] :is(.tw-button,.tw-glass-button),:is(.tw-button,.tw-glass-button)[data-tw-cap="previous"])::before{inset:2px;border:0;border-image:none;border-radius:0;background:var(--tw-cap);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 var(--tw-glass-light),inset -2px -2px var(--tw-case-low)}
:is([data-tw-cap="previous"] :is(.tw-button,.tw-glass-button),:is(.tw-button,.tw-glass-button)[data-tw-cap="previous"])::after{content:"";display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--tw-seam);clip-path:var(--tw-previous-shape)}
:is([data-tw-cap="previous"] .tw-button--dark,.tw-button--dark[data-tw-cap="previous"]){color:var(--tw-ink)}
:is([data-tw-cap="previous"] :is(.tw-button,.tw-glass-button),:is(.tw-button,.tw-glass-button)[data-tw-cap="previous"]):is([aria-pressed=true],[aria-selected=true],.tw-button--accent,.tw-glass-button--primary){color:var(--tw-on-accent,var(--tw-ink))}
:is([data-tw-cap="previous"] :is(.tw-button,.tw-glass-button),:is(.tw-button,.tw-glass-button)[data-tw-cap="previous"]):is(:disabled,[aria-disabled=true]){--tw-cap:var(--tw-glass);color:var(--tw-glass-ink);opacity:1}

:is([data-tw-cap="previous"] :is(.tw-button--signal,.tw-glass-button--signal),:is(.tw-button--signal,.tw-glass-button--signal)[data-tw-cap="previous"]):not(:disabled){color:var(--tw-button-on-signal)}

/* Flat utility actions share sizing/semantics, not an extra hardware face. */
:is(.tw-button,.tw-glass-button).tw-button--quiet{background:transparent;color:var(--tw-ink);text-shadow:none;box-shadow:none;translate:none}
:is(.tw-button,.tw-glass-button).tw-button--quiet::before,:is(.tw-button,.tw-glass-button).tw-button--quiet::after{display:none}
:is(.tw-button,.tw-glass-button).tw-button--quiet:hover:not(:disabled,[aria-disabled=true]){background:var(--tw-recess)}
:is(.tw-button,.tw-glass-button).tw-button--quiet[aria-pressed=true],:is(.tw-button,.tw-glass-button).tw-button--quiet[aria-selected=true]{background:var(--tw-recess);color:var(--tw-ink);box-shadow:inset 0 -2px var(--tw-accent);translate:none}

/* System colors intentionally outrank every material/treatment/compatibility skin. */
@media(forced-colors:active){
 .tw-tabs:where(:not(.tw-carousel-indicators,[aria-orientation=vertical]))::before{bottom:0;background:GrayText;forced-color-adjust:none}
 :is(.tw-button,.tw-glass-button,.tw-tab){forced-color-adjust:auto;background:ButtonFace!important;color:ButtonText!important;border:2px solid ButtonText!important;text-shadow:none!important;box-shadow:none!important;clip-path:none!important}
 :is(.tw-button,.tw-glass-button,.tw-tab)::before,:is(.tw-button,.tw-glass-button,.tw-tab)::after{display:none!important}
 :is(.tw-button,.tw-glass-button,.tw-tab):is([aria-pressed=true],[aria-selected=true]){outline:2px solid Highlight!important;outline-offset:1px!important}
 :is(.tw-button,.tw-glass-button,.tw-tab):focus-visible{outline:3px solid ButtonText!important;outline-offset:3px!important}
 :is(.tw-button,.tw-glass-button,.tw-tab):disabled{color:GrayText!important;opacity:1!important}
}

/* Quiet native disclosure: optional settings and documentation, not an action button. */
.tw-disclosure--quiet>summary{gap:var(--tw-space-component-gap);min-height:var(--tw-touch);padding:0;list-style:none;background:transparent;border:0;border-radius:0;font:13px/1.5 var(--tw-glass-font-ui);color:var(--tw-ink)}
.tw-disclosure--quiet>summary::-webkit-details-marker{display:none}
.tw-disclosure--quiet>summary::before{content:'+';font:18px var(--tw-glass-font-ui);width:14px}
.tw-disclosure--quiet[open]>summary::before{content:'−'}

/* Disabled is a palette state, not a translucent copy of the selected hue.
 * These roles mirror tokens/source.json's monochrome palette and the approved
 * monochrome button roles in treatments.css (covered by disabled-palette tests).
 * Match :disabled, including disabled fieldsets, without recoloring their enabled
 * first legend. ARIA-disabled styling does not replace the host's event guards.
 * Wrappers carry the palette to labels, readouts and non-input control artwork. */
:is(.tw-image-toggle__button,.tw-button,.tw-glass-button,.tw-tab,.tw-input,.tw-control,.tw-fader__input,.tw-module-entry,.tw-guitar-entry,.tw-effect-picker__card,.tw-navigation__destination,.tw-navigation__knob,.tw-pedal__footswitch,.tw-pedal-card__switch,.tw-pedal-card__edit,.tw-toggle input,.tw-choice input,.tw-knob input,.tw-rocker button,.tw-menu [role^="menuitem"]):is(:disabled,[aria-disabled=true]),
:is(.tw-field,.tw-control-field,.tw-toggle,.tw-knob,.tw-fader,.tw-choice,.tw-control-choice,.tw-knob__face,.tw-control-knob-face):has(> :is(:disabled,[aria-disabled=true])),
:is(.tw-knob,.tw-control-field):has(> :is(.tw-knob__face,.tw-control-knob-face) > :is(:disabled,[aria-disabled=true])),
.tw-rocker:has(>button:disabled):not(:has(>button:not(:disabled))),
.tw-pedal:has(.tw-pedal__footswitch:is(:disabled,[aria-disabled=true])),
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))){
 --tw-accent-fill:initial;--tw-accent-edge:initial;--tw-accent-indicator:initial;--tw-on-accent-fill:initial;
 --tw-case:#f6f6f6;--tw-case-light:#ffffff;--tw-case-low:#c3c3c3;--tw-seam:#202020;
 --tw-plate:#eeeeee;--tw-plate-light:#ffffff;--tw-plate-shadow:#b0b0b0;--tw-ink:#202020;--tw-muted:#575757;
 --tw-recess:#e6e6e6;--tw-recess-light:#ffffff;--tw-glass:#f6f6f6;--tw-glass-light:#ffffff;--tw-glass-ink:#202020;--tw-glass-muted:#575757;
 --tw-accent:#262626;--tw-accent-light:#d7d7d7;--tw-accent-low:#080808;--tw-stamp:#202020;--tw-rack-surface:#e6e6e6;--tw-window-surface:#202020;
 --tw-button-neutral:#eeeeee;--tw-button-neutral-edge:#b0b0b0;--tw-button-ink:#202020;--tw-button-primary:#262626;--tw-button-primary-edge:#080808;--tw-button-on-primary:#f6f6f6;
 --tw-button-signal:#d7d7d7;--tw-button-signal-edge:#888888;--tw-button-on-signal:#202020;--tw-button-base:#484848;--tw-button-on-base:#f6f6f6;
 --tw-on-accent:#f6f6f6;--tw-appearance-on-accent:#f6f6f6;--tw-art-filter:grayscale(1);
}
:is(.tw-button,.tw-glass-button,.tw-tab):is(:disabled,[aria-disabled=true]){--tw-cap:var(--tw-glass);--tw-button-face:var(--tw-button-neutral);--tw-button-edge:var(--tw-button-neutral-edge);--tw-button-label:var(--tw-button-ink);cursor:not-allowed;translate:none;opacity:1}
/* Grayscale only artwork that has baked-in colors; semantic surfaces above use
 * the actual monochrome roles. No asset pixels or stored control values change. */
:is(.tw-knob__face,.tw-control-knob-face):has(> :is(:disabled,[aria-disabled=true])),
:is(.tw-fader__input,.tw-navigation__knob,.tw-input[type=color],.tw-control-input[type=color]):is(:disabled,[aria-disabled=true]),
:is(.tw-button,.tw-glass-button,.tw-tab,.tw-effect-picker__card,.tw-navigation__destination):is(:disabled,[aria-disabled=true]) :is(img,svg,canvas),
:is(.tw-choice,.tw-control-choice):has(> :is(:disabled,[aria-disabled=true])) :is(img,i),
.tw-control-choice[data-bildpunkt-choice=swatch]:has(> :is(:disabled,[aria-disabled=true]))>span,
.tw-pedal:has(.tw-pedal__footswitch:is(:disabled,[aria-disabled=true])) .tw-pedal__art,
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))) .tw-pedal-card__art{filter:var(--tw-art-filter,grayscale(1))}
.tw-toggle input:disabled:checked::after{background-color:var(--tw-glass)}
/* System colors replace all decorative textures, including a disabled on-state. */
@media(forced-colors:active){.tw-toggle input::before{background:Canvas;border-color:ButtonText;box-shadow:none}.tw-toggle input::after{background:ButtonText;box-shadow:none}.tw-toggle input:checked::before{background:Highlight;border-color:Highlight}.tw-toggle input:checked::after{background:HighlightText}.tw-toggle input:disabled::before{border-color:GrayText}.tw-toggle input:disabled::after,.tw-toggle input:disabled:checked::after{background:GrayText}}
.tw-rocker button:disabled{color:var(--tw-muted)}
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))){background:var(--tw-recess)}
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))) .tw-pedal-card__edit{color:var(--tw-ink)}
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))) .tw-pedal-card__print{color:var(--tw-glass-light)}
.tw-pedal:has(.tw-pedal__footswitch:is(:disabled,[aria-disabled=true])) .tw-pedal__status i,
.tw-pedal-card:is([data-disabled=true],:has(.tw-pedal-card__switch:is(:disabled,[aria-disabled=true]))) .tw-pedal-card__status i{background:var(--tw-muted);box-shadow:none}
@media(forced-colors:active){
 /* System colors must not be converted back to gray by an inherited art filter. */
 [data-tw-theme],:is(.tw-image-toggle__button,.tw-button,.tw-glass-button,.tw-tab,.tw-input,.tw-control,.tw-control-field,.tw-field,.tw-toggle,.tw-knob,.tw-fader,.tw-choice,.tw-control-choice,.tw-knob__face,.tw-control-knob-face,.tw-pedal,.tw-pedal-card){--tw-art-filter:none!important}
 :is(.tw-image-toggle__button,.tw-button,.tw-glass-button,.tw-tab,.tw-input,.tw-control,.tw-fader__input,.tw-module-entry,.tw-guitar-entry,.tw-effect-picker__card,.tw-navigation__destination,.tw-navigation__knob,.tw-pedal__footswitch,.tw-pedal-card__switch,.tw-pedal-card__edit,.tw-toggle input,.tw-choice input,.tw-knob input,.tw-rocker button,.tw-menu [role^="menuitem"]):is(:disabled,[aria-disabled=true]){forced-color-adjust:auto;color:GrayText!important}
}

/* An arbitrary image can be a toggle; art dimensions and product semantics stay host-owned.
 * Dots follow the image alpha, using the current palette rather than baked-in color. */
.tw-image-toggle{display:inline-flex;flex-direction:column;align-items:center;gap:var(--tw-space-label-gap);width:var(--tw-image-toggle-width,192px);max-width:100%;padding:var(--tw-space-component-padding-compact);border:0;border-radius:var(--tw-surface-radius,12px);background:transparent;color:var(--tw-ink);font:14px/1.4 var(--tw-glass-font-ui);text-align:center;vertical-align:top}
.tw-image-toggle__button{min-width:44px;min-height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tw-image-toggle__button:focus-visible{outline:3px solid var(--tw-focus,var(--tw-accent));outline-offset:3px}
.tw-image-toggle__surface{position:relative;isolation:isolate;overflow:visible;transition:transform 160ms ease}
.tw-image-toggle>.tw-image-toggle__surface{display:block;width:100%;aspect-ratio:1}
.tw-image-toggle__image{position:relative;display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;pointer-events:none;transition:filter 160ms ease;z-index:1}
.tw-image-toggle__surface[data-image-pixelated=true]>.tw-image-toggle__image{image-rendering:pixelated}
.tw-image-toggle__surface[data-image-pressed=false]>.tw-image-toggle__image{filter:saturate(.25) brightness(.88)}
.tw-image-toggle__surface[data-image-pressed=true]{transform:translateY(-3px)}
.tw-image-toggle__surface[data-image-pressed=true]>.tw-image-toggle__image{filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--tw-ink) 18%,transparent))}
.tw-image-toggle__glow{position:absolute;inset:-8%;z-index:0;pointer-events:none;color:var(--tw-button-primary,var(--tw-accent));mask:var(--tw-image-toggle-source,none) center/contain no-repeat;-webkit-mask:var(--tw-image-toggle-source,none) center/contain no-repeat;opacity:0;transition:opacity 160ms ease}
.tw-image-toggle__glow::before{content:"";position:absolute;inset:0;background:currentColor;mask:url("./assets/image-toggle-dither.svg") 0 0/8px 8px repeat;-webkit-mask:url("./assets/image-toggle-dither.svg") 0 0/8px 8px repeat}
.tw-image-toggle__surface[data-image-pressed=true]>.tw-image-toggle__glow{opacity:.6}
.tw-image-toggle__caption{display:flex;flex-direction:column;align-items:center;gap:var(--tw-space-label-gap);max-width:100%;overflow-wrap:anywhere}
.tw-image-toggle__label{font-weight:600}
.tw-image-toggle__status{display:inline-flex;align-items:center;gap:var(--tw-space-label-gap);color:var(--tw-muted);font-size:12px}
.tw-image-toggle__status::before{content:'';width:5px;height:5px;border:1px solid currentColor}
.tw-image-toggle[aria-pressed=true] .tw-image-toggle__status::before{background:var(--tw-button-primary,var(--tw-accent));border-color:var(--tw-button-primary-edge,var(--tw-accent-low))}
.tw-image-toggle:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in srgb,var(--tw-recess) 65%,transparent)}
.tw-image-toggle__button:is(:disabled,[aria-disabled=true]){cursor:not-allowed}
/* Native fieldsets and host-applied aria-disabled are unavailable too. Off is never disabled. */
.tw-image-toggle__surface:is([data-image-disabled=true],:has(.tw-image-toggle__button:is(:disabled,[aria-disabled=true]))),.tw-image-toggle__button:is(:disabled,[aria-disabled=true])>.tw-image-toggle__surface{transform:none;filter:grayscale(1)}
.tw-image-toggle__surface:is([data-image-disabled=true],:has(.tw-image-toggle__button:is(:disabled,[aria-disabled=true])))>.tw-image-toggle__image,.tw-image-toggle__button:is(:disabled,[aria-disabled=true]) .tw-image-toggle__image{filter:grayscale(1)}
.tw-image-toggle__surface:is([data-image-disabled=true],:has(.tw-image-toggle__button:is(:disabled,[aria-disabled=true])))>.tw-image-toggle__glow,.tw-image-toggle__button:is(:disabled,[aria-disabled=true]) .tw-image-toggle__glow{display:none}
.tw-image-toggle:is(:disabled,[aria-disabled=true]){background:var(--tw-recess);color:var(--tw-muted)}
.tw-image-toggle:is(:disabled,[aria-disabled=true]) .tw-image-toggle__status::before{background:none;border-style:dashed}
@media(prefers-reduced-motion:reduce){.tw-image-toggle__surface,.tw-image-toggle__image,.tw-image-toggle__glow{transition:none}.tw-image-toggle__surface[data-image-pressed=true]{transform:none}}
[data-tw-motion=off] .tw-image-toggle__surface,[data-tw-motion=off] .tw-image-toggle__image,[data-tw-motion=off] .tw-image-toggle__glow{transition:none}
[data-tw-motion=off] .tw-image-toggle__surface[data-image-pressed=true]{transform:none}
@media(forced-colors:active){
 .tw-image-toggle__button{forced-color-adjust:auto;border:2px solid ButtonText!important;color:ButtonText!important;background:ButtonFace!important}
 .tw-image-toggle__button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:1px}
 .tw-image-toggle__button:focus-visible{outline:3px solid ButtonText;outline-offset:3px}
 .tw-image-toggle__button:is(:disabled,[aria-disabled=true]){border-color:GrayText!important;color:GrayText!important}
 .tw-image-toggle__surface{transform:none!important;filter:none!important}
 .tw-image-toggle__image{filter:none!important}
 .tw-image-toggle__glow{display:none}
 .tw-image-toggle__status{color:inherit}
 .tw-image-toggle[aria-pressed=true] .tw-image-toggle__status::before{background:Highlight;border-color:Highlight;forced-color-adjust:none}
}

.tw-pedal__footswitch{z-index:2}