@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: #07070b;
  --bg-2: #11111b;
  --bg-3: #050508;
  --ink: #fff7ed;
  --muted: rgba(255, 247, 237, 0.74);
  --dim: rgba(255, 247, 237, 0.48);
  --line: rgba(255, 247, 237, 0.14);
  --accent: #d9193f;
  --accent-2: #f3c7a2;
  --accent-3: #7a1028;
  --accent-soft: rgba(217, 25, 63, 0.24);
  --card: rgba(18, 17, 24, 0.80);
  --card-strong: rgba(25, 23, 31, 0.95);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.50);
  --motif: "CRIMSON / N109";
  --texture-a: rgba(217, 25, 63, .18);
  --texture-b: rgba(243, 199, 162, .12);
  --radius: 30px;
}

* { 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 14% 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.07), 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: .42;
  background:
    linear-gradient(115deg, transparent 0 36%, color-mix(in srgb, var(--accent) 16%, transparent) 36.5% 37%, transparent 37.5% 100%),
    radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 68%, color-mix(in srgb, var(--accent) 24%, transparent) 0 1px, transparent 1.8px);
  background-size: auto, 82px 82px, 110px 110px;
}
body[data-theme="qinche"] {
  --bg: #050407; --bg-2: #15070d; --bg-3: #030305;
  --accent:#d9193f; --accent-2:#f3c7a2; --accent-3:#7a1028;
  --accent-soft:rgba(217,25,63,.26); --texture-a:rgba(217,25,63,.22); --texture-b:rgba(216,216,224,.10);
  --motif:"CRIMSON / N109";
}
body[data-theme="lishen"] {
  --bg:#06101a; --bg-2:#0c1b2a; --bg-3:#03080d;
  --accent:#86c7ff; --accent-2:#edf8ff; --accent-3:#5a82aa;
  --accent-soft:rgba(134,199,255,.20); --texture-a:rgba(134,199,255,.18); --texture-b:rgba(237,248,255,.12);
  --motif:"SNOW / SILVER";
}
body[data-theme="qiyu"] {
  --bg:#03151c; --bg-2:#10233b; --bg-3:#080615;
  --accent:#2bc9d9; --accent-2:#ff7f9c; --accent-3:#7b61ff;
  --accent-soft:rgba(43,201,217,.24); --texture-a:rgba(43,201,217,.20); --texture-b:rgba(255,127,156,.17);
  --motif:"SEA / COLOR";
}
body[data-theme="shenxinghui"] {
  --bg:#060817; --bg-2:#111739; --bg-3:#03040d;
  --accent:#b7b5ff; --accent-2:#ffe8a6; --accent-3:#6f8cff;
  --accent-soft:rgba(183,181,255,.22); --texture-a:rgba(183,181,255,.20); --texture-b:rgba(255,232,166,.14);
  --motif:"STAR / RETURN";
}
body[data-theme="xiayizhou"] {
  --bg:#07101a; --bg-2:#1c2230; --bg-3:#080606;
  --accent:#f0a64a; --accent-2:#8fd3ff; --accent-3:#d35a5f;
  --accent-soft:rgba(240,166,74,.24); --texture-a:rgba(240,166,74,.18); --texture-b:rgba(143,211,255,.14);
  --motif:"SKY / REUNION";
}
body[data-theme="qinche"]::before { background:
  linear-gradient(122deg, transparent 0 38%, rgba(217,25,63,.16) 38.3% 39%, transparent 39.4% 100%),
  radial-gradient(circle at 20% 18%, rgba(243,199,162,.18) 0 1px, transparent 1.8px),
  radial-gradient(circle at 78% 70%, rgba(217,25,63,.24) 0 1px, transparent 1.8px); background-size:auto, 96px 96px, 120px 120px; }
