:root{color-scheme:light;--ink: #342017;--muted: #8b7469;--paper: #fffaf2;--cream: #fff4df;--shell: #fbe0cf;--coral: #ee7f6d;--coral-dark: #c85f51;--blue: #82c7e3;--mint: #8fd4ac;--key: #fffdfa;--line: #4a2b1d;--gold: #ffd35d;--shadow: 0 18px 0 rgba(217, 157, 123, .34), 0 30px 70px rgba(113, 76, 51, .16);--typing-font: "American Typewriter", "Courier Prime", "Courier New", ui-monospace, "SF Mono", monospace;--finger-color: var(--coral);--finger-left-pinky: #e879a0;--finger-left-ring: #f1a64f;--finger-left-middle: #d5bd3d;--finger-left-index: #8cc66d;--finger-thumbs: #fffefa;--finger-right-index: #5ebfaf;--finger-right-middle: #6fa8ee;--finger-right-ring: #9b8fe6;--finger-right-pinky: #e47bc1}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 14px 14px,rgba(255,255,255,.5) 0 5px,transparent 6px) 0 0 / 42px 42px,radial-gradient(circle at 20% 16%,rgba(255,210,184,.72),transparent 26rem),radial-gradient(circle at 82% 12%,rgba(191,224,236,.6),transparent 24rem),linear-gradient(180deg,#fffaf3,#f8eadb);font-family:Avenir Next,Nunito,Trebuchet MS,sans-serif;overflow-x:hidden}button{font:inherit}.shell{min-height:100vh;width:min(760px,calc(100% - 32px));margin:0 auto;padding:clamp(18px,3vw,36px) 0}.shell:before,.shell:after{content:"";position:fixed;left:0;right:0;height:18px;z-index:-1;background:repeating-linear-gradient(90deg,var(--coral) 0 24px,var(--gold) 24px 48px,var(--blue) 48px 72px),linear-gradient(#fff,#fff)}.shell:before{top:0}.shell:after{bottom:0}.practice,.mascot-panel{min-width:0}.practice{min-height:calc(100vh - clamp(36px,6vw,72px));display:flex;flex-direction:column;gap:clamp(10px,2vh,16px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;min-width:0;gap:14px}.stage-name,.score-label,.streak-pill span{margin:0;color:var(--coral-dark);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.course-goal{grid-column:2;grid-row:1 / span 3;align-self:center;margin:2px 0;display:inline-grid;justify-self:start;padding:7px 11px;border:3px solid var(--line);border-radius:999px;color:#fff;background:var(--coral);box-shadow:0 4px #34201729;font-size:.92rem;font-weight:900}h1{margin:3px 0 0;max-width:560px;font-size:clamp(2rem,8vw,4.35rem);line-height:.95;letter-spacing:0;text-shadow:0 4px 0 rgba(255,255,255,.82)}.score-card,.streak-pill{flex:0 0 auto;display:grid;justify-items:center;gap:2px;min-width:82px;padding:12px 14px;border:3px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fffefa,#fff1df);box-shadow:0 6px #3420172e}.score-card strong,.streak-pill strong{font-size:2rem;line-height:1}.course-map{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border:4px solid var(--line);border-radius:8px;background:repeating-linear-gradient(90deg,#ee7f6d1f 0 14px,#ffd35d29 14px 28px),linear-gradient(180deg,#fffefa,#ffe8d6);box-shadow:0 8px #4a2b1d26}.course-drum{display:grid;place-items:center;width:62px;height:62px;padding:0;border-radius:50%;color:var(--coral);background:radial-gradient(circle at 50% 50%,#fffefa 0 38%,var(--coral) 39% 52%,var(--line) 53% 59%,var(--gold) 60%);border:3px solid var(--line);box-shadow:inset 0 -5px #4a2b1d14,0 5px #4a2b1d26;font-size:1.35rem;font-weight:900}.course-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:4px;min-width:0}.course-meta{display:flex;align-items:center;gap:8px;min-width:0}.course-label,.course-copy span{margin:0;color:var(--coral-dark);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.jump-chip{appearance:none;flex:0 0 auto;padding:3px 7px;border:2px solid var(--line);border-radius:999px;color:#fff;background:var(--coral);box-shadow:0 3px #4a2b1d2e;cursor:pointer;font-family:inherit;font-size:.52rem;font-weight:900;letter-spacing:.04em;line-height:1;text-transform:uppercase}.jump-chip:hover,.jump-chip:focus-visible{background:var(--blue)}.jump-chip:focus-visible{outline:3px solid #fff;outline-offset:2px}.course-copy strong{grid-column:1;overflow:hidden;color:var(--ink);font-size:clamp(1.25rem,3vw,2rem);font-weight:900;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.course-copy span{grid-column:1;color:var(--muted)}.lesson-card{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(10px,2.4vh,22px);min-height:clamp(260px,34vh,360px);padding:clamp(16px,4vw,30px);position:relative;overflow:hidden;border:4px solid var(--line);border-radius:8px;background:linear-gradient(135deg,#ffffffe0,#fff6e5f0),radial-gradient(circle at 20px 20px,rgba(238,127,109,.08) 0 5px,transparent 6px) 0 0 / 40px 40px;box-shadow:var(--shadow)}.lesson-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(238,127,109,.16) 0 10px,transparent 10px calc(100% - 10px),rgba(130,199,227,.16) calc(100% - 10px))}.game-ribbon{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;margin:calc(clamp(16px,4vw,30px)*-1) calc(clamp(16px,4vw,30px)*-1) 2px;padding:9px 14px;color:#fff;background:repeating-linear-gradient(90deg,var(--coral) 0 18px,#f18c79 18px 36px);border-bottom:4px solid var(--line);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.lesson-header{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.stage-help{margin:8px 0 0;color:var(--muted);font-weight:700}.keyboard-guide{display:grid;gap:4px;max-width:min(100%,510px);padding:8px;border:2px solid rgba(74,43,29,.12);border-radius:14px;background:#ffffff80;box-shadow:inset 0 -4px #3420170a}.keyboard-row{display:flex;justify-content:center;gap:4px}.keyboard-row:nth-child(2){padding-left:10px}.keyboard-row:nth-child(3){padding-left:20px}.keyboard-row:nth-child(4){padding-left:32px}.key-cap{display:grid;place-items:center;min-width:26px;height:25px;padding:0 6px;border:2px solid rgba(74,43,29,.12);border-radius:7px;color:#34201752;background:#ffffff80;box-shadow:inset 0 -3px #3420170d;font-family:var(--typing-font);font-size:.68rem;font-weight:900;font-variant-ligatures:none}.key-cap[data-state=review],.key-cap[data-state=focus]{color:color-mix(in srgb,var(--finger-color) 72%,var(--ink));background:color-mix(in srgb,var(--finger-color) 18%,#fffefa);box-shadow:inset 0 -3px #34201714,0 0 0 2px color-mix(in srgb,var(--finger-color) 16%,transparent)}.key-cap[data-state=focus]{border-color:color-mix(in srgb,var(--finger-color) 58%,var(--line));background:color-mix(in srgb,var(--finger-color) 32%,#fffefa)}.key-cap.active{transform:translateY(-3px);color:#fffefa;background:var(--finger-color);box-shadow:0 5px #4a2b1d24,0 0 0 4px color-mix(in srgb,var(--finger-color) 22%,transparent)}.key-cap[data-finger=thumbs].active{color:var(--ink);border-color:#4a2b1d42;box-shadow:0 5px #4a2b1d24,0 0 0 4px #4a2b1d14}.keyboard-row:last-child .key-cap{min-width:130px}[data-finger=left-pinky]{--finger-color: var(--finger-left-pinky)}[data-finger=left-ring]{--finger-color: var(--finger-left-ring)}[data-finger=left-middle]{--finger-color: var(--finger-left-middle)}[data-finger=left-index]{--finger-color: var(--finger-left-index)}[data-finger=thumbs]{--finger-color: var(--finger-thumbs)}[data-finger=right-index]{--finger-color: var(--finger-right-index)}[data-finger=right-middle]{--finger-color: var(--finger-right-middle)}[data-finger=right-ring]{--finger-color: var(--finger-right-ring)}[data-finger=right-pinky]{--finger-color: var(--finger-right-pinky)}.note-lane{position:relative;z-index:1;display:grid;grid-template-rows:24px 1fr;place-items:center;min-height:150px;padding:10px 18px 12px}.minigame-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#fffaf2d1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.minigame-overlay[hidden]{display:none}.sprint-overlay{position:fixed;inset:0;z-index:22;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 18% 24%,rgba(255,211,93,.38),transparent 18rem),radial-gradient(circle at 82% 28%,rgba(130,199,227,.36),transparent 20rem),#fffaf2e0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sprint-overlay[hidden]{display:none}.minigame-panel{position:relative;display:grid;grid-template-rows:auto minmax(220px,1fr) auto auto;width:min(1180px,calc(100vw - 32px));height:calc(100vh - 32px);padding-bottom:clamp(14px,3vw,24px);overflow:hidden;border:4px solid var(--line);border-radius:22px;background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.82) 0 10px,transparent 11px),radial-gradient(circle at 78% 34%,rgba(255,255,255,.72) 0 13px,transparent 14px),repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 18px,transparent 18px 36px),linear-gradient(180deg,#bfe8f4,#f7fbff);box-shadow:0 14px #4a2b1d29,0 28px 70px #4a2b1d33}.sprint-panel{position:relative;display:grid;grid-template-rows:auto auto minmax(170px,1fr) auto auto;width:min(980px,calc(100vw - 32px));min-height:min(620px,calc(100vh - 32px));overflow:hidden;border:4px solid var(--line);border-radius:22px;background:radial-gradient(circle at 22% 30%,rgba(255,255,255,.88) 0 12px,transparent 13px),radial-gradient(circle at 74% 38%,rgba(255,255,255,.76) 0 16px,transparent 17px),repeating-linear-gradient(90deg,#ee7f6d14 0 20px,#ffd35d1a 20px 40px),linear-gradient(180deg,#fffefa,#ffe0cf 58%,#bfe8f4);box-shadow:0 14px #4a2b1d29,0 28px 70px #4a2b1d33}.sprint-panel.finished{grid-template-rows:auto minmax(0,1fr)}.minigame-hud{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px 10px;color:#fff;background:repeating-linear-gradient(90deg,var(--coral) 0 16px,#f18c79 16px 32px);border-bottom:3px solid var(--line);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.minigame-hud strong,.minigame-hud small{display:grid;place-items:center;min-width:34px;height:28px;border:2px solid var(--line);border-radius:999px;color:var(--ink);background:var(--gold);box-shadow:0 3px #4a2b1d2e;font-size:.9rem;line-height:1}.sprint-hud{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 14px;color:#fff;background:repeating-linear-gradient(90deg,var(--coral) 0 16px,#f18c79 16px 32px);border-bottom:3px solid var(--line);font-size:clamp(.82rem,2vw,1.05rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase}.sprint-hud strong{display:grid;place-items:center;min-width:58px;height:42px;border:3px solid var(--line);border-radius:999px;color:var(--ink);background:var(--gold);box-shadow:0 4px #4a2b1d2e;font-size:1.35rem;line-height:1}.minigame-hud small{background:#fffefa}.sprint-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px clamp(12px,3vw,28px) 0}.sprint-stats span{display:grid;gap:3px;place-items:center;min-width:0;padding:8px 10px;border:3px solid var(--line);border-radius:12px;color:var(--coral-dark);background:#ffffffb8;box-shadow:0 5px #4a2b1d1f;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.sprint-stats strong{color:var(--ink);font-size:clamp(1.1rem,3vw,1.6rem);line-height:1}.minigame-scene{position:relative;min-height:220px;overflow:hidden}.minigame-scene:before,.minigame-scene:after{content:"";position:absolute;border-radius:999px;background:#fffc}.minigame-scene:before{left:16%;top:24%;width:20px;height:20px}.minigame-scene:after{right:20%;top:36%;width:28px;height:28px}.balloon{--balloon-color: var(--coral);--drift: 0px;position:absolute;left:calc(50% - 42px);bottom:14px;display:grid;place-items:center;width:84px;height:122px;color:#fff;animation:balloon-rise var(--float-time, 4.6s) linear forwards;filter:drop-shadow(0 8px 0 rgba(74,43,29,.12))}.balloon[data-variant="2"]{--balloon-color: var(--blue)}.balloon[data-variant="3"]{--balloon-color: var(--mint)}.balloon[data-variant="4"]{--balloon-color: #e47bc1}.balloon:before{content:"";position:absolute;inset:2px 8px 42px;border:3px solid var(--line);border-radius:50% 50% 46% 46%;background:linear-gradient(180deg,color-mix(in srgb,var(--balloon-color) 82%,#fff),var(--balloon-color));box-shadow:inset 0 -8px #4a2b1d14}.balloon-shine{position:absolute;z-index:1;left:27px;top:14px;width:12px;height:18px;border-radius:999px;background:#ffffffbd;transform:rotate(25deg)}.balloon-string{position:absolute;left:50%;bottom:0;width:2px;height:36px;background:repeating-linear-gradient(180deg,rgba(74,43,29,.56) 0 4px,transparent 4px 8px);transform:translate(-50%)}.balloon strong{position:absolute;left:50%;top:38px;z-index:1;display:grid;place-items:center;max-width:64px;min-width:44px;height:34px;overflow:hidden;font-family:var(--typing-font);font-size:1.15rem;font-weight:900;line-height:1;text-align:center;text-overflow:ellipsis;text-shadow:0 2px 0 rgba(74,43,29,.22);transform:translate(-50%,-50%);white-space:nowrap}.minigame-sequence{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2vw,16px);min-height:108px;padding:14px clamp(12px,4vw,32px) 8px}.minigame-sequence.seq-len-4,.minigame-sequence.seq-len-5,.minigame-sequence.seq-len-6,.minigame-sequence.seq-len-7,.minigame-sequence.seq-len-8{gap:clamp(6px,1.4vw,10px)}.minigame-sequence .key-token{min-width:clamp(64px,10vw,94px);height:clamp(70px,10vw,96px);font-size:clamp(2.2rem,6vw,4.3rem)}.minigame-sequence.seq-len-4 .key-token,.minigame-sequence.seq-len-5 .key-token,.minigame-sequence.seq-len-6 .key-token,.minigame-sequence.seq-len-7 .key-token,.minigame-sequence.seq-len-8 .key-token{min-width:clamp(42px,7vw,62px);height:clamp(56px,8vw,72px);padding:0 10px;font-size:clamp(1.8rem,4vw,3.1rem)}.minigame-sequence .key-token.space-key{min-width:clamp(118px,22vw,190px);font-size:clamp(1.15rem,3.6vw,2rem)}.balloon.popped{animation:balloon-pop .24s ease-out forwards}.stairs-track{position:absolute;inset:12% 8%;display:grid;grid-template-columns:repeat(8,1fr);align-items:end;gap:min(1.5vw,12px)}.stair-step{display:block;height:calc(26px + var(--i, 0) * 18px);border:3px solid var(--line);border-radius:8px 8px 0 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 10px,transparent 10px 20px),linear-gradient(180deg,#ffd35d,#f2aa66);box-shadow:inset 0 -6px #4a2b1d14,0 7px #4a2b1d1f;opacity:.72}.stair-step[data-active=true]{opacity:1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 10px,transparent 10px 20px),linear-gradient(180deg,#8fd4ac,#5ebfaf)}.stair-step:nth-child(1){--i: 0}.stair-step:nth-child(2){--i: 1}.stair-step:nth-child(3){--i: 2}.stair-step:nth-child(4){--i: 3}.stair-step:nth-child(5){--i: 4}.stair-step:nth-child(6){--i: 5}.stair-step:nth-child(7){--i: 6}.stair-step:nth-child(8){--i: 7}.hopscotch-court{position:absolute;inset:4% 20% 8%;display:grid;grid-template-columns:repeat(2,minmax(74px,1fr));grid-template-rows:repeat(6,1fr);gap:min(2vw,14px)}.hop-tile{display:grid;place-items:center;border:3px solid var(--line);border-radius:14px;color:#3420177a;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.55),transparent 26%),linear-gradient(180deg,#fffefa,#ffe0cf);box-shadow:0 7px #4a2b1d24;font-size:1.35rem;font-weight:900}.hop-tile:nth-child(1){grid-column:1 / span 2;grid-row:6;justify-self:center;width:48%}.hop-tile:nth-child(2){grid-column:1;grid-row:5}.hop-tile:nth-child(3){grid-column:2;grid-row:5}.hop-tile:nth-child(4){grid-column:1 / span 2;grid-row:4;justify-self:center;width:48%}.hop-tile:nth-child(5){grid-column:1;grid-row:3}.hop-tile:nth-child(6){grid-column:2;grid-row:3}.hop-tile:nth-child(7){grid-column:1 / span 2;grid-row:2;justify-self:center;width:48%}.hop-tile:nth-child(8){grid-column:1 / span 2;grid-row:1;justify-self:center;width:48%}.hop-tile[data-done=true]{background:linear-gradient(180deg,#f7f7d2,#ffd35d)}.hop-tile[data-active=true]{color:var(--ink);background:linear-gradient(180deg,#bfe8f4,#82c7e3);animation:tile-pulse .68s ease-in-out infinite}.mini-keyko-runner{--runner-x: 50%;--runner-y: 74%;position:absolute;left:var(--runner-x);top:var(--runner-y);z-index:2;width:clamp(128px,24vw,190px);height:clamp(128px,24vw,190px);transform:translate(-50%,-50%);transition:left .22s ease,top .22s ease,transform .22s ease}.mini-keyko-runner img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 0 rgba(74,43,29,.14))}.stairs-runner{top:auto;bottom:var(--stair-height);transform:translate(-50%)}.stairs-runner img{transform:translateY(12%)}.minigame-panel.miss .mini-keyko-runner{animation:mini-stumble .36s ease}.minigame-feedback{min-height:24px;margin:0;padding:0 18px;color:var(--coral-dark);font-size:1rem;font-weight:900;text-align:center}.sprint-track{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) auto minmax(0,1fr);align-items:center;gap:0;min-height:190px;padding:clamp(18px,5vw,44px);font-family:var(--typing-font);font-size:clamp(1.35rem,5vw,3.2rem);font-weight:900;line-height:1.2}.sprint-track:before{content:"";position:absolute;inset:22% clamp(12px,5vw,56px);z-index:-1;border:4px solid var(--line);border-radius:32px;background:#ffffffb8;box-shadow:inset 0 -8px #4a2b1d0f,0 8px #4a2b1d1f}.sprint-text-done,.sprint-text-next{min-width:0;overflow:hidden;white-space:pre}.sprint-text-done{color:#34201761;text-align:right}.sprint-text-next{color:#3420179e;-webkit-mask-image:linear-gradient(90deg,#000 0 74%,transparent);mask-image:linear-gradient(90deg,#000 0 74%,transparent)}.sprint-text-current{display:inline-block;min-width:.8em;padding:0 .12em .05em;border:3px solid var(--line);border-radius:8px;color:var(--ink);background:var(--gold);box-shadow:0 5px #4a2b1d29;font-size:1em;line-height:1.08;text-align:center}.sprint-text-current.sprint-text-space{min-width:1.1em}.sprint-feedback{min-height:24px;margin:0;padding:0 18px 12px;color:var(--coral-dark);font-size:1rem;font-weight:900;text-align:center}.sprint-panel.miss .sprint-text-current{animation:sprint-shake .26s ease}.sprint-panel.finished .sprint-stats,.sprint-panel.finished .sprint-track,.sprint-panel.finished .sprint-feedback{display:none}.sprint-result{display:grid;align-content:center;justify-items:center;gap:14px;min-height:0;padding:clamp(22px,5vw,48px)}.sprint-result[hidden]{display:none}.sprint-result h2{margin:0;color:var(--ink);font-size:clamp(1.7rem,6vw,3rem);line-height:1;text-align:center}.sprint-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,640px)}.sprint-result-grid span{display:grid;gap:4px;place-items:center;min-width:0;padding:10px 8px;border:3px solid var(--line);border-radius:12px;background:#fffefa;box-shadow:0 5px #4a2b1d1f}.sprint-result-grid small{color:var(--coral-dark);font-size:.66rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.sprint-result-grid strong{font-size:clamp(1.15rem,4vw,1.9rem);line-height:1}.sprint-result-charms{display:flex;align-items:center;justify-content:center;min-height:70px;gap:10px;color:var(--coral-dark);font-size:.9rem;font-weight:900;text-align:center}.sprint-result-charms img{width:clamp(54px,12vw,82px);height:clamp(54px,12vw,82px);object-fit:contain;filter:drop-shadow(0 5px 0 rgba(74,43,29,.18))}.sprint-start{border:3px solid var(--line);border-radius:999px;color:#fff;background:var(--coral);box-shadow:0 5px #4a2b1d33;cursor:pointer;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.sprint-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.sprint-result-actions button{border:3px solid var(--line);border-radius:999px;color:#fff;background:var(--coral);box-shadow:0 5px #4a2b1d33;cursor:pointer;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:10px 22px;font-size:.9rem}.word-label{position:relative;z-index:1;min-height:20px;margin:0;color:var(--coral-dark);font-size:.9rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.sequence{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(10px,2vw,18px);width:100%;min-width:0;min-height:126px}.sequence.seq-len-4,.sequence.seq-len-5,.sequence.seq-len-6,.sequence.seq-len-7,.sequence.seq-len-8{gap:clamp(7px,1.4vw,12px)}.key-token{position:relative;display:grid;place-items:center;min-width:clamp(72px,10vw,104px);height:clamp(82px,11vw,112px);padding:0 18px;border:4px solid var(--line);border-radius:50%;color:color-mix(in srgb,var(--finger-color) 48%,#a69589);background:color-mix(in srgb,var(--finger-color) 7%,var(--key));box-shadow:0 10px #e6c5ad,inset 0 -8px color-mix(in srgb,var(--finger-color) 10%,transparent);font-family:var(--typing-font);font-size:clamp(2.6rem,7vw,5.5rem);font-weight:900;font-variant-ligatures:none;line-height:1;text-transform:lowercase;transition:transform .18s ease,color .18s ease,box-shadow .18s ease}.sequence.seq-len-4 .key-token,.sequence.seq-len-5 .key-token,.sequence.seq-len-6 .key-token,.sequence.seq-len-7 .key-token,.sequence.seq-len-8 .key-token{min-width:clamp(48px,7vw,70px);height:clamp(66px,8vw,84px);padding:0 12px;font-size:clamp(2rem,5vw,3.6rem)}.key-token.space-key{border-radius:18px;min-width:clamp(132px,22vw,220px);font-size:clamp(1.25rem,4vw,2.3rem)}.key-token[data-state=current]{color:color-mix(in srgb,var(--finger-color) 82%,var(--ink));transform:translateY(-5px);border-color:var(--line);box-shadow:0 13px #e9b79d,0 0 0 9px color-mix(in srgb,var(--finger-color) 27%,transparent),0 0 0 16px #ffd35d2e}.key-token[data-state=done]{color:#66aa7d;box-shadow:0 7px #d3e8d9}.key-token[data-state=done]:after{content:"";position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:50%;background:var(--mint)}.key-token.shake{animation:shake .28s ease}.sequence.pop .key-token[data-state=done]:last-child{animation:key-pop .26s ease-out}.feedback{position:relative;z-index:1;min-height:24px;margin:0;color:var(--coral-dark);font-size:1rem;font-weight:900;text-align:center}.clear-overlay,.jump-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:#fffaf2bd;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.clear-overlay[hidden],.jump-overlay[hidden]{display:none}.clear-box,.jump-box{width:min(100%,360px);padding:22px;border:4px solid var(--line);border-radius:8px;text-align:center;background:radial-gradient(circle at 20% 18%,rgba(255,211,93,.42),transparent 30%),linear-gradient(180deg,#fffefa,#fff0dc);box-shadow:0 10px #4a2b1d2e,0 26px 54px #4a2b1d29;animation:clear-pop .26s ease-out both}.clear-title{margin:0;color:var(--coral);font-size:clamp(2rem,7vw,3.15rem);font-weight:900;line-height:.95;text-shadow:0 3px #fff}.clear-copy{margin:10px 0 18px;color:var(--muted);font-weight:800}.clear-actions,.jump-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.clear-actions button,.jump-actions button{min-width:120px;padding:10px 14px;border:3px solid var(--line);border-radius:8px;color:var(--ink);background:var(--gold);box-shadow:0 5px #4a2b1d2e;font-weight:900;cursor:pointer}.jump-actions button[aria-label]{min-width:46px;padding-inline:10px;border-radius:50%;font-size:1.35rem;line-height:1}.clear-actions button+button,.jump-actions button:last-child{background:#fffefa}.jump-field{display:grid;gap:8px;margin:14px auto 18px;width:min(100%,180px);color:var(--muted);font-size:.74rem;font-weight:900;letter-spacing:.08em;text-align:left;text-transform:uppercase}.jump-field input{width:100%;height:58px;border:3px solid var(--line);border-radius:8px;color:var(--ink);background:#fffefa;box-shadow:inset 0 -4px #34201714;font:inherit;font-size:1.55rem;text-align:center}.jump-field input::-webkit-outer-spin-button,.jump-field input::-webkit-inner-spin-button{margin:0;appearance:none}.jump-field input[type=number]{appearance:textfield}.mascot-panel{position:relative;overflow:hidden;display:grid;grid-template-rows:1fr auto;align-items:end;min-height:0;padding:clamp(10px,2vw,16px) clamp(14px,3vw,22px);border:4px solid var(--line);border-radius:8px;background:radial-gradient(circle at 50% 52%,rgba(255,211,93,.26) 0 22%,transparent 23%),repeating-conic-gradient(from 0deg at 50% 52%,rgba(238,127,109,.12) 0 12deg,rgba(130,199,227,.12) 12deg 24deg,transparent 24deg 36deg),linear-gradient(180deg,#fffcf6b8,#fbe0cfa8);box-shadow:var(--shadow)}.mascot-badge{position:absolute;top:14px;left:14px;z-index:3;padding:7px 11px;border:3px solid var(--line);border-radius:999px;color:#fff;background:var(--coral);box-shadow:0 4px #4a2b1d33;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.mascot-scene{position:relative;display:grid;place-items:end center;min-height:clamp(180px,28vh,300px);overflow:hidden}.keyko{position:relative;width:min(100%,360px);max-height:32vh;aspect-ratio:580 / 485;filter:drop-shadow(0 24px 20px rgba(119,83,61,.12));transform-origin:center bottom;animation:idle-breathe 2.6s ease-in-out infinite;will-change:transform}.keyko-full,.keyko-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.keyko[data-layered=true] .keyko-full,.keyko[data-layered=false] .keyko-layer{display:none}.keyko-tail{z-index:1;transform-origin:70% 74%;animation:tail-wag 1.35s ease-in-out infinite;will-change:transform}.keyko-body{z-index:2}.keyko.ready,.keyko.munch,.keyko.happy{animation-iteration-count:1}.keyko.ready{animation:ready-bob .36s ease both}.keyko.munch{animation:munch .56s ease both}.keyko.happy{animation:happy-hop .65s ease both}.keyko.happy .keyko-full{transform:translate(-4%,2.5%)}.charm-slots{position:absolute;inset:0;z-index:4;pointer-events:none}.keyko-charm{position:absolute;width:clamp(46px,8vw,74px);height:clamp(46px,8vw,74px);object-fit:contain;filter:drop-shadow(0 6px 0 rgba(74,43,29,.16));animation:charm-bob 2.4s ease-in-out infinite}.keyko-charm[data-slot="1"]{left:12%;bottom:15%}.keyko-charm[data-slot="2"]{right:10%;bottom:17%;animation-delay:.26s}.keyko-charm[data-slot="3"]{right:17%;top:18%;animation-delay:.52s}.sprint-start{justify-self:center;width:min(100%,220px);margin:12px auto 2px;padding:10px 18px;background:var(--blue);font-size:.82rem}.sprint-start[hidden]{display:none}.costume-progress-label{margin:0;color:var(--coral-dark);font-size:.75rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}.progress-track{height:18px;overflow:hidden;border-radius:999px;background:#ffffffb8;border:3px solid var(--line);box-shadow:inset 0 -3px #34201714}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--blue));transition:width .18s ease}.costume-closet{display:grid;gap:8px;margin-top:12px}.costume-closet p{margin:0;color:var(--coral-dark);font-size:.75rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}.costume-options{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:stretch;gap:8px}.costume-arrow,.costume-current{min-width:0;border:3px solid var(--line);border-radius:8px;color:var(--ink);box-shadow:0 5px #4a2b1d29;cursor:pointer}.costume-arrow{display:grid;place-items:center;aspect-ratio:1;align-self:center;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--coral) 0 48%,var(--line) 49% 57%,var(--gold) 58%);color:#fff}.costume-arrow svg{width:27px;height:27px;filter:drop-shadow(0 2px 0 rgba(74,43,29,.32))}.costume-arrow .chevron-previous{transform:translate(-1.5px)}.costume-current{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;column-gap:8px;min-height:72px;padding:7px 10px;background:repeating-linear-gradient(90deg,#ee7f6d14 0 12px,#ffd35d1a 12px 24px),linear-gradient(180deg,#fffefa,#fff0df)}.costume-current img{grid-row:span 2;width:56px;height:56px;object-fit:contain;border:2px solid rgba(74,43,29,.14);border-radius:50%;background:#ffffffb8}.costume-current span,.costume-current small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.costume-current span{align-self:end;font-size:.92rem;font-weight:900}.costume-current small{align-self:start;color:var(--coral-dark);font-size:.7rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.costume-current.active{background:repeating-linear-gradient(90deg,#ffd35d33 0 12px,#ee7f6d24 12px 24px),linear-gradient(180deg,#fff9e2,#ffe0cf);transform:translateY(3px);box-shadow:0 2px #4a2b1d33}.costume-current:disabled{color:#3420177a;background:#eee1d6;box-shadow:none;cursor:not-allowed}.costume-current:disabled img{filter:grayscale(1);opacity:.56}.costume-current:disabled small{color:#34201780}@keyframes shake{0%,to{transform:translateY(-5px) translate(0)}30%{transform:translateY(-5px) translate(-9px)}70%{transform:translateY(-5px) translate(9px)}}@keyframes happy-hop{0%,to{transform:translateY(0) scale(1)}42%{transform:translateY(-18px) scale(1.025)}}@keyframes idle-breathe{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.006)}}@keyframes tail-wag{0%,to{transform:rotate(-3deg)}50%{transform:rotate(8deg)}}@keyframes ready-bob{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.015)}to{transform:translateY(0) scale(1)}}@keyframes key-pop{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.1)}}@keyframes munch{0%,to{transform:scale(1)}35%{transform:scale(1.025,.975) translateY(5px)}70%{transform:scale(.985,1.02) translateY(-4px)}}@keyframes clear-pop{0%{transform:translateY(10px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes charm-bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(4deg)}}@keyframes sprint-shake{0%,to{transform:translate(0)}30%{transform:translate(-8px)}70%{transform:translate(8px)}}@keyframes balloon-rise{0%{transform:translate(0) rotate(-3deg)}45%{transform:translate(var(--drift),-340px) rotate(4deg)}to{transform:translate(calc(var(--drift) * -.8),-720px) rotate(-2deg)}}@keyframes balloon-pop{0%{transform:translate(var(--drift),-260px) scale(1);opacity:1}to{transform:translate(var(--drift),-260px) scale(1.34);opacity:0}}@keyframes tile-pulse{0%,to{transform:translateY(0);box-shadow:0 7px #4a2b1d24,0 0 #82c7e357}50%{transform:translateY(-4px);box-shadow:0 10px #4a2b1d24,0 0 0 9px #82c7e333}}@keyframes mini-stumble{0%,to{transform:translate(-50%,-50%) rotate(0)}33%{transform:translate(-50%,-50%) rotate(-9deg)}66%{transform:translate(-50%,-50%) rotate(8deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}@media(min-width:980px){.shell{width:min(1180px,calc(100% - 32px))}.practice{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(340px,.85fr);grid-template-areas:"topbar topbar" "course mascot" "lesson mascot";align-items:stretch;column-gap:clamp(22px,4vw,54px)}.topbar{grid-area:topbar}.course-map{grid-area:course}.lesson-card{grid-area:lesson}.mascot-panel{grid-area:mascot}.mascot-scene{min-height:420px}.keyko{width:min(100%,480px);max-height:70vh}}@media(max-width:860px){body{overflow:auto}}@media(max-width:620px){.shell{width:calc(100% - 24px);max-width:366px;margin:0 12px}.topbar{order:1;flex-direction:row;align-items:center;gap:8px}.mascot-panel{order:3}.lesson-card{order:4}.course-map{order:2}.feedback{order:5}.score-card{width:auto;min-height:58px}.score-card,.streak-pill{min-width:64px;padding:8px 10px}.score-card strong,.streak-pill strong{font-size:1.55rem}h1{font-size:clamp(1.45rem,7.8vw,1.9rem)}.lesson-header{align-items:flex-start}.lesson-card{min-height:220px}.note-lane{min-height:122px;padding:8px 10px 10px}.minigame-panel{grid-template-rows:auto minmax(170px,1fr) auto auto;width:calc(100vw - 24px);height:calc(100vh - 24px)}.sprint-panel{width:calc(100vw - 24px);min-height:calc(100vh - 24px)}.minigame-hud{padding:6px 8px;font-size:.64rem}.sprint-stats{gap:6px;padding-inline:8px}.sprint-stats span{padding:7px 4px;border-width:2px;font-size:.58rem}.sprint-track{min-height:154px;padding:14px 12px;grid-template-columns:minmax(0,.7fr) auto minmax(0,1fr)}.sprint-track:before{inset:22% 8px;border-width:3px}.sprint-text-current{min-width:.8em;padding:0 .12em .05em;border-width:2px}.sprint-result{padding:18px 12px}.sprint-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.minigame-scene{min-height:170px}.balloon{left:calc(50% - 34px);bottom:10px;width:68px;height:100px}.balloon strong{max-width:52px;font-size:.9rem}.hopscotch-court{inset:8% 10% 9%;grid-template-columns:repeat(2,minmax(52px,1fr));gap:9px}.hop-tile{border-width:2px;border-radius:10px;font-size:.95rem}.stairs-track{inset:12% 5%;gap:5px}.mascot-scene{min-height:112px}.keyko{width:min(100%,180px);max-height:126px}.keyko-charm{width:42px;height:42px}.keyko-charm[data-slot="1"]{left:5%;bottom:12%}.keyko-charm[data-slot="2"]{right:4%;bottom:13%}.keyko-charm[data-slot="3"]{right:12%;top:10%}}@media(max-width:420px){.shell{width:calc(100% - 24px);padding:14px 0}.brand{gap:10px}h1{max-width:none;font-size:clamp(1.45rem,7.8vw,1.9rem)}.topbar{gap:8px}.course-map{grid-template-columns:auto minmax(0,1fr);gap:9px;padding:8px 9px}.course-drum{width:48px;height:48px;font-size:1.1rem}.course-drum small{right:-13px;bottom:-9px;padding:2px 5px;font-size:.48rem}.course-copy{grid-template-columns:minmax(0,1fr);column-gap:0}.course-goal{grid-column:1;grid-row:auto}.lesson-card{min-height:220px}.keyboard-guide{gap:3px;padding:6px}.keyboard-row{gap:2px}.keyboard-row:nth-child(2),.keyboard-row:nth-child(3),.keyboard-row:nth-child(4){padding-left:0}.key-cap{min-width:21px;height:22px;padding:0 3px;border-width:1px;font-size:.58rem}.keyboard-row:last-child .key-cap{min-width:104px}.key-token{min-width:68px;height:76px;font-size:3.1rem}.sequence.seq-len-4 .key-token,.sequence.seq-len-5 .key-token,.sequence.seq-len-6 .key-token,.sequence.seq-len-7 .key-token,.sequence.seq-len-8 .key-token{min-width:39px;height:58px;padding:0 8px;font-size:2.1rem}.key-token.space-key{min-width:128px;font-size:1.55rem}.mascot-scene{min-height:112px}.keyko{width:min(100%,180px);max-height:126px}}