:root{--bg:#16130f;--surface:#211b14;--surface-raised:#2b2318;--text:#f4ebda;--text-muted:#b9aa8e;--accent:#d2482b;--accent-contrast:#fbeee4;--hairline:#f4ebda1f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--radius-card:16px;--radius-button:14px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1)}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:system-ui,-apple-system,PingFang TC,Microsoft JhengHei,sans-serif}#app{min-height:100dvh}.app-shell{width:100%;max-width:440px;min-height:100dvh;padding:max(env(safe-area-inset-top), 32px) 24px max(env(safe-area-inset-bottom), 32px);flex-direction:column;margin:0 auto;display:flex}.opening{justify-content:center;gap:var(--space-8);flex-direction:column;flex:1;display:flex}.opening__heading{gap:var(--space-3);text-align:center;flex-direction:column;display:flex}.opening__title{letter-spacing:-.01em;margin:0;font-size:44px;font-weight:800;line-height:1.1}.opening__subtitle{color:var(--text-muted);margin:0;font-size:16px;line-height:1.5}.field{gap:var(--space-2);flex-direction:column;display:flex}.field__label{color:var(--text-muted);font-size:13px}.field__input{height:52px;padding:0 var(--space-4);border-radius:var(--radius-card);border:1.5px solid var(--hairline);background:var(--surface);color:var(--text);font-family:inherit;font-size:16px;transition:border-color .16s}.field__input::placeholder{color:var(--text-muted);opacity:.7}.field__input:focus{border-color:var(--accent);outline:none}.button-primary{border-radius:var(--radius-button);background:var(--accent);height:52px;color:var(--accent-contrast);cursor:pointer;transition:transform .14s var(--ease-out), opacity .2s ease;border:none;font-family:inherit;font-size:16px;font-weight:700}.button-primary:active{transform:scale(.97)}.button-primary:disabled{opacity:.4;pointer-events:none}@media (hover:hover) and (pointer:fine){.button-primary:hover:not(:disabled){filter:brightness(1.06)}}@media (prefers-reduced-motion:reduce){.button-primary{transition-duration:0s}}.quiz{flex-direction:column;flex:1;display:flex}.quiz__progress{padding-bottom:var(--space-8);justify-content:center;gap:10px;display:flex}.quiz__dot{border:1.5px solid var(--hairline);background:0 0;border-radius:999px;width:8px;height:8px;transition:background-color .2s,border-color .2s}.quiz__dot[data-state=done]{background:var(--accent);border-color:var(--accent)}.quiz__dot[data-state=current]{border-color:var(--accent);border-width:2px}.quiz__question{flex-direction:column;flex:1;display:flex}.quiz__prompt{text-align:center;margin:0 0 var(--space-8);font-size:20px;font-weight:700;line-height:1.5}.quiz__options{justify-content:center;gap:var(--space-3);flex-direction:column;flex:1;min-height:216px;display:flex}.option-card{align-items:center;gap:var(--space-3);border-radius:var(--radius-card);border:1.5px solid var(--hairline);background:var(--surface-raised);width:100%;min-height:44px;color:var(--text);text-align:left;cursor:pointer;transition:transform .12s var(--ease-out), border-color .14s var(--ease-out), background-color .14s var(--ease-out), opacity .14s ease;padding:18px 20px;font-family:inherit;font-size:16px;line-height:1.5;display:flex}.option-card:active{transform:scale(.97)}.option-card__marker{border:1.5px solid var(--hairline);width:20px;height:20px;transition:background-color .14s var(--ease-out), border-color .14s var(--ease-out);border-radius:999px;flex:none}.option-card__text{flex:1}.option-card[data-selected=true]{border-color:var(--accent)}.option-card[data-selected=true] .option-card__marker{background:var(--accent);border-color:var(--accent)}.option-card[data-selected=false]{opacity:.35;pointer-events:none}.quiz__question[data-phase=entering]{opacity:0;transform:translateY(12px)}.quiz__question[data-phase=active]{opacity:1;transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);transform:translateY(0)}.quiz__question[data-phase=exiting]{opacity:0;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);transform:translateY(-12px)}.quiz__options[data-stagger=true] .option-card{transition-delay:calc(var(--stagger-index,0) * 40ms)}@media (prefers-reduced-motion:reduce){.option-card{transition-duration:0s}.quiz__question[data-phase=entering],.quiz__question[data-phase=exiting]{transform:none}.quiz__question[data-phase=active],.quiz__question[data-phase=exiting]{transition-duration:.12s}}.result{text-align:center;justify-content:center;align-items:center;gap:var(--space-6);flex-direction:column;flex:1;display:flex;position:relative}@media (height<=440px){.result{max-height:calc(100dvh - max(env(safe-area-inset-top), 32px) - max(env(safe-area-inset-bottom), 32px));-webkit-overflow-scrolling:touch;padding-bottom:var(--space-8);justify-content:flex-start;overflow-y:auto}}.result__loading{justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex;position:absolute;inset:0}.result__pulse{gap:var(--space-2);display:flex}.result__pulse span{background:var(--accent);opacity:.35;border-radius:999px;width:10px;height:10px}.result__loading-text{color:var(--text-muted);margin:0;font-size:15px}.result__content{align-items:center;gap:var(--space-3);flex-direction:column;width:100%;display:flex}.result__eyebrow{color:var(--text-muted);margin:0;font-size:15px}.result__name{letter-spacing:-.01em;margin:0;font-size:40px;font-weight:800;line-height:1.15}.result__tagline{color:var(--text-muted);margin:0;font-size:16px;font-weight:600}.result__description{text-align:left;margin:var(--space-2) 0 0;font-size:16px;line-height:1.6}.result__spectrum{color:var(--text-muted);text-align:left;margin:0;font-size:14px;line-height:1.6}.button-secondary{height:52px;padding:0 var(--space-6);border:1.5px solid var(--accent);border-radius:var(--radius-button);color:var(--accent-contrast);cursor:pointer;margin-top:var(--space-4);transition:transform .14s var(--ease-out);background:0 0;font-family:inherit;font-size:16px;font-weight:700}.button-secondary:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.button-secondary:hover{background:#d2482b1f}}@media (prefers-reduced-motion:reduce){.button-secondary{transition-duration:0s}}