:root{color-scheme:dark;--ink: #090c16;--panel: #11182b;--well: #080b13;--paper: #f4f1dc;--mist: #aeb7ca;--phosphor: #eaff72;--cyan: #5ee7f2;--coral: #ff8c82;--grid: #2a3552;--max: 1184px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;color:var(--paper);background:var(--ink)}*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--ink);background-image:linear-gradient(rgba(42,53,82,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(42,53,82,.15) 1px,transparent 1px);background-size:32px 32px;color:var(--paper);font-size:16px;line-height:1.55}button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}a{color:var(--cyan);text-underline-offset:4px;text-decoration-thickness:1px}a:hover{color:var(--phosphor)}button{color:inherit}:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);background:var(--phosphor);color:var(--ink);padding:12px 16px;font-weight:800}.skip-link:focus{transform:translateY(0)}.site-header,.site-footer{width:min(calc(100% - 32px),var(--max));margin-inline:auto}.site-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--grid)}.wordmark{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font:800 14px/1 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.12em;text-decoration:none}.wordmark span{margin-right:8px;color:var(--phosphor);font-size:24px}.site-header nav,.site-footer nav{display:flex;gap:24px;align-items:center}.site-header nav a,.site-footer nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--mist);font-weight:650;font-size:14px}main{display:block}.hero{width:min(calc(100% - 32px),var(--max));margin:0 auto;padding:72px 0 80px;display:grid;grid-template-columns:minmax(300px,5fr) minmax(420px,7fr);align-items:center;gap:64px}.hero-copy{position:relative;z-index:1}.eyebrow,.section-code,.panel-number{margin:0 0 16px;color:var(--cyan);font:750 13px/1.2 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1,h2{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:-.045em}h1{margin-bottom:24px;max-width:12ch;font-size:clamp(2.75rem,6vw,4.5rem);line-height:.98}h2{margin-bottom:32px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.05}h3{line-height:1.2}.lede{max-width:52ch;color:var(--mist);font-size:20px;line-height:1.55}.hero-actions{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.hero-actions span{max-width:20ch;color:var(--mist);font-size:14px}.button,.file-button{min-height:48px;border:1px solid var(--paper);padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--paper);text-decoration:none;font-weight:800;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:transform .16s ease,background-color .16s ease,color .16s ease}.button.primary{border-color:var(--phosphor);background:var(--phosphor);color:var(--ink);box-shadow:4px 4px 0 var(--cyan)}.button.secondary:hover,.file-button:hover{border-color:var(--cyan);color:var(--cyan)}.button:active,.file-button:active{transform:translate(2px,2px)}.plain-facts{margin:40px 0 0;padding:16px 0 0;border-top:1px solid var(--grid);list-style:none;display:grid;gap:8px;color:var(--mist);font:650 14px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace}.plain-facts li:before{content:"■";margin-right:10px;color:var(--phosphor)}.hero-art{margin:0;min-width:0;position:relative}.hero-art:before{content:"";position:absolute;inset:-9px 9px 9px -9px;border:1px solid var(--grid);clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,6% 100%,0 90%)}.hero-art img{position:relative;z-index:1;width:100%;height:auto;display:block;clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,6% 100%,0 90%)}.hero-art figcaption{margin-top:12px;color:var(--mist);font:13px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace}.workspace-section,.workspace-page,.how,.limits{width:min(calc(100% - 32px),var(--max));margin-inline:auto}.workspace-section{padding:96px 0 80px;border-top:1px solid var(--grid)}.workspace-page{padding:64px 0 80px}.workspace-page h1{max-width:18ch;font-size:clamp(2.5rem,5vw,4rem)}.demo-intro{max-width:62ch;color:var(--mist);font-size:18px}.console{margin-top:40px;border:1px solid var(--grid);background:var(--panel);box-shadow:10px 10px #2a355273;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}.console section{padding:24px;border-bottom:1px solid var(--grid)}.console section:last-child{border-bottom:0}.panel-heading,.keyboard-heading{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:24px}.panel-heading>div,.keyboard-heading>div{display:flex;align-items:center;gap:12px}.panel-heading h3,.keyboard-heading h3{margin:0;font:750 18px/1.2 ui-monospace,Cascadia Mono,Consolas,monospace}.panel-number{margin:0;color:var(--phosphor)}.readout{min-height:30px;padding:6px 10px;border:1px solid var(--grid);background:var(--well);color:var(--cyan);font:700 12px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.08em}.source-controls{display:grid;grid-template-columns:auto auto 1fr;gap:16px;align-items:center}.file-button{position:relative}.file-button input,.import-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}audio{width:100%;min-width:220px;height:48px}.tempo-row{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.tempo-row label,.context-controls label{color:var(--mist);font-weight:650}input[type=number],select{min-height:44px;margin-left:8px;border:1px solid var(--grid);border-radius:0;padding:8px 34px 8px 12px;background:var(--well);color:var(--paper)}input[type=number]{width:84px;padding-right:8px}.beat-rail{flex:0 1 420px;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.beat-rail i{height:12px;border:1px solid var(--grid);background:var(--well)}.beat-rail i.active{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 14px #5ee7f280}.context-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.help{margin:16px 0 0;color:var(--mist)}.live-panel{display:grid;grid-template-columns:minmax(220px,2fr) minmax(300px,3fr);gap:24px;background:var(--well)}.live-note{min-height:176px;padding:20px;border:1px solid var(--grid);display:grid;align-content:center;transition:transform .18s steps(2),border-color .18s}.live-note strong{color:var(--phosphor);font:800 clamp(3.5rem,8vw,6.5rem)/.9 ui-monospace,"Cascadia Mono",Consolas,monospace}.live-note span{margin-top:14px;color:var(--mist)}.live-note.outside{border-color:var(--coral)}.live-note.outside strong{color:var(--coral)}.live-note.pulse{transform:translate(5px)}.chord-area{padding:8px 0}.chord-area h3{margin-bottom:16px;font-size:16px}.chord-map{display:flex;gap:12px;flex-wrap:wrap;color:var(--mist)}.chord-map button{min-width:74px;min-height:64px;padding:8px;border:1px solid var(--grid);background:var(--panel);cursor:pointer}.chord-map button:hover{border-color:var(--cyan)}.chord-map strong,.chord-map span{display:block}.chord-map strong{color:var(--paper);font:800 20px ui-monospace,Cascadia Mono,Consolas,monospace}.chord-map span{color:var(--mist);font-size:12px}.keyboard-heading p{margin:0;color:var(--mist);font:12px/1.4 ui-monospace,Cascadia Mono,Consolas,monospace;text-align:right}.keyboard-scroll{overflow-x:auto;padding:5px 4px 12px}.piano{position:relative;display:flex;width:100%;min-width:680px;height:220px}.piano-key{cursor:pointer}.piano-key.white{position:relative;flex:1;height:220px;border:1px solid var(--ink);border-top-color:var(--grid);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:end;align-items:center;gap:4px;padding:16px 4px}.piano-key.white+.white{border-left-width:0}.piano-key.black{position:absolute;z-index:2;top:0;width:8.8%;height:130px;border:1px solid var(--grid);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:end;align-items:center;gap:3px;padding:8px 2px;box-shadow:3px 5px #090c1680}.black-61{left:8%}.black-63{left:20.5%}.black-66{left:45.5%}.black-68{left:58%}.black-70{left:70.5%}.piano-key span{font:800 16px/1 ui-monospace,Cascadia Mono,Consolas,monospace}.piano-key small{font:700 11px/1 ui-monospace,Cascadia Mono,Consolas,monospace;opacity:.7}.piano-key.in-scale:after{content:attr(data-degree);position:absolute;bottom:52px;width:22px;height:22px;display:grid;place-items:center;background:var(--cyan);color:var(--ink);font:800 11px/1 ui-monospace,monospace}.piano-key.black.in-scale:after{bottom:43px}.piano-key.playing{background:var(--phosphor);color:var(--ink);box-shadow:inset 0 -8px 0 var(--cyan)}.piano-key.black.playing{box-shadow:inset 0 -7px 0 var(--cyan),3px 5px #090c1680}.scale-summary{margin:12px 0 0;color:var(--mist);font:14px/1.5 ui-monospace,Cascadia Mono,Consolas,monospace}.history-list{margin:0;padding:0;display:flex;gap:8px;list-style:none;overflow-x:auto}.history-list li{flex:0 0 auto;min-width:104px;padding:12px;border:1px solid var(--grid);background:var(--well)}.history-list li strong,.history-list li span,.history-list li small{display:block}.history-list li strong{font:800 24px/1.2 ui-monospace,Cascadia Mono,Consolas,monospace}.history-list li span{margin-top:6px;color:var(--phosphor);font-size:12px}.history-list li.outside span{color:var(--coral)}.history-list li small{margin-top:3px;color:var(--mist)}.history-list .empty{min-width:100%;color:var(--mist)}.history-actions{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap}.text-button{position:relative;min-height:44px;border:0;padding:8px 0;background:none;color:var(--cyan);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.how{padding:112px 0}.steps{margin:0;padding:0;border-top:1px solid var(--grid);list-style:none}.steps li{padding:32px 0;display:grid;grid-template-columns:80px 1fr;gap:24px;border-bottom:1px solid var(--grid)}.steps>li>span{color:var(--phosphor);font:800 24px/1 ui-monospace,monospace}.steps h3{margin-bottom:8px;font:750 24px/1.2 ui-monospace,monospace}.steps p{margin:0;color:var(--mist)}.limits{padding:64px;display:grid;grid-template-columns:1fr 2fr;gap:48px;background:var(--phosphor);color:var(--ink);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}.limits .section-code{color:#263000}.limits h2{margin:0}.limits p{max-width:58ch;font-size:18px}.limits p:last-child{margin-bottom:0}.text-page,.not-found{width:min(calc(100% - 32px),800px);min-height:70vh;margin-inline:auto;padding:80px 0}.text-page h1,.not-found h1{max-width:14ch}.text-page section{margin-top:56px}.text-page h2{margin:48px 0 12px;font-size:24px;letter-spacing:-.02em}.text-page section p{max-width:68ch;color:var(--mist)}.pixel-row{color:var(--cyan);font:800 24px/1 ui-monospace,monospace;letter-spacing:.35em}.demo-bar{min-height:48px;padding:8px max(16px,calc((100% - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--cyan);color:var(--ink);font:700 13px/1.3 ui-monospace,monospace}.demo-bar span{display:flex;gap:20px;align-items:center}.demo-bar a,.demo-bar .text-button{color:var(--ink);font:inherit}.site-footer{margin-top:112px;padding:40px 0 max(48px,env(safe-area-inset-bottom));border-top:1px solid var(--grid);display:grid;grid-template-columns:1fr auto;gap:24px;color:var(--mist)}.site-footer p{margin:0}.site-footer strong{color:var(--paper)}.site-footer .build{grid-column:1/-1;font:12px/1.4 ui-monospace,monospace}.toast{position:fixed;z-index:20;right:20px;bottom:20px;max-width:min(380px,calc(100% - 40px));padding:14px 18px;border:1px solid var(--cyan);background:var(--well);color:var(--paper);box-shadow:5px 5px 0 var(--grid)}@media(max-width:820px){.hero{grid-template-columns:1fr;gap:48px;padding-top:48px}.hero-art{width:88%;margin-left:auto}.source-controls{grid-template-columns:1fr 1fr}.source-controls audio{grid-column:1/-1}.limits{grid-template-columns:1fr;gap:16px;padding:40px 32px}}@media(max-width:600px){body{background-size:24px 24px}.site-header{min-height:64px}.site-header nav a:not(:last-child){display:none}.hero{padding:48px 0 64px}h1{font-size:clamp(2.65rem,13vw,3.5rem)}.hero-art{width:100%}.hero-actions{align-items:flex-start;flex-direction:column}.workspace-section{padding-top:72px}.console section{padding:20px 16px}.panel-heading{align-items:flex-start;flex-direction:column;gap:10px}.source-controls{grid-template-columns:1fr}.source-controls audio{grid-column:auto}.tempo-row{align-items:flex-start;flex-direction:column}.beat-rail{width:100%;flex-basis:auto}.context-controls{align-items:stretch;flex-direction:column}.context-controls label{display:flex;justify-content:space-between;align-items:center}.live-panel{grid-template-columns:1fr}.keyboard-heading{flex-direction:column;gap:10px}.keyboard-heading p{text-align:left}.how{padding:80px 0}.steps li{grid-template-columns:48px 1fr;gap:12px}.demo-bar{align-items:flex-start;flex-direction:column;gap:0}.demo-bar span{width:100%;justify-content:space-between}.site-footer{grid-template-columns:1fr}.site-footer nav{align-items:flex-start;flex-direction:column;gap:4px}.site-footer .build{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.live-note.pulse{transform:none}}