body[data-theme="lishen"]::before { background:
  linear-gradient(135deg, transparent 0 40%, rgba(237,248,255,.10) 40.2% 40.8%, transparent 41% 100%),
  radial-gradient(circle at 22% 20%, rgba(237,248,255,.34) 0 1px, transparent 2px),
  radial-gradient(circle at 70% 72%, rgba(134,199,255,.22) 0 1px, transparent 2px); background-size:auto, 72px 72px, 128px 128px; }
body[data-theme="qiyu"]::before { background:
  radial-gradient(ellipse at 15% 18%, rgba(43,201,217,.18), transparent 30%),
  radial-gradient(ellipse at 84% 26%, rgba(255,127,156,.16), transparent 28%),
  repeating-radial-gradient(ellipse at 50% 120%, transparent 0 28px, rgba(43,201,217,.08) 30px 32px); }
body[data-theme="shenxinghui"]::before { background:
  radial-gradient(circle at 18% 16%, rgba(255,232,166,.28) 0 1px, transparent 2px),
  radial-gradient(circle at 62% 28%, rgba(183,181,255,.28) 0 1px, transparent 2px),
  radial-gradient(circle at 82% 74%, rgba(255,255,255,.18) 0 1px, transparent 2px),
  linear-gradient(115deg, transparent 0 45%, rgba(183,181,255,.10) 45.2% 45.8%, transparent 46% 100%); background-size:96px 96px, 140px 140px, 118px 118px, auto; }
body[data-theme="xiayizhou"]::before { background:
  linear-gradient(150deg, transparent 0 42%, rgba(143,211,255,.12) 42.2% 42.8%, transparent 43% 100%),
  radial-gradient(circle at 18% 22%, rgba(240,166,74,.18), transparent 26%),
  radial-gradient(circle at 80% 72%, rgba(143,211,255,.16), transparent 30%); }

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:.12;
  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: .42; 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: .25; }

