:root { --navy:#0a3161; --navy-dark:#061f42; --red:#b22234; --red-dark:#861a27; --blue-pale:#eaf2fb; --ink:#10243e; --muted:#5f6d7d; --line:#d7e0eb; --paper:#f5f8fc; --white:#fff; font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 92% -5%,#d5e7ff 0 11%,transparent 33%),var(--paper); } button { font:inherit; cursor:pointer; } button:focus-visible,a:focus-visible { outline:3px solid #e6b31e; outline-offset:3px; }
.app-shell { width:min(100%,680px); min-height:100vh; margin:auto; padding:max(1.25rem,env(safe-area-inset-top)) 1.15rem max(2rem,env(safe-area-inset-bottom)); }.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(.9rem,2.5vh,1.5rem); }.top-actions { display:flex; gap:.5rem; }.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--navy); text-decoration:none; line-height:1; }.brand strong { display:block; font-size:1.05rem; letter-spacing:-.03em; }.brand small { display:block; margin-top:.23rem; color:var(--red); font-size:.67rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.brand-mark { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.6rem; color:white; background:var(--navy); font-size:1.1rem; }.icon-button { display:grid; place-items:center; width:2.7rem; height:2.7rem; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--navy); background:white; font-size:1.3rem; }
.hero { max-width:560px; padding-top:.25rem; }.hero-badge,.eyebrow,.answer-label { margin:0 0 .75rem; color:var(--red); font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.hero h1 { margin:0; color:var(--navy-dark); font-size:clamp(2.9rem,11vw,4.7rem); letter-spacing:-.07em; line-height:.94; }.hero h1 em { color:var(--red); font-family:Georgia,serif; font-weight:500; }.hero>p:not(.hero-badge):not(.local-note) { max-width:34rem; margin:1.6rem 0 1.9rem; color:var(--muted); font-size:1.08rem; line-height:1.6; }.fact-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:0 0 1.25rem; }.fact-row span { padding:.75rem .45rem; border:1px solid var(--line); border-radius:.7rem; color:var(--muted); background:rgba(255,255,255,.76); font-size:.72rem; text-align:center; }.fact-row b { display:block; color:var(--navy); font-size:1.2rem; }.primary-button,.review-button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; width:100%; min-height:3.65rem; border:0; border-radius:.75rem; color:white; background:var(--navy); box-shadow:0 5px 0 var(--navy-dark); font-weight:800; }.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 var(--navy-dark); }.quiet-button { width:100%; min-height:2.7rem; border:0; color:var(--navy); background:transparent; font-weight:750; }.local-note { margin:1.15rem 0 .35rem; color:var(--muted); font-size:.82rem; text-align:center; }.privacy-button { display:block; width:max-content; margin:0 auto; padding:.25rem; border:0; color:var(--muted); background:transparent; font-size:.76rem; font-weight:700; text-decoration:underline; text-underline-offset:.18em; }
.setup-card { max-width:560px; padding-top:.25rem; }.setup-card h1 { margin:0; color:var(--navy-dark); font-size:clamp(2.7rem,10vw,4.2rem); letter-spacing:-.07em; line-height:.94; }.setup-card h1 em { color:var(--red); font-family:Georgia,serif; font-weight:500; }.setup-card>p:not(.hero-badge):not(.capital-preview) { margin:1.5rem 0; color:var(--muted); font-size:1.06rem; line-height:1.6; }.setup-card label { display:block; margin:1.2rem 0 .5rem; color:var(--navy); font-size:.82rem; font-weight:800; }.setup-card label span { color:var(--muted); font-weight:650; }.setup-card input { width:100%; min-height:3.35rem; padding:0 .95rem; border:2px solid var(--line); border-radius:.75rem; color:var(--ink); background:white; font:inherit; }.setup-card input:focus { border-color:var(--navy); outline:0; }.state-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; max-height:18.5rem; margin-top:.8rem; padding:.25rem; overflow:auto; border-radius:.9rem; background:#eaf0f8; }.state-option { min-height:2.8rem; padding:.55rem .65rem; border:1px solid transparent; border-radius:.65rem; color:var(--navy); background:white; font-size:.83rem; font-weight:750; text-align:left; }.state-option:hover { border-color:#9eb7d6; }.state-option.selected { border-color:var(--red); color:white; background:var(--red); box-shadow:0 3px 0 var(--red-dark); }.capital-preview { margin:.9rem 0 0; padding:.8rem .9rem; border-radius:.7rem; color:var(--navy); background:var(--blue-pale); font-weight:750; }.zip-match { margin-top:.7rem; color:var(--muted); font-size:.85rem; line-height:1.45; }.zip-match p { margin:.45rem 0; }.zip-match a { color:var(--navy); font-weight:800; }.representative-options { display:grid; gap:.45rem; margin:.7rem 0; }.representative-option { padding:.7rem .8rem; border:1px solid var(--line); border-radius:.65rem; color:var(--navy); background:white; font:inherit; font-weight:750; text-align:left; }.representative-option.selected { border-color:var(--red); color:white; background:var(--red); }.setup-card .primary-button { margin-top:1.15rem; }
.danger-button { width:100%; min-height:3.25rem; margin-top:1.25rem; border:0; border-radius:.75rem; color:white; background:var(--red); box-shadow:0 4px 0 var(--red-dark); font-weight:800; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1.3rem 0; }.summary-stat { padding:.85rem .5rem; border-radius:.7rem; background:var(--paper); text-align:center; }.summary-stat strong { display:block; color:var(--navy); font-size:1.3rem; }.summary-stat span { color:var(--muted); font-size:.7rem; }.stats-copy { margin:.45rem 0 1.2rem; color:var(--muted); font-size:.9rem; line-height:1.55; }
.practice-meta { display:flex; justify-content:space-between; margin:0 0 .7rem; color:var(--muted); font-size:.78rem; font-weight:750; }.practice-meta span:last-child { color:var(--red); }.progress-track { overflow:hidden; height:.42rem; margin-bottom:1.15rem; border-radius:1rem; background:#dce5f0; }.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--red); transition:width .25s ease; }.question-card { padding:clamp(1.35rem,5vw,2.1rem); border:1px solid var(--line); border-radius:1.1rem; background:white; box-shadow:0 10px 25px rgba(6,31,66,.08); }.question-card h1 { margin:0 0 1.65rem; color:var(--navy-dark); font-size:clamp(1.48rem,5.7vw,2.12rem); letter-spacing:-.035em; line-height:1.17; }.reveal-button { width:100%; min-height:3.5rem; border:2px solid var(--navy); border-radius:.75rem; color:var(--navy); background:white; font-weight:800; }.answer-panel { margin-top:1.2rem; padding:1rem; border-radius:.75rem; background:var(--blue-pale); }.answer-panel ul { margin:.45rem 0 0; padding-left:1.25rem; line-height:1.55; }.answer-panel li+li { margin-top:.35rem; }.source-link { margin:.85rem 0 0; font-size:.83rem; font-weight:800; }.source-link a,.modal-card a { color:var(--navy); }.rating-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:.75rem; margin-top:1.2rem; }.review-button { color:var(--red); background:white; border:2px solid var(--red); box-shadow:none; }.rating-actions .primary-button { min-height:3.4rem; }
.answer-list { display:grid; gap:.7rem; }.answer-button { width:100%; min-height:3.7rem; padding:.75rem .9rem; border:2px solid var(--line); border-radius:.75rem; color:var(--ink); background:white; font-weight:650; text-align:left; line-height:1.3; }.answer-button.correct { border-color:#168052; background:#e8f8ef; }.answer-button.incorrect { border-color:var(--red); background:#fff0ef; }.answer-button.next-answer { border-color:var(--navy); color:white; background:var(--navy); cursor:pointer; text-align:center; }.choice-feedback { margin:1rem 0; padding:.85rem .9rem; border-radius:.7rem; line-height:1.45; }.choice-feedback.good { color:#075c3a; background:#e8f8ef; }.choice-feedback.try { color:#84201b; background:#fff0ef; }.review-link { display:block; width:max-content; margin-top:.7rem; color:inherit; font-size:.85rem; font-weight:850; }.answer-panel #next-button { margin-top:.1rem; }
dialog { width:min(calc(100% - 2rem),560px); padding:0; border:0; border-radius:1.05rem; color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.28); } dialog::backdrop { background:rgba(4,23,49,.57); backdrop-filter:blur(3px); }.modal-card { padding:1.5rem; background:white; }.modal-card p { color:var(--muted); line-height:1.55; }.modal-heading { display:flex; align-items:start; justify-content:space-between; }.modal-card h2 { margin:0; color:var(--navy-dark); letter-spacing:-.04em; }.session-card { text-align:center; }.session-card .primary-button { margin-top:1.1rem; }
.readiness-card { display:grid; gap:.35rem; margin:0 0 1rem; padding:.9rem 1rem; border:1px solid #bdd1e9; border-radius:.8rem; color:var(--navy); background:#edf5ff; }.readiness-card.ready { border-color:#84c7a7; background:#e8f8ef; }.readiness-card strong { font-size:.84rem; text-transform:uppercase; letter-spacing:.07em; }.readiness-card span { color:var(--muted); font-size:.83rem; line-height:1.4; }.readiness-card i,.mastery-row i { display:block; overflow:hidden; height:.38rem; border-radius:999px; background:#d7e4f1; }.readiness-card em,.mastery-row em { display:block; height:100%; border-radius:inherit; background:var(--red); }.mastery-list { display:grid; gap:.7rem; margin:.5rem 0 1.2rem; }.mastery-row { display:grid; grid-template-columns:5.9rem 2.7rem 1fr; align-items:center; gap:.55rem; color:var(--muted); font-size:.8rem; }.mastery-row b { color:var(--navy); font-size:.78rem; text-align:right; }.review-list { display:grid; gap:.55rem; max-height:18rem; overflow:auto; }.review-item { padding:.75rem .8rem; border:1px solid var(--line); border-radius:.65rem; background:var(--paper); }.review-item summary { color:var(--navy); cursor:pointer; font-weight:800; }.review-item p { margin:.65rem 0; color:var(--muted); font-size:.85rem; line-height:1.4; }.review-item a { color:var(--navy); font-size:.82rem; font-weight:800; }
.bank-review { max-width:560px; padding-top:.25rem; }.bank-review h1 { margin:0; color:var(--navy-dark); font-size:clamp(2.4rem,9vw,4rem); letter-spacing:-.065em; line-height:.96; }.bank-review h1 em { color:var(--red); font-family:Georgia,serif; font-weight:500; }.bank-review>p:not(.hero-badge) { margin:1.4rem 0; color:var(--muted); line-height:1.55; }.quiet-link { display:inline-block; margin-bottom:1.2rem; color:var(--navy); font-weight:800; }.bank-review-list { display:grid; gap:1rem; }.bank-review-item { padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:white; box-shadow:0 6px 18px rgba(6,31,66,.06); }.bank-review-item h2 { margin:0 0 1.2rem; color:var(--navy-dark); font-size:1.25rem; letter-spacing:-.03em; line-height:1.25; }.bank-review-item .answer-label { margin:.95rem 0 .4rem; }.bank-review-item ul,.bank-review-item ol { margin:.35rem 0 1rem; padding-left:1.25rem; color:var(--muted); line-height:1.45; }.bank-review-item li+li { margin-top:.35rem; }.bank-review-item ol .is-correct { color:#075c3a; }.bank-review-item ol strong { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }.bank-review-item a { color:var(--navy); font-size:.82rem; font-weight:800; }
@media (min-width:700px) { .app-shell { padding-left:0; padding-right:0; }.primary-button { width:auto; min-width:17rem; }.hero .primary-button { width:auto; } } @media (hover:hover) and (pointer:fine) { .reveal-button:hover { background:var(--blue-pale); } }