*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}:root{--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;--font-rounded:ui-rounded, "SF Pro Rounded", var(--font-sans);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-1:.15s;--dur-2:.22s;--dur-3:.32s;--radius-1:8px;--radius-2:12px;--radius-3:18px;--radius-pill:999px;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:15px;line-height:1.45}p,h1,h2,li{text-wrap:pretty}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;margin:0;padding:0}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}.icon-button{border-radius:var(--radius-pill);width:36px;height:36px;color:var(--text-2);transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);place-items:center;display:inline-grid}.icon-button:hover{background:var(--fill-1);color:var(--text)}.icon-button:active{background:var(--fill-2)}.chip{border-radius:var(--radius-pill);height:34px;color:var(--text-2);letter-spacing:.01em;transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);align-items:center;gap:7px;padding:0 14px 0 11px;font-size:14px;font-weight:500;display:inline-flex}.chip:hover{background:var(--fill-1);color:var(--text)}.chip[aria-pressed=true]{color:var(--accent-text);background:var(--accent-fill)}.chip svg{flex:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--staff-line-w:1.5;--ledger-w:2;--barline-w:1.5;--bg:#f2f1ee;--bg-2:#e8e6e2;--surface:#fbfaf8;--surface-line:#1e140a14;--shadow-pop:0 1px 2px #1e140a0f, 0 12px 40px #1e140a24;--scrim:#18140e47;--text:#171615;--text-2:#67635d;--text-3:#726d65;--hairline:#dedbd6;--fill-1:#1e140a0d;--fill-2:#1e140a17;--accent:#a8641a;--accent-text:#985a12;--accent-fill:#a8641a1f;--on-accent:#fff;--good:#3d8c5b;--good-text:#2f7349;--good-fill:#dff0e3;--good-deep:#2f7349;--bad:#c55448;--bad-text:#a8463a;--bad-fill:#f8e0dc;--bad-deep:#9e3d33;--answer-ink:#1f5c37;--answer-fill:#9cc9ab;--answer-fill-black:#3d8c5b;--ink:#141312;--clef-ink:#141312;--staff-line:#2a2826;--hint:var(--accent-text);--lamp-rgb:255, 190, 110;--lacquer:linear-gradient(180deg, #fff 0%, #f1f0ed 50%, #dcdad5 100%);--lacquer-line:#ffffffe6;--lacquer-sheen:#fffffff2;--kb-white-top:#fff;--kb-white-bottom:#f4f2ee;--kb-white-edge:#c9c5be;--kb-white-lip:#e4e0d9;--kb-white-shade:#0000001f;--kb-black-top:#3b3b3e;--kb-black-bottom:#0e0e10;--kb-black-edge:#000;--kb-black-sheen:#ffffff38;--kb-down-white:#f5dcb5;--kb-down-black:#7c4b12;--kb-label:#6f6a63;--heat:#e3a24e;--heat-min:.1;--heat-span:.7;--ring-start:#d9933f;--ring-end:#a8641a;--ring-track:#a8641a21;--ring-shadow:#3c1e0073;--bar-top:#b4701f;--bar-bottom:#b4701fad;--bar-rest:.88;--chart-axis:#c4bfb7;--chart-goal:#1e140a52;--shadow-tip:0 1px 2px #1e140a0f, 0 6px 16px #1e140a1a}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0a0b;--bg-2:#151516;--surface:#161617;--surface-line:#ffebc817;--shadow-pop:0 1px 0 #ffebc80d inset, 0 18px 60px #0009;--scrim:#0000009e;--text:#f3eee5;--text-2:#a8a197;--text-3:#868179;--hairline:#242324;--fill-1:#ffebc80f;--fill-2:#ffebc81c;--accent:#e5a04c;--accent-text:#eaa95a;--accent-fill:#e5a04c26;--on-accent:#1a1209;--good:#7fcb98;--good-text:#8fd3a5;--good-fill:#7fcb982e;--good-deep:#3f8a5a;--bad:#ef8b7f;--bad-text:#f29a8f;--bad-fill:#ef8b7f33;--bad-deep:#a8463a;--answer-ink:#1f5536;--answer-fill:#d4f5dc;--answer-fill-black:#58a873;--ink:#f7f2e8;--clef-ink:#f2ece1;--staff-line:#d9d2c5;--hint:var(--accent-text);--lamp-rgb:255, 190, 110;--lacquer:linear-gradient(180deg, #1d1d1f 0%, #0c0c0d 55%, #050505 100%);--lacquer-line:#ffffff1a;--lacquer-sheen:#ffeccd2e;--kb-white-top:#cfc6b5;--kb-white-bottom:#b2a892;--kb-white-edge:#7f7769;--kb-white-lip:#ada38f;--kb-white-shade:#00000059;--kb-black-top:#2e2e31;--kb-black-bottom:#070708;--kb-black-edge:#000;--kb-black-sheen:#ffffff29;--kb-down-white:#d8b47a;--kb-down-black:#6b4512;--kb-label:#4f493f;--heat:#f4c27c;--heat-min:.1;--heat-span:.8;--ring-start:#b5742a;--ring-end:#f4c27c;--ring-track:#e5a04c26;--ring-shadow:#00000080;--bar-top:#eaa95a;--bar-bottom:#e5a04c52;--bar-rest:.8;--chart-axis:#39373a;--chart-goal:#ffebc84d;--shadow-tip:0 1px 0 #ffebc80d inset, 0 8px 24px #00000080}html,body{color:var(--text);background:var(--bg)}.backdrop{z-index:-1;pointer-events:none;background:linear-gradient(180deg, #ffffffd9 0, #fff0 140px), radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--lamp-rgb), .07) 0%, rgba(var(--lamp-rgb), 0) 70%), linear-gradient(180deg, #f7f6f3 0%, #efede8 100%);position:fixed;inset:0}:root[data-theme=dark] .backdrop{background:radial-gradient(ellipse 72% 78% at 50% 0%, rgba(var(--lamp-rgb), .13) 0%, rgba(var(--lamp-rgb), .095) 18%, rgba(var(--lamp-rgb), .055) 38%, rgba(var(--lamp-rgb), .022) 60%, rgba(var(--lamp-rgb), 0) 85%), var(--bg)}:root[data-theme=dark] .app-frame[data-screen=practice] .backdrop{background:radial-gradient(ellipse 62% 72% at 50% 34%, rgba(var(--lamp-rgb), .12) 0%, rgba(var(--lamp-rgb), .085) 22%, rgba(var(--lamp-rgb), .045) 44%, rgba(var(--lamp-rgb), .016) 66%, rgba(var(--lamp-rgb), 0) 88%), var(--bg)}:root:not([data-theme=dark]) .app-frame[data-screen=practice] .backdrop{background:radial-gradient(ellipse 60% 70% at 50% 34%, rgba(var(--lamp-rgb), .08) 0%, rgba(var(--lamp-rgb), 0) 70%), linear-gradient(180deg, #f7f6f3 0%, #efede8 100%)}.app-frame{position:fixed;inset:0;overflow:hidden;container:app/size}.screen{overscroll-behavior:contain;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);animation:screen-in var(--dur-3) var(--ease-out) backwards;position:absolute;inset:0;overflow:hidden auto}@keyframes screen-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.column{width:min(100%,680px);margin:0 auto;padding:0 24px 64px}@container app (width<=640px){.column{padding:0 18px 48px}}.topbar{z-index:5;background:0 0;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 12px;display:grid;position:sticky;top:0}@supports (animation-timeline:scroll()){.topbar{animation:linear both topbar-solid;animation-timeline:scroll();animation-range:0 32px}}@supports not (animation-timeline:scroll()){.topbar{background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(1.4)blur(16px);backdrop-filter:saturate(1.4)blur(16px)}}@keyframes topbar-solid{to{background:color-mix(in srgb, var(--bg) 88%, transparent);box-shadow:0 1px 0 var(--hairline);-webkit-backdrop-filter:saturate(1.4)blur(16px);backdrop-filter:saturate(1.4)blur(16px)}}.topbar-side{align-items:center;gap:4px;min-width:0;display:flex}.topbar-side.is-right{justify-content:flex-end}.topbar-title{letter-spacing:.01em;white-space:nowrap;margin:0;font-size:17px;font-weight:600}.button{border-radius:var(--radius-pill);letter-spacing:.02em;white-space:nowrap;height:44px;transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);justify-content:center;align-items:center;gap:8px;padding:0 22px;font-size:16px;font-weight:600;display:inline-flex}.button:active{transform:scale(.98)}.button.is-primary{color:var(--on-accent);background:var(--accent);box-shadow:inset 0 1px #ffffff38,0 1px 2px #0000002e}.button.is-primary:hover{background:color-mix(in srgb, var(--accent) 88%, white)}:root[data-theme=dark] .button.is-primary:hover{background:color-mix(in srgb, var(--accent) 90%, white)}.button.is-large{height:54px;padding:0 36px;font-size:18px}.button.is-compact{height:34px;padding:0 16px;font-size:14px}.button.is-quiet{color:var(--text);background:var(--fill-1)}.button.is-quiet:hover{background:var(--fill-2)}.button.is-plain{color:var(--accent-text);padding:0 14px}.button.is-plain:hover{background:var(--fill-1)}.button.is-danger{color:#fff;background:var(--bad-deep)}.button svg{flex:none}.link-button{border-radius:var(--radius-pill);height:36px;color:var(--text-2);transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);align-items:center;gap:7px;padding:0 12px;font-size:15px;font-weight:500;display:inline-flex}.link-button:hover{color:var(--text);background:var(--fill-1)}.toggle{border-radius:var(--radius-pill);background:var(--fill-2);width:46px;height:28px;transition:background-color var(--dur-2) var(--ease-out);flex:none;position:relative}.toggle[aria-checked=true]{background:var(--accent)}.toggle-thumb{width:22px;height:22px;transition:transform var(--dur-2) var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.toggle[aria-checked=true] .toggle-thumb{transform:translate(18px)}.segmented{border-radius:var(--radius-pill);background:var(--fill-1);isolation:isolate;grid-auto-columns:1fr;grid-auto-flow:column;padding:3px;display:inline-grid;position:relative}.segmented-thumb{z-index:-1;width:calc((100% - 6px) / var(--n));border-radius:var(--radius-pill);background:var(--surface);transform:translateX(calc(var(--i) * 100%));transition:transform var(--dur-2) var(--ease-out);position:absolute;top:3px;bottom:3px;left:3px;box-shadow:0 1px 2px #0000001f,0 0 0 .5px #0000000a}:root[data-theme=dark] .segmented-thumb{background:#2a2928;box-shadow:0 1px 2px #00000080,inset 0 1px #ffffff0f}.segmented-option{border-radius:var(--radius-pill);height:32px;color:var(--text-2);white-space:nowrap;transition:color var(--dur-1) var(--ease-out);padding:0 14px;font-size:14px;font-weight:500}.segmented-option[aria-checked=true]{color:var(--text)}.segmented.is-sm .segmented-option{height:28px;padding:0 11px;font-size:13px}.meter{background:var(--fill-2);border-radius:2px;height:4px;overflow:hidden}.meter-fill{height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--accent);transition:width var(--dur-3) var(--ease-out)}.sheet{width:min(560px,100vw - 32px);max-height:min(86vh,860px);color:var(--text);background:var(--surface);box-shadow:var(--shadow-pop), inset 0 0 0 1px var(--surface-line);border:0;border-radius:22px;margin:auto;padding:0;overflow:hidden}.sheet.is-sm{width:min(400px,100vw - 32px)}.sheet[open]{animation:sheet-in .26s var(--ease-out) both}.sheet.is-closing{animation:.16s cubic-bezier(.4,0,1,1) both sheet-out}.sheet::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:scrim-in .26s var(--ease-out) both}.sheet.is-closing::backdrop{animation:.16s linear both scrim-out}.sheet-body{max-height:inherit;outline:none;padding:36px 36px 32px;position:relative;overflow-y:auto}.sheet.is-sm .sheet-body{padding:30px 28px 24px}.sheet-close{position:absolute;top:12px;right:12px}@keyframes sheet-in{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:none}}@keyframes sheet-out{to{opacity:0;transform:translateY(8px)scale(.99)}}@keyframes scrim-in{0%{opacity:0}}@keyframes scrim-out{to{opacity:0}}@media (max-width:640px){.sheet:not(.is-sm){border-radius:22px 22px 0 0;width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0}.sheet:not(.is-sm)[open]{animation-name:sheet-up}.sheet:not(.is-sm).is-closing{animation-name:sheet-down}.sheet:not(.is-sm) .sheet-body{padding:30px 22px calc(26px + env(safe-area-inset-bottom))}}@media (max-height:500px){.sheet,.sheet:not(.is-sm){border-radius:18px;width:min(780px,100vw - 32px);max-height:calc(100dvh - 16px);margin:auto}.sheet:not(.is-sm)[open]{animation-name:sheet-in}.sheet .sheet-body,.sheet:not(.is-sm) .sheet-body{padding:20px 24px 16px}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}@keyframes sheet-down{to{transform:translateY(100%)}}.toast-host{left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));z-index:50;pointer-events:none;justify-content:center;display:flex;position:fixed}.toast{border-radius:var(--radius-pill);max-width:min(92vw,520px);color:var(--text);background:var(--surface);box-shadow:var(--shadow-pop), inset 0 0 0 1px var(--surface-line);opacity:0;transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);padding:11px 18px;font-size:14px;font-weight:500;transform:translateY(8px)}.toast.is-visible{opacity:1;transform:none}.toast.is-error{color:var(--bad-text)}.eyebrow{letter-spacing:.08em;color:var(--text-3);font-size:13px;font-weight:600}@media (prefers-reduced-motion:reduce){.screen,.sheet[open]{animation:none}.sheet::backdrop{animation:none}}.staff{width:100%;height:100%;position:relative}.staff-lines,.note-layer,.note-svg{position:absolute;inset:0}.staff svg{display:block;position:absolute;inset:0;overflow:visible}.staff-lines{opacity:0;transition:opacity var(--dur-3) var(--ease-out)}.staff-lines.is-ready{opacity:1}.staff-foot{top:var(--foot-y);position:absolute;left:0;right:0}.staff .vf-stave path{stroke:var(--staff-line);stroke-width:calc(var(--staff-line-w) * var(--u));shape-rendering:crispedges}.staff .pf-barline{fill:none;stroke:var(--staff-line);stroke-width:calc(var(--barline-w) * var(--u));shape-rendering:crispedges}.staff .pf-fade-stop{stop-color:var(--staff-line)}.staff .pf-fade-end{stop-opacity:0}.staff .vf-clef text{fill:var(--clef-ink)}.staff .vf-brace path,.staff .vf-brace text{fill:var(--clef-ink);stroke:none}.note-layer .vf-stavenote text{fill:var(--ink);transition:fill var(--dur-2) var(--ease-out)}.note-layer .vf-stavenote path{fill:none;stroke:var(--staff-line);stroke-width:calc(var(--ledger-w) * var(--u));shape-rendering:crispedges}.note-svg{transform-origin:var(--cx) var(--cy);will-change:transform}.note-layer.is-current{animation:note-in var(--dur-3) var(--ease-out) both}.note-layer.is-leaving{pointer-events:none;animation:.18s cubic-bezier(.4,0,1,1) both note-out}.note-layer.is-current.is-delayed{animation-duration:.26s;animation-delay:.14s}.note-layer.is-correct .vf-stavenote text{fill:var(--good);transition-duration:90ms}.note-layer.is-correct .note-svg{animation:note-glow .32s var(--ease-out)}@keyframes note-glow{0%,to{filter:drop-shadow(0 0 #0000)}40%{filter:drop-shadow(0 0 calc(var(--space) * .35) color-mix(in srgb, var(--good) 55%, transparent))}}.note-layer.is-wrong .vf-stavenote text{animation:note-wrong-ink .35s var(--ease-out) both}@keyframes note-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}@keyframes note-out{0%{opacity:1}to{opacity:0;transform:translate(-12px)}}@keyframes note-wrong-ink{0%,40%{fill:var(--bad)}to{fill:var(--ink)}}.note-name{left:var(--x);top:var(--y);font-size:max(15px, calc(var(--space) * .9));letter-spacing:.01em;color:var(--hint);white-space:nowrap;animation:name-in var(--dur-2) var(--ease-out) both;align-items:baseline;font-weight:500;line-height:1;display:inline-flex;position:absolute;transform:translateY(-52%)}.note-name .nn-acc{margin-left:.02em;font-size:.78em}.note-name .nn-oct{opacity:.8;font-variant-numeric:tabular-nums;margin-left:.08em;font-size:max(10px,.6em)}.note-name.is-answer{color:var(--good);font-weight:600}.note-name.is-good{color:var(--good)}@keyframes name-in{0%{opacity:0;transform:translate(-4px,-52%)}to{opacity:1;transform:translateY(-52%)}}@media (prefers-reduced-motion:reduce){.note-layer.is-current,.note-layer.is-leaving,.note-layer.is-correct .note-svg,.note-name{animation:none}}.pv-notes{opacity:0;transition:opacity var(--dur-3) var(--ease-out)}.pv-notes.is-ready{opacity:1}.pv-notes .vf-stavenote text{fill:color-mix(in oklab, var(--ink) var(--mix,100%), var(--bg))}.pv-notes .vf-stavenote path{fill:none;stroke:color-mix(in oklab, var(--staff-line) var(--mix,100%), var(--bg));stroke-width:calc(var(--ledger-w) * var(--u));shape-rendering:crispedges}.keyboard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;position:relative}.keyboard.is-interactive{touch-action:none}.keyboard-keys{position:absolute;inset:0}.key{position:absolute;top:0;overflow:hidden}.keyboard.is-interactive .key{cursor:pointer}.key.is-white{left:calc(var(--i) * 100% / var(--n));width:calc(100% / var(--n));background:linear-gradient(180deg, var(--kb-white-top) 0%, var(--kb-white-bottom) 100%);border-right:1px solid var(--kb-white-edge);height:100%;box-shadow:inset 0 -6px 0 var(--kb-white-lip), inset 0 10px 10px -8px var(--kb-white-shade);border-radius:0 0 3px 3px}.key.is-white:first-child{border-left:1px solid var(--kb-white-edge)}.key.is-black{left:calc(var(--x) * 100% / var(--n));width:calc(var(--bw) * 100% / var(--n));z-index:2;background:linear-gradient(180deg, var(--kb-black-top) 0%, var(--kb-black-bottom) 22%, var(--kb-black-bottom) 86%, #1d1d1f 100%);border:1px solid var(--kb-black-edge);height:61%;box-shadow:inset 1px 0 0 var(--kb-black-sheen), inset -1px 0 0 #0006, inset 0 -7px 0 #ffffff12, 0 3px 4px #00000073;border-top:0;border-radius:0 0 3px 3px}.key:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out), background-color .2s var(--ease-out);background:0 0;position:absolute;inset:0}.key.is-white.is-down:after{background:var(--kb-down-white);opacity:1;transition:none}.key.is-black.is-down:after{background:var(--kb-down-black);opacity:1;transition:none}.key.is-white.is-correct:after,.key.is-black.is-correct:after{background:var(--good);opacity:.34;transition:none}.key.is-white.is-wrong:after{background:var(--bad);opacity:.28;transition:none}.key.is-black.is-wrong:after{background:var(--bad-deep);opacity:.6;transition:none}.key.is-white.is-answer:after{background:var(--answer-fill);opacity:1;box-shadow:inset 0 0 0 2px var(--good-deep)}.key.is-black.is-answer:after{background:var(--answer-fill-black);opacity:1;box-shadow:inset 0 0 0 2px var(--answer-fill)}.key.is-black.is-correct:after{background:var(--good-deep);opacity:.92}.key-label{z-index:1;text-align:center;letter-spacing:.02em;color:var(--kb-label);font-variant-numeric:tabular-nums;pointer-events:none;font-size:13px;font-weight:500;line-height:1;position:absolute;bottom:10px;left:0;right:0}.key-legend{z-index:1;min-width:19px;height:19px;color:var(--kb-label);pointer-events:none;border-radius:5px;place-items:center;padding:0 4px;font-size:11px;font-weight:600;line-height:1;display:grid;position:absolute;bottom:30px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px}.key.is-black .key-legend{color:#fff9;min-width:17px;height:17px;padding:0 3px;bottom:10px}@media (pointer:coarse){.key-legend{display:none}}.key-answer{z-index:1;text-align:center;color:var(--answer-ink);font-variant-numeric:tabular-nums;white-space:nowrap;animation:answer-in var(--dur-2) var(--ease-out) both;pointer-events:none;font-size:18px;font-weight:700;line-height:1;position:absolute;bottom:calc(19.5% - 9px);left:0;right:0}.key.is-answer .key-label{visibility:hidden}.key.is-answer .key-legend{display:none}.key.is-black .key-answer{color:#fff;font-size:13px;bottom:10px}@keyframes answer-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.key-heat{border-radius:inherit;background:var(--heat);opacity:calc(var(--heat-min) + var(--h) * var(--heat-span));pointer-events:none;position:absolute;inset:0}.key.is-black .key-heat{background:linear-gradient(180deg, var(--heat) 0%, var(--heat) 55%, transparent 100%);opacity:calc(var(--h) * var(--heat-span) * .75)}.key.is-white.is-unknown{background:repeating-linear-gradient(135deg, transparent 0 5px, var(--fill-2) 5px 6px), linear-gradient(180deg, var(--kb-white-top), var(--kb-white-bottom))}.key.is-white.is-dim{opacity:.42}.key.is-black.is-dim:before{content:"";z-index:1;border-radius:inherit;background:var(--bg);opacity:.45;pointer-events:none;position:absolute;inset:0}:root:not([data-theme=dark]) .key.is-black.is-dim:before{opacity:.3}.key-dot{z-index:1;background:var(--bad);pointer-events:none;border-radius:50%;width:7px;height:7px;margin-left:-3.5px;position:absolute;bottom:30px;left:50%}.key.is-black .key-dot{background:var(--bad-text);bottom:12px}.key.is-white.is-selected{box-shadow:inset 0 0 0 2px var(--text), inset 0 -6px 0 var(--kb-white-lip)}.key.is-black.is-selected{box-shadow:inset 0 0 0 2px var(--heat), 0 3px 4px #00000073}@container app (width<=640px){.key-answer{letter-spacing:-.02em;font-size:15px}}.keybed{--fallboard-h:22px;--rail-h:12px;margin-top:calc(var(--fallboard-h) + var(--keybed-gap,0px));padding-bottom:var(--rail-h);background:var(--lacquer) bottom / 100% var(--rail-h) no-repeat;position:relative}.keybed:before{content:"";left:0;right:0;top:calc(-1 * var(--fallboard-h));height:var(--fallboard-h);background:var(--lacquer);box-shadow:inset 0 1px 0 var(--lacquer-line);position:absolute}.keybed:after{content:"";left:10%;right:10%;top:calc(-1 * var(--fallboard-h) + 7px);background:linear-gradient(90deg, transparent, var(--lacquer-sheen) 35%, var(--lacquer-sheen) 65%, transparent);opacity:.8;filter:blur(1.5px);pointer-events:none;border-radius:3px;height:3px;position:absolute}.keybed-keys{height:100%;position:relative;box-shadow:0 -1px #0009}.keybed .key.is-white:first-child{border-left:0}.keybed.is-compact{--fallboard-h:18px;--rail-h:10px}.keybed.is-compact:after{top:calc(-1 * var(--fallboard-h) + 6px)}.keybed.is-thin{--fallboard-h:8px;--rail-h:6px}.keybed.is-thin:after{display:none}.practice{--staff-foot:52px;isolation:isolate;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);grid-template-rows:auto minmax(0,1fr) auto;display:grid;position:absolute;inset:0}.pr-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:72px;padding:0 14px;display:grid}.pr-top-left{align-items:center;gap:8px;min-width:0;display:flex}.pr-level{letter-spacing:.02em;color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.pr-count{position:relative}.pr-count-text{align-items:baseline;gap:5px;font-size:20px;line-height:1;display:flex}.pr-count-now{color:var(--text);font-weight:600}.pr-count-of{color:var(--text-3);font-weight:500}.pr-meter{background:var(--fill-2);border-radius:2px;width:120px;height:3px;position:absolute;top:calc(100% + 9px);left:50%;overflow:hidden;transform:translate(-50%)}.pr-meter-fill{height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--accent);transition:width var(--dur-3) var(--ease-out)}.pr-top-right{justify-self:end;align-items:center;gap:4px;min-width:0;display:flex}.pr-hint{white-space:nowrap;flex:none}.pr-hint[aria-pressed=true]{color:var(--accent-text);background:0 0}.pr-hint[aria-pressed=true]:hover{background:var(--fill-1)}.pr-stage{min-height:0;padding:0 24px;position:relative}.pr-feedback{height:var(--staff-foot);letter-spacing:.02em;color:var(--text);justify-content:center;align-items:center;font-size:26px;font-weight:600;display:flex}.pr-answer{animation:fade-up var(--dur-2) var(--ease-out) both}@keyframes fade-up{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.pr-dock{pointer-events:none;justify-content:flex-end;align-items:center;gap:16px;display:flex;position:absolute;bottom:10px;left:14px;right:14px}.pr-dock>*{pointer-events:auto}.pr-input-note{color:var(--text-3);font-size:13px}.pr-trial{border-radius:var(--radius-pill);height:28px;color:var(--text-2);background:var(--fill-1);white-space:nowrap;transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);align-items:center;gap:6px;margin-right:auto;padding:0 12px 0 10px;font-size:13px;font-weight:500;display:inline-flex}.pr-trial:hover{color:var(--text);background:var(--fill-2)}.pr-trial svg{color:var(--text-3)}.pr-pager{gap:2px;display:flex}.pr-pager .icon-button:disabled{opacity:.3;cursor:default}.pr-pager .icon-button:disabled:hover{background:0 0}.pr-keys{width:100%;height:clamp(150px,23cqh,230px)}.status-pill{border-radius:var(--radius-pill);max-width:100%;height:34px;color:var(--text-2);transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);align-items:center;gap:9px;padding:0 12px;font-size:14px;font-weight:500;display:inline-flex}.status-pill:hover{background:var(--fill-1);color:var(--text)}.status-pill.is-dot-only{justify-content:center;width:34px;padding:0}.status-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.status-dot{background:var(--good);border-radius:50%;flex:none;width:8px;height:8px}.status-pill.is-disconnected .status-dot,.status-pill.is-unsupported .status-dot,.status-pill.is-denied .status-dot{box-shadow:inset 0 0 0 1.5px var(--text-3);background:0 0}.status-pill.is-pending .status-dot{background:var(--accent);animation:dot-breathe 1.4s var(--ease-in-out) infinite}@keyframes dot-breathe{50%{opacity:.35}}@container app (width<=640px){.practice{--staff-foot:50px}.pr-top{height:60px;padding:0 6px 0 4px}.pr-level{display:none}.pr-count-text{font-size:18px}.pr-meter{width:84px;top:calc(100% + 7px)}.status-pill{max-width:132px;padding:0 10px;font-size:13px}.pr-hint{padding:0 10px 0 8px}html[lang=en] .pr-hint{padding:0 9px}html[lang=en] .pr-hint-text{display:none}.pr-stage{padding:0 12px}.pr-feedback{font-size:21px}.pr-input-note{display:none}.pr-dock{bottom:4px;right:6px}.pr-keys{height:clamp(150px,21cqh,190px)}.pr-keys.keybed{--fallboard-h:18px;--rail-h:10px}.pr-keys.keybed:after{top:-12px}.key-legend{display:none}}@container app (height<=500px){.practice{--staff-foot:0px}.pr-stage .staff-foot{width:24cqw;top:50%;left:auto;right:4px;transform:translateY(-50%)}.pr-stage .pr-feedback{text-align:right;justify-content:flex-end;height:auto}.pr-stage{padding-inline:150px}.pr-stage .staff-foot{width:124px;right:-136px}.pr-input-note{display:none}.pr-top{height:42px}.pr-count-text{font-size:16px}.pr-meter{display:none}.pr-feedback{font-size:17px}.pr-dock{bottom:2px}.pr-keys{height:88px}.pr-keys.keybed{--fallboard-h:0px;--rail-h:5px;--keybed-gap:6px}.pr-keys.keybed:after,.key-legend{display:none}}.summary-main{text-align:center;flex-direction:column;align-items:center;width:min(100%,860px);min-height:100%;margin:0 auto;padding:56px 24px 36px;display:flex}.summary-eyebrow{margin:0 0 10px}.summary-title{letter-spacing:.02em;margin:0;font-size:34px;font-weight:650}.summary-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;margin:44px 0 40px;display:grid}.stat{flex-direction:column;align-items:center;gap:6px;display:flex}.stat-value{letter-spacing:-.01em;font-size:56px;font-weight:600;line-height:1}.stat-value small{color:var(--text-2);letter-spacing:0;margin-left:4px;font-size:20px;font-weight:500}.stat-label{color:var(--text-2);font-size:14px;font-weight:500}.stat-delta{min-height:18px;color:var(--text-3);font-size:13px}.stat-delta.is-good{color:var(--good-text)}.stat-delta.is-bad{color:var(--bad-text)}.summary-h2{letter-spacing:.08em;color:var(--text-3);margin:0 0 14px;font-size:13px;font-weight:600}.summary-slow{border-top:1px solid var(--hairline);width:100%;padding-top:28px}.slow-list{justify-content:center;gap:28px;margin:0;padding:0;list-style:none;display:flex}.slow-item{flex-direction:column;align-items:center;width:150px;display:flex}.mini-note{width:150px;height:104px}.slow-name{align-items:baseline;gap:8px;margin:2px 0 0;display:flex}.slow-pitch{font-size:17px;font-weight:600}.slow-ms{color:var(--text-2);font-size:14px}.slow-tag{color:var(--bad-text);margin:4px 0 0;font-size:12px;font-weight:500}.summary-progress{flex-direction:column;align-items:center;gap:6px;margin-top:34px;display:flex}.summary-progress-row{color:var(--text-2);align-items:center;gap:14px;font-size:15px;display:flex}.summary-progress .meter{width:160px}.summary-gain{color:var(--good-text);margin:0;font-size:13px}.summary-unlock{border-radius:var(--radius-pill);color:var(--accent-text);background:var(--accent-fill);animation:fade-up var(--dur-3) var(--ease-out) .2s both, unlock-glow .6s var(--ease-out) .42s both;align-items:center;gap:10px;margin-top:24px;padding:10px 18px;font-size:15px;display:inline-flex}@keyframes unlock-glow{0%{box-shadow:0 0 #0000}45%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent)}to{box-shadow:0 0 #0000}}.summary-tip span{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}.summary-unlock strong{font-weight:600}.summary-tip{max-width:560px;color:var(--text-2);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin-top:22px;font-size:14px;display:flex}.summary-trial{max-width:620px;color:var(--text-2);background:var(--fill-1);animation:fade-up var(--dur-3) var(--ease-out) .2s both;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin-top:22px;padding:10px 10px 10px 18px;font-size:14px;display:flex}.summary-trial svg{vertical-align:-3px;color:var(--text-3);margin-right:8px}.summary-trial p{text-wrap:balance;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin:0;display:flex}.summary-trial strong{color:var(--text);font-weight:600}.summary-trial .button.is-plain{height:32px;padding:0 10px;font-size:14px}.summary-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:auto;padding-top:36px;display:flex}.summary-actions .button.is-primary.is-large,.summary-actions .button.is-quiet.is-large{min-width:180px}.summary-actions .summary-home{color:var(--text-2);font-weight:500}.summary-key-hint{color:var(--text-2);opacity:0;transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);flex-basis:100%;justify-content:center;align-items:center;gap:7px;margin:2px 0 0;font-size:15px;display:flex;transform:translateY(3px)}.summary-key-hint.is-armed{opacity:1;transform:none}.summary-fullscreen{top:calc(18px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));z-index:1;position:absolute}.summary-tip .button.is-plain{height:32px;padding:0 10px;font-size:14px}.summary-missing{height:100%;color:var(--text-2);place-items:center;gap:16px;display:grid}@container app (height<=820px) and (width>=641px){.summary-main{padding-top:34px}.summary-stats{margin:28px 0 26px}.stat-value{font-size:48px}.summary-slow{padding-top:20px}.summary-progress{margin-top:22px}.summary-actions{padding-top:24px}}@container app (width<=640px){.summary-main{padding:40px 18px 24px}.summary-title{font-size:28px}.summary-stats{gap:8px;margin:32px 0 30px}.stat-value{font-size:40px}.stat-value small{margin-left:2px;font-size:15px}.stat-label{font-size:13px}.stat-delta{font-size:12px;line-height:1.35}.slow-list{gap:6px}.slow-item,.mini-note{width:108px}.mini-note{height:92px}.summary-actions{width:100%}.summary-actions .button.is-large{flex:140px;min-width:0}.summary-fullscreen{top:calc(12px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right))}}@container app (height<=500px){.summary-main{grid-template:"head slow""stats slow""progress slow""unlock tip"1fr"actions actions"/minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:28px;width:100%;min-height:100%;padding:18px 24px 12px;display:grid}.summary-head{grid-area:head}.summary-title{font-size:22px}.summary-eyebrow{margin-bottom:4px}.summary-stats{grid-area:stats;gap:8px;margin:14px 0 6px}.stat-value{font-size:34px}.stat-value small{font-size:14px}.stat-label{font-size:12px}.stat-delta{font-size:11px}.summary-slow{border-top:0;grid-area:slow;align-self:center;padding-top:0}.slow-list{gap:4px}.slow-item,.mini-note{width:104px}.mini-note{height:80px}.summary-progress{grid-area:progress;margin-top:10px}.summary-unlock{grid-area:unlock;justify-self:center;margin-top:10px}.summary-tip{grid-area:tip;margin-top:6px;font-size:13px}.summary-actions{grid-area:actions;padding-top:10px}.summary-actions .button.is-large{height:44px;font-size:16px}.summary-trial{border-radius:12px;flex-wrap:nowrap;justify-content:space-between;margin-top:8px;padding:5px 6px 5px 14px;font-size:13px}.summary-trial p{justify-content:flex-start}.summary-trial strong+span{display:none}.summary-trial .button.is-plain{flex:none;font-size:13px}.summary-key-hint{flex-basis:auto;margin:0 0 0 6px;font-size:14px}.summary-fullscreen{top:calc(3px + env(safe-area-inset-top))}}.route-column{width:min(100%,380px)}.route{margin:8px 0 0;padding:0;list-style:none}.route-stop{grid-template-columns:40px minmax(0,1fr);min-height:104px;scroll-margin-top:80px;display:grid;position:relative}.route-stop:before{content:"";background:repeating-linear-gradient(180deg, var(--hairline) 0 5px, transparent 5px 10px);border-radius:1px;width:2px;position:absolute;top:34px;bottom:-14px;left:19px}.route-stop:last-child:before{display:none}.route-stop.is-walked:before{background:var(--accent);opacity:.55}.route-node{z-index:1;width:22px;height:22px;color:var(--text-3);background:var(--bg);box-shadow:inset 0 0 0 2px var(--text-3);border-radius:50%;place-items:center;margin:12px 0 0 9px;display:grid;position:relative}.route-stop.is-done .route-node{color:var(--on-accent);background:var(--accent);box-shadow:none}.route-stop.is-current:not(.is-done) .route-node{background:var(--bg);width:26px;height:26px;box-shadow:inset 0 0 0 2px var(--accent);margin:10px 0 0 7px}.route-stop.is-current:not(.is-done) .route-node:after{content:"";background:var(--accent);width:10px;height:10px;animation:dot-breathe 2.4s var(--ease-in-out) infinite;border-radius:50%}.route-stop.is-current.is-done .route-node{box-shadow:0 0 0 4px var(--accent-fill)}.route-stop.is-locked .route-node{box-shadow:inset 0 0 0 1.5px var(--hairline);color:var(--text-3)}.route-body{border-radius:var(--radius-2);text-align:left;transition:background-color var(--dur-1) var(--ease-out);justify-items:start;gap:3px;margin:0 0 14px;padding:10px 14px 14px;display:grid}.route-body:not(:disabled):hover{background:var(--fill-1)}.route-body:disabled{cursor:default}.route-num{letter-spacing:.08em;color:var(--text-3);font-size:12px;font-weight:600}.route-current{color:var(--accent-text)}.route-name{letter-spacing:.01em;font-size:19px;font-weight:600}.route-desc{color:var(--text-2);font-size:14px}.route-stop.is-locked .route-name,.route-stop.is-locked .route-desc{color:var(--text-3)}.route-progress{color:var(--text-3);align-items:center;gap:10px;margin-top:8px;font-size:13px;display:flex}.route-progress .meter{width:120px;height:3px}.map{flex-direction:column;display:flex}.map-main{flex-direction:column;align-items:center;width:100%;padding:8px 0 40px;display:flex}.map-hint{color:var(--text-2);text-align:center;margin:4px 0 18px;font-size:14px}.map-keys{width:100%;height:clamp(150px,26cqh,220px)}.map-keys+.map-keys{--keybed-gap:18px}.map-keys{margin-right:auto}.map-legend{color:var(--text-3);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 28px;margin-top:20px;padding:0 16px;font-size:13px;display:flex}.map-legend-none{align-items:center;gap:8px;display:inline-flex}.map-legend-none:before{content:"";background:repeating-linear-gradient(135deg, transparent 0 3px, var(--fill-2) 3px 4px), linear-gradient(180deg, var(--kb-white-top), var(--kb-white-bottom));width:14px;height:14px;box-shadow:inset 0 0 0 1px var(--kb-white-edge);border-radius:3px}.map-legend-weak{align-items:center;gap:8px;display:inline-flex}.map-legend-weak:before{content:"";background:var(--bad);border-radius:50%;width:7px;height:7px}.map-legend-scale{align-items:center;gap:8px;display:inline-flex}.map-legend-bar{background:linear-gradient(90deg, color-mix(in srgb, var(--heat) 18%, var(--kb-white-top)), color-mix(in srgb, var(--heat) 82%, var(--kb-white-top)));width:120px;height:8px;box-shadow:inset 0 0 0 1px var(--kb-white-edge);border-radius:4px}.map-detail{width:min(100%,760px);margin-top:30px;padding:0 24px}.map-weak{text-align:center}.map-weak-list{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.map-weak-item{border-radius:var(--radius-pill);background:var(--fill-1);height:40px;transition:background-color var(--dur-1) var(--ease-out);align-items:baseline;gap:8px;padding:0 16px;display:inline-flex}.map-weak-item:hover{background:var(--fill-2)}.map-weak-item.is-on{box-shadow:inset 0 0 0 1.5px var(--text-3)}.map-detail .map-weak{margin-top:30px}.map-weak-name{font-size:16px;font-weight:600;line-height:40px}.map-weak-clef{color:var(--text-3);font-size:12px}.key-detail-rows{gap:8px;display:grid}.key-detail-name{text-align:center;margin:0;font-size:22px;font-weight:600}.key-detail-empty{color:var(--text-3);text-align:center;margin:6px 0 0;font-size:14px}.item-row{animation:fade-up var(--dur-2) var(--ease-out) both;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:18px;padding:6px 0;display:grid}.item-row+.item-row{border-top:1px solid var(--hairline)}.item-row-staff{height:96px}.item-row-name{flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;font-size:22px;font-weight:600;display:flex}.item-row-name span{white-space:nowrap;color:var(--text-3);font-size:13px;font-weight:500}.item-row-meta{color:var(--text-3);margin:0;font-size:14px}.item-row-stats{grid-template-columns:84px 84px 96px auto;align-items:baseline;gap:6px 12px;margin:0;display:grid}.item-row-stats div{gap:2px;display:grid}.item-row-stats dt{color:var(--text-3);font-size:12px}.item-row-stats dd{margin:0;font-size:18px;font-weight:600}.item-row-stats dd.item-row-count{color:var(--text-3);font-size:13px;font-weight:500}.map-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:0 24px 64px;display:flex}.map-empty-keys{border-radius:4px;width:min(100%,360px);height:96px;margin-bottom:30px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000);mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000)}.map-empty-title{margin:0;font-size:22px;font-weight:600}.map-empty-body{max-width:340px;color:var(--text-2);margin:10px 0 26px;font-size:15px}@container app (width<=640px){.map-keys{height:150px}.map-detail{padding:0 18px}.item-row{grid-template-columns:104px minmax(0,1fr);gap:12px}.item-row-staff{height:88px}.item-row-stats{grid-template-columns:64px 64px minmax(0,1fr);gap:6px 10px}.item-row-stats>div:last-child{grid-column:1/-1}.item-row-limit{flex-basis:100%;order:3;margin-left:0}}@container app (height<=500px){.map-keys{height:120px}.map-hint{margin-bottom:10px}}.map-filter{margin:2px 0 10px}.item-row-limit{color:var(--text-2);margin-left:auto;font-size:13px;font-style:normal;font-weight:500}.item-row-limit.is-mastered{color:var(--good-text)}.home{grid-template-rows:auto minmax(0,1fr) auto;display:grid}.home-top{justify-content:space-between;align-items:center;height:76px;padding:0 16px 0 28px;display:flex}.wordmark{letter-spacing:.32em;color:var(--text);font-size:16px;font-weight:600}html[lang=en] .wordmark{letter-spacing:.16em}.home-top-right{align-items:center;gap:4px;min-width:0;display:flex}.home-main{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:8px 24px 12px;display:flex}.home-level-num{letter-spacing:.08em;color:var(--accent-text);margin:0 0 10px;font-size:13px;font-weight:600}.home-level-name{letter-spacing:.02em;margin:0;font-size:40px;font-weight:650;line-height:1.15}.home-level-desc{color:var(--text-2);margin:10px 0 0;font-size:16px}.home-staff{width:min(100%,880px);height:clamp(150px,27cqh,230px);margin:18px 0 6px}.home-staff.is-grand{margin-top:30px}.home-progress{align-items:center;gap:14px;margin-bottom:30px;display:flex}.home-progress .meter{width:140px}.home-progress-text{color:var(--text-2);font-size:14px}.home-cta{flex-direction:column;align-items:center;gap:16px;display:flex}.home-cta .button.is-large{min-width:220px}.home-note{max-width:560px;color:var(--text-2);flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 6px;margin:22px 0 0;font-size:14px;display:flex}.home-note.is-quiet{color:var(--text-3)}.home-status{max-width:560px;color:var(--text-2);flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin:24px 0 0;font-size:14px;display:flex}.home-status-text{text-wrap:balance;min-width:0}.home-status-text svg{vertical-align:-3px;color:var(--text-3);margin-right:8px}.home-status .button.is-plain{height:32px;padding:0 10px;font-size:14px}.home-note.is-warning{color:var(--bad-text)}.home-note .button.is-plain{height:32px;padding:0 10px;font-size:14px}.home-links{justify-content:center;gap:8px;padding:0 16px 26px;display:flex}@container app (width<=640px){.home-top{height:64px;padding:0 8px 0 20px}.home-top .status-pill{max-width:170px}.home-main{padding:0 18px 8px}.home-level-name{font-size:32px}.home-level-desc{font-size:15px}.home-staff{height:clamp(130px,24cqh,190px);margin-top:14px}.home-progress{margin-bottom:26px}.home-cta .button.is-large{min-width:min(100%,280px)}.home-links{padding-bottom:18px}}@container app (height<=500px){.home-top{height:52px}.home-main{padding-top:0}.home-level-num{margin-bottom:4px}.home-level-name{font-size:26px}.home-level-desc{display:none}.home-staff{height:110px;margin:6px 0 2px}.home-progress{margin-bottom:14px}.home-cta{flex-direction:row;gap:18px}.home-cta .button.is-large{min-width:180px;height:46px;font-size:16px}.home-note{margin-top:10px}.home-links{padding-bottom:10px}}.connect{gap:18px;display:grid}.connect-head{align-items:center;gap:14px;display:flex}.connect-badge{width:44px;height:44px;color:var(--text-2);background:var(--fill-1);border-radius:50%;flex:none;place-items:center;display:grid}.connect-badge.is-good{color:var(--good-text);background:var(--good-fill)}.connect-title{letter-spacing:.01em;margin:0;font-size:24px;font-weight:650;line-height:1.25}.connect-title.is-center,.connect-lead.is-center{text-align:center}.connect-head .eyebrow{margin:0 0 2px}.connect-lead{color:var(--text-2);margin:0;font-size:15px}.connect-intro{gap:18px;min-width:0;display:grid}.connect-status{color:var(--text);align-items:flex-start;gap:10px;margin:-6px 0 0;font-size:15px;display:flex}.connect-pulse{background:var(--accent);width:8px;height:8px;animation:dot-breathe 1.4s var(--ease-in-out) infinite;border-radius:50%;flex:none;margin-top:calc(.725em - 4px)}.connect-figure{width:100%;height:auto;font-family:var(--font-sans);margin:2px 0 0;display:block;overflow:hidden}.connect-figure .cf-body{fill:var(--fill-1);stroke:var(--text-3);stroke-width:1.25px}.connect-figure .cf-seam{stroke:var(--hairline);stroke-width:1px}.connect-figure .cf-panel{fill:var(--bg);stroke:var(--hairline);stroke-width:1px}.connect-figure .cf-port{fill:none;stroke:var(--text-3);stroke-width:1.25px}.connect-figure .cf-port-core{fill:var(--text-3)}.connect-figure .cf-label{letter-spacing:.06em;text-anchor:middle;fill:var(--text-3);font-size:14px;font-weight:600}.connect-figure .cf-label.is-accent{fill:var(--accent-text)}.connect-figure .cf-halo{fill:var(--accent-fill)}.connect-figure .cf-usb-port{fill:var(--accent-fill);stroke:var(--accent);stroke-width:1.5px;stroke-linejoin:round}.connect-figure .cf-usb-core{fill:var(--accent);opacity:.55}.connect-figure .cf-arrow{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 3}.connect-figure .cf-plug,.connect-figure .cf-laptop{fill:var(--surface);stroke:var(--text-2);stroke-width:1.25px;stroke-linejoin:round}.connect-figure .cf-plug-tip,.connect-figure .cf-plug-c{fill:var(--fill-2);stroke:var(--text-2);stroke-width:1.25px;stroke-linejoin:round}.connect-figure .cf-cable{fill:none;stroke:var(--text-2);stroke-width:3px;stroke-linecap:round}.connect-figure .cf-laptop-screen{fill:var(--fill-1);stroke:var(--hairline);stroke-width:1px}.connect-steps{gap:16px;margin:2px 0 0;padding:0;list-style:none;display:grid}.connect-steps li{grid-template-columns:28px 1fr;align-items:start;gap:12px;display:grid}.connect-steps.is-compact{gap:10px}.connect-steps.is-compact li{align-items:center}.connect-step-num{width:26px;height:26px;color:var(--accent-text);box-shadow:inset 0 0 0 1.25px var(--accent);border-radius:50%;place-items:center;font-size:13px;font-weight:600;display:grid}.connect-step-title{margin:2px 0;font-size:16px;font-weight:600}.connect-steps.is-compact .connect-step-title{margin:0;font-weight:500}.connect-step-body{color:var(--text-2);margin:0;font-size:14px}.connect-meanwhile{border-top:1px solid var(--hairline);color:var(--text-3);margin:4px 0 0;padding-top:16px;font-size:14px}.connect-keys{border-radius:4px;height:74px;margin:2px 0 4px;overflow:hidden}.connect-keys .key.is-white{box-shadow:inset 0 -3px 0 var(--kb-white-lip);border-radius:0 0 2px 2px}.connect-keys .key.is-black{border-radius:0 0 2px 2px}.connect-keys .key-label{letter-spacing:0;font-size:10px;bottom:6px}.connect-actions{justify-content:flex-end;gap:12px;margin-top:4px;display:flex}.connect-actions.is-center{flex-wrap:wrap;justify-content:center}.device-list{border:0;gap:2px;margin:0;padding:0;display:grid}.device-list legend{margin-bottom:6px;padding:0}.device-row{border-radius:var(--radius-1);cursor:pointer;align-items:center;gap:10px;min-height:40px;padding:0 10px;font-size:15px;display:flex}.device-row:hover{background:var(--fill-1)}.device-row input{accent-color:var(--accent);margin:0}.device-dot{background:var(--good);border-radius:50%;width:7px;height:7px;margin-left:auto}.connect.is-notice{text-align:center;justify-items:center}.notice-text,.notice-side{justify-items:center;gap:16px;width:100%;min-width:0;display:grid}.connect.is-notice .connect-steps{text-align:left;justify-self:center}.connect-last{text-align:center;min-height:40px;color:var(--text);font-variant-numeric:tabular-nums;margin:0 0 -6px;font-size:32px;font-weight:600;line-height:40px}.connect-last.is-empty{color:var(--text-3);font-size:15px;font-weight:500}@container app (height<=500px){.connect{gap:12px}.connect-title{font-size:19px}.connect-intro{gap:12px}.connect[data-state=waiting]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:28px}.connect[data-state=waiting] .connect-intro{grid-row:span 2}.connect[data-state=waiting] .connect-steps{gap:10px}.connect[data-state=waiting] .connect-meanwhile{margin-top:0;padding-top:10px}.connect.is-notice{text-align:left;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:28px}.connect.is-notice .notice-text,.connect.is-notice .notice-side{justify-items:start;gap:12px}.connect.is-notice .connect-steps{justify-self:stretch}.connect.is-notice .connect-actions{justify-content:flex-start}.connect.is-notice .notice-art{width:48px;height:48px;margin:0}.connect.is-notice .notice-art svg{width:22px;height:22px}.connect-keys{height:56px}.connect-last{min-height:30px;font-size:24px;line-height:30px}}.notice-art{width:72px;height:72px;color:var(--accent-text);background:var(--accent-fill);border-radius:50%;place-items:center;margin:6px auto 0;display:grid}@container app (width<=640px){.connect-title{font-size:21px}}.connect-lead,.connect-status,.connect-step-body{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}.browser-figure{width:100%;max-width:420px;height:auto;font-family:var(--font-sans);margin:0 auto;display:block;overflow:visible}.browser-figure .bf-bar{fill:var(--fill-1);stroke:var(--hairline);stroke-width:1px}.browser-figure .bf-halo{fill:var(--accent-fill)}.browser-figure .bf-icon{fill:none;stroke:var(--text-2);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.browser-figure .bf-icon circle{fill:var(--surface)}.browser-figure .bf-icon.is-accent{stroke:var(--accent-text)}.browser-figure .bf-url{fill:var(--text-2);font-size:15px}.browser-figure .bf-pop{fill:var(--bg);stroke:var(--hairline);stroke-width:1px}.browser-figure .bf-row-label{fill:var(--text);font-size:16px;font-weight:600}.browser-figure .bf-row-state{fill:var(--text-3);font-size:13px}.browser-figure .bf-row-dim{fill:var(--text-3);font-size:14px}.browser-figure .bf-switch{fill:var(--accent)}.browser-figure .bf-knob{fill:#fff}.browser-figure .bf-sep{stroke:var(--hairline);stroke-width:1px}.browser-figure .bf-chevron{fill:none;stroke:var(--text-3);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.browser-figure .bf-badge{fill:var(--accent)}.browser-figure .bf-badge-num{fill:var(--on-accent);text-anchor:middle;font-size:13px;font-weight:700}.browser-figure .bf-button{fill:none;stroke:var(--hairline);stroke-width:1.25px}.browser-figure .bf-button.is-accent{fill:var(--accent);stroke:none}.browser-figure .bf-button-text{fill:var(--text-2);text-anchor:middle;font-size:14px;font-weight:600}.browser-figure .bf-button-text.is-accent{fill:var(--on-accent)}.connect-tip{max-width:400px;color:var(--text-3);text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;margin:0;font-size:13px}@container app (height<=500px){.browser-figure{max-width:250px;margin:0}}.settings-section{margin-top:26px}.settings-h2{letter-spacing:.08em;color:var(--text-3);margin:0 0 8px;padding:0 2px;font-size:13px;font-weight:600}.settings-desc{display:none}.settings-group{border-top:1px solid var(--hairline)}.settings-row{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;gap:24px;min-height:58px;padding:12px 2px;display:flex}.settings-row.is-disabled .settings-label{color:var(--text-3)}.settings-row-text{min-width:0}.settings-label{font-size:16px;font-weight:500}.settings-body{max-width:440px;color:var(--text-3);margin:3px 0 0;font-size:13px}.settings-row-control{flex:none;align-items:center;display:flex}.settings-text{color:var(--text-2);border-bottom:1px solid var(--hairline);margin:0;padding:14px 2px;font-size:14px}.settings-text.is-warning{color:var(--bad-text)}.settings-credits{color:var(--text-3);border-bottom:1px solid var(--hairline);margin:0;padding:12px 2px 14px;font-size:13px;line-height:1.7;list-style:none}.settings-devices{border-bottom:1px solid var(--hairline);gap:2px;padding:8px 0;display:grid}.button.is-destructive{color:var(--bad-text)}.settings-row .button.is-plain{margin-right:-14px}.keymap{border-bottom:1px solid var(--hairline);gap:10px;padding:14px 2px;display:grid}.keymap-row{align-items:center;gap:16px;display:flex}.keymap-label{width:140px;color:var(--text-2);flex:none;font-size:14px}.keymap-keys{flex-wrap:wrap;gap:6px;display:flex}.keymap kbd{min-width:26px;height:26px;font:600 13px/1 var(--font-sans);color:var(--text);background:var(--fill-1);box-shadow:inset 0 0 0 1px var(--hairline), 0 1px 0 var(--hairline);border-radius:6px;place-items:center;padding:0 6px;display:inline-grid}.slider{appearance:none;cursor:pointer;background:0 0;width:180px;height:28px;margin:0}.slider:disabled{opacity:.4;cursor:default}.slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) calc(var(--v) * 100%), var(--fill-2) calc(var(--v) * 100%));border-radius:2px;height:4px}.slider::-moz-range-track{background:var(--fill-2);border-radius:2px;height:4px}.slider::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:22px;height:22px;margin-top:-9px;box-shadow:0 1px 3px #0000004d,0 0 0 .5px #00000014}.slider::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:22px;height:22px;box-shadow:0 1px 3px #0000004d}.account-id{align-items:center;gap:14px;min-width:0;display:flex}.account-avatar{width:40px;height:40px;color:var(--accent-text);background:var(--accent-fill);border-radius:50%;flex:none;place-items:center;font-size:17px;font-weight:600;display:grid}.account-sync{align-items:center;gap:7px;display:flex}.account-sync-dot{background:var(--text-3);border-radius:50%;flex:none;width:7px;height:7px}.account-sync[data-state=idle] .account-sync-dot{background:var(--good)}.account-sync:is([data-state=syncing],[data-state=pending]) .account-sync-dot{background:var(--accent);animation:dot-breathe 1.4s var(--ease-in-out) infinite}.account-sync[data-state=error] .account-sync-dot{background:var(--bad)}.account-blocked{border-bottom:1px solid var(--hairline);gap:6px;padding:16px 2px 14px;display:grid}.account-blocked-title{color:var(--bad-text);margin:0;font-size:16px;font-weight:600}.account-blocked-body{max-width:560px;color:var(--text-2);margin:0;font-size:14px}.account-blocked-body strong{color:var(--text);font-weight:500}.account-blocked-actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.account-blocked-actions .button.is-plain{margin-right:0}.confirm{text-align:center;gap:10px;display:grid}.confirm-title{margin:6px 0 0;font-size:19px;font-weight:600}.confirm-body{color:var(--text-2);margin:0;font-size:14px}.confirm-note{color:var(--text-3);margin-top:8px;display:block}.confirm-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}@container app (width<=640px){.settings-row{gap:14px}.settings-row.is-stacked{flex-direction:column;align-items:stretch;gap:10px}.settings-row.is-stacked .segmented{width:100%}.keymap-row{flex-direction:column;align-items:flex-start;gap:6px}.slider{width:130px}}@container app (width>=641px){.settings-column{width:min(100%,1008px);padding-top:4px}.settings-section{border-top:1px solid var(--hairline);grid-template-columns:minmax(170px,240px) minmax(0,1fr);align-items:start;column-gap:clamp(32px,5cqw,64px);margin-top:0;padding:18px 0;display:grid}.settings-section:first-child{border-top:0;padding-top:8px}.settings-head{padding:16px 0 0 2px}.settings-h2{letter-spacing:.01em;color:var(--text);margin:0;padding:0;font-size:16px;font-weight:600}.settings-desc{color:var(--text-3);text-wrap:pretty;margin:6px 0 0;font-size:13px;line-height:1.55;display:block}.settings-group{border-top:0}.settings-group>:last-child{border-bottom:0}}@container app (width>=641px) and (height<=500px){.settings-section{grid-template-columns:168px minmax(0,1fr);column-gap:32px;padding:12px 0}.settings-desc{font-size:12px}}.stats{flex-direction:column;display:flex}.stats-main{flex-direction:column;flex:1 0 auto;width:min(100%,1040px);margin:0 auto;padding:calc(max(0px,100cqh - 860px)/2) 32px 18px;display:flex}.stats-band{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;padding:0 0 26px;display:grid}.stats-figure{text-align:center;flex-direction:column;align-items:center;gap:9px;min-width:0;display:flex}.stats-figure-label{letter-spacing:.08em;color:var(--text-3);font-size:13px;font-weight:600}.stats-figure-value{letter-spacing:-.015em;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 12px;font-size:60px;font-weight:600;line-height:1.05;display:flex}.stats-part{white-space:nowrap}.stats-part small{letter-spacing:0;color:var(--text-2);margin-left:5px;font-size:21px;font-weight:500}.stats-figure.is-minor .stats-figure-value{align-content:flex-end;min-height:63px;font-size:44px}.stats-figure.is-minor .stats-part small{font-size:18px}.stats-figure-note{color:var(--text-2);font-size:14px}@property --ring-p{syntax:"<number>";inherits:true;initial-value:0}.ring-figure{flex-direction:column;align-items:center;gap:12px;margin:0;display:flex}.ring{--ring-size:148px;--ring-w:15px;--ring-p:var(--p);width:var(--ring-size);height:var(--ring-size);animation:ring-sweep .8s var(--ease-out) 80ms backwards;position:relative}@keyframes ring-sweep{0%{--ring-p:0}}.ring-track,.ring-rotor,.ring-arc{border-radius:50%;position:absolute;inset:0}.ring-track,.ring-rotor{-webkit-mask-image:radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - .5px), #000 calc(100% - var(--ring-w)), #000 calc(100% - .5px), transparent 100%);-webkit-mask-image:radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - .5px), #000 calc(100% - var(--ring-w)), #000 calc(100% - .5px), transparent 100%);mask-image:radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - .5px), #000 calc(100% - var(--ring-w)), #000 calc(100% - .5px), transparent 100%)}.ring-track{background:var(--ring-track)}.ring-arc{background:conic-gradient(var(--ring-start) 0turn, var(--ring-end) calc(var(--ring-p) * 1turn), transparent 0)}.ring-cap{top:0;left:calc(50% - var(--ring-w) / 2);width:var(--ring-w);transform-origin:50% 100%;height:50%;position:absolute}.ring-cap:before{content:"";width:var(--ring-w);height:var(--ring-w);border-radius:50%;position:absolute;top:0;left:0}.ring-cap.is-start:before{background:var(--ring-start);clip-path:inset(0 calc(50% - .5px) 0 0)}.ring-cap.is-end{transform:rotate(calc(var(--ring-p) * 1turn))}.ring-cap.is-end:before{background:var(--ring-end);clip-path:inset(-8px -8px -8px calc(50% - .5px))}.ring.is-done .ring-cap.is-start{display:none}.ring.is-done .ring-cap.is-end:before{box-shadow:3px 0 5px -1px var(--ring-shadow)}.ring.is-empty .ring-rotor{display:none}.ring-center{flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex;position:absolute;inset:0}.ring-value{letter-spacing:-.01em;font-size:40px;font-weight:600;line-height:1}.ring-unit{color:var(--text-2);font-size:13px;font-weight:500}.ring-caption{color:var(--text-2);text-align:center;font-size:14px}.ring.is-done+.ring-caption{color:var(--accent-text)}.stats-chart{border-top:1px solid var(--hairline);flex:none;padding-top:20px}.stats-chart-head{justify-content:space-between;align-items:flex-start;gap:8px 16px;margin-bottom:12px;display:flex}.stats-chart-title{letter-spacing:.01em;margin:0;font-size:17px;font-weight:600}.stats-chart-sub{color:var(--text-2);margin:3px 0 0;font-size:13px}.chart{--chart-gutter:46px}.chart.no-goal{--chart-gutter:0px}.chart-plot{height:clamp(172px,100cqh - 440px,420px);margin-right:var(--chart-gutter);border-radius:4px;position:relative}.chart-plot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.chart-area{touch-action:pan-y;cursor:default;position:absolute;inset:26px 0 0}.chart-area:after{content:"";background:var(--chart-axis);height:1px;position:absolute;bottom:0;left:0;right:0}.chart-goal{right:0;bottom:calc(var(--h) * 100%);border-top:1px dashed var(--chart-goal);height:0;position:absolute;left:0}.chart-goal-label{color:var(--text-3);white-space:nowrap;flex-direction:column;gap:3px;margin-left:8px;font-size:12px;line-height:1.1;display:flex;position:absolute;bottom:0;left:100%;transform:translateY(50%)}.chart-bars{grid-template-columns:repeat(var(--n), minmax(0, 1fr));display:grid;position:absolute;inset:0}.chart-slot{justify-content:center;align-items:flex-end;min-width:0;display:flex;position:relative}.chart-bar{width:var(--bar-w);height:max(4px, calc(var(--h) * 100%));background:linear-gradient(180deg, var(--bar-top), var(--bar-bottom));transform-origin:50% 100%;transition:opacity var(--dur-1) var(--ease-out);animation:bar-in .46s var(--ease-out) calc(var(--i) * .2s) backwards;border-radius:4px 4px 0 0}@keyframes bar-in{0%{transform:scaleY(0)}}.chart-slot:not(.is-today) .chart-bar{opacity:var(--bar-rest)}.chart-slot.is-zero .chart-bar{background:var(--chart-axis);border-radius:1.5px 1.5px 0 0;height:3px;animation:none}.chart-slot.is-before .chart-bar{display:none}.chart-area.has-selection .chart-slot:not(.is-selected) .chart-bar{opacity:.4}.chart-area .chart-slot.is-selected .chart-bar{opacity:1}.chart-label{bottom:calc(var(--h) * 100% + 6px);color:var(--text-2);white-space:nowrap;animation:fade-up var(--dur-3) var(--ease-out) .32s backwards;font-size:12px;font-weight:500;line-height:1;position:absolute;left:50%;transform:translate(-50%)}.chart-label.is-start{left:0;transform:none}.chart-label.is-end{left:auto;right:0;transform:none}.chart-area.has-selection .chart-label{opacity:0}.chart-first{text-align:center;color:var(--text-3);pointer-events:none;margin:0;font-size:15px;position:absolute;top:34%;left:0;right:0}.chart-cross{background:var(--chart-goal);pointer-events:none;width:1px;position:absolute;top:0;bottom:0}.chart-bubble{z-index:2;white-space:nowrap;color:var(--text);background:var(--surface);box-shadow:var(--shadow-tip), inset 0 0 0 1px var(--surface-line);pointer-events:none;border-radius:10px;flex-direction:column;align-items:center;gap:1px;padding:6px 11px 7px;display:flex;position:absolute;top:-26px;transform:translate(-50%)}.chart-bubble strong{font-size:15px;font-weight:600;line-height:1.25}.chart-bubble span{color:var(--text-2);font-size:12px;line-height:1.3}.chart-axis{height:20px;margin:8px var(--chart-gutter) 0 0;color:var(--text-3);flex:none;font-size:12px;position:relative}.chart-axis span{white-space:nowrap;position:absolute;top:0;transform:translate(-50%)}.chart-axis .is-last{color:var(--text);font-weight:600}.chart-foot{min-height:28px;margin-top:12px;position:relative}.chart-note{color:var(--text-3);margin:0;padding:5px 0;font-size:13px;line-height:1.35;position:absolute;top:0;right:0}.chart-data{scroll-margin-top:60px}.chart-data summary{border-radius:var(--radius-pill);color:var(--text-2);cursor:pointer;transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);align-items:center;gap:4px;margin-left:-9px;padding:5px 10px 5px 4px;font-size:13px;font-weight:500;line-height:1.35;list-style:none;display:inline-flex}.chart-data summary::-webkit-details-marker{display:none}@media (hover:hover){.chart-data summary:hover{color:var(--text);background:var(--fill-1)}}.chart-data summary svg{transition:transform var(--dur-1) var(--ease-out)}.chart-data[open] summary svg{transform:rotate(90deg)}.chart-data table{border-collapse:collapse;width:100%;margin-top:8px;font-size:14px}.chart-data th{text-align:right;color:var(--text-3);border-bottom:1px solid var(--hairline);padding:6px 0;font-size:12px;font-weight:500}.chart-data td{text-align:right;color:var(--text-2);border-bottom:1px solid var(--hairline);padding:8px 0}.chart-data th:first-child,.chart-data td:first-child{text-align:left}.chart-data td:first-child{color:var(--text)}.stats-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:0 24px 64px;display:flex}.stats-empty-bars{align-items:flex-end;gap:7px;height:96px;margin-bottom:30px;display:flex;-webkit-mask-image:linear-gradient(90deg,#0000,#000 22% 78%,#0000);mask-image:linear-gradient(90deg,#0000,#000 22% 78%,#0000)}.stats-empty-bars span{width:16px;height:calc(var(--h) * 100%);background:linear-gradient(180deg, var(--bar-top), var(--bar-bottom));opacity:.32;border-radius:4px 4px 0 0}.stats-empty-title{margin:0;font-size:22px;font-weight:600}.stats-empty-body{max-width:380px;color:var(--text-2);text-wrap:balance;margin:10px 0 26px;font-size:15px}@container app (width<=640px){.stats-main{padding:0 18px 22px}.stats-band{grid-template-columns:1fr 1fr;justify-items:center;gap:22px 12px;padding-bottom:22px}.stats-band>.stats-figure:first-child{grid-column:1/-1}.stats-figure-value{font-size:50px}.stats-part small{font-size:18px}.stats-figure.is-minor .stats-figure-value{min-height:0;font-size:40px}.stats-figure.is-minor .stats-part small{font-size:16px}.ring{--ring-size:118px;--ring-w:13px}.ring-value{font-size:32px}.ring-unit{font-size:12px}.ring-caption{font-size:13px}.stats-chart-head{flex-direction:column;align-items:stretch}.stats-chart-head .segmented{width:100%}.chart{--chart-gutter:38px}.chart-plot{height:clamp(190px,100cqh - 612px,320px)}.chart-goal-label{margin-left:7px;font-size:11px}.chart-note{font-size:12px;position:static}}@container app (height<=500px){.stats .topbar{height:44px}.stats-main{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start;column-gap:28px;width:100%;padding:0 24px 12px;display:grid}.stats-band{grid-template-columns:1fr 1fr;align-self:start;justify-items:center;gap:12px 10px;margin-top:28px;padding:0;position:sticky;top:52px}.stats-band>.stats-figure:first-child{grid-column:1/-1}.stats-figure{gap:4px}.stats-figure-value{font-size:38px}.stats-part small{font-size:15px}.stats-figure.is-minor .stats-figure-value{min-height:0;font-size:30px}.stats-figure.is-minor .stats-part small{font-size:14px}.stats-figure-note{font-size:12px}.ring-figure{gap:4px}.ring{--ring-size:92px;--ring-w:10px}.ring-value{font-size:25px}.ring-unit,.ring-caption{font-size:11px}.stats-chart{border-top:0;padding-top:0}.stats-chart-head{margin-bottom:8px}.stats-chart-title{font-size:15px}.stats-chart-sub{margin-top:1px;font-size:12px}.chart{--chart-gutter:38px}.chart-plot{height:205px}.chart-goal-label{margin-left:7px;font-size:11px}.chart-foot{margin-top:4px}.chart-note{padding-top:7px;font-size:11px}}@media (prefers-reduced-motion:reduce){.ring,.chart-bar,.chart-label{animation:none}}.guide{gap:22px;display:grid}.guide-art{min-width:0;height:188px;animation:guide-in var(--dur-3) var(--ease-out) both;place-items:center;display:grid}.guide-art>.connect-figure,.guide-art>.browser-figure{width:auto;max-width:100%;height:100%;margin:0}.guide-art>.guide-icon{margin:0}.guide-text{min-width:0;animation:guide-in var(--dur-3) var(--ease-out) 40ms both;align-content:start;gap:10px;display:grid}.guide-step{margin:0}.guide-title{letter-spacing:.01em;margin:0;font-size:24px;font-weight:650;line-height:1.25}.guide-lead{color:var(--text-2);text-wrap:pretty;margin:0;font-size:15px;line-height:1.6}.guide-points{gap:9px;margin:2px 0 0;padding:0;list-style:none;display:grid}.guide-points li{color:var(--text-2);text-wrap:pretty;padding-left:18px;font-size:15px;line-height:1.55;position:relative}.guide-points li:before{content:"";background:var(--accent);border-radius:50%;width:5px;height:5px;position:absolute;top:calc(.775em - 2.5px);left:3px}.guide-state{min-height:34px;color:var(--text);align-items:center;gap:8px;margin:4px 0 0;font-size:15px;font-weight:500;display:flex}.guide-state .connect-pulse{margin-top:0}.guide-state.is-good{color:var(--good-text)}.guide-state.is-warning{color:var(--bad-text);font-weight:400}.guide-allow{color:var(--accent-text);background:var(--accent-fill)}.guide-allow:hover{background:color-mix(in srgb, var(--accent-fill) 70%, var(--accent) 12%)}.guide-foot{border-top:1px solid var(--hairline);justify-content:space-between;align-items:center;gap:16px;padding-top:18px;display:flex}.guide-dots{gap:6px;display:flex}.guide-dots span{background:var(--fill-2);width:6px;height:6px;transition:width var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);border-radius:3px}.guide-dots span.is-on{background:var(--accent);width:18px}.guide-actions{align-items:center;gap:8px;display:flex}.guide-skip.button.is-plain{color:var(--text-3)}.guide-demo{align-content:center;justify-items:center;gap:12px;width:min(100%,340px);height:100%;display:grid}.guide-demo-staff{width:100%;height:100px}.guide-demo-keys{border-radius:4px;width:100%;height:62px;overflow:hidden}.guide-demo-keys.is-map{height:104px}.guide-demo-keys .key.is-white{border-radius:0 0 3px 3px}.guide-demo-keys .key-label{letter-spacing:0;font-size:10px;bottom:5px}.guide-demo-meter{color:var(--text-2);align-items:center;gap:12px;font-size:13px;display:flex}.guide-demo-meter .meter{width:120px}@keyframes guide-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.guide-art,.guide-text{animation:none}}@container app (width<=640px){.guide{gap:18px}.guide-art{height:156px}.guide-title{font-size:21px}.guide-lead,.guide-points li{font-size:14.5px}.guide-foot{gap:10px}.guide-actions .button{height:42px;padding:0 18px}.guide-actions .guide-skip.button{padding:0 10px}}@container app (height<=500px){.guide{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);align-items:center;gap:12px 28px}.guide-art{height:200px}.guide-text{gap:6px}.guide-title{font-size:19px}.guide-lead,.guide-points li{font-size:13.5px;line-height:1.5}.guide-points{gap:5px}.guide-foot{grid-column:1/-1;padding-top:12px}}.cover{z-index:40;cursor:default;position:absolute;inset:0;overflow:hidden}.cover-line{height:calc(var(--staff-line-w) * 1px);background:var(--staff-line);transform-origin:0;will-change:transform, opacity;position:absolute;top:0;left:0;-webkit-mask-image:linear-gradient(90deg,#000 0% 86%,#0000 100%);mask-image:linear-gradient(90deg,#000 0% 86%,#0000 100%)}.cover-glyphs{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.cover-glyphs text{fill:var(--ink);transform-box:fill-box;transform-origin:50%;font-family:Bravura}.cover-word{letter-spacing:.32em;white-space:nowrap;color:var(--text);transform-origin:0 0;will-change:transform, opacity;font-weight:600;line-height:1;position:absolute;top:0;left:0}html[lang=en] .cover-word{letter-spacing:.16em}.app-frame[data-cover=playing] :is(.home-top,.home-level,.home-staff,.home-progress,.home-cta,.home-note,.home-status,.home-links){opacity:0}.app-frame[data-cover=revealing] .home-level{animation:cover-rise .46s var(--ease-out) 40ms both}.app-frame[data-cover=revealing] .home-top{animation:cover-fade .36s var(--ease-out) .12s both}.app-frame[data-cover=revealing] .home-top .wordmark{animation:.14s linear .5s both cover-fade}.app-frame[data-cover=revealing] .home-staff{animation:.2s linear .47s both cover-fade}.app-frame[data-cover=revealing] .home-progress{animation:cover-rise .46s var(--ease-out) .16s both}.app-frame[data-cover=revealing] .home-cta{animation:cover-rise .46s var(--ease-out) .22s both}.app-frame[data-cover=revealing] :is(.home-note,.home-status){animation:cover-rise .46s var(--ease-out) .28s both}.app-frame[data-cover=revealing] .home-links{animation:cover-fade .42s var(--ease-out) .32s both}@keyframes cover-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes cover-fade{0%{opacity:0}to{opacity:1}}