/* A single cast module for Tone and adding effects, with individual touch targets. */
@media(min-width:581px){.left{grid-template-rows:222px 24px 52px minmax(0,1fr) 18px}}
.parts-heading{padding:5px 8px 0;min-height:0;align-items:flex-start}
.module-primary{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:2px;align-items:center;margin:3px 6px 0;padding:2px;background:#343a30;border:2px solid #121a15;box-shadow:inset 1px 1px #777969;min-width:0}
.module-primary button{--cap-image:var(--cap-rest);position:relative;isolation:isolate;border:0;clip-path:none;background:transparent;color:#f1ecd6;box-shadow:none;height:44px;min-height:44px;margin:0;cursor:pointer}
.module-primary button::before{content:"";position:absolute;z-index:-1;inset:0;border:8px solid transparent;border-image:var(--cap-image) 4 fill / 8px / 0 stretch;image-rendering:pixelated}
.module-primary button:focus-visible{outline:2px solid #e7c58e;outline-offset:-3px}
.module-primary #go-tone{display:flex;align-items:center;gap:8px;text-align:left;padding:0 10px;font-size:16px}
.module-primary #go-tone span{font-size:18px;color:#c8cbb9}.module-primary #go-tone i{font-style:normal;margin-left:auto;visibility:hidden;color:#e5b874}
.module-primary #go-tone[aria-current=true]{--cap-image:var(--cap-selected)}.module-primary #go-tone[aria-current=true] i{visibility:visible}
.module-primary #add-module{width:44px;padding:0;font:24px 'Redaction 50',serif;line-height:44px}
.module-primary #add-module[aria-pressed=true]{--cap-image:var(--cap-selected)}
#parts{padding-top:6px}.screen{overflow:visible;position:relative;z-index:20}.screen-menu{z-index:30}#unit-menu{width:190px}#unit-menu button{min-height:44px}
.visualizer-overlay[hidden]{display:none!important}.visualizer-overlay{position:absolute;inset:0;z-index:80;overflow:hidden;background:#f6f5ef}.visualizer-overlay canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated}.visualizer-bar{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#172126;background:#f6f5efd9;padding:4px 4px 4px 12px;font:700 11px system-ui,sans-serif}.visualizer-bar button{min-height:44px;min-width:150px;padding:6px 12px;background:#242d28;color:#fff4d5;border:2px solid #101a14;font:700 14px system-ui,sans-serif}
.visualizer-bar button{background:#f5f0db!important;color:#172126!important;border-color:#172126!important;text-shadow:none!important}
/* The rail is one continuous recessed surface; the caps supply the structure. */
@media(min-width:581px){.left{grid-template-rows:222px 22px 44px minmax(0,1fr) 18px}}
.parts-heading{background:var(--recess);box-shadow:none;padding:4px 8px 0;color:#c8c7ae}
.parts-heading span{color:#c8c7ae}
.module-primary{margin:0;padding:0 6px;gap:0;border:0;box-shadow:none;background:var(--recess)}
.module-primary button::before{inset:3px 0!important}
.module-primary #go-tone{padding:0 10px;font-size:16px}
html:is([data-buttons="cast"],[data-buttons="steel"]) #add-module::after{display:none}
#parts{padding-top:1px;box-shadow:none}
.home-card strong{font-size:23px;line-height:1}
/* The Unit menu stays on top of the carousel and cards, with a 44px hit area. */
.unit{z-index:40}
.unit-heading{gap:4px;position:relative}
#unit-count{margin-left:5px;color:var(--muted)}
.unit-heading .screen-menu{width:44px;height:16px;flex:none}
.unit-heading #menu-button{top:-14px;right:-7px;width:44px;height:44px;min-height:44px;line-height:44px;font:24px 'Redaction 50',serif}
html:is([data-buttons="cast"],[data-buttons="steel"]) .unit-heading #menu-button::before,html:is([data-buttons="cast"],[data-buttons="steel"]) .unit-heading #menu-button::after{inset:7px!important}
.unit-heading #unit-menu{top:26px;right:0;width:190px}
/* One Unit instrument: identity, guitar window and a shared rocker. */
@media(min-width:581px){
 .unit{display:grid;grid-template-rows:38px minmax(0,1fr) 44px;gap:4px;padding:5px 6px 6px;min-height:0}
 .unit-heading{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:0;align-items:center;height:38px}
 #unit-name{min-width:0;text-align:left;font-size:15px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0ecd6}
 .unit-heading .screen-menu{width:36px;height:38px}
 .unit-heading #menu-button{top:-3px;right:-4px}
 .unit-heading #unit-menu{top:34px;right:0}
 .unit-carousel{height:auto;min-height:0;background:#2c3630;border:3px solid #17231b;box-shadow:inset 2px 2px #121a16,inset -2px -2px #5b6555}
 .unit-slide img{width:106px;height:106px;max-width:100%;max-height:100%}
 .unit-switcher{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(44px,1fr) 50px minmax(44px,1fr);gap:0;height:44px;align-items:center}
 .unit-switcher::before{content:'';position:absolute;z-index:-1;inset:1px 0;border:8px solid transparent;border-image:var(--cap-rest) 4 fill / 8px / 0 stretch;image-rendering:pixelated;pointer-events:none}
 .unit-switcher button{width:100%!important;height:44px!important;min-height:44px!important;margin:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;color:#f0ecd6;font:25px 'Redaction 50',serif;line-height:44px;translate:none!important}
 html:is([data-buttons="cast"],[data-buttons="steel"]) .unit-switcher button::before,html:is([data-buttons="cast"],[data-buttons="steel"]) .unit-switcher button::after{display:none!important}
 .unit-switcher button:active{color:#e7c58e;transform:translateY(1px)}
 .unit-switcher button:focus-visible{outline:2px solid #e7c58e;outline-offset:-5px}
 #unit-count{margin:0;text-align:center;color:#c9c8b5;font:11px 'Redaction 50',serif;white-space:nowrap}
}
@media(min-width:581px){#unit-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:15px;font-size:14px}}
/* Plain digital display; the guitar-window visualizer is independent. */
.screen{
 background-image:none;
 background-color:var(--glass);
}