@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--bg:#eeede9;--panel:#f8f7f3;--line:#cccdc8;--text:#303330;--muted:#646965;--acid:#bf440c;--blue:#636b67;--orange:#bd440f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:16px}button,input,select{font:inherit}button,select{border:1px solid var(--line);background:#e7e7e1;color:var(--text);border-radius:3px;padding:9px 12px;cursor:pointer}button:hover{border-color:var(--acid);color:var(--acid)}button:focus-visible,input:focus-visible,select:focus-visible,#xy:focus-visible{outline:2px solid var(--acid);outline-offset:3px}button.primary{background:var(--acid);color:#fffaf4;border-color:var(--acid);font-weight:600}button.stop{color:var(--orange)}button[aria-pressed=true]{color:var(--acid);border-color:var(--acid)}header{padding:25px 30px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.identity{display:flex;gap:16px;align-items:center}.mark{font-size:42px;color:var(--acid)}h1{font-size:27px;letter-spacing:3px;margin:0;line-height:1.2;font-weight:500}h1 span{color:var(--acid);font:12px 'IBM Plex Mono',monospace;vertical-align:top;margin-left:10px}.identity p{font:12px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--muted);margin:7px 0 0}.transport{display:flex;gap:8px;align-items:center}#status{font:12px 'IBM Plex Mono',monospace;color:var(--muted);margin-right:10px}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;padding:22px 30px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:5px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;border-bottom:1px solid var(--line);min-height:56px;gap:12px}.panel-title h2,.understanding h2{font:500 13px 'IBM Plex Mono',monospace;letter-spacing:1px;margin:0}.panel-title>div,.tag{font:12px 'IBM Plex Mono',monospace;color:var(--muted)}.panel-title button{font-size:12px;padding:5px 9px;margin-left:8px}.tag{color:var(--acid)}.field{display:flex;flex-direction:column;min-height:510px}#canvas{height:450px;flex:1;min-height:320px;position:relative;overflow:hidden;touch-action:none}#canvas canvas{display:block}#canvas:fullscreen{height:100vh;background:var(--bg)}.field-footer{display:flex;justify-content:space-between;gap:10px;padding:12px 17px;color:var(--muted);font:12px 'IBM Plex Mono',monospace;border-top:1px solid var(--line)}#field-state{color:var(--acid)}.organism{grid-row:span 2}.preset-label{display:block;margin:18px;font-size:14px;color:var(--muted)}select{display:block;width:100%;margin-top:8px;font-size:14px}.control{margin:18px}.control-top{display:flex;justify-content:space-between;gap:15px;font-size:14px}.control output{font:13px 'IBM Plex Mono',monospace;color:var(--acid)}input[type=range]{width:100%;accent-color:var(--acid);height:20px;margin:9px 0 0;cursor:pointer}.control small{font-size:12px;color:var(--muted);display:block}.xy-title{display:flex;justify-content:space-between;margin:24px 18px 10px;font:12px 'IBM Plex Mono',monospace}.xy-title output{color:var(--acid)}#xy{position:relative;margin:0 18px;height:170px;border:1px solid #b5b9af;touch-action:none;cursor:crosshair;background:linear-gradient(90deg,transparent 49.8%,#cdd0c6 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#cdd0c6 50%,transparent 50.2%),radial-gradient(ellipse at 60% 50%,#e6e8dd,#f3f1eb)}#xy span{position:absolute;font:10px 'IBM Plex Mono',monospace;color:var(--muted);pointer-events:none}.xy-top{top:7px;left:50%;transform:translateX(-50%)}.xy-bottom{bottom:7px;left:50%;transform:translateX(-50%)}.xy-left{top:50%;left:8px}.xy-right{top:50%;right:8px}#xy-dot{position:absolute;width:13px;height:13px;border:2px solid var(--acid);border-radius:50%;left:45%;top:55%;transform:translate(-50%,-50%);box-shadow:0 0 18px #c7502166;pointer-events:none}.meters{margin:22px 18px}.meters label{display:grid;grid-template-columns:110px 1fr;align-items:center;font-size:12px;margin:10px 0;color:var(--muted)}meter{width:100%;height:7px}meter::-webkit-meter-bar{background:#d2d3cc;border:0}meter::-webkit-meter-optimum-value{background:var(--blue)}.tempo{font:12px 'IBM Plex Mono',monospace;color:var(--muted);display:flex;align-items:center;gap:8px}.tempo input{width:59px;background:transparent;border:1px solid var(--line);color:var(--acid);padding:5px;font-size:14px}#lanes{padding:12px 16px}.lane{display:grid;grid-template-columns:92px 1fr 55px 56px;gap:10px;align-items:center;margin:12px 0}.lane-label{font:12px 'IBM Plex Mono',monospace;color:var(--blue)}.steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}.step{padding:0;height:28px;border-radius:2px;background:#e5e5df;position:relative}.step.on{background:#d7591b;border-color:#b94512}.step.current{box-shadow:0 0 0 2px #343b37;z-index:1}.step.outside{opacity:.18}.lane input,.lane select{width:100%;margin:0;padding:5px;background:#e5e5df;border:1px solid var(--line);color:var(--muted);font:12px 'IBM Plex Mono',monospace}.lane select{padding:5px 1px}.panel-note{font-size:12px;color:var(--muted);padding:0 16px 16px}.matrix{grid-column:1 / -1}#matrix{display:grid;grid-template-columns:150px repeat(6,minmax(65px,1fr));padding:13px 20px;gap:4px 10px;align-items:center}.matrix-head,.source{font:12px 'IBM Plex Mono',monospace;color:var(--muted);padding:8px 0}.matrix-head{text-align:center}.patch{height:27px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center}.patch:before{content:'';width:10px;height:10px;border:1px solid #959b93;border-radius:50%;background:#e2e3dd}.patch.positive:before{background:var(--acid);border-color:var(--acid);box-shadow:0 0 10px #c7502133}.patch.negative:before{background:var(--orange);border-color:var(--orange)}.patch:hover{background:#e4e5de}.matrix-key{display:flex;gap:24px;padding:8px 20px 17px;font-size:12px;color:var(--muted)}.matrix-key i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.pos{background:var(--acid)}.neg{background:var(--orange)}.understanding{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:22px}.understanding h2{color:var(--acid)}.understanding p{font-size:14px;line-height:1.6;margin:10px 0 0}.muted{color:var(--muted)}details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:14px}summary{cursor:pointer}footer{display:flex;justify-content:space-between;padding:0 30px 25px;gap:20px;color:var(--muted);font:12px 'IBM Plex Mono',monospace}@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 410px}#canvas{height:520px}}@media(max-width:1050px){header{align-items:flex-start;flex-direction:column}main{grid-template-columns:minmax(0,1fr) 310px;padding:16px}.lane{grid-template-columns:65px 1fr 40px 42px;gap:6px}.steps{gap:2px}.lane-label{font-size:11px}.field-footer{font-size:10px}}@media(max-width:780px){header{padding:20px 16px}.transport{flex-wrap:wrap}#status{width:100%}main{display:flex;flex-direction:column}.organism{order:2}.sequence{order:1}.matrix{order:3;overflow-x:auto}.understanding{order:4;grid-template-columns:1fr}#matrix{min-width:620px}.matrix-key{min-width:550px}.field{min-height:370px}#canvas{height:320px}.lane{grid-template-columns:60px 1fr 38px 40px;gap:5px}.step{height:26px}footer{flex-direction:column;padding:0 16px 20px}.field-footer{font-size:10px}.identity p{font-size:10px}h1{font-size:24px}.understanding details{grid-column:auto}}

