:root{color-scheme:dark;--amber:#e8c58b;--text:#eeece6;--muted:#b8b8b1;--panel:#282a28;--line:#535651;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#555}body{height:100dvh;padding:6px;color:var(--text);font:14px/1.45 var(--sans)}button,input,select,textarea{font:inherit;color:inherit}button,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button,select{min-height:44px}button{min-width:44px}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}a{color:inherit}button,input{touch-action:manipulation}[hidden]{display:none!important}.sr-only,.control-hint{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.machine{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:6px;padding:5px;background:#252625;border:1px solid #62655f;border-radius:12px;box-shadow:inset 0 0 0 3px #171817,0 4px 15px #0005}.monitor{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;padding:10px 9px 0;border:1px solid #242424;border-radius:7px;background:#777;overflow:hidden}.screen-rim{display:flex;flex:1;min-height:0;min-width:0;padding:4px;background:linear-gradient(150deg,#313131,#999 45%,#424242);border:1px solid #262626;border-radius:1px;box-shadow:0 0 0 2px #555}.screen-surface{position:relative;flex:1;min-height:0;min-width:0;background:#777;overflow:hidden;touch-action:none}.machine-artwork{position:absolute;width:var(--art-width,100%);height:var(--art-height,100%);left:50%;top:50%;transform:translate(-50%,-50%);isolation:isolate}.machine-artwork>svg{display:block;width:100%;height:100%}.neutral-field{position:absolute;inset:0;background:#bcbcbc;display:flex;align-items:center;justify-content:center;color:#555;font:22px var(--mono);pointer-events:none}.monitor-bottom{display:flex;gap:8px;align-items:center;justify-content:space-between;min-height:44px;color:#eee;font:10px var(--mono)}.screen-instruction{line-height:1.35}.focus-button{border:0;background:transparent;font:11px var(--mono);white-space:nowrap;padding:8px}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#c0c0b0,#222 65%);border:1px solid #111;top:0;z-index:1}.screw:after{content:'';display:block;width:5px;height:1px;background:#111;transform:translate(1px,3px) rotate(-40deg)}.screw-tl{left:0}.screw-tr{right:0}
.console{min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 20px;border:1px solid #111;border-radius:5px;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(110deg,#30332e,#252724);scrollbar-width:thin;scrollbar-color:#92978b #272a25}.sheet-toggle{display:none}.readout{background:linear-gradient(#182017,#20291a);padding:10px 12px;border:1px solid #0e120b;border-radius:4px;box-shadow:inset 0 2px 6px #000b;color:#dfebc1}.readout-top{display:flex;justify-content:space-between;font:9px var(--mono);color:#aebd96;letter-spacing:.5px}.readout h1{font:17px/1.25 var(--mono);margin:5px 0}.readout p{font:10px/1.4 var(--mono);margin:0;max-height:2.8em;overflow:hidden}.primary-actions{display:grid;grid-template-columns:1fr 70px 44px;gap:7px;margin:10px 0}.hardware-button,.control-banks button,.band-reorder button{background:linear-gradient(#44483d,#282d22);border:1px solid #111;border-top-color:#7b806c;border-radius:4px;box-shadow:0 2px 3px #0008,inset 0 0 0 1px #5b635044;padding:8px 9px;font:11px/1.3 var(--mono)}.hardware-button:hover,.control-banks button:hover{filter:brightness(1.2)}.hardware-button[aria-pressed=true],.control-banks .is-active{color:var(--amber);background:linear-gradient(#151b10,#262e1c);box-shadow:inset 0 1px 4px #000}.primary-actions #galleryOpen{display:flex;align-items:center;justify-content:space-between}.primary-actions #galleryOpen span{opacity:.6}.help-button{width:44px;height:44px;border-radius:50%;border:1px solid #6a6e62;background:#2b3028;font:20px var(--mono)}.control-banks{display:flex;gap:5px}.control-banks button{flex:1;min-width:0;font-size:11px;padding:7px 5px}.bank-number{display:none}.bank-title{white-space:normal}.scope-note{font:10px var(--mono);color:var(--amber);margin:9px 0 3px}.control-guide{font:11px/1.5 var(--sans);color:var(--muted);min-height:34px;height:auto;margin:3px 0 10px;overflow:visible}.fader-bank{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:14px 6px;align-items:start}.fader{display:flex;flex-direction:column;align-items:center;min-width:44px}.control-heading{display:flex;flex-direction:column;align-items:center;width:100%;gap:4px}.control-heading label{font:10px/1.25 var(--sans);text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;width:100%;hyphens:auto;overflow-wrap:anywhere}.fader .control-heading{margin-top:6px}.fader-track{width:44px;height:100px;position:relative;background:repeating-linear-gradient(to top,transparent 0 9px,#939b8180 9px 10px) left center/3px 96px no-repeat,repeating-linear-gradient(to top,transparent 0 9px,#939b8180 9px 10px) right center/3px 96px no-repeat}.fader-track:before{content:'';position:absolute;left:19px;top:0;width:6px;height:100%;border-radius:4px;background:#080c06;box-shadow:inset 1px 1px 3px #000,1px 0 1px #70765e69}.fader input[type=range]{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;position:absolute;inset:0;width:44px;height:100%;margin:0;background:transparent;cursor:ns-resize}.fader input[type=range]::-webkit-slider-runnable-track{width:6px;background:transparent;border:0}.fader input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:26px;margin-left:-11px;border:1px solid #080a06;border-radius:3px;background:linear-gradient(#686d5c 0,#303929 13%,#131c0e 43%,#ffe0a3 46%,#eab04a 55%,#11190d 59%,#334128);box-shadow:0 3px 5px #000}.fader input[type=range]::-moz-range-track{width:6px;background:#080c06}.fader input[type=range]::-moz-range-thumb{width:28px;height:26px;border:1px solid #111;border-radius:3px;background:linear-gradient(#454d3c,#151b0f 44%,#ffd26f 47%,#ffbb34 53%,#171b12 57%,#333d28)}.knob-bank:empty,.knobs-module:has(.knob-bank:empty){display:none}.utility-module{margin:14px 0}.panel-actions,.dice-actions{display:flex;gap:7px;margin:10px 0}.panel-actions>button{flex:1;min-width:0}.text-button{background:none;border:1px solid #666d59;border-radius:3px;padding:8px 6px;font:11px var(--mono)}.dice-actions>button{flex:1;min-width:0}.wide-button{width:100%;margin:10px 0}.machine-toast{font:11px/1.5 var(--mono);color:var(--amber);min-height:0;transition:opacity .15s;opacity:0}.machine-toast.visible,.machine-toast.is-visible{opacity:1;padding:7px 0}.machine-toast:empty{display:none}
.control-panel{margin-top:9px;border:1px solid #59614f;border-radius:5px;background:#20271c}.control-panel>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;list-style:none;font:12px var(--mono)}.control-panel>summary::-webkit-details-marker{display:none}.control-panel>summary span{font-size:16px;color:var(--amber)}.control-panel[open]>summary{border-bottom:1px solid #4c5840;color:var(--amber)}.control-panel[open]>summary span{transform:rotate(45deg)}.control-panel-content{padding:12px}.field-label{display:block;font:11px/1.5 var(--mono);margin:12px 0 6px}.field-label:first-child{margin-top:0}input:not([type=range]):not([type=checkbox]):not([type=color]),select,textarea{min-width:0;max-width:100%;min-height:44px;border:1px solid #626c52;border-radius:3px;padding:8px;background:#161e11}select,textarea{width:100%}textarea{resize:vertical;max-height:250px}input[type=range]{accent-color:var(--amber);width:100%;height:44px;margin:3px 0}input[type=color]{width:50px;height:44px;padding:2px;border:1px solid #626c52;background:#171e12}.panel-explanation,.sampling-note,.panel-footnote{font:11px/1.55 var(--sans);color:#bac3b0;margin:10px 0}.sampling-note{color:var(--amber)}.toggle-row{display:flex;align-items:center;gap:8px;min-height:44px;font:12px/1.4 var(--sans);cursor:pointer}.toggle-row input{width:22px;height:22px;flex-shrink:0;accent-color:var(--amber);margin:11px}.panel-title{font:11px var(--mono);display:flex;justify-content:space-between;gap:6px;margin:8px 0 14px}.panel-title small{font-size:9px}.palette-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}.palette-swatch{display:flex;flex-direction:column;align-items:stretch;gap:5px;border:1px solid transparent;background:transparent;padding:4px;font:10px var(--mono);min-height:66px}.palette-swatch.is-active{border-color:var(--amber);border-radius:3px}.swatch-chip{display:block;width:100%;height:28px;border:1px solid #ffffff33}.swatch-name{font-size:9px;line-height:1.2;text-align:center;min-height:24px}.palette-sequence{display:flex;flex-wrap:wrap;gap:5px;font:10px var(--mono);margin:8px 0}.sequence-label{width:100%}.sequence-color{width:24px;height:16px}.selected-color{display:flex;align-items:center;justify-content:space-between;gap:12px;font:12px var(--mono);margin:15px 0}.selected-color small{display:block;font:10px/1.5 var(--sans);color:var(--muted);margin-top:3px}.color-slider-label{font:11px var(--mono);display:flex;justify-content:space-between;margin-top:10px}.range-ends{display:flex;justify-content:space-between;color:#b1bba5;font:8px var(--mono)}.active-colors{display:grid;gap:10px;margin:10px 0}.active-color-row{display:grid;grid-template-columns:16px minmax(0,1fr) 68px 12px;gap:5px;align-items:center}.active-color-chip{height:28px;border:1px solid #ffffff40}.active-color-select{width:100%;font-size:11px}.active-color-share{width:100%;font:11px var(--mono);padding:6px 2px!important}.active-color-unit{font-size:10px}.band-reorder{grid-column:2/-1;display:flex;gap:6px}.band-reorder button{min-width:44px;min-height:44px}.sequence-title{border-top:1px solid #566247;margin-top:20px;padding-top:14px}.module-preview{height:36px;display:flex;overflow:hidden;border:1px solid #7e8a70;margin:10px 0}.module-preview>span{display:block;min-width:0}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 9px}.inspector-grid>label{font:11px/1.5 var(--mono);min-width:0}.inspector-grid input{display:block;width:100%;margin-top:4px}.inspector-wide{grid-column:1/-1}.region-band-row{display:grid;grid-template-columns:minmax(0,1fr) 58px 44px 44px;gap:4px}.region-band-row input,.region-band-row select{width:100%;padding:5px!important;font-size:11px}.region-band-row button{padding:0}.edition{font:9px var(--mono);color:#929b86;text-align:center;margin:20px 0 0}#openArtwork{width:100%;font-size:11px;padding:5px}#openArtwork::file-selector-button{min-height:44px;background:#343e2b;color:var(--text);border:1px solid #647254;border-radius:3px}
#distancePreview{display:block;width:100%;height:auto;border:1px solid #747b6b;background:#777;margin:8px 0}#distanceValue{display:block;font:11px/1.5 var(--mono);color:var(--amber)}.sample-result{display:flex;align-items:center;gap:10px;font:11px/1.5 var(--mono)}#sampleColor{display:block;width:36px;height:36px;flex-shrink:0;background:#777;border:1px solid #bbb}.calibration{margin-top:14px}.calibration summary{min-height:44px;padding:10px 0;font-size:12px}.calibration p{font-size:11px}.calibration-scroll{overflow-x:auto;padding:7px 0}.calibration-scroll #calibrationCard{height:42px;width:323.5px;max-width:none;background:#dadada;color:#222;border:1px solid #222;text-align:center;line-height:40px;font:12px/40px var(--mono)}
dialog{color:var(--text);border:1px solid #71776a;border-radius:8px;padding:24px;background:#262c22;max-height:90dvh;overflow-y:auto;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.help-dialog{width:min(640px,calc(100vw - 24px));font:14px/1.6 var(--sans)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.dialog-heading h2{margin:0;font:20px var(--mono)}.help-dialog h2{font:22px var(--mono)}.help-dialog h3{font:16px var(--mono)}.honesty-card{padding:4px 16px;border:1px solid #737f63;border-radius:5px;background:#1c2317;margin:20px 0}.help-source{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}.gallery-dialog{width:min(1080px,calc(100vw - 24px))}.gallery-dialog>p{font-size:13px;color:#c9cebf}.gallery-dialog select{width:220px;margin-bottom:18px}.experiment-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.experiment-card{min-width:0;border:1px solid #565f48;border-radius:5px;padding:7px;background:#1c2317;text-align:left;overflow:hidden;display:flex;flex-direction:column;gap:6px}.experiment-card.is-active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}.experiment-thumbnail{display:block;aspect-ratio:1.3;overflow:hidden;background:#777;pointer-events:none}.experiment-thumbnail svg{width:100%;height:100%;display:block}.experiment-card strong{font:12px/1.4 var(--mono)}.experiment-description{font:11px/1.4 var(--sans);color:#bcc7ab}.experiment-session-state{font:9px var(--mono);color:#9dac8a}.experiment-card[data-modified=true] .experiment-session-state{color:var(--amber)}#shareQR{max-width:360px;margin:12px auto;background:white;padding:8px}#shareQR svg{display:block;width:100%;height:auto}#shareLink{font:11px/1.4 var(--mono);word-break:break-all}#shareStatus{font-size:12px}
body[data-surround=white]{background:#eee}body[data-surround=white] .monitor,body[data-surround=white] .screen-surface{background:#f2f1eb}body[data-surround=white] .monitor-bottom{color:#333}body[data-surround=black],body[data-surround=black] .monitor,body[data-surround=black] .screen-surface{background:#111}body[data-surround=console]{background:#22271d}body[data-surround=console] .monitor{background:linear-gradient(98deg,#181b18,#34372f 49%,#22251f)}body[data-surround=console] .screen-rim{background:linear-gradient(177deg,#090b09,#747463 6%,#21261d 47%,#98917a 97%,#131710)}body[data-surround=console] .screen-surface{background:#171d13}.machine-focus .machine{grid-template-columns:minmax(0,1fr)}.machine-focus .console{display:none}.machine-focus .monitor{padding:4px 4px 0}.machine-focus .screen-instruction{visibility:hidden}.machine-focus .screw{display:none}
@media(min-width:1600px){.machine{grid-template-columns:minmax(0,1fr) 380px}}
@media(max-width:899px){body{padding:3px}.machine{display:flex;flex-direction:column;gap:4px;padding:3px}.monitor{flex:1;min-height:110px;padding:5px 4px 0}.screen-rim{padding:2px}.monitor-bottom{height:44px}.screen-instruction{font-size:8px}.console{height:44dvh;flex-shrink:0;padding:0 12px 20px;border-radius:10px 10px 4px 4px}.sheet-toggle{display:flex;width:100%;position:sticky;top:0;z-index:5;justify-content:space-between;align-items:center;background:#2b3025;border:0;border-bottom:1px solid #616c54;font:12px var(--mono);padding:10px 3px}.console .readout{display:none}.primary-actions{margin:9px 0}.scope-note{display:none}.control-guide{margin-top:7px}.sheet-collapsed .console{height:46px;overflow:hidden}.sheet-collapsed .sheet-toggle .sheet-chevron{transform:rotate(180deg)}.experiment-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gallery-dialog{padding:16px}.machine-focus .monitor{flex:1}.machine-focus .console{display:none}}
@media(max-width:550px){.experiment-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-dialog{padding:12px}.experiment-description{display:none}.help-dialog{padding:18px}.screen-instruction{display:none}.monitor-bottom{justify-content:flex-end}.region-band-row{grid-template-columns:minmax(0,1fr) 62px 44px 44px}}
@media(max-height:500px) and (min-width:600px){.machine{display:grid;grid-template-columns:minmax(0,1fr) 326px}.console{height:100%;}.monitor{height:100%}.sheet-toggle{display:none}.sheet-collapsed .console{height:100%;overflow:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Viewer tools stay in one fixed-height footer. */
.monitor-bottom{height:44px;flex-shrink:0;position:relative}.help-source a{display:flex;align-items:center;min-height:44px}.experiment-thumbnail svg{pointer-events:none}
.viewer-tools{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:auto}.viewer-settings>summary{display:flex;align-items:center;min-height:44px;list-style:none;padding:8px 6px;font:10px var(--mono);white-space:nowrap}.viewer-settings>summary::-webkit-details-marker{display:none}.viewer-settings[open]>summary{text-decoration:underline;text-underline-offset:4px}.viewer-popover{position:absolute;bottom:48px;right:0;z-index:20;width:240px;max-width:calc(100vw - 40px);padding:12px;border:1px solid #7c8175;border-radius:5px;background:#232920;color:var(--text);box-shadow:0 6px 24px #0009}.viewer-popover p{font:11px/1.45 var(--sans);margin:10px 0 0}.surround-controls{display:flex;gap:6px}.surround-controls button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:56px;padding:6px;border:1px solid #697260;border-radius:3px;background:transparent;font:10px var(--mono)}.surround-controls button[aria-pressed=true]{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}.surround-controls button span{width:26px;height:18px;background:var(--swatch);border:1px solid #aaa}.bank-visibility{margin:5px 0 0;min-height:36px;font-size:11px}.bank-visibility input{margin:7px 4px 7px 0;width:20px;height:20px}.export-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;align-items:end;margin:10px 0}.export-actions label{min-width:0}.export-actions label>span{display:block;font:10px var(--mono);color:var(--muted);margin-bottom:4px}.export-actions select{font:11px var(--mono);padding:8px 4px}.export-actions button{min-height:44px}.control-guide:has(+ .fader-bank input:disabled){height:auto;min-height:34px}


@media(max-width:899px){.control-guide{min-height:24px;height:auto}.fader .control-heading{margin-top:3px}}

/* Preserve six 44px touch columns; very small phones use four without overflow. */
@media(max-width:359px){.fader-bank{grid-template-columns:repeat(4,minmax(44px,1fr));gap:14px 6px}}

/* Direct color patches and selected-figure scope. */
.control-scope-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.control-scope-row .scope-note{flex:1}.control-scope-row #selectAllFigures{min-height:32px;padding:5px 9px;margin-top:6px;flex:none}.control-scope-row #selectAllFigures[hidden]{display:none}.palette-swatch input[type=color]{width:100%;height:44px;min-width:44px;padding:0;border:1px solid #ffffff55;cursor:pointer;background:transparent}.palette-swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0}.palette-swatch input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}.palette-swatch input[type=color]::-moz-color-swatch{border:0;border-radius:2px}.palette-swatch:focus-within{outline:2px solid var(--amber);outline-offset:1px}.active-color-chip[type=color]{width:32px;height:44px;min-width:32px;padding:0;cursor:pointer}.active-color-row{grid-template-columns:32px minmax(0,1fr) 68px 12px}.active-color-chip::-webkit-color-swatch-wrapper{padding:0}.active-color-chip::-webkit-color-swatch{border:0}.active-color-chip::-moz-color-swatch{border:0}.control-scope-row .scope-note{display:block}

/* Eight background controls fit in two balanced rows without narrowing the artwork. */
body[data-bank=base] .fader-bank{grid-template-columns:repeat(4,minmax(44px,1fr))}.active-palette-name{font:11px/1.5 var(--mono);color:var(--amber);margin:12px 0 0;overflow-wrap:anywhere}

/* Direct shape choices stay next to the add/remove controls. */
.shape-selector{margin:9px 0 10px}
.shape-selector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font:11px/1.4 var(--mono);color:var(--muted);margin-bottom:6px}
.shape-actions{display:flex;gap:6px}
.shape-buttons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.shape-buttons button,.shape-actions button{display:flex;align-items:center;justify-content:center;min-width:0;height:44px;padding:6px;color:var(--text);background:linear-gradient(#44483d,#282d22);border:1px solid #111;border-top-color:#7b806c;border-radius:4px;box-shadow:0 2px 3px #0008,inset 0 0 0 1px #5b635044}
.shape-buttons svg{display:block;width:28px;height:28px;fill:currentColor;pointer-events:none}
.shape-actions button{width:44px;font:25px/1 var(--sans)}
.shape-buttons button:hover,.shape-actions button:hover{filter:brightness(1.2)}
.shape-buttons button[aria-pressed=true]{color:var(--amber);background:linear-gradient(#151b10,#262e1c);border-color:var(--amber);box-shadow:inset 0 1px 4px #000}
.shape-buttons button:focus-visible,.shape-actions button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.shape-actions button:disabled{opacity:.35;cursor:default;filter:none}
@media(max-width:899px){body[data-bank=fields] .scope-note{display:block}}

/* Separate playful variations, manual controls and the final save action. */
.variations-module{padding:10px;margin:0 0 14px;border:1px solid #5f694f;border-radius:4px;background:#20271c}
.variations-module h2{display:flex;align-items:center;gap:7px;margin:0;font:11px/1.5 var(--mono);font-weight:400;color:var(--amber)}
.variations-module h2 span{font:21px/1 var(--sans)}
.variations-module .dice-actions{margin:8px 0 6px}
.variations-module .dice-actions button{min-height:48px;padding:7px 5px;font-size:11px;line-height:1.35}
.variation-status{margin:0;min-height:2.8em;font:10px/1.4 var(--sans);color:var(--muted);overflow-wrap:anywhere}
.manual-label{margin:0 0 7px;font:10px/1.4 var(--mono);color:var(--muted)}
.save-module{border-top:1px solid #626c54;margin:14px 0 0;padding-top:14px}
.save-module .export-actions{grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.save-module #exportButton{width:100%;min-height:48px;color:var(--amber);font-size:12px}

/* Compact recovery and help, without adding another panel. */
.figure-navigation{display:grid;grid-template-columns:44px 44px minmax(0,1fr);gap:6px;margin-top:7px}
.figure-navigation button{min-height:44px}
.control-guide-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:8px;margin:6px 0 10px}
.control-guide-row .control-guide{margin:0;min-height:34px}
.reset-control{min-height:44px;font:20px var(--sans);color:var(--amber)}
.variation-scope{margin:5px 0 0;font:10px/1.5 var(--sans);color:var(--muted)}
#paletteCaption{font:11px/1.55 var(--sans);overflow-wrap:anywhere}
.readout p{max-height:none;overflow:visible}
.sheet-label{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
#mobileExperimentName{font:11px/1.3 var(--sans);color:var(--amber);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-chevron{flex:none;margin-left:6px}
@media(max-width:899px){.sheet-toggle{min-height:44px}.control-guide-row .control-guide{min-height:33px}.sheet-label{max-width:calc(100% - 24px)}}

/* The maker's plate sits in the existing TV bezel, outside the artwork. */
@font-face{font-family:"Croma Exo 2";src:url("assets/exo2-variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
.monitor{container-type:inline-size;container-name:art-monitor}
/* A softly rounded, stamped nickel plate with a restrained aged finish. */
.brand-plate{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 138px;width:138px;height:27px;border:1px solid #4b4e44;border-radius:8px;background:repeating-linear-gradient(0deg,#fff0 0 2px,#ece8d308 2px 3px,#24291e05 3px 4px),linear-gradient(100deg,#888b7b 0%,#a5a493 15%,#b1ad9b 45%,#a4a291 72%,#858877 100%);box-shadow:inset 0 1px 0 #ded8bf80,inset 0 -1px 1px #44493c70,inset 1px 0 2px #60645040,inset -1px 0 2px #50594440,0 1px 2px #12180e60;user-select:none}
.brand-plate:before,.brand-plate:after{content:"";position:absolute;top:50%;width:2px;height:2px;margin-top:-1px;border-radius:50%;background:#626759;box-shadow:0 .5px 0 #d6d1b780}
.brand-plate:before{left:7px}.brand-plate:after{right:7px}
.brand-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;font:600 17px/1 "Croma Exo 2",Arial,sans-serif;letter-spacing:-.6px;transform:skewX(-5deg);color:#2c3229;text-shadow:0 .6px 0 #e4dec36b}
.brand-wordmark b{font-weight:780;color:#624b36;margin:0 .5px;letter-spacing:-.9px}.brand-wordmark strong{font-weight:720}
.screen-instruction{flex:1;min-width:0}
@container art-monitor (max-width:630px){.screen-instruction{display:none}}
@media(max-width:550px){.monitor-bottom{justify-content:space-between;gap:6px}.brand-plate{flex-basis:128px;width:128px;height:26px;border-radius:7px}.brand-wordmark{font-size:16.5px}}
@media(max-width:359px){.brand-plate{flex-basis:108px;width:108px;height:25px;border-radius:7px}.brand-wordmark{font-size:14px;letter-spacing:-.55px}.brand-plate:before{left:4px}.brand-plate:after{right:4px}.viewer-tools{gap:0}.viewer-settings>summary,.focus-button{font-size:9px;padding-left:4px;padding-right:4px}}