:root{--paper:#f4efe6;--paper-strong:#fffaf1;--ink:#2f332f;--muted:#6f746c;--line:#d7cfc0;--sage:#7f8b78;--sage-deep:#596a5d;--clay:#a98b7d;--moss:#32483c;--sky:#8d9aa4;--focus:#3b6756;--danger:#9b5f55;--shadow:0 18px 42px #37322a1c;--shadow-soft:0 8px 22px #37322a14;--ease-snappy:cubic-bezier(.2, .8, .2, 1);--motion-snappy:.165s var(--ease-snappy);--font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--ink);background:var(--paper);font-family:var(--font);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*{box-sizing:border-box}body{background:linear-gradient(115deg, #8d9aa414, transparent 38%), linear-gradient(#2f332f06 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, #2f332f05 1px, transparent 1px) 0 0 / 28px 28px, var(--paper);min-width:320px;min-height:100svh;margin:0}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}#app{min-height:100svh}.app-shell{inline-size:min(100%,960px);isolation:isolate;grid-template-rows:auto auto 1fr auto;gap:18px;min-height:100svh;margin:0 auto;padding:28px;display:grid}.topbar{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{min-block-size:40px;color:var(--ink);align-items:center;gap:10px;font-weight:750;text-decoration:none;display:inline-flex}.brand-mark{background:linear-gradient(90deg, transparent 50%, #fffaf173 50%) 0 0 / 12px 12px, linear-gradient(0deg, transparent 50%, #fffaf166 50%) 0 0 / 12px 12px, var(--sage);block-size:24px;inline-size:24px;transition:border-color var(--motion-snappy), transform var(--motion-snappy);border:1px solid #2f332f38;border-radius:5px;display:inline-block;box-shadow:inset 0 1px #fffaf161}.brand:hover .brand-mark{border-color:#2f332f57;transform:translateY(-1px)}.progress-copy{min-inline-size:76px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:end}.progress-track{border:1px solid var(--line);background:#e8e0d2;border-radius:999px;block-size:8px;overflow:hidden}.progress-track span{background:linear-gradient(90deg, transparent, #fffaf142, transparent), var(--sage-deep);block-size:100%;transition:inline-size .22s cubic-bezier(.2,.8,.2,1);display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px #fffaf138}.progress-track span:after{content:"";background:linear-gradient(90deg,#0000 0%,#fffaf152 48%,#0000 100%);animation:.42s ease-out progress-sheen;position:absolute;inset:0;transform:translate(-100%)}.quiz-surface,.result-surface{border:1px solid var(--line);inline-size:100%;box-shadow:var(--shadow);animation:surface-in .18s var(--ease-snappy) both;background:#fffaf1c7;border-radius:8px;align-self:center;padding:34px;position:relative;overflow:hidden}.quiz-surface:before,.result-surface:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#fffaf1cc,#0000);block-size:1px;position:absolute;inset:0 0 auto}.mob-preview{border:1px solid var(--line);background:#d9d1c1;border-radius:6px;block-size:116px;inline-size:100%;margin-block-end:28px;overflow:hidden}.mob-preview img{object-fit:cover;object-position:center 42%;opacity:.78;block-size:100%;inline-size:100%;transition:filter .32s,opacity .32s,transform .52s;display:block;transform:scale(1.006)}.quiz-surface:hover .mob-preview img{filter:saturate(1.03);opacity:.82;transform:scale(1.012)}.eyebrow{color:var(--sage-deep);margin:0 0 12px;font-size:.88rem;font-weight:720}h1,h2,p{margin-block-start:0}h1{max-inline-size:760px;color:var(--ink);letter-spacing:0;margin-block-end:26px;font-size:2rem;font-weight:760;line-height:1.22}h2{letter-spacing:0;margin-block-end:12px;font-size:1rem}.options{grid-template-columns:1fr 1fr;gap:14px;display:grid}.choice{min-block-size:132px;color:var(--ink);text-align:left;border:1px solid var(--line);transition:background-color var(--motion-snappy), border-color var(--motion-snappy), box-shadow var(--motion-snappy), transform var(--motion-snappy);background:#f7f1e8;border-radius:8px;grid-template-columns:34px 1fr;align-items:start;gap:14px;padding:18px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #fffaf18c}.choice:before{content:"";opacity:0;pointer-events:none;transition:opacity var(--motion-snappy);background:radial-gradient(circle at 22px 18px,#fffaf185,#0000 34px),linear-gradient(135deg,#fffaf133,#0000 42%);position:absolute;inset:0}.choice:after{background:var(--sage-deep);content:"";opacity:0;block-size:7px;inline-size:7px;transition:opacity var(--motion-snappy), transform var(--motion-snappy);border-radius:2px;position:absolute;inset-block-start:12px;inset-inline-end:12px;transform:scale(.7)}.choice>span{z-index:1;position:relative}.choice:hover{border-color:var(--sage);box-shadow:var(--shadow-soft), inset 0 1px 0 #fffaf1b3;transform:translateY(-1px)}.choice:hover:before{opacity:1}.choice:active{transform:translateY(0)scale(.998)}.choice.is-selected{border-color:var(--sage-deep);background:#e8ecdf;transform:translateY(-1px);box-shadow:0 10px 24px #32483c1c,inset 0 0 0 1px #596a5d1f}.choice.is-selected:after{opacity:.72;transform:scale(1)}.choice-key{color:#fffaf1;background:var(--moss);font-variant-numeric:tabular-nums;block-size:34px;inline-size:34px;transition:background-color var(--motion-snappy), box-shadow var(--motion-snappy), transform var(--motion-snappy);border-radius:6px;place-items:center;font-weight:750;display:inline-grid;box-shadow:inset 0 1px #fffaf133}.choice.is-selected .choice-key{background:var(--sage-deep);transform:translateY(1px);box-shadow:inset 0 1px #fffaf13d,0 0 0 3px #596a5d1f}.actions{grid-template-columns:128px 1fr 128px;align-items:center;gap:14px;min-block-size:48px;margin-block-start:26px;display:grid}.quiz-actions{grid-template-columns:128px 1fr}.quiz-actions .inline-status{text-align:end}.primary,.ghost{min-block-size:46px;transition:background-color var(--motion-snappy), border-color var(--motion-snappy), box-shadow var(--motion-snappy), color var(--motion-snappy), transform var(--motion-snappy);border-radius:7px;padding:0 18px;font-weight:720}.primary{color:#fffaf1;background:var(--moss);border:1px solid var(--moss)}.primary:hover{background:#26392f;box-shadow:0 7px 16px #26392f29}.primary:disabled{color:#f2eadf;background:#9aa195;border-color:#9aa195}.ghost{color:var(--moss);border:1px solid var(--sage);background:0 0}.ghost:hover{border-color:var(--sage-deep);background:#edf0e6;box-shadow:0 6px 14px #596a5d17}.primary:active,.ghost:active{transform:translateY(1px)}.ghost:disabled{color:#a79f93;border-color:#d8d0c2}.inline-status{min-block-size:24px;color:var(--danger);text-align:center;margin:0;font-size:.92rem}.inline-status:not(:empty){animation:.18s ease-out both status-in}.reset-link{min-block-size:38px;color:var(--muted);transition:color var(--motion-snappy), transform var(--motion-snappy);background:0 0;border:0;justify-self:center;padding:0 10px}.reset-link:hover{color:var(--ink);transform:translateY(-1px)}.result-surface{justify-self:center;max-inline-size:760px}.result-surface h1{margin-block-end:6px;font-size:3rem}.archetype{color:var(--clay);margin-block-end:18px;font-size:1.2rem;font-weight:740}.summary{max-inline-size:620px;color:var(--ink);margin-block-end:20px;font-size:1.05rem}.trait-row{flex-wrap:wrap;gap:8px;margin-block-end:18px;display:flex}.trait-row span{color:var(--moss);background:#e6eadf;border:1px solid #c9d0c1;border-radius:999px;padding:6px 10px;font-size:.9rem;font-weight:680;box-shadow:inset 0 1px #fffaf173}.result-meta{color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:10px;margin-block-end:26px;display:flex}.alternatives{border-block-start:1px solid var(--line);padding-block-start:20px}.alternatives ol{gap:8px;margin:0;padding:0;list-style:none;display:grid}.alternatives a{min-block-size:42px;color:var(--ink);border:1px solid var(--line);transition:background-color var(--motion-snappy), border-color var(--motion-snappy), box-shadow var(--motion-snappy), transform var(--motion-snappy);background:#f7f1e8;border-radius:7px;justify-content:space-between;align-items:center;gap:18px;padding:9px 12px;text-decoration:none;display:flex}.alternatives a:hover{border-color:var(--sage);box-shadow:var(--shadow-soft);background:#fbf6ed;transform:translateY(-1px)}.result-actions{grid-template-columns:128px 1fr 128px}.source-line{color:var(--muted);margin:18px 0 0;font-size:.88rem}.source-line a{color:var(--moss)}@media (width<=760px){.app-shell{gap:14px;padding:16px}.quiz-surface,.result-surface{padding:20px}.mob-preview{block-size:88px;margin-block-end:20px}h1{font-size:1.45rem}.result-surface h1{font-size:2.2rem}.options{grid-template-columns:1fr}.choice{min-block-size:104px}.actions,.result-actions,.quiz-actions{grid-template-columns:1fr}.inline-status{order:-1}.quiz-actions .inline-status{text-align:center}.primary,.ghost{inline-size:100%}}@keyframes surface-in{0%{opacity:.92;transform:translateY(3px)scale(.998)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes progress-sheen{0%{transform:translate(-100%)}to{transform:translate(120%)}}@keyframes status-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.choice,.mob-preview img,.quiz-surface,.result-surface,.alternatives a{transform:none!important}}