html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; font-weight: 400; line-height: 1.6; min-height: 100vh; min-height: 100dvh; overflow-x: clip; position: relative; }
body::before { content: ''; position: fixed; inset: 0; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px; pointer-events: none; z-index: 1; }
body::after { content: ''; position: fixed; top: 30%; left: 50%; transform: translate(-50%,-50%); width: 900px; height: 600px; background: radial-gradient(ellipse, var(--arc-glow-subtle) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.page { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.breadcrumb { margin-top: 24px; font-size: 0.95rem; color: var(--text-dim); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--arc); }
.breadcrumb span { color: var(--text-dim); margin: 0 6px; }
.hero { padding: 48px 0 24px; }
.hero__label { font-family: 'Syne', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--arc); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; }
h1 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.8rem,4.5vw,2.6rem); line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 16px; }
.snippet { color: var(--text-muted); font-size: 1rem; line-height: 1.7; max-width: 580px; }
.meta-strip { display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 24px; font-family: 'IBM Plex Mono', monospace; font-size: 0.86rem; color: var(--text-dim); }
.meta-strip span { padding: 4px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; }
/* Diagnostic UI */
.diag-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 28px 24px; margin: 24px 0; }
.diag-progress { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-family: 'IBM Plex Mono', monospace; font-size: 0.86rem; color: var(--text-dim); }
.diag-progress__bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; flex: 1; margin: 0 12px; }
.diag-progress__fill { height: 100%; background: var(--arc); transition: width 0.3s ease; width: 0%; }
.diag-question { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin-bottom: 20px; min-height: 60px; }
.diag-options { display: flex; flex-direction: column; gap: 10px; }
.diag-option { padding: 14px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text); font-size: 0.96rem; cursor: pointer; text-align: left; transition: all 0.2s; font-family: inherit; }
.diag-option:hover { background: rgba(255,255,255,0.06); border-color: var(--arc); }
.diag-option:disabled { cursor: default; }
.diag-option--correct { background: rgba(127,191,127,0.12); border-color: #7FBF7F; }
.diag-option--wrong { background: rgba(255,99,99,0.12); border-color: #FF6363; }
.diag-explanation { margin-top: 14px; padding: 14px 16px; background: rgba(255,182,39,0.06); border-left: 3px solid var(--arc); font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); border-radius: 0 6px 6px 0; }
.diag-cta { margin-top: 18px; padding: 12px 28px; background: var(--arc); color: #08080A; border: none; border-radius: 6px; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; transition: opacity 0.2s; }
.diag-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.diag-cta:hover:not(:disabled) { opacity: 0.9; }
/* Email gate */
.gate-form label { display: block; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 8px; }
.gate-form input[type=email] { width: 100%; box-sizing: border-box; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 1rem; margin-bottom: 16px; }
.gate-form input[type=email]:focus { outline: none; border-color: var(--arc); }
.gate-consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.gate-consent input { margin-top: 3px; }
/* Results */
.result-score { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--text); margin-bottom: 6px; }
.result-pct { color: var(--arc); }
.result-label { color: var(--text-dim); font-family: 'IBM Plex Mono', monospace; font-size: 0.86rem; letter-spacing: 0.04em; margin-bottom: 22px; }
.result-topic-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.result-topic-row:first-child { border-top: none; }
.result-topic-name { color: var(--text-muted); }
.result-topic-score { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.result-topic-score--strong { color: #7FBF7F; }
.result-topic-score--weak { color: var(--arc); }
.result-weak-block { margin: 18px 0; padding: 14px 16px; background: rgba(255,182,39,0.04); border-left: 3px solid var(--arc); border-radius: 0 6px 6px 0; }
.result-weak-block h4 { font-family: 'Syne', sans-serif; font-size: 0.95rem; margin: 0 0 6px; color: var(--arc); }
.result-weak-block a { color: var(--arc); text-decoration: underline; }
.result-footer { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); color: var(--text-dim); font-size: 0.94rem; line-height: 1.6; }
.result-footer strong { color: var(--text-muted); font-weight: 600; }