:root{color-scheme:light;--bg:#fff;--panel:#fff;--raised:#f5f5f7;--border:#e5e5e7;--text:#1d1d1f;--muted:#6e6e73;--accent:#0071e3;--accent-soft:#eef6ff;--accent-hover:#0077ed;--on-accent:#fff;--hover:#ededf0;--red:#c43b35;--error-bg:#fff0ee;--target:#929297;--action-key-bg:#e5e9fa;--action-key-ink:#546790;--action-ink:#596781;--button-ink:#465574;--button-bg:var(--action-key-bg);--button-hover:color-mix(in srgb,var(--button-bg) 92%,var(--button-ink));--button-pressed:color-mix(in srgb,var(--button-bg) 84%,var(--button-ink));--secondary-bg:color-mix(in srgb,var(--action-key-bg) 40%,var(--bg));--secondary-hover:color-mix(in srgb,var(--action-key-bg) 65%,var(--bg));--font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-family:var(--font);font-size:16px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0}
#mobile-placeholder{display:none}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button,a{touch-action:manipulation}
[hidden]{display:none!important}
.topbar{height:88px;max-width:1440px;margin:auto;padding:0 48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.brand{color:var(--text);text-decoration:none;font-size:20px;font-weight:650;letter-spacing:-.65px}
.topbar nav{display:flex;gap:4px;border-radius:24px;padding:4px;background:var(--raised)}
.nav-button{background:transparent;color:var(--muted);padding:10px 20px;border-radius:20px;font-size:14px;font-weight:500}
.nav-button.active{background:var(--panel);color:var(--text);box-shadow:0 1px 5px #0000000d}
.nav-button:not(:disabled):hover{background:var(--secondary-hover);color:var(--text)}
.nav-button:not(:disabled):active{background:var(--button-bg)}
.nav-button #library-count{font-size:12px;color:var(--muted);margin-left:6px}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.header-brand{display:flex;align-items:center;gap:20px}

/* Ordinary actions borrow the shortcut key material, not the saturated status accent. */
.primary,.secondary{border-radius:11px;padding:10px 18px;font-size:14px;line-height:20px;font-weight:500;display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:40px;white-space:nowrap;transition:background .15s,transform .15s}
.primary{background:var(--button-bg);color:var(--button-ink)}
.primary:not(:disabled):hover{background:var(--button-hover)}
.primary:not(:disabled):active{background:var(--button-pressed);transform:translateY(1px)}
.secondary{background:var(--secondary-bg);color:var(--action-ink)}
.secondary:not(:disabled):hover{background:var(--secondary-hover)}
.secondary:not(:disabled):active{background:var(--button-bg);transform:translateY(1px)}
.view-settings-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;background:transparent;color:var(--muted);font-size:24px;line-height:1;flex-shrink:0}
.view-settings-button:hover{background:var(--raised);color:var(--text)}
#view-settings{position:fixed;inset:72px 32px auto auto;width:248px;height:auto;max-height:calc(100dvh - 96px);margin:0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 12px 36px #00000020}
#view-settings:popover-open{display:grid;align-content:start;gap:14px}
#view-settings .toggle{color:var(--text);font-size:14px}
#reset-progress{color:var(--red);justify-self:start}
main{max-width:1160px;padding:30px 48px 0;margin:auto}
.page-heading{margin:30px 0 48px}
h1{font-size:40px;line-height:1.15;font-weight:600;letter-spacing:-1.5px;margin:0}
h1 span{color:var(--muted)}
.page-heading p{font-size:16px;color:var(--muted);margin:16px 0 0;line-height:1.5}
.eyebrow{font-size:13px;color:var(--muted);margin:0 0 12px}
.training{max-width:880px;margin:auto}
.roadmap-heading{color:var(--muted);font-size:13px}
.route-count{font-size:13px;margin-left:8px;color:var(--text);font-variant-numeric:tabular-nums}
.roadmap{display:flex;list-style:none;padding:0;margin:12px 0 28px}
.roadmap li{position:relative;flex:1;min-width:0}
.roadmap li:last-child{flex:0 0 28px}
.roadmap li:not(:last-child):before{content:"";position:absolute;left:14px;right:-14px;top:13px;height:2px;background:var(--border)}
.roadmap li.connected:before{background:var(--accent)}
.roadmap-point{position:relative;display:grid;place-items:center;width:28px;height:28px;background:transparent;padding:0;border-radius:50%}
.roadmap-dot{width:9px;height:9px;background:var(--bg);border:2px solid var(--border);border-radius:50%}
.roadmap .current .roadmap-dot{border-color:var(--accent)}
.roadmap .finished .roadmap-dot{background:var(--accent);border-color:var(--accent)}
.route-tooltip{position:absolute;left:14px;top:calc(100% + 8px);transform:translateX(-50%);width:320px;max-width:75vw;background:var(--panel);color:var(--text);border-radius:14px;padding:20px 22px;box-shadow:0 10px 40px #00000012,0 1px 5px #00000008;font-size:12px;line-height:1.6;opacity:0;visibility:hidden;transition:opacity .15s;z-index:4;pointer-events:none}
.route-tooltip:before{content:"";position:absolute;bottom:100%;left:calc(50% - 5px);border:5px solid transparent;border-bottom-color:var(--panel)}
.route-tooltip>span,.route-tooltip>strong{display:block}
.route-tooltip>strong{font-size:20px;line-height:1.35;font-weight:600;letter-spacing:-.3px;margin-bottom:7px}
.route-example{font-size:16px;line-height:1.3;padding-top:15px;margin-top:15px;border-top:1px solid var(--border);color:var(--text)}
.route-translation,.route-example+span{padding-top:20px;color:var(--muted);font-size:12px;line-height:1.65}
.route-check{color:var(--accent);margin-top:9px}
.roadmap li:first-child .route-tooltip{left:0;transform:none}
.roadmap li:last-child .route-tooltip{left:auto;right:0;transform:none}
.roadmap li:first-child .route-tooltip:before{left:9px}
.roadmap li:last-child .route-tooltip:before{left:auto;right:9px}
.roadmap li:hover .route-tooltip,.roadmap li:focus-within .route-tooltip{opacity:1;visibility:visible}
.practice-panel{min-width:0}
.practice-panel:not(.complete){display:flex;flex-direction:column;padding-bottom:48px}
.exercise{padding:26px 0 0;min-height:120px;position:relative}
.typing-surface{position:relative;min-height:58px;cursor:text}
.target{position:relative;z-index:1;text-align:center;font:400 32px/1.5 var(--font);letter-spacing:-.5px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;color:var(--target)}
.target .typed{color:var(--text)}
.target .wrong{color:var(--red);background:var(--error-bg);border-radius:3px}
.target .caret{position:relative}
.target .caret:before{content:"";position:absolute;left:-2px;top:1px;bottom:0;width:2px;background:var(--accent)}
.focus-phrase{position:relative;text-decoration:underline;text-decoration-color:#c5c5cb;text-decoration-thickness:1px;text-underline-offset:7px;pointer-events:auto;cursor:help}
.phrase-tooltip{position:absolute;left:0;bottom:calc(100% + 16px);width:max-content;max-width:min(340px,75vw);padding:12px 16px;background:var(--panel);color:var(--text);font:14px/1.5 var(--font);letter-spacing:0;white-space:normal;border-radius:12px;box-shadow:0 8px 30px #00000012,0 1px 4px #00000008;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s;z-index:3}
.phrase-tooltip:after{content:"";position:absolute;top:100%;left:20px;border:5px solid transparent;border-top-color:var(--panel)}
.focus-phrase:hover .phrase-tooltip,.focus-phrase:focus .phrase-tooltip,.typing-surface.phrase-tooltip-open .phrase-tooltip{opacity:1;visibility:visible}
.roadmap li.tooltip-dismissed .route-tooltip,.focus-phrase.tooltip-dismissed .phrase-tooltip{opacity:0;visibility:hidden;transition:none}
.typing-input{position:absolute;inset:0;width:100%;height:100%;resize:none;opacity:0;border:0;outline:none!important;caret-color:transparent;padding:0;font:400 32px/1.5 var(--font);overflow:hidden}
.typing-input:disabled{pointer-events:none}
.typing-surface:has(.typing-input:disabled) .caret:before{display:none}
.translation{text-align:center;font-size:15px;color:var(--muted);line-height:1.6;margin:18px 0 0;padding:0 50px}
.exercise-bottom{display:flex;flex-direction:column;align-items:center;gap:20px;margin:48px 0 0}
.exercise-toolbar,.rating-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.exercise-toolbar{min-height:30px}
.rating-actions{flex-wrap:nowrap}
.training-frequency{display:inline-flex;align-items:center;gap:6px;color:var(--action-ink);font:500 14px/20px var(--font);font-variant-numeric:tabular-nums}
.training-frequency svg{width:18px;height:18px}
.key-action{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--action-ink);font-size:14px;font-weight:500;line-height:20px;white-space:nowrap}
.key-action kbd{display:grid;place-items:center;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:8px;background:var(--action-key-bg);color:var(--action-key-ink);font:700 12px var(--font);transition:background .15s,color .15s}
.key-action .wide-key{width:45px}
.key-action .enter-key{font-size:14px;font-weight:850}
.key-action:not(:disabled):hover{color:var(--text)}
.key-action:focus-visible{outline:none}
.key-action:focus-visible kbd{background:color-mix(in srgb,var(--action-key-bg) 75%,var(--action-key-ink));color:var(--text)}
.key-action:focus-visible>span{text-decoration:underline;text-underline-offset:4px}
.key-action:not(:disabled):hover kbd{background:color-mix(in srgb,var(--action-key-bg) 80%,var(--action-key-ink));color:var(--text)}
.key-action:not(:disabled):active kbd{transform:translateY(1px)}
.key-action[aria-pressed=true]{color:var(--text)}
.key-action[aria-pressed=true] kbd{color:var(--text);box-shadow:inset 0 0 0 1px var(--action-key-ink)}
.phrase-context{display:flex;justify-content:center;margin:0}
.context-actions{position:relative;display:flex;gap:10px;width:max-content}
.context-actions a{text-decoration:none;min-height:32px;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:400}
.context-actions a span{color:inherit}
.context-intro:before,.context-intro:after{content:"";position:absolute;inset:-9px -13px;border:3px solid #e8b73e;border-radius:48% 52% 47% 53% / 43% 46% 54% 57%;transform:rotate(-2deg);pointer-events:none}
.context-intro:after{inset:-6px -16px -10px -10px;transform:rotate(1deg);border-width:2px;opacity:.45}
.context-tip{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);width:320px;padding:20px 22px;background:var(--panel);color:var(--text);border-radius:14px;box-shadow:0 10px 40px #0000001a,0 1px 5px #0000000d;font-size:13px;line-height:1.6;z-index:4}
.context-tip:before{content:"";position:absolute;bottom:100%;left:calc(50% - 6px);border:6px solid transparent;border-bottom-color:var(--panel)}
.context-tip strong{display:block;font-size:16px;font-weight:600;padding-right:18px}
.context-tip p{margin:10px 0 8px;color:var(--muted)}
.context-tip span{font-size:12px;color:var(--muted)}
.context-tip button{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1}
.context-tip button:hover{background:var(--raised);color:var(--text)}
.toolbar-intro{position:relative}
.toolbar-intro:before,.toolbar-intro:after{content:"";position:absolute;inset:-10px -15px;border:3px solid #e8b73e;border-radius:48% 52% 47% 53% / 43% 46% 54% 57%;transform:rotate(-2deg);pointer-events:none}
.toolbar-intro:after{inset:-7px -18px -11px -12px;transform:rotate(1deg);border-width:2px;opacity:.45}
.toolbar-tip{top:calc(100% + 24px)}
.toggle{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);cursor:pointer;position:relative;min-height:28px}
.toggle input{position:absolute;left:0;width:30px;height:18px;opacity:0;margin:0}
.switch{width:30px;height:18px;border-radius:12px;background:#b6b6bd;position:relative;pointer-events:none;flex-shrink:0}
.switch:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:white;border-radius:50%;box-shadow:0 1px 3px #00000020;transition:transform .15s}
.toggle input:checked+.switch{background:var(--accent)}
.toggle input:checked+.switch:after{transform:translateX(12px)}
.toggle input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:3px}
.text-button{padding:8px 0;background:none;color:var(--action-ink);font-size:14px;white-space:nowrap}
.text-button:not(:disabled):hover{text-decoration:underline;text-underline-offset:4px}
.text-button:not(:disabled):active{color:var(--text)}
kbd{font:12px var(--font);border:1px solid var(--border);border-radius:5px;padding:2px 6px;margin-left:5px;color:var(--muted);white-space:nowrap}
.keyboard-guide{max-width:480px;margin:0 auto}
.keyboard-status{margin:0 auto 14px;text-align:center;max-width:620px}
.finger-instruction{display:flex;justify-content:center;align-items:center;gap:10px;font-size:13px;color:var(--muted);min-height:28px;margin:0}
.finger-instruction:empty{display:none}
.finger-instruction kbd{font-size:13px;min-width:28px;text-align:center;color:var(--accent);background:var(--accent-soft);border:0;padding:5px 9px;margin:0;border-radius:6px}
.keyboard{width:100%;height:auto;display:block;overflow:visible}
[data-finger="0"]{--finger-bg:#f9e4ea;--finger-ink:#aa5c77}
[data-finger="1"]{--finger-bg:#ece5fa;--finger-ink:#8562a8}
[data-finger="2"]{--finger-bg:#e1edfc;--finger-ink:#507aa5}
[data-finger="3"]{--finger-bg:#fbe9d8;--finger-ink:#a3774b}
[data-finger="4"]{--finger-bg:#f7f0d2;--finger-ink:#947e34}
[data-finger="5"]{--finger-bg:#e8f0db;--finger-ink:#6d8950}
[data-finger="6"]{--finger-bg:#ddf1ec;--finger-ink:#568d7f}
[data-finger="7"]{--finger-bg:#e5e9fa;--finger-ink:#6d7fac}
[data-finger="8"]{--finger-bg:#eaeaec;--finger-ink:#76767c}
.keyboard-key rect{fill:var(--finger-bg,#f5f5f7);stroke:var(--finger-bg,#e5e5e7);stroke-width:1}
.keyboard-key text{font:12px var(--font);text-anchor:middle;fill:var(--finger-ink,#76767c)}
.keyboard-key.next-key rect{stroke:var(--finger-ink,var(--accent));stroke-width:3}
.keyboard-key.next-key text{font-weight:700;fill:#1d1d1f}
.finger-instruction kbd[data-finger]{color:var(--finger-ink);background:var(--finger-bg)}
.home-mark{stroke:var(--finger-ink);stroke-width:2;stroke-linecap:round}
.hand-outline{fill:none;stroke:#b8b8bf;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.finger-guides path{fill:none;stroke:var(--finger-bg);stroke-opacity:.8;stroke-width:13;stroke-linecap:round;pointer-events:none}
.finger-guides .active-finger{stroke:var(--finger-ink);stroke-opacity:.65;stroke-width:15}
.home-instruction{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 0}
.home-instruction>span:not(.home-divider){font-size:11px;letter-spacing:1px;color:var(--text)}
.home-divider{margin:0 4px}
.stats-strip{display:flex;justify-content:center;gap:48px;margin:28px 0 0;padding:0 0 8px}
.stat{display:flex;align-items:baseline;gap:10px}
.stat-value{font-size:20px;letter-spacing:-.5px;white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums}
.stat-value small{font-size:12px;color:var(--muted);letter-spacing:0}
.stat-label{color:var(--muted);font-size:12px}
footer{display:flex;justify-content:center;margin-top:32px;padding:16px 0 24px;color:var(--muted);font-size:12px}
footer>span:first-child{display:flex;align-items:center;gap:7px}
.recall-prompt{text-align:center;font-size:34px;line-height:1.4;letter-spacing:-.7px;margin:0 0 20px;color:var(--text)}
.recall-surface{position:relative;min-height:48px;cursor:text}
.recall-answer,.recall-flash{position:absolute;inset:0;margin:0;text-align:center;white-space:pre-wrap;font:500 28px/48px var(--mono);letter-spacing:3px;color:var(--target)}
.recall-answer .recall-typed{color:var(--text);font-weight:650}
.recall-answer .recall-caret{position:relative}
.recall-answer .recall-caret:before{content:"";position:absolute;left:-3px;top:6px;bottom:6px;width:2px;background:var(--accent);animation:recall-caret 1s step-end infinite}
.recall-flash{z-index:1;background:var(--bg);color:var(--text);opacity:0;pointer-events:none}
.recall-flash.visible{animation:recall-hint 1s ease-in forwards}
.recall-input{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:text}
.recall-input:focus{outline:0}
@keyframes recall-hint{0%,70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}
@keyframes recall-caret{50%{opacity:0}}
.feedback{color:var(--accent);font-size:14px;line-height:1.5;margin-top:8px}.feedback:empty{display:none}
.error-text{color:var(--red);font-size:14px;line-height:1.6}.error-text:empty{display:none}
.notice{color:#775421;background:#fff5e4;border-radius:12px;padding:18px;margin-bottom:20px;line-height:1.6;font-size:14px}
.complete{padding:48px 20px;text-align:center}
.complete-mark{display:inline-grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:28px;border-radius:50%;width:60px;height:60px;margin-bottom:24px}
.complete h2{font-size:34px;font-weight:600;letter-spacing:-1px}
.complete p{color:var(--muted);line-height:1.7;font-size:16px}
.complete .primary{margin-top:16px}
.daily-complete{padding-top:140px}
.streak-card{--streak:#ff9a1f;position:relative;width:min(420px,100%);min-height:300px;margin:0 auto 48px;padding:64px 44px 30px;color:var(--text)}
.streak-card-surface{position:absolute;inset:0;border:1px solid var(--border);border-radius:25px;background:var(--panel);box-shadow:0 18px 60px #0000000d,0 1px 3px #0000000a}
.streak-fire{position:absolute;top:-205px;left:50%;width:310px;height:310px;transform:translateX(-50%);pointer-events:none}
.streak-fire{z-index:2}
.streak-fire svg{display:block;width:100%!important;height:100%!important}
.streak-content{position:relative;z-index:3}
.streak-count{display:block;font-size:72px;line-height:.88;font-weight:750;letter-spacing:-3.5px;font-variant-numeric:tabular-nums}
.streak-count-changing{position:relative;height:.88em;overflow:hidden}
.streak-count-changing span{display:block}
.streak-count-old{animation:streak-count-out .28s ease-in .08s forwards}
.streak-count-new{position:absolute;inset:0;animation:streak-count-in .36s cubic-bezier(.2,.8,.25,1) .08s both}
.complete .streak-title{margin:7px 0 0;color:var(--text);font-size:14px;line-height:18px;font-weight:650}
.complete .streak-note{margin:18px 0 0;color:var(--muted);font-size:13px;line-height:18px}
.streak-week{display:flex;justify-content:center;gap:16px;margin:24px 0 0;padding:0;list-style:none}
.streak-week li{display:grid;justify-items:center;gap:7px;width:26px;font-size:12px;font-weight:650;line-height:18px}
.streak-day{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:var(--streak);color:#fff;font-size:12px;font-style:normal;font-weight:750}
.streak-day.missed{border:2px dashed color-mix(in srgb,var(--streak) 55%,transparent);background:transparent}
.streak-day.future{background:var(--raised)}
.just-completed .streak-day.today{animation:streak-day-in .42s ease-out .08s both}
.just-completed .streak-day.today span{animation:streak-check-in .18s cubic-bezier(.2,1.7,.4,1) .34s both}
.continue-lesson{margin-top:24px;padding:8px;background:transparent;color:var(--accent);font-size:20px;font-weight:400;letter-spacing:-.2px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness:1px;text-underline-offset:5px}
.continue-lesson:hover{text-decoration-color:var(--accent)}
[data-theme="dark"] .streak-card-surface{box-shadow:0 18px 60px #00000038,0 1px 3px #00000022}
@keyframes streak-day-in{from{opacity:0}to{opacity:1}}
@keyframes streak-check-in{from{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}
@keyframes streak-count-out{to{opacity:0;transform:translateY(-70%)}}
@keyframes streak-count-in{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:translateY(0)}}
.tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{font-size:12px;padding:5px 9px;background:var(--raised);border-radius:6px;color:var(--muted)}
.tag.level{color:var(--accent);background:var(--accent-soft)}
.phrase-topline{display:flex;justify-content:space-between;align-items:start;gap:12px}
.phrase-name{font-size:25px;letter-spacing:-.6px;font-weight:600;margin:0 0 10px}
.phrase-meaning{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
.catalog-topic{--catalog-heading-height:4.5rem;padding-bottom:32px}
.catalog-heading,.catalog-row{display:grid;grid-template-columns:100px 112px 28px minmax(0,1fr);gap:24px}
/* One sticky block per group: column labels and topic move together, without stacked offsets. */
.catalog-heading{position:sticky;top:0;z-index:1;min-height:var(--catalog-heading-height);align-items:center;padding:16px;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.catalog-heading>span{font-size:12px;line-height:20px;color:var(--muted)}
.catalog-heading>span:nth-child(2){text-align:center}
.catalog-heading>h2{grid-column:3/-1;font-size:20px;line-height:1.3;font-weight:600;margin:0}
.catalog-list{list-style:none;padding:0;margin:0}
.catalog-row{align-items:start;padding:24px 16px;border-bottom:1px solid var(--border);color:var(--text)}
/* Native focus scrolling must leave controls and summaries below the sticky context. */
.catalog-row :is(input,button,summary){scroll-margin-top:calc(var(--catalog-heading-height) + 24px);scroll-margin-bottom:24px}
.catalog-row.is-excluded{background:var(--raised);color:var(--muted)}
.catalog-participation{display:flex;align-items:center;gap:8px;font-size:12px;min-height:30px;cursor:pointer}
.catalog-participation input{width:18px;height:18px;margin:0;flex-shrink:0;accent-color:var(--accent)}
.catalog-frequency{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;text-align:center;gap:4px}
.catalog-frequency button{height:32px;padding:0;border-radius:8px;background:var(--action-key-bg);color:var(--action-key-ink);font-size:20px;line-height:1;transition:background .15s,transform .15s}
.catalog-frequency button:not(:disabled):hover{background:var(--button-hover);color:var(--button-ink)}
.catalog-frequency button:not(:disabled):active{background:var(--button-pressed);transform:translateY(1px)}
.catalog-frequency button:disabled{opacity:.4;background:var(--action-key-bg);color:var(--action-key-ink);cursor:not-allowed}
.catalog-frequency output{font-variant-numeric:tabular-nums;font-size:16px}
.catalog-type{width:28px;height:28px;color:inherit}
.catalog-expression{min-width:0;overflow-wrap:anywhere}
.catalog-expression h3{font-size:25px;line-height:1.25;font-weight:650;letter-spacing:-.5px;margin:0 0 8px}
.catalog-expression p{font-size:15px;line-height:1.5;margin:0;color:var(--muted)}
.catalog-expression details{margin-top:12px;font-size:13px;color:var(--muted)}
.catalog-expression summary{cursor:pointer;width:fit-content}
.catalog-expression details ul{list-style:none;padding:0;margin:16px 0 0}
.catalog-expression details li+li{margin-top:16px}
.catalog-expression details p[lang="en"]{color:inherit;font-size:16px;margin-bottom:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
dialog{background:var(--panel);color:var(--text);border:0;border-radius:24px;width:min(680px,calc(100% - 48px));max-height:90dvh;padding:36px;box-shadow:0 24px 100px #00000020}
dialog::backdrop{background:#18182033;backdrop-filter:blur(8px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between}
.dialog-heading h2{font-size:32px;line-height:1.2;letter-spacing:-1px;font-weight:600;margin:0}
.icon-button{font-size:24px;background:var(--raised);color:var(--muted);border-radius:50%;width:32px;height:32px;line-height:1}
.muted{color:var(--muted);font-size:16px;line-height:1.6}
form label{display:flex;flex-direction:column;font-size:14px;gap:8px;margin:22px 0 0;line-height:1.5}
form input,form select,form textarea{border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);padding:13px 16px;width:100%;font-size:16px;line-height:1.5}
form textarea{resize:vertical}
form textarea::placeholder{color:var(--muted)}
.field-note{font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}
.label-row label{margin:0;display:block}
.optional{color:var(--muted);font-size:13px}
.file-button{font-size:13px!important;cursor:pointer;color:var(--accent);position:relative}
.file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:28px}
form [data-setup-step]{min-width:0}
form details{margin-top:20px}
form summary{cursor:pointer;font-size:14px;color:var(--muted);line-height:1.6}
form .toggle{flex-direction:row;align-items:center}
form .toggle input{padding:0;width:30px}
#settings-title:focus{outline:none}
.level-choices{border:0;padding:0;margin:28px 0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.level-choices label{position:relative;margin:0;cursor:pointer}
.level-choices input{position:absolute;opacity:0;width:1px;height:1px;padding:0}
.level-choices label>span{display:flex;flex-direction:column;gap:6px;min-height:98px;padding:18px;border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 0 var(--border);transition:background .18s,border-color .18s,box-shadow .18s}
.level-choices strong{font-size:22px;font-weight:600;letter-spacing:-.5px}
.level-choices span>span{font-size:13px;color:var(--muted)}
.level-choices label:hover>span{background:var(--raised)}
.level-choices input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 2px 0 var(--accent);color:var(--accent)}
.level-choices input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
dialog.onboarding{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:160px 32px 64px;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
dialog.onboarding::backdrop{background:var(--bg);backdrop-filter:none}
.onboarding form{max-width:600px;margin:auto}
#onboarding-header{position:absolute;top:0;left:0;right:0;height:88px;padding:0 48px;display:flex;justify-content:space-between;align-items:center}
.setup-meter{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}
.setup-meter progress{appearance:none;width:160px;height:5px;border:0;border-radius:5px;overflow:hidden;background:var(--raised)}
.setup-meter progress::-webkit-progress-bar{background:var(--raised);border-radius:5px}
.setup-meter progress::-webkit-progress-value{background:var(--accent);border-radius:5px;transition:width .36s cubic-bezier(.2,.7,.2,1)}
.setup-meter progress::-moz-progress-bar{background:var(--accent);border-radius:5px}
.onboarding .dialog-heading{justify-content:center;text-align:center}
.onboarding .dialog-heading h2{font-size:40px;letter-spacing:-1.35px;line-height:1.2}
.onboarding #settings-description{text-align:center;max-width:520px;margin:18px auto 36px;font-size:17px}
.onboarding #settings-description:empty{display:none}
.onboarding .dialog-actions{justify-content:flex-end;align-items:center;margin-top:36px}
.onboarding .dialog-actions button{min-height:44px;padding-left:20px;padding-right:20px;font-size:15px}
.onboarding #setup-back{margin-right:auto;padding-left:0}
.onboarding #setup-next{min-width:160px}
.onboarding #setup-enter{margin-top:18px;text-align:center;font-size:13px}
.onboarding #setup-enter kbd{margin:0 3px}
.onboarding.welcome{padding-top:max(144px,calc((100dvh - 470px)/2))}
.welcome form{max-width:960px}
.welcome #setup-content{display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:64px;align-items:start}
.welcome #setup-content>:not(#welcome-art){grid-column:2}
.welcome .dialog-heading{justify-content:flex-start;text-align:left}
.welcome .dialog-heading h2{font-size:64px;letter-spacing:-2.5px}
.welcome .welcome-details{text-align:left;margin:0}
.welcome .welcome-copy{font-size:26px;line-height:1.35;letter-spacing:-.65px;margin:20px 0 14px;max-width:480px}
.welcome .muted{font-size:17px;line-height:1.6;margin:0;max-width:440px}
.welcome-language{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 20px;padding-top:24px;border-top:1px solid var(--border)}
#welcome-language-label{font-size:13px;color:var(--muted);max-width:180px;line-height:1.5}
#language-buttons{display:flex;flex-wrap:wrap;gap:8px}
#language-buttons button{gap:12px;white-space:nowrap}
.language-check{visibility:hidden}
[aria-pressed="true"] .language-check{visibility:visible}
.welcome .field-note{margin:0;line-height:1.5}
.welcome .dialog-actions{justify-content:flex-start;margin-top:28px}
.welcome #setup-enter{text-align:left;margin-top:14px}
.welcome #welcome-art{grid-column:1;grid-row:1 / span 6;width:100%;height:360px;margin:0;gap:18px}
.welcome .hello-key{width:136px;height:142px;font-size:86px;border-radius:30px}
.welcome .hello-key:last-child{padding-top:18px}
.welcome .key-dot{font-size:52px}
@media(max-width:1100px){.welcome form{max-width:840px}.welcome #setup-content{grid-template-columns:280px minmax(0,1fr);column-gap:48px}.welcome #welcome-art{height:300px;gap:12px}.welcome .hello-key{width:116px;height:122px;font-size:74px}.welcome .dialog-heading h2{font-size:56px}}
@media(max-width:760px){.welcome #setup-content{display:block}.welcome #welcome-art{height:180px;margin-bottom:24px}.welcome form{max-width:480px}.onboarding.welcome{padding-top:104px}.welcome-language{flex-wrap:wrap}}
#welcome-art{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;height:136px;margin:0 auto 36px;perspective:700px;user-select:none}
.hello-key{display:grid;place-items:center;position:relative;width:104px;height:108px;border:1px solid #d8deea;border-bottom:7px solid #bdc7d9;border-radius:25px;background:linear-gradient(145deg,#fff,#eef1f7);box-shadow:inset 0 2px 1px #fff,0 14px 24px -13px #273d6160;color:#346dde;font-size:66px;font-weight:600;letter-spacing:-5px;transform:rotate(-12deg);line-height:1;padding-bottom:7px}
.hello-key:last-child{transform:rotate(10deg) translateY(6px);background:linear-gradient(145deg,#4e9cff,#1871e3);border-color:#4b8eee;border-bottom-color:#1254b0;color:#fff;box-shadow:inset 0 2px 1px #8fbeff,0 16px 24px -12px #0958cc70;display:block;text-align:center;padding:12px 10px 0 0}
.key-dot{font-size:42px;letter-spacing:0}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:14px 22px;border-radius:14px;box-shadow:0 8px 40px #00000020;font-size:14px;z-index:5;max-width:90vw}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root[data-theme="dark"]{color-scheme:dark;--bg:#161617;--panel:#232325;--raised:#2b2b2e;--border:#3b3b3f;--text:#f5f5f7;--muted:#a1a1a6;--accent:#409cff;--accent-soft:#172c43;--accent-hover:#70b5ff;--on-accent:#081c32;--hover:#363639;--red:#ff9690;--error-bg:#462727;--target:#9b9ba1;--action-key-bg:#292d37;--action-key-ink:#9ba8c2;--action-ink:#a4aec3;--button-ink:#d3d9e8}
[data-theme="dark"] [data-finger]{--finger-bg:color-mix(in srgb,var(--finger-ink) 22%,var(--bg))}
[data-theme="dark"] .keyboard-key rect{fill:var(--finger-bg,var(--raised));stroke:var(--finger-bg,var(--border))}
[data-theme="dark"] .keyboard-key text{fill:color-mix(in srgb,var(--finger-ink,var(--muted)) 55%,var(--text))}
[data-theme="dark"] .keyboard-key.next-key rect{stroke:color-mix(in srgb,var(--finger-ink,var(--accent)) 55%,var(--text))}
[data-theme="dark"] .keyboard-key.next-key text{fill:var(--text)}
[data-theme="dark"] .finger-guides path{stroke:var(--finger-ink);stroke-opacity:.25}
[data-theme="dark"] .finger-guides .active-finger{stroke-opacity:.8}
[data-theme="dark"] .hand-outline{stroke:#64646c}
[data-theme="dark"] .finger-instruction kbd[data-finger]{color:color-mix(in srgb,var(--finger-ink) 55%,var(--text))}
[data-theme="dark"] .focus-phrase{text-decoration-color:#626269}
[data-theme="dark"] dialog::backdrop{background:#00000066}
@media(max-height:800px){.keyboard-status{margin:0 auto 12px}.translation{margin-top:10px}.typing-surface{min-height:48px}footer{padding-top:8px;padding-bottom:16px}.topbar{height:76px}main{padding-top:20px}.roadmap{margin-bottom:16px}.exercise{padding-top:10px;min-height:92px}.keyboard-guide{max-width:380px}.stats-strip{margin-top:20px}footer{margin-top:20px}dialog.onboarding{padding-top:116px}.onboarding.welcome{padding-top:144px}#welcome-art{height:108px;margin-bottom:24px}.hello-key{width:88px;height:92px;font-size:58px}.hello-key:last-child{padding-top:8px}.welcome .dialog-heading h2{font-size:48px}}
@media(max-width:1100px){.topbar{padding:0 28px;gap:16px}.header-actions{gap:14px}.nav-button{padding:10px 14px}main{padding-left:32px;padding-right:32px}.stats-strip{gap:28px}.stat{flex-direction:column;align-items:center;gap:4px}}
@keyframes setup-detail-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.onboarding details[open]>:not(summary){animation:setup-detail-in .2s ease-out}
@keyframes recall-hint-reduced{0%,99%{opacity:1;transform:none}to{opacity:0;transform:none}}
@media(prefers-reduced-motion:reduce){.setup-meter progress::-webkit-progress-value{transition:none}*:not(.recall-flash),*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.streak-count-changing .streak-count-old{display:none}.streak-count-changing .streak-count-new{position:static}.recall-flash.visible{animation:recall-hint-reduced .7s linear forwards!important}}
@media (pointer:coarse) and (hover:none){body> :not(#mobile-placeholder){display:none!important}#mobile-placeholder{display:grid;min-height:100dvh;padding:32px 24px;place-items:center;background:var(--bg);color:var(--text)}.mobile-placeholder-content{width:min(520px,100%);text-align:center}.mobile-placeholder-content .brand{display:inline-block;margin-bottom:56px}.mobile-placeholder-content h1{font-size:clamp(32px,8vw,48px);letter-spacing:-1.5px}.mobile-placeholder-content p{color:var(--muted);font-size:17px;line-height:1.55;margin:20px auto 0;max-width:460px}.mobile-placeholder-content p:last-child{color:var(--text);font-weight:550}}