@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg: #0b0d11;
  --bg-2: #171d16;
  --bg-3: #09090b;
  --ink: #fff8ee;
  --muted: rgba(255, 248, 238, 0.76);
  --dim: rgba(255, 248, 238, 0.48);
  --line: rgba(255, 248, 238, 0.14);
  --accent: #f0a764;
  --accent-2: #b5ef9d;
  --accent-3: #ffd07d;
  --accent-soft: rgba(240, 167, 100, 0.24);
  --card: rgba(24, 21, 18, 0.82);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
  --motif: "VITALITY / HUMAN / GLOW";
  --texture-a: rgba(240, 167, 100, .18);
  --texture-b: rgba(181, 239, 157, .12);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Noto Serif SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, var(--texture-a), transparent 34%),
    radial-gradient(circle at 88% 16%, var(--texture-b), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.06), transparent 44%),
    linear-gradient(140deg, var(--bg) 0%, var(--bg-2) 54%, var(--bg-3) 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(240,167,100,.12) 36.5% 37%, transparent 37.5% 100%),
    radial-gradient(circle at 22% 24%, rgba(181,239,157,.20) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 68%, rgba(255,208,125,.18) 0 1px, transparent 1.8px);
  background-size: auto, 82px 82px, 110px 110px;
}
button, input { font: inherit; }
button { min-height: 46px; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent); outline-offset: 3px; }
.noise { pointer-events:none; position:fixed; inset:0; z-index:0; opacity:.10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glow { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .38; pointer-events: none; z-index: 0; }
.glow-a { width: 42vw; height: 42vw; min-width: 280px; min-height: 280px; left: -12vw; top: 6vh; background: var(--accent); }
.glow-b { width: 38vw; height: 38vw; min-width: 240px; min-height: 240px; right: -10vw; bottom: 12vh; background: var(--accent-2); opacity: .24; }
.app-shell { position: relative; z-index: 2; }
.screen { display:none; min-height:100vh; width:100%; padding:24px; }
.screen-active { display:block; }
.hero-screen { position:relative; place-items:center; padding:48px 20px; }
.hero-screen.screen-active { display:grid; }
.glass-card { border:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)), var(--card); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.hero-card { width:min(920px,100%); border-radius:34px; padding:clamp(28px,6vw,62px); position:relative; overflow:hidden; }
.hero-card::before, .question-card::before, .result-card::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) top/100% 1px no-repeat, radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 38%); }
.hero-card::after, .result-card::after { content: var(--motif); position: absolute; right: clamp(18px, 4vw, 46px); top: clamp(18px, 4vw, 38px); pointer-events: none; color: color-mix(in srgb, var(--accent-2) 52%, transparent); font-size: 11px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl; opacity: .72; }
.eyebrow { margin:0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; }
.eyebrow.small { color:var(--accent-2); letter-spacing:.2em; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:800px; margin:16px 0 18px; font-family:"Noto Serif SC", serif; font-size:clamp(42px,9vw,82px); line-height:1.06; letter-spacing:-.055em; text-shadow:0 0 28px var(--accent-soft); }
.hero-lead { max-width:720px; color:var(--muted); font-size:clamp(16px,2vw,20px); line-height:1.75; }
.hero-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 10px; }
.metric-chip { position:relative; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); border-radius:20px; padding:14px 16px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.metric-chip::after { content:""; position:absolute; inset:auto -10% -30% auto; width:72px; height:72px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%); pointer-events:none; }
.metric-chip strong { display:block; font-size:28px; line-height:1; margin-bottom:7px; color:#fff; }
.metric-chip span { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.tag-row span, .pill { display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); padding:7px 13px; font-size:13px; }
.tag-row span:first-child, .pill { border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:color-mix(in srgb, var(--accent) 13%, rgba(255,255,255,.045)); color:color-mix(in srgb, var(--accent-2) 80%, white); }
.access-panel { border:1px solid var(--line); border-radius:26px; background:rgba(6,8,12,.5); padding:20px; }
.access-head { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.panel-kicker { margin:0 0 6px; color:var(--accent-2); font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.panel-desc { margin-bottom:0; color:var(--muted); line-height:1.65; }
.warning-box { margin:16px 0 0; border:1px solid color-mix(in srgb, var(--accent) 46%, transparent); border-radius:20px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255,255,255,.035)); padding:14px 16px; }
.warning-box strong { color:#fff; font-size:15px; }
.warning-box p { margin:7px 0 0; color:var(--muted); line-height:1.55; font-size:14px; }
.input-label { display:block; margin:18px 0 8px; color:var(--dim); font-size:13px; }
.access-form { display:grid; grid-template-columns:1fr auto; gap:12px; }
.code-input { min-height:56px; width:100%; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.08); color:var(--ink); padding:0 16px; text-transform:uppercase; }
.code-input::placeholder { color:rgba(255,255,255,.34); }
.primary-btn,.ghost-btn,.option-btn { border-radius:18px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.primary-btn { border:0; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, white), color-mix(in srgb, var(--accent) 62%, black)); color:white; padding:0 22px; font-weight:900; box-shadow:0 16px 34px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.24); letter-spacing:.02em; }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 20px 40px var(--accent-soft), inset 0 1px 0 rgba(255,255,255,.28); }
.primary-btn:active, .ghost-btn:active, .option-btn:active { transform:scale(.985); }
.ghost-btn { border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--ink); padding:0 18px; }
.ghost-btn:hover { border-color:color-mix(in srgb, var(--accent) 55%, white 0%); background:rgba(255,255,255,.075); }
button:disabled { opacity:.42; cursor:not-allowed; transform:none!important; }
.form-message { min-height:22px; margin:12px 0 0; color:var(--accent-2); line-height:1.5; }
.form-message.error { color:#ff9da7; }
.claim-divider { display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:var(--dim); font-size:13px; }
.claim-divider::before,.claim-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.claim-panel { border:1px solid color-mix(in srgb, var(--accent-2) 20%, var(--line)); border-radius:24px; padding:18px; background:linear-gradient(180deg, rgba(181,239,157,.08), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.claim-title { margin:0 0 8px; font-size:16px; font-weight:900; color:#fff; }
.claim-desc { margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.65; }
.claim-form { margin-top:8px; }
.claim-result { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:13px 14px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(255,255,255,.07); }
.claim-result[hidden] { display:none; }
#claimedCode { font-weight:950; letter-spacing:.12em; color:var(--accent-2); }
.mini-btn { min-height:36px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--ink); font-weight:800; cursor:pointer; }
.center { text-align:center; }
.screen-note { margin:18px 0 0; color:color-mix(in srgb, var(--accent-2) 72%, white); font-size:14px; line-height:1.7; }
.disclaimer { margin:10px 0 0; color:var(--dim); font-size:13px; line-height:1.65; }
.quiz-screen { max-width:980px; margin:0 auto; padding-top:32px; }
.quiz-topbar { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.phase-text { color:var(--muted); margin:8px 0 0; }
.counter { border:1px solid var(--line); border-radius:999px; padding:9px 14px; color:var(--accent-2); font-weight:800; }
.progress-wrap { height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:20px; }
.progress-bar { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .25s ease; }
.question-card { position:relative; overflow:hidden; border-radius:30px; padding:clamp(22px,5vw,42px); }
.scene-label { color:var(--accent-2); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }
.question-card h2 { font-family:"Noto Serif SC", serif; font-size:clamp(25px,4vw,42px); line-height:1.25; margin-bottom:24px; }
.option-list { display:grid; gap:14px; }
.option-btn { position:relative; overflow:hidden; width:100%; text-align:left; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.04)); color:var(--ink); padding:18px 18px 18px 20px; box-shadow:0 12px 26px rgba(0,0,0,.18); }
.option-btn::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--accent), var(--accent-2)); opacity:.55; }
.option-btn::after { content:""; position:absolute; right:18px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; border:1px solid rgba(255,255,255,.10); background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 65%); opacity:.65; }
@media (hover:hover) { .option-btn:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 52%, white 0%); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.08)), rgba(255,255,255,.06)); box-shadow:0 18px 34px rgba(0,0,0,.26); } }
.option-title { display:block; font-weight:850; margin-bottom:7px; padding-right:42px; }
.option-desc { display:block; color:var(--muted); line-height:1.6; font-size:14px; padding-right:42px; }
.option-picked { border-color:color-mix(in srgb, var(--accent) 65%, white 5%)!important; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.08)), color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.04)))!important; box-shadow:0 0 20px color-mix(in srgb, var(--accent) 25%, transparent); }
.quiz-actions,.result-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:22px 0; }
.result-actions { position:sticky; bottom:12px; z-index:6; padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:24px; background:linear-gradient(180deg, rgba(28,22,16,.84), rgba(28,22,16,.68)); backdrop-filter:blur(18px); box-shadow:0 18px 38px rgba(0,0,0,.28); }
.result-screen { max-width:960px; margin:0 auto; padding-top:32px; padding-bottom:36px; }
.result-card { position:relative; overflow:hidden; border-radius:34px; padding:clamp(24px,5vw,48px); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(16,16,22,.95)); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow:var(--shadow); }
.result-hero { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:22px; }
.result-hero::after { content:""; display:block; width:88px; height:3px; margin-top:16px; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.92; }
.serial { margin:12px 0 8px; color:var(--dim); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.result-hero h2 { margin:0 0 10px; font-family:"Noto Serif SC", serif; font-size:clamp(36px,8vw,72px); letter-spacing:-.05em; }
.result-subtitle { color:var(--muted); line-height:1.75; font-size:18px; }
.score-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 28px; }
.score-item { border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding:13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.score-top { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.score-top span { color:var(--muted); }
.score-top b { color:var(--accent-2); }
.score-track { height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.score-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.result-section { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.result-section h3 { display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:12px; }
.result-section h3 span { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; }
.result-section p,.result-section li { color:var(--muted); line-height:1.8; }
.result-section ul { padding-left:20px; margin:0; }
.keyword-list { display:flex; flex-wrap:wrap; gap:9px; }
.keyword-list span { display:inline-flex; align-items:center; min-height:32px; border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius:999px; padding:6px 11px; color:color-mix(in srgb, var(--accent-2) 78%, white); background:color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.045)); font-size:13px; font-weight:800; }
.keyword-section h3 span { background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; }
.strength-section h3 span { background:color-mix(in srgb, var(--accent) 72%, black); }
.quote-section { border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:22px; padding:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255,255,255,.035)); }
.quote-section h3 { color:color-mix(in srgb, var(--accent-2) 86%, white); }
.quote-section h3 span { background:var(--accent-2); color:#172111; }
.quote-section p { margin-bottom:0; color:#fff8ee; font-family:"Noto Serif SC", serif; font-size:20px; line-height:1.7; }
.action-section h3 span { background:var(--accent-2); color:#172111; }
@media (max-width: 760px) { .screen { min-height:100dvh; padding:14px; padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); } .hero-screen { align-items:start; padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(22px, env(safe-area-inset-bottom)); } .hero-card { width:100%; padding:22px 15px 18px; border-radius:24px; } .hero-card::after, .result-card::after { display:none; } .eyebrow { font-size:10px; letter-spacing:.20em; } h1 { margin:12px 0 12px; font-size:clamp(30px, 10vw, 44px); line-height:1.1; } .hero-lead { font-size:15px; line-height:1.62; margin-bottom:0; } .hero-metrics { grid-template-columns:1fr; gap:10px; margin:18px 0 10px; } .metric-chip { border-radius:16px; padding:12px 14px; } .metric-chip strong { font-size:24px; } .tag-row { gap:8px; margin:14px 0 16px; } .tag-row span, .pill { min-height:30px; padding:6px 10px; font-size:12px; } .access-panel { border-radius:22px; padding:15px; } .access-head,.quiz-topbar { flex-direction:column; gap:10px; } .panel-desc { font-size:14px; line-height:1.55; } .warning-box { margin-top:12px; border-radius:16px; padding:12px; } .warning-box p { font-size:13px; line-height:1.48; margin-top:6px; } .access-form { grid-template-columns:1fr; gap:10px; } .claim-panel { padding:14px; border-radius:20px; } .claim-result { align-items:stretch; flex-direction:column; } .code-input { min-height:52px; border-radius:16px; font-size:16px; } .primary-btn,.ghost-btn { min-height:50px; border-radius:16px; } .quiz-screen,.result-screen { padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(26px, env(safe-area-inset-bottom)); } .counter { align-self:flex-start; padding:7px 12px; font-size:13px; } .question-card { border-radius:24px; padding:20px 15px; } .question-card h2 { font-size:clamp(23px, 6.6vw, 31px); line-height:1.32; margin-bottom:18px; } .option-btn { min-height:72px; border-radius:17px; padding:15px 15px 15px 17px; } .option-title { font-size:15px; line-height:1.35; margin-bottom:5px; } .option-desc { font-size:13px; line-height:1.5; } .result-actions button,.quiz-actions button { width:100%; } .result-actions { bottom:max(10px, env(safe-area-inset-bottom)); padding:10px; border-radius:20px; } .result-card { border-radius:24px; padding:21px 15px; } .result-hero h2 { font-size:clamp(32px, 9vw, 48px); line-height:1.08; } .result-subtitle { font-size:15px; line-height:1.65; } .score-grid { grid-template-columns:repeat(2,1fr); } .result-section p,.result-section li { font-size:14px; line-height:1.75; } .quote-section p { font-size:17px; line-height:1.65; } }
@media (max-width: 420px) { .screen { padding:12px; } .hero-card { padding:20px 13px 16px; border-radius:22px; } h1 { font-size:clamp(28px, 10.8vw, 38px); } .hero-lead { font-size:14px; } .tag-row span:nth-child(4) { display:none; } .question-card h2 { font-size:clamp(22px, 6.8vw, 28px); } .score-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }