:root{--claude-crail: #C15F3C;--claude-cloudy: #B1ADA1;--claude-pampas: #F4F3EE;--claude-white: #FFFFFF;--bg-page: var(--claude-pampas);--bg-card: var(--claude-white);--bg-cardElevated: var(--claude-white);--bg-toolbar: var(--claude-white);--text-primary: #2D3748;--text-secondary: #4A5568;--text-muted: var(--claude-cloudy);--text-inverse: var(--claude-white);--stroke-soft: var(--claude-cloudy);--stroke-strong: var(--claude-crail);--accent-blue: var(--claude-crail);--accent-green: var(--claude-crail);--accent-yellow: var(--claude-crail);--accent-red: var(--claude-crail);--bg-cta: var(--claude-crail);--bg-ctaMuted: var(--claude-cloudy);--bg-success: var(--claude-crail);--bg-error: #FF4D4F;--r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-pill:999px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:28px;--s-8:32px;--s-10:40px;--s-12:48px;--shadow-sm:0 2px 8px rgba(193, 95, 60, .1);--shadow-md:0 6px 18px rgba(193, 95, 60, .15);--shadow-lg:0 12px 30px rgba(193, 95, 60, .2);--font:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif }html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg-page);color:var(--text-primary);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--tabbar-height: 64px;--tabbar-icon: 30px;--tabbar-vpad: 0px;--tabbar-bg: #F4F3EE;--tabbar-border: rgba(177,173,161,.24);--tab-active-bg: #FFFFFF;--tab-active-border: rgba(177,173,161,.16);--tab-hit-minw: 56px}.app-shell{height:100dvh;display:flex;flex-direction:column;background:#f4f3ee;max-width:720px;margin:0 auto;overflow:hidden}.page-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px;padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom,0px) + 16px);background:#f4f3ee;position:relative;z-index:1;min-height:0}.page-content-no-header{padding:0;overflow:hidden;display:flex;flex-direction:column}.page-content>*:first-child{margin-top:0}.page-content.question-screen-container>.question-page>.question-header{margin-top:0}.page-content.question-screen-container{padding:0;display:flex;flex-direction:column;height:100%;overflow:hidden}.question-page{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px;padding-bottom:calc(var(--tabbar-height) + env(safe-area-inset-bottom,0px) + 16px)}.question-header{margin-top:0}.bottom-nav{flex-shrink:0;height:calc(var(--tabbar-height) + env(safe-area-inset-bottom,0px));padding:0 16px env(safe-area-inset-bottom,0px);background:var(--tabbar-bg);border-top:1px solid var(--tabbar-border);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;justify-items:center;gap:20px;box-sizing:border-box;position:relative;z-index:10}.bottom-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:var(--tab-hit-minw);width:fit-content;border-radius:14px;padding:0 8px;color:#b1ada1;text-decoration:none;transition:all .2s ease;font-size:28px;line-height:1;cursor:pointer;justify-self:center;-webkit-user-select:none;user-select:none}.bottom-nav a[aria-current=page]{background:var(--tab-active-bg);box-shadow:0 2px 8px #0000000f;color:#c15f3c}.bottom-nav a:focus{outline:2px solid #C15F3C;outline-offset:2px}@supports (padding: max(0px)){.bottom-nav{padding-bottom:max(env(safe-area-inset-bottom),8px)}}.pb-22{padding-bottom:88px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);padding:var(--s-6) var(--s-6) calc(64px + var(--s-8))}@media (max-width:420px){.grid{grid-template-columns:1fr}}.topic-grid-compact{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;padding:0!important}.grid.grid-cols-2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}@media (max-width: 420px){.grid.grid-cols-2,.topic-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}}.topic-grid-compact button{width:100%!important;height:100%!important;min-height:160px!important;max-height:160px!important}.page.px{padding:16px}.card{background:#fff;border:1px solid #B1ADA1;border-radius:16px;padding:12px 14px;margin:12px 0}.row{display:flex;align-items:center;gap:8px}.space-between{justify-content:space-between}.muted{color:#5e5a50}.small{font-size:12px}.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}.topic-chip{background:#f4f3ee;border:1px solid #B1ADA1;border-radius:12px;padding:10px 12px;text-align:center;transition:all .2s ease}.topic-chip.active{background:#c15f3c;color:#fff;border-color:#c15f3c}.btn.primary.wide{width:100%;background:#c15f3c;color:#fff;border:none;border-radius:14px;padding:14px 16px;font-weight:600;transition:all .2s ease}.btn.primary.wide:disabled{opacity:.6;cursor:not-allowed}.link{color:#c15f3c;text-decoration:none;font-size:14px}.error{background:#fee;color:#c33;padding:12px;border-radius:8px;margin:12px 0;border:1px solid #fcc}.number-picker{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;padding:8px;background:#f4f3ee;border:1px solid #B1ADA1;border-radius:12px}.number-picker-btn{width:40px;height:40px;border-radius:50%;border:none;background:#c15f3c;color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.number-picker-btn:hover:not(:disabled){background:#a54f2f;transform:scale(1.05)}.number-picker-btn:active:not(:disabled){transform:scale(.95)}.number-picker-btn:disabled{background:#b1ada1;cursor:not-allowed;opacity:.6}.number-picker-display{min-width:60px;height:40px;background:#fff;border:1px solid #B1ADA1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:#2e3440;-webkit-user-select:none;user-select:none}@supports (-webkit-touch-callout: none){.topic-grid-compact{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:12px!important;padding:0!important}.topic-grid-compact button{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}}@media screen and (max-width: 430px) and (max-height: 932px){.topic-grid-compact{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}.topic-grid-compact button{min-height:110px!important;max-height:110px!important}}.topic-card{background:var(--claude-white);border:1px solid var(--claude-cloudy);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s ease}.topic-card:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}.topic-card-compact{background:var(--claude-white);border:1px solid var(--claude-cloudy);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:118px;max-height:118px}.topic-card-compact:active{transform:scale(.98);box-shadow:var(--shadow-sm)}.tc-icon{width:88px;height:88px;border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,#6e7cff,#7c33e3 60%,#321b8f);margin:auto;display:flex;align-items:center;justify-content:center;font-size:32px}.tc-icon-compact{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#c15f3c,#e07a5f);margin:0 auto var(--s-3);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 4px #0000001a}.tc-title{margin:var(--s-4) 0;font-size:18px;line-height:1.2;text-align:left;color:var(--text-primary)}.tc-title-compact{margin:var(--s-2) 0;font-size:14px;line-height:1.2;text-align:center;color:var(--text-primary);font-weight:600}.tc-row{display:flex;align-items:center;gap:var(--s-4)}.tc-row-compact{display:flex;align-items:center;gap:var(--s-2);justify-content:center}.tc-xp{color:var(--text-secondary);font-weight:600}.tc-xp-compact{color:var(--text-secondary);font-weight:600;font-size:12px}.tc-badge{display:none}.topic-card.is-new .tc-badge{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-2);padding:4px 10px;border-radius:999px;background:#22d3a61f;color:var(--accent-green);font-size:12px;font-weight:600}.tc-badge-compact{display:none}.topic-card-compact.is-new .tc-badge-compact{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s-1);padding:2px 6px;border-radius:999px;background:#22d3a61f;color:var(--accent-green);font-size:10px;font-weight:600}.progress-ring{--p:0;--sz:36;width:var(--sz);height:var(--sz);border-radius:50%;background:conic-gradient(var(--accent-blue) calc(var(--p)*1%),#203242 0);display:grid;place-items:center;position:relative}.progress-ring:after{content:attr(data-p) "%";font-size:10px;color:var(--text-secondary);font-weight:600}.progress-ring[data-p]{--p: calc(attr(data-p number)*1) }.progress-ring-compact{--p:0;--sz:24;width:var(--sz);height:var(--sz);border-radius:50%;background:conic-gradient(var(--accent-blue) calc(var(--p)*1%),#203242 0);display:grid;place-items:center;position:relative}.progress-ring-compact:after{content:attr(data-p) "%";font-size:8px;color:var(--text-secondary);font-weight:600}.progress-ring-compact[data-p]{--p: calc(attr(data-p number)*1) }.header{position:sticky;top:0;z-index:30;background:var(--bg-page);padding:var(--s-6) 0;paddingTop:calc(env(safe-area-inset-top) + var(--s-6));border-bottom:1px solid var(--stroke-soft)}.header>*{max-width:720px;margin:0 auto;padding:0 16px}.header h1{margin:0;font-size:28px;font-weight:700;color:var(--text-primary)}.answer{height:64px;border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:2px solid var(--stroke-strong);color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-size:18px;font-weight:600}.answer.selected{border-color:var(--accent-blue);background:#3a8fff14}.answer.correct{background:#17c9642e;border-color:var(--bg-success)}.answer.wrong{background:#ff4d4f1f;border-color:var(--bg-error)}.cta{position:sticky;bottom:calc(64px + var(--s-6));width:100%;background:var(--bg-cta);color:var(--text-inverse);border:none;height:56px;border-radius:var(--r-xl);font-size:18px;font-weight:700;box-shadow:var(--shadow-md);cursor:pointer;transition:all .2s ease}.progress{height:6px;border-radius:6px;background:#1d2a36;overflow:hidden;margin:var(--s-4) 0}.progress>i{display:block;height:100%;width:35%;background:var(--accent-blue);transition:width .3s ease}.inline-code-chip{display:inline-block;padding:2px 6px;border-radius:6px;background-color:#fff;border:1px solid #ffd2c2;color:#c54a2f;font:inherit;line-height:1.3;white-space:normal;word-break:break-word;margin:0 2px;vertical-align:baseline}.code-block-inline{display:block;max-width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:15px;line-height:1.45;color:#c54a2f;background:#fff5f0;padding:8px 10px;border-radius:8px;white-space:pre-wrap;word-break:break-word;margin:8px 0;overflow-x:auto}.code-block-inline code{background:none;padding:0;border:none;font-family:inherit;font-size:inherit;color:inherit;white-space:pre-wrap;word-break:break-word}.code-block{display:block;max-width:100%;box-sizing:border-box;background:var(--claude-pampas);border:1px solid var(--stroke-soft);border-radius:12px;padding:12px 16px;margin:8px 0;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;line-height:1.45}.code-block code{background:none;padding:0;border:none;font-family:inherit;font-size:inherit;color:#b54a2c;white-space:pre-wrap;word-break:break-word}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6a737d}.token.punctuation{color:#24292e}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#d73a49}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#032f62}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.atrule,.token.attr-value,.token.keyword{color:#d73a49}.token.function,.token.class-name{color:#6f42c1}.token.regex,.token.important,.token.variable{color:#e36209}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}button[style*="color: white"] .token,button[style*="color: white"] code,button[style*="color: white"] .token.comment,button[style*="color: white"] .token.prolog,button[style*="color: white"] .token.doctype,button[style*="color: white"] .token.cdata,button[style*="color: white"] .token.punctuation,button[style*="color: white"] .token.namespace,button[style*="color: white"] .token.property,button[style*="color: white"] .token.tag,button[style*="color: white"] .token.boolean,button[style*="color: white"] .token.number,button[style*="color: white"] .token.constant,button[style*="color: white"] .token.symbol,button[style*="color: white"] .token.deleted,button[style*="color: white"] .token.selector,button[style*="color: white"] .token.attr-name,button[style*="color: white"] .token.string,button[style*="color: white"] .token.char,button[style*="color: white"] .token.builtin,button[style*="color: white"] .token.inserted,button[style*="color: white"] .token.operator,button[style*="color: white"] .token.entity,button[style*="color: white"] .token.url,button[style*="color: white"] .token.atrule,button[style*="color: white"] .token.attr-value,button[style*="color: white"] .token.keyword,button[style*="color: white"] .token.function,button[style*="color: white"] .token.class-name,button[style*="color: white"] .token.regex,button[style*="color: white"] .token.important,button[style*="color: white"] .token.variable{color:#fff!important}button[style*="color: white"] .inline-code-chip{background:#fff3!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important}button[style*="color: white"] .code-block-inline{background:#ffffff26!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important}button[style*="color: white"] .code-block-inline code{color:#fff!important}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.results-content{width:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:0}.results-inner{max-width:720px;margin:0 auto;padding:0 16px;width:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.results-header{width:100%;text-align:center;margin-top:12px;margin-bottom:24px;box-sizing:border-box}.results-header-title{font-size:24px;font-weight:600;color:#2a2e34;margin:0 0 8px;line-height:1.2}.results-header-subtitle{font-size:14px;color:#6b7280;margin:0;line-height:1.4}.results-mascot{height:220px;display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:24px}.results-mascot img{max-width:200px;max-height:200px;width:auto;height:auto;object-fit:contain}.results-stats{display:flex;gap:12px;width:100%;margin-bottom:16px;box-sizing:border-box}.results-stat-card{flex:1;background:#fff;border-radius:12px;padding:12px;border:1px solid #B1ADA1;box-shadow:0 2px 8px #0000000d;text-align:center;min-width:0;box-sizing:border-box}.results-stat-label{font-size:13px;color:#6b7280;margin-bottom:4px}.results-stat-value{font-size:16px;font-weight:600;color:#2a2e34;font-variant-numeric:tabular-nums}.results-details{text-align:center;font-size:14px;color:#6b7280;margin:0 0 16px}.results-buttons{display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.results-button-primary,.results-button-secondary{width:100%;border-radius:12px;padding:16px 24px;font-size:16px;cursor:pointer;transition:all .2s ease;min-height:48px;border:none;font-family:inherit;box-sizing:border-box}.results-button-primary{background:#c15f3c;color:#fff;font-weight:600}.results-button-secondary{background:transparent;color:#2a2e34;border:1px solid #B1ADA1;font-weight:500}