:root{--ink:#1c1b18;--paper:#f5f0e6;--clay:#b84e33;--line:#1c1b1830;--muted:#68635a}*{box-sizing:border-box}[hidden]{display:none!important}body{min-height:100vh;color:var(--ink);background:var(--paper);margin:0;font-family:DM Mono,monospace}body:before{content:"";pointer-events:none;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");position:fixed;inset:0}.shell{width:min(1100px,100% - 40px);margin:auto;padding:30px 0 54px}header{justify-content:space-between;align-items:center;padding-bottom:9vh;display:flex}.brand{color:inherit;letter-spacing:.08em;font-size:14px;font-weight:500;text-decoration:none}.brand span{color:var(--clay);padding:0 2px}.eyebrow,.kicker{color:var(--clay);letter-spacing:.13em;margin:0;font-size:11px}.hero{grid-template-columns:1fr 1.35fr;align-items:end;column-gap:30px;margin-bottom:54px;display:grid}.hero h1{letter-spacing:-.065em;grid-column:2;margin:0 0 22px;font:600 clamp(48px,8vw,105px)/.9 Playfair Display,serif}.hero h1 em{color:var(--clay);font-weight:600}.lede{max-width:430px;color:var(--muted);grid-column:2;margin:0;font-size:13px;line-height:1.7}.kicker{align-self:start;padding-top:11px}.workbench{border:1px solid var(--ink);box-shadow:9px 9px 0 var(--ink);background:#fbf8f0}.dropzone{text-align:center;cursor:pointer;border:9px solid #0000;flex-direction:column;justify-content:center;align-items:center;min-height:260px;transition:all .2s;display:flex}.dropzone.dragging{border-color:var(--clay);background:#f4dfcc}.dropzone input{opacity:0;pointer-events:none;position:absolute}.file-mark{color:var(--clay);margin-bottom:13px;font:70px/1 Playfair Display,serif}.dropzone strong{font:600 23px Playfair Display,serif}.dropzone small{color:var(--muted);margin-top:11px;font-size:10px}.controls{border-top:1px solid var(--ink);grid-template-columns:1.2fr 1fr .8fr .8fr auto;align-items:stretch;display:grid}.track-info,.progress-box,.tempo-box,.pedal-box,.actions{padding:22px}.track-info,.progress-box,.tempo-box,.pedal-box{border-right:1px solid var(--ink)}.track-info{align-items:center;gap:13px;display:flex}.status-dot{background:var(--clay);border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 0 4px #b84e3320}.track-info small,.progress-box label,.tempo-box label,.pedal-box label{color:var(--muted);letter-spacing:.08em;margin-bottom:6px;font-size:9px;display:block}.track-info strong{font:600 17px Playfair Display,serif}.tempo-box label output,.pedal-box label output{float:right;color:var(--clay)}input[type=range]{accent-color:var(--clay);width:100%}.actions{align-items:center;gap:8px;display:flex}.actions button{border:1px solid var(--ink);cursor:pointer;white-space:nowrap;padding:12px 13px;font-family:inherit;font-size:10px;transition:all .16s}.play{color:#fff;background:var(--ink)}.download{background:0 0}.actions button:hover{box-shadow:3px 3px 0 var(--clay);transform:translateY(-2px)}.notice{border-top:1px solid var(--line);color:var(--muted);padding:12px 20px;font-size:10px}.notice.error{color:#a22616}.notice.busy{color:var(--clay)}.keyboard-panel{border:1px solid var(--ink);background:#eee8dc;margin-top:46px}.keyboard-caption{border-bottom:1px solid var(--ink);letter-spacing:.09em;justify-content:space-between;padding:11px 14px;font-size:9px;display:flex}.keyboard-caption span{color:var(--clay)}.keyboard-caption small{color:var(--muted);font-size:9px}.keyboard-scroll{padding:16px 14px 18px}.keyboard{width:100%;height:140px;position:relative}.key{left:calc(var(--p) * 100% / 52);background:#fffdf7;border:1px solid #2a2926;border-left:0;width:1.92308%;height:140px;transition:background 40ms,transform 40ms;position:absolute}.key.black{z-index:2;background:#24231f;border:1px solid #12110f;width:1.19231%;height:88px}.key.active{background:var(--clay);transform:translateY(3px);box-shadow:inset 0 3px #742c1e}.key.black.active{background:#d75b3c}.key .key-name{text-align:center;color:#837c70;opacity:0;width:100%;font-size:6px;position:absolute;bottom:7px;left:0}.key.octave .key-name{opacity:1}.key.black .key-name{display:none}.sheet-music-panel{border:1px solid var(--ink);background:#fff;margin-top:24px}.sheet-music-caption{border-bottom:1px solid var(--ink);letter-spacing:.09em;background:#eee8dc;justify-content:space-between;padding:11px 14px;font-size:9px;display:flex}.sheet-music-caption span{color:var(--clay)}.sheet-music-caption small{color:var(--muted);font-size:9px}#osmd-container{overflow-x:auto}.roll-stage{background-color:#211f1b;background-image:repeating-linear-gradient(90deg,#0000 0 calc(1.13636% - 1px),#fff1 calc(1.13636% - 1px) 1.13636%),repeating-linear-gradient(0deg,#0000 0 24.5%,#fff1 24.5% 25%);height:500px;position:relative;overflow:hidden}.piano-roll{position:absolute;inset:0 14px}.falling-note{opacity:.96;background:linear-gradient(90deg,#de6e4d,#f3b187);border-radius:3px 3px 1px 1px;min-width:3px;position:absolute;box-shadow:0 0 10px #de6e4d80}.falling-note.black-note{background:linear-gradient(90deg,#d24d37,#ff9978)}.strike-line{border-bottom:3px solid #f2b294;position:absolute;bottom:0;left:14px;right:14px;box-shadow:0 -4px 17px #f2a2768c}.details{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:24px;margin-top:85px;padding-top:16px;display:grid}.details div{gap:12px;display:flex}.details span{color:var(--clay);font-size:10px}.details p{color:var(--muted);margin:0;font-size:10px;line-height:1.65}@media (max-width:700px){header{padding-bottom:70px}.hero{display:block}.kicker{margin-bottom:25px}.hero h1{font-size:60px}.lede{margin-top:24px}.controls{grid-template-columns:1fr}.track-info,.progress-box,.tempo-box,.pedal-box{border-right:0;border-bottom:1px solid var(--ink)}.actions{border-top:1px solid var(--ink)}.details{grid-template-columns:1fr;gap:18px}.shell{width:min(100% - 28px,1100px)}.key{width:21px}.key.black{width:14px;margin-left:-7px;margin-right:-7px}}.shell{animation:.72s cubic-bezier(.2,.75,.25,1) both arrive}.workbench{transition:box-shadow .28s,transform .28s}.workbench:focus-within{box-shadow:12px 12px 0 var(--clay);transform:translate(-2px,-2px)}.dropzone{transition:background .25s,border-color .25s}.dropzone:hover{background:#f8e9d8}.file-mark{transition:transform .3s cubic-bezier(.17,.9,.3,1.5)}.dropzone:hover .file-mark{transform:translateY(-6px)rotate(-7deg)}.controls{animation:.42s both rise}.keyboard-panel{animation:.5s 80ms both rise}.actions button{transition:transform .18s,box-shadow .18s,background .18s}.actions button:active{box-shadow:none;transform:translate(2px,2px)}.notice{transition:color .22s,background .22s}.notice.busy{background:#fff2df}.is-playing .status-dot{animation:1.1s ease-in-out infinite heartbeat}.is-playing .roll-stage{box-shadow:inset 0 0 44px #ee8a5a1c}.is-playing .strike-line{animation:1.2s ease-in-out infinite strikeGlow}.key{transition:background 80ms,transform 80ms,box-shadow .12s}.falling-note{will-change:top;border-radius:4px 4px 1px 1px;box-shadow:0 0 10px #de6e4d80,0 5px 15px #0004}@keyframes arrive{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes heartbeat{50%{transform:scale(1.3);box-shadow:0 0 0 7px #b84e3315}}@keyframes strikeGlow{50%{filter:brightness(1.35);box-shadow:0 -4px 25px #f2a276d9}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.falling-note{will-change:transform;height:0;transition:filter 80ms,box-shadow 80ms;top:0}.falling-note.landing{filter:brightness(1.45);box-shadow:0 0 8px #fff8,0 0 24px #ffb18ae6,0 8px 22px #0006}.falling-note.landing:after{content:"";filter:blur(5px);opacity:.85;background:#ffd5bb;border-radius:50%;width:180%;height:13px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.key.active:after{content:"";mix-blend-mode:screen;pointer-events:none;background:linear-gradient(#fff7 0%,#0000 31%);animation:.5s ease-out both keyShimmer;position:absolute;inset:0}.key.active{box-shadow:inset 0 3px #742c1e,0 0 17px #ff8b64bd!important}@keyframes keyShimmer{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}.falling-note.landing:before{content:"";background:repeating-conic-gradient(from 210deg at 50% 100%,#ffe0c6 0 4deg,transparent 5deg 19deg);filter:drop-shadow(0 0 5px #ff9a72);width:300%;height:28px;animation:.42s ease-out infinite shatter;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.key.active{background-image:linear-gradient(145deg,#f4a27d 0 11%,#b84e33 12% 34%,#ffb993 35% 39%,#8c301f 40% 68%,#de6d4c 69% 100%);animation:.46s steps(3,end) infinite erode;background-color:var(--clay)!important}.key.active:before{content:"";mix-blend-mode:multiply;opacity:.7;pointer-events:none;background:repeating-linear-gradient(112deg,#0000 0 8px,#2b120d66 9px 10px,#0000 11px 16px);animation:.55s linear infinite crackShift;position:absolute;inset:0}.key.black.active:before{opacity:.9}@keyframes shatter{0%{opacity:.9;transform:translate(-50%)scale(.35,.2)}to{opacity:0;transform:translate(-50%)scale(1.15,1.1)}}@keyframes erode{0%,to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}50%{clip-path:polygon(0 2%,25% 0,50% 3%,76% 0,100% 2%,98% 100%,73% 98%,48% 100%,21% 98%,0 100%)}}@keyframes crackShift{to{background-position:0 28px}}.falling-note.landing:before,.falling-note.landing:after{content:none}.falling-note .vapor{filter:blur(1px)drop-shadow(0 0 7px #ffe1a0);opacity:0;pointer-events:none;transform-origin:50% 100%;background:radial-gradient(at 50% 70%,#fff 0 9%,#ffe5a7 17%,#ffae6e88 43%,#0000 72%);border-radius:50% 50% 42% 42%;width:10px;height:30px;position:absolute;bottom:-7px;left:50%}.falling-note.landing .vapor{animation:.9s cubic-bezier(.16,.68,.2,1) infinite vaporLift}.vapor-a{margin-left:-14px;animation-delay:0s!important}.vapor-b{width:14px;height:44px;margin-left:-3px;animation-delay:-.3s!important}.vapor-c{width:8px;height:26px;margin-left:10px;animation-delay:-.57s!important}@keyframes vaporLift{0%{opacity:0;transform:translateY(7px)scale(.35)}18%{opacity:.9}to{opacity:0;transform:translate3d(var(--drift,6px),-76px,0) scale(1.9,.75);filter:blur(5px)drop-shadow(0 0 10px #fff0bd)}}.key.active{clip-path:none!important;background-color:#bd5034!important;background-image:radial-gradient(circle at 50% 18%,#fff0bf 0 3%,#ffb87d 10%,#c75a3b 34%,#842d20 100%)!important;animation:.85s ease-in-out infinite keyAura!important}.key.active:before{mix-blend-mode:screen!important;opacity:.85!important;background:radial-gradient(circle at 18% 35%,#fff7d9 0 2px,#0000 3px),radial-gradient(circle at 72% 57%,#ffe9b4 0 1px,#0000 3px),radial-gradient(circle at 44% 78%,#fff 0 1px,#0000 3px)!important;animation:.8s linear infinite magicSpecks!important}.key.active:after{background:linear-gradient(#fff9 0%,#ffd18a55 32%,#0000 67%)!important;animation:.55s ease-out infinite softBloom!important}@keyframes keyAura{50%{filter:brightness(1.22)saturate(1.18);box-shadow:inset 0 3px #742c1e,0 0 24px #ffd084cc!important}}@keyframes magicSpecks{to{opacity:.12;transform:translateY(-11px)}}@keyframes softBloom{0%{opacity:.1;transform:scaleY(.4)}55%{opacity:.8}to{opacity:.05;transform:scaleY(1.04)}}.keyboard-scroll{position:relative}.hands-overlay{z-index:5;pointer-events:none;position:absolute;inset:16px 14px 18px}.finger{opacity:.22;border:1px solid #fff7;border-radius:14px 14px 8px 8px;width:21px;height:58px;transition:left .22s cubic-bezier(.24,.8,.2,1),transform .16s cubic-bezier(.2,.85,.3,1.35),opacity .16s,filter .16s;position:absolute;top:5px;transform:translate(-50%);box-shadow:0 2px 8px #0005}.finger b{text-align:center;color:#fff;text-shadow:0 1px 2px #000;font:600 9px DM Mono,monospace;position:absolute;bottom:6px;left:0;right:0}.left-finger{background:linear-gradient(#7cb4cdcc,#2e5e7acc)}.right-finger{background:linear-gradient(#e8a878dd,#a24937cc)}.finger.pressing{opacity:1;filter:brightness(1.45);transform:translate(-50%)translateY(69px)scale(.92,.78);box-shadow:0 0 17px,0 10px 13px #0008}.palm{opacity:.18;filter:blur(.2px);pointer-events:none;border-radius:45% 45% 32% 32%;width:89px;height:43px;transition:left .26s cubic-bezier(.24,.8,.2,1),opacity .2s;position:absolute;top:2px;transform:translate(-50%)}.left-palm{background:radial-gradient(at 50% 20%,#9dd9eecc,#0000 70%)}.right-palm{background:radial-gradient(at 50% 20%,#ffd0a8cc,#0000 70%)}.is-playing .palm{opacity:.38}.finger.pressing:after{content:"";filter:blur(5px);background:#fff1bd;border-radius:50%;width:28px;height:10px;animation:.35s ease-out infinite fingerTouch;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}@keyframes fingerTouch{0%{opacity:.9;transform:translate(-50%)scale(.35)}to{opacity:0;transform:translate(-50%)scale(1.35)}}.keyboard-scroll{padding-bottom:178px}.keyboard{z-index:3}.hands-overlay{z-index:5;pointer-events:none;height:165px;position:absolute;inset:145px 14px auto;overflow:visible}.hand-canvas{width:100%;height:100%;overflow:visible}.hand{transition:opacity .15s;opacity:1!important;filter:none!important}.is-playing .hand{opacity:1!important}.wrist-palm-body,.wrist-cuff,.palm-creases{transition:d .22s cubic-bezier(.24,.8,.2,1)}.finger-body,.finger-highlight,.finger-crease-pip,.finger-crease-dip{transition:d .16s cubic-bezier(.2,.82,.2,1.2)}.fingernail,.nail-lunula{transition:cx .16s,cy .16s,rx .16s,ry .16s}.finger-badge{transition:transform .16s cubic-bezier(.2,.82,.2,1.2)}.touch-glow{transition:opacity .14s,d .14s}.hand-finger.pressing .finger-body{filter:brightness(1.15);stroke-width:.34px}.hand-finger.pressing .finger-badge .badge-bg{fill:#f93;stroke:#fff;stroke-width:.32px}.hand-finger.pressing .finger-badge text{fill:#000;font-weight:900}.hand-finger.pressing{animation:.2s ease-out both realisticPress}@keyframes realisticPress{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}