:root{color-scheme:dark;--ink:#ece4cd;--muted:#9ab1b4;--line:#36535a;--gold:#ecc987;--teal:#85d6cc}*{box-sizing:border-box}html,body{margin:0;min-width:0;background:#091317;color:var(--ink);font:15px/1.65 system-ui,sans-serif}main{max-width:1240px;margin:auto;padding:28px}header{padding:12px 5px 25px}.eyebrow{font:11px ui-monospace,monospace;letter-spacing:.16em;color:var(--gold)}h1{font:clamp(32px,5vw,58px)/1.13 Georgia,serif;margin:18px 0}h2{font:26px/1.2 Georgia,serif}p{color:var(--muted)}header p{font-size:17px}.instrument{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#12232a}.stage{position:relative;background:#071015}canvas{width:100%;height:clamp(330px,52vw,620px);display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.badge,.hint{position:absolute;padding:9px 13px;background:#102326dd;border-radius:7px;font:11px ui-monospace,monospace;color:#b4d5d2;pointer-events:none}.badge{top:15px;left:17px}.hint{right:17px;bottom:15px}.control-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:20px;border-block:1px solid var(--line)}label{display:flex;gap:12px;align-items:center;flex:1;min-width:230px;font-size:13px}input[type=range]{accent-color:var(--gold);flex:1;min-width:60px}output{font:13px ui-monospace,monospace;min-width:5ch;color:var(--gold)}button,a{font:inherit;color:var(--ink);background:#203940;border:1px solid #617a77;border-radius:8px;padding:9px 14px;cursor:pointer;text-decoration:none}button:hover,a:hover{box-shadow:0 0 18px #85d6cc35;border-color:var(--teal)}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.inspect{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;padding:28px}.inspect p{font-size:13px}#lattice{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;align-content:center}#lattice button{padding:0;aspect-ratio:1;font:11px ui-monospace,monospace;background:#102027;border-color:#35545b}#lattice button[aria-pressed=true]{color:#0c181b;background:var(--gold);box-shadow:0 0 20px #ecc98750}#lattice button:hover{background:#396366}.export-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 28px;border-top:1px solid var(--line);font-size:13px}.export-row span{color:var(--muted)}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:25px 4px}.notes p{font-size:13px}.notes h2{font-size:23px}.status{color:var(--gold)}#error{color:#ffad98}[hidden]{display:none!important}@media(max-width:800px){main{padding:18px}.inspect,.notes{grid-template-columns:1fr}.inspect{padding:20px;gap:15px}.control-row{gap:17px}.hint{font-size:9px}#lattice{max-width:470px;width:100%;justify-self:center}canvas{height:360px}}