:root{--bg:#fafafa;--surface:#fff;--text:#1f2430;--text-soft:#5b6472;--border:#e5e2da;--subtle:#f1f1f1;--muted:#4b5563;--muted-bg:#f3f4f6;--orange:#f97316;--orange-strong:#c2410c;--gold:#f59e0b;--primary-tint:#fed7aa;--green:#15803d;--green-soft:#dcfce7;--success-border:#bbf7d0;--warning:#b45309;--warning-bg:#fef3c7;--warning-border:#fde68a;--info:#1d4ed8;--info-bg:#dbeafe;--danger:#e11d48;--danger-bg:#fef2f2;--notice-bg:#ffedd5;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}#root{min-height:100svh}h1,h2,p{margin:0}.app{background:var(--bg);flex-direction:column;gap:20px;max-width:480px;min-height:100svh;margin:0 auto;padding:24px 20px 32px;display:flex}.topbar{align-items:center;gap:14px;display:flex}.avatar-wrap{position:relative}.avatar{background:var(--primary-tint);border:3px solid var(--orange);border-radius:999px;place-items:center;width:64px;height:64px;font-size:34px;display:grid}.level-pip{min-width:24px;height:24px;color:var(--surface);background:var(--orange-strong);border:2px solid var(--surface);border-radius:12px;place-items:center;padding:0 6px;font-size:13px;font-weight:700;display:grid;position:absolute;bottom:-2px;right:-2px}.identity{flex:1;min-width:0}.name{letter-spacing:-.01em;font-size:24px;font-weight:800;line-height:1.15}.power{color:var(--text-soft);font-size:14px}.power strong{color:var(--orange-strong)}.streak{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700}.xp{flex-direction:column;gap:6px;display:flex}.xp-labels{color:var(--text-soft);justify-content:space-between;font-size:14px;font-weight:600;display:flex}.xp-bar{background:var(--subtle);border-radius:999px;height:10px;overflow:hidden}.xp-fill{background:linear-gradient(90deg, var(--gold), var(--orange));border-radius:999px;height:100%;transition:width .4s}.briefing{text-align:center}.briefing-title{font-size:20px;font-weight:800;line-height:1.3}.briefing-sub{color:var(--text-soft);margin-top:2px;font-size:14px}.missions{gap:12px;display:grid}.mission{text-align:left;background:var(--surface);border:1px solid var(--border);cursor:pointer;font:inherit;border-radius:12px;grid-template-columns:auto 1fr auto;grid-template-areas:"icon body status""icon body xp";align-items:center;gap:4px 12px;padding:16px;transition:transform .12s,box-shadow .12s;display:grid}.mission:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.mission:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.mission-icon{grid-area:icon;font-size:30px;line-height:1}.mission-body{flex-direction:column;grid-area:body;display:flex}.mission-title{font-size:17px;font-weight:700;line-height:1.3}.mission-subtitle{color:var(--text-soft);font-size:14px}.mission-status{white-space:nowrap;border-radius:999px;grid-area:status;padding:4px 10px;font-size:13px;font-weight:700}.mission-status.done{background:var(--green-soft);color:var(--green)}.mission-status.recommended{background:var(--warning-bg);color:var(--warning)}.mission-status.available{background:var(--info-bg);color:var(--info)}.mission-status.locked{background:var(--muted-bg);color:var(--muted)}.mission-xp{color:var(--orange-strong);grid-area:xp;font-size:14px;font-weight:700}.transformations{flex-direction:column;gap:10px;display:flex}.section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);font-size:14px;font-weight:700}.tf-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tf{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;display:flex}.tf.locked{opacity:.45;filter:grayscale()}.tf-icon{font-size:24px;line-height:1}.tf-label{color:var(--text-soft);font-size:13px;font-weight:700}.notice{text-align:center;color:var(--orange-strong);background:var(--notice-bg);border:1px solid var(--primary-tint);border-radius:12px;padding:12px;font-size:14px;font-weight:600}.footer{color:var(--text-soft);justify-content:center;gap:6px;margin-top:auto;font-size:13px;display:flex}.footer-dot{opacity:.6}.back{font:inherit;color:var(--text-soft);background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;align-self:flex-start;padding:8px 14px;font-size:14px;font-weight:700}.back:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.back.primary{color:var(--surface);background:var(--orange-strong);border-color:var(--orange-strong);align-self:center}.reto-head{align-items:center;gap:12px;margin-top:8px;display:flex}.reto-icon{font-size:34px;line-height:1}.reto-title{font-size:20px;font-weight:800;line-height:1.2}.reto-sub{color:var(--text-soft);font-size:14px}.reto-question{font-size:20px;font-weight:600;line-height:1.45}.reto-question-row{align-items:flex-start;gap:10px;display:flex}.reto-question-row .reto-question{flex:1}.speak{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:999px;flex:none;padding:10px;font-size:20px;line-height:1}.speak:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.reto-options{gap:10px;display:grid}.reto-option{text-align:left;font:inherit;background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:16px;font-size:17px;font-weight:700;transition:transform .12s,box-shadow .12s,border-color .12s;display:flex}.reto-option:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.reto-option:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.reto-option:disabled{cursor:default}.reto-option-key{width:28px;height:28px;color:var(--text-soft);background:var(--subtle);border-radius:999px;flex:none;place-items:center;font-size:14px;font-weight:700;display:grid}.reto-option.correct{border-color:var(--green);background:var(--green-soft)}.reto-option.wrong{border-color:var(--danger);background:var(--danger-bg)}.feedback{border-radius:12px;padding:14px;font-size:14px;font-weight:600}.feedback.ok{color:var(--green);background:var(--green-soft);border:1px solid var(--success-border)}.feedback.hint{color:var(--warning);background:var(--warning-bg);border:1px solid var(--warning-border)}.informe-card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;gap:12px;margin-top:16px;padding:28px 20px;display:flex}.informe-emoji{font-size:56px;line-height:1}.informe-title{font-size:24px;font-weight:800;line-height:1.2}.informe-sub{color:var(--text-soft);font-size:14px}.informe-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 0;display:grid}.informe-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 8px}.informe-stat dt{color:var(--text-soft);font-size:13px;font-weight:600}.informe-stat dd{color:var(--orange-strong);margin:4px 0 0;font-size:17px;font-weight:800}.informe-mastery{color:var(--text-soft);font-size:14px}.informe-mastery strong{color:var(--orange-strong)}.onboarding{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;flex-direction:column;gap:16px;margin-top:24px;padding:28px 20px;display:flex}.onboarding-emoji{font-size:56px;line-height:1}.onboarding-title{font-size:24px;font-weight:800}.onboarding-sub{color:var(--text-soft);font-size:14px}.field{text-align:left;flex-direction:column;gap:8px;display:flex}.field-label{color:var(--text-soft);font-size:14px;font-weight:600}.field-input{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;font-size:16px}.field-input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.link-code-input{letter-spacing:.35em;text-align:center;text-transform:uppercase;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px}.age-row{flex-wrap:wrap;gap:8px;display:flex}.age-pill{font:inherit;background:var(--surface);border:1px solid var(--border);min-width:40px;color:var(--text-soft);cursor:pointer;border-radius:999px;padding:8px 0;font-size:16px;font-weight:700}.age-pill.on{color:var(--surface);background:var(--orange-strong);border-color:var(--orange-strong)}.age-pill:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.back.primary:disabled{opacity:.5;cursor:not-allowed}.speak-area{flex-direction:column;align-items:stretch;gap:12px;display:flex}.speak-fallback{flex-direction:column;gap:8px;display:flex}.speak-fallback-hint{color:var(--text-soft);font-size:14px}.speak-type-row{align-items:center;gap:8px;display:flex}.speak-type-row .field-input{flex:1}.feedback-transcript{color:var(--text-soft);margin-top:4px;font-weight:600;display:block}.generate{font:inherit;background:var(--surface);border:1px solid var(--border);color:var(--orange-strong);cursor:pointer;border-radius:12px;padding:12px;font-size:14px;font-weight:700}.generate.link{color:var(--info);border-color:var(--info-bg)}.generate:disabled{opacity:.6;cursor:not-allowed}.generate:focus-visible{outline:3px solid var(--orange);outline-offset:2px}.health-chips{flex-wrap:wrap;gap:8px;margin:0 0 16px;display:flex}.health-list{margin:0 0 16px;padding:0;list-style:none}.health-row{border-bottom:1px solid var(--border);grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:grid}.health-row:last-child{border-bottom:0}.health-verdict{font-weight:700}.health-id{color:var(--text-soft);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}.health-num{font-variant-numeric:tabular-nums;color:var(--text-soft);white-space:nowrap}@media (width<=560px){.health-row{grid-template-columns:1fr auto;row-gap:4px}}