/* Hallmark · macrostructure: Workbench · theme: studied-DNA (source: user recording) · pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url('tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-ink);font:16px/1.7 var(--font-body)}button,input,select{font:inherit}button,select{cursor:pointer}button{border:0;background:transparent;color:inherit;padding:8px 16px;border-radius:6px;white-space:nowrap}button:hover{background:var(--color-tint)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--color-accent-dark);outline-offset:4px}header{background:var(--color-accent);color:var(--color-white);min-height:64px;padding:8px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}header button:hover{background:var(--color-accent-dark)}header nav{display:flex}.brand{font-size:28px;font-weight:700;text-decoration:none;color:inherit;line-height:1.2}.brand span{font-size:12px;display:block;font-weight:400;margin-top:4px}#lessonTitle{font-weight:700}.top-progress{height:4px;background:var(--color-line)}.top-progress>div{height:100%;background:var(--color-green);width:0}main{max-width:1050px;margin:auto;padding:24px}.lesson-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;font-size:14px}select{border:1px solid var(--color-line);border-radius:6px;padding:8px;background:var(--color-white);color:var(--color-ink);max-width:100%}.live-stats{display:flex;gap:24px}.live-stats b{color:var(--color-accent-dark);margin-inline-start:8px}.instruction{background:var(--color-white);border-radius:var(--radius-card);padding:32px;text-align:center;box-shadow:0 12px 28px var(--color-shadow);margin-bottom:24px}.instruction>p:first-child{margin-top:0}h1{font:700 clamp(25px,3.4vw,40px)/1.65 var(--font-display);margin:16px 0;overflow-wrap:anywhere;min-width:0}h2{font-size:18px;margin:0}kbd{font-family:var(--font-key);display:inline-flex;justify-content:center;align-items:center;min-width:76px;min-height:76px;border:1px solid var(--color-line);border-radius:6px;margin-inline:8px;font-size:44px;background:var(--color-paper)}kbd.found{background:var(--color-green);color:var(--color-white)}.primary{background:var(--color-gold);color:var(--color-gold-ink);padding:12px 28px;font-weight:700}.primary:hover{background:var(--color-gold);filter:brightness(.96)}.secondary{background:var(--color-white);border:1px solid var(--color-line)}.exercise-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.exercise-head h1{font-size:22px;margin:0}.exercise-head span{color:var(--color-muted);font-size:14px}.tiles{display:flex;gap:8px;justify-content:center;min-height:94px}.tile{display:flex;align-items:center;justify-content:center;flex:1;max-width:112px;height:94px;font-size:46px;border:1px solid var(--color-line);border-radius:6px;background:var(--color-white);font-family:var(--font-key)}.tile.current{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}.tile.done{background:var(--color-green-tint);color:var(--color-green)}.tile.wrong{background:var(--color-red-tint);color:var(--color-red);border-color:var(--color-red)}.feedback{text-align:center;min-height:28px;margin:16px 0;color:var(--color-muted)}.feedback.error{color:var(--color-red)}.word-line{font-size:42px;white-space:pre-wrap;text-align:center;direction:rtl;letter-spacing:0;min-height:94px;line-height:2.1}.word-line .done{color:var(--color-green)}.word-line .current{background:var(--color-accent);color:var(--color-white);border-radius:4px}.lanes{display:flex;flex-direction:column;gap:8px;direction:ltr}.lane{height:54px;background:var(--color-white);position:relative}.lane.active{background:var(--color-tint)}.lane .tile{position:absolute;width:54px;height:54px;font-size:32px;transform:translateX(-50%)}.keyboard-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}.keyboard-heading p{margin:0}.text-button{text-decoration:underline;font-size:14px}.keyboard-stage{position:relative;padding-bottom:112px}.keyboard{background:var(--color-keyboard);border:1px solid var(--color-line);border-radius:24px;padding:24px 16px 16px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.key-row{display:flex;gap:6px;min-width:0}.key{height:58px;background:var(--color-white);border-radius:var(--radius-key);border-bottom:1px solid var(--color-line);padding:0;flex:1;min-width:0;position:relative;font-family:var(--font-key);font-size:25px}.key small{position:absolute;top:2px;left:6px;font-size:10px;color:var(--color-muted)}.key.wide{flex:1.6;font-size:14px}.key.space{flex:7}.key.active{background:var(--color-accent);color:var(--color-white)}.key.active small{color:var(--color-white)}.key.home::after{content:'';position:absolute;bottom:7px;width:12px;height:2px;background:currentColor;left:calc(50% - 6px)}.hands{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.44;overflow:hidden}.hand{position:absolute;width:50%;top:66px;mix-blend-mode:multiply;object-fit:contain}.hand.left{left:0}.hand.right{right:0;transform:scaleX(-1)}.hand.current{filter:sepia(.2) saturate(1.3)}.keyboard-help{text-align:center;margin:-80px 0 24px;position:relative;z-index:3;font-size:14px;color:var(--color-muted)}.progress-section{margin-top:24px}.progress-section>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.progress-section span{font-size:14px}.segments{display:flex;gap:4px;direction:rtl}.segment{height:8px;flex:1;background:var(--color-line);border-radius:2px}.segment.done{background:var(--color-accent)}.segment.current{background:var(--color-gold)}footer{display:flex;justify-content:space-between;gap:16px;color:var(--color-muted);font-size:12px;margin-top:24px;border-top:1px solid var(--color-line);padding-top:16px}.stars{font-size:80px;color:var(--color-gold);line-height:1.5;letter-spacing:12px;direction:ltr}.stars .empty{color:var(--color-line)}.result-line{font-size:22px}.result-line strong{color:var(--color-green)}.result-actions{display:flex;justify-content:center;gap:12px}dialog{border:1px solid var(--color-line);border-radius:20px;width:min(92vw,480px);padding:32px;background:var(--color-white);color:var(--color-ink)}dialog::backdrop{background:var(--color-shadow)}dialog label{display:block;margin:20px 0}dialog select{display:block;width:100%;margin-top:8px}dialog p{font-size:14px;color:var(--color-muted)}.check{display:flex;align-items:center;gap:8px}[hidden]{display:none!important}
@media(max-width:700px){header{padding:12px 16px;flex-wrap:wrap}.brand{font-size:24px}#lessonTitle{display:none}header nav button{padding:8px}.lesson-bar{align-items:flex-start;flex-wrap:wrap}.live-stats{gap:16px}main{padding:16px}.instruction{padding:24px 16px}.tile{height:70px;font-size:34px}.tiles{min-height:70px;gap:4px}.key{height:44px;font-size:21px}.key small{display:none}.key.wide{font-size:10px}.keyboard{padding:16px 8px 8px;gap:6px;border-radius:16px}.key-row{gap:3px}.keyboard-heading{font-size:12px}.hands{display:none}.keyboard-stage{padding-bottom:0}.keyboard-help{margin:16px 0}.stars{font-size:56px}.result-line{font-size:18px}footer{flex-direction:column;gap:4px}}
@media(max-width:400px){.live-stats{font-size:12px}.key{height:36px;font-size:18px}.key.wide{font-size:8px}.tile{font-size:28px}.exercise-head h1{font-size:18px}.keyboard-heading{align-items:flex-start;flex-direction:column}.instruction h1{font-size:25px}kbd{min-width:54px;min-height:60px;font-size:34px}.stars{font-size:46px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.hand{mask-image:url('assets/hands.jpg');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;mix-blend-mode:normal}.hands{mask-image:linear-gradient(to bottom,var(--color-white) 55%,transparent 100%)}
.hand{width:64%;top:76px}.hand.left{left:4%}.hand.right{right:4%}.finger-overlay{position:absolute;width:64%;top:76px;left:4%;opacity:.85}.finger-overlay.right{left:auto;right:4%;transform:scaleX(-1)}
.intro-wrong{background:var(--color-red-tint);color:var(--color-red)}#introKey{padding-inline:12px}#counter{direction:ltr;unicode-bidi:isolate}.stage-outline{margin-top:24px;border-top:1px solid var(--color-line);padding-top:16px}.stage-outline summary{cursor:pointer;font-weight:700}.stage-outline ol{padding-inline-start:28px}.stage-outline li{margin-block:4px}.stage-outline button{font-size:14px;text-align:start;white-space:normal}.stage-outline button[aria-current]{color:var(--color-accent-dark);background:var(--color-tint)}.stage-outline p{font-size:14px;color:var(--color-muted)}.word-line{padding:16px;line-height:2.3;background:var(--color-white);border-radius:12px;text-align:start;font-size:36px;overflow-wrap:anywhere}.word-line .wrong,.platform-word .wrong{background:var(--color-red-tint);color:var(--color-red)}.jump-course{background:var(--color-tint);border-radius:16px;padding:16px 24px;min-height:260px;display:flex;flex-direction:column;align-items:center;gap:12px}.jump-caption{align-self:flex-start;margin:0;font-size:14px;color:var(--color-accent-dark)}.platform{width:45%;border-bottom:6px solid var(--color-line);text-align:center;font-size:32px;line-height:1.3;position:relative;min-height:44px}.platform.active{border-color:var(--color-accent)}.platform-word .done{color:var(--color-green)}.platform-word .current{color:var(--color-white);background:var(--color-accent);border-radius:4px}.player-marker{position:absolute;inset-inline-start:-28px;bottom:-12px;color:var(--color-accent-dark);font-size:32px}.keyboard-help{padding-bottom:8px}@media(max-width:500px){.word-line{font-size:28px}.platform{width:60%;font-size:28px}.jump-course{padding:16px}.stage-outline button{font-size:13px}.lesson-bar{font-size:13px}#introKey{font-size:28px}}

.lesson-picker{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;font-size:1rem}.lesson-picker select{font:inherit;max-width:100%;min-width:0;padding:.6rem;border:1px solid #ccc;border-radius:8px;background:white;color:#444}@media(max-width:500px){.lesson-picker{align-items:stretch;flex-direction:column;gap:.4rem}}

.font-preview{background:var(--color-paper);padding:12px;border-radius:8px;font-size:24px;line-height:1.8}dialog{max-height:90vh;overflow:auto}dialog label{margin:12px 0}