:root {
  color-scheme: light;
  --navy: #003e6b;
  --navy-deep: #002b4c;
  --blue: #126fa8;
  --teal: #007f86;
  --teal-pale: #e5f4f2;
  --gold: #f7bd34;
  --ink: #112435;
  --muted: #5c6b78;
  --line: #d9e2e8;
  --paper: #f4f7f8;
  --white: #fff;
  font-family: ui-rounded, "Avenir Next", Avenir, "Helvetica Neue", system-ui, sans-serif;
}

* { 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%, #c9e9e9 0 9%, transparent 31%), var(--paper); -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); 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); }
.brand { display: inline-flex; align-items: center; color: var(--navy); text-decoration: none; gap: .65rem; line-height: 1; }
.brand strong { display: block; font-size: 1.04rem; letter-spacing: -.025em; }.brand small { display: block; margin-top: .2rem; color: var(--teal); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .65rem; background: var(--navy); color: var(--gold); font-size: 1.55rem; font-weight: 900; transform: rotate(-18deg); }
.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: var(--white); font-size: 1.35rem; }
.hero { max-width: 555px; padding-top: .25rem; }.hero-badge, .eyebrow { margin: 0 0 .75rem; color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--navy-deep); font-size: clamp(2.9rem, 11vw, 4.6rem); letter-spacing: -.07em; line-height: .94; }.hero h1 em { color: var(--teal); font-family: Georgia, serif; font-weight: 500; }
.hero > p:not(.hero-badge):not(.local-note) { max-width: 33rem; margin: 1.6rem 0 1.9rem; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.primary-button, .danger-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-deep); font-weight: 800; }.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy-deep); }
.local-note { margin: 1.2rem 0; color: var(--muted); font-size: .82rem; text-align: center; }.hero-stats { display: flex; gap: .65rem; margin: 0 0 1.25rem; }.stat-chip { flex: 1; padding: .8rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(255,255,255,.72); }.stat-chip strong { display: block; color: var(--navy); font-size: 1.25rem; }.stat-chip span { color: var(--muted); font-size: .72rem; }
.readiness-card { margin:0 0 1.25rem;padding:1rem;border-radius:.75rem;color:#fff;background:var(--navy); }.readiness-card strong{display:block;font-size:1.2rem}.readiness-card span{font-size:.82rem}
.readiness-card.building { background:#a3312b; }.readiness-card.nearly-ready { color:#392900; background:#f4c441; }.readiness-card.ready { background:#16734d; }
.readiness-progress { height:.42rem; margin-top:.7rem; overflow:hidden; border-radius:1rem; background:rgba(255,255,255,.28); }.readiness-progress i { display:block; height:100%; border-radius:inherit; background:rgba(255,255,255,.78); }
.mastery-list { display:grid; gap:.6rem; margin:.6rem 0 1.2rem; }.mastery-row { display:grid; grid-template-columns:6.5rem 5.8rem 1fr; align-items:center; gap:.5rem; font-size:.78rem; color:var(--muted); }.mastery-row b { color:var(--navy); text-align:right; font-size:.76rem; }.mastery-row i { height:.42rem; overflow:hidden; border-radius:1rem; background:#dce7eb; }.mastery-row em { display:block; height:100%; background:var(--teal); }
.loading-card, .question-card { background: var(--white); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 10px 25px rgba(0,43,76,.07); }.loading-card { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 12rem; color: var(--muted); }.load-error { max-width: 23rem; padding: 1.4rem; text-align: center; }.load-error p { line-height: 1.5; }.load-error .primary-button { min-height: 3rem; margin-top: .5rem; }.spinner { width: 1.25rem; height: 1.25rem; border: 3px solid #d7e5ec; border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.practice-meta { display: flex; justify-content: space-between; margin: 0 0 .7rem; color: var(--muted); font-size: .78rem; font-weight: 750; }.streak { color: var(--teal); }.progress-track { overflow: hidden; height: .42rem; margin-bottom: 1.15rem; border-radius: 1rem; background: #d9e5e9; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width .25s ease; }
.question-card { padding: clamp(1.35rem, 5vw, 2.1rem); }.question-card h1 { margin: 0 0 1.65rem; color: var(--navy-deep); font-size: clamp(1.48rem, 5.7vw, 2.12rem); letter-spacing: -.035em; line-height: 1.17; }.answer-list { display: grid; gap: .75rem; }.answer-button { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .85rem; width: 100%; min-height: 4.15rem; padding: .75rem .85rem; border: 2px solid var(--line); border-radius: .75rem; color: var(--ink); background: white; text-align: left; line-height: 1.28; transition: border-color .15s, background .15s, transform .15s; }.answer-letter { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--navy); background: #e9f1f5; font-size: .76rem; font-weight: 900; }.answer-button.correct { border-color: #168052; background: #e8f8ef; }.answer-button.correct .answer-letter { background: #168052; color: white; }.answer-button.incorrect { border-color: #bd3e35; background: #fff0ee; }.answer-button.incorrect .answer-letter { background: #bd3e35; color: white; }.answer-button:disabled { cursor: default; }.answer-button.next-answer { border-color: var(--navy); color: white; background: var(--navy); cursor: pointer; }.answer-button.next-answer .answer-letter { color: var(--navy); background: var(--gold); }
.feedback { margin-top: 1.3rem; padding: .9rem 1rem; border-radius: .7rem; font-size: .92rem; line-height: 1.45; }.feedback.good { color: #075c3a; background: #e8f8ef; }.feedback.try { color: #8b2c26; background: #fff0ee; }.feedback-links { display: flex; gap: .8rem; margin-top: .55rem; font-size: .8rem; font-weight: 800; }.feedback-links a { color: inherit; }.quiz-actions { display: grid; gap: .85rem; margin-top: 1.2rem; }.quiet-button { min-height: 2.7rem; border: 0; color: var(--navy); background: transparent; font-weight: 750; }.danger-button { margin-top: 1.3rem; background: #9c322c; box-shadow: 0 5px 0 #72211d; }
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(0,27,47,.55); backdrop-filter: blur(3px); }.modal-card { padding: 1.5rem; background: white; }.modal-heading { display: flex; align-items: start; justify-content: space-between; }.modal-card h2 { margin: 0; color: var(--navy-deep); letter-spacing: -.04em; }.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.35rem 0; }.summary-stat { padding: .85rem .55rem; border-radius: .7rem; background: var(--paper); text-align: center; }.summary-stat strong { display: block; color: var(--navy); font-size: 1.35rem; }.summary-stat span { color: var(--muted); font-size: .7rem; }.category-list { margin: 1rem 0; padding-left: 1.25rem; color: var(--muted); font-size: .9rem; line-height: 1.65; }.review-list { display: grid; gap: .65rem; }.review-item { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); }.review-item summary { color: var(--navy); cursor: pointer; font-size: .88rem; font-weight: 800; }.review-item p { margin: .75rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }.review-item .review-question { color: var(--ink); font-weight: 650; }.source-links a { color: var(--blue); font-weight: 750; text-decoration-thickness: 1px; }.session-card { text-align: center; }.session-card .primary-button { margin-top: 1.2rem; }
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(0,27,47,.55); backdrop-filter: blur(3px); }.modal-card { padding: 1.5rem; background: white; }.modal-heading { display: flex; align-items: start; justify-content: space-between; }.modal-card h2 { margin: 0; color: var(--navy-deep); letter-spacing: -.04em; }.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.35rem 0; }.summary-stat { padding: .85rem .55rem; border-radius: .7rem; background: var(--paper); text-align: center; }.summary-stat strong { display: block; color: var(--navy); font-size: 1.35rem; }.summary-stat span { color: var(--muted); font-size: .7rem; }.category-list { margin: 1rem 0; padding-left: 1.25rem; color: var(--muted); font-size: .9rem; line-height: 1.65; }.review-list { display: grid; gap: .65rem; }.review-item { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); }.review-item summary { color: var(--navy); cursor: pointer; font-size: .88rem; font-weight: 800; }.review-item p { margin: .75rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }.review-item .review-question { color: var(--ink); font-weight: 650; }.source-links a { color: var(--blue); font-weight: 750; text-decoration-thickness: 1px; }.about-card p { color:var(--muted); line-height:1.55; }.about-card a { color:var(--blue); font-weight:750; }.development-credit { margin-top:1.35rem !important; color:var(--navy) !important; font-size:.86rem; }.session-card { text-align: center; }.session-card .primary-button { margin-top: 1.2rem; }
@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) { .answer-button:not(:disabled):hover { border-color: var(--blue); transform: translateY(-1px); } }
.bank-review { max-width:560px; padding-top:.25rem; }.bank-review h1 { margin:0; color:var(--navy-deep); font-size:clamp(2.4rem,9vw,4rem); letter-spacing:-.065em; line-height:.96; }.bank-review h1 em { color:var(--teal); 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(0,43,76,.06); }.bank-review-item h2 { margin:0 0 1.2rem; color:var(--navy-deep); font-size:1.25rem; letter-spacing:-.03em; line-height:1.25; }.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 .source-links { margin:0; font-size:.82rem; font-weight:800; }