:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{margin:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;--bg:#05060a;--bg-panel:#0c0f18;--bg-panel-2:#10141f;--border:#94a3b824;--grid-line:#94a3b829;--grid-line-strong:#94a3b86b;--text:#e6ebf5;--text-dim:#8b93a7;--left-color:#5eead4;--left-glow:#5eead4a6;--right-color:#c084fc;--right-glow:#c084fca6;--playhead:#fbbf24;--accent:#38bdf8;--font-display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;--octave-0-rgb:56, 189, 248;--octave-1-rgb:248, 113, 113;--octave-2-rgb:163, 230, 53;--octave-3-rgb:251, 146, 60;--octave-4-rgb:244, 114, 182;--octave-5-rgb:74, 222, 128}button,a,.pitch-block,.falling-block,.piano-key,.variant-b__row-body,.variant-c__strip,.song-picker__row{touch-action:manipulation}.song-player-root{flex-direction:column;flex:1;min-height:0;display:flex}.song-player-loading{color:var(--text-dim);font-family:var(--font-display);flex:1;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.song-picker{display:inline-block;position:relative}.song-picker__trigger{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;flex-direction:column;margin:0 0 4px -8px;padding:4px 8px;font-family:inherit;transition:background .15s,border-color .15s;display:flex}.song-picker__trigger:hover{background:var(--bg-panel-2);border-color:var(--border)}.song-picker__title-row{align-items:center;gap:6px;display:flex}.song-picker__title{color:var(--text);font-size:20px;font-weight:700;transition:color .15s}.song-picker__trigger:hover .song-picker__title{color:var(--accent)}.song-picker__chevron{color:var(--text-dim);flex:none;transition:transform .15s,color .15s}.song-picker__trigger:hover .song-picker__chevron{color:var(--accent)}.song-picker__chevron--open{transform:rotate(180deg)}.song-picker__subtitle{color:var(--text-dim);font-size:13px}.song-picker__popup{z-index:200;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:8px;width:min(340px,80vw);max-height:70vh;padding:10px;display:flex;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 12px 32px #00000080}.song-picker__search{color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-family:inherit;font-size:14px}.song-picker__search:focus{border-color:var(--accent);outline:none}.song-picker__tags{flex-wrap:wrap;gap:6px;display:flex}.song-picker__tag{color:var(--text-dim);background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:4px 10px;font-family:inherit;font-size:12px;transition:border-color .15s,color .15s,background .15s}.song-picker__tag:hover{border-color:var(--accent);color:var(--text)}.song-picker__tag--active{background:var(--accent);border-color:var(--accent);color:#04121c}.song-picker__list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.song-picker__empty{color:var(--text-dim);padding:8px 6px;font-size:13px}.song-picker__row{border-radius:6px;align-items:stretch;gap:2px;transition:background .15s;display:flex}.song-picker__row:hover{background:var(--bg-panel)}.song-picker__row--active{background:#38bdf81f}.song-picker__row-select{text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-direction:column;flex:1;gap:1px;min-width:0;padding:7px 8px;font-family:inherit;display:flex}.song-picker__star{width:32px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:none;justify-content:center;align-items:center;transition:color .15s;display:inline-flex}.song-picker__star:hover,.song-picker__star--on{color:var(--playhead)}.song-picker__row-main{align-items:center;gap:8px;display:flex}.song-picker__difficulty{color:#04121c;border-radius:999px;flex:none;justify-content:center;align-items:center;width:20px;height:20px;font-size:10px;font-weight:800;display:inline-flex}.song-picker__row-title{color:var(--text);font-size:14px;font-weight:600}.song-picker__reviewed{color:#2ecc71;margin-right:4px}.song-picker__row-meta{color:var(--text-dim);padding-left:28px;font-size:11px}.density-slider{color:var(--text-dim);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;display:inline-flex}.density-slider__input{width:120px;accent-color:var(--accent)}.transport{background:var(--bg-panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;display:flex;position:relative}.selection-feedback{background:var(--bg-panel-2);border:1px solid var(--accent);color:var(--text);white-space:nowrap;pointer-events:none;z-index:50;border-radius:8px;margin-top:6px;padding:6px 12px;font-size:13px;font-weight:600;animation:1.6s forwards selection-feedback-fade;position:absolute;top:100%;left:50%;transform:translate(-50%)}@keyframes selection-feedback-fade{0%{opacity:0;transform:translate(-50%,-4px)}15%{opacity:1;transform:translate(-50%)}75%{opacity:1}to{opacity:0}}.transport__icon-btn{color:var(--text);background:var(--bg-panel-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:42px;height:36px;font-family:inherit;font-size:15px;font-weight:600;transition:border-color .15s,background .15s;display:inline-flex}.transport__icon-btn:hover{border-color:var(--accent)}.transport__icon-btn:disabled{opacity:.5;cursor:not-allowed}.transport__icon-btn--primary{background:var(--accent);color:#04121c;border-color:var(--accent);width:48px;font-size:17px}.transport__icon-btn--active{border-color:var(--playhead);color:var(--playhead)}.transport__icon-btn--muted{color:#f87171;border-color:#f87171}.transport__divider{background:var(--border);width:1px;height:22px;margin:0 4px}.transport__time{color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.transport__audio-error{color:#fca5a5;flex-basis:100%;font-size:12px;font-weight:600}.transport__speed{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:6px;align-items:center;gap:6px;padding:4px 6px;display:inline-flex}.transport__speed-btn{color:var(--text);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;font-family:inherit;font-size:15px;font-weight:700;line-height:1;transition:border-color .15s,color .15s;display:inline-flex;position:relative}.transport__speed-btn:after{content:"";position:absolute;inset:-7px}.transport__speed-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.transport__speed-btn:disabled{opacity:.4;cursor:not-allowed}.transport__speed-value{color:var(--text);text-align:center;font-variant-numeric:tabular-nums;min-width:34px;font-size:13px}@media (width<=560px){.transport{gap:6px;padding:8px 10px}.transport__icon-btn{width:36px;height:32px}.transport__icon-btn--primary{width:40px}.transport__divider{margin:0}.density-slider__input{width:84px}}.hand-toggle{--hand-color:var(--text-dim);border:2px solid var(--hand-color);width:34px;height:34px;color:var(--hand-color);cursor:pointer;background:0 0;border-radius:999px;justify-content:center;align-items:center;font-family:inherit;font-size:13px;font-weight:800;transition:background .15s,border-color .15s,color .15s,opacity .15s;display:inline-flex}.hand-toggle--left{--hand-color:var(--left-color)}.hand-toggle--right{--hand-color:var(--right-color)}.hand-toggle--active{background:var(--hand-color);color:#05070c}.hand-toggle--hidden{color:var(--hand-color);background:0 0}.hand-toggle--muted{--hand-color:var(--text-dim);opacity:.55}.hand-toggle:disabled{cursor:not-allowed}.prototype-switcher{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--font-display);z-index:1000;background:#0c0f18eb;border:1px solid #38bdf866;border-radius:999px;align-items:center;gap:10px;padding:4px 12px;display:flex;position:fixed;bottom:10px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000080,0 0 0 1px #38bdf814}.prototype-switcher button{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:14px;line-height:1}.prototype-switcher__label{color:var(--text-dim);white-space:nowrap;font-size:11px}.report-problem__trigger{top:calc(var(--top-nav-height) + 12px);z-index:1001;background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text-dim);font-size:12px;font-family:var(--font-display);cursor:pointer;border-radius:999px;padding:6px 12px;position:fixed;right:12px}.report-problem__trigger:hover{color:var(--text);border-color:var(--accent)}.report-problem__overlay{z-index:2000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.report-problem__dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:14px;width:min(480px,90vw);padding:20px;display:flex}.report-problem__title{font-family:var(--font-display);color:var(--text);margin:0;font-size:18px}.report-problem__field{color:var(--text-dim);flex-direction:column;gap:6px;font-size:13px;display:flex}.report-problem__field input,.report-problem__field textarea{background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);resize:vertical;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px}.report-problem__field input[readOnly]{color:var(--text-dim)}.report-problem__status{margin:0;font-size:13px}.report-problem__status--error{color:#f87171}.report-problem__status--done{color:var(--left-color)}.report-problem__status--done a{color:var(--accent)}.report-problem__actions{justify-content:flex-end;gap:10px;display:flex}.report-problem__actions button{background:var(--bg-panel-2);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 14px;font-family:inherit;font-size:13px}.report-problem__actions button:disabled{opacity:.5;cursor:default}.variant-b{flex:none;padding-bottom:56px}.variant-b__header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 20px;padding:20px 24px 4px;display:flex}.variant-b__page{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;max-width:1400px;margin:24px auto 60px;padding:20px;box-shadow:0 20px 60px #00000059}.variant-b__row{scroll-margin-top:calc(var(--top-nav-height) + 12px);border-radius:10px;align-items:flex-start;gap:10px;margin-bottom:14px;padding:6px 4px;transition:background .2s;display:flex}.variant-b__row:last-of-type{margin-bottom:0}.variant-b__row--active{background:#38bdf80f}.variant-b__row-gutter{flex-direction:column;flex:none;display:flex}.variant-b__hand-label{align-items:center;transition:height .4s cubic-bezier(.22,.61,.36,1);display:flex;overflow:hidden}.variant-b__hand-label span{text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);white-space:nowrap;background:#05060a8c;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700}.variant-b__hand-gap{flex:none;transition:height .4s cubic-bezier(.22,.61,.36,1)}.variant-b__row-body{background:var(--bg-panel-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;flex:none;padding:4px 0;transition:height .4s cubic-bezier(.22,.61,.36,1),width .4s cubic-bezier(.22,.61,.36,1);position:relative;overflow:hidden}.variant-b__row-body:hover{border-color:var(--accent)}@media (width<=560px){.variant-b__header{padding:12px 12px 4px}.variant-b__page{border-radius:10px;margin:12px auto 40px;padding:10px}.variant-b__hand-label span{padding:3px 5px}}.variant-b__playhead{background:var(--playhead);width:2px;box-shadow:0 0 10px 2px var(--playhead);z-index:5;position:absolute;top:0;bottom:0}.variant-c{box-sizing:border-box;flex-direction:column;flex:1;min-height:0;padding-bottom:56px;display:flex;overflow:hidden}.variant-c__header{flex-wrap:wrap;flex:none;justify-content:space-between;align-items:flex-end;gap:8px 20px;padding:16px 24px 4px;display:flex}.variant-c__strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-panel);cursor:pointer;flex:1;min-height:0;margin:16px 20px;position:relative;overflow:hidden}.variant-c__hand-label{z-index:6;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);background:#05060a8c;border-radius:999px;padding:3px 8px;font-size:11px;position:absolute;left:20px}.variant-c__fixed-playhead{background:var(--playhead);width:3px;box-shadow:0 0 16px 3px var(--playhead);z-index:5;position:absolute;top:0;bottom:0}.variant-c__track{will-change:transform;position:absolute;top:0;bottom:0}.variant-c__lane{position:absolute;left:0;right:0}.variant-d{box-sizing:border-box;flex-direction:column;flex:1;min-height:0;padding-bottom:56px;display:flex;overflow:hidden}.variant-d__header{flex:none;padding:16px 24px 4px}.variant-d__stage{flex:1;min-height:0;margin:16px 20px 0;position:relative}.variant-d__fall-area{background:var(--bg-panel);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;position:relative;overflow:hidden}.variant-d__fall-track{height:100%;transition:transform 1.8s cubic-bezier(.22,.61,.36,1);position:relative}.variant-d__hit-line{background:var(--playhead);height:2px;box-shadow:0 0 12px 2px var(--playhead);z-index:4;position:absolute;bottom:0;left:0;right:0}.falling-block{opacity:.92;cursor:pointer;border-radius:5px;justify-content:center;align-items:flex-end;padding-bottom:4px;transition:left 1.2s cubic-bezier(.22,.61,.36,1),width 1.2s cubic-bezier(.22,.61,.36,1);display:flex;position:absolute;box-shadow:0 0 6px #00000059}.falling-block--left{background:var(--left-color)}.falling-block--right{background:var(--right-color)}.falling-block--active{filter:brightness(1.35)}.falling-block--left.falling-block--active{box-shadow:0 0 16px 4px var(--left-glow)}.falling-block--right.falling-block--active{box-shadow:0 0 16px 4px var(--right-glow)}.falling-block__label{writing-mode:horizontal-tb;white-space:nowrap;text-overflow:clip;color:#05070c;text-shadow:0 1px 2px #ffffff59;max-width:100%;font-weight:800;transition:font-size 1.2s cubic-bezier(.22,.61,.36,1);overflow:hidden}.falling-block__finger{text-align:center;color:#f2f4f8;background:#05070a8c;border-radius:999px;width:13px;height:13px;font-size:9px;font-weight:800;line-height:13px;transition:bottom 1.2s cubic-bezier(.22,.61,.36,1);position:absolute;left:50%;transform:translate(-50%)}.piano-keyboard{border:1px solid var(--border);background:#050608;border-radius:0 0 10px 10px;position:relative;overflow:hidden}.piano-keyboard__track{height:100%;transition:transform 1.8s cubic-bezier(.22,.61,.36,1);position:relative}.piano-key{box-sizing:border-box;cursor:pointer;transform-origin:50% 0;transition:filter 80ms,background 80ms,left 1.2s cubic-bezier(.22,.61,.36,1),width 1.2s cubic-bezier(.22,.61,.36,1);position:absolute;top:0;overflow:hidden}@keyframes piano-key-press{0%{filter:brightness();transform:scale(1)translateY(0)}30%{filter:brightness(1.3);transform:scale(.96)translateY(2px)}to{filter:brightness();transform:scale(1)translateY(0)}}.piano-key--pressed{animation:.22s ease-out piano-key-press}.piano-key--white{z-index:1;background:#eef1f6;border:1px solid #0b0d12;border-radius:0 0 6px 6px}.piano-key--black{z-index:2;background:#14161c;border:1px solid #000;border-radius:0 0 4px 4px}.piano-key__name{text-align:center;color:#2b303b;font-weight:800;transition:font-size 1.2s cubic-bezier(.22,.61,.36,1);position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.piano-key__name--black{color:#d7dbe3;bottom:8px}.piano-key__name--middle-c{box-shadow:0 0 0 2px var(--accent);border-radius:999px;padding:0 3px}.piano-key__octave{color:#05070c;border-radius:0 0 6px 6px;justify-content:center;align-items:center;height:13px;font-size:8px;font-weight:800;display:flex;position:absolute;bottom:0;left:0;right:0}.piano-key__octave--c0{background:rgb(var(--octave-0-rgb))}.piano-key__octave--c1{background:rgb(var(--octave-1-rgb))}.piano-key__octave--c2{background:rgb(var(--octave-2-rgb))}.piano-key__octave--c3{background:rgb(var(--octave-3-rgb))}.piano-key__octave--c4{background:rgb(var(--octave-4-rgb))}.piano-key__octave--c5{background:rgb(var(--octave-5-rgb))}.piano-key--active-left.piano-key--white{background:var(--left-color)}.piano-key--active-left.piano-key--black{background:var(--left-color);filter:brightness(.85)}.piano-key--active-right.piano-key--white{background:var(--right-color)}.piano-key--active-right.piano-key--black{background:var(--right-color);filter:brightness(.85)}.piano-key--active-both.piano-key--white{background:var(--playhead)}.piano-key--active-both.piano-key--black{background:var(--playhead);filter:brightness(.85)}.piano-key--active-left .piano-key__name,.piano-key--active-right .piano-key__name,.piano-key--active-both .piano-key__name{color:#05070c}.beat-grid-line{background:var(--grid-line);width:1px;position:absolute;top:0;bottom:0}.beat-grid-line--strong{background:var(--grid-line-strong)}.hand-lanes{transition:height .4s cubic-bezier(.22,.61,.36,1);position:relative}.hand-lanes__row{position:relative}.octave-band{pointer-events:none;border-radius:8px;position:absolute;top:0;bottom:0}.octave-band--c0{background:rgba(var(--octave-0-rgb), .16);border:1px solid rgba(var(--octave-0-rgb), .4)}.octave-band--c1{background:rgba(var(--octave-1-rgb), .16);border:1px solid rgba(var(--octave-1-rgb), .4)}.octave-band--c2{background:rgba(var(--octave-2-rgb), .16);border:1px solid rgba(var(--octave-2-rgb), .4)}.octave-band--c3{background:rgba(var(--octave-3-rgb), .16);border:1px solid rgba(var(--octave-3-rgb), .4)}.octave-band--c4{background:rgba(var(--octave-4-rgb), .16);border:1px solid rgba(var(--octave-4-rgb), .4)}.octave-band--c5{background:rgba(var(--octave-5-rgb), .16);border:1px solid rgba(var(--octave-5-rgb), .4)}.octave-band__tag{color:var(--text);z-index:5;background:#05060ad9;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:800;line-height:1.5;position:absolute;bottom:3px;left:5px}.pitch-block{color:#05070c;cursor:pointer;white-space:nowrap;z-index:2;align-items:center;font-weight:700;transition:box-shadow .15s,filter .15s,font-size .15s,padding-left .15s;display:flex;position:absolute;overflow:hidden;box-shadow:0 0 6px #0006}.pitch-block--white{border-radius:999px}.pitch-block--black{border-radius:4px}.pitch-block--left{background:var(--left-color)}.pitch-block--right{background:var(--right-color)}.pitch-block--active{filter:brightness(1.3)}.pitch-block--left.pitch-block--active{box-shadow:0 0 16px 4px var(--left-glow)}.pitch-block--right.pitch-block--active{box-shadow:0 0 16px 4px var(--right-glow)}.pitch-block__label--italic{font-style:italic}.pitch-block__finger{background:#05070a59;border-radius:999px;margin-left:4px;padding:0 4px;font-size:.75em;font-weight:800;line-height:1.5}.site-page{box-sizing:border-box;flex:1;width:100%;max-width:760px;margin:0 auto;padding:32px 24px 80px;line-height:1.6}.site-page h1{margin:0 0 16px;font-size:28px}.site-page h3{color:var(--text);margin:20px 0 8px;font-size:15px}.site-page h2{color:var(--text);scroll-margin-top:calc(var(--top-nav-height) + 12px);margin:32px 0 10px;font-size:19px}.site-page p{color:var(--text-dim);margin:0 0 12px}.site-page a{color:var(--accent)}.site-page ul{color:var(--text-dim);margin:0 0 12px;padding-left:22px}.site-page__notice{border:1px solid var(--playhead);color:var(--text);background:#fbbf2414;border-radius:8px;margin:0 0 24px;padding:12px 16px;font-size:14px}.site-page__placeholder{border-left:3px dashed var(--border);padding-left:12px;font-style:italic}.site-page__list{flex-direction:column;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.site-page__list-row{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.site-page__list-row-remove{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:999px;padding:4px 10px;font-family:inherit;font-size:12px}.site-page__list-row-remove:hover{color:var(--text);border-color:var(--accent)}@media (width<=560px){.site-page{padding:20px 16px 60px}}:root{--top-nav-height:56px}@media (width<=560px){:root{--top-nav-height:48px}}.app-shell{background:radial-gradient(circle at 15% -10%, #38bdf81f, transparent 45%), radial-gradient(circle at 85% 110%, #c084fc1a, transparent 45%), var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font-display);flex-direction:column;display:flex}.app-shell__main{flex-direction:column;flex:1;min-height:0;display:flex}.top-nav{z-index:900;height:var(--top-nav-height);background:var(--bg-panel);border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;gap:16px;padding:0 20px;display:flex;position:sticky;top:0}.top-nav__brand{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;overflow:hidden}.top-nav__links{align-items:center;gap:18px;display:flex}.top-nav__link{color:var(--text-dim);border-bottom:2px solid #0000;padding:6px 2px;font-family:inherit;font-size:13px;font-weight:600;text-decoration:none;transition:color .15s,border-color .15s}.top-nav__link:hover{color:var(--text)}.top-nav__link--active{color:var(--text);border-bottom-color:var(--accent)}@media (width<=560px){.top-nav{gap:10px;padding:0 12px}.top-nav__links{gap:12px}.top-nav__brand{font-size:13px}.top-nav__link{font-size:12px}}