:root {
  --ink: #181737;
  --muted: #6f708b;
  --soft-ink: #494a68;
  --cream: #fbf8f0;
  --paper: #fffdf8;
  --line: #e7e4dc;
  --indigo: #292764;
  --indigo-2: #3a3784;
  --lime: #d5ed6e;
  --lime-dark: #9dbb3e;
  --coral: #ff8e73;
  --green: #2e986b;
  --red: #df5e57;
  --shadow: 0 16px 50px rgba(32, 31, 75, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cream); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.app-shell { min-height: 100dvh; overflow: hidden; }
.topbar { min-height: 78px; width: min(1240px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; gap: 48px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.06em; }
.brand > span:last-child span { color: var(--indigo-2); }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; background: var(--lime); color: var(--indigo); border-radius: 9px 9px 9px 2px; font-size: 18px; transform: rotate(-7deg); }
.main-nav { display: flex; align-items: center; gap: 26px; margin-right: auto; height: 100%; }
.nav-link { background: none; border: 0; color: var(--muted); padding: 26px 0 22px; font-size: 14px; font-weight: 700; border-bottom: 3px solid transparent; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); border-bottom-color: var(--coral); }
.topbar-actions { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.status-dot, .offline-label i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #ddf1e7; }
.icon-button { border: 1px solid var(--line); border-radius: 99px; padding: 9px 14px; background: var(--paper); color: var(--indigo); font-weight: 700; font-size: 12px; margin-left: 8px; }
main { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.view { padding: 60px 0 70px; }
.view[hidden] { display: none; }
.hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; min-height: 332px; gap: 40px; align-items: center; }
.eyebrow { margin: 0 0 11px; color: var(--indigo-2); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 22px; height: 2px; background: var(--coral); vertical-align: middle; margin-right: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.07em; margin: 0 0 21px; }
h1 em { color: var(--indigo-2); font-style: normal; }
.hero-lead { max-width: 460px; color: var(--soft-ink); line-height: 1.65; font-size: 16px; }
.hero-stats { display: flex; gap: 32px; margin-top: 28px; }
.hero-stats div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats strong { font-size: 20px; letter-spacing: -.05em; }
.hero-stats span { color: var(--muted); font-size: 11px; }
.hero-art { position: relative; min-height: 300px; overflow: hidden; border-radius: 28px; background: var(--indigo); isolation: isolate; }
.hero-art:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 73% 34%, #4e4a98 0 12%, transparent 13%), linear-gradient(135deg, transparent 30%, rgba(123, 119, 193, .22) 30% 30.5%, transparent 30.5% 51%, rgba(123, 119, 193, .14) 51% 51.5%, transparent 51.5%); opacity: .9; }
.sun-disc { position: absolute; width: 208px; height: 208px; border-radius: 50%; right: 58px; top: 32px; border: 2px solid rgba(213,237,110,.8); box-shadow: 0 0 0 26px rgba(213,237,110,.09), 0 0 0 53px rgba(213,237,110,.05); }
.art-grid { position: absolute; inset: auto -10px -22px 0; height: 145px; background: linear-gradient(150deg, transparent 0 48%, rgba(213,237,110,.45) 48% 49%, transparent 49% 66%, rgba(255,142,115,.55) 66% 67%, transparent 67%), repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.11) 77px 78px); transform: perspective(270px) rotateX(53deg) rotateZ(-4deg); transform-origin: bottom; }
.floating-card { position: absolute; z-index: 2; padding: 18px 21px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 30px rgba(10, 9, 40, .2); }
.floating-card-main { left: 10%; bottom: 52px; width: 220px; border-radius: 12px 12px 12px 3px; transform: rotate(-3deg); }
.mini-label { display: block; color: var(--muted); letter-spacing: .13em; font-size: 9px; font-weight: 800; margin-bottom: 8px; }
.floating-card-main strong { display: block; font-size: 19px; letter-spacing: -.04em; margin-bottom: 12px; }
.floating-card-main small, .floating-card-note small { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin-top: 8px; }
.mini-progress { height: 5px; display: block; background: #ecebf4; border-radius: 99px; overflow: hidden; }
.mini-progress i { display: block; width: 62%; height: 100%; background: var(--coral); }
.floating-card-note { width: 112px; right: 9%; top: 42px; border-radius: 4px 14px 14px 14px; transform: rotate(8deg); }
.floating-card-note strong { font-size: 13px; display: block; }
.note-star { color: var(--coral); font-size: 22px; display: block; margin-bottom: 7px; }
.doodle { position: absolute; z-index: 3; color: var(--lime); font-size: 27px; font-weight: 800; }
.doodle-a { right: 7%; bottom: 40px; transform: rotate(13deg); }.doodle-b { left: 5%; top: 44px; }.doodle-c { right: 28%; top: 24px; color: var(--coral); font-size: 19px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .75fr); gap: 24px; align-items: start; margin-top: 32px; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.setup-panel { padding: 31px 34px; }
.section-heading, .side-heading, .table-label-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
h2 { font-size: 24px; letter-spacing: -.05em; margin-bottom: 0; }
.step-count { color: var(--muted); font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 7px; }.step-count i { width: 42px; height: 3px; display: inline-block; background: var(--coral); border-radius: 3px; }
.field-group { border: 0; padding: 0; margin: 27px 0 0; }.field-group legend, .field-group > label, .profile-row label, .compact-field > label, .leaderboard-toolbar label { display: block; margin-bottom: 10px; color: var(--soft-ink); font-size: 12px; font-weight: 800; }
.subject-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.choice-card { position: relative; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); background: #fffefa; border-radius: 11px; padding: 13px 15px; cursor: pointer; min-height: 68px; transition: .18s ease; }
.choice-card:hover, .choice-card.selected { border-color: var(--indigo-2); background: #f4f2ff; }.choice-card input { position: absolute; opacity: 0; }.choice-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--indigo); background: var(--lime); font-weight: 900; font-size: 13px; }.choice-card:nth-child(2) .choice-icon { background: #ffd8cc; }.choice-card strong { display: block; font-size: 14px; }.choice-card small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }.checkmark { margin-left: auto; display: none; width: 19px; height: 19px; text-align: center; color: var(--indigo); background: var(--lime); border-radius: 50%; font-size: 12px; }.choice-card.selected .checkmark { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }.select-wrap { position: relative; }.select-wrap:after { content: "⌄"; position: absolute; pointer-events: none; right: 13px; top: 9px; color: var(--indigo); }.select-wrap select, .compact-field select, .leaderboard-toolbar select { width: 100%; min-height: 44px; appearance: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fffefa; padding: 0 13px; font-weight: 700; font-size: 13px; }.count-options { display: flex; gap: 9px; }.count-options label { flex: 1; }.count-options input { position: absolute; opacity: 0; }.count-options span { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; min-height: 49px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-weight: 800; font-size: 14px; cursor: pointer; }.count-options small { color: var(--muted); font-size: 9px; font-weight: 500; }.count-options input:checked + span { border-color: var(--indigo-2); background: #f4f2ff; box-shadow: inset 0 0 0 1px var(--indigo-2); }
.text-button { color: var(--indigo-2); background: none; border: 0; font-size: 11px; font-weight: 800; text-decoration: underline; }.table-chips { display: flex; flex-wrap: wrap; gap: 6px; }.table-chip { min-width: 31px; height: 31px; border: 1px solid var(--line); background: #fffefa; color: var(--soft-ink); border-radius: 7px; font-size: 11px; font-weight: 800; }.table-chip.is-selected { background: var(--indigo); border-color: var(--indigo); color: white; }.field-hint { color: var(--muted); font-size: 10px; margin: 8px 0 0; }.profile-row { display: flex; align-items: center; gap: 11px; margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line); }.profile-row > div:nth-child(2) { flex: 1; }.avatar { width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); font-size: 20px; }.profile-row input { display: block; width: 100%; border: 0; border-bottom: 1px solid #bdbbc9; background: transparent; padding: 0 0 4px; color: var(--ink); font-weight: 800; font-size: 14px; }.profile-row small { color: var(--muted); font-size: 10px; display: block; margin-top: 5px; }.round-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--indigo); background: var(--paper); font-size: 18px; }.primary-button { min-height: 46px; border: 0; background: var(--indigo); color: white; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 21px; padding: 0 19px; font-weight: 800; font-size: 13px; box-shadow: 0 7px 14px rgba(41,39,100,.16); transition: transform .15s ease, background .15s ease; }.primary-button:hover { background: var(--indigo-2); transform: translateY(-1px); }.primary-button:disabled { cursor: wait; opacity: .6; transform: none; }.start-button { width: 100%; margin-top: 25px; justify-content: space-between; }.outline-button { min-height: 41px; width: 100%; border: 1px solid #c9c6d4; border-radius: 8px; color: var(--indigo); background: transparent; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }.outline-button:hover { border-color: var(--indigo); background: #f6f5fc; }.form-message { padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; }.form-message.error { background: #fff0ed; color: #a1433c; margin-top: 12px; }.form-message.success { background: #eaf7ef; color: #23754e; margin-top: 12px; }
.side-column { display: flex; flex-direction: column; gap: 15px; }.history-panel { padding: 24px 23px 21px; }.history-panel h2 { font-size: 18px; }.trend-badge { background: #eef6d0; color: #5f7624; border-radius: 99px; padding: 5px 8px; font-size: 9px; font-weight: 800; }.history-content { min-height: 129px; padding: 21px 0 17px; }.history-empty { color: var(--muted); font-size: 12px; line-height: 1.6; }.history-bars { height: 88px; display: flex; align-items: end; gap: 8px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 21px, #efedf1 21px 22px); }.history-bar { flex: 1; min-height: 7px; border-radius: 5px 5px 0 0; background: var(--indigo-2); }.history-bar:nth-last-child(2) { background: var(--coral); }.history-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; padding-top: 7px; }.history-score { display: flex; align-items: baseline; gap: 9px; }.history-score strong { font-size: 31px; letter-spacing: -.07em; }.history-score span { color: var(--muted); font-size: 11px; }.tip-panel { display: flex; gap: 13px; padding: 20px 19px; background: var(--indigo); color: white; border-radius: 12px 12px 12px 3px; }.tip-panel .eyebrow { color: var(--lime); margin-bottom: 8px; font-size: 9px; }.tip-panel p:last-child { color: #e4e3f1; font-size: 12px; line-height: 1.55; margin: 0; }.tip-panel strong { color: white; }.tip-icon { color: var(--lime); font-size: 25px; }
.footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 19px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 23px; color: var(--muted); font-size: 10px; }.footer span:first-child { color: var(--indigo); font-weight: 900; }.offline-label { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }.offline-label i { width: 5px; height: 5px; box-shadow: none; }
.practice-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.practice-header h1 { font-size: clamp(34px,4vw,52px); margin-bottom: 0; }.back-button { align-self: start; background: none; border: 0; padding: 10px 0; color: var(--indigo-2); font-weight: 800; font-size: 13px; }.practice-counter { color: var(--muted); font-weight: 800; font-size: 13px; padding-bottom: 12px; }.progress-track { height: 5px; margin: 27px 0 31px; background: #ebe9e3; border-radius: 99px; overflow: hidden; }.progress-track i { display: block; width: 10%; height: 100%; background: var(--coral); border-radius: inherit; transition: width .3s ease; }.practice-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, .7fr); gap: 25px; }.question-card { padding: 34px; min-height: 465px; }.question-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); letter-spacing: .13em; font-size: 10px; font-weight: 800; }.hint-button { border: 0; color: var(--indigo-2); background: #f3f2fb; border-radius: 99px; padding: 8px 12px; font-size: 11px; font-weight: 800; }.question-prompt { font-size: clamp(26px,4vw,42px); letter-spacing: -.06em; line-height: 1.17; margin: 53px auto 42px; max-width: 700px; text-align: center; }.answer-area { max-width: 570px; margin: 0 auto; }.answer-input { width: 100%; border: 1px solid var(--line); border-radius: 9px; min-height: 55px; padding: 0 17px; color: var(--ink); font-weight: 700; background: #fffefa; }.choice-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.answer-choice { min-height: 58px; border: 1px solid var(--line); background: #fffefa; border-radius: 9px; text-align: left; padding: 0 16px; font-weight: 700; color: var(--ink); }.answer-choice:hover, .answer-choice.selected { border-color: var(--indigo-2); background: #f1f0ff; }.answer-actions { max-width: 570px; margin: 20px auto 0; display: flex; align-items: center; gap: 12px; }.answer-actions .primary-button { margin-left: auto; min-width: 140px; }.answer-message { flex: 1; font-size: 12px; color: var(--muted); }.hint-panel { max-width: 570px; margin: 20px auto 0; padding: 13px 15px; background: #fbf7dc; border-left: 3px solid var(--lime-dark); color: var(--soft-ink); border-radius: 5px; font-size: 12px; line-height: 1.55; }.feedback-panel { max-width: 570px; margin: 24px auto 0; border-radius: 10px; padding: 15px; display: flex; align-items: center; gap: 12px; }.feedback-panel.correct { background: #eaf7ef; color: #236d4b; }.feedback-panel.incorrect { background: #fff0ed; color: #a1433c; }.feedback-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: currentColor; color: white; font-weight: 900; }.feedback-panel strong { display: block; font-size: 13px; }.feedback-panel p { font-size: 11px; margin: 4px 0 0; color: inherit; }.next-button { display: flex; margin: 22px auto 0; }.session-aside { display: flex; flex-direction: column; gap: 16px; }.session-note { min-height: 228px; padding: 24px; background: #ffd9ce; border-radius: 14px 14px 14px 3px; transform: rotate(1.2deg); }.session-note h3 { max-width: 180px; font-size: 23px; letter-spacing: -.06em; }.session-note p { max-width: 200px; font-size: 12px; line-height: 1.55; color: #6e4944; }.session-streak { background: var(--indigo); color: white; padding: 20px; border-radius: 12px; }.session-streak span { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.session-streak strong { display: block; font-size: 22px; margin: 8px 0; }.session-streak small { color: #c9c8df; display: block; font-size: 10px; line-height: 1.5; }
.result-wrap { max-width: 800px; margin: 0 auto; text-align: center; }.result-confetti { color: var(--coral); font-size: 24px; letter-spacing: .3em; margin-bottom: 26px; }.result-wrap h1 { font-size: clamp(37px,6vw,62px); }.result-subtitle { color: var(--muted); }.result-score-card { margin: 33px 0 22px; padding: 29px; display: flex; align-items: center; text-align: left; gap: 39px; }.score-ring { width: 145px; height: 145px; flex: 0 0 auto; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(circle, var(--paper) 61%, transparent 62%), conic-gradient(var(--coral) 0deg, var(--coral) 0deg, #ece9e3 0deg); transform: rotate(-15deg); }.score-ring strong, .score-ring span { transform: rotate(15deg); }.score-ring strong { font-size: 34px; letter-spacing: -.07em; }.score-ring span { color: var(--muted); font-size: 10px; }.score-details { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.score-details div { padding-left: 15px; border-left: 1px solid var(--line); }.score-details span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 9px; }.score-details strong { font-size: 17px; letter-spacing: -.04em; }.review-card { padding: 23px; text-align: left; }.review-card .section-heading { align-items: center; }.review-card .section-heading h2 { font-size: 18px; }.review-card .section-heading > span { color: var(--muted); font-size: 11px; }.review-list { margin-top: 15px; }.review-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); align-items: start; }.review-result { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: 11px; font-weight: 900; }.review-result.good { background: #e0f3e9; color: var(--green); }.review-result.bad { background: #ffe5df; color: var(--red); }.review-row p { margin: 0; font-size: 12px; font-weight: 700; }.review-row small { color: var(--muted); display: block; margin-top: 4px; font-size: 11px; }.publish-panel { margin-top: 22px; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; background: #f3f2ff; border-color: #d8d5ec; }.publish-panel h2 { font-size: 16px; }.publish-panel p { color: var(--muted); font-size: 11px; margin: 5px 0 0; }.publish-panel .primary-button { white-space: nowrap; }.result-actions { display: flex; gap: 10px; margin-top: 20px; }.result-actions > * { flex: 1; }.result-message { text-align: left; }.leaderboard-header { display: flex; justify-content: space-between; align-items: center; }.leaderboard-header p:last-child { color: var(--muted); }.leaderboard-header h1 { margin-bottom: 12px; }.leaderboard-mark { width: 81px; height: 81px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--indigo); font-size: 40px; transform: rotate(10deg); }.leaderboard-toolbar { margin-top: 30px; padding: 17px; display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; gap: 12px; align-items: end; }.leaderboard-toolbar label { margin: 0; }.leaderboard-toolbar select { margin-top: 8px; }.period-toggle { display: flex; padding: 4px; border-radius: 8px; background: #f0eee9; gap: 3px; }.period-toggle button { border: 0; border-radius: 6px; background: transparent; padding: 9px 12px; color: var(--muted); font-size: 11px; font-weight: 800; }.period-toggle button.is-active { background: var(--paper); color: var(--indigo); box-shadow: 0 2px 6px rgba(20,20,50,.1); }.leaderboard-card { margin-top: 16px; padding: 25px; }.leaderboard-card-head { display: flex; align-items: center; justify-content: space-between; }.leaderboard-card-head h2 { font-size: 20px; }.leaderboard-card-head > span { color: var(--muted); font-size: 10px; }.leaderboard-content { margin-top: 19px; }.leader-row { display: grid; grid-template-columns: 38px 1fr 100px 80px; gap: 15px; align-items: center; padding: 14px 10px; border-top: 1px solid var(--line); }.leader-row:first-child { border-top: 0; background: #f8f6e9; border-radius: 10px; }.rank-number { color: var(--muted); font-weight: 900; font-size: 13px; }.leader-avatar { width: 28px; height: 28px; display: inline-grid; place-items: center; margin-right: 8px; border-radius: 50%; background: #ffd9ce; vertical-align: middle; font-size: 15px; }.leader-name { font-size: 13px; font-weight: 800; }.leader-score { text-align: right; font-size: 12px; color: var(--muted); }.leader-percent { text-align: right; color: var(--indigo-2); font-weight: 900; font-size: 14px; }.empty-board { padding: 34px 15px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }.leaderboard-note { color: var(--muted); font-size: 10px; margin: 19px 0 0; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 30px; background: var(--cream); color: var(--ink); font-weight: 700; }
@media (max-width: 900px) { .topbar { gap: 25px; }.status-copy { display: none; }.hero-grid { grid-template-columns: 1fr; gap: 24px; }.hero-copy { max-width: 700px; }.hero-art { min-height: 250px; }.content-grid, .practice-layout { grid-template-columns: 1fr; }.side-column { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }.session-aside { display: grid; grid-template-columns: 1fr 1fr; }.session-note { min-height: 0; }.leaderboard-toolbar { grid-template-columns: 1fr 1fr; }.period-toggle { align-self: end; }.leaderboard-toolbar label:nth-child(3) { grid-column: span 2; } }
@media (max-width: 620px) { .topbar, main, .footer { width: min(100% - 30px, 1240px); }.topbar { min-height: 65px; gap: 15px; }.brand { font-size: 18px; }.main-nav { gap: 15px; }.nav-link { padding: 21px 0 18px; font-size: 12px; }.topbar-actions { margin-left: auto; }.install-button { display: none!important; }.view { padding: 35px 0 47px; }.hero-grid { min-height: 0; }.hero-art { min-height: 206px; border-radius: 19px; }.sun-disc { width: 139px; height: 139px; right: 24px; top: 24px; }.floating-card-main { left: 5%; bottom: 24px; width: 183px; padding: 13px 15px; }.floating-card-main strong { font-size: 16px; }.floating-card-note { right: 5%; top: 25px; width: 95px; padding: 12px; }.floating-card-note small { font-size: 9px; }.hero-stats { gap: 20px; }.hero-stats strong { font-size: 17px; }.hero-stats span { font-size: 10px; }.hero-lead { font-size: 14px; }.setup-panel { padding: 23px 18px; }.subject-options, .form-row { grid-template-columns: 1fr; }.choice-card { min-height: 59px; }.field-group { margin-top: 22px; }.profile-row { align-items: start; }.profile-row .avatar { margin-top: 4px; }.footer { flex-wrap: wrap; gap: 9px 18px; }.offline-label { margin-left: 0; width: 100%; }.side-column, .session-aside { grid-template-columns: 1fr; }.practice-header { align-items: center; }.practice-header h1 { font-size: 34px; }.practice-header .eyebrow { font-size: 8px; }.practice-counter { padding-bottom: 5px; }.question-card { padding: 22px 17px; min-height: 480px; }.question-prompt { margin: 49px auto 37px; font-size: 31px; }.choice-answers { grid-template-columns: 1fr; }.answer-actions { align-items: stretch; flex-direction: column; }.answer-actions .primary-button { width: 100%; margin: 0; }.answer-message { min-height: 18px; }.leaderboard-header { align-items: start; }.leaderboard-mark { width: 55px; height: 55px; font-size: 26px; }.leaderboard-header h1 { font-size: 46px; }.leaderboard-toolbar { grid-template-columns: 1fr; }.leaderboard-toolbar label:nth-child(3) { grid-column: auto; }.period-toggle { width: 100%; }.period-toggle button { flex: 1; }.leaderboard-card { padding: 18px 12px; }.leader-row { grid-template-columns: 24px 1fr 66px; gap: 7px; padding: 13px 4px; }.leader-percent { grid-column: 3; grid-row: 1; }.leader-score { grid-column: 2; grid-row: 2; text-align: left; font-size: 10px; margin-left: 36px; }.result-score-card { padding: 20px 16px; gap: 20px; }.score-ring { width: 112px; height: 112px; }.score-ring strong { font-size: 27px; }.score-details { grid-template-columns: 1fr; gap: 10px; }.score-details div { border-left: 0; border-top: 1px solid var(--line); padding: 9px 0 0; }.publish-panel, .result-actions { flex-direction: column; align-items: stretch; }.publish-panel .primary-button { width: 100%; }.result-actions > * { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; } }

/* Readable feedback and compact first viewport on phones. */
.feedback-panel p { font-size: 14px; }
@media (max-width: 620px) {
  .hero-art { display: none; }
  .hero-stats { margin-top: 18px; }
  .hero-grid { gap: 12px; }
}