.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,88px); line-height:1.02; letter-spacing:-.055em; text-shadow:0 0 28px var(--accent-soft); }
.hero-lead { max-width:700px; color:var(--muted); font-size:clamp(16px,2vw,20px); line-height:1.75; }
.test-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:26px 0 12px; }
.test-tab { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.055); color:var(--muted); padding:12px 10px; min-height:54px; font-weight:800; touch-action:manipulation; }
.test-tab::before { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 62%); transition:opacity .2s ease; }
.test-tab:hover::before, .test-tab.active::before { opacity:1; }
.test-tab.active { border-color: color-mix(in srgb, var(--accent) 72%, white 8%); color:white; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), rgba(255,255,255,.06)); box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent); }
.test-tab:nth-child(1) { --tab-accent:#d9193f; }
.test-tab:nth-child(2) { --tab-accent:#86c7ff; }
.test-tab:nth-child(3) { --tab-accent:#2bc9d9; }
.test-tab:nth-child(4) { --tab-accent:#b7b5ff; }
.test-tab:nth-child(5) { --tab-accent:#f0a64a; }
.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, .test-tab: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; }
.center { text-align:center; }
.disclaimer { margin:18px 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; }
.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; }
@media (hover:hover) { .option-btn:hover { transform:translateY(-1px); 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)); } }
.option-title { display:block; font-weight:850; margin-bottom:7px; }
.option-desc { display:block; color:var(--muted); line-height:1.6; font-size:14px; }
.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); }
.option-btn::before { transition:opacity .15s ease; }
.option-picked::before { opacity:1; }
.quiz-actions,.result-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:22px 0; }
.result-screen { max-width:960px; margin:0 auto; padding-top:32px; }
.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; }
.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(4,1fr); gap:10px; margin:18px 0 28px; }
.score-item { border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.045); padding:13px; }
.score-item strong { display:block; color:var(--accent-2); margin-bottom:6px; font-size:13px; }
.score-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.score-bar span { 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-chip { 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:#22170d; }
.quote-section p { margin-bottom:0; color:#fff7ed; font-family:"Noto Serif SC", serif; font-size:20px; line-height:1.7; }
.risk-section h3 span { background:#e96c7c; }
.action-section h3 span { background:var(--accent-2); color:#21180c; }

@media (max-width: 760px) {
  body::before { opacity:.30; }
  .glow { filter:blur(58px); opacity:.34; }
  .glow-a { width:72vw; height:72vw; left:-36vw; top:2vh; }
  .glow-b { width:68vw; height:68vw; right:-34vw; bottom:6vh; opacity:.20; }
  .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(31px, 10.4vw, 46px); line-height:1.08; letter-spacing:-.045em; text-shadow:0 0 20px var(--accent-soft); }
  .hero-lead { font-size:15px; line-height:1.62; margin-bottom:0; }
  .test-tabs { display:flex; grid-template-columns:none; gap:8px; margin:18px -2px 10px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .test-tabs::-webkit-scrollbar { display:none; }
  .test-tab { flex:0 0 auto; min-width:72px; min-height:46px; border-radius:999px; padding:9px 13px; font-size:14px; scroll-snap-align:start; }
  .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-kicker { font-size:10px; margin-bottom:4px; }
  .panel-desc { font-size:14px; line-height:1.55; }
  .warning-box { margin-top:12px; border-radius:16px; padding:12px; }
  .warning-box strong { font-size:14px; }
  .warning-box p { font-size:13px; line-height:1.48; margin-top:6px; }
  .input-label { margin-top:14px; }
  .access-form { grid-template-columns:1fr; gap:10px; }
  .code-input { min-height:52px; border-radius:16px; font-size:16px; }
  .primary-btn,.ghost-btn { min-height:50px; border-radius:16px; }
  .disclaimer { margin-top:14px; font-size:12px; line-height:1.55; }
  .quiz-screen,.result-screen { padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(26px, env(safe-area-inset-bottom)); }
  .quiz-topbar { margin-bottom:14px; }
  .phase-text { font-size:14px; line-height:1.55; }
  .counter { align-self:flex-start; padding:7px 12px; font-size:13px; }
  .progress-wrap { height:8px; margin-bottom:14px; }
  .question-card { border-radius:24px; padding:20px 15px; }
  .scene-label { font-size:11px; letter-spacing:.13em; }
  .question-card h2 { font-size:clamp(23px, 6.6vw, 31px); line-height:1.32; margin-bottom:18px; }
  .option-list { gap:11px; }
  .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; }
  .quiz-actions,.result-actions { align-items:stretch; gap:10px; margin:16px 0 6px; }
  .result-actions button,.quiz-actions button { width:100%; }
  .result-card { border-radius:24px; padding:21px 15px; }
  .result-hero { padding-bottom:18px; margin-bottom:18px; }
  .serial { font-size:12px; line-height:1.45; }
  .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); gap:8px; margin:14px 0 20px; }
  .score-item { border-radius:15px; padding:11px; }
  .score-item strong { font-size:12px; }
  .result-section { padding-top:16px; margin-top:16px; }
  .result-section h3 { font-size:16px; margin-bottom:9px; }
  .result-section h3 span { width:25px; height:25px; font-size:12px; }
  .result-section p,.result-section li { font-size:14px; line-height:1.75; }
  .keyword-list { gap:7px; }
  .keyword-chip { min-height:30px; padding:5px 9px; font-size:12px; }
  .quote-section { border-radius:18px; padding:14px; }
  .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(29px, 10.8vw, 40px); }
  .hero-lead { font-size:14px; }
  .test-tab { min-width:68px; padding-inline:12px; }
  .tag-row span:nth-child(4) { display:none; }
  .access-panel { padding:13px; }
  .warning-box p { font-size:12.5px; }
  .question-card h2 { font-size:clamp(22px, 6.8vw, 28px); }
  .option-btn { min-height:70px; padding:14px 14px 14px 16px; }
  .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; }
}