@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap";:root{color-scheme:light dark;--shape-s: 8px;--shape-m: 12px;--shape-l: 16px;--shape-xl: 28px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-display: "Sora", var(--font-ui);--motion-emphasized: cubic-bezier(.2, 0, 0, 1);--wa: #25d366;--x: #111827;--ig: #e1306c}:root,:root[data-theme=light]{--primary: #2f6df6;--on-primary: #ffffff;--primary-container: #dbe6ff;--on-primary-container: #001a43;--surface: #f7f5f0;--surface-container-lowest: #ffffff;--surface-container: #efece4;--surface-container-high: #e7e3d9;--on-surface: #16181d;--on-surface-variant: #474b53;--outline: #757882;--outline-variant: #cfcdc4;--error: #ba1a1a;--shadow: rgba(20, 22, 28, .12)}:root[data-theme=dark]{--primary: #adc6ff;--on-primary: #002e6e;--primary-container: #1f3a66;--on-primary-container: #d9e3ff;--surface: #121316;--surface-container-lowest: #0c0d10;--surface-container: #1b1d22;--surface-container-high: #25272e;--on-surface: #e6e7ec;--on-surface-variant: #c3c5cd;--outline: #8c8f99;--outline-variant: #43464e;--error: #ffb4ab;--shadow: rgba(0, 0, 0, .45)}@media (prefers-color-scheme: dark){:root:not([data-theme]){--primary: #adc6ff;--on-primary: #002e6e;--primary-container: #1f3a66;--on-primary-container: #d9e3ff;--surface: #121316;--surface-container-lowest: #0c0d10;--surface-container: #1b1d22;--surface-container-high: #25272e;--on-surface: #e6e7ec;--on-surface-variant: #c3c5cd;--outline: #8c8f99;--outline-variant: #43464e;--error: #ffb4ab;--shadow: rgba(0, 0, 0, .45)}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-ui);background:var(--surface);color:var(--on-surface);line-height:1.55;font-variant-numeric:tabular-nums;min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-display);line-height:1.15;letter-spacing:-.015em}a{color:var(--primary)}:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--shape-s)}.site-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);max-width:920px;margin:0 auto;width:100%}.brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--on-surface);text-decoration:none;margin-right:auto}.brand-mark{display:inline-flex}.brand svg{width:26px;height:26px;color:var(--primary)}.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:var(--on-surface-variant);cursor:pointer;transition:background .15s var(--motion-emphasized)}.icon-btn svg{width:22px;height:22px}.icon-btn:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}.lang-select{height:40px;border-radius:var(--shape-s);border:1px solid var(--outline-variant);background:var(--surface-container);color:var(--on-surface);padding:0 var(--space-2);font-family:inherit;font-size:.9rem}main{flex:1;width:100%;max-width:920px;margin:0 auto;padding:var(--space-6)}.view{display:none;animation:fade .25s var(--motion-emphasized)}.view.is-active{display:block}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.view,*{animation:none!important;transition:none!important}}.hero{padding:var(--space-12) 0;max-width:680px}.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-primary-container);background:var(--primary-container);padding:6px 14px;border-radius:999px;margin-bottom:var(--space-4)}.hero h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:800;margin:0 0 var(--space-4)}.hero p{font-size:1.15rem;color:var(--on-surface-variant);margin:0 0 var(--space-6)}.hero .note{font-size:.95rem;color:var(--on-surface-variant);margin-top:var(--space-6)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border-radius:999px;border:none;background:var(--primary);color:var(--on-primary);font-family:var(--font-ui);font-weight:600;font-size:1rem;cursor:pointer;transition:filter .15s var(--motion-emphasized)}.btn:hover{filter:brightness(1.06)}.btn.secondary{background:var(--surface-container-high);color:var(--on-surface)}.btn svg{width:20px;height:20px}.start-meta{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);color:var(--on-surface-variant);font-size:.9rem}.progress{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.progress-track{flex:1;height:8px;border-radius:999px;background:var(--surface-container-high);overflow:hidden}.progress-fill{height:100%;width:0;background:var(--primary);border-radius:999px;transition:width .3s var(--motion-emphasized)}.progress-label{font-size:.85rem;color:var(--on-surface-variant);white-space:nowrap}.question-card{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--shape-xl);padding:var(--space-8);box-shadow:0 1px 2px var(--shadow)}.question-text{font-size:clamp(1.3rem,3vw,1.6rem);font-family:var(--font-display);font-weight:700;margin:0 0 var(--space-8)}.options{display:grid;gap:var(--space-3)}.option{display:flex;align-items:center;gap:var(--space-4);min-height:60px;padding:var(--space-3) var(--space-4);border-radius:var(--shape-l);border:1.5px solid var(--outline-variant);background:var(--surface-container-lowest);color:var(--on-surface);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s var(--motion-emphasized),background .15s var(--motion-emphasized),transform .1s var(--motion-emphasized)}.option:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface-container-lowest));transform:translateY(-1px)}.option-icon{display:inline-grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--surface-container-high);color:var(--on-surface-variant)}.option:hover .option-icon{background:var(--primary-container);color:var(--on-primary-container)}.option-icon svg{width:22px;height:22px}.option-text{font-size:1rem;font-weight:500}.quiz-back{margin-top:var(--space-6)}.loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-16) 0;color:var(--on-surface-variant)}.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--surface-container-high);border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-hero{--archetype: var(--primary);display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6);background:color-mix(in srgb,var(--archetype) 18%,var(--surface-container));border:1px solid color-mix(in srgb,var(--archetype) 40%,transparent);border-radius:var(--shape-xl);margin-bottom:var(--space-6)}.result-hero-icon{display:inline-grid;place-items:center;width:64px;height:64px;flex-shrink:0;border-radius:50%;background:var(--archetype);color:#fff}.result-hero-icon svg{width:36px;height:36px}.result-hero .label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-surface-variant)}.result-hero h2{margin:var(--space-1) 0;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;color:var(--on-surface)}.result-rarity{font-size:.95rem;font-weight:600;color:color-mix(in srgb,var(--archetype) 70%,var(--on-surface))}.result-compat{margin-left:auto;text-align:center;display:flex;flex-direction:column;align-items:center}.result-compat-num{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--archetype);line-height:1}.result-compat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-surface-variant)}@media (max-width: 560px){.result-hero{flex-wrap:wrap}.result-compat{margin-left:0;flex-direction:row;gap:var(--space-2);align-items:baseline}}.result-essence{font-size:1.1rem;color:var(--on-surface-variant);margin:0 0 var(--space-8)}.chart-card{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--shape-xl);padding:var(--space-6);margin-bottom:var(--space-8)}.chart-card h3{font-size:1.05rem;margin:0 0 var(--space-4)}.result-chart-svg{width:100%;height:auto;display:block;overflow:visible}.chart-axis{stroke:var(--outline-variant);stroke-width:1.5}.chart-axis-label{fill:var(--on-surface-variant);font-family:var(--font-ui);font-size:13px}.chart-peak-label{font-family:var(--font-display);font-weight:700;font-size:16px}.ranking-title{font-size:1.2rem;margin:0 0 var(--space-4)}.ranking{display:grid;gap:var(--space-3);margin:0 0 var(--space-8);padding:0;list-style:none}.ranking li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:var(--space-3);opacity:.85}.ranking li.is-dominant{opacity:1}.rank-icon svg{width:22px;height:22px}.rank-name{font-weight:600;font-size:.95rem}.ranking li.is-dominant .rank-name{font-weight:700}.rank-pct{color:var(--on-surface-variant);font-size:.9rem}.rank-bar{grid-column:1 / -1;height:8px;border-radius:999px;background:var(--surface-container-high);overflow:hidden}.rank-bar span{display:block;height:100%;border-radius:999px;transition:width .5s var(--motion-emphasized)}.share-card{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--shape-xl);padding:var(--space-6);margin-bottom:var(--space-8)}.share-card h3{font-size:1.2rem;margin:0 0 var(--space-3)}.share-line{color:var(--on-surface-variant);font-style:italic;margin:0 0 var(--space-4)}.share-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.share-actions .btn{color:#fff}.share-wa{background:var(--wa)}.share-x{background:var(--x)}.share-ig{background:var(--ig)}[data-theme=dark] .share-x{background:#1f2937}.result-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}.disclaimer{font-size:.85rem;color:var(--on-surface-variant);border-top:1px solid var(--outline-variant);padding-top:var(--space-4)}.error-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding:var(--space-16) var(--space-6);color:var(--on-surface-variant)}.error-box svg{width:48px;height:48px;color:var(--error)}.toast{position:fixed;left:50%;bottom:var(--space-8);transform:translate(-50%) translateY(120%);background:var(--surface-container-high);color:var(--on-surface);border:1px solid var(--outline-variant);padding:var(--space-3) var(--space-6);border-radius:999px;box-shadow:0 4px 12px var(--shadow);transition:transform .3s var(--motion-emphasized);z-index:10}.toast.is-visible{transform:translate(-50%) translateY(0)}.site-footer{border-top:1px solid var(--outline-variant);padding:var(--space-6);max-width:920px;margin:0 auto;width:100%}.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-3)}.site-footer a{color:var(--on-surface-variant);text-decoration:none;font-size:.9rem}.site-footer a:hover{color:var(--primary)}.site-footer .rights{font-size:.85rem;color:var(--on-surface-variant)}.prose{max-width:680px}.prose h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 var(--space-6)}.prose h2{font-size:1.3rem;margin:var(--space-8) 0 var(--space-3)}.prose p,.prose li{color:var(--on-surface-variant)}.back-home{display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);color:var(--primary);text-decoration:none;font-weight:600}.back-home svg{width:20px;height:20px}