: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%}}.lessons-main,.lesson-main{flex-direction:column;flex:640px;gap:20px;min-width:0;max-width:960px;margin:0 auto;display:flex}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.lesson-card{flex-direction:column;gap:8px;padding:18px;display:flex}.lesson-card.unwritten,.lesson-card.locked{background:var(--sunk);box-shadow:none}.lesson-card-head,.lesson-card-foot,.lesson-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.lesson-card-foot{justify-content:flex-start;margin-top:6px}.lesson-status{color:var(--muted);font-size:12px;font-weight:600}.lesson-top{flex-wrap:wrap;flex:100%;align-items:center;gap:12px 16px;display:flex}.steps{flex-wrap:wrap;gap:8px;display:flex}.step{border:1px solid var(--line);background:var(--surface);min-height:40px;color:var(--muted);border-radius:20px;padding:0 16px;font-weight:600}.step[data-done]{background:var(--ok-soft);color:var(--ok-ink);border-color:#0000}.step[aria-current=step]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.lesson-main h1{letter-spacing:-.02em;font-size:26px;font-weight:700;line-height:1.2}.lesson-text{max-width:62ch;font-size:16px;line-height:1.6}.sheet{background:#fff;border-radius:10px;padding:8px;overflow-x:auto}.lesson-figure{flex-direction:column;gap:6px;margin:0;display:flex}.signs{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.sign{background:var(--sunk);border-radius:10px;flex-direction:column;gap:2px;padding:12px 14px;display:flex}.callout{border:1px solid var(--warn);background:var(--sunk);border-radius:10px;max-width:64ch;padding:12px 14px}.callout p{margin:4px 0 0}.drill-target{flex-wrap:wrap;align-items:center;gap:16px 24px;display:flex}.sheet.small{flex:0 320px;min-width:220px}.drill-note{font-size:32px;font-weight:700}.lesson-feedback{border:1px solid var(--line-strong);background:var(--sunk);border-radius:12px;padding:14px 16px}.lesson-feedback p{margin:4px 0 0;line-height:1.55}.lesson-feedback.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}.lesson-feedback.miss{border-color:var(--warn)}.streak{gap:8px;display:inline-flex}.streak i{border:2px solid var(--line-strong);background:var(--surface);border-radius:50%;width:24px;height:24px}.streak i.on{background:var(--accent);border-color:var(--accent)}.quiz-question{font-size:20px;font-weight:700}.quiz-options{flex-direction:column;gap:10px;display:flex}.quiz-option{text-align:left;border:2px solid var(--line);background:var(--surface);border-radius:12px;min-height:52px;padding:10px 16px;font-size:16px}.quiz-option:not([disabled]):hover{border-color:var(--accent)}.quiz-option.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok-ink)}.quiz-option.miss{border-color:var(--warn)}.history-view{align-items:flex-start}.history-main{flex-direction:column;flex:999 560px;gap:20px;min-width:0;display:flex}.history-side{flex-direction:column;flex:320px;gap:20px;min-width:0;max-width:460px;display:flex}.tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;display:grid}.tile{flex-direction:column;gap:4px;padding:16px;display:flex}.tile b{letter-spacing:-.02em;font-size:24px}.cal-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.cal-head h2{text-transform:capitalize}.cal-nav{gap:8px;display:flex}.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.cal-weekday{text-align:center;text-transform:capitalize;font-size:12px}.cal-day{aspect-ratio:1;background:var(--sunk);min-height:36px;color:var(--fg);border:1px solid #0000;border-radius:8px;padding:0;font-weight:500}.cal-day.outside{background:0 0}.cal-day[data-level="1"]{background:color-mix(in srgb, var(--accent) 22%, var(--surface))}.cal-day[data-level="2"]{background:color-mix(in srgb, var(--accent) 42%, var(--surface))}.cal-day[data-level="3"]{background:color-mix(in srgb, var(--accent) 85%, var(--surface));color:var(--on-accent)}.cal-day[data-level="4"]{background:var(--accent);color:var(--on-accent)}.cal-day[data-today]{border-color:var(--fg)}.cal-day[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.cal-legend{justify-content:flex-end;align-items:center;gap:6px;display:flex}.cal-day.swatch{aspect-ratio:auto;width:16px;height:16px;min-height:16px;display:inline-block}.day-list,.top-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.day-list li{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px 12px;padding-bottom:10px;display:flex}.day-list li:last-child{border-bottom:0;padding-bottom:0}.day-title{font-weight:600}.top-list li{flex-direction:column;display:flex}.chart{flex-direction:column;gap:6px;margin:0;display:flex}.chart-svg{display:block}.chart-axis{stroke:var(--line-strong);stroke-width:1px}.chart-bar{fill:var(--accent)}.chart-line{fill:none;stroke:var(--accent);stroke-width:2px}.chart-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2px}.chart-text{fill:var(--muted);font-size:11px}.theory-panel .concept-list{flex-direction:column;gap:6px;display:flex}.concept{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 12px;display:flex}.concept[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface))}.concept-card{background:var(--sunk);border-radius:12px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.concept-card h3,.concept-card p{margin:0}.concept-card p{line-height:1.55}.concept-actions{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.help-banner{border:1px solid var(--warn);background:var(--sunk);border-radius:12px;flex-direction:column;gap:8px;margin:0 24px 16px;padding:16px 18px;display:flex}.help-banner p{margin:0;line-height:1.5}.run-next{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.technique .meaning{color:var(--muted);display:block}.about summary{cursor:pointer;color:var(--accent);font-weight:600}.about p{max-width:62ch;margin:6px 0 0;line-height:1.55}.map-rows{flex-direction:column;gap:14px;display:flex}.map-row{grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;align-items:center;gap:8px 16px;display:grid}.map-name{flex-direction:column;display:flex}.map-cells{flex-wrap:wrap;gap:2px;display:flex}.map-cells i{background:var(--sunk);border:1px solid var(--line);box-sizing:border-box;border-radius:2px;width:6px;height:18px}.map-cells i.on{background:var(--accent);border-color:var(--accent)}@media (width<=760px){.map-row{grid-template-columns:minmax(0,1fr)}}.key-label{text-align:center;color:#4b5160;pointer-events:none;font-size:11px;font-weight:700;line-height:1;position:absolute;bottom:8px;left:0;right:0}.key.black .key-label{color:#fff;bottom:6px}.key-finger{color:#fff;text-align:center;pointer-events:none;background:#e8590c;border-radius:9px;min-width:18px;height:18px;font-size:12px;font-weight:700;line-height:18px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.hints{flex-direction:column;gap:8px;display:flex}.hints-note{margin:0}