:root {
  --ink: #101419;
  --ink-soft: #586067;
  --paper: #f4f3ef;
  --paper-deep: #e9e8e2;
  --line: #d8d9d4;
  --accent: #c9f04a;
  --accent-dark: #88a91a;
  --warm: #ee8065;
  --white: #fff;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --shadow: 0 18px 50px rgba(16, 20, 25, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; max-width: 1480px; margin: 0 auto; padding: 0 5vw; overflow: hidden; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 29px 0 25px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 800; letter-spacing: -.07em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: var(--ink); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name span { font-weight: 500; color: var(--ink-soft); }
.header-meta, .site-footer, .eyebrow, .art-label, .art-kicker, .timer-label, .question-topic, .stat-label, .results-tag, .score-card-label, .review-heading > span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.header-meta { display: flex; gap: 9px; align-items: center; color: var(--ink-soft); }
.status-dot { width: 7px; height: 7px; background: var(--accent-dark); display: inline-block; border-radius: 50%; box-shadow: 0 0 0 4px rgba(201, 240, 74, .25); }
.screen { padding: 74px 0 50px; min-height: calc(100vh - 103px); }
.screen[hidden] { display: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 21px; color: var(--ink-soft); }
.eyebrow-line { width: 22px; height: 1px; display: inline-block; background: var(--warm); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-weight: 700; letter-spacing: -.075em; line-height: .98; }
h1 { font-size: clamp(52px, 7vw, 100px); max-width: 800px; margin-bottom: 29px; }
h2 { font-size: clamp(38px, 5vw, 68px); }
em { color: var(--accent-dark); font-style: normal; }
.hero-description { max-width: 465px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin-bottom: 34px; }
.button { border: 0; border-radius: 0; padding: 13px 17px; font-size: 12px; font-weight: 700; transition: background .2s, color .2s, transform .2s, border-color .2s; display: inline-flex; align-items: center; justify-content: center; gap: 19px; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .category-card:focus-visible, .answer:focus-visible, .back-button:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--accent-dark); color: var(--ink); }
.button-large { padding: 17px 20px; min-width: 194px; }
.button-arrow { font-size: 18px; font-weight: 400; line-height: 10px; }
.button-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.button-ghost:hover { border-color: var(--ink); background: var(--white); }
.hero-footnote { display: flex; align-items: center; gap: 9px; margin-top: 20px; font-family: var(--mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.micro-icon { font-size: 14px; color: var(--warm); }.separator { color: var(--line); margin: 0 4px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); min-height: 570px; align-items: center; gap: 6vw; }
.hero-art { align-self: stretch; position: relative; min-height: 540px; isolation: isolate; }
.art-orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; z-index: -1; }
.orbit-one { width: 390px; height: 390px; left: 10%; top: 9%; }.orbit-two { width: 270px; height: 270px; left: 25%; top: 20%; border-color: var(--accent-dark); border-style: dashed; opacity: .7; }
.art-card { position: absolute; background: var(--white); box-shadow: var(--shadow); padding: 20px; }
.art-card-top { left: 6%; top: 11%; width: 143px; transform: rotate(-5deg); }.art-card-main { left: 24%; top: 29%; width: 245px; min-height: 220px; background: var(--ink); color: var(--paper); transform: rotate(3deg); padding: 29px; }.art-card-bottom { left: 59%; bottom: 16%; width: 151px; transform: rotate(-7deg); }
.art-card strong { display: block; font-size: 52px; line-height: 1; letter-spacing: -.08em; margin: 13px 0 3px; }.art-card-top strong { font-size: 57px; }.art-card strong span { font-size: 19px; letter-spacing: -.02em; }.art-unit { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }
.art-kicker { color: var(--accent); }.signal-row { display: flex; align-items: center; justify-content: space-between; font-size: 26px; letter-spacing: -.06em; margin: 52px 0 18px; }.signal-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }.art-card-main p { color: #b1b5b0; font-size: 12px; line-height: 1.55; }.art-vertical-label { position: absolute; right: 4%; top: 30%; writing-mode: vertical-rl; font-family: var(--mono); font-size: 9px; letter-spacing: .17em; color: var(--ink-soft); }
.section-divider, .results-divider { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 15px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }.section-divider > span:first-child, .results-divider > span:first-child { color: var(--warm); }.divider-rule { height: 1px; background: var(--line); }
.category-layout { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: 9vw; padding: 90px 0 92px; }.category-intro h2 { font-size: clamp(43px, 5vw, 67px); margin-bottom: 25px; }.category-intro > p:not(.eyebrow) { max-width: 280px; color: var(--ink-soft); line-height: 1.65; font-size: 13px; }.category-count { display: flex; align-items: center; gap: 14px; margin-top: 55px; }.category-count strong { font-size: 48px; letter-spacing: -.1em; }.category-count span { color: var(--ink-soft); font-family: var(--mono); font-size: 9px; text-transform: uppercase; line-height: 1.5; }
.category-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; align-content: start; }.category-card { position: relative; border: 1px solid var(--line); background: transparent; text-align: left; padding: 25px 24px 23px; min-height: 190px; transition: background .2s, transform .2s, border-color .2s; }.category-card:hover, .category-card.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-4px); }.category-card.selected .category-icon, .category-card:hover .category-icon { background: var(--accent); color: var(--ink); }.category-card.selected .category-card-description, .category-card:hover .category-card-description { color: #aeb3ac; }.category-icon { width: 38px; height: 38px; display: grid; place-items: center; background: var(--paper-deep); margin-bottom: 20px; font-size: 18px; transition: background .2s; }.category-card h3 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.06em; }.category-card-description { color: var(--ink-soft); font-size: 11px; line-height: 1.5; max-width: 220px; }.category-card-meta { position: absolute; right: 22px; top: 27px; font-family: var(--mono); font-size: 9px; color: var(--ink-soft); }.category-card:hover .category-card-meta, .category-card.selected .category-card-meta { color: var(--accent); }.category-card-arrow { position: absolute; bottom: 21px; right: 22px; font-size: 19px; opacity: .55; }
.quiz-topline, .results-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }.back-button { border: 0; background: transparent; color: var(--ink-soft); padding: 0; font-size: 11px; display: flex; gap: 10px; align-items: center; }.back-button span { font-size: 19px; color: var(--ink); }.quiz-session-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }.quiz-question-count { font-family: var(--mono); font-size: 13px; }.quiz-question-count .count-slash { color: var(--line); margin: 0 4px; }.progress-track { width: 100%; height: 3px; background: var(--line); margin-bottom: 70px; }.progress-value { background: var(--accent-dark); height: 100%; transition: width .4s ease; width: 20%; }.quiz-layout { display: grid; grid-template-columns: 220px 1fr; gap: 9vw; max-width: 1080px; margin: 0 auto; }.quiz-aside { padding-top: 8px; }.timer-block { text-align: center; margin: 50px 0 70px; }.timer-ring { position: relative; width: 148px; height: 148px; margin: 0 auto 13px; }.timer-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }.timer-ring circle { fill: none; stroke-width: 3; }.timer-ring-track { stroke: var(--paper-deep); }.timer-ring-value { stroke: var(--warm); stroke-linecap: square; stroke-dasharray: 270.18; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .2s; }.timer-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; font-weight: 700; letter-spacing: -.1em; }.timer-label { color: var(--ink-soft); }.timer-block.is-warning .timer-ring-value { stroke: #d7513e; }.timer-block.is-warning .timer-ring span { color: #d7513e; }.quiz-aside-note { border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 12px; }.note-mark { color: var(--warm); font-size: 20px; }.quiz-aside-note p { font-family: var(--mono); color: var(--ink-soft); font-size: 9px; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; }
.question-panel { max-width: 730px; }.question-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }.question-topic { color: var(--warm); }.question-pips { display: inline-flex; gap: 5px; }.question-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }.question-pip.is-active { background: var(--ink); }.question-pip.is-done { background: var(--accent-dark); }.question-panel h2 { font-size: clamp(39px, 5.3vw, 72px); max-width: 750px; margin-bottom: 46px; }.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }.answer { position: relative; border: 1px solid var(--line); background: transparent; min-height: 78px; display: flex; align-items: center; gap: 16px; text-align: left; padding: 17px 20px; transition: .2s; }.answer:hover { border-color: var(--ink); background: var(--white); }.answer.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }.answer.is-correct { background: var(--accent); border-color: var(--accent); color: var(--ink); }.answer.is-wrong { background: #f8c0b3; border-color: #f8c0b3; color: var(--ink); }.answer-index { width: 26px; height: 26px; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; flex: 0 0 auto; }.answer.is-selected .answer-index, .answer.is-correct .answer-index, .answer.is-wrong .answer-index { border-color: currentColor; }.answer-text { font-size: 13px; line-height: 1.35; }.quiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 38px; }.quiz-actions-right { display: flex; gap: 8px; }.keyboard-hint { color: var(--ink-soft); font-family: var(--mono); font-size: 9px; }.keyboard-hint kbd { background: var(--paper-deep); padding: 3px 5px; font-family: var(--mono); font-size: 9px; }
.results-topline { margin-bottom: 86px; }.results-tag { color: var(--ink-soft); }.results-tag span { color: var(--warm); font-size: 17px; vertical-align: middle; margin-left: 5px; }.results-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; max-width: 1060px; margin: 0 auto 94px; }.results-headline h1 { font-size: clamp(54px, 8vw, 106px); margin-bottom: 27px; }.results-headline > p:last-child { color: var(--ink-soft); font-size: 14px; }.score-card { background: var(--ink); color: var(--paper); padding: 33px 35px 30px; min-width: 300px; }.score-card-label { color: #aeb3ac; }.score-value { display: flex; align-items: baseline; gap: 8px; margin: 43px 0 27px; font-size: 105px; line-height: .7; letter-spacing: -.13em; }.score-value small { color: #9fa59f; font-size: 16px; letter-spacing: -.05em; }.score-bar { height: 5px; background: #343a3d; }.score-bar div { height: 100%; width: 0; background: var(--accent); transition: width .8s ease; }.score-caption { display: flex; justify-content: space-between; margin-top: 13px; color: #aeb3ac; font-family: var(--mono); text-transform: uppercase; font-size: 9px; }.score-caption span:first-child { color: var(--accent); }.results-divider { margin-bottom: 25px; }.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 87px; }.stat-card { border-top: 3px solid var(--ink); padding-top: 19px; }.stat-card-accent { border-color: var(--accent-dark); }.stat-label { display: block; color: var(--ink-soft); margin-bottom: 19px; }.stat-card strong { display: block; font-size: 38px; letter-spacing: -.08em; margin-bottom: 8px; }.stat-foot { font-family: var(--mono); color: var(--ink-soft); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }.results-review { max-width: 850px; margin: 0 auto 70px; }.review-heading { border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; }.review-heading .eyebrow { margin: 0; }.review-heading > span { color: var(--ink-soft); }.review-list { border-bottom: 1px solid var(--line); }.review-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }.review-item:last-child { border-bottom: 0; }.review-number { color: var(--ink-soft); font-family: var(--mono); font-size: 10px; }.review-question { font-size: 12px; line-height: 1.45; }.review-answer { font-family: var(--mono); font-size: 9px; text-transform: uppercase; text-align: right; }.review-answer.is-correct { color: var(--accent-dark); }.review-answer.is-wrong { color: #c04d39; }.results-actions { display: flex; justify-content: center; gap: 10px; padding-bottom: 30px; }.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 100px); background: var(--ink); color: var(--paper); padding: 12px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; opacity: 0; transition: .3s; pointer-events: none; z-index: 10; }.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }.site-footer { display: flex; justify-content: space-between; color: var(--ink-soft); padding: 22px 0 26px; border-top: 1px solid var(--line); font-size: 8px; }
@media (max-width: 850px) { .app-shell { padding: 0 6vw; }.home-grid { grid-template-columns: 1fr; gap: 20px; min-height: auto; padding-bottom: 55px; }.hero-art { min-height: 400px; max-width: 580px; width: 100%; margin: 0 auto; }.orbit-one { width: 310px; height: 310px; left: 18%; }.orbit-two { width: 220px; height: 220px; left: 31%; }.art-card-main { left: 29%; top: 24%; }.art-card-top { left: 12%; }.art-card-bottom { left: 61%; bottom: 8%; }.category-layout { grid-template-columns: 1fr; gap: 45px; }.category-intro h2 { font-size: 55px; }.category-count { margin-top: 30px; }.quiz-layout { grid-template-columns: 1fr; gap: 35px; }.quiz-aside { display: grid; grid-template-columns: auto 1fr; align-items: center; }.quiz-aside .eyebrow { grid-column: 1 / -1; }.timer-block { margin: 0; display: flex; align-items: center; gap: 12px; }.timer-ring { width: 85px; height: 85px; margin: 0; }.timer-ring span { font-size: 28px; }.quiz-aside-note { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 20px; margin-left: auto; }.results-layout { grid-template-columns: 1fr; gap: 40px; margin-bottom: 70px; }.results-topline { margin-bottom: 60px; }.score-card { max-width: 470px; width: 100%; }.results-grid { margin-bottom: 65px; } }
@media (max-width: 560px) { .site-header { padding-top: 20px; }.header-meta { font-size: 8px; }.screen { padding-top: 50px; }.hero-description { font-size: 14px; }.hero-footnote { flex-wrap: wrap; line-height: 1.5; }.hero-art { min-height: 315px; transform: scale(.82); transform-origin: top left; width: 122%; margin-bottom: -50px; }.orbit-one { width: 270px; height: 270px; left: 11%; }.orbit-two { width: 195px; height: 195px; left: 25%; }.art-card-main { left: 20%; top: 23%; width: 214px; min-height: 195px; padding: 23px; }.signal-row { font-size: 22px; margin-top: 40px; }.art-card-top { left: 1%; top: 9%; }.art-card-bottom { left: 53%; bottom: 6%; }.art-vertical-label { right: 0; }.section-divider, .results-divider { grid-template-columns: auto 1fr auto; }.section-divider > span:nth-child(2), .section-divider > span:last-child, .results-divider > span:nth-child(2), .results-divider > span:last-child { display: none; }.category-list { grid-template-columns: 1fr; }.category-card { min-height: 154px; }.category-intro h2 { font-size: 47px; }.quiz-topline { gap: 15px; }.quiz-session-label { display: none; }.quiz-question-count { margin-left: auto; }.progress-track { margin-bottom: 44px; }.quiz-aside { display: block; }.quiz-aside .eyebrow { display: none; }.timer-block { justify-content: flex-start; margin-bottom: 30px; }.timer-ring { width: 78px; height: 78px; }.timer-ring span { font-size: 26px; }.quiz-aside-note { display: none; }.question-meta { margin-bottom: 20px; }.question-panel h2 { font-size: 42px; margin-bottom: 30px; }.answers { grid-template-columns: 1fr; }.answer { min-height: 64px; }.quiz-actions { align-items: flex-end; gap: 20px; }.keyboard-hint { display: none; }.quiz-actions-right { width: 100%; justify-content: flex-end; }.button { padding: 12px 14px; }.results-headline h1 { font-size: 61px; }.results-layout { margin-bottom: 55px; }.score-value { font-size: 82px; }.results-grid { grid-template-columns: 1fr 1fr; gap: 24px 13px; }.stat-card-accent { grid-column: 1 / -1; }.review-item { grid-template-columns: 22px 1fr; gap: 10px; }.review-answer { grid-column: 2; text-align: left; margin-top: -6px; }.results-actions { flex-direction: column; }.results-actions .button { width: 100%; }.site-footer { font-size: 7px; } }

/* Keep result cards inside the narrowest phone viewport. */
@media (max-width: 350px) {
  .score-card { min-width: 0; }
}

/* Quiz readability pass: larger type, clearer controls, and more breathing room. */
.quiz-question-count { font-size: 14px; }
.back-button { font-size: 12px; }
.question-topic { font-size: 12px; letter-spacing: .12em; }
.question-panel h2 { font-size: clamp(46px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -.06em; margin-bottom: 38px; }
.answers { gap: 14px; }
.answer { min-height: 94px; padding: 22px 24px; gap: 18px; background: rgba(255,255,255,.24); }
.answer-index { width: 32px; height: 32px; font-size: 11px; }
.answer-text { font-size: 16px; line-height: 1.48; font-weight: 600; }
.quiz-actions { margin-top: 44px; }
.keyboard-hint { font-size: 10px; }
.quiz-actions .button { font-size: 13px; padding: 14px 18px; }
.timer-label { font-size: 11px; }

@media (max-width: 850px) {
  .question-panel h2 { font-size: clamp(44px, 7vw, 64px); }
}

@media (max-width: 560px) {
  .question-panel h2 { font-size: clamp(36px, 10vw, 48px); line-height: 1.08; margin-bottom: 28px; }
  .answer { min-height: 76px; padding: 18px 17px; }
  .answer-index { width: 30px; height: 30px; }
  .answer-text { font-size: 15px; line-height: 1.45; }
  .quiz-actions .button { font-size: 12px; padding: 13px 15px; }
}