@font-face{font-family:Matter;src:url(assets/Archivo-400.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Matter;src:url(assets/Archivo-800.ttf);font-weight:800;font-display:swap}
@font-face{font-family:MatterMono;src:url(assets/JetBrainsMono-400.ttf);font-display:swap}
:root{--bg:#101315;--panel:#0f1113;--line:#202426;--ink:#e7e2d8;--muted:#a0a7a9;--quiet:#7e898d;--orange:#ed9369;--blue:#93b8c9;--mono:MatterMono,monospace;color-scheme:dark;--mf-9:9px;--mf-9h:9.5px}
/* the page's smallest words, 9 and 9.5 px with a mouse, and where only a finger points 10 px, as the frame's and the
   shared parts' are (1 Nov 2026, Cyrus, "Do all as you recommend", to the CS/M site's chat's "10–11 px on touch
   screens"; that chat's measure of the side column, 2 Nov 2026): every one of Matter / Field's own, wherever it is, the
   side column, the panel under the field, the study browser, the help and the Grain view, its words drawn too
   (touchText in grain-view.js, synth-editor.js and view.js) */
@media(pointer:coarse){:root{--mf-9:10px;--mf-9h:10px}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Matter,Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,select,a{font:inherit;color:inherit}button,a{touch-action:manipulation}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid var(--line);padding:8px 11px;cursor:pointer;font:10px/1.4 var(--mono);min-height:34px;border-radius:3px;transition:background .15s,border-color .15s,color .15s}@media(hover:hover){button:hover{background:#ffffff08;border-color:#727c80}}button[aria-pressed=true]{background:#ed936910;color:var(--orange);border-color:#ed936960}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:3px}input,select{min-width:0}select{width:100%;padding:8px 10px;background:#0b0e0f;border:1px solid #292e31;border-radius:3px;font:12px Matter;min-height:38px}label{display:block;margin:12px 0 6px;color:var(--muted);font-size:12px}input[type=range]{display:block;width:100%;height:28px;margin:0;accent-color:var(--blue);cursor:ew-resize}input[type=checkbox]{accent-color:var(--orange)}input:disabled{opacity:.35}button .ui-icon{flex-shrink:0}.ui-icon{width:17px;height:17px;display:block;flex-shrink:0}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.small{font-size:12px;color:var(--muted)}.eyebrow,h2{font:10px/1.5 var(--mono);letter-spacing:.08em;color:var(--muted)}.icon{width:34px;min-width:34px;padding:7px;border-color:transparent}.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}.check{display:flex;align-items:center;gap:8px;font-size:12px}.check input{margin:0}.separator{border-top:1px solid var(--line);margin:20px 0}.inline-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-top:17px}.inline-label output{font:11px var(--mono);color:var(--ink)}
/* Shell: transport, study selection, then the instrument. */


/* One workspace bar, a large canvas and a contextual inspector. */
.instrument-top{display:grid;grid-template-columns:minmax(0,1fr) 354px;grid-template-rows:49px minmax(0,1fr);height:clamp(540px,66vh,740px);position:relative;background:#090b0c;border-bottom:1px solid var(--line)}.workspace-toolbar{grid-column:1/-1;grid-row:1;display:flex;align-items:stretch;gap:12px;padding:0 20px;background:#111415;border-bottom:1px solid #272c2e;z-index:2;min-width:0}.inspector-tabs{display:flex;gap:5px;min-width:0;align-items:stretch;overflow:auto;scrollbar-width:none}.inspector-tabs::-webkit-scrollbar{display:none}.inspector-tabs button{position:relative;gap:9px;padding:0 13px;min-width:85px;border:0;border-radius:0;font:12px Matter;color:#afb8bc;white-space:nowrap}.inspector-tabs button[aria-selected=true]{background:linear-gradient(0deg,#ed936916,transparent);color:var(--ink)}.inspector-tabs button[aria-selected=true]:after{content:'';height:2px;position:absolute;bottom:0;left:12px;right:12px;background:var(--orange)}.inspector-tabs button .ui-icon{width:16px;height:16px;color:#7b8c91}.inspector-tabs button[aria-selected=true] .ui-icon{color:var(--orange)}.focus-view{margin:7px 0 7px auto;border-color:transparent;color:#abb7bc;padding:5px 8px;font:11px Matter;white-space:nowrap}.focus-view .ui-icon{width:15px;height:15px}
.field-stage{grid-column:1;grid-row:2;position:relative;min-width:0;min-height:0;overflow:hidden;background:#070a0c}.field-stage>canvas{position:absolute;inset:0;width:100%;height:100%}#overlay{touch-action:none;cursor:crosshair}#overlay.orbit{cursor:grab}.state-tag{font:var(--mf-9) var(--mono);color:#909ea6;letter-spacing:.06em}.state-tag:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:#6d797d;margin-right:7px}.state-tag.active:before{background:#c0ccb2;box-shadow:0 0 8px #c0ccb244}.view-tools{display:flex;align-items:center;gap:1px;pointer-events:auto;padding:3px;border:1px solid #242b2f;background:#0b0f12e8;border-radius:4px}.view-tools button{border:0;padding:5px 7px;min-height:30px;font:10px Matter;color:#97a4ac;gap:5px}.view-tools button[aria-pressed=true]{background:#21292e;color:#e0e8e9}.view-tools .ui-icon{width:14px;height:14px}.stage-readout b{font-weight:400;color:#c4cdd2;margin-right:4px;font-size:10px}#depth-readout{display:none}.motion-select button{min-height:28px;font:var(--mf-9) var(--mono);padding:5px 8px;background:#0c0f12bc;border-color:#232a2e}.motion-select button[aria-pressed=true]{border-color:#8a7665;color:#dfbfa9;background:#ac724316}.display-modes button{border:0;padding:5px 9px;font:var(--mf-9) var(--mono);min-height:29px;color:#9aa9b1}.display-modes button[aria-pressed=true]{color:#dee4e5;background:#1f272b}.camera-tools button{width:30px;min-height:29px;padding:5px;border:0;color:#b2bcc2}.camera-tools .ui-icon{width:15px;height:15px}/* VIEW's switches: an edge on each, on or off, so LABELS off still reads as a switch and not a word beside it */
.view-options button{border-color:#1c2427;padding:3px 6px;min-height:25px;font:var(--mf-9) var(--mono);color:#8e9da4}.view-options button[aria-pressed=true]{color:#c3ced2;background:#82939b1a;border-color:#303b41}.spectral-key{display:flex;align-items:center;gap:7px;font:var(--mf-9) var(--mono);color:#8f9ea6}.spectral-key i{width:53px;height:2px;background:linear-gradient(90deg,#477cd5,#50bfc9,#b5c689,#f5753d)}.drop-hint{position:absolute;inset:8px;display:grid;place-items:center;background:#0b0f12ec;border:1px dashed var(--orange);font:14px var(--mono);color:var(--orange);pointer-events:none;z-index:4}
.viewport-inspector{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid #2d3538;background:linear-gradient(150deg,#14181a,#0f1315)}.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 19px 11px;border-bottom:1px solid #232a2d}.inspector-heading>div>span{display:block;font:var(--mf-9) var(--mono);letter-spacing:.1em;color:#93a0a6;margin-bottom:7px}.inspector-heading strong{display:block;font:400 20px/1.2 Matter;letter-spacing:-.035em;color:#e2dfd5}.inspector-heading>span{color:#9ba8b0;padding:7px;border:1px solid #30373a;border-radius:50%}.inspector-heading>span .ui-icon{width:18px;height:18px}#inspector-picker{padding:12px 18px 0}#inspector-picker select{background:#181e21;min-height:35px;color:#d8ddde;border-color:#404d53;font-size:12px}.inspector-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#59666d #121618;padding:17px 19px 21px;overscroll-behavior:contain}
.inspector-body.more-below{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);mask-image:linear-gradient(#000 calc(100% - 34px),transparent)}.inspector-pane{min-width:0}.inspector-empty{padding:30px 12px;text-align:center;color:#a3afb6}.inspector-empty>.ui-icon{width:40px;height:40px;margin:0 auto 18px;color:#83949d}.inspector-empty strong{font:16px Matter;display:block}.inspector-empty p{font:12px/1.6 Matter;margin-top:10px}.lab-card>h3{display:none}.lab-card>p{font:12px/1.65 Matter;color:#a8b3b8;margin:12px 0 17px}.lab-card select{font-size:13px}.stage-control{display:block;margin:12px 0 0;min-width:0}.stage-control>span{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font:12px/1.5 Matter;color:#c4ccd0}.stage-control output{font:10px var(--mono);color:#a0b0b9;white-space:nowrap}.stage-control input{height:29px}.listener-position{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.listener-position.two{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.section-head h2{font-size:var(--mf-9);color:#acbac1}.section-head button{font-size:var(--mf-9);color:var(--orange);border-color:#6e5749;padding:5px 8px;min-height:29px}.source-screen{padding:10px 9px;background:#0b0f11;border:1px solid #283136;border-radius:3px;margin:13px 0 0}.source-screen canvas{display:block;width:100%;height:64px}.source-screen>div{display:flex;justify-content:space-between;font:var(--mf-9) var(--mono);color:#92a2ab;margin-top:9px}.source-panel .check{font:11px Matter;color:#a0acb4;margin-top:15px}.matter-surface>h2{color:#aebac0;font-size:var(--mf-9);margin-bottom:12px}
/* the fragments' shape, named as the other parts of Matter are (its heading is v1's, hidden in the dock) */
.shard-label{display:block;margin:0 0 10px;color:#aebac0;font:var(--mf-9) var(--mono);letter-spacing:.08em;text-transform:uppercase}.collision-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.collision-pair label{font-size:11px;margin-top:0}.surface-note{font:11px/1.6 Matter;color:#97a6af;margin-top:12px}.geometry-box{border-top:1px solid #272e32;margin-top:17px;padding-top:2px}.geometry-box>label{font-size:12px}.geometry-box select{font-size:12px}
/* Sound controls: one family at a time, with consistent rings and readouts. */
.sound-nav{display:flex;gap:4px;padding:4px;background:#0c1012;border:1px solid #273136;border-radius:4px;margin-bottom:21px}.sound-nav button{flex:1;min-height:31px;border:0;font:12px Matter;color:#a0aeb6}.sound-nav button[aria-selected=true]{background:#293236;color:#eef0e9}.rack-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.rack-title h2{font-size:var(--mf-9);color:#afbcc3}.rack-title>span{display:none}.controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:20px}.dial{text-align:center;min-width:0}.dial-face{width:44px;height:44px;margin:auto;position:relative;border-radius:50%;background:radial-gradient(circle at 36% 25%,#2e3438,#171c1f 65%,#101517);box-shadow:0 4px 9px #0005,inset 0 1px 1px #b5cfdf3b;border:1px solid #4d585e;cursor:ns-resize;touch-action:none}.dial-face:before{content:'';position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 225deg,var(--dial-color,var(--orange)) var(--amount),#6d7c8244 0deg,#6d7c8244 270deg,transparent 0);mask:radial-gradient(transparent 65%,#000 68%);-webkit-mask:radial-gradient(transparent 65%,#000 68%)}.dial-needle{position:absolute;left:20px;top:6px;width:2px;height:7px;background:#e0e7e5;transform-origin:1px 15px;transform:rotate(var(--angle));border-radius:1px}.dial label{font:11px Matter;color:#bfcacf;margin:13px 0 5px;white-space:nowrap}.dial output{font:10px var(--mono);color:#dde3e5;white-space:nowrap}.dial input{height:21px;opacity:.7}.rack>p{font:12px/1.7 Matter;color:#a3b1b9;margin-top:21px}.rack-extra{display:flex;align-items:center;gap:14px;border-top:1px solid #283034;padding-top:15px;margin-top:20px}.rack-extra>label{font:var(--mf-9) var(--mono);margin:0;min-width:65px;color:#a4b2ba}.rack-extra select{flex:1;min-height:33px;font-size:12px}.drift-label{display:flex;align-items:center;gap:10px;font:var(--mf-9) var(--mono);margin-top:15px;color:#a9b8c0}.drift-label input{width:auto;flex:1;min-width:30px}.drift-label output{min-width:50px;color:#d4dde0;font-size:10px}#sound-pane-motion{--dial-color:#9dc3d4}#sound-pane-output{--dial-color:#c8c4ad}
/* Persistent performance macros, directly underneath the field. */
.performance-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(150px,.8fr);gap:30px;padding:14px 25px 11px;background:#141718;border-bottom:1px solid #282f32}.macro{min-width:0}.macro label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 1px;color:#bcc8ce;font:var(--mf-9) var(--mono);letter-spacing:.055em}.macro-symbol{font:normal 15px Matter;margin-right:8px;color:#c4b9aa;vertical-align:middle}.macro output{font:10px var(--mono);color:#d1d8db;letter-spacing:0}.macro input{height:26px;accent-color:#b8bfc0}
/* The lower workspace is a single tabbed surface, never stacked menus. */
.workspace-deck{background:#0d1013}.deck-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 21px;border-bottom:1px solid #272e33;background:#111518;min-height:51px}.deck-tabs{display:flex;align-items:stretch;gap:20px}.deck-tabs button{position:relative;min-height:50px;border:0;border-radius:0;padding:8px 4px;font:12px Matter;color:#9baab2;gap:8px}.deck-tabs button[aria-selected=true]{background:none;color:#e0e4e4}.deck-tabs button[aria-selected=true]:after{content:'';height:2px;background:var(--blue);position:absolute;bottom:0;left:4px;right:4px}.deck-tabs button>span{font:var(--mf-9) var(--mono);background:#1c2328;border:1px solid #313b42;min-width:20px;text-align:center;padding:2px 5px;border-radius:3px;color:#b8ceda}.deck-tabs .ui-icon{width:15px;height:15px;color:#8aa1ac}#deck-collapse{color:#a1afb7}#deck-collapse[aria-expanded=false] .ui-icon{transform:rotate(180deg)}.automation-panel,.force-stack,.scene-lab{padding:20px 25px 22px;background:linear-gradient(145deg,#101518,#0c1013)}
.automation-header{display:flex;align-items:center;justify-content:space-between;gap:18px}.automation-header h2{font-size:10px;color:#c3cdd2}.automation-header h2 span{color:#9cabb4;margin-left:15px;font-size:var(--mf-9)}.automation-header p{font:12px Matter;color:#98a7b1;margin-top:7px}.auto-tools{display:flex;align-items:center;gap:7px}.auto-tools button{font-size:var(--mf-9);min-height:32px}.auto-tools label{display:flex;align-items:center;gap:8px;font:var(--mf-9) var(--mono);margin:0;color:#a0aeb7}.auto-tools select{min-height:32px;width:80px;font:11px Matter;padding:5px}.auto-add-row{display:flex;gap:8px;align-items:center;margin:17px 0 15px;flex-wrap:wrap}.auto-add-row>select{width:255px;min-height:34px;font-size:12px}.auto-add-row button{font:11px Matter;min-height:33px;padding:6px 10px}.auto-add-row>span{font:var(--mf-9) var(--mono);color:#90a4af;letter-spacing:.06em;margin-left:auto}.auto-row{display:grid;grid-template-columns:185px minmax(0,1fr);gap:20px;padding:15px 0;border-top:1px solid #252f36}.auto-row.muted canvas{opacity:.45}.auto-row.muted .auto-lane-label{color:#9faaae}.auto-lane-label strong{display:block;font:13px Matter;color:#cbdce4}.auto-lane-label output{display:block;font:12px var(--mono);color:#efac87;margin-top:8px}.auto-lane-label>div{display:flex;gap:5px;align-items:center;margin-top:10px}.auto-lane-label button{font:var(--mf-9) var(--mono);min-height:27px;padding:4px 7px}.auto-lane-label select{width:81px;min-height:27px;padding:4px 5px;font-size:11px}.auto-graph-wrap{min-width:0}.auto-graph-wrap canvas{display:block;width:100%;height:79px;border:1px solid #41515b;cursor:crosshair;touch-action:none;border-radius:3px}.auto-lane-settings{display:flex;gap:15px;margin-top:9px;align-items:center;flex-wrap:wrap}.auto-lane-settings label{display:flex;gap:7px;align-items:center;font:11px Matter;color:#9cb8cb;margin:0}.auto-lane-settings select{min-height:27px;padding:4px 7px;width:auto;font:11px Matter}.auto-lane-settings input{width:88px;height:22px}.auto-note,#auto-empty{font:11px/1.65 Matter;color:#9ba9b1;margin-top:8px}#auto-empty{padding:20px 17px;margin:15px 0;border:1px dashed #3b484f;font-size:13px;color:#b7c4cc}
.force-stack-top,.object-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.force-stack-top h2,.object-heading h3{font:10px var(--mono);letter-spacing:.06em;color:#c0d2de}.force-stack-top h2 span,.object-heading h3 span{color:#96a7b2;font-size:var(--mf-9);margin-left:14px}.force-stack-top p{font:12px Matter;color:#9eadb7;margin-top:8px}.force-add-controls,.object-heading>div{display:flex;align-items:center;gap:8px}.force-add-controls select,.object-heading select{width:130px;font:12px Matter;min-height:34px}.force-add-controls button,.object-heading button{font-size:var(--mf-9);min-height:34px}#force-bypass{border-color:transparent;color:#abb8bf}#force-bypass[aria-pressed=true]{color:var(--orange);border-color:#ad775856}.force-list,.object-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.force-card,.object-card{border:1px solid #303b42;background:linear-gradient(145deg,#2d373b66,#0c1115);border-radius:4px;min-width:0;overflow:hidden}.force-card.selected,.object-card.selected{border-color:#d79670;background:linear-gradient(135deg,#b8794419,#0f1417)}/* a part switched off keeps its words readable, at least 4.5 to 1 as the master chain's do: what fades is its picture
   (a glyph, a step's bar, a slider) and its card, flatter and darker, its name a shade lower */
.force-card.bypassed,.object-card.inactive{border-color:#1d2529;background:#0b0e11}.force-card.bypassed .force-glyph,.object-card.inactive .object-glyph{opacity:.4}.force-card.bypassed .force-card-main strong,.object-card.inactive .object-main strong{color:#aab3b7}.force-card-main{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 11px;width:100%;text-align:left;justify-content:start;padding:13px 14px;min-height:72px;border:0;background:none;color:#e0e4e4}.force-card-main .force-glyph{grid-row:1/3;font:26px/1 Matter;color:#99bbcc}.force-card.selected .force-glyph{color:#f0b086}.force-card-main strong{font:13px Matter}.force-card-main>span:last-child{font:var(--mf-9) var(--mono);color:#a4b3bc}.force-card-actions{display:flex;border-top:1px solid #273137}.force-card-actions button{flex:1;border:0;border-radius:0;font:var(--mf-9) var(--mono);min-height:30px;padding:5px;color:#97a8b1}.force-card-actions button+button{border-left:1px solid #273137}.force-card-actions button[aria-pressed=true]{color:#c3dde8;background:#91a6ae12}.force-card-actions button[id^=force-solo][aria-pressed=true]{color:var(--orange);background:#d8a1781c}.force-study-row,.construction-row{display:flex;align-items:center;gap:15px;margin-top:18px}.force-study-row>span,.construction-row>span{font:var(--mf-9) var(--mono);letter-spacing:.055em;color:#a7b7c1}.force-study-row>div,.construction-row>div{display:flex;flex-wrap:wrap;gap:6px}.force-study-row button,.construction-row button{font:11px Matter;min-height:32px;padding:6px 10px;color:#b4cbd9;border-color:#38464d}#force-details{margin-left:auto;border-color:transparent;font-size:10px;color:var(--orange);white-space:nowrap}.force-empty,.empty-objects{padding:19px 17px;border:1px dashed #3b484f;color:#b0bbc4;font:12px/1.6 Matter}.object-main{display:flex;align-items:center;justify-content:start;gap:15px;width:100%;text-align:left;padding:16px 15px;min-height:73px;border:0;background:none;color:#d9e0e3}.object-main strong{display:block;font:13px Matter}.object-main small{display:block;font:11px Matter;color:#a0afb9;margin-top:5px}.object-glyph{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#99bbcc;flex-shrink:0}.object-glyph .ui-icon{width:24px;height:24px}.object-card.selected .object-glyph{color:#f0b086}.object-card>button:last-child{width:100%;border:0;border-top:1px solid #273137;border-radius:0;padding:5px;min-height:30px;font:var(--mf-9) var(--mono);color:#a6c9dc}.object-card>button:last-child[aria-pressed=false]{color:#8697a1}.object-main:focus-visible,.force-card-main:focus-visible{outline-offset:-4px}
/* Selected node editors. */
.force-inspector-top,.object-inspector-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}.force-inspector-top>select{flex-basis:100%;font-size:13px}.force-inspector-top p,.object-inspector-top p{flex-basis:100%;font:11px/1.6 Matter;color:#aab8bf;margin:4px 0 5px}.force-inspector-top button,.object-inspector-top button{min-height:29px;font-size:var(--mf-9);padding:5px 9px;color:#b6c3ca}.force-inspector-top button:last-child,.object-inspector-top button:last-child{border-color:transparent;color:#caa494}.object-inspector-top label{flex:1;min-width:95px;font:11px Matter;margin:0;color:#b5c2ca}.object-inspector-top select{margin-top:7px}.force-sliders,.object-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px}.force-control{display:block;margin:0;min-width:0}.force-control>span{display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex-wrap:wrap;font:12px Matter;color:#c3cdd2}.force-control output{font:10px var(--mono);color:#9fb2bc}.force-control input{height:29px}.force-options{display:flex;flex-wrap:wrap;gap:18px 15px;margin-top:18px;padding-top:16px;border-top:1px solid #283137}.force-options #force-direction{display:flex;width:100%;gap:16px}.force-options #force-direction>label{flex:1}.force-options #force-rate{width:180px}.force-options .check{margin:0;white-space:nowrap;font-size:11px}.force-options>p{font:11px/1.6 Matter;color:#a2b2bc}.force-options #force-axis-wrap{display:flex;align-items:center;gap:9px;font:12px Matter;margin:0}.force-options #force-axis{width:58px;min-height:30px;padding:4px 7px}.force-sync-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.force-sync-row select{width:99px;min-height:30px;padding:4px 7px;font-size:11px}.object-sliders .stage-control{margin:0}
/* Searchable studies and utility dialogs. */
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:45px;padding:13px 25px;border-top:1px solid #232b2f;color:#97a3a9;background:#0c0f12}footer p{font:11px/1.55 Matter;max-width:800px}footer p.error{color:var(--orange)}footer>span{font:var(--mf-9) var(--mono);white-space:nowrap;letter-spacing:.04em}footer i{display:inline-block;width:4px;height:4px;margin-right:7px;border-radius:50%;background:#adc4bc}footer b{font-weight:400;margin-left:12px;color:#a3aeb4}dialog{width:min(970px,94vw);max-height:90vh;overflow:auto;border:1px solid #515e66;background:linear-gradient(140deg,#14181b,#0d1113);color:var(--ink);padding:28px;border-radius:6px;box-shadow:0 30px 90px #0009;scrollbar-width:thin;scrollbar-color:#69787f #101518}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px;font:var(--mf-9) var(--mono);letter-spacing:.055em;color:#a1aeb5}dialog>h2{font:400 32px/1.2 Matter;letter-spacing:-.04em;color:#e1dfd5}dialog>p{font:13px/1.75 Matter;color:#b0bbc1;margin-top:12px}dialog>p strong{color:#e2e5df;font-weight:400}.scene-search{display:flex;align-items:center;gap:15px;margin-top:23px;padding:12px 14px;border:1px solid #404b52;border-radius:4px;background:#0b0f12}.scene-search label{font:var(--mf-9) var(--mono);margin:0;white-space:nowrap;color:#a9b8c0}.scene-search input{flex:1;min-width:50px;border:0;background:transparent;padding:5px 7px;font:14px Matter;outline-offset:1px}.scene-search input::placeholder{color:#7a8c96}.scene-search>span{font:var(--mf-9) var(--mono);white-space:nowrap;color:#a4b5bf}.scene-filters{display:flex;gap:6px;margin:17px 0 19px}.scene-filters button{min-height:33px;font-size:var(--mf-9);color:#a2b3bd}.scene-filters button[aria-pressed=true]{color:#efbb9c;background:#cd905b1b;border-color:#a87f61}.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.scene-card{display:block;padding:0;overflow:hidden;text-align:left;border-color:#38454d;background:#0d1216;position:relative}@media(hover:hover){.scene-card:hover{border-color:#a1b2bc;background:#1a2329}}.scene-card.current{border-color:#e6a276}.scene-card.current:after{content:'CURRENT';position:absolute;top:10px;right:10px;padding:4px 6px;color:#edbd9d;background:#201e1cdf;border:1px solid #ab806755;border-radius:3px;font:var(--mf-9) var(--mono)}.scene-card canvas{display:block;width:100%;height:105px;background:#0b161e}.scene-card strong{display:block;font:400 18px/1.25 Matter;letter-spacing:-.025em;padding:13px 14px 7px}.scene-card .card-group{display:block;font:var(--mf-9) var(--mono);letter-spacing:.06em;color:#b8c5cc;padding:0 14px}.scene-card p{font:12px/1.6 Matter;color:#adbbc4;padding:9px 14px 17px;min-height:82px}.scene-no-results{border:1px dashed #47555d;padding:24px!important;text-align:center}.download-actions{display:flex;gap:9px;margin-top:24px}.download-actions a{padding:12px 18px;border:1px solid var(--orange);font:11px var(--mono);text-decoration:none;border-radius:3px}.download-actions a:first-child{background:var(--orange);color:#0f1212}#download-name{overflow-wrap:anywhere}#help-dialog{max-width:720px}#help-dialog>p{margin-top:20px}.focus-workspace .workspace-deck,.focus-workspace .performance-strip{display:none}.focus-workspace .instrument-top{height:calc(100dvh - 155px);min-height:475px}
/* Context stays attached to the control, with a direct route into time. */
.inspector-guide{padding:10px 19px 0;font:11px/1.55 Matter;color:#abb8be;flex-shrink:0}.inspector-heading,.inspector-picker,.inspect-add,.parameter-link{flex-shrink:0}
.inspect-add{display:flex;gap:7px;padding:10px 18px 0}.inspect-add select{flex:1;min-width:0;min-height:33px;padding:6px 8px;font-size:12px}.inspect-add button{min-width:65px;min-height:33px;padding:5px 9px;color:#d3b099;border-color:#705e51}
.parameter-link{padding:11px 18px 12px;background:#0f1519;border-top:1px solid #37444a}.parameter-link>label{display:flex;gap:7px;align-items:center;margin:0 0 7px;color:#afc9d5;font:var(--mf-9) var(--mono);letter-spacing:.055em}.parameter-link .ui-icon{width:13px;height:13px}.parameter-link>div{display:flex;gap:7px}.parameter-link select{flex:1;min-width:0;min-height:32px;padding:5px 7px;background:#141b1f;border-color:#435259;font-size:11px}.parameter-link button{font:11px Matter;min-height:32px;white-space:nowrap;color:#dbe2e4;border-color:#62737a;background:#3e4a5155}.parameter-link p{font:10px/1.45 Matter;color:#a4b3bb;margin-top:7px}
#inspector-picker{flex-shrink:0}#wave{cursor:ew-resize;touch-action:none}.wave-instruction{font-size:var(--mf-9);color:#bdb8a6}.source-screen>div{gap:6px}.macro p{font:10px/1.45 Matter;color:#99a6ad;margin-top:2px}.auto-locate{margin-top:7px;border-color:transparent;padding:3px 0;min-height:28px;color:#a8c3d2;font:10px Matter}.auto-row.selected{border-top-color:#bd926f}.auto-row.selected canvas{border-color:#a08771}.auto-point-read{font:var(--mf-9)/1.6 var(--mono);color:#c2b5a3;margin-top:7px}.auto-lane-settings output{font:var(--mf-9) var(--mono);color:#c0d5df;min-width:32px}.auto-lane-settings input{width:65px}.auto-lane-settings label{gap:6px}.inspector-empty{padding:22px 8px}.inspector-empty>.ui-icon{width:30px;height:30px;margin-bottom:12px}

.position-check{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;padding-top:14px;border-top:1px solid #303a3f}.position-check button{font:11px Matter;min-height:35px;border-color:#506268;color:#c8dfe7}.position-check button:first-child{flex:1}.position-check p{flex-basis:100%;font:11px/1.5 Matter;color:#a3b3bc;min-height:34px}.position-check button[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}
/* The scene stays usable at laptop, tablet and phone widths. */
@media(min-width:1650px){.instrument-top{grid-template-columns:minmax(0,1fr) 386px}.inspector-body{padding:21px 24px}.inspector-heading{padding:22px 24px}.inspector-tabs button{padding:0 17px;min-width:104px}.controls{gap:15px}.dial-face{width:48px;height:48px}.dial-needle{left:22px;transform-origin:1px 17px}}
@media(max-width:1200px){.instrument-top{grid-template-columns:minmax(0,1fr) 330px}.workspace-toolbar{padding-inline:13px}.inspector-tabs{gap:1px}.inspector-tabs button{min-width:78px;padding:0 10px;font-size:11px}.inspector-tabs button .ui-icon{width:14px;height:14px}.inspector-body{padding-inline:17px}.controls{gap:9px}.dial-face{width:40px;height:40px}.dial-needle{left:18px;top:5px;transform-origin:1px 14px}.performance-strip{gap:22px}.auto-add-row>span{margin-left:10px}.force-add-controls{gap:5px}.force-add-controls select{width:115px}.force-list,.object-list{grid-template-columns:repeat(4,minmax(0,1fr))}.force-card-main{padding:12px 10px;gap:5px 7px}.object-main{padding:14px 11px;gap:12px}.force-study-row,.construction-row{flex-wrap:wrap}.force-study-row>span,.construction-row>span{width:100%}#force-details{margin-left:0}}
@media(max-width:960px){.instrument-top{grid-template-columns:minmax(0,1fr) 310px}.workspace-toolbar{padding-inline:9px}.inspector-tabs button{min-width:68px;padding:0 8px;gap:6px}.focus-view>span{display:none}.inspector-heading{padding:16px}.inspector-heading strong{font-size:18px}.inspector-body{padding:16px 14px}.controls{gap:7px}.dial-face{width:38px;height:38px}.dial-needle{left:17px;transform-origin:1px 13px}.view-tools button{padding:5px 6px;gap:4px;font-size:var(--mf-9)}.view-tools .ui-icon{width:13px;height:13px}.display-modes button{font-size:var(--mf-9);padding:5px 7px}.camera-tools button{width:27px}.force-stack-top{flex-wrap:wrap;gap:13px}.force-add-controls{width:100%}.force-add-controls select{flex:1}.force-list,.object-list{grid-template-columns:repeat(3,minmax(0,1fr))}.automation-header{flex-wrap:wrap;gap:12px}.auto-row{grid-template-columns:155px minmax(0,1fr);gap:15px}.auto-lane-settings{gap:8px 11px}.auto-lane-settings input{width:67px}.performance-strip{padding-inline:19px;gap:20px}footer>span{font-size:var(--mf-9)}footer b{display:none}}
@media(max-width:720px){.instrument-top{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:400px 90px auto;grid-template-rows:clamp(400px,calc(60svh - var(--cxo-h,0px)),560px) 90px auto;height:auto}.workspace-toolbar{grid-row:2;padding:0 10px;gap:3px}.inspector-tabs button{min-width:72px;font-size:11px;gap:6px;padding:0 9px}.focus-view{padding:4px;min-width:30px;flex-shrink:0}.field-stage{grid-column:1;grid-row:1}.viewport-inspector{grid-column:1;grid-row:3;border-left:0;border-top:1px solid #47555c;min-height:0}.inspector-heading{padding:12px 17px;min-height:66px}.inspector-heading>div>span{font-size:var(--mf-9);margin-bottom:5px}.inspector-heading strong{font-size:19px}.inspector-heading>span{padding:6px}.inspector-body{padding:15px 18px 21px}#inspector-picker{padding:10px 18px 0}.view-tools button{min-height:32px;padding:6px 7px;font-size:10px}.view-tools .ui-icon{width:13px;height:13px}.motion-select button{min-height:29px;font-size:var(--mf-9)}.display-modes button{min-height:32px;padding:5px 8px;font-size:var(--mf-9)}.camera-tools button{min-height:32px;width:27px}.view-options button{min-height:27px}.stage-control>span,.force-control>span{font-size:12px}.stage-control input,.force-control input{height:33px}.stage-control output,.force-control output{font-size:11px}.source-screen canvas{height:64px}.controls{gap:15px}.dial-face{width:49px;height:49px}.dial-needle{left:22px;top:6px;transform-origin:1px 17.5px}.dial label{font-size:12px}.dial output{font-size:11px}.dial input{height:28px}.source-panel .section-head button{min-height:34px}.sound-nav{margin-bottom:19px}.sound-nav button{min-height:34px}.rack>p{max-width:none}.performance-strip{grid-template-columns:1fr 1fr;gap:14px 25px;padding:15px 18px 13px}.macro input{height:31px}.macro label{font-size:10px}.macro output{font-size:11px}.deck-heading{padding:0 14px;gap:10px}.deck-tabs{gap:13px;flex:1;justify-content:space-between}.deck-tabs button{min-height:52px;font-size:11px;gap:6px}.deck-tabs .ui-icon{width:14px;height:14px}.deck-tabs button>span{min-width:17px;font-size:var(--mf-9);padding:2px 4px}#deck-collapse{min-width:28px;width:28px;padding:4px}.automation-panel,.force-stack,.scene-lab{padding:18px 16px}.automation-header{gap:15px}.auto-tools{width:100%;justify-content:space-between}.auto-tools button,.auto-tools select{min-height:35px}.auto-add-row{gap:7px;margin-top:16px}.auto-add-row>select{flex:1;min-width:170px;width:auto;min-height:37px}.auto-add-row>button{min-height:36px}.auto-add-row>span{flex-basis:100%;margin:9px 0 1px}.auto-row{grid-template-columns:minmax(0,1fr);gap:11px;padding:17px 0}.auto-lane-label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.auto-lane-label>div{margin:0 0 0 auto}.auto-lane-label output{margin:0;font-size:11px}.auto-lane-label strong{font-size:12px}.auto-lane-label button,.auto-lane-label select{min-height:31px}.auto-lane-settings{gap:10px}.auto-lane-settings label{font-size:11px}.auto-lane-settings select{min-height:31px}.auto-lane-settings input{width:71px;height:27px}.auto-note{font-size:11px}.force-stack-top{gap:15px}.force-stack-top p{font-size:12px}.force-add-controls{flex-wrap:wrap;gap:7px}.force-add-controls select{min-width:100px}.force-add-controls button,.force-add-controls select,.object-heading button,.object-heading select{min-height:37px}.force-list,.object-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.force-card-main{padding:13px 10px;min-height:73px}.force-card-main strong{font-size:12px}.force-card-main>span:last-child{font-size:var(--mf-9)}.force-card-actions button,.object-card>button:last-child{min-height:34px}.object-heading{flex-wrap:wrap;gap:13px}.object-heading>div{width:100%}.object-heading select{flex:1}.object-main{padding:13px 11px;min-height:76px;gap:12px}.object-main strong{font-size:12px}.object-main small{font-size:11px}.force-study-row,.construction-row{gap:10px}.force-study-row button,.construction-row button{min-height:35px}.force-options .check{font-size:12px}.force-inspector-top button,.object-inspector-top button{min-height:34px}.force-sliders,.object-sliders{gap:14px 19px}.object-inspector-top select{min-height:37px}.focus-workspace .instrument-top{height:auto;min-height:0;grid-template-rows:min(calc(62dvh - var(--cxo-h,0px)),570px) 90px auto}.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}dialog{padding:19px;width:94vw;max-height:92dvh}dialog>h2{font-size:28px}.scene-search{flex-wrap:wrap;gap:8px;padding:12px}.scene-search label{order:0;flex:1}.scene-search>span{order:1}.scene-search input{order:2;flex-basis:100%;font-size:16px;padding:9px 3px}.scene-filters{gap:4px}.scene-filters button{flex:1;font-size:var(--mf-9);padding:7px 6px;min-height:36px}.scene-card canvas{height:95px}.scene-card strong{font-size:16px;padding:12px 11px 7px}.scene-card .card-group{padding-inline:11px}.scene-card p{font-size:11px;padding:8px 11px 13px;min-height:104px}.scene-card.current:after{font-size:var(--mf-9);padding:3px 5px;top:7px;right:7px}footer{display:block;padding:13px 17px}footer p{font-size:11px}footer>span{display:block;font-size:var(--mf-9);margin-top:9px}footer b{display:inline}.download-actions{flex-wrap:wrap}.download-actions a{font-size:10px}}
@media(max-width:380px){.view-tools button{font-size:var(--mf-9);padding:5px 6px}.view-tools .ui-icon{width:12px}.deck-tabs{gap:9px}.deck-tabs .ui-icon{display:none}.controls{gap:10px}.dial-face{width:43px;height:43px}.dial-needle{left:19px;transform-origin:1px 14.5px}.scene-grid{grid-template-columns:1fr}.scene-card p{min-height:0}}
@media(max-width:720px){.workspace-toolbar{align-items:stretch;padding:0 10px}.inspector-tabs button{min-width:0;justify-content:flex-start;padding:0 6px;font-size:11px;gap:5px}.inspector-tabs .ui-icon{width:13px;height:13px}.focus-view{margin-left:4px}.inspector-body{overflow:visible;flex:none;padding-bottom:21px}.viewport-inspector{min-height:380px}.inspector-guide{padding:10px 18px 0;font-size:12px}.parameter-link{margin-top:auto}.parameter-link>label{font-size:var(--mf-9)}.parameter-link select,.parameter-link button{min-height:38px;font-size:12px}.parameter-link p{font-size:11px}.inspect-add select,.inspect-add button{min-height:38px}.macro p{font-size:11px}.auto-point-read{font-size:var(--mf-9)}.view-tools button{min-height:36px}.camera-tools button{min-height:36px;width:30px}.auto-lane-settings output{font-size:10px}}
@media(max-width:720px){.position-check button{min-height:39px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Pitch is a single workspace: constrained notes, audible drift, key progression. */
.pitch-rack .rack-extra{margin-top:0}.pitch-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.pitch-pair>label,.pitch-source>label{display:grid;gap:7px;color:#94a0a4;font:var(--mf-9) MatterMono,monospace;letter-spacing:.08em}.pitch-pair select,.pitch-source select{min-width:0;width:100%}.pitch-scope{margin:16px 0 10px;padding:12px 8px 0;background:#080a0c;border:1px solid #1f262a;border-radius:4px}.pitch-scope>div{display:flex;justify-content:space-between;gap:8px;padding:0 4px;color:#f2a17d;font:10px MatterMono,monospace}.pitch-scope>div span:last-child{color:#78888f}.pitch-scope canvas{display:block;width:100%;height:96px}.pitch-hint{font-size:10px!important;line-height:1.65!important;color:#8d989c!important;margin:12px 0!important}.key-sequence{border-top:1px solid #1f262a;margin-top:20px;padding-top:16px}.key-sequence-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.key-sequence-heading .check{margin:0;text-transform:none}.key-sequence-heading button{font-size:var(--mf-9);padding:6px 9px;min-height:28px}.key-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.key-step{border:1px solid #22292c;border-radius:4px;padding:8px 5px 6px;background:#090c0d;transition:border-color .08s,background .08s}.key-step>span{display:block;color:#8c989d;font:var(--mf-9) MatterMono,monospace;margin:0 3px 7px}.key-step select{display:block;width:100%;min-width:0;padding:4px 2px!important;margin-top:4px!important;font-size:11px!important;min-height:30px!important}.key-step select:last-child{font-size:var(--mf-9)!important;color:#acb3b4}.key-step.current{border-color:#ef9a73;background:#33271f;box-shadow:inset 0 2px #ef9a73}.key-step.current>span{color:#ffc39c}.key-steps.bypassed .key-step{border-color:#1d2326;background:#0b0f11}.pitch-source{margin-top:18px;border-top:1px solid #1f262a;padding-top:14px}.pitch-source summary{cursor:pointer;font-size:11px;color:#9ba5a9;margin-bottom:12px}.room-dimensions{color:#9ba9af!important;font:var(--mf-9) MatterMono,monospace!important;letter-spacing:.02em}.sound-nav button{min-width:0}

/* Playback pass: direct harmony access, readable sequences, quiet diagnostics. */

.meter i.protecting{background:#f29c72}
#inspect-pitch .rack{padding:0;border:0;background:none}#inspect-pitch .rack-title{display:none}
#pitch-mode-note{font:12px/1.65 Matter;color:#9ea9ae;margin:15px 0}.pitch-hint{font-size:11px!important}
.pitch-sequence-open{width:100%;justify-content:space-between;gap:10px;margin-top:18px;padding:11px 12px;min-height:40px;color:#eab08e;border-color:#725642;background:#df8d6810;font:12px Matter}
.current-key{min-height:26px;padding:4px 8px;color:#dfac8c;background:#0d1012d9;border:1px solid #5d4b40;font:var(--mf-9) var(--mono);letter-spacing:.025em;text-transform:none;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-readout .current-key{pointer-events:auto}
.key-sequence-panel{padding:24px 26px;background:#101417}.keys-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.keys-heading h2{font:10px var(--mono);color:#cdd3d6;letter-spacing:.08em}.keys-heading h2 span{font:10px var(--mono);color:#a29b90;margin-left:18px;letter-spacing:0}.keys-heading p{font:12px/1.6 Matter;color:#9caab2;margin-top:7px}.keys-heading>button{font:11px Matter;min-height:35px;gap:10px;white-space:nowrap}.key-sequence-panel .key-sequence{margin-top:20px;padding-top:18px;border-color:#272e32}.key-sequence-panel .key-sequence>.pitch-pair{max-width:450px;margin:18px 0}.key-sequence-panel .pitch-pair>label{font-size:10px;gap:9px}.key-sequence-panel .pitch-pair select{font-size:12px;min-height:36px}.key-sequence-panel .key-steps{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.key-sequence-panel .key-step{padding:13px 9px 11px;min-width:0;border-color:#333b41;background:linear-gradient(160deg,#151c20,#0d1215)}.key-sequence-panel .key-step>span{font-size:10px;margin:0 3px 10px}.key-sequence-panel .key-step select{font:14px Matter!important;min-height:36px!important;padding:5px 6px!important;border-color:#333d43;background-color:#101518}.key-sequence-panel .key-step select:last-child{font-size:11px!important;color:#c0c8cc}.key-sequence-panel .key-step.current{background:linear-gradient(160deg,#453125,#251f1d);border-color:#d88d68;box-shadow:inset 0 2px #efa17b}.key-sequence-panel .key-step.current select{border-color:#75503c;background:#29241f;color:#ffcba9}.key-sequence-heading .check{font:13px Matter;color:#d5dbdb}.key-sequence-heading button{font:11px Matter;min-height:34px;padding:8px 12px}#key-snap-needed{display:flex;align-items:center;gap:24px;padding:26px 0 10px;color:#a8b4bb;font:13px Matter}#keys-enable{color:#edb48e;border-color:#906f55;font:12px Matter}
.visual-quality{display:flex;gap:6px;align-items:center;margin:0 0 0 5px;font:var(--mf-9) var(--mono);color:#909fa5;letter-spacing:.02em}.visual-quality select{width:auto;min-height:28px;padding:3px 20px 3px 7px;font:10px Matter;color:#c6d0d3;border-color:#2b3236;background-color:#0d1115}
.playback-controls{margin-top:22px;padding-top:18px;border-top:1px solid #283136}.output-safety{display:grid;grid-template-columns:1fr 1fr;gap:12px 15px;background:#0c1012;border:1px solid #2c363b;padding:15px 13px;border-radius:4px}.output-safety>div>span{display:block;color:#919fa7;font:var(--mf-9) var(--mono);letter-spacing:.07em}.output-safety output{display:block;font:15px var(--mono);color:#d5dada;margin-top:9px}.output-safety>div:nth-child(2) output{color:#f2af86}.protection-meter{grid-column:1/-1;height:3px;background:#232b30;overflow:hidden;margin-top:3px}.protection-meter i{display:block;height:100%;width:0;background:#e89d78;transition:width .1s}.playback-controls>label{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;color:#9eacb4;font:var(--mf-9) var(--mono);margin:18px 0 12px}.playback-controls select{font:12px Matter;min-height:36px;padding:7px 24px 7px 9px;width:auto}.playback-controls p{font:11px/1.7 Matter;color:#9aa8b0;margin-top:10px}#playback-quality-note{font:var(--mf-9)/1.7 var(--mono);color:#85949d}
@media(max-width:1080px){.key-sequence-panel .key-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.inspector-tabs button{min-width:74px;padding-inline:10px;gap:6px}}
@media(max-width:720px){.key-sequence-panel{padding:20px 18px}.keys-heading{align-items:flex-start;gap:12px}.keys-heading h2 span{display:block;margin:9px 0 0;font-size:var(--mf-9)}.keys-heading>button{font-size:10px;padding-inline:9px}.key-sequence-panel .key-step{padding:10px 6px}.key-sequence-panel .key-steps{gap:7px}.key-sequence-panel .key-step select:last-child{font-size:10px!important}.deck-tabs{gap:12px}.deck-tabs button{font-size:11px;gap:6px}.deck-tabs .ui-icon{width:13px}.deck-tabs span{font-size:var(--mf-9)}.deck-heading{padding-inline:17px}.inspector-tabs button{min-width:0;padding-inline:6px}.current-key{font-size:var(--mf-9);max-width:220px}.visual-quality{font-size:var(--mf-9)}.visual-quality select{min-height:29px}.playback-controls>label{font-size:10px}.playback-controls p{font-size:12px}.key-sequence-panel .key-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:460px){.key-sequence-panel .key-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.deck-tabs .ui-icon{display:none}.deck-tabs{gap:11px}.deck-tabs button{gap:4px}.keys-heading{flex-wrap:wrap}.key-sequence-panel .key-step select:last-child{font-size:12px!important}.stage-readout .current-key{font-size:var(--mf-9)}.current-key{max-width:100%}#key-snap-needed{flex-wrap:wrap;gap:12px}.visual-quality{gap:3px;margin-left:2px}.view-options button{font-size:var(--mf-9);padding-inline:4px}}
/* The rhythm (11 Oct 2026): its panel beside Keys, its steps, PULSE beside FALL and CLOUD with the steps under them,
   and its line in Sound → Motion. In the instrument's own colours and type */
.rhythm-panel{padding:24px 26px;background:#101417}
.rhythm-pulse{font:11px Matter;min-height:35px;gap:9px;white-space:nowrap}
.rhythm-pulse i{width:7px;height:7px;border-radius:50%;background:#444e53}
.rhythm-pulse[aria-pressed=true]{border-color:#d88d68;color:#ffcba9;background:#ac724316}
.rhythm-pulse[aria-pressed=true] i{background:#ef9a73}
.rhythm-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;margin:20px 0 16px;padding-top:18px;border-top:1px solid #272e32}
.rhythm-controls>label{display:grid;gap:9px;font:10px var(--mono);color:#a8b2b7;letter-spacing:.06em}
.rhythm-controls select{font-size:12px;min-height:36px;min-width:118px}
#rhythm-pattern{min-width:230px}
.rhythm-turn{display:flex;gap:4px}
.rhythm-turn button{min-height:36px;min-width:40px;padding:0 9px}
#rhythm-restart{min-height:36px;font:11px Matter}
.rhythm-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px}
.rhythm-step{flex-direction:column;justify-content:space-between;min-height:76px;min-width:0;padding:10px 0 11px;border-color:#333b41;border-radius:4px;background:linear-gradient(160deg,#151c20,#0d1215);color:#8c989d}
.rhythm-step>span{font:10px var(--mono)}
.rhythm-step>i{width:4px;height:4px;border-radius:50%;background:#444e53}
.rhythm-step[data-level="1"]>i{width:6px;height:22px;border-radius:1px;background:#d9d4c9}
.rhythm-step[data-level="2"]>i{width:6px;height:34px;border-radius:1px;background:#ef9a73}
@media(hover:hover){.rhythm-step:hover{border-color:#657278}}
.rhythm-step.current{border-color:#d88d68;background:linear-gradient(160deg,#453125,#251f1d);box-shadow:inset 0 2px #efa17b}
.rhythm-step.current>span{color:#ffc39c}
.rhythm-steps.bypassed .rhythm-step{border-color:#1d2326;background:#0b0f11}.rhythm-steps.bypassed .rhythm-step>i{opacity:.4}
.rhythm-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:18px;max-width:680px}
.rhythm-panel .pitch-hint{max-width:680px}
.rhythm-keep{margin-top:14px}
.motion-select #pulse-field{margin-left:6px}
/* The field's marks (11 Oct 2026, Cyrus: "the way it shows rythm on ui it should also show small indicator of pitch map
   if used with a click thru of each"): under FALL, CLOUD and PULSE, the rhythm's steps and under them the notes in use,
   each named as EMIT names FALL and CLOUD, each a button through to its panel */

.field-mark{pointer-events:auto;justify-content:space-between;gap:10px;min-height:0;padding:5px 6px;border-color:transparent;font:var(--mf-9) var(--mono);letter-spacing:.04em;color:#8b979e}
@media(hover:hover){.field-mark:hover{background:#0c0f12bc;border-color:#232a2e;color:#c4cdd2}}
.field-mark-strip{display:flex;gap:var(--gap,3px);align-items:flex-end;height:13px}
.field-mark-strip i{flex:none;width:var(--mark,3px);height:3px;border-radius:1px;background:#4e5d64}
.pulse-marks i[data-level="1"]{height:8px;background:#b6bec1}
.pulse-marks i[data-level="2"]{height:13px;background:#ef9a73}
.pulse-marks i.current{outline:1px solid #ffcba9;outline-offset:1px}
/* the notes: a semitone out of the chord a dot, one in it a mark, its root the tallest and warm; lit as it sounds,
   ringed a moment as it is struck */
.pitch-marks i{background:#2d373b}
.pitch-marks i.in{height:8px;background:#819097}
.pitch-marks i.root{height:13px;background:#cf8462}
.pitch-marks i.on{height:8px;background:#dcf1f8}
.pitch-marks i.root.on{height:13px;background:#ffc29f}
.pitch-marks i.hit{outline:1px solid #ffcba9;outline-offset:1px}

@media(max-width:720px){.field-mark{padding-block:6px}}
.rhythm-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #22292c;font:var(--mf-9) var(--mono);color:#a8b2b7;letter-spacing:.08em}
.rhythm-line button{font:11px Matter;min-height:34px}
@media(max-width:1080px){.rhythm-steps{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:720px){.rhythm-panel{padding:20px 16px}.rhythm-feel{grid-template-columns:1fr}.rhythm-controls select,#rhythm-pattern{min-width:0}.rhythm-controls{gap:12px}.rhythm-step{min-height:64px}}
/* The lower workspace's five tabs on a phone (11 Oct 2026): wider than the screen in one row (at 320px even the four of
   before were), so they go on in a second, each with its count, none hidden or cut */
@media(max-width:560px){.deck-tabs button{min-height:44px}#deck-collapse{margin-top:8px}}

/* On a phone, FALL, CLOUD and PULSE have a row of their own under the readout (with PULSE they reached the current
   key), the rhythm's steps under them */

/* The field's frame (11 Oct 2026): a shade at its edges, under the handles and words drawn over it and under the
   controls, so they read over the drawing; a key to its marks beside the spectrum's colours; the mode buttons in the
   type of the field's other controls */
.field-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#050708c2 0,#080a0b00 128px),linear-gradient(0deg,#050708d1 0,#080a0b00 140px),radial-gradient(ellipse 78% 72% at 50% 52%,#080a0b00 58%,#05070880 100%)}
.key-mark{display:inline-flex;align-items:center;gap:6px;margin-left:10px}
.key-mark:before{content:'';width:8px;height:8px;border-radius:50%;border:1px solid #7fb9cc;box-sizing:border-box}
.key-mark.beat{display:none}
.key-mark.beat:before{border-color:#efe9dc;box-shadow:0 0 0 2px #efe9dc26}
.field-stage.pulsing .key-mark.beat{display:inline-flex}
.view-tools button{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
/* On a phone the Visuals row sat 2px into the zoom buttons under it */

/* Wherever the field itself is narrow (beside the inspector on a small laptop or tablet, as on a phone), FALL, CLOUD and
   PULSE go on a row of their own under the readout, the rhythm's steps under them */
.field-stage{container-type:inline-size}

/* There, the opening line goes below the marks that show (17 Oct 2026): a field shorter than about 530px, as in a
   phone's browser and in the iPhone app inside its safe area, put it on RHYTHM and PITCH, which stand above it; its
   halo still covers the field's drawing under it */

#overlay.scan{cursor:ew-resize}
/* The studies' six groups (11 Oct 2026, Environment the sixth): on a phone they go on in a second row rather than past
   the dialog's edge */
.scene-filters{flex-wrap:wrap}

/* The fragment budget (11 Oct 2026): three sliders in Output, a FULL to go back, and the field's FRAGMENTS readout a way to them */
#fragment-budget{margin:18px 0 4px;padding:13px 13px 5px;background:#0c1012;border:1px solid #2c363b;border-radius:4px}.budget-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#9eacb4;font:var(--mf-9) var(--mono);letter-spacing:.07em}.budget-head button{min-height:28px;padding:4px 10px;font:var(--mf-9) var(--mono);letter-spacing:.07em;color:#d4dde0}.budget-row{display:grid;grid-template-columns:62px minmax(0,1fr) 40px;gap:10px;align-items:center;margin-top:6px;color:#a9b8c0;font:var(--mf-9) var(--mono);letter-spacing:.05em}.budget-row output{color:#d4dde0;font-size:10px;text-align:right}#fragment-budget p{margin-top:6px}.stage-readout .fragments-open{pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:0;min-height:24px;padding:0;background:none;border:0;border-radius:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none}@media(hover:hover){.stage-readout .fragments-open:hover{background:none;color:#c4cdd2}}.fragments-open #fragment-cap{color:#83929b;margin-right:4px}.fragments-open #fragment-cap:empty{display:none}.fragments-open.is-budgeted:after{content:'';position:absolute;left:calc(100% + 4px);top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:#dfac8c}
/* Read motion (11 Oct 2026): under Read position and Time spread in the Source panel */
.read-motion{margin-top:16px;padding:11px 12px 10px;border:1px solid var(--line);border-radius:4px;background:#ffffff05}.read-motion-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font:var(--mf-9) var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#9eacb4}.read-motion-head select{width:auto;max-width:62%;min-height:32px;font-size:12px}.read-motion .inline-label{margin-top:12px}.read-cycle{align-items:center}.read-cycle select{width:auto;min-height:30px;font-size:12px}.read-note{font:11px/1.6 Matter;color:#9aa8b0;margin-top:9px}.read-motion.is-off #readModDepth,.read-motion.is-off .read-cycle select{opacity:.5}.read-motion.is-off .read-cycle,.read-motion.is-off label[for=readModDepth]{color:#9faaae}
/* The rhythm laid out again (11 Oct 2026): Pattern, Grid and Steps; the steps and their legend; Feel */
.rhythm-random{min-height:36px;font:11px Matter}.rhythm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:12px 0 0;font:10px var(--mono);color:#95a0a6;letter-spacing:.04em}.rhythm-legend span{display:inline-flex;align-items:center;gap:7px}.rhythm-legend i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#444e53}.rhythm-legend i[data-level='1']{width:5px;height:13px;border-radius:1px;background:#d9d4c9}.rhythm-legend i[data-level='2']{width:5px;height:18px;border-radius:1px;background:#ef9a73}.rhythm-legend em{font:11px Matter;font-style:normal;color:#7d8a8f}.rhythm-feel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 26px;margin-top:20px;padding-top:16px;border-top:1px solid #272e32}.rhythm-feel h3{grid-column:1/-1;font:10px var(--mono);letter-spacing:.08em;color:#a8b2b7;margin:0}.rhythm-strum{display:grid;gap:6px;align-content:start}.rhythm-strum>.stage-control{margin-bottom:0}.rhythm-strum select{font-size:12px;min-height:32px;width:100%}.rhythm-strum select:disabled{opacity:.5}.rhythm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:14px}.rhythm-foot .rhythm-keep{margin-top:0}@media(max-width:1080px){.rhythm-feel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.rhythm-feel{grid-template-columns:1fr}.rhythm-legend{gap:8px 14px}#rhythm-pattern{width:100%}.rhythm-pattern{flex:1 1 100%}}
/* The keyboard (11 Oct 2026), first in the Keys panel, and the key sequence under it with its switch in its heading. Keys
   drawn in the panel's slate, the ones held in the orange of the held, the ones sounding lit in the field's blue, the
   chord's notes marked with the pitch map's dot. In the instrument's own colours and type */
.keyboard{margin-top:20px;padding-top:18px;border-top:1px solid #272e32}
.kb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.kb-head h3,.key-seq-heading h3{font:10px var(--mono);color:#cdd3d6;letter-spacing:.08em;font-weight:400}
.kb-head h3 span,.key-seq-heading h3 span{font:10px var(--mono);color:#a29b90;margin-left:14px;letter-spacing:0}
.kb-controls{display:flex;align-items:flex-end;gap:10px 12px;flex-wrap:wrap}
.kb-controls>label{display:grid;gap:7px;font:var(--mf-9) var(--mono);color:#94a0a4;letter-spacing:.08em}
.kb-controls select{width:auto;min-width:92px;min-height:35px;padding:6px 24px 6px 9px;font:12px Matter}
.kb-controls select:disabled{opacity:.75}
.kb-toggle,#kb-clear{font:11px Matter;min-height:35px;gap:9px;white-space:nowrap}
.kb-toggle i,.key-switch i{width:7px;height:7px;border-radius:50%;background:#444e53;flex:none}
.kb-toggle[aria-pressed=true]{border-color:#d88d68;color:#ffcba9;background:#ac724316}
.kb-toggle[aria-pressed=true] i{background:#ef9a73}
#kb-clear:disabled{opacity:.45;cursor:default}
.kb-board{display:flex;align-items:stretch;gap:8px;margin-top:16px}
.kb-oct{flex:none;width:34px;min-height:0;padding:0;border-color:#2c363b}
.kb-oct:disabled{opacity:.35;cursor:default}
.kb-keys{position:relative;flex:1;min-width:0;display:flex;height:138px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;border-radius:4px;border:1px solid #272e32;overflow:hidden;background:#0a0e10}
.kb-keys:focus-visible{box-shadow:0 0 0 2px #ef9a7380}
.kb-key{position:relative;display:block;min-height:0;padding:0;border-radius:0;cursor:pointer;transition:background .06s,border-color .06s}
.kb-white{flex:1;min-width:0;border:0;border-right:1px solid #21292c;background:linear-gradient(#1b2125,#14191c)}
.kb-white:last-child{border-right:0}
.kb-black{position:absolute;top:0;height:58%;z-index:2;border:1px solid #1c2225;border-top:0;border-radius:0 0 3px 3px;background:linear-gradient(#090c0e,#0e1215)}
@media(hover:hover){.kb-white:hover{background:linear-gradient(#20292e,#171d20)}}
@media(hover:hover){.kb-black:hover{background:linear-gradient(#0f1417,#13191c)}}
.kb-key.is-held{background:linear-gradient(#5b3d2b,#3a2a21);border-color:#d88d68}
.kb-black.is-held{background:linear-gradient(#6d4631,#4a3122)}
.kb-glow{position:absolute;left:4px;right:4px;top:4px;height:3px;border-radius:2px;background:#9fd0e2;opacity:var(--glow,0);transition:opacity .12s;box-shadow:0 0 8px #9fd0e2aa}
.kb-key.is-sounding{box-shadow:inset 0 0 0 1px #93b8c955}
.kb-dot{position:absolute;left:50%;bottom:9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#efa57e;opacity:0}
.kb-black .kb-dot{bottom:7px}
.kb-key.in-key .kb-dot{opacity:.9}
.kb-name{position:absolute;left:0;right:0;bottom:21px;text-align:center;font:var(--mf-9) var(--mono);color:#8e9ca1;pointer-events:none}
.kb-letter{position:absolute;left:0;right:0;top:12px;text-align:center;font:var(--mf-9) var(--mono);color:#c8cfd2;opacity:0;pointer-events:none;transition:opacity .15s}
.kb-black .kb-letter{color:#a0adb2}
.kb-keys:focus-within .kb-letter{opacity:.75}
@media(hover:none){.kb-letter{display:none}}
.kb-hint{margin-top:12px!important;max-width:980px}
/* the computer's keys said only where there may be a computer's keys (on a phone there are none) */
@media(hover:none) and (pointer:coarse) and (max-width:720px){.kb-computer{display:none}}
.key-seq{margin-top:26px;padding-top:18px;border-top:1px solid #272e32}
.key-seq-heading p{font:12px/1.6 Matter;color:#9caab2;margin-top:7px}
.key-seq-switch{display:flex;gap:8px;align-items:center;flex:none}
.key-seq-switch #key-reset{font:11px Matter;min-height:35px;padding:8px 12px}
.key-switch{display:inline-flex;align-items:center;gap:9px;min-height:35px;padding:8px 13px;border:1px solid var(--line);border-radius:3px;font:11px Matter;color:#d5dbdb;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
@media(hover:hover){.key-switch:hover{border-color:#4e5a5f}}
.key-switch:focus-within{box-shadow:0 0 0 2px #ef9a7366}
.key-switch.is-on{border-color:#d88d68;color:#ffcba9;background:#ac724316}
.key-switch.is-on i{background:#ef9a73}
.key-seq #key-sequence-controls .key-sequence{margin-top:4px;padding-top:0;border-top:0}
.pitch-rack>.pitch-sequence-open{margin-top:22px}
@media(max-width:720px){.kb-keys{height:124px}.kb-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.kb-controls select{width:100%;min-width:0}.kb-toggle,#kb-clear{width:100%}.kb-oct{width:28px}.kb-board{gap:6px}.key-seq-heading{flex-wrap:wrap}.key-seq-switch{width:100%}.kb-head h3 span,.key-seq-heading h3 span{display:block;margin:8px 0 0}}
/* Adding a force or an object (16 Oct 2026): Add force and Add object open the list of the types, and the one chosen is
   added; the menu by its button, over the page */
.stack-add{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:38px;padding:5px 11px;color:#d3b099;border-color:#705e51}
.stack-add>span{flex:1;text-align:left}
.stack-add[aria-expanded="true"]{background:#ac724316;border-color:#d88d68;color:#ffcba9}
.add-menu{position:fixed;z-index:40;display:grid;align-content:start;gap:2px;padding:5px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#59666d #121618;background:linear-gradient(150deg,#14181a,#0f1315);border:1px solid #47555c;border-radius:4px;box-shadow:0 16px 40px #000a,0 2px 6px #0007}
.add-menu button{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;justify-content:stretch;gap:2px 10px;width:100%;min-height:40px;padding:7px 10px 7px 4px;border:0;border-radius:3px;text-align:left;color:#e0e6e8;font:12px/1.3 Matter}
.add-menu button:focus-visible{background:#1a2023;outline:none}
@media(hover:hover){.add-menu button:hover{background:#1a2023;outline:none}}
.add-menu button:focus-visible{box-shadow:inset 0 0 0 1px #93b8c9}
.add-menu strong{font-weight:500}
.add-menu small{grid-column:2;font-size:11px;line-height:1.35;color:#9eadb7}
.add-menu .add-glyph{grid-row:1/3;display:flex;align-items:center;justify-content:center;height:100%}
.add-menu .add-glyph{color:#99bbcc}
.add-menu .add-glyph .ui-icon{width:21px;height:21px}
.add-menu button:focus-visible .add-glyph{color:#f0b086}
@media(hover:hover){.add-menu button:hover .add-glyph{color:#f0b086}}
@media(max-width:720px){.add-menu button{min-height:46px}.add-menu small{font-size:11.5px}}

/* The stacks in their tabs (16 Oct 2026, Cyrus: "show the forces as containers right near the force stack ... so it's
   easy to understand how they are stacked and which is selected"): the forces, and the objects, a card each in their
   order, numbered, the one selected marked; Add under them; the settings of the one selected after them, under its
   number and name; the combinations, or the constructions, last */
.inspect-stack{display:grid;gap:7px;padding:0 0 8px}
.stack-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.stack-head h3{margin:0;font:10px var(--mono);letter-spacing:.12em;color:#a0adb3}
.stack-head h3 span{margin-left:6px;color:#d3dadd}
.stack-head button{min-height:30px;padding:4px 10px;font:var(--mf-9) var(--mono)}
.viewport-inspector .force-list,.viewport-inspector .object-list{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.viewport-inspector .force-card,.viewport-inspector .object-card{display:flex;align-items:stretch}
.viewport-inspector .force-card-main{flex:1;display:grid;grid-template-columns:20px 24px minmax(0,1fr);align-items:center;gap:2px 10px;padding:6px 10px;min-height:46px}
.viewport-inspector .force-card-main .stack-no,.viewport-inspector .force-card-main .force-glyph{grid-row:1/3}
.viewport-inspector .force-card-main strong,.viewport-inspector .force-card-main>span:last-child{grid-column:3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewport-inspector .force-card-actions{border-top:0;border-left:1px solid #273137}
.viewport-inspector .force-card-actions button{flex:0 0 auto;min-width:46px;min-height:0}
.viewport-inspector .object-main{flex:1;gap:10px;padding:6px 10px;min-height:46px}
.viewport-inspector .object-card>button:last-child{width:auto;min-width:50px;border-top:0;border-left:1px solid #273137}
.stack-no{font:10px var(--mono);letter-spacing:.04em;color:#7f8f98;min-width:18px}
.force-card.selected .stack-no,.object-card.selected .stack-no{color:#f0b086}
.force-glyph{display:flex;align-items:center;justify-content:center}
.force-glyph .ui-icon{width:22px;height:22px}
/* a force's grip: carried by it to another place in the stack, or moved there by the arrows */
.stack-grip{flex:0 0 26px;min-height:0;padding:0;border:0;border-right:1px solid #273137;border-radius:0;color:#778891;cursor:grab;touch-action:none}
.stack-grip .ui-icon{width:16px;height:16px}
.stack-grip:focus-visible{color:#d4e4ec;background:#91a6ae14}
@media(hover:hover){.stack-grip:hover{color:#d4e4ec;background:#91a6ae14}}
.force-card.selected .stack-grip{color:#c99a7b}
.force-list.sorting,.force-list.sorting *{cursor:grabbing;user-select:none;-webkit-user-select:none}
.force-list.sorting .force-card:not(.dragging){transition:transform .16s ease}
.force-card.dragging{position:relative;z-index:3;opacity:1;border-color:#d79670;background:linear-gradient(135deg,#262e31,#13181c);box-shadow:0 12px 28px #000b}
.force-card.dragging .stack-grip{color:#f0b086}
@media(max-width:720px){.stack-grip{flex-basis:34px}.stack-grip .ui-icon{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.force-list.sorting .force-card:not(.dragging){transition:none}}
.viewport-inspector .force-empty,.viewport-inspector .empty-objects{margin:0;padding:12px;border:1px dashed #394348;border-radius:4px;font-size:12px;line-height:1.45;color:#abb7bd}
.stack-editing{margin:0 0 4px;padding:14px 0 6px;border-top:1px solid #262c30;font:var(--mf-9) var(--mono);letter-spacing:.12em;color:#d5a382}
.stack-starts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;padding-top:14px;border-top:1px solid #21272a}
.stack-starts>span{width:100%;font:var(--mf-9) var(--mono);letter-spacing:.12em;color:#8f9da4}

#rhythm-open{display:inline-flex;align-items:center;gap:6px}
#rhythm-open .ui-icon{width:12px;height:12px}
.macro-symbol{display:inline-flex;vertical-align:middle}
.macro-symbol .ui-icon{display:inline-block;width:16px;height:16px}
.force-inspector-top>label.force-type{flex-basis:100%;font:11px Matter;margin:0;color:#b5c2ca}
.force-inspector-top>label.force-type select{display:block;width:100%;margin-top:7px;font-size:13px}
@media(max-width:720px){.viewport-inspector .force-card-actions button{min-width:50px}.force-inspector-top>label.force-type select{min-height:37px}}
#auto-rewind{display:inline-flex;align-items:center;gap:6px}
#auto-rewind .ui-icon{width:12px;height:12px}
/* Solid walls in the Room tab (16 Oct 2026) */
/* the room's boundaries: a row each, what it does to the matter and its material (stage-editor.js) */
.walls{margin:14px 0 16px;padding-top:13px;border-top:1px solid #253035}
.walls-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.walls-head h4{font:10px var(--mono);letter-spacing:.06em;color:#c0d2de;font-weight:400}
.walls-note{margin:8px 0 9px;font:11px/1.55 Matter;color:#aab8bf}
.walls-table{width:100%;border-collapse:collapse}
.walls-table th{font:12px Matter;color:#d8dfe3;text-align:left;padding:5px 10px 5px 0;white-space:nowrap;font-weight:400}
.walls-table td{padding:4px 0;white-space:nowrap}
.walls-table td:last-child{width:100%;padding-left:8px}
.walls-table tr+tr>*{border-top:1px solid #1c2327}
.walls-table select{width:100%;min-width:0;min-height:32px;font:12px Matter}
.walls-table tr.bounces select{opacity:.62}
.wall-strike{min-height:30px;min-width:88px;padding:4px 9px;gap:7px;justify-content:flex-start;font:10px var(--mono);letter-spacing:.03em;color:#9fadb6;border-color:#38464d}
.wall-strike .wall-dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;flex:none}
.wall-strike[aria-checked=true]{color:var(--orange);border-color:#ad775885;background:#d8a1781a}
.wall-strike[aria-checked=true] .wall-dot{background:currentColor}
.wall-strike[aria-checked=mixed]{color:#e3b393;border-color:#ad775860}
.wall-strike[aria-checked=mixed] .wall-dot{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.wall-all{min-width:0}
/* More sources (16 Oct 2026): under the source's waveform, each source beside it numbered in the turn, then Add */
.layers{margin:12px 0 14px;padding:12px 0 13px;border-top:1px solid #253035;border-bottom:1px solid #253035}
.layers-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.layers-head h4{font:10px var(--mono);letter-spacing:.06em;color:#c0d2de;font-weight:400}
.layers-count{font:10px var(--mono);color:#a0b0b9}
.layers-note{margin:7px 0 8px;font:11px/1.55 Matter;color:#aab8bf}
.layer-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.layer-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:6px;min-height:34px;padding:3px 3px 3px 9px;border:1px solid #1f282d;border-radius:3px;background:#0c1012}
/* each source's sound, changed in its row after it is added (16 Oct 2026): its name a choice, Load audio beside it */
.layer-pick{min-width:0;min-height:30px;padding:4px 6px;border-color:#1d2429;background:#090d0f;color:#d8dfe3;font:12px Matter;text-overflow:ellipsis}
.layer-pick:focus-visible{border-color:#3b464c}
@media(hover:hover){.layer-pick:hover{border-color:#3b464c}}
.layer-load{min-height:28px;min-width:28px;padding:0;border-color:transparent}
.layer-row .layer-kind{min-width:6.5em}.layer-room{min-width:28px}
.layer-load .ui-icon{width:14px;height:14px}
.layer-row .stack-no{font:10px var(--mono);color:var(--orange)}
.layer-kind{font:var(--mf-9) var(--mono);letter-spacing:.04em;color:#8c9ca5}
.layer-remove{min-height:28px;min-width:28px;padding:0;border-color:transparent}
.layer-remove .ui-icon{width:14px;height:14px}
.layer-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:8px}
.layer-add select{min-width:0;min-height:32px;font:12px Matter}
.layer-add button{min-height:32px;font:10px var(--mono);letter-spacing:.03em}
@media(max-width:720px){.layer-row{min-height:40px}.layer-pick{min-height:38px;font-size:13px}.layer-remove,.layer-load{min-height:36px;min-width:36px}.layer-room{min-width:36px}.layer-add select,.layer-add button{min-height:38px;font-size:12px}}
/* The emitter (16 Oct 2026): first in Matter, its four kinds each with its symbol, then what its kind has */
.emitter{margin:0 0 18px;padding-bottom:15px;border-bottom:1px solid #253035}
.emitter h4{font:10px var(--mono);letter-spacing:.06em;color:#c0d2de;font-weight:400}
.emitter-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:9px}
.emitter-kinds button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:6px 4px;font:10px var(--mono);letter-spacing:.03em;color:#9fadb6;border-color:#38464d}
.emitter-kinds button .ui-icon{width:20px;height:20px}
.emitter-kinds button[aria-checked=true]{color:var(--orange);border-color:#ad775885;background:#d8a1781a}
.emitter-note{margin:9px 0 2px;font:11px/1.55 Matter;color:#aab8bf}
.emitter-carrier select{width:100%;min-height:32px;font:12px Matter;margin-top:3px}
@media(max-width:720px){.emitter-kinds button{min-height:56px;font-size:11px}.emitter-carrier select{min-height:38px;font-size:13px}}
/* several emitters (16 Oct 2026): the heading's count and its add, a stack of cards as the forces have, and the mix of the one chosen */
.emitter-head{display:flex;align-items:center;gap:10px}
.emitter-count{font:10px var(--mono);color:#a0b0b9}
.emitter-add{margin-left:auto;min-height:28px;padding:4px 9px;font:10px var(--mono);letter-spacing:.03em}
.emitter-list{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.emitter-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch;border:1px solid #1f282d;border-radius:3px;background:#0c1012}
.emitter-row.selected{border-color:#ad775885;background:#d8a1781a}
.emitter-row.inactive{border-color:#181e21;background:#090d0f}.emitter-row.inactive .emitter-pick .ui-icon{opacity:.4}.emitter-row.inactive .emitter-pick strong{color:#aab3b7}
.emitter-pick{display:grid;grid-template-columns:18px 18px auto minmax(0,1fr);justify-content:stretch;align-items:center;gap:8px;min-height:36px;padding:4px 9px;border:0;border-radius:0;text-align:left;color:#cad3d8}
.emitter-pick .ui-icon{width:18px;height:18px}
.emitter-pick strong{font:12px Matter;font-weight:500}
.emitter-row.selected .stack-no,.emitter-row.selected .emitter-pick strong{color:#f0b086}
.emitter-sum{min-width:0;font:10px var(--mono);color:#8c9ca5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.emitter-on,.emitter-remove{min-width:40px;min-height:0;border:0;border-left:1px solid #1f282d;border-radius:0;padding:0 8px}
.emitter-remove{min-width:34px;padding:0}
.emitter-remove .ui-icon{width:14px;height:14px}
.emitter-first{grid-column:2/4;align-self:center;padding:0 10px;font:var(--mf-9) var(--mono);letter-spacing:.06em;color:#7f8f98}
.emitter-mix{margin-top:10px;padding-top:10px;border-top:1px dashed #253035}
@media(max-width:720px){.emitter-pick{min-height:42px}.emitter-on{min-width:48px}.emitter-remove{min-width:42px}.emitter-add{min-height:36px}}
@media(max-width:720px){.walls-table th{font-size:13px}.wall-strike{min-height:38px;min-width:96px;font-size:11px}.walls-table select{min-height:38px;font-size:13px}}
/* The visual mode (16 Oct 2026): the field alone, full screen, a strip of four sliders that fades when the hands are
   still; the button beside Focus */

/* and nothing of the page but the field anywhere, even where the field's box does not reach (Cyrus, 16 Oct 2026, of
   the iPad app, where WebKit's own full screen laid the field inside the safe area and the page's header and tabs
   showed round it: "Full screen visual mode leaks background"): the page under it hidden, the field and a dialog
   over it shown, and the root in the field's own dark to every edge */
html.visual-mode{background:#04070a}
body.visual-mode{overflow:hidden;visibility:hidden}
body.visual-mode .field-stage,body.visual-mode dialog{visibility:visible}
body.visual-mode .field-stage{position:fixed;inset:0;z-index:80;background:#04070a}
body.visual-mode .field-stage>:not(canvas):not(.visual-ui):not(.field-shade){display:none!important}
body.visual-mode .field-shade{background:radial-gradient(ellipse 90% 85% at 50% 52%,#04070a00 60%,#04070a99 100%)}
body.visual-mode #overlay{cursor:grab}
.field-stage.visual-idle #overlay{cursor:none}
.visual-ui{position:absolute;inset:0;pointer-events:none;transition:opacity .7s ease}
.visual-ui.idle{opacity:0}
.visual-ui>*{pointer-events:auto}.visual-ui.idle>*{pointer-events:none}
/* the corner (18 Oct 2026): PRO, ? and the way out, the shared kit's (ui/cx-visual.css) in the page's type */
#visual-ui{--cxv-font:Matter;--cxv-mono:var(--mono);--cxv-accent:var(--orange);outline:none}
.visual-ui .cxv-corner{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.visual-exit .ui-icon{width:18px;height:18px}
.visual-strip{position:absolute;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 10px));transform:translateX(-50%);display:flex;align-items:center;gap:22px;width:max-content;max-width:calc(100vw - 32px);padding:12px 20px 12px 14px;border:1px solid #ffffff1c;border-radius:16px;background:#080b0db3;box-shadow:0 18px 50px #00000066;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.visual-transport{display:flex;align-items:center;gap:6px;min-width:0}
.visual-transport button{border-color:transparent;min-width:36px;min-height:36px;padding:0;color:#afbabe}
.visual-transport .ui-icon{width:16px;height:16px}
.visual-play{width:46px;height:46px;border-radius:50%!important;border-color:#ed93694d!important;color:var(--orange)!important;background:#ed936914}
.visual-play .ui-icon{width:20px;height:20px}
.visual-name{font:13px Matter;color:#e4e7e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
/* Generate (17 Oct 2026), after the study's arrows: the page's own, in a word, the field's orange on its symbol */
.visual-transport .visual-generate{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:0 13px 0 11px;min-height:36px;border:1px solid #ffffff24;border-radius:18px;background:#ffffff08;color:#e0e5e7;font:var(--mf-9) var(--mono);letter-spacing:.07em;white-space:nowrap}
.visual-transport .visual-generate .ui-icon{width:14px;height:14px;color:var(--orange)}
@media(hover:hover){.visual-transport .visual-generate:hover{border-color:#ed93697a;background:#ed936914}}
/* Undo and Redo (19 Oct 2026, Cyrus: "Undo redo need to be easier to find or more defined on the devicesa"), after
   Generate: the page's own pressed, so a study made can be taken back and put back without leaving; on a phone, Undo
   alone, so the study's name keeps its room */
.visual-transport .visual-edit:not(:disabled){color:#e0e5e7}
@media(hover:hover){.visual-transport .visual-edit:hover:not(:disabled){border-color:#ffffff24;background:#ffffff08}}
@media(max-width:480px){.visual-transport .visual-redo{display:none}}
/* on a phone, its symbol alone in a ring (the help's for it), so the study's name keeps its room, on two lines if need be */
@media(max-width:480px){.visual-transport .visual-generate{justify-content:center;width:38px;min-width:38px;padding:0;margin-left:2px;border-color:#ed93694d;border-radius:50%}.visual-transport .visual-generate span{display:none}.visual-transport .visual-generate .ui-icon{width:16px;height:16px}.visual-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}}
.visual-sliders{display:grid;grid-template-columns:repeat(4,minmax(96px,150px));gap:18px}
/* the study's name whole where the strip is one row (at 1024 px it was cut to "Bell ma…" with room to spare: the sliders
   give way first now, and below 981 px the strip is two rows, its one row not fitting a name and four sliders there), and on the smallest phones the strip's buttons a little closer, so a name has two lines' room */
@media(min-width:981px){.visual-name{min-width:110px}.visual-transport{min-width:min-content}.visual-transport>button{flex:none}}
@media(max-width:360px){.visual-transport{gap:4px}.visual-play{width:40px;height:40px}.visual-transport button:not(.visual-play):not(.visual-generate){min-width:32px}}
.visual-slider{margin:0;color:#a0adb3;font:var(--mf-9) var(--mono);letter-spacing:.06em;text-transform:uppercase}
.visual-slider>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.visual-slider output{color:#e0e5e7;letter-spacing:0}
.visual-slider input{height:30px;accent-color:var(--orange)}
@media(max-width:980px){.visual-strip{flex-direction:column;align-items:stretch;gap:8px;width:calc(100vw - 32px);padding:10px 16px 12px}.visual-transport{justify-content:center}.visual-name{max-width:none;flex:1;text-align:center}.visual-sliders{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}.visual-slider input{height:34px}}
/* and a phone held sideways (18 Oct 2026): the strip one row again, as on a wide screen, clear of the notch, so the
   field keeps its height (and Pro its room over it) */
@media(max-width:980px) and (max-height:520px) and (orientation:landscape){.visual-strip{flex-direction:row;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:7px 14px 7px 9px}.visual-transport{justify-content:flex-start}.visual-name{flex:none;max-width:150px;text-align:left}.visual-sliders{grid-template-columns:repeat(4,minmax(62px,104px));gap:10px}.visual-slider input{height:28px}.visual-play{width:40px;height:40px}.visual-transport .visual-generate{justify-content:center;width:36px;min-width:36px;padding:0;margin-left:2px;border-color:#ed93694d;border-radius:50%}.visual-transport .visual-generate span{display:none}}
/* The help at a glance (16 Oct 2026, Cyrus: "less noise too much too read at first, expand if you want more info but
   clean easy at first glance"): a line on what it is, four steps to start, then each part a row with its symbol and a
   line, its full text folded under it */
#help-dialog.help-guide>p.help-lead{margin-top:10px;font:15px/1.55 Matter;color:#c9d0d3;max-width:58ch}
.help-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 10px;font:var(--mf-9) var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#a1aeb5}
.help-heading span{letter-spacing:.03em;text-transform:none;color:#7d8a90}
.help-start{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.help-start li{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #283035;border-radius:6px;background:#ffffff05;font:13px/1.45 Matter;color:#c4ccd0}
.help-start strong{color:#eef1f1;font-weight:400}
.help-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#93b8c912;color:#a9cad8}
.help-icon .ui-icon{width:17px;height:17px}
.help-start li:first-child .help-icon{background:#ed936918;color:var(--orange)}
.help-guide kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid #394349;border-bottom-width:2px;border-radius:4px;font:10px/1.5 var(--mono);color:#e0e5e7;text-align:center;background:#0a0e10}
.help-parts{display:grid;border-top:1px solid #22292d}
.help-item{border-bottom:1px solid #22292d}
.help-item summary{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;grid-template-areas:"icon name chev" "icon line chev";column-gap:12px;align-items:center;padding:10px 4px;cursor:pointer;list-style:none}
.help-item summary::-webkit-details-marker{display:none}
.help-item summary::after{content:"";grid-area:chev;width:7px;height:7px;border-right:1.3px solid #8c9ca3;border-bottom:1.3px solid #8c9ca3;transform:rotate(45deg);transition:transform .2s;justify-self:center}
.help-item[open] summary::after{transform:rotate(225deg)}
@media(hover:hover){.help-item summary:hover .help-name{color:var(--orange)}}
.help-item summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.help-item .help-icon{grid-area:icon}
.help-name{grid-area:name;font:14px Matter;color:#eef1f1}
.help-line{grid-area:line;font:12px/1.45 Matter;color:#99a4aa}
.help-item>p{margin:2px 0 12px 42px;font:13px/1.65 Matter;color:#c4cbce}
.help-item>p strong{color:#eef1f1;font-weight:400}
.help-keys{display:flex;flex-wrap:wrap;gap:8px 16px;margin:22px 0 0;font:11px Matter;color:#aab4b8}
.help-keys span{display:inline-flex;align-items:center;gap:6px}
#help-dialog.help-guide>p.small{margin-top:12px}
@media(max-width:620px){.help-start{grid-template-columns:1fr}.help-item>p{margin-left:0}}
/* each emitter's and each source's own colour (hues.js): its number in it, and a fine edge at its left */
.emitter-row,.layer-row{box-shadow:inset 3px 0 0 var(--hue,transparent)}
.emitter-row .stack-no,.emitter-row.selected .stack-no,.layer-row .stack-no{color:var(--hue,#f0b086)}
.layer-row.layer-first .layer-kind{color:#8f9ea6}
.sum-source.hued:before{content:'';display:inline-block;width:6px;height:6px;margin:0 5px 1px 0;border-radius:50%;background:var(--hue)}
/* the key under the field: the spectrum's colours, or each emitter's or each source's; pressed, the next of those */
.colour-key{display:inline-flex;align-items:center;gap:7px;padding:0;margin:0;min-height:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;transition:none}
.colour-key:disabled{cursor:default;opacity:1}
@media(hover:hover){.colour-key:hover{background:none}}.colour-key:not(:disabled){pointer-events:auto}@media(hover:hover){.colour-key:not(:disabled):hover{color:#c9d2d6}}
.colour-key .ck-hue{display:inline-flex;align-items:center;gap:4px;color:var(--hue)}
.colour-key .ck-hue:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--hue)}
/* the grain's synthesis (17 Oct 2026, synth-editor.js): three cards, each a graph of its curve over the grain's life, its
   points in the hue of the emitter shaped, its starting points above it and the drives that move it under it */
.synth-panel{padding:24px 26px;background:#101417;--synth-hue:#f29966}
.synth-heading{align-items:flex-start}
.synth-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.synth-tools>button{font:11px Matter;min-height:35px;padding:8px 12px;white-space:nowrap}
.synth-emitters{display:flex;gap:6px}
.synth-emitter{font:10px var(--mono);min-height:35px;gap:7px;padding:7px 11px;color:#bac4c8;letter-spacing:.04em}
.synth-emitter i{width:7px;height:7px;border-radius:50%;background:var(--hue)}
.synth-emitter b{font:var(--mf-9) var(--mono);font-weight:400;color:var(--hue);letter-spacing:.06em}
.synth-emitter[aria-pressed=true]{border-color:var(--hue);color:#eef1f1;background:#ffffff0a}
.synth-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.synth-card{min-width:0;padding:14px 14px 12px;border:1px solid #21292d;border-radius:4px;background:#0d1114;display:flex;flex-direction:column;gap:10px}
.synth-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:35px}
.synth-card-head h3{font:10px var(--mono);letter-spacing:.08em;color:#cdd3d6;margin:0}
.synth-card-head h3 span{margin-left:10px;color:var(--synth-hue);letter-spacing:.04em}
.synth-card.off .synth-card-head h3 span{color:#7b868b}
.synth-on{min-height:32px;padding:6px 11px}
.synth-on[aria-pressed=true]{border-color:var(--synth-hue);color:#fff1e6;background:#ffffff0c}
.synth-on[aria-pressed=true] i{background:var(--synth-hue)}
.synth-starts,.synth-type{display:flex;gap:6px;flex-wrap:wrap}
.synth-starts button,.synth-type button{font:11px Matter;min-height:32px;padding:6px 11px;color:#b7c0c5;flex:1 1 auto}
.synth-starts button[aria-pressed=true],.synth-type button[aria-pressed=true]{border-color:var(--synth-hue);color:#fff1e6;background:#ffffff0c}
.synth-graph canvas{display:block;width:100%;height:150px;border-radius:3px;touch-action:none;outline:none;cursor:default}
.synth-graph canvas:focus-visible{box-shadow:0 0 0 1px #f8bc8f}
/* the card's words keep two lines of room, so a setting that lengthens them (Key past 0 adds the note it follows)
   never moves the card's sliders under them */
.synth-read{font:10px/1.5 var(--mono);color:#a9b5bb;margin:0;min-height:30px}
.synth-knobs{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.synth-drives{display:flex;flex-direction:column;gap:6px}
.synth-drives:empty{display:none}
.synth-drive{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(70px,1.2fr) 52px 28px;gap:6px;align-items:center}
.synth-drive-from,.synth-drive-to{display:flex;align-items:center;gap:5px;min-width:0}
.synth-drive .ui-icon{width:15px;height:15px;flex:none;color:var(--synth-hue)}
.synth-drive-to .ui-icon{color:#809098;width:12px;height:12px}
.synth-drive select{min-height:32px;padding:5px 7px;font-size:11px;min-width:0;flex:1}
.synth-drive-amount{height:24px;background:linear-gradient(90deg,transparent calc(50% - .5px),#55636b calc(50% - .5px),#55636b calc(50% + .5px),transparent calc(50% + .5px)) center/100% 10px no-repeat}
.synth-drive output{font:10px var(--mono);color:#c9d2d6;text-align:right;white-space:nowrap}
.synth-drive-remove{border-color:transparent;padding:4px;min-height:28px;width:28px;color:#95a2a8}
.synth-add{align-self:flex-start;font:11px Matter;min-height:32px;padding:6px 11px;color:#b7c0c5}
.synth-add .ui-icon{width:13px;height:13px}
.synth-legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font:10px var(--mono);color:#909da3}
.synth-legend span{display:inline-flex;align-items:center;gap:7px}
.synth-legend span:before{content:'';width:16px;height:2px;background:var(--synth-hue)}
.synth-legend .synth-key-band:before{height:9px;background:color-mix(in srgb,var(--synth-hue) 18%,transparent);border:1px dashed color-mix(in srgb,var(--synth-hue) 45%,transparent)}
.synth-legend .synth-key-trace:before{height:1px;background:#f4ece0aa}
.synth-panel .pitch-hint{max-width:900px}
@media(max-width:1200px){.synth-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.synth-card:last-child{grid-column:1/-1}}
@media(max-width:720px){.synth-panel{padding:20px 16px}.synth-cards{grid-template-columns:1fr}.synth-graph canvas{height:136px}.synth-tools{justify-content:flex-start;width:100%}.synth-drive{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px 28px}.synth-drive-amount{grid-column:1/3;grid-row:2}.synth-drive output{grid-row:1;grid-column:3}}
/* The Grain view (grain-view.js, 17 Oct 2026): a view of its own over the page, laid out as its mockup was (the site's
   docs/matter-v2/grain-view): the bar (back to the field, the grain, its emitter, Repeat and Strike); on the left the
   stack, its spectrum and the ladder, the pad, the strike's facts and its drives at the right; on a phone one column */
body.grain-mode{overflow:hidden}
.grain-view{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);--gv-hue:#f29966;overscroll-behavior:contain}
.grain-view[hidden]{display:none}
.grain-view button{min-height:34px;letter-spacing:.04em;color:var(--ink)}
.grain-view .ui-icon{width:15px;height:15px;flex:none}
.grain-view select{width:auto;min-height:34px;padding:6px 8px;font:10px var(--mono);letter-spacing:.04em;background:#0b0e0f}
.gv-bar{display:flex;align-items:center;gap:20px;padding:max(14px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 14px max(24px,env(safe-area-inset-left));background:#1a1e20;border-bottom:1px solid var(--line);flex:none}
.gv-back{color:var(--muted)}
.gv-title{min-width:0}
.gv-title h2{margin:0;font:800 21px/1.05 Matter;letter-spacing:-.045em;white-space:nowrap}
.gv-title h2 span{color:#878e91;font-weight:400}
.gv-title h2 b{font-weight:800}
.gv-title p{margin:4px 0 0;font:var(--mf-9)/1.3 var(--mono);letter-spacing:.095em;color:#99a2a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.gv-title p b{color:var(--gv-hue);font-weight:400}
.gv-emitters{display:flex;gap:6px}
.gv-emitters[hidden]{display:none}
.gv-emitters button{min-height:34px;padding:6px 10px;color:var(--muted)}
.gv-emitters button i{width:8px;height:8px;border-radius:50%;background:var(--c);display:block}
.gv-emitters button[aria-pressed=true]{border-color:var(--c);color:var(--ink);background:transparent;box-shadow:inset 0 -2px 0 var(--c)}
.gv-transport{margin-left:auto;display:flex;gap:8px;align-items:center}
.gv-read{font:10px var(--mono);color:var(--muted);letter-spacing:.06em;margin-right:6px;white-space:nowrap}
.gv-read b{color:var(--ink);font-weight:400}
.gv-repeat{display:flex}
.gv-repeat .gv-toggle{border-radius:3px 0 0 3px}
.gv-repeat select{border-radius:0 3px 3px 0;border-left:0;color:var(--muted)}
.gv-strike{background:var(--orange);border-color:var(--orange);color:#161918 !important;font-weight:800;min-height:40px;min-width:126px}
.gv-strike svg{fill:currentColor;stroke:none}
@media(hover:hover){.gv-strike:hover{background:#f4a782}}
.gv-strike.sounding{box-shadow:0 0 0 3px #ed936938}
.gv-main{display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:22px;padding:20px max(26px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left));flex:1;min-height:0;overflow:auto}
.gv-left{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.gv-row1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gv-tabs{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.gv-tabs button{border:0;border-radius:0;border-right:1px solid var(--line);min-height:32px;padding:6px 12px;color:var(--muted)}
.gv-tabs button:last-child{border-right:0}
.gv-tabs button[aria-selected=true]{background:#ed936914;color:var(--orange)}
.gv-starts{display:flex;gap:4px;flex-wrap:wrap}
.gv-starts button{min-height:30px;padding:5px 9px;font-size:var(--mf-9);color:var(--muted);border-color:#1b1e20}
.gv-starts button[aria-pressed=true]{color:var(--gv-hue);border-color:color-mix(in srgb,var(--gv-hue) 45%,transparent);background:color-mix(in srgb,var(--gv-hue) 8%,transparent)}
.gv-stage{position:relative;background:#040507;border:1px solid #15191b;border-radius:4px;overflow:hidden}
.gv-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
.gv-stage canvas:focus-visible{box-shadow:inset 0 0 0 1px var(--orange)}
.gv-stack{flex:1 1 340px;min-height:240px}
.gv-spec{flex:0 1 28%;min-height:120px}
.gv-cap,.gv-cap2,.gv-hint{position:absolute;font:var(--mf-9)/1.4 var(--mono);letter-spacing:.09em;color:var(--muted);pointer-events:none}
.gv-cap{left:12px;top:10px}
.gv-cap2{right:12px;top:10px;text-align:right}
.gv-hint{left:12px;top:26px;color:var(--quiet);font-size:var(--mf-9)}
.gv-hint[hidden]{display:none}
.gv-ladder{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
.gv-ladder button{border:0;border-right:1px solid var(--line);border-radius:0;flex-direction:column;gap:5px;padding:9px 4px 8px;color:var(--quiet);font-size:var(--mf-9);min-height:54px;background:transparent}
.gv-ladder button:last-child{border-right:0}
.gv-ladder button[aria-pressed=true]{background:transparent;color:var(--quiet);border-color:var(--line)}
.gv-ladder button.in{color:var(--ink);background:#ffffff05}
.gv-ladder button.at{color:var(--orange);background:#ed936912;box-shadow:inset 0 -2px 0 var(--orange)}
.gv-ladder .ui-icon{width:17px;height:17px}
.gv-energy{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#141718}
.gv-energy i{display:block;height:100%;transition:width .25s}
#gv-e0{background:var(--gv-hue)}#gv-e1{background:#93b8c9}#gv-e2{background:#424f55}
.gv-legend{display:flex;justify-content:space-between;margin:6px 0 0;font:var(--mf-9) var(--mono);color:var(--muted);letter-spacing:.06em}
.gv-legend b{font-weight:400;color:var(--ink)}
.gv-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.gv-sec{font:var(--mf-9) var(--mono);letter-spacing:.09em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px}
.gv-up{display:flex;align-items:center;gap:6px;color:#93b8c9}
.gv-pad{position:relative;height:clamp(200px,36vh,368px);background:#040507;border:1px solid #15191b;border-radius:4px;overflow:hidden;flex:none}
.gv-pad canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.gv-fact{display:grid;grid-template-columns:18px 72px minmax(0,1fr) 70px;align-items:center;gap:10px;padding:1px 0;border-top:1px solid #171b1d;font:var(--mf-9h) var(--mono);letter-spacing:.05em;color:var(--muted)}
.gv-fact b{color:var(--ink);font-weight:400;text-align:right}
.gv-fact input[type=range]{height:26px;accent-color:#93b8c9}
.gv-fact select{min-height:30px;padding:4px 8px}
.gv-fact:first-of-type input[type=range]{accent-color:var(--orange)}
.gv-fact select{grid-column:3/5;width:100%}
.gv-fact.up span{color:#93b8c9}
.gv-fact[hidden]{display:none}
/* where it reads: its source drawn, dragged as a slider; beside it, where the emitter is (a dot in its colour) or, set by
   hand, the way back there */
.gv-wave{display:block;width:100%;height:30px;border-radius:2px;cursor:ew-resize;touch-action:none;outline:0}
.gv-wave:focus-visible{box-shadow:0 0 0 1px var(--orange)}
.gv-follow{min-height:30px;padding:0 0 0 4px;gap:6px;justify-content:flex-end;border:0;color:var(--ink);font:var(--mf-9h) var(--mono);letter-spacing:.05em}
.gv-follow i{width:7px;height:7px;border-radius:50%;background:var(--gv-hue);display:block;flex:none}
.gv-follow .ui-icon{width:13px;height:13px;color:#93b8c9;flex:none}
@media(hover:hover){.gv-follow:hover:not(:disabled){color:#93b8c9;background:transparent}}
.gv-follow:disabled{cursor:default;color:var(--muted);opacity:1}
.gv-drive{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #171b1d;font:var(--mf-9h) var(--mono);letter-spacing:.05em;color:var(--muted)}
.gv-drive b{color:var(--ink);font-weight:400}
.gv-drive em{font-style:normal;color:var(--orange)}
.gv-none{margin:6px 0 0;font:11px/1.5 Matter;color:var(--quiet)}
@media(max-width:1180px){.gv-main{grid-template-columns:minmax(0,1fr) 340px}.gv-read{display:none}}
/* a phone: one column, the bar on two rows, the spectrum in the stack's place for the Filter */
@media(max-width:760px){
 .gv-bar{flex-wrap:wrap;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 12px}
 .gv-title h2{font-size:19px}
 .gv-title p{max-width:none;white-space:normal;line-height:1.5}
 .gv-emitters{margin-left:auto}
 .gv-emitters button{padding:6px 8px;font-size:var(--mf-9)}
 .gv-transport{flex-basis:100%;margin-left:0}
 .gv-transport .gv-strike{flex:1;min-width:0}
 .gv-main{display:flex;flex-direction:column;gap:12px;padding:12px 16px max(16px,env(safe-area-inset-bottom))}
 .gv-left{gap:12px}
 .gv-left,.gv-side{flex:none}
 .gv-stack,.gv-spec{flex:none;height:250px;min-height:0}
 .grain-view:not([data-curve=filter]) .gv-spec,.grain-view[data-curve=filter] .gv-stack{display:none}
 .gv-pad{height:192px}
 .gv-fact{grid-template-columns:18px 76px minmax(0,1fr) 56px;gap:8px}
 .gv-starts button{padding:4px 7px}
}
/* On the frame (18 Oct 2026, ui/cx-frame.css; Cyrus: "Streamline ui on both and make it look less chaotic and not have
   people relearn the interfaces between devices as we build more"): Matter / Field's own parts as they sit in it */
/* the study's room on two rows as on one, 352 px, where the frame keeps 410 for Polite Disorder's longest kit name: the
   longest study's (Clockwork orchestra, 185 px) is whole beside the pager with a finger, and the pager sits nearer the
   shorter ones (19 Oct 2026, Cyrus, of the strip at 990 px: "sloppy preset area on web"); wider by SHARE's room beside
   them (the frame's --cxf-share-room), so a name keeps it */
@media(min-width:640px) and (max-width:1099px){
  .cxf-strip{grid-template-columns:minmax(calc(230px + var(--cxf-share-room)),calc(352px + var(--cxf-share-room))) minmax(0,1fr)}
}
/* GENERATE's settings, in its menu: Motion, off or how much, the frame's chips (1 Nov 2026, the family pass) */
.cxf-generate .generate-options{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}
/* the field's corners: what the hand does and its counts (top left), how it plays and its marks (top right), VIEW
   (bottom left), the camera (bottom right), the hint between them */
.cxf-tl .stage-readout{gap:14px;margin-left:3px;font:var(--mf-9) var(--mono);color:#83929b;letter-spacing:.06em;pointer-events:none}
.cxf-tl #depth-readout{display:none}
/* the counts hold their place: each as wide as its most, three digits (960 fragments, 128 voices), its digits to the
   right and untracked so three fill it exactly, so FRAGMENTS, VOICES and the key's box after them stay put as the
   numbers change (22 Oct 2026, Cyrus: "they should hold position regardless of fragment amount") */
.stage-readout b{display:inline-block;min-width:3ch;text-align:right;letter-spacing:0;font-variant-numeric:tabular-nums}
/* and VOICES as near its count as FRAGMENTS is to its own: the count's margin alone between them, no space as well */
.cxf-tl .stage-readout>span{display:flex;align-items:center}
/* the fragment budget's cap beside them, / 16 to / 960, keeps the room of its longest the same way */
.fragments-open #fragment-cap{display:inline-block;min-width:5ch;text-align:right;letter-spacing:0;font-variant-numeric:tabular-nums}
/* an object's numbers sit to the right of the room their longest keeps (stage-editor.js, objectRead) */
.object-sliders .stage-control output{text-align:right}
/* the engine's status in the footer keeps the room of its longest, PEAK CEILING ACTIVE, its words to the right, so the
   dot and LOCAL AUDIO before it hold still as it changes (under 961 px it is hidden, or on a line of its own) */
@media(min-width:961px){footer b{display:inline-block;min-width:calc(19ch + .76em);text-align:right}}
.cxf-tr .motion-select{display:flex;gap:3px;align-items:center}
.cxf-tr .field-marks{display:flex;flex-direction:column;align-items:stretch;gap:1px}
.cxf-br .camera-tools{display:flex;gap:1px;padding:3px;border:1px solid #222b2f;border-radius:4px;background:#0b0f12d9}
.field-stage .cxf-hint{color:#97a4aa}
/* VIEW: the display modes, then GUIDES, SOURCE MAP, LABELS and VISUALS, the colour key, FOCUS */
.cxf-view>.cxf-menu{gap:11px}
.cxf-view .display-modes{display:flex;align-self:flex-start;gap:2px;padding:3px;border:1px solid #222b2f;border-radius:4px;background:#0b0f12d9}
.cxf-view .view-options{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cxf-view .visual-quality{margin:0 0 0 2px}
.cxf-view .spectral-key{flex-wrap:wrap;row-gap:8px}
.cxf-view .key-mark{margin-left:4px}
.cxf-view #focus-view{align-self:flex-start;min-height:30px;padding:5px 10px;font:var(--mf-9) var(--mono);letter-spacing:.06em;text-transform:uppercase}
/* the tab row, one row with Grain at its end, by its name: on a phone it slides sideways */
.workspace-toolbar .inspector-tabs{flex:none;overflow:visible}
.workspace-toolbar #grain-open>span{display:inline}
/* the macros across their row, the tempo the bar's */
.performance-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:720px){
  .instrument-top{grid-template-rows:clamp(400px,calc(60svh - var(--cxo-h,0px)),560px) 50px auto}
  .focus-workspace .instrument-top{grid-template-rows:min(calc(62dvh - var(--cxo-h,0px)),570px) 50px auto}
  .workspace-toolbar.cxf-tabs{gap:0;padding:0 10px}
  .workspace-toolbar .inspector-tabs{gap:0}
  .workspace-toolbar .inspector-tabs button{min-width:0;min-height:49px;padding:0 12px;gap:7px;font-size:11px}
  .workspace-toolbar #grain-open{min-width:0;margin:0 0 0 2px;padding:0 12px;gap:6px;border-left:1px solid #272c2e;border-radius:0}
  .workspace-toolbar #grain-open>span{display:inline}
  .performance-strip{gap:14px 18px}
  .macro p{display:none}
  /* the tools by their symbols but the one in use, and the keys' chip left to Pitch, so the corners keep apart */
  .cxf-tl .view-tools button:not([aria-pressed=true])>span{display:none}
  .cxf-tl .stage-readout .current-key{display:none}
}
/* on the smallest phones the counts one above the other, so the marks keep room for the widest pitch range (a mark a
   semitone: Bell machine's two and a half octaves ran into the counts at 320 px) */
@media(max-width:359px){.cxf-tl .stage-readout{flex-direction:column;align-items:flex-start;gap:3px}}

/* the master chain (18 Oct 2026, chain-editor.js and ui/cx-chain.css, every device's): its two panels, each in its sheet
   from the output section at the window's foot (ui/cx-output.css, 25 Oct 2026; under the field until then), and the
   parts' own colours in Matter / Field's: its cards as the Synth tab's, its pictures' ground darker, the meters and the
   colour's curve in its blues and its warm */
.chain-panel{--cx-panel:#0d1114;--cx-well:#090d0f;--cx-meter-in:#c9cfd1;--cx-meter-limit:#b3a6d4;--cx-meter-out:#93b8c9;--cx-warm:#e0b48f}
.chain-note{max-width:760px;margin:0 0 16px;font:12px/1.6 Matter;color:#9caab2}

/* A pass over the phone and the finger (19 Oct 2026, Cyrus: "Do a pass focused on ui UX navigation aesthetics"). The
   macros' names whole (FRACTURE broke under its symbol at 375 px, its slider lower than the other two), the value going
   under its name only where both do not fit, and the three sliders level whatever their labels above them take */
@media(max-width:720px){
  .macro{display:flex;flex-direction:column}
  .macro label{flex-wrap:wrap;row-gap:2px}
  .macro label>span{white-space:nowrap}
  .macro input{margin-top:auto}
}
/* and on a phone narrower than 420 px the three without their symbols, so each name and its value keep one line (a
   column there is about 100 px: FRACTURE's symbol, name and value took 103) */
@media(max-width:420px){.macro .macro-symbol{display:none}}
/* the Grain view's line under its name on two lines where its bar is one row and short of room, so the grain's length at
   its end is read (at 768 px it was cut) */
@media(min-width:761px) and (max-width:1180px){.gv-title p{max-width:none;white-space:normal;line-height:1.35}}
/* a finger's size where nothing points but a finger: the field's corner tools, its counts and marks, the lower panel's fold
   (24 to 30 px across before) */
@media(pointer:coarse){
  .view-tools button{min-width:36px;min-height:36px}
  .camera-tools button{width:36px;min-height:36px}
  .motion-select button{min-height:36px}
  .stage-readout .fragments-open{min-height:32px}
  .field-mark{min-height:32px}
  #deck-collapse{min-width:36px;width:36px;min-height:36px}
  #load,.stage-readout .current-key{min-height:32px}
  /* and the dock beside the field on a tablet (17 to 28 px before): the sliders under the dials, a force's grip, a drive's
     ×, a line with a box to tick, the Grain view's starting curves */
  .dial input{height:28px}
  .synth-drive-remove{width:32px;min-height:32px}
  .check{min-height:32px}
  .gv-starts button{min-height:32px}
  .view-options button,.colour-key:not(:disabled),.cxf-view .display-modes button,.cxf-view #visual-quality,.cxf-view #focus-view{min-height:32px}
}
/* a force's grip on a tablet (on a phone 34 px already), its card's gaps closing by what the grip takes, so the
   strength and reach under its name stay whole */
@media(pointer:coarse) and (min-width:721px){.stack-grip{flex-basis:32px}.viewport-inspector .force-card-main{column-gap:6px}}
/* on the smallest phones the corner's tools 30 by 32 px, so they keep clear of RHYTHM and PITCH beside and under them
   (at 320 px, 36 px ran them into the marks) */
@media(pointer:coarse) and (max-width:359px){.view-tools button{min-width:30px;min-height:32px}}
/* One panel at a time on a phone (19 Oct 2026, of the second pass: "Do all six as recommended"): up to 720 px the lower
   panel's tabs sit under the upper one's (workspace.js moves its section there), the two rows over one place, which
   shows the panel whose tab was chosen last; each row marks its tab chosen only where its panel shows */
.one-place .instrument-top{grid-template-rows:clamp(400px,calc(60svh - var(--cxo-h,0px)),560px) 50px auto auto}
.one-place.focus-workspace .instrument-top{grid-template-rows:min(calc(62dvh - var(--cxo-h,0px)),570px) 50px auto auto}
.one-place .instrument-top>.workspace-deck{grid-column:1;grid-row:3;min-width:0}
.one-place .viewport-inspector{grid-row:4}
.one-place[data-place=deck] .viewport-inspector,.one-place[data-place=none] .viewport-inspector{display:none}
.one-place[data-place=inspector] #deck-body,.one-place[data-place=none] #deck-body{display:none}
/* the two rows read as one set: the lower one under the upper's line, its ground the same */
.one-place .instrument-top>.workspace-deck .deck-heading{background:#111415;border-bottom-color:#272c2e}
.one-place[data-place=deck] .workspace-deck .deck-heading{border-bottom-color:#47555c}
/* the card lets the field's hands through, as the opening line did: a pinch, a turn or a drag begun on its words reaches
   the field; its PLAY takes a press as a button does, and a pinch on it never zooms the page */
.field-stage .cxh-card{z-index:4;pointer-events:none}
.field-stage .cxh-card :is(button,a){pointer-events:auto;touch-action:none}
/* the field's small print a size up where only a finger points, as the frame's beside it (ui/cx-frame.css, its last rule;
   1 Nov 2026, Cyrus, "Do all as you recommend", to the CS/M site's chat's "10–11 px on touch screens"): FIELD, SCAN and
   ROTATE, the counts' words and the key's box, FALL, CLOUD and PULSE, the marks, and VIEW's options and FOCUS, at 10 px */
@media(pointer:coarse){
  .view-tools button,.cxf-tl .stage-readout,.stage-readout .current-key,.motion-select button,.field-mark,.view-options button,.visual-quality,
  .cxf-view #focus-view{font-size:10px}
}