@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root { --ink:#18251d; --cream:#fff8e9; --yellow:#f4be35; --orange:#ef6a36; --green:#41845b; --line:#d8cfba; --muted:#746f62; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Zen Kaku Gothic New", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.42; background-image:radial-gradient(#b9a984 .6px,transparent .7px); background-size:5px 5px; mix-blend-mode:multiply; }
button { font:inherit; cursor:pointer; }
.app-shell { min-height:100svh; width:min(100%,560px); margin:auto; position:relative; padding:28px 20px 40px; overflow:hidden; }
.screen { min-height:calc(100svh - 68px); display:flex; flex-direction:column; }
.hidden { display:none; }
.kicker,.topline,.section-name,.card-top,.card-label,.skills-label { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.1em; }
.hero-screen { text-align:center; align-items:center; justify-content:center; }
.hero-screen::after { content:""; position:absolute; z-index:-1; width:520px; height:520px; border:1px solid #e8c968; border-radius:46% 54% 55% 45%; transform:rotate(-17deg); top:13%; }
.hero-mark { width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--yellow); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-family:"DM Mono",monospace;font-weight:500; font-size:22px;margin:17px 0 20px; }
h1 { font-size:clamp(42px,11vw,61px); line-height:1.16; letter-spacing:-.06em; margin:0; font-weight:900; }
.lead { font-size:16px; line-height:1.8; margin:25px 0; }
.quest-note { display:flex; gap:13px; font-family:"DM Mono",monospace;font-size:11px;margin-bottom:32px; }
.quest-note span { border:1px solid var(--ink); padding:5px 8px; border-radius:999px; background:#fffdf7; }
.button { border:0; min-height:57px; padding:0 22px; font-weight:700; font-size:16px; width:100%; transition:transform .15s,opacity .15s; }
.button:active { transform:translate(2px,2px); }
.button-primary { color:var(--ink); background:var(--yellow); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.button-primary span { margin-left:12px; font-size:20px; }
.disabled { opacity:.37; cursor:not-allowed; }
.fine-print { color:var(--muted); font-size:11px; margin:20px 0 0; }
.topline { display:flex; justify-content:space-between; align-items:center; }
.text-button { color:var(--ink); border:0; background:transparent; padding:6px 0; font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.progress { margin:13px 0 46px;height:6px;background:#e5dcc7; overflow:hidden; }
.progress span { display:block;height:100%;background:var(--orange);width:6%;transition:width .3s ease; }
.section-name { color:var(--green); margin:0 0 13px; font-weight:500; }
#question-text { font-size:clamp(26px,7vw,34px); line-height:1.45; letter-spacing:-.04em; margin:0 0 32px; font-weight:700; }
.choices { display:grid; gap:10px; }
.choice { min-height:58px; text-align:left; padding:12px 15px; display:flex; align-items:flex-start; gap:14px; border:1.5px solid var(--line); background:#fffdf7; font-size:14px; line-height:1.45; transition:.15s; }
.choice:hover,.choice.selected { border-color:var(--ink); background:#ffedb0; box-shadow:3px 3px 0 var(--ink); transform:translate(-1px,-1px); }
.choice-number { font-family:"DM Mono",monospace; font-size:12px; color:var(--orange); }
.question-footer { font-size:11px; color:var(--muted); display:flex; justify-content:space-between; margin:11px 0 26px; }
#next-button { margin-top:auto; }
.result-card { position:relative; overflow:hidden; padding:21px 20px 28px; color:#fff9e9; background:var(--green); border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); }
.result-card::before { content:""; width:330px;height:330px;position:absolute;right:-145px;top:-105px;border:1px solid rgba(255,255,255,.35);border-radius:50%;box-shadow:0 0 0 25px rgba(255,255,255,.08),0 0 0 52px rgba(255,255,255,.06); }
.card-top { position:relative; display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:14px; }
.card-label { position:relative; margin:29px 0 8px; opacity:.8; }
#result-title { position:relative;font-size:clamp(30px,8.5vw,43px);letter-spacing:-.06em;line-height:1.2;margin:0; }
.score-line { position:relative;display:flex;align-items:center;gap:10px;margin:28px 0 25px; }
.score-line strong { font-size:64px;line-height:1;letter-spacing:-.07em; }
.score-line span { font-family:"DM Mono",monospace;font-size:11px;line-height:1.5; }
.stat-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45); }
.stat-grid div { padding:12px 5px 11px; border-right:1px solid rgba(255,255,255,.35); }
.stat-grid div:last-child { border:0; }.stat-grid span{font-family:"DM Mono",monospace;display:block;font-size:8px;opacity:.72;}.stat-grid b{font-size:23px;}
.result-copy { position:relative;line-height:1.75;font-size:13px;margin:22px 0 16px; }
.skills { position:relative; }.skills-label{opacity:.7;font-size:9px;}.skills div{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}.skills div span{font-size:11px;border:1px solid rgba(255,255,255,.7);padding:4px 7px;}
.stamp { position:absolute;right:20px;bottom:24px; transform:rotate(-8deg);color:var(--yellow);border:2px solid var(--yellow);font:500 13px "DM Mono",monospace;padding:6px; }
.picker-label { font-size:12px;margin:28px 0 10px; }.title-picker { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px; }.title-option{border:1px solid var(--line);background:#fffdf7;padding:8px 10px;font-size:11px;}.title-option.active{background:var(--orange);border-color:var(--ink);color:white;box-shadow:2px 2px 0 var(--ink);}.retry{align-self:center;margin-top:21px;}
@media (max-height:720px){.hero-screen{justify-content:flex-start;padding-top:20px}.hero-mark{width:60px;height:60px;margin:8px 0 12px}.lead{margin:16px 0}.quest-note{margin-bottom:21px}.progress{margin-bottom:28px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}