:root{color-scheme:dark;--night-950: #071218;--night-900: #0b1d24;--night-800: #102a32;--glass: rgba(16, 42, 50, .78);--glass-line: #37616b;--ink: #f4f0df;--mist: #b9cbd0;--written: #71e1d4;--sounding: #ffb38a;--acid: #d9f77e;--success: #8ee6a8;--warning: #ffd275;--danger: #ff9faa;--serif: Georgia, "Times New Roman", serif;--sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;font-family:var(--sans);color:var(--ink);background:var(--night-950);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night-950)}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 73% 7%,rgba(78,149,153,.12),transparent 25rem),var(--night-950)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}button,input,select{font:inherit}button,select,input[type=range]{accent-color:var(--acid)}button,a,select,input{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--acid);outline-offset:3px}.skip-link{position:fixed;z-index:100;left:16px;top:-80px;padding:12px 16px;background:var(--acid);color:var(--night-950);font-weight:800;border-radius:8px}.skip-link:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{max-width:1440px;margin:0 auto;min-height:76px;padding:max(16px,env(safe-area-inset-top)) clamp(20px,4vw,64px) 12px;display:flex;align-items:center;justify-content:space-between}.wordmark{display:inline-flex;gap:10px;align-items:center;color:var(--mist);text-decoration:none;font-weight:800;letter-spacing:.12em;font-size:13px}.wordmark-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--glass-line);border-radius:50%;color:var(--written);font-size:20px;box-shadow:inset 0 0 18px #71e1d414}.connection-state{display:flex;align-items:center;gap:8px;color:var(--mist);font-size:14px}.connection-dot{width:7px;height:7px;background:var(--success);border-radius:50%;box-shadow:0 0 12px var(--success)}.connection-dot.is-offline{background:var(--warning);box-shadow:none}main{display:block}.masthead{max-width:1440px;margin:0 auto;min-height:610px;padding:60px clamp(20px,4vw,64px) 80px;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(480px,1.18fr);align-items:center;gap:clamp(32px,7vw,100px)}.masthead-copy{position:relative;z-index:1}.kicker,.eyebrow{margin:0 0 12px;color:var(--written);font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:12px}h1,h2,h3,p{margin-top:0}h1{margin-bottom:28px;max-width:720px;font:400 clamp(44px,5.5vw,78px)/.96 var(--serif);letter-spacing:-.045em}h1 em{color:var(--sounding);font-weight:400}.lede{max-width:570px;color:var(--mist);font-size:clamp(18px,1.8vw,22px);line-height:1.55}.text-link{display:inline-flex;gap:12px;align-items:center;margin-top:12px;min-height:44px;color:var(--acid);text-underline-offset:5px;font-weight:750}.hero-art{position:relative;margin:0;border:1px solid rgba(113,225,212,.25);border-radius:32px 8px;overflow:hidden;box-shadow:0 32px 100px #0000007a,inset 0 0 50px #71e1d414;transform:rotate(.7deg)}.hero-art:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px #071218b3;pointer-events:none}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.hero-art figcaption{position:absolute;z-index:1;bottom:16px;right:16px;padding:8px 11px;border:1px solid rgba(244,240,223,.22);background:#071218c2;color:var(--mist);border-radius:99px;font-size:12px;backdrop-filter:blur(12px)}.workbench{padding:72px clamp(20px,4vw,64px) 96px;background:linear-gradient(180deg,#0d262ee6,#071218fa);border-block:1px solid rgba(113,225,212,.16)}.workbench>*{max-width:1320px;margin-inline:auto}.workbench-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}h2{margin-bottom:0;font:400 clamp(34px,4vw,52px)/1.05 var(--serif);letter-spacing:-.03em}h3{margin-bottom:0;font:400 clamp(24px,2.5vw,32px)/1.15 var(--serif)}.save-state{max-width:380px;color:var(--mist);font-size:14px;text-align:right}.notice{margin-bottom:16px;padding:14px 18px;border:1px solid #746833;border-radius:8px;color:#fff0ba;background:#64521038;line-height:1.45}.notice--error{border-color:#81414a;color:#ffdce0;background:#6e182633}.control-rail{display:grid;grid-template-columns:1.2fr 1.15fr 1fr 1.2fr auto;align-items:end;gap:16px;padding:18px;border:1px solid var(--glass-line);border-radius:14px;background:#0712188c;box-shadow:inset 0 1px #ffffff08}.field{display:grid;gap:8px;color:var(--mist);font-size:13px;font-weight:700}.field select{width:100%;min-height:46px;padding:0 38px 0 12px;color:var(--ink);background:var(--night-800);border:1px solid var(--glass-line);border-radius:7px}.field--tempo>span{display:flex;justify-content:space-between}.field--tempo output{color:var(--ink);font-variant-numeric:tabular-nums}.field input[type=range]{min-height:46px;width:100%}.instrument-fact{min-height:46px;display:flex;align-items:center;gap:10px}.fact-dot{width:9px;height:34px;background:var(--instrument-color);border-radius:8px;box-shadow:0 0 16px color-mix(in srgb,var(--instrument-color),transparent 30%)}.instrument-fact strong,.instrument-fact small{display:block}.instrument-fact strong{font-size:14px}.instrument-fact small{margin-top:2px;color:var(--mist);line-height:1.25}.duration-field{margin:0;padding:0;border:0}.duration-field legend{margin-bottom:8px;color:var(--mist);font-size:13px;font-weight:700}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.segmented button{min-width:44px;min-height:46px;padding:4px;color:var(--mist);background:var(--night-800);border:1px solid var(--glass-line);border-radius:6px;cursor:pointer;font-size:22px}.segmented button span{display:block;font:10px var(--sans)}.segmented button[aria-pressed=true]{color:var(--night-950);background:var(--acid);border-color:var(--acid)}.button{min-height:44px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:7px;cursor:pointer;color:var(--ink);font-weight:750;white-space:nowrap;transition:transform .16s ease,background-color .16s ease,border-color .16s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.42}.button--primary{background:var(--acid);color:var(--night-950)}.button--secondary{background:var(--written);color:var(--night-950)}.button--quiet{background:#0c2129e6;border-color:var(--glass-line)}.button--quiet:hover:not(:disabled){border-color:var(--written)}.button--danger{color:#ffdce0;background:transparent;border-color:#9b5760}.score-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:36px}.title-field{flex:1}.title-field input{width:min(640px,100%);padding:8px 0;color:var(--ink);background:transparent;border:0;border-bottom:1px solid transparent;font:400 28px var(--serif)}.title-field input:hover,.title-field input:focus{border-bottom-color:var(--glass-line)}.capacity{color:var(--mist);font-size:14px;font-variant-numeric:tabular-nums}.capacity strong{color:var(--ink);font-size:20px}.score-shell{position:relative;margin-top:14px;overflow:hidden;border:1px solid var(--glass-line);border-radius:12px;background:linear-gradient(160deg,#153139c7,#071218f5);box-shadow:0 24px 80px #00000040}.legend{min-height:44px;padding:11px 16px;display:flex;gap:22px;align-items:center;border-bottom:1px solid rgba(55,97,107,.7);color:var(--mist);font-size:12px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:14px;height:9px;display:inline-block}.legend-written{border-radius:50%;background:var(--written);transform:rotate(-12deg)}.legend-sounding{background:var(--sounding);transform:rotate(45deg) scale(.72)}.legend-thread{width:2px!important;height:15px!important;background:#84a1a7}.score-scroll{overflow-x:auto;padding:4px 0 0;scrollbar-color:var(--glass-line) transparent}.score{display:block;min-width:900px;width:100%;height:auto}.staff line{stroke:#6f8e94;stroke-width:1;opacity:.66;vector-effect:non-scaling-stroke}.staff .bar-line{opacity:.42}.staff-name{fill:var(--mist);font:800 11px var(--sans);letter-spacing:.09em}.staff--written .staff-name{fill:var(--written)}.staff--sounding .staff-name{fill:var(--sounding)}.bar-number{fill:#789197;font:10px var(--sans)}.entry-cursor{stroke:var(--acid);stroke-width:1;stroke-dasharray:3 6;opacity:.42}.pitch-thread{stroke:#77939a;stroke-width:1;stroke-dasharray:2 5;opacity:.5}.note-head--written{fill:var(--written)}.note-head--sounding{fill:var(--sounding)}.note-stem{stroke-width:1.5}.note-stem--written{stroke:var(--written)}.note-stem--sounding{stroke:var(--sounding)}.score-note{cursor:pointer;outline:none}.score-note:before{content:""}.score-note:hover .pitch-thread,.score-note:focus .pitch-thread,.score-note.is-selected .pitch-thread{stroke:var(--acid);stroke-width:2;opacity:1}.score-note:focus .note-head,.score-note.is-selected .note-head{stroke:var(--acid);stroke-width:2.5}.score-note.is-playing .note-head{filter:url(#glow);transform-origin:center;animation:pulse-note .3s ease-out}.score-note.is-out-of-range .note-head{stroke:var(--warning);stroke-width:2}.note-index{fill:#8ca2a7;text-anchor:middle;font:10px var(--sans)}.rest-mark{fill:var(--written)}.rest-mark--sound{fill:var(--sounding)}.empty-score{position:absolute;left:50%;top:54%;translate:-50% -50%;width:min(390px,76%);padding:16px 20px;text-align:center;background:#071218e6;border:1px solid var(--glass-line);border-radius:8px;box-shadow:0 16px 50px #00000073}.empty-score strong,.empty-score span{display:block}.empty-score span{margin-top:5px;color:var(--mist)}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}.transport-hint{margin-left:auto;color:var(--mist);font-size:13px}.translation{margin-top:40px;padding:24px;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:32px;border-left:3px solid var(--written);background:linear-gradient(90deg,rgba(113,225,212,.06),transparent)}.translation-empty,.translation-sentence{color:var(--mist);font-size:17px;line-height:1.55}.pitch-equation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}.pitch-equation>div{padding:16px;border:1px solid var(--glass-line);background:#0712187a}.pitch-equation strong{display:block;font:400 34px var(--serif)}.eyebrow{display:block;font-size:10px}.eyebrow--written{color:var(--written)}.eyebrow--sounding{color:var(--sounding)}.equation-arrow{color:var(--acid);font-size:26px}.translation-sentence{margin:12px 0 4px}.range-status{margin:0;font-size:13px}.in-range{color:var(--success)}.out-range{color:var(--warning)}.input-deck{margin-top:32px;padding:24px;border:1px solid var(--glass-line);border-radius:12px;background:#07121894}.input-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.piano{position:relative;height:176px;display:flex;align-items:flex-start;isolation:isolate;padding:0 2px;overflow-x:auto}.piano-key{position:relative;flex:1 0 58px;cursor:pointer;transition:transform .1s ease,background .1s ease}.piano-key span{position:absolute;bottom:28px;left:50%;translate:-50%;font-size:11px}.piano-key kbd{position:absolute;bottom:7px;left:50%;translate:-50%;min-width:22px;padding:2px 4px;border:1px solid currentColor;border-radius:4px;font:10px var(--sans);text-transform:uppercase}.piano-key--white{z-index:1;height:174px;color:var(--night-950);background:#e5eadf;border:1px solid #667c80;border-radius:0 0 8px 8px}.piano-key--black{z-index:2;height:108px;flex-basis:42px;margin:0 -21px;color:var(--ink);background:#10272e;border:1px solid #54747b;border-radius:0 0 6px 6px;box-shadow:0 8px 14px #0000006b}.piano-key:hover{background:var(--written)}.piano-key:active{transform:translateY(3px);background:var(--acid)}.keyboard-help{margin:12px 0 0;color:var(--mist);font-size:13px}.ownership{margin-top:32px;padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:32px;border-block:1px solid rgba(55,97,107,.66)}.ownership p:last-child{margin:8px 0 0;color:var(--mist)}.ownership-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:8px}.file-button{position:relative}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}footer{max-width:1440px;min-height:160px;margin:0 auto;padding:38px clamp(20px,4vw,64px) max(38px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px 30px;color:var(--mist);font-size:13px}footer p{margin:0}footer nav{display:flex;gap:20px}footer a{text-underline-offset:4px}.generated-note{opacity:.7}dialog{width:min(500px,calc(100% - 32px));padding:0;color:var(--ink);background:var(--night-900);border:1px solid var(--glass-line);border-radius:14px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#02080bc7;backdrop-filter:blur(5px)}dialog form{padding:28px}dialog h2{font-size:32px}dialog form>p:not(.kicker){margin-top:16px;color:var(--mist);line-height:1.5}.dialog-actions{margin-top:24px;display:flex;justify-content:end;gap:10px}.update-toast{position:fixed;z-index:50;right:20px;bottom:20px;max-width:calc(100% - 40px);padding:12px;display:flex;align-items:center;gap:16px;background:var(--night-900);border:1px solid var(--written);border-radius:10px;box-shadow:0 20px 50px #00000080}.update-toast[hidden]{display:none}@keyframes pulse-note{0%{opacity:.55;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media(max-width:980px){.masthead{min-height:auto;padding-top:36px;grid-template-columns:1fr 1fr;gap:32px}.control-rail{grid-template-columns:repeat(2,1fr)}.control-rail>.button{width:100%}.translation{grid-template-columns:1fr;gap:20px}.transport-hint{flex-basis:100%;margin-left:0}.ownership{align-items:flex-start;flex-direction:column}.ownership-actions{justify-content:start}}@media(max-width:680px){.site-header{min-height:62px}.masthead{display:flex;flex-direction:column;align-items:stretch;padding-top:40px;padding-bottom:56px}h1{font-size:clamp(45px,14vw,64px)}.hero-art{margin-left:12%;border-radius:22px 6px}.workbench{padding-top:52px;padding-bottom:60px}.workbench-heading{display:block}.save-state{margin-top:14px;text-align:left}.control-rail{grid-template-columns:1fr 1fr;padding:12px;gap:14px 10px}.instrument-fact{grid-column:1 / -1;order:3}.field--tempo{grid-column:1 / -1}.control-rail>.button{grid-column:1 / -1}.score-heading{display:block}.capacity{margin-top:8px}.capacity span{display:none}.legend{gap:14px;overflow-x:auto;white-space:nowrap}.score{min-width:800px}.transport .button{flex:1 1 auto}.pitch-equation{gap:10px}.pitch-equation>div{padding:12px}.pitch-equation strong{font-size:28px}.translation{padding:20px 14px}.input-deck{padding:18px 12px}.input-heading{align-items:end}.input-heading h3{font-size:24px}.piano{height:164px}.piano-key{flex-basis:52px}.piano-key--black{flex-basis:38px;margin-inline:-19px}.ownership-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.ownership-actions .button{white-space:normal}footer{grid-template-columns:1fr}footer nav{grid-row:2}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}