button.primary:hover{color:#fff;background:#a73809}.field-footer{background:#e9eae3}.mark{font-size:44px}#canvas:fullscreen{background:#eeede9}.step.current{outline:2px solid #333c36;outline-offset:2px}.panel-title{background:#f0f0ea}.source{color:#565d56}
/* Study 002: an off-white instrument surface, graphite structure, signal orange. */
header{padding:24px 30px;background:#f7f6f1}.identity p{letter-spacing:.5px}.organism{grid-row:auto}.field{min-height:640px}#canvas{height:510px;min-height:360px;background:#eeede9}.field-analysis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:18px;background:#f4f3ee;border-top:1px solid var(--line)}.field-analysis span{display:block;font:12px 'IBM Plex Mono',monospace;margin-bottom:8px;color:var(--muted)}.field-analysis meter{display:block;height:6px}.preset-label{margin:14px 18px}.source-selects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 18px}.source-selects label{font-size:13px;color:var(--muted)}.source-selects select{font-size:13px;padding:7px 5px}.xy-title{margin-top:18px}#xy{height:135px;background:linear-gradient(90deg,transparent 49.8%,#c7ccc0 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#c7ccc0 50%,transparent 50.2%),radial-gradient(ellipse at 65% 60%,#e2dfd5,#f4f3ed)}#xy span{font-size:10px;color:#63675e}#xy-dot{width:13px;height:13px;background:#bf440c33}#voice-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:17px 18px}#voice-controls .control{margin:0}.control small{font-size:12px;line-height:1.4}.imprint-actions{display:flex;gap:8px;margin:15px 18px}.imprint-actions button{font-size:13px;padding:7px 10px;flex:1}.kernel-view{padding:12px 18px 14px;border-top:1px solid var(--line);background:#efefe8}.kernel-view>div{display:flex;justify-content:space-between;align-items:center;font:10px 'IBM Plex Mono',monospace;color:#60675e}.kernel-view output{color:var(--acid)}#kernel{width:100%;height:60px;display:block;margin:5px 0}.kernel-view i{display:inline-block;width:15px;height:2px;background:#596357;vertical-align:middle}.kernel-view .voice-key{background:var(--acid)}.loop-controls,.sequence{grid-column:1/-1}.loop-controls #macros{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.loop-controls .control{padding:0 16px;margin:18px 0;border-right:1px solid var(--line)}.loop-controls .control:last-child{border-right:0}.lane{grid-template-columns:125px 1fr 60px 60px}.steps{gap:7px}.step{height:30px}.step.on{background:#cb531c}.step.current{box-shadow:none}.lane-label{font-size:12px}.matrix-key .neg{background:#555f56}.patch.negative:before{background:#596358;border-color:#596358}.patch.negative:after{content:'−';font:12px monospace;position:absolute;color:white}.understanding a{color:#a3390c;text-underline-offset:3px}.understanding p{font-size:14px}h1{font-size:26px;letter-spacing:2.5px}button[aria-pressed=true]{background:#f6e2d5}.tag{font-size:11px}#canvas:focus-visible{outline:2px solid var(--acid);outline-offset:-4px}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 330px}.transport{flex-wrap:wrap}.field{min-height:610px}#canvas{height:480px}.control-top{font-size:13px}.loop-controls .control{padding:0 12px}.identity p{font-size:11px}}
@media(max-width:780px){.field{min-height:390px}#canvas{height:320px;min-height:280px}.field-analysis{padding:13px;gap:12px}.field-analysis span{font-size:10px}.organism{order:1}.loop-controls{order:2}.sequence{order:3}.matrix{order:4}.understanding{order:5}.loop-controls #macros{grid-template-columns:repeat(2,minmax(0,1fr))}.loop-controls .control:nth-child(even){border-right:0}.loop-controls .control:last-child{grid-column:1/-1}.source-selects label{font-size:14px}.lane{grid-template-columns:66px 1fr 38px 42px;gap:5px}.steps{gap:3px}.lane-label{font-size:10px}.step{height:28px}.tag{font-size:10px}.identity p{font-size:9px}.field-footer{font-size:9px}.panel-title h2{font-size:12px}.imprint-actions button{font-size:14px}#voice-controls{gap:20px}.control-top{font-size:14px}.kernel-view>div{font-size:11px}}
/* TEST.001 extends the existing laboratory surface. */
h1{font-size:clamp(18px,2.1vw,30px)}
.human-panel,.neuro-panel,.telex-panel{grid-column:1/-1}
.joysticks{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:20px}
.joystick{max-width:460px;width:100%;margin:auto}.joystick p{font:12px 'IBM Plex Mono',monospace;margin:12px 0;color:#5c6159}.joystick label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.stick{position:relative;height:210px;border:1px solid #a8aaa2;background:linear-gradient(transparent calc(50% - .5px),#bec0b7 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#bec0b7 50%,transparent calc(50% + .5px));touch-action:none;cursor:crosshair;margin-top:10px;overflow:hidden}
.stick:focus-visible{outline:2px solid #bf440c;outline-offset:3px}.stick i{position:absolute;width:24px;height:24px;border:2px solid #bf440c;border-radius:50%;background:#eeede9;transform:translate(-50%,-50%);pointer-events:none}.stick i:after{content:'';position:absolute;inset:7px;background:#bf440c;border-radius:50%}
.neuro-panel>p,.neuro-grid{margin:18px 20px;font:13px/1.9 'IBM Plex Mono',monospace}.neuro-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;color:#686c64}.neuro-grid strong{display:block;color:#31392e;font-size:13px;font-weight:500}
#telex{list-style:none;padding:12px 20px;margin:0;min-height:80px;max-height:230px;overflow:auto;font:13px/1.9 'IBM Plex Mono',monospace}#telex li:first-child{color:#a63c0b}
#matrix{grid-template-columns:minmax(135px,1.6fr) repeat(8,minmax(56px,1fr));min-width:670px}.matrix{overflow:auto}.imprint-actions{flex-wrap:wrap}
@media(max-width:700px){.joysticks{gap:18px;padding:15px}.stick{height:160px}.joystick label{display:block}.joystick select{width:100%;margin-top:6px}.xy-title{flex-wrap:wrap}.neuro-grid{grid-template-columns:1fr 1fr}.panel-title{gap:8px;flex-wrap:wrap}.joystick p{min-height:40px}}
@media(max-width:420px){.joysticks{grid-template-columns:1fr}.stick{height:180px}}

/* TEST.017: compact bass, macro NET presence and source-derived micro rhythm controls. */
.bass-strip{display:grid;grid-template-columns:auto auto repeat(5,minmax(105px,1fr));gap:10px;align-items:end;padding:14px 17px;border-top:1px solid var(--line);background:#efefe9}.bass-strip>strong{grid-column:1/-1;font:600 11px 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--acid)}.bass-strip button{font:11px 'IBM Plex Mono',monospace;min-height:42px}.bass-strip label{font:11px 'IBM Plex Mono',monospace;color:var(--muted)}.bass-strip label output{float:right;color:var(--acid)}.bass-strip input{display:block}.bass-strip>output{grid-column:1/-1;font:11px 'IBM Plex Mono',monospace;color:var(--text);padding-top:2px}.compression-strip>strong{color:var(--acid)}
@media(max-width:1050px){.bass-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.bass-strip>strong,.bass-strip>output{grid-column:1/-1}}
@media(max-width:620px){.bass-strip{grid-template-columns:1fr 1fr}.bass-strip>strong,.bass-strip>output{grid-column:1/-1}}