@font-face{font-family:SourceCode;src:url("../../jssproject/SourceCodePro-VariableFont_wght.ttf") format("truetype");font-display:swap}
:root{--ink:#111510;--paper:#eee9da;--paper2:#d9d2bd;--line:#a8a18e;--scope:#080d09;--green:#9cffb6;--amber:#ffb452;--white:#fffdf3;--mono:SourceCode,"Courier New",monospace}
*{box-sizing:border-box}html{background:var(--ink);color:var(--ink);font-family:var(--mono)}body{margin:0;min-width:320px;background:var(--paper);background-image:linear-gradient(rgba(17,21,16,.035) 1px,transparent 1px);background-size:100% 4px}
button,input,select,textarea{font:inherit}button,select,input{color:inherit}.masthead{min-height:116px;padding:26px clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #30382f;background:var(--ink);color:var(--white)}
.eyebrow,.panel-index{margin:0 0 6px;font-size:11px;letter-spacing:.17em;font-weight:700}.masthead h1{margin:0;font-family:serif;font-size:clamp(34px,5vw,56px);font-weight:500;line-height:.9}.masthead h1 span{margin-left:12px;font:10px var(--mono);letter-spacing:.24em;color:#a8b1a5}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.button,.mini-button{border:1px solid currentColor;background:transparent;cursor:pointer;text-transform:uppercase;font-weight:700;letter-spacing:.07em;transition:.18s}.button{padding:11px 16px;color:var(--white)}.button:hover,.button:focus-visible{transform:translateY(-1px);box-shadow:3px 3px 0 var(--amber)}.button.primary{background:var(--green);border-color:var(--green);color:var(--ink)}.status{padding:6px 9px;border:1px solid #465245;color:#aab7a9;font-size:11px}.status[data-kind="error"]{color:#ff8e7c;border-color:#a14337}
main{max-width:1580px;margin:auto}.scope-deck{padding:24px clamp(14px,3.6vw,52px) 20px;background:#171d17;color:#dce5da;border-bottom:8px solid #33382e}.scope-titlebar{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.channel-label{display:inline-block;margin:0 20px 0 0;font-size:11px}.channel-label span{color:#899288;margin-left:6px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.dot-x{background:var(--amber);box-shadow:0 0 8px var(--amber)}.dot-y{background:var(--green);box-shadow:0 0 8px var(--green)}
.scope-tabs{display:flex;border:1px solid #394239}.scope-tab{padding:7px 12px;border:0;border-right:1px solid #394239;background:transparent;color:#7f8d7d;font-size:10px;cursor:pointer}.scope-tab:last-child{border:0}.scope-tab.active{background:#d6ded4;color:#111}.screens{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.screen{position:relative;margin:0;height:clamp(300px,43vw,560px);border:1px solid #485448;background:var(--scope);overflow:hidden}.screen figcaption{position:absolute;z-index:2;top:12px;left:14px;color:#849183;font-size:10px;letter-spacing:.1em}.screen figcaption span{color:var(--green);margin-left:7px}.screen canvas{display:block;width:100%;height:100%}.screens[data-view="xy"]{grid-template-columns:1fr}.screens[data-view="xy"] .screen-time{display:none}.screens[data-view="time"]{grid-template-columns:1fr}.screens[data-view="time"] .screen-xy{display:none}
.scope-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-top:15px}.scope-controls label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;font-size:9px;letter-spacing:.08em;color:#8d988b}.scope-controls select{grid-column:2/4}.scope-controls input{accent-color:var(--green);min-width:40px}.scope-controls output{color:#dbe5da;font-size:10px}
.workbench{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);border-bottom:1px solid var(--ink)}.editor-panel,.panel{padding:28px clamp(18px,3vw,42px)}.editor-panel{border-right:1px solid var(--ink)}.side-stack{display:grid;grid-template-rows:auto auto 1fr}.side-stack .panel+.panel{border-top:1px solid var(--ink)}.panel-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}.panel-heading.compact{margin-bottom:12px}.panel-heading h2,.keyboard-copy h2{margin:0;font:500 clamp(22px,2vw,31px) serif}.preset-wrap{display:flex;align-items:center;gap:7px;font-size:10px}.preset-wrap select,.scope-controls select{background:#232b23;color:#e8eee6;border:1px solid #4c574c;padding:6px}.mini-button{padding:7px 10px;background:var(--ink);color:var(--white);font-size:10px}.mini-button:hover{background:var(--green);color:var(--ink)}.mini-button.wide{width:100%;margin-top:8px}
.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.formula-card{display:block;border:1px solid var(--ink);background:#f8f4e8}.formula-card>span{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--ink);font-size:9px;letter-spacing:.1em}.formula-card b{font-size:15px}.formula-x b{color:#b56c0d}.formula-y b{color:#168743}.formula-card textarea{display:block;width:100%;height:190px;border:0;resize:vertical;padding:14px;background:transparent;font-size:13px;line-height:1.65;outline:none;tab-size:2}.formula-card:focus-within{box-shadow:4px 4px 0 var(--ink)}.compile-row{display:flex;align-items:center;gap:16px;margin-top:13px;flex-wrap:wrap}.compile-row .button{border-color:var(--ink);color:var(--ink)}.compile-row .button.primary{border-color:var(--ink)}.compile-row p{margin-left:auto;font-size:10px;color:#58705d}.switch{display:flex;align-items:center;gap:7px;font-size:10px}.switch input{position:absolute;opacity:0}.switch span{position:relative;width:32px;height:17px;background:#817c70;border-radius:10px}.switch span:after{content:"";position:absolute;width:11px;height:11px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:#198644}.switch input:checked+span:after{transform:translateX(15px)}kbd{border:1px solid #887f6f;padding:1px 4px;font-size:8px;background:#fff}.syntax-help{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-size:11px}.syntax-help summary{cursor:pointer;font-weight:700}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:12px}.help-grid p{margin:0;line-height:1.6}.help-grid code,.muted code{background:#d4cebd;padding:1px 3px}
.params{display:grid;gap:13px}.param-row{display:grid;grid-template-columns:1fr auto;gap:6px}.param-row label{grid-column:1/3;display:flex;justify-content:space-between;font-size:10px;font-weight:700}.param-row input{grid-column:1/3;width:100%;accent-color:#168743}.param-value{color:#168743}.effects-grid{display:grid;gap:11px}.effects-grid label{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:9px;font-weight:700;letter-spacing:.04em}.effects-grid input{grid-column:1/3;width:100%;accent-color:#168743}.effects-grid output{color:#168743}.effects-grid .effect-select{grid-template-columns:auto 1fr;align-items:center}.effects-grid select{padding:5px;background:#faf6e9;border:1px solid var(--line);font-size:10px}.muted{font-size:10px;color:#6f7067;line-height:1.5}.badge{padding:4px 6px;border:1px solid var(--ink);font-size:9px}.base-control{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin:8px 0}.base-control input{width:90px;border:1px solid var(--line);padding:5px;background:#fffdf4}.tuning-panel textarea{width:100%;height:133px;resize:vertical;padding:9px;border:1px solid var(--ink);background:#faf6e9;font-size:11px;line-height:1.45}
.keyboard-section{padding:25px clamp(18px,3vw,44px);display:grid;grid-template-columns:minmax(210px,.65fr) minmax(380px,1.7fr) minmax(120px,.35fr);gap:28px;align-items:center;background:var(--paper2)}.keyboard-copy p:last-child{font-size:9px;line-height:1.7}.keyboard{display:grid;grid-template-columns:repeat(17,1fr);height:112px;border:1px solid var(--ink);box-shadow:6px 6px 0 #918c7f}.key{position:relative;border:0;border-right:1px solid var(--ink);background:#f8f3e5;cursor:pointer;font-size:10px;font-weight:700;padding-top:72px}.key:last-child{border:0}.key:nth-child(2n){background:#e6dfce}.key:hover,.key.active{background:var(--green);box-shadow:inset 0 -7px 0 #168743}.key span{display:block;font-size:7px;color:#777}.note-monitor{border-left:1px solid #9f9887;padding-left:20px}.note-monitor>*{display:block}.note-monitor span{font-size:8px;letter-spacing:.17em}.note-monitor strong{margin:5px 0;font:36px serif}.note-monitor b{font-size:11px;color:#168743}footer{display:flex;justify-content:space-between;padding:22px clamp(18px,4vw,58px);background:var(--ink);color:#899387;font-size:9px;letter-spacing:.1em}
@media(max-width:900px){.screens{grid-template-columns:1fr}.screen{height:390px}.scope-controls{grid-template-columns:1fr 1fr}.workbench{grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid var(--ink)}.side-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.side-stack .panel+.panel{border-top:0;border-left:1px solid var(--ink)}.keyboard-section{grid-template-columns:1fr;overflow-x:auto}.keyboard{min-width:620px}.note-monitor{border:0;padding:0}.note-monitor>*{display:inline;margin-right:12px}}
@media(max-width:900px) and (min-width:621px){.side-stack .tuning-panel{grid-column:1/3;border-left:0!important;border-top:1px solid var(--ink)!important}}
@media(max-width:620px){.masthead{align-items:flex-start;flex-direction:column}.header-actions{justify-content:flex-start}.formula-grid,.help-grid{grid-template-columns:1fr}.scope-controls{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr}.side-stack .panel+.panel{border-left:0;border-top:1px solid var(--ink)}.preset-wrap{flex-wrap:wrap;justify-content:flex-end}.screen{height:320px}.scope-titlebar{align-items:flex-start;gap:10px;flex-direction:column}.channel-label{margin-bottom:4px}footer{display:block}}
@media(min-width:901px) and (min-aspect-ratio:4/3){
  html,body{height:100%;overflow:hidden}
  body{display:grid;grid-template-rows:78px minmax(0,1fr)}
  .masthead{min-height:0;height:78px;padding:12px 24px}
  .masthead .eyebrow{margin-bottom:3px;font-size:8px}
  .masthead h1{font-size:30px}.masthead h1 span{font-size:8px}
  .header-actions .button{padding:8px 12px;font-size:11px}
  main{width:100%;max-width:none;min-height:0;margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(310px,1fr);grid-template-rows:minmax(220px,3fr) minmax(190px,2fr) minmax(105px,1fr)}
  .scope-deck{grid-column:1;grid-row:1;min-width:0;min-height:0;padding:12px 16px 10px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-bottom:1px solid #485448}
  .scope-titlebar{margin-bottom:7px}.screens{min-height:0;gap:8px;grid-template-columns:minmax(0,1fr) auto}.screen{height:100%;min-height:0}.screen-xy{width:auto;max-width:100%;aspect-ratio:1/1}.screens[data-view="xy"]{display:flex;justify-content:center}.screens[data-view="time"]{display:grid;grid-template-columns:1fr}.screen figcaption{top:8px;left:10px}
  .scope-controls{gap:8px;padding-top:8px}.scope-controls label{gap:5px;font-size:8px}.scope-controls output{font-size:8px}
  .workbench{display:contents}
  .editor-panel{grid-column:1;grid-row:2;min-width:0;min-height:0;overflow-y:auto;padding:14px 18px;border-right:0;border-bottom:1px solid var(--ink);scrollbar-color:#72786d #d5cfbd;scrollbar-width:thin}
  .editor-panel .panel-heading{margin-bottom:9px}.editor-panel .panel-heading h2{font-size:22px}.editor-panel .panel-index{margin-bottom:2px;font-size:8px}
  .formula-grid{min-height:112px;gap:9px}.formula-card{display:grid;grid-template-rows:auto minmax(80px,1fr)}.formula-card>span{padding:5px 8px}.formula-card textarea{height:100%;min-height:80px;padding:9px;font-size:11px;line-height:1.4;resize:none}
  .compile-row{gap:10px;margin-top:8px}.compile-row .button{padding:7px 10px;font-size:9px}.syntax-help{margin-top:8px;padding-top:7px;font-size:9px}
  .side-stack{grid-column:2;grid-row:1/3;min-width:0;min-height:0;display:block;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-left:3px double var(--ink);box-shadow:inset 8px 0 18px rgba(17,21,16,.08);scrollbar-color:#555d52 #c9c2af;scrollbar-width:thin}
  .side-stack .panel{padding:18px 20px}.side-stack .panel+.panel{border-top:3px double var(--ink);border-left:0}.side-stack .panel-heading{margin-bottom:10px}.side-stack .panel-heading h2{font-size:23px}.side-stack .panel-index{font-size:8px}
  .params,.effects-grid{gap:9px;max-width:460px}.side-stack .param-row{max-width:460px}.side-stack .param-row input[type="range"],.side-stack .effects-grid input[type="range"]{width:min(100%,420px);max-width:420px;justify-self:start}.tuning-panel textarea{height:112px}
  .keyboard-section{grid-column:1/3;grid-row:3;min-width:0;min-height:0;padding:10px 20px;grid-template-columns:minmax(150px,.48fr) minmax(500px,2fr) minmax(110px,.3fr);gap:18px;overflow:hidden;border-top:3px double var(--ink);position:relative;z-index:5}
  .keyboard-copy .panel-index{margin-bottom:2px;font-size:8px}.keyboard-copy h2{font-size:18px}.keyboard-copy p:last-child{margin:4px 0 0;font-size:7px}
  .keyboard{width:100%;height:min(100%,96px);min-height:70px;box-shadow:4px 4px 0 #918c7f}.key{padding-top:42px}.note-monitor{padding-left:14px}.note-monitor strong{font-size:26px}
  footer{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}