:root{color-scheme:dark;--ink-0: #090b16;--ink-1: #11162a;--ink-2: #1b2440;--paper: #f5f2da;--muted: #b7bdd3;--lime: #c8f85b;--cyan: #65e7f1;--coral: #ff746c;--gold: #ffd166;--success: #75e6a4;--shadow: 4px 4px 0 #000;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--ink-0);color:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--ink-0);font-size:16px;line-height:1.5;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.06;background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px)}button,input,select{font:inherit}button,a,input,select,canvas{-webkit-tap-highlight-color:transparent}button,a,input,select,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}a{color:var(--cyan)}img{display:block;max-width:100%;height:auto}p{margin:0}h1,h2{margin:0;line-height:1.05;letter-spacing:-.035em}h1{font-size:clamp(2.4rem,6vw,4.8rem);max-width:12ch}h1 em{color:var(--lime);font-style:normal}h2{font-size:clamp(1.55rem,3vw,2.25rem)}.skip-link{position:fixed;z-index:100;left:16px;top:8px;padding:12px 16px;background:var(--cyan);color:var(--ink-0);font-weight:800;transform:translateY(-150%)}.skip-link:focus{transform:none}.eyebrow,.brand,.header-status,.track-tag,.track-number,.counter,.save-state,.field>span,.principles>div>span,.art-note{font:750 .75rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.site-header{min-height:72px;padding:12px max(20px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #303b5b;background:#090b16f2;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none}.brand b{color:var(--lime)}.brand-mark{width:33px;height:28px;display:flex;align-items:end;gap:3px}.brand-mark i{width:8px;display:block;background:var(--lime);box-shadow:2px 2px #000}.brand-mark i:nth-child(1){height:10px}.brand-mark i:nth-child(2){height:24px;background:var(--cyan)}.brand-mark i:nth-child(3){height:16px;background:var(--coral)}.header-status{display:flex;align-items:center;gap:8px;color:var(--muted)}.signal-lamp{width:9px;height:9px;background:var(--success);box-shadow:0 0 0 2px #163927}.offline .signal-lamp{background:var(--gold);box-shadow:0 0 0 2px #473918}main{display:block}.hero{min-height:650px;max-width:1440px;margin:auto;padding:clamp(56px,8vw,108px) 24px 76px;display:grid;grid-template-columns:minmax(300px,.82fr) minmax(480px,1.2fr);align-items:center;position:relative}.hero-copy{z-index:2;position:relative}.hero .eyebrow{color:var(--cyan);margin-bottom:20px}.hero-copy>p:not(.eyebrow){max-width:40rem;margin:24px 0 32px;color:var(--muted);font-size:clamp(1rem,2vw,1.2rem);line-height:1.65}.hero picture{margin-left:-18%;filter:saturate(1.06) contrast(1.05)}.button{min-height:46px;padding:10px 16px;border:2px solid #526080;border-radius:2px;color:var(--paper);background:var(--ink-2);font-weight:800;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:3px 3px #000;transition:transform .16s ease,background-color .16s ease,border-color .16s ease}.button:hover{background:#273454;border-color:var(--muted)}.button:active{transform:translate(2px,2px);box-shadow:1px 1px #000}.button:disabled{cursor:not-allowed;opacity:.42}.button.primary{color:var(--ink-0);background:var(--lime);border-color:var(--lime);box-shadow:4px 4px 0 var(--cyan)}.button.primary:hover{background:#dbff87}.button.quiet{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted)}.button.danger{color:#ffaaa4}.danger-solid{background:var(--coral);color:var(--ink-0);border-color:var(--coral)}.composer{border-top:1px solid #303b5b;border-bottom:1px solid #303b5b;max-width:1440px;margin:auto;background:#0c0f1e;box-shadow:0 0 0 1px #080a12,12px 12px #05060c}.section-heading{padding:30px 32px;display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid #303b5b}.section-heading .eyebrow{color:var(--cyan);margin-bottom:8px}.save-state{color:var(--success);text-align:right}.project-strip{display:flex;align-items:end;gap:20px;padding:20px 32px;border-bottom:1px solid #303b5b;background:var(--ink-1)}.field{display:grid;gap:7px;min-width:110px}.field.grow{flex:1;min-width:220px}.field>span{color:var(--muted)}input,select{min-height:46px;width:100%;padding:9px 12px;color:var(--paper);background:var(--ink-0);border:2px solid #3c4869;border-radius:0}input:hover,select:hover{border-color:#6c7899}.input-suffix{position:relative;display:block}.input-suffix small{position:absolute;right:10px;top:13px;color:var(--muted);font:700 11px ui-monospace,monospace}.input-suffix input{padding-right:42px;font-variant-numeric:tabular-nums}.transport{min-height:74px;padding:14px 32px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #303b5b}.transport-spacer{flex:1}.counter{color:var(--cyan);margin-left:12px;font-variant-numeric:tabular-nums}.empty-callout{margin:28px 32px 0;padding:18px 20px;display:flex;align-items:center;gap:18px;color:var(--paper);background:#172139;border-left:4px solid var(--gold)}.empty-callout[hidden]{display:none}.empty-callout p{color:var(--muted);margin-top:3px}.empty-icon{font-size:2rem;color:var(--gold)}.editor-section{padding:32px;border-bottom:1px solid #303b5b}.editor-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:18px}.editor-heading>div{display:flex;align-items:center;gap:12px}.editor-heading>p{max-width:45rem;color:var(--muted);text-align:right;font-size:.95rem}.track-number{min-width:32px;height:32px;padding:8px 5px;text-align:center;background:var(--ink-2);color:var(--cyan)}.track-tag{padding:5px 8px;color:var(--ink-0)}.melody-tag{background:var(--lime)}.pitch-tag{background:var(--cyan)}.drum-tag{background:var(--coral)}.roll-shell{height:440px;display:grid;grid-template:32px 1fr / 70px minmax(0,1fr);border:2px solid #3c4869;background:var(--ink-0);overflow:hidden}.roll-corner{display:grid;place-items:center;border-right:1px solid #3c4869;border-bottom:1px solid #3c4869;color:var(--muted);font:700 10px ui-monospace,monospace}.ruler-wrap{overflow:hidden;border-bottom:1px solid #3c4869}.ruler-wrap canvas{height:32px;display:block}.keys{overflow:hidden;border-right:1px solid #3c4869;background:#171c2c}.keys span{height:24px;display:flex;align-items:center;justify-content:end;padding-right:8px;color:#d6d9e7;border-bottom:1px solid #2c354f;font:700 10px ui-monospace,monospace}.keys span.black{background:#090b16;color:var(--muted)}.roll-scroll{overflow:auto;scrollbar-color:var(--cyan) var(--ink-1);scrollbar-width:thin}#roll{display:block;cursor:crosshair;touch-action:none;image-rendering:pixelated}.pitch-section{background:#0b1020}.pitch-wrap{height:142px;position:relative;border:2px solid #3c4869;overflow:auto hidden}#pitch{width:100%;height:140px;display:block;cursor:crosshair;touch-action:none}.pitch-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);pointer-events:none;font:700 12px ui-monospace,monospace;letter-spacing:.08em;text-align:center;padding:16px}.pitch-empty[hidden]{display:none}.text-button{margin-top:10px;min-height:44px;border:0;color:var(--cyan);background:transparent;text-decoration:underline;cursor:pointer}.text-button:disabled{color:#6f7690;cursor:not-allowed}.drum-scroll{overflow-x:auto;border:2px solid #3c4869;scrollbar-color:var(--coral) var(--ink-1)}.drum-grid{min-width:max-content;background:#0d1121;padding-bottom:10px}.drum-ruler,.drum-row{display:grid;grid-template-columns:112px auto}.drum-ruler{height:34px;background:var(--ink-1);border-bottom:1px solid #3c4869}.drum-ruler>span{border-right:1px solid #3c4869}.drum-ruler>div{display:grid;grid-template-columns:repeat(var(--steps),44px)}.drum-ruler>div span{grid-column:span 16;padding:9px 8px;color:var(--muted);border-right:1px solid #526080;font:700 10px ui-monospace,monospace}.drum-label{position:sticky;left:0;z-index:2;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#141a2d;border-right:1px solid #526080;border-bottom:1px solid #303b5b}.drum-label b{font-size:.88rem}.drum-label small{color:var(--muted);font:700 9px ui-monospace,monospace}.drum-steps{display:grid;grid-template-columns:repeat(var(--steps),44px)}.drum-step{width:44px;height:50px;padding:8px;border:0;border-right:1px solid #1f2844;border-bottom:1px solid #303b5b;background:#0d1121;cursor:pointer}.drum-step:nth-child(4n+1){border-left:1px solid #526080}.drum-step span{display:block;width:100%;height:100%;background:#1b2440;border:2px solid #3c4869;box-shadow:inset 0 -3px #090b16}.drum-step:hover span{border-color:var(--coral)}.drum-step.active span{background:var(--coral);border-color:#ffaaa4;box-shadow:inset 0 -3px #8e302f}.drum-step.playing{background:#65e7f133}.drum-step.playing span{outline:2px solid var(--cyan)}.export-section{padding:40px 32px;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(400px,1.2fr);gap:48px;align-items:center;background:var(--ink-1)}.export-section .eyebrow{color:var(--gold);margin-bottom:9px}.export-section p:not(.eyebrow){margin-top:12px;color:var(--muted);max-width:38rem}.export-actions{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px}.file-button{position:relative}.file-button input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.principles{max-width:1440px;margin:80px auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#303b5b;border:1px solid #303b5b}.principles>div{padding:34px;background:var(--ink-0)}.principles span{color:var(--cyan)}.principles h2{font-size:1.25rem;margin:18px 0 10px}.principles p{color:var(--muted)}footer{min-height:120px;max-width:1440px;margin:auto;padding:30px 24px calc(30px + env(safe-area-inset-bottom));border-top:1px solid #303b5b;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted)}footer nav{display:flex;gap:24px}footer a{color:var(--paper)}.art-note{font-size:.65rem}.toast{position:fixed;z-index:50;left:50%;bottom:max(24px,env(safe-area-inset-bottom));min-width:260px;max-width:calc(100vw - 32px);padding:14px 18px;color:var(--ink-0);background:var(--cyan);box-shadow:5px 5px #000;font-weight:800;text-align:center;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}.toast.visible{opacity:1;transform:translate(-50%)}.update-toast{position:fixed;z-index:40;right:20px;bottom:20px;max-width:340px;padding:14px;background:var(--ink-1);border:2px solid var(--cyan);display:none;align-items:center;gap:12px;box-shadow:var(--shadow)}.update-toast.visible{display:flex}dialog{max-width:480px;color:var(--paper);background:var(--ink-1);border:2px solid var(--coral);padding:28px;box-shadow:8px 8px #000}dialog::backdrop{background:#020308d1}dialog h2{margin:9px 0 14px}dialog p:not(.eyebrow){color:var(--muted)}.dialog-actions{margin-top:26px;display:flex;justify-content:end;gap:12px}noscript{display:block;padding:20px;color:var(--ink-0);background:var(--coral);text-align:center;font-weight:800}@media(max-width:820px){.hero{min-height:auto;grid-template-columns:1fr;padding-top:60px}.hero picture{margin:-30px -24px 0;z-index:0}.hero-copy{z-index:1}.hero-copy>p:not(.eyebrow){max-width:32rem}.project-strip{flex-wrap:wrap}.field.grow{flex-basis:100%}.field{flex:1}.editor-heading{align-items:start;flex-direction:column;gap:8px}.editor-heading>p{text-align:left}.export-section{grid-template-columns:1fr;gap:28px}.principles{grid-template-columns:1fr}footer{flex-wrap:wrap}}@media(max-width:520px){.site-header{min-height:64px;padding-inline:16px}.header-status{font-size:.62rem}.brand{font-size:.68rem}.hero{padding-inline:20px;padding-bottom:52px}.hero h1{font-size:clamp(2.25rem,12vw,3.4rem)}.hero picture{margin-inline:-20px}.composer{border-left:0;border-right:0;box-shadow:none}.section-heading,.project-strip,.transport,.editor-section,.export-section{padding-left:16px;padding-right:16px}.section-heading{align-items:start}.save-state{max-width:12rem;font-size:.62rem}.project-strip{gap:12px}.field{min-width:calc(50% - 6px)}.field.grow{min-width:100%}.transport{flex-wrap:wrap}.play-button{flex:1}.counter{order:3;width:100%;margin:3px 0 0}.transport-spacer{display:none}.transport .quiet{flex:1}.empty-callout{margin:20px 16px 0;align-items:start}.editor-heading>div{flex-wrap:wrap}.editor-heading h2{font-size:1.45rem}.editor-heading>p{font-size:.9rem}.roll-shell{height:390px;grid-template-columns:58px minmax(0,1fr)}.track-tag{font-size:.62rem}.keys span{padding-right:5px}.export-actions{grid-template-columns:1fr}.principles{margin:56px auto;padding-inline:16px}footer{align-items:start;flex-direction:column;padding-inline:16px}footer nav{gap:18px}.art-note{order:3}.dialog-actions{flex-direction:column}.dialog-actions .button{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}