:root{--page-bg: #eceff3;--panel: #ffffff;--panel-soft: #f6f8fc;--ink: #161d34;--ink-soft: #64708a;--line: #d7deea;--primary: #f1bf1d;--primary-strong: #e3ac00;--primary-soft: #f7ecd0;--success: #44ca8e;--danger: #ef6767;--shadow: 0 18px 40px rgba(22, 29, 52, .14);--radius-xl: 30px;--radius-lg: 22px;--radius-md: 16px;--mono: "Menlo", "Consolas", "Monaco", monospace;--keyboard-height: 280px;--stage-max: 1720px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--page-bg);color:var(--ink)}body{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif;overflow:hidden}button,a{font:inherit;color:inherit}a{text-decoration:none}html.mode-normal,html.mode-hard{--keyboard-height: 280px}.srOnly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}.gameApp{width:min(100%,var(--stage-max));min-height:100dvh;margin:0 auto;position:relative}.playScreen{min-height:100dvh;padding:18px 22px calc(var(--keyboard-height) + 22px);display:flex;flex-direction:column;gap:10px}.topPanel{width:100%;margin-inline:0}.gameHeader{display:flex;align-items:center;justify-content:flex-start;min-height:0;margin-bottom:0;width:100%}.iconBtn{width:48px;height:48px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-size:30px;line-height:1;cursor:pointer}.iconBtnPrimary{background:#f1bf1d47;border:1px solid rgba(241,191,29,.42);font-size:22px}.iconBtn:active{transform:translateY(1px)}.serviceLogo{position:fixed;top:12px;left:12px;z-index:35;display:flex;align-items:center}.serviceLogoImage{display:block;width:64px;height:64px;object-fit:contain}.problemBox{margin-top:-8px;position:relative;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;width:min(100%,1540px);margin-inline:auto}.startHint{position:absolute;inset:50px 12px auto;border-radius:var(--radius-lg);border:2px dashed rgba(241,191,29,.7);background:#ffffffe0;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:92px;text-align:center;z-index:7;pointer-events:none;transition:opacity .18s ease}.startHint.hide{opacity:0}.startHintTitle{font-weight:900;font-size:18px}.startHintSub{margin-top:5px;font-size:13px;color:var(--ink-soft)}.questionCard{width:min(100%,1180px);margin-top:6px;position:relative;z-index:3;text-align:center;height:clamp(320px,40vh,430px);border-radius:28px;border:2px solid rgba(241,191,29,.36);background:linear-gradient(180deg,#ffffffe6,#f6f9fcf5);box-shadow:0 14px 26px #161d3414;padding:20px 16px 22px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.cardTimer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(170px,17vw,260px);height:clamp(170px,17vw,260px);pointer-events:none;opacity:.24;z-index:0}.cardTimerRing{--progress: 1;width:100%;height:100%;border-radius:999px;background:conic-gradient(#f1bf1dd9 calc(var(--progress) * 1turn),#b0bcd157 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0)}.jp1{margin-top:0;font-size:clamp(34px,3.4vw,52px);line-height:1.1;font-weight:900;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em;position:relative;z-index:1}.jp2{margin-top:6px;color:var(--ink-soft);font-size:clamp(15px,1.4vw,20px);font-weight:800;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}.typeLine{margin-top:10px;font-size:clamp(24px,2.7vw,36px);line-height:1.16;font-weight:900;font-family:var(--mono);text-transform:none;letter-spacing:.2em;display:block;text-align:center;overflow:hidden;white-space:nowrap;min-height:calc(1.16em + 7px);width:100%;padding-left:.2em;position:relative;z-index:1}.typed,.remain{display:inline-block;border-bottom:5px solid #d1dbe9;line-height:1.12;padding-bottom:2px;vertical-align:baseline}.typed{color:var(--primary-strong);border-bottom-color:var(--primary)}.remain{color:#8e9bb4}.correctToast{position:absolute;top:8px;left:50%;transform:translate(-50%,-24px) scale(.92);border-radius:999px;background:#fff;border:1px solid rgba(241,191,29,.35);color:var(--primary-strong);font-weight:900;letter-spacing:.06em;padding:6px 12px;opacity:0;pointer-events:none;z-index:9}.problemBox.correct .correctToast{animation:toastPop .55s ease}.problemBox.wrong .questionCard{animation:shake .22s ease}.problemBox.correct .questionCard{box-shadow:0 14px 26px #161d3414,0 0 0 6px #f1bf1d1f}.problemBox[data-combo-level="1"] .questionCard{border-color:#f1bf1d80}.problemBox[data-combo-level="2"] .questionCard{border-color:#63b5ff8f}.problemBox[data-combo-level="3"] .questionCard{border-color:#a882ffa6}.problemBox[data-combo-level="4"] .questionCard{border-color:#f37cbfb8}.problemBox[data-combo-level="5"] .questionCard{border-color:#ffa366c7}.problemBox.comboBoost .questionCard{animation:comboHeat var(--combo-heat-dur, .42s) ease}.comboMeter{position:absolute;top:34px;left:50%;transform:translate(-50%,-20px) scale(.82);display:flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--combo-meter-border, rgba(241, 191, 29, .6));color:var(--combo-meter-color, #ffe090);background:linear-gradient(140deg,var(--combo-meter-bg1, rgba(241, 191, 29, .36)),var(--combo-meter-bg2, rgba(247, 148, 29, .24)));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;z-index:10}.comboMeter.show{animation:comboPop var(--combo-pop-duration, .64s) cubic-bezier(.2,.8,.2,1)}.comboMeterCount{font-size:26px;line-height:1;font-weight:900}.comboMeterUnit{font-size:14px;font-weight:900;letter-spacing:.06em}.comboMeterTier{display:none;font-size:12px;font-weight:900;letter-spacing:.08em}.comboMeterTier.show{display:inline}.comboBurst{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}.comboBurst.flash:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,calc(var(--flash-alpha, .2))),#fff0 65%);transform:scale(var(--flash-scale, 1));animation:flashFade var(--flash-dur, .32s) ease}.comboParticle,.comboRing,.comboTag,.comboFirework{position:absolute;pointer-events:none}.comboParticle{left:var(--x, 50%);top:var(--y, 50%);width:10px;height:10px;border-radius:3px;background:hsl(var(--hue, 42) 94% 63%);box-shadow:0 0 12px hsla(var(--hue, 42),95%,63%,.7);transform:translate(-50%,-50%) scale(var(--scale-from, .4));animation:particleFly var(--dur, .7s) ease-out var(--delay, 0ms) forwards}.comboParticle.round{border-radius:999px}.comboParticle.slim{width:6px;height:14px}.comboParticle.triangle{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid hsl(var(--hue, 42) 95% 62%);background:transparent;box-shadow:none}.comboParticle.diamond{transform:translate(-50%,-50%) rotate(45deg) scale(var(--scale-from, .4))}.comboParticle.heavy{width:14px;height:14px}.comboParticle.glow{filter:saturate(1.12) brightness(1.08)}.comboParticle.ray{width:4px;height:16px}.comboRing{left:var(--x, 50%);top:var(--y, 50%);width:var(--ring-size, 130px);height:var(--ring-size, 130px);border-radius:999px;border:var(--ring-thick, 2px) solid hsla(var(--ring-hue, 45),95%,68%,.85);transform:translate(-50%,-50%) scale(.4);animation:ringExpand var(--ring-dur, .68s) ease-out var(--ring-delay, 0ms) forwards}.comboTag{left:var(--x, 50%);top:var(--y, 50%);transform:translate(-50%,-50%);padding:4px 8px;border-radius:10px;background:hsla(var(--tag-hue, 42),95%,66%,.9);color:#172033;font-weight:900;font-size:11px;letter-spacing:.08em;animation:tagFly var(--tag-dur, .7s) ease-out var(--tag-delay, 0ms) forwards}.comboTag.big{font-size:13px}.comboFirework{left:var(--fw-x, 50%);top:var(--fw-y, 50%);width:var(--fw-size, 66px);height:var(--fw-size, 66px);transform:translate(-50%,-50%) scale(.32);border-radius:999px;border:2px solid hsla(var(--fw-hue, 42),95%,64%,.75);animation:fireworkPop var(--fw-dur, .9s) ease-out var(--fw-delay, 0ms) forwards}.comboFirework:before,.comboFirework:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:100%;background:hsla(var(--fw-hue, 42),98%,65%,.85);transform:translate(-50%,-50%)}.comboFirework:after{transform:translate(-50%,-50%) rotate(90deg)}.keyboardDock{position:fixed;left:0;right:0;bottom:0;z-index:20}.keyboardDock.hide{display:none}.keyboardWrap{width:min(var(--stage-max),calc(100% - 20px));margin:0 auto;background:#dbe1ea;border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);border-top:1px solid rgba(22,29,52,.07);padding:10px 14px 16px;box-shadow:0 -12px 30px #161d3426}.keyboardHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding:0 8px}.kbdLabel{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--ink-soft)}.legend{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:11px;font-weight:700}.dot{width:8px;height:8px;border-radius:999px;background:#9aa5ba}.dot.next{background:var(--primary)}.keyboard{display:flex;flex-direction:column;gap:8px;width:100%;margin:0 auto;overflow-x:auto;padding-bottom:2px;align-items:center}.krow{display:grid;grid-template-columns:repeat(32,30px);gap:8px;width:max-content;min-width:max-content;margin:0}.key{position:relative;grid-column:span var(--span, 2);width:100%;min-width:0;height:48px;padding:0 8px;border-radius:14px;border:1px solid rgba(22,29,52,.08);background:#f6f8fb;color:#212b42;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -3px #161d340f;-webkit-user-select:none;user-select:none;white-space:nowrap}.key[data-finger=LP],.key[data-finger=RP]{background:#fde8ea;border-bottom:3px solid #f0879a}.key[data-finger=LR],.key[data-finger=RR]{background:#fdf0d8;border-bottom:3px solid #f0bf6a}.key[data-finger=LM],.key[data-finger=RM]{background:#dcf5ea;border-bottom:3px solid #5cc9a0}.key[data-finger=LI],.key[data-finger=RI]{background:#e1edfd;border-bottom:3px solid #7aaef2}.key[data-finger=TH]{background:#efe6fd;border-bottom:3px solid #b58cf0}.key.next{background:var(--primary);color:#1e2539;transform:none;box-shadow:0 0 0 3px #e3ac00a6,0 10px 18px #e3ac004d;animation:nextPulse .9s ease-in-out infinite}.key.pressed,.key.wrong{box-shadow:inset 0 -2px #161d3414}.key.home:after{content:"";width:12px;height:2px;border-radius:999px;background:#161d3447;position:absolute;bottom:6px}.key.bump:after{height:3px}.fingerGuide{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:2px 0 8px}.fingerHand{display:flex;gap:6px;align-items:flex-end}.fingerGuideHint{font-size:11px;font-weight:800;color:#6b7488;letter-spacing:.04em}.fingerDot{position:relative;width:16px;height:26px;border-radius:999px;background:var(--fg, #cfd6e4);opacity:.45;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease}.fingerDot.thumb{width:22px;height:18px}.fingerDot[data-finger-id=LP],.fingerDot[data-finger-id=RP]{--fg: #f0879a}.fingerDot[data-finger-id=LR],.fingerDot[data-finger-id=RR]{--fg: #f0bf6a}.fingerDot[data-finger-id=LM],.fingerDot[data-finger-id=RM]{--fg: #5cc9a0}.fingerDot[data-finger-id=LI],.fingerDot[data-finger-id=RI]{--fg: #7aaef2}.fingerDot.thumb{--fg: #b58cf0}.fingerDot.active{opacity:1;transform:translateY(-4px) scale(1.18);box-shadow:0 0 0 3px #ffffffb3,0 6px 14px var(--fg)}.fingerDot.active:after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%);font-size:10px;font-weight:900;color:#3a4258;white-space:nowrap}@keyframes nextPulse{0%,to{box-shadow:0 0 0 3px #e3ac00a6,0 10px 18px #e3ac004d}50%{box-shadow:0 0 0 5px #e3ac0080,0 12px 22px #e3ac0066}}.problemBox.spicy .questionCard{box-shadow:0 0 0 3px #f472368c,0 14px 30px #f4723638;background:linear-gradient(160deg,#fff7ed,#ffedd5)}.problemBox.spicy .questionCard:before{content:"⚡ いじわる";position:absolute;top:10px;left:50%;transform:translate(-50%);background:#fb7234;color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em;padding:3px 12px;border-radius:999px;box-shadow:0 6px 14px #f4723666;z-index:5}.resultBest{margin-top:4px;font-size:13px;font-weight:800;color:#6b7488}.resultBest.isNewBest{color:#e0820c;animation:toastPop .6s ease}.courseVisualHard{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#fff1e6,#ffe0c2)}.courseVisualHard .spicyIcon{font-size:32px}.courseEyebrow.hard{color:#e0820c}.progressHard{background:linear-gradient(90deg,#fb923c,#f97316)!important}html.timeLow .cardTimer{opacity:.5;animation:timeLowBeat .8s ease-in-out infinite}html.timeLow .cardTimerRing{background:conic-gradient(#ef6767f2 calc(var(--progress) * 1turn),#b0bcd14d 0)}html.timeLow .questionCard{animation:timeLowCard .8s ease-in-out infinite}@keyframes timeLowBeat{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}@keyframes timeLowCard{0%,to{box-shadow:0 14px 26px #161d3414}50%{box-shadow:0 14px 26px #161d3414,0 0 0 4px #ef676747}}.soundToggle{position:fixed;top:12px;right:12px;width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 12px #161d341f;z-index:50;display:flex;align-items:center;justify-content:center}.soundToggle.off{opacity:.55}.clearStamp{position:absolute;top:16%;left:50%;transform:translate(-50%,-50%) scale(.4);font-size:clamp(54px,8vw,104px);opacity:0;pointer-events:none;z-index:7;filter:drop-shadow(0 6px 12px rgba(244,180,40,.45))}.clearStamp.show{animation:stampPop .62s ease-out}@keyframes stampPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-12deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(5deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}.aboutSeo{max-width:520px;margin:18px auto 6px;padding:16px 18px;background:#ffffffb3;border-radius:16px;color:#4a5468;font-size:13px;line-height:1.75;text-align:left}.aboutSeo h2{font-size:15px;margin:0 0 8px;color:#2a3346}.aboutSeo h3{font-size:13px;margin:12px 0 4px;color:#2a3346}.aboutSeo p{margin:4px 0}.aboutSeo ul{margin:4px 0;padding-left:1.2em}.titleOverlay{position:fixed;inset:0;display:none;z-index:40;overflow-y:auto;background:radial-gradient(circle at 12% 4%,rgba(241,191,29,.2),transparent 34%),radial-gradient(circle at 87% 12%,rgba(241,191,29,.16),transparent 30%),#f8f8f5}.titleOverlay.show{display:block}.topScreen{width:min(100%,var(--stage-max));min-height:auto;margin:0 auto;padding:14px 22px 28px;position:relative;display:block}.topHeader{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(22,29,52,.08)}.iconMini{width:36px;height:36px;border-radius:999px;border:0;background:transparent;font-size:18px;color:#c2a13f;display:flex;align-items:center;justify-content:center}.iconMiniPrimary{background:#f1bf1d57}.topTitle{margin:0;text-align:center;font-size:18px;font-weight:900}.topDecor{position:absolute;left:10px;right:10px;top:78px;height:54px;pointer-events:none;color:#f1bf1dc7}.cloud{position:absolute;font-size:32px}.cloudLeft{left:8px;top:12px}.cloudRight{right:16px;top:16px}.star{position:absolute;font-size:16px}.starA{left:38px;top:8px}.starB{right:36px;top:4px}.topHero{margin:18px auto 0;width:min(100%,920px);text-align:center}.mascotRing{width:140px;height:140px;border-radius:999px;margin:0 auto;border:5px solid var(--primary);background:#f1bf1d2e;display:flex;align-items:center;justify-content:center}.mascotAvatar{width:112px;height:112px;border-radius:999px;background:#fbe6bf;display:flex;align-items:center;justify-content:center;font-size:56px}.topHero h3{margin:14px 0 0;font-size:clamp(24px,2.2vw,34px);line-height:1.18}.topHero p{margin:6px 0 0;color:var(--ink-soft);font-size:clamp(15px,1.2vw,19px);font-weight:700}.heroChip{display:inline-flex;margin-top:8px;border-radius:999px;background:#f1bf1d3d;color:#c59713;font-size:14px;font-weight:800;padding:7px 12px}.courseList{margin:20px auto 0;width:min(100%,920px);display:grid;grid-template-columns:1fr;gap:14px}.courseCard{border:2px solid rgba(22,29,52,.08);border-radius:28px;background:var(--panel);box-shadow:0 8px 18px #161d340f;overflow:hidden;transition:border-color .16s ease,transform .16s ease}.courseCard[role=radio]{cursor:pointer}.courseCard.selected{border-color:#f1bf1db8;transform:translateY(-1px)}.courseVisual{height:150px;background:linear-gradient(140deg,#f4dba6,#f0ebd0);display:flex;align-items:center;justify-content:center}.courseVisualEasy{background:radial-gradient(circle at 50% -24%,rgba(255,255,255,.7),transparent 48%),linear-gradient(160deg,#f4d89c,#e5d8bb)}.courseVisualNormal{background:linear-gradient(0deg,#0f251394,#0f251394),linear-gradient(180deg,#3f6f46,#14361f)}.courseVisualLocked{background:linear-gradient(180deg,#535353,#1f1f1f)}.lockIcon{color:#fff;font-size:32px}.miniKeyboard{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:80%}.miniKeyboard span{height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#ffffffad;color:#7d671e;font-size:11px;font-weight:900}.courseBody{padding:12px 14px 14px}.courseEyebrow{font-size:12px;font-weight:900;letter-spacing:.06em;color:#ef9f00}.courseEyebrow.normal{color:#3fb57d}.courseEyebrow.locked{color:#ff9355}.courseBody h4{margin:4px 0;font-size:clamp(24px,1.8vw,30px);line-height:1.15}.courseBody p{margin:0;color:var(--ink-soft);font-size:14px;font-weight:700}.courseActions{margin-top:10px;display:flex;align-items:center;gap:10px}.courseProgress{flex:1;height:8px;border-radius:999px;background:#e3e8f1;overflow:hidden}.courseProgress span{display:block;height:100%;border-radius:inherit;background:var(--primary)}.courseProgress span.progressNormal{background:var(--success)}.courseProgress span.progressLocked{background:#c6ccd7}.courseStartBtn{border:0;border-radius:999px;background:var(--primary);color:#1f2538;min-height:38px;min-width:108px;padding:0 16px;font-size:16px;font-weight:900;cursor:pointer}.courseStartBtn:disabled{background:#dee4ee;color:#8693a8;cursor:default}.courseCard.locked{opacity:.84;grid-column:span 1}.titleStartBtn{display:block;margin:16px auto 0;width:min(100%,920px);border:0;border-radius:999px;min-height:46px;background:#f3b900;color:#1f2538;font-size:18px;font-weight:900;cursor:pointer}.topNav{position:static;width:min(100%,920px);margin:16px auto 0;background:#ffffffeb;border-top:1px solid rgba(22,29,52,.1);border-radius:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;z-index:2}.topNavItem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#9da8bc;font-size:18px}.topNavItem small{font-size:11px;font-weight:700}.topNavItem.active{color:#f0b800}.resultOverlay{position:fixed;inset:0;display:none;z-index:60;background:#f2f2f2;overflow-y:auto}.resultOverlay.show{display:block}.resultScreen{width:min(100%,1080px);min-height:100dvh;margin:0 auto;padding:14px 22px 20px;display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"header header" "card actions" "shapes shapes";gap:16px 18px;align-content:start}.resultHeader{grid-area:header;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;border-bottom:1px solid rgba(22,29,52,.08);padding-bottom:8px}.resultHeader h2{margin:0;text-align:center;font-size:22px;font-weight:900}.closeRound{font-size:34px;color:#6f7890}.headSpacer{width:46px;height:46px}.resultCard{grid-area:card;margin-top:0;border-radius:40px;background:#f7f2df;border:1px solid rgba(241,191,29,.3);padding:14px 12px 16px}.resultHero{position:relative;min-height:112px;display:flex;align-items:center;justify-content:center}.trophy{width:120px;height:120px;border-radius:999px;border:4px solid var(--primary);background:#f1bf1d29;display:flex;align-items:center;justify-content:center;font-size:60px}.spark{position:absolute;left:20px;top:14px;color:#f1bf1ddb;font-size:26px}.spark.right{left:auto;right:24px;top:22px}.resultTitle{margin-top:6px;text-align:center;font-size:clamp(44px,5vw,58px);font-weight:900}.resultSub{margin:6px 0 0;text-align:center;font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--ink-soft)}.resultStars{margin-top:8px;text-align:center;color:var(--primary-strong);font-size:clamp(44px,4.8vw,64px);letter-spacing:.28em;padding-left:.28em}.resultReward{margin:10px auto 0;width:fit-content;border-radius:999px;background:#f1bf1d33;padding:7px 16px;font-size:clamp(16px,1.7vw,22px);font-weight:900}.resultGrid{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.resultItem{border-radius:var(--radius-lg);background:#f5f7fb;border:1px solid #dde4ef;padding:10px 12px}.resultItem.wide{grid-column:span 1}.resultItem .k{color:var(--ink-soft);font-size:15px;font-weight:700}.resultItem .v{margin-top:4px;font-size:clamp(34px,3.6vw,48px);line-height:1.1;font-weight:900}.resultItem .v small{margin-left:6px;font-size:clamp(16px,1.6vw,22px);color:var(--ink-soft)}.resultActions{grid-area:actions;margin-top:0;display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:16px}.resultBtn{border:0;border-radius:999px;min-height:44px;font-size:clamp(22px,2.4vw,30px);font-weight:900;cursor:pointer}.resultBtn.ghost{background:#ecf1f7;border:2px solid #d5deeb;color:#263046}.resultBtn.primary{background:var(--primary);color:#1f2538}.resultBtn.share{background:#38bdf8;color:#06324a}.resultShapes{grid-area:shapes;margin-top:12px;text-align:center;color:#f1bf1de6;letter-spacing:.24em;font-size:30px}@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-24px) scale(.84)}25%{opacity:1;transform:translate(-50%,-36px) scale(1)}to{opacity:0;transform:translate(-50%,-52px) scale(.95)}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}to{transform:translate(0)}}@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-16px) scale(.8)}28%{opacity:1;transform:translate(-50%,-28px) scale(var(--combo-pop-scale, 1.12))}to{opacity:0;transform:translate(-50%,var(--combo-pop-end-y, -18px)) scale(1)}}@keyframes flashFade{0%{opacity:.95}to{opacity:0}}@keyframes particleFly{0%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx, 0px)),calc(-50% + var(--dy, 0px))) rotate(var(--rot, 0deg)) scale(var(--scale-to, .92))}}@keyframes ringExpand{0%{opacity:.9;transform:translate(-50%,-50%) scale(.38)}to{opacity:0;transform:translate(-50%,-50%) scale(1.28)}}@keyframes tagFly{0%{opacity:0;transform:translate(-50%,-50%)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--tag-dx, 0px)),calc(-50% + var(--tag-dy, -70px)))}}@keyframes fireworkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.32)}}@keyframes comboHeat{0%{transform:translate(0) scale(1)}45%{transform:translate(var(--combo-heat-x, 1px),var(--combo-heat-y, -2px)) scale(var(--combo-heat-scale, 1.02))}to{transform:translate(0) scale(1)}}@media(max-width:1024px){.playScreen{padding:14px 14px calc(var(--keyboard-height) + 18px)}.topPanel,.problemBox{width:min(100%,820px)}.problemBox{min-height:410px}.keyboardWrap{width:min(100%,820px)}.topScreen{padding:12px 12px 20px}.topDecor{top:72px}.topHero{margin-top:18px}.resultScreen{width:min(100%,780px);grid-template-columns:1fr;grid-template-areas:"header" "card" "actions" "shapes";padding:12px 14px 18px}.resultActions{position:static}}@media(max-width:760px){.keyboard{gap:6px}.keyboardWrap{width:min(100%,100%);border-top-left-radius:24px;border-top-right-radius:24px}.krow{grid-template-columns:repeat(32,24px);gap:6px}.key{height:42px;padding:0 6px;border-radius:12px;font-size:12px}}@media(max-width:420px){.typeLine{font-size:30px;letter-spacing:.16em}.courseBody h4{font-size:28px}.topHero h3{font-size:30px}.topHero p{font-size:16px}.resultTitle{font-size:46px}}