:root { --bg:#f5f4ef; --ink:#151515; --muted:#6d6b66; --card:#fff; --line:#dedbd2; --accent:#111; --soft:#eeece5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(900px, calc(100% - 32px)); margin:0 auto; padding:56px 0 80px; }
.hero { margin-bottom:28px; }
.eyebrow { font-size:12px; letter-spacing:.18em; font-weight:800; margin-bottom:18px; }
h1 { font-size:clamp(38px, 7vw, 68px); line-height:.98; letter-spacing:-.045em; margin:0 0 18px; max-width:720px; }
.hero p { font-size:18px; line-height:1.55; color:var(--muted); max-width:690px; margin:0 0 20px; }
.note { background:#e9e6dc; border-radius:14px; padding:14px 16px; font-size:14px; line-height:1.5; max-width:690px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:0 12px 35px rgba(0,0,0,.04); }
.progress-row { display:flex; justify-content:space-between; gap:16px; font-size:12px; font-weight:750; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.progress { height:5px; background:var(--soft); border-radius:9px; margin:12px 0 34px; overflow:hidden; }
#progress-bar { height:100%; width:5%; background:var(--accent); transition:width .2s ease; }
.question h2 { font-size:clamp(24px,4vw,34px); line-height:1.15; letter-spacing:-.025em; margin:0 0 10px; }
.question .help { color:var(--muted); line-height:1.55; margin:0 0 24px; }
.options { display:grid; gap:10px; }
.option { display:flex; gap:14px; align-items:flex-start; padding:15px 16px; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.15s ease; }
.option:hover { border-color:#aaa69c; background:#faf9f5; }
.option.selected { border-color:#111; background:#f0eee8; }
.option input { margin-top:4px; accent-color:#111; }
.option strong { display:block; margin-bottom:3px; }
.option span { color:var(--muted); font-size:14px; line-height:1.45; }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.scale .option { min-height:96px; display:block; text-align:center; padding:14px 8px; }
.scale .option input { display:block; margin:0 auto 10px; }
.scale strong { font-size:13px; }
.scale span { font-size:12px; }
.nav { display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
button { border:0; border-radius:12px; padding:13px 19px; font-weight:800; cursor:pointer; font-size:15px; }
.primary { background:#111; color:#fff; margin-left:auto; }
.secondary { background:var(--soft); color:#111; }
button:disabled { opacity:.4; cursor:not-allowed; }
.hidden { display:none; }
.result { margin-top:20px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px; }
.result .kicker { font-size:12px; letter-spacing:.14em; font-weight:800; color:var(--muted); text-transform:uppercase; }
.result h2 { font-size:clamp(34px,6vw,56px); letter-spacing:-.04em; margin:10px 0 8px; }
.result .tagline { font-size:20px; margin:0 0 20px; }
.result p { line-height:1.6; color:var(--muted); }
.result .wander { margin:26px 0; background:#eeece5; border-radius:15px; padding:17px; color:#222; }
.groups { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px; }
.group { border:1px solid var(--line); border-radius:15px; padding:16px; }
.group b { display:block; margin-bottom:6px; }
.group span { color:var(--muted); font-size:14px; line-height:1.45; }
@media (max-width:640px){ .shell{padding-top:32px}.card,.result{padding:20px}.scale{grid-template-columns:1fr}.scale .option{min-height:auto;text-align:left}.scale .option input{display:inline;margin:0 8px 0 0}.groups{grid-template-columns:1fr}.progress-row{font-size:10px} }