:root{--tp-bg:#e7f4ff;--tp-surface:#ffffff;--tp-ink:#06111f;--tp-ink-muted:rgba(6,17,31,0.72);--tp-ink-faint:rgba(6,17,31,0.4);--tp-accent:#00BCD4;--tp-accent-strong:#007A8A;--tp-green:#00D66B;--tp-red:#FF3B30;--tp-hairline:rgba(6,17,31,0.14);--tp-font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Plus Jakarta Sans',sans-serif;--tp-font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Plus Jakarta Sans',sans-serif;--tp-ease:cubic-bezier(0.32,0.72,0,1)}@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/material-symbols-rounded.woff2) format('woff2')}.material-symbols-rounded{font-family:'Material Symbols Rounded';font-size:24px;display:inline-block;line-height:1;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-smoothing:antialiased}*{box-sizing:border-box;margin:0;padding:0;font-family:var(--tp-font-body);-webkit-tap-highlight-color:transparent}body,html{height:100%}body{background:var(--tp-bg);color:var(--tp-ink);display:flex;justify-content:center;min-height:100vh;min-height:100dvh}#app{width:100%;max-width:480px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--tp-bg)}.tp-topbar{height:64px;flex:0 0 64px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;color:var(--tp-ink);border-bottom:2px solid rgba(6,17,31,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 6px 18px rgba(6,17,31,.07)}.tp-back-btn{width:38px;height:38px;border-radius:12px;border:none;background:rgba(6,17,31,.06);color:var(--tp-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}.tp-title{font-family:var(--tp-font-display);font-weight:800;font-size:16px;flex:1;color:var(--tp-ink)}.tp-screen{flex:1;display:flex;flex-direction:column;padding:20px 18px 32px;gap:22px;overflow-y:auto}.tp-screen[hidden]{display:none}.tp-section-label{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tp-ink-faint);margin-bottom:10px}.tp-diff-row,.tp-mode-row,.tp-submode-row{display:flex;gap:8px}.tp-diff-btn,.tp-mode-btn,.tp-submode-btn{flex:1;padding:13px 10px;border-radius:14px;border:2px solid var(--tp-hairline);background:var(--tp-surface);font-weight:700;font-size:13.5px;color:var(--tp-ink-muted);cursor:pointer;transition:all var(--tp-ease) 150ms}.tp-diff-btn.active,.tp-mode-btn.active,.tp-submode-btn.active{border-color:var(--tp-accent-strong);background:var(--tp-accent);color:#fff;box-shadow:0 4px 0 var(--tp-accent-strong)}.tp-start-btn{margin-top:auto;padding:16px;border-radius:16px;border:none;background:var(--tp-ink);color:#fff;font-family:var(--tp-font-display);font-weight:800;font-size:15.5px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35)}.tp-start-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}.tp-hud{display:flex;align-items:center;gap:16px;padding:12px 4px}.tp-hud-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.tp-hud-stat-label{font-size:10.5px;font-weight:700;color:var(--tp-ink-faint);text-transform:uppercase;letter-spacing:.04em}.tp-hud-stat-val{font-family:var(--tp-font-display);font-weight:800;font-size:18px}.tp-hud-exit{margin-left:auto;width:34px;height:34px;border-radius:50%;border:none;background:var(--tp-surface);color:var(--tp-ink-muted);display:flex;align-items:center;justify-content:center;cursor:pointer}.tp-play-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.tp-play-btn{width:104px;height:104px;border-radius:50%;border:none;background:var(--tp-accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 0 var(--tp-accent-strong);transition:transform var(--tp-ease) 120ms}.tp-play-btn:active{transform:translateY(6px);box-shadow:0 2px 0 var(--tp-accent-strong)}.tp-play-btn svg{width:44px;height:44px}.tp-play-hint{font-size:13px;color:var(--tp-ink-faint);font-weight:600}.tp-feedback{min-height:24px;text-align:center;font-family:var(--tp-font-display);font-weight:800;font-size:15px;opacity:0;transition:opacity var(--tp-ease) 150ms}.tp-feedback.show{opacity:1}.tp-feedback.is-correct{color:var(--tp-green)}.tp-feedback.is-wrong{color:var(--tp-red)}.tp-answer-grid{display:grid;gap:10px;padding-bottom:8px}.tp-answer-grid-3{grid-template-columns:repeat(3,1fr)}.tp-answer-grid-4{grid-template-columns:repeat(2,1fr)}.tp-answer-btn{padding:16px 8px;border-radius:14px;border:2px solid var(--tp-hairline);background:var(--tp-surface);font-weight:700;font-size:13.5px;color:var(--tp-ink);cursor:pointer;transition:all var(--tp-ease) 120ms}.tp-answer-btn:disabled{cursor:default}.tp-answer-btn.is-correct{border-color:var(--tp-green);background:rgba(0,214,107,.14);color:#00693c}.tp-answer-btn.is-wrong{border-color:var(--tp-red);background:rgba(255,59,48,.12);color:#b8241c}.tp-complete-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(6,17,31,.55);padding:20px}.tp-complete-overlay[hidden]{display:none}.tp-complete-card{width:100%;max-width:340px;background:var(--tp-surface);border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}.tp-complete-title{font-family:var(--tp-font-display);font-weight:800;font-size:19px}.tp-complete-stats{display:flex;gap:24px}.tp-complete-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.tp-complete-stat-val{font-family:var(--tp-font-display);font-weight:800;font-size:24px;color:var(--tp-accent-strong)}.tp-complete-stat-label{font-size:11.5px;font-weight:700;color:var(--tp-ink-faint);text-transform:uppercase;letter-spacing:.04em}.tp-complete-actions{display:flex;flex-direction:column;gap:10px;width:100%}.tp-complete-btn{padding:14px;border-radius:14px;border:2px solid var(--tp-hairline);background:var(--tp-surface);font-weight:700;font-size:14px;color:var(--tp-ink);cursor:pointer}.tp-complete-btn-primary{background:var(--tp-ink);color:#fff;border-color:var(--tp-ink)}@media (min-width:1024px){body{padding:48px 24px;align-items:flex-start}#app{max-width:760px;min-height:0;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(6,17,31,.18),0 2px 0 rgba(6,17,31,.06)}.tp-topbar{padding:0 24px}.tp-screen{padding:36px 40px 44px;gap:28px}#tpSetupScreen{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:28px 32px}#tpSetupScreen>div{flex:1 1 200px;min-width:200px}.tp-diff-row,.tp-mode-row,.tp-submode-row{flex-direction:column}.tp-diff-btn,.tp-mode-btn,.tp-submode-btn{padding:15px 14px;font-size:14px}.tp-start-btn{flex:1 1 100%;margin-top:4px;padding:18px;font-size:16.5px}.tp-hud{padding:16px 8px}.tp-hud-stat-val{font-size:22px}.tp-play-area{gap:24px}.tp-play-btn{width:132px;height:132px}.tp-play-btn svg{width:56px;height:56px}.tp-play-hint{font-size:14px}.tp-feedback{font-size:17px}.tp-answer-grid{max-width:560px;margin:0 auto;width:100%}.tp-answer-grid-3{grid-template-columns:repeat(3,1fr)}.tp-answer-grid-4{grid-template-columns:repeat(4,1fr)}.tp-answer-btn{padding:20px 12px;font-size:14.5px}.tp-complete-card{max-width:400px;padding:36px 32px}}.tp-about{display:flex;flex-direction:column;gap:10px;padding-top:4px}.tp-about-title{font-family:var(--tp-font-display);font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--tp-ink)}.tp-about-lede{font-family:var(--tp-font-body);font-size:13px;font-weight:500;line-height:1.7;color:var(--tp-ink-muted);margin:0}.tp-faq{border:2px solid var(--tp-hairline);border-radius:14px;background:var(--tp-surface);overflow:hidden}.tp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;font-family:var(--tp-font-body);font-size:13px;font-weight:800;line-height:1.4;color:var(--tp-ink);cursor:pointer;list-style:none}.tp-faq summary::-webkit-details-marker{display:none}.tp-faq summary::after{content:'expand_more';font-family:'Material Symbols Rounded';font-size:20px;color:var(--tp-ink-faint);transition:transform .2s var(--tp-ease);flex:0 0 auto}.tp-faq[open] summary::after{transform:rotate(180deg)}.tp-faq p{margin:0;padding:0 15px 14px;font-family:var(--tp-font-body);font-size:12.5px;font-weight:500;line-height:1.65;color:var(--tp-ink-muted)}@media(min-width:768px){#tpSetupScreen>.tp-about{flex:1 1 100%}.tp-about-lede,.tp-faq p{font-size:13.5px}}