:root{--bg:#f3f4f6;--surface:#fff;--sunk:#ebedf1;--fg:#15171c;--muted:#586070;--line:#e2e5ea;--line-strong:#b6bcc8;--accent:#3b4fd8;--accent-hover:#3243bd;--on-accent:#fff;--ok:#16a34a;--ok-soft:#e3f6ea;--ok-ink:#116b34;--warn:#f59e0b;--key-rail:#1b1d23;--key-held:#4dabf7;--key-expected:#ffd8a8;--star:#e0a100;--star-edge:#a87200;--star-off-edge:#8a92a3;--heart:#d6336c;--shadow:0 1px 2px #14161e0d, 0 6px 20px #14161e0a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#0f1115;--surface:#171a21;--sunk:#222630;--fg:#eceef2;--muted:#a3aab8;--line:#292e3a;--line-strong:#4a5163;--accent:#8c9bff;--accent-hover:#a3afff;--on-accent:#0f1115;--ok:#4ade80;--ok-soft:#14301f;--ok-ink:#86efac;--key-rail:#0b0d11;--star:#f5b83d;--star-edge:#f5b83d;--star-off-edge:#6f778a;--heart:#f06595;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--bg:#0f1115;--surface:#171a21;--sunk:#222630;--fg:#eceef2;--muted:#a3aab8;--line:#292e3a;--line-strong:#4a5163;--accent:#8c9bff;--accent-hover:#a3afff;--on-accent:#0f1115;--ok:#4ade80;--ok-soft:#14301f;--ok-ink:#86efac;--key-rail:#0b0d11;--star:#f5b83d;--star-edge:#f5b83d;--star-off-edge:#6f778a;--heart:#f06595;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.45}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,.btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}h1,h2,p{margin:0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.topbar{background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 32px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:12px;margin-right:auto;font-size:18px;font-weight:700;display:flex}.brand:has(+.nav){margin-right:0}.brand-mark{fill:var(--accent)}.brand-keys{fill:var(--on-accent)}.pill{background:var(--sunk);height:40px;color:var(--muted);border-radius:20px;align-items:center;gap:10px;padding:0 14px 0 12px;font-weight:500;display:inline-flex}.pill:before{content:"";background:var(--line-strong);border-radius:50%;width:8px;height:8px}.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}.pill.ok:before{background:var(--ok)}.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;justify-content:center;align-items:center;gap:8px;height:40px;padding:0 16px;font-weight:500;transition:background .12s,border-color .12s;display:inline-flex}.btn:hover{background:var(--sunk)}.btn[disabled]{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);height:44px;color:var(--on-accent);padding:0 22px}.btn.primary:hover{background:var(--accent-hover)}.btn.icon{width:36px;height:36px;padding:0;font-size:18px}.seg{background:var(--sunk);border-radius:12px;gap:2px;padding:3px;display:flex}.seg button{white-space:nowrap;height:34px;color:var(--muted);background:0 0;border:0;border-radius:9px;flex:1;padding:0 14px;font-weight:500}.seg button:hover{color:var(--fg)}.seg button[aria-pressed=true]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px #00000024}.switch{background:var(--line-strong);border:0;border-radius:13px;flex:none;width:44px;height:26px;padding:0;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:left .12s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0000004d}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:after{left:21px}.setting{align-items:center;gap:12px;min-height:44px;display:flex}.setting>div{flex:1;min-width:0}.setting-label{font-weight:500}.number{border:1px solid var(--line);background:var(--bg);font-variant-numeric:tabular-nums;border-radius:10px;width:100%;height:40px;padding:0 12px}.layout{flex-wrap:wrap;align-items:flex-start;gap:24px;max-width:1360px;margin:0 auto;padding:32px;display:flex}.stage{flex-direction:column;flex:999 620px;gap:16px;min-width:0;display:flex}.side{flex-direction:column;flex:320px;gap:24px;min-width:0;max-width:420px;display:flex}.heading{flex-wrap:wrap;align-items:center;gap:12px 16px;display:flex}.heading-text{margin-right:auto}.heading h1{letter-spacing:-.02em;font-size:26px;font-weight:700;line-height:1.2}.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.card.padded{flex-direction:column;gap:16px;padding:20px;display:flex}.card h2{font-size:16px;font-weight:700}.field{flex-direction:column;gap:8px;display:flex}.field-row{align-items:center;gap:12px;display:flex}.status{color:var(--muted)}.done{color:var(--ok);font-weight:600}.overview{padding:20px 24px 16px}.overview-head{flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:14px;display:flex}.overview-hint{color:var(--muted);margin-left:auto;font-size:13px}.overview-cells{-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer;gap:2px;height:40px;display:flex}.cell{background:var(--sunk);border:0;border-radius:3px;flex:1;min-width:0;height:100%;padding:0}.cell:hover{filter:brightness(.9)}.cell.practiced{background:var(--ok)}.cell.current{z-index:1;background:var(--accent);box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);position:relative}.overview-ticks{height:20px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px;font-size:12px;position:relative}.overview-ticks span{position:absolute;transform:translate(-50%)}.overview-ticks span:first-child{transform:none}.overview-ticks span:last-child{transform:translate(-100%)}.legend{color:var(--muted);flex-wrap:wrap;gap:8px 20px;font-size:13px;display:flex}.legend span{align-items:center;gap:8px;display:inline-flex}.legend i{background:var(--sunk);border:1px solid var(--line-strong);border-radius:3px;width:12px;height:12px}.legend i.current{background:var(--accent);border-color:var(--accent)}.legend i.practiced{background:var(--ok);border-color:var(--ok)}.legend i.next{background:var(--key-expected);border-color:#e8590c}.legend i.held{background:var(--key-held);border-color:var(--key-held)}.stage-card{overflow:hidden}.transport{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 24px;display:flex}.transport-part{font-variant-numeric:tabular-nums;font-weight:600}.transport-end{align-items:center;gap:10px;margin-left:auto;display:flex}.notation{color:#000;border-bottom:1px solid var(--line);background:#fff;overflow-x:auto}.feedback{flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 24px;display:flex}.feedback-main{flex:280px;min-width:0}.feedback-title{flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-weight:600;display:flex}.feedback-title .status{font-weight:400}.progress{background:var(--sunk);border-radius:3px;height:6px;margin-top:8px;overflow:hidden}.progress span{background:var(--accent);height:100%;transition:width .15s;display:block}.chip{background:var(--sunk);font-variant-numeric:tabular-nums;border-radius:16px;align-items:center;gap:8px;height:32px;padding:0 12px;font-weight:500;display:inline-flex}.tempo{background:var(--sunk);border-radius:12px;align-items:center;gap:4px;padding:4px;display:inline-flex}.tempo-value{text-align:center;font-variant-numeric:tabular-nums;min-width:76px;font-weight:600}.tempo-value span{color:var(--muted);font-weight:400}.technique{color:var(--muted);margin:0;padding:0 24px 16px 44px}.beat-light{background:var(--sunk);border:1px solid var(--line-strong);border-radius:50%;flex:none;width:22px;height:22px}.beat-light.on{background:var(--accent);border-color:var(--accent)}.beat-light.on.accent{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent)}.falling-stats{color:var(--muted);flex-wrap:wrap;gap:4px 20px;padding:0 0 10px;display:flex}.falling-stats b{color:var(--fg);font-weight:700}.falling-count{color:var(--fg);margin-left:auto;font-weight:600}.falling-highway{background:#0b0d11;border-radius:10px 10px 0 0;height:360px;position:relative;overflow:hidden}.falling-highway .lane{border-left:1px solid #ffffff14;position:absolute;top:0;bottom:0}.falling-highway .lane.black{background:#ffffff0b;border-left:0}.fall-note{box-sizing:border-box;color:#0f1115;background:#8c9bff;border:2px solid #0b0d11;border-radius:7px;justify-content:center;align-items:flex-start;padding-top:6px;font-size:12px;font-weight:700;display:flex;position:absolute}.fall-note.hit{background:#4ade80}.fall-note.missed{background:repeating-linear-gradient(135deg,#f59e0b 0 6px,#b87305 6px 12px)}.falling-line{background:#eceef2;height:3px;position:absolute;bottom:0;left:0;right:0}.keyboard-wrap{padding:8px 24px 20px}.keyboard-rail{background:var(--key-rail);border-radius:10px 10px 8px 8px;padding-top:10px}.keyboard{-webkit-user-select:none;user-select:none;touch-action:none;height:140px;position:relative}.keyboard-wrap .legend{margin-top:14px}.key{box-sizing:border-box;cursor:pointer;padding:0;position:absolute;top:0}.key.white{background:#fff;border:1px solid #3a3d46;border-top:0;border-radius:0 0 6px 6px;height:100%;box-shadow:inset 0 -6px #e4e6eb}.key.black{z-index:1;background:linear-gradient(#2a2d36,#0c0d10);border:0;border-radius:0 0 5px 5px;height:62%;box-shadow:0 2px 3px #00000059}.key.white.expected{background:var(--key-expected);box-shadow:inset 0 -6px #e8590c}.key.black.expected{background:linear-gradient(#f08c3a,#c2410c)}.key.white.held{background:var(--key-held);box-shadow:inset 0 -6px #1c7ed6}.key.black.held{background:linear-gradient(#4dabf7,#1c7ed6)}.history{margin:0;padding:0;list-style:none}.attempt{border-top:1px solid var(--line);align-items:center;gap:12px;padding:12px 0;display:flex}.attempt-dot{background:var(--ok);border-radius:50%;flex:none;width:10px;height:10px}.attempt-dot.warn{background:var(--warn)}.attempt-body{flex:1;min-width:0}.attempt-result{font-weight:500}.attempt-meta{color:var(--muted);font-size:13px}.attempt-mode{background:var(--sunk);color:var(--muted);white-space:nowrap;border-radius:12px;padding:2px 10px;font-size:12px;font-weight:500}@media (width<=640px){.topbar,.layout{padding:16px}.transport,.feedback{padding-inline:16px}.transport-end{margin-left:0}}.login-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login{width:min(380px,100%)}.login h1{margin:0;font-size:22px}.text-input{border:1px solid var(--line);background:var(--bg);width:100%;height:40px;color:inherit;font:inherit;border-radius:10px;padding:0 12px}.boot{padding:24px}.nav{gap:4px;margin-right:auto;display:flex}.nav button{height:40px;color:var(--muted);background:0 0;border:0;border-radius:10px;padding:0 14px;font-weight:500}.nav button:hover{color:var(--fg)}.nav button[aria-current=page]{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);font-weight:600}.stars{vertical-align:middle;gap:2px;display:inline-flex}.star{fill:#0000;stroke:var(--star-off-edge)}.star.on{fill:var(--star);stroke:var(--star-edge)}.heart{fill:none;stroke:var(--muted)}.heart.on{fill:var(--heart);stroke:var(--heart)}.link{color:var(--accent);text-align:left;background:0 0;border:0;padding:0;font-weight:600}.link:hover{text-decoration:underline}.link.danger{color:var(--muted);align-self:flex-start;font-weight:500}.select{border:1px solid var(--line);background:var(--surface);height:40px;color:inherit;font:inherit;border-radius:10px;padding:0 12px}.sort{align-items:center;gap:8px;display:flex}.btn[aria-pressed=true]{border-color:var(--heart)}.library-side{flex-direction:column;flex:0 0 240px;gap:16px;display:flex}.library-side .btn.primary{cursor:pointer}.library-main,.piece-main,.train-main{flex-direction:column;flex:999 560px;gap:20px;min-width:0;display:flex}.filter-list{flex-direction:column;gap:2px;display:flex}.filter{text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;min-height:40px;padding:0 12px;font-weight:500;display:flex}.filter:hover{background:var(--sunk)}.filter[aria-pressed=true]{background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);font-weight:600}.piece-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.piece-card{flex-direction:column;gap:12px;padding:20px;display:flex}.piece-head{align-items:flex-start;gap:12px;display:flex}.piece-title{text-align:left;background:0 0;border:0;flex:1;min-width:0;padding:0;font-size:17px;font-weight:600;line-height:1.3}.piece-title:hover{color:var(--accent)}.heart-button{flex:none;width:40px;height:40px}.version-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.version-list li{background:var(--bg);border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;display:flex}.piece-foot{align-items:center;gap:10px;display:flex}.piece-foot .link{margin-left:auto}.tag{background:var(--sunk);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:13px}.empty{border:1px dashed var(--line-strong);text-align:center;border-radius:14px;padding:24px}.piece-columns{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}.version-column{flex-direction:column;flex:280px;gap:12px;min-width:0;display:flex}.version-cards{flex-direction:column;gap:10px;display:flex}.version-card{text-align:left;border-width:2px;flex-direction:column;gap:6px;padding:14px 16px;display:flex}.version-card[aria-pressed=true]{border-color:var(--accent)}.version-card-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.piece-detail{flex-direction:column;flex:2 440px;gap:24px;min-width:0;display:flex}.detail-head{flex-wrap:wrap;align-items:center;gap:12px 16px;display:flex}.detail-head>div{margin-right:auto}.rules{flex-direction:column;gap:10px;display:flex}.rule{align-items:center;gap:12px;display:flex}.rule>span:nth-child(2){flex:1}.category-input{width:180px}.form-row{flex-wrap:wrap;gap:16px;display:flex}.form-row .field{flex:200px}.drop{border:2px dashed var(--line-strong);background:var(--bg);color:var(--muted);text-align:center;cursor:pointer;border-radius:12px;padding:22px;display:block}.drop:focus-within,.drop:hover{border-color:var(--accent)}.form-actions{justify-content:flex-end;gap:12px;display:flex}.form-actions.start{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:flex-start;padding-top:16px}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip-button{border:1px solid var(--line);background:var(--surface);border-radius:999px;height:40px;padding:0 18px;font-weight:500}.chip-button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent);font-weight:600}.train-columns{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}.train-setup{flex:2 480px;gap:24px;min-width:0}.train-stars{flex:280px;min-width:0}.choice-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;display:grid}.choice{border:1px solid var(--line);background:var(--surface);border-radius:10px;height:40px;padding:0 8px;font-weight:500}.choice[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600}.setup-row{flex-wrap:wrap;gap:24px;display:flex}.star-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;display:grid}.star-cell{border:1px solid var(--line);text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-size:13px;display:flex}.star-cell.none{background:var(--bg);color:var(--muted)}.run-stars{flex-wrap:wrap;align-items:center;gap:6px 12px;display:flex}@media (width<=640px){.library-side{flex-basis:100%}}