:root {
  --bg: #f4f2ec;
  --paper: #fffcf6;
  --ink: #22312f;
  --muted: #64716d;
  --line: #dcdcd2;
  --accent: #2c5f5b;
  --soft: #e5ece6;
  --warm: #a55232;
  --warm-soft: #f4e1d2;
  --new: #e0e2d8;
  --seen: #a9bfb5;
  --code: #f7f5ef;
  --on: #fffdf6;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121b1a;
  --paper: #192422;
  --ink: #e7ebe2;
  --muted: #a7b4ae;
  --line: #31403d;
  --accent: #a9d2c6;
  --soft: #24332f;
  --warm: #efb690;
  --warm-soft: #46362a;
  --new: #2b3a37;
  --seen: #4f6d64;
  --code: #111a19;
  --on: #13201d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.6 "Segoe UI", "Yu Gothic UI", "Hiragino Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, .big-score, .score b, .last strong {
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 400; letter-spacing: -.04em;
}
h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.14; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
h3 { font-size: 15px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--paper); padding: 8px 12px; z-index: 20; border-radius: 8px; }
.skip:focus { top: 12px; }

.top {
  position: sticky; top: 0; z-index: 10; height: 78px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 max(28px, calc((100vw - 1040px) / 2));
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { justify-self: start; display: flex; align-items: center; text-decoration: none; font-size: 28px; letter-spacing: -1.8px; font-weight: 600; }
.brand b { color: var(--warm); font-weight: 600; }
.brand small { margin: 6px 0 0 10px; font-size: 11px; letter-spacing: .06em; font-weight: 400; color: var(--muted); }
.mark { display: grid; grid-template-columns: 8px 8px; gap: 3px; transform: rotate(-8deg); margin-right: 11px; }
.mark i { width: 8px; height: 8px; background: var(--accent); border-radius: 1px; display: block; }
.mark i:last-child { background: var(--warm); transform: translate(1px, 1px); }
nav { display: flex; gap: 6px; }
nav a { min-height: 40px; padding: 8px 18px; color: var(--muted); border-radius: 24px; text-decoration: none; display: inline-flex; align-items: center; }
nav a[aria-current="page"] { background: var(--soft); color: var(--ink); font-weight: 600; }
.head-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.home-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.home-link:hover { color: var(--ink); }
.theme { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; font-size: 17px; }

main { max-width: 1040px; margin: 0 auto; padding: 40px 28px 20px; }
.eyebrow { color: var(--muted); font-weight: 650; letter-spacing: .13em; font-size: 10px; text-transform: uppercase; }
.heading { margin-bottom: 28px; }
.heading .eyebrow { margin-bottom: 12px; }
.heading p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.text-link { font-size: 12px; color: var(--accent); text-decoration: none; padding: 6px 0; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero { display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; align-items: start; }
.practice { background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; display: flex; flex-direction: column; }
.practice-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tag { font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--paper); border-radius: 20px; padding: 4px 10px; }
.practice h2 { font-size: 38px; line-height: 1.18; }
.practice p { margin-top: 12px; color: var(--muted); max-width: 520px; }
.practice-foot { margin-top: 28px; display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.practice-foot small { font-size: 11px; color: var(--muted); text-align: right; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 12px 20px; border-radius: 10px;
  background: var(--accent); color: var(--on); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { gap: 28px; }
.btn.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover:not(:disabled) { background: var(--paper); border-color: var(--accent); }
.btn.wide { min-width: 220px; }

.side { padding: 8px 0 0 4px; }
.side-head, .section-line, .metric-line, .card-meta, .browse-top, .browse-nav, .history-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.side-head span, .section-line > span { font-size: 11px; color: var(--muted); }
.week { display: flex; gap: 8px; margin: 20px 0 10px; }
.day { flex: 1; display: grid; justify-items: center; gap: 7px; font-size: 10px; color: var(--muted); }
.day i { font-style: normal; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
.day.on i { background: var(--accent); border-color: var(--accent); color: var(--on); }
.day.today i { outline: 1px solid var(--accent); outline-offset: 3px; }
.side-note { color: var(--muted); font-size: 12px; }
.last { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.last .eyebrow { margin-bottom: 4px; }
.last strong { font-size: 31px; margin-right: 8px; }
.last small { color: var(--muted); }
.last p:not(.eyebrow) { font-size: 12px; color: var(--muted); margin: 3px 0; }

.section-line { margin-bottom: 12px; }
.study-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mode-card { text-align: left; display: flex; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 18px 20px; transition: border-color .15s ease; }
.mode-card:hover:not(:disabled) { border-color: var(--accent); }
.mode-card b { font-size: 16px; font-weight: 600; }
.mode-card p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mode-symbol { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; background: var(--soft); font-size: 18px; flex: 0 0 auto; }
.mode-copy { flex: 1; }
.study-card { min-height: 156px; flex-direction: column; align-items: flex-start; gap: 8px; }
.study-card.featured { background: var(--soft); }
.study-card .go { margin-top: auto; font-size: 13px; font-weight: 600; }
.collection-block { margin-top: 28px; }
.study-lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 8px; align-items: start; }
.panel { padding: 24px; border: 1px solid var(--line); background: var(--paper); border-radius: 16px; min-width: 0; }
.map { display: grid; gap: 4px; width: 100%; margin: 14px 0 10px; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); }
.tile { width: auto; height: auto; aspect-ratio: 1; border-radius: 2px; background: var(--new); transition: transform .12s ease; }
.tile:hover { transform: scale(1.45); }
.tile.seen { background: var(--seen); }
.tile.solid { background: var(--accent); }
.tile.review { background: var(--warm); opacity: .8; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--new); }
.legend i.seen { background: var(--seen); }
.legend i.solid { background: var(--accent); }
.legend i.review { background: var(--warm); }

.session-main { max-width: 860px; padding-top: 22px; }
.session-bar { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; }
.close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; color: var(--muted); }
.close:hover { color: var(--ink); border-color: var(--ink); }
.steps { display: flex; gap: 18px; font-size: 12px; color: var(--muted); }
.steps .active { color: var(--ink); font-weight: 600; }
.steps .done { color: var(--accent); }
.count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 3px; background: var(--new); border-radius: 3px; margin: 14px 0 20px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.flash {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 30px 24px; box-shadow: 0 14px 40px rgba(34, 49, 47, .06);
  animation: rise .28s ease;
}
.flash.is-back { animation: turn .32s ease; }
.flash.is-ok { border-color: var(--accent); }
.flash.is-bad { border-color: var(--warm); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes turn { from { opacity: 0; transform: perspective(900px) rotateY(-8deg); } to { opacity: 1; transform: none; } }
.card-meta { font-size: 12px; color: var(--muted); }
.card-meta > span:last-of-type { flex: 1; }
.num { font-variant-numeric: tabular-nums; color: var(--warm); font-weight: 650; margin-right: 8px; }
.official { color: var(--muted); text-decoration: none; font-size: 12px; }
.official:hover { color: var(--accent); }
.card-title { font-size: clamp(34px, 5vw, 46px); line-height: 1.12; margin: 12px 0 14px; }
.card-title.small { font-size: 26px; margin-bottom: 16px; }
.brief { font-size: 16px; line-height: 1.75; max-width: 36em; }
.statement { margin-top: 2px; }
.statement .task, .statement p {
  margin: 0; font-size: 15.5px; line-height: 1.75; max-width: 42em; white-space: pre-wrap;
}
.statement h3 {
  margin: 20px 0 8px; font-size: 11px; letter-spacing: .12em; font-weight: 650; color: var(--muted);
}
.statement ul { margin: 0; padding-left: 1.2em; max-width: 42em; }
.statement li { font-size: 14px; line-height: 1.6; margin: 3px 0; }
pre.format { white-space: pre-wrap; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.io span { display: block; font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
pre {
  margin: 0; padding: 12px 14px; overflow: auto;
  background: var(--code); border: 1px solid var(--line); border-radius: 12px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre;
}
pre.code { margin-top: 4px; padding: 16px 0; font-size: 13px; line-height: 1.75; }
pre.code .ln { display: block; padding: 0 18px; min-height: 1.75em; }
pre.code .ln.pending { box-shadow: inset 3px 0 0 var(--warm); background: color-mix(in srgb, var(--warm) 10%, transparent); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.choice {
  text-align: left; max-width: 100%;
  border: 1px solid var(--line); background: var(--code); border-radius: 8px;
  padding: 7px 10px;
}
.choice code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; }
.choice.bad { border-color: var(--warm); background: var(--warm-soft); }
.recall .brief { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.key-line { background: color-mix(in srgb, var(--warm) 13%, transparent); box-shadow: inset 3px 0 0 var(--warm); }
.key-line.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.key-line.bad { background: color-mix(in srgb, var(--warm) 18%, transparent); }
.blank {
  font: inherit; min-height: 1.9em; padding: 0 8px; margin: 1px 0;
  border: 1px dashed var(--warm); border-radius: 6px; background: var(--paper); color: var(--ink);
  max-width: calc(100% - 4ch);
}
.blank::placeholder { color: var(--muted); opacity: .7; }
.blank:focus { outline: none; border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 20%, transparent); }
.key-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.notes { margin-top: 4px; color: var(--ink); }
.notes div { display: grid; grid-template-columns: 4.5em 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.notes dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; padding-top: 2px; }
.notes dd { font-size: 14px; line-height: 1.7; }
.notes dt small { display: block; font-size: 10px; line-height: 1.6; letter-spacing: 0; margin-top: 3px; }
.notes dd { overflow-wrap: anywhere; }
.notes dd p { margin: 0; font: inherit; line-height: 1.9; }
.notes dd p + p { margin-top: 8px; }
.notes ol { margin: 0; padding-left: 1.4em; line-height: 1.9; }
.notes li + li { margin-top: 6px; }
@media (max-width: 620px) {
  .notes dt { display: flex; align-items: baseline; gap: 10px; }
  .notes dt small { display: inline; margin-top: 0; }
}
details { margin-top: 18px; color: var(--muted); font-size: 12px; }
summary { cursor: pointer; padding: 8px 0; }
details p { color: var(--ink); font-size: 13px; line-height: 1.7; margin: 12px 0 0; max-width: 40em; }
.verdict { margin-top: 16px; padding: 14px 16px; border-radius: 12px; display: grid; gap: 8px; }
.verdict.ok { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.verdict.bad { background: var(--warm-soft); }
.verdict b { font-family: Georgia, "Yu Mincho", serif; font-weight: 400; font-size: 22px; }
.verdict.ok b { color: var(--accent); }
.verdict.bad b { color: var(--warm); }
.verdict p { font-size: 13px; }
.verdict span { display: inline-block; width: 4em; font-size: 11px; color: var(--muted); }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.yours code { text-decoration: line-through; text-decoration-color: var(--warm); color: var(--muted); }
.dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--new); }
.dots i.now { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.dots i.hit { background: var(--accent); }
.dots i.near { background: var(--seen); }
.dots i.miss { background: var(--warm); }
.answer-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.answer-actions.left { justify-content: flex-start; }
.answer-actions .btn { min-width: 150px; }
.keys { text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }

.result { max-width: 640px; margin: 10px auto 0; }
.result h1 { margin: 12px 0 22px; }
.score { display: flex; align-items: baseline; gap: 14px; }
.score b { font-size: 64px; line-height: 1; }
.score small { font-size: 28px; color: var(--muted); }
.score span { color: var(--muted); }
.result-note { color: var(--muted); margin: 14px 0 22px; }
.result-list { border-top: 1px solid var(--line); margin-bottom: 26px; }
.result-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.result-row i { width: 10px; height: 10px; border-radius: 50%; background: var(--new); }
.result-row i.hit { background: var(--accent); }
.result-row i.miss { background: var(--warm); }
.result-row small { display: block; color: var(--muted); font-size: 11px; }
.result-row code { color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filters { display: flex; gap: 14px; flex-wrap: wrap; }
.filters label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.filters input, .filters select { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 0 12px; font-size: 14px; color: var(--ink); }
.filters input { width: min(360px, 80vw); }
.count-line { margin: 18px 0 6px; font-size: 12px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 42px 1fr 70px 80px; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.row:hover { background: color-mix(in srgb, var(--soft) 60%, transparent); }
.row b { font-weight: 600; }
.row small { display: block; font-size: 11px; color: var(--muted); }
.row-stat { text-align: right; font-variant-numeric: tabular-nums; }
.pill { justify-self: end; font-size: 11px; border-radius: 99px; padding: 3px 10px; background: var(--new); color: var(--muted); }
.pill.seen { background: var(--soft); color: var(--ink); }
.pill.solid { background: var(--accent); color: var(--on); }
.pill.review { background: var(--warm-soft); color: var(--warm); }
.browse-top { max-width: 760px; margin: 0 auto 14px; font-size: 12px; color: var(--muted); }
main > .flash, main > .answer-actions, main > .browse-nav { max-width: 760px; margin-left: auto; margin-right: auto; }
.browse-nav { margin-top: 18px; }

.analytics-top { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; margin-bottom: 24px; }
.evidence { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; margin-top: 18px; align-items: center; }
.big-score { font-size: 56px; line-height: 1.05; }
.big-score small { font-size: 24px; color: var(--muted); letter-spacing: 0; }
.caption, .metric-note { font-size: 11px; color: var(--muted); }
.caption { margin-top: 8px; }
.comparison { border-left: 1px solid var(--line); padding-left: 22px; }
.metric-line { font-size: 12px; margin-bottom: 7px; }
.metric-line span { color: var(--muted); }
.track { position: relative; height: 6px; background: var(--new); border-radius: 3px; overflow: hidden; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.track i.seen { background: var(--seen); }
.track.warm i { background: var(--warm); }
.metric-note { margin: 5px 0 14px; }
.evidence-note { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.next-panel { background: var(--soft); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.next-panel h2 { font-size: 28px; }
.next-panel p { color: var(--muted); font-size: 12px; }
.weak { width: 100%; display: grid; gap: 8px; margin-bottom: 6px; }
.weak a { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--warm); text-decoration: none; }
.weak code { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-row { margin-top: 14px; }
.lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 24px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; max-width: 320px; }
.calendar i { aspect-ratio: 1; border-radius: 3px; background: var(--new); }
.calendar i.l1 { background: var(--seen); }
.calendar i.l2 { background: color-mix(in srgb, var(--accent) 70%, var(--seen)); }
.calendar i.l3 { background: var(--accent); }
.calendar i.future { opacity: .35; }
.calendar i.today { outline: 1px solid var(--warm); outline-offset: 2px; }
.history-row { padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.history-row span { color: var(--muted); }
.more { margin-top: 24px; }
.more p { color: var(--muted); margin: 6px 0 12px; }
.empty { color: var(--muted); padding: 10px 0; }
.foot { max-width: 1040px; margin: 30px auto 0; padding: 20px 28px 34px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.banner { max-width: 1040px; margin: 12px auto 0; padding: 10px 28px; color: var(--warm); }

@media (max-width: 820px) {
  .hero, .analytics-top, .lower, .evidence, .study-lower { grid-template-columns: 1fr; }
  .comparison { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
}
@media (max-width: 620px) {
  .top { height: auto; grid-template-columns: 1fr auto; grid-template-areas: "brand tools" "nav nav"; padding: 14px 18px 10px; }
  .brand { grid-area: brand; font-size: 25px; }
  .head-tools { grid-area: tools; }
  nav { grid-area: nav; margin-top: 10px; }
  nav a { flex: 1; justify-content: center; padding: 6px 10px; min-height: 36px; font-size: 13px; }
  main { padding: 26px 18px 16px; }
  .session-main { padding-top: 16px; }
  .practice { padding: 22px; min-height: 0; }
  .practice h2 { font-size: 32px; }
  .practice-foot { flex-direction: column; align-items: stretch; }
  .practice-foot small { text-align: left; }
  .mode-grid, .io { grid-template-columns: 1fr; }
  .flash { padding: 20px 18px 18px; border-radius: 16px; }
  .card-title { font-size: 34px; }
  pre.code .ln { padding: 0 12px; }
  pre.code { font-size: 12px; }
  .notes div { grid-template-columns: 1fr; gap: 2px; }
  .answer-actions .btn { flex: 1; min-width: 0; }
  .row { grid-template-columns: 30px 1fr auto; }
  .row-stat { display: none; }
  .result-row code { display: none; }
  .result-row { grid-template-columns: 12px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flash, .flash.is-back { animation: none; }
  .bar i, .tile, .btn { transition: none; }
}

/* Recall support and independently earned achievements. */
:root{--grass-assisted:#a8c5a2;--grass-independent:#4c8866;--grass-retained:#24533b}
:root[data-theme="dark"]{--grass-assisted:#416344;--grass-independent:#6aaa75;--grass-retained:#a5daa2}
.tile.assisted,.legend i.assisted,.result-row i.assisted{background:var(--grass-assisted)}
.tile.independent,.legend i.independent,.result-row i.independent{background:var(--grass-independent)}
.tile.retained,.legend i.retained,.result-row i.retained{background:var(--grass-retained)}
.result-row i.revealed,.result-row i.review{background:var(--warm)}
.tile.is-due{outline:1px solid var(--warm);outline-offset:1px}
.grass-note{font-size:11px;line-height:1.7;color:var(--muted);margin-top:12px}
.pill.assisted{background:var(--grass-assisted);color:var(--ink)}
.pill.independent,.pill.retained{background:var(--grass-independent);color:var(--on)}
.pill.retained{background:var(--grass-retained)}
.recall-progress{font-size:12px;color:var(--muted);margin:12px 0}
.recall-support{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;width:100%}
.recall-support .btn{font-size:12px;min-height:42px;padding:10px 13px}
pre.code .ln.help-filled{color:var(--muted)}
pre.code .ln.core-filled{background:color-mix(in srgb,var(--accent) 10%,transparent)}
pre.code .ln.core-slot{color:var(--warm);background:color-mix(in srgb,var(--warm) 6%,transparent)}
.attempt-detail,.attempt-record p{font-size:11px;line-height:1.8;color:var(--muted)}
.attempt-record{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.attempt-record h3{font-size:12px;margin-bottom:6px}
.result-breakdown{font-size:13px;color:var(--muted);margin:12px 0}
.achievement-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 24px;padding:18px 0;border-block:1px solid var(--line)}
.achievement-summary b{display:block;font-size:26px;font-weight:550}.achievement-summary span{font-size:11px;color:var(--muted)}
@media(max-width:620px){.recall-support .btn{flex:1;white-space:normal;min-width:0;padding:9px 7px;font-size:11px}.result-row small{overflow-wrap:anywhere}.achievement-summary{gap:12px}.achievement-summary span{font-size:10px}}

.flash.recall{animation:none}

.assist-unwritten{visibility:hidden}.assist-streaming{overflow-anchor:none}.assist-writing .assist-written::after{content:'';display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-.1em;margin-left:1px;animation:assist-caret .8s step-end infinite}.assist-explainer{font-size:11px;line-height:1.7;color:var(--muted);margin-right:auto}.recall-support{align-items:center}.flash.recall pre.code{scroll-margin-top:110px}.recall-support .btn{min-width:112px}.achievement-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
@keyframes assist-caret{50%{opacity:0}}
@media(max-width:620px){.flash.recall pre.code{scroll-margin-top:145px}.assist-explainer{font-size:10px;max-width:170px}.recall-support .btn{flex:0 0 auto;min-width:112px}}
@media(prefers-reduced-motion:reduce){.assist-writing .assist-written::after{animation:none}}

/* Placement feedback remains visible even when motion is reduced. */
.recall-feedback{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;margin:12px 0 4px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--code);font-size:12px;color:var(--muted)}
.recall-feedback>span{display:flex;gap:8px;align-items:center}.recall-feedback i{display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;border-radius:50%;font-size:15px;font-style:normal}.recall-feedback small{white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}
.recall-feedback.correct{border-color:var(--accent);background:var(--soft);color:var(--ink)}.recall-feedback.correct i{background:var(--accent);color:var(--on)}.recall-feedback.wrong{border-color:var(--warm);background:var(--warm-soft);color:var(--ink)}.recall-feedback.wrong i{background:var(--warm);color:var(--bg)}
.choice.bad{border:2px solid var(--warm);background:var(--warm-soft);animation:kio-miss .28s ease-in-out}.ln.is-wrong{box-shadow:inset 3px 0 var(--warm);background:var(--warm-soft)}
pre.code .ln.is-correct{box-shadow:inset 3px 0 var(--accent);background:var(--soft);color:var(--ink);animation:kio-correct .65s ease-out}
@keyframes kio-miss{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes kio-correct{0%{background:color-mix(in srgb,var(--accent) 45%,var(--paper))}100%{background:var(--soft)}}
.study-card{min-width:0}.study-card .mode-copy{min-width:0}
@media(max-width:620px){.study-modes{gap:8px}.mode-card.study-card{padding:13px 10px;gap:8px;min-height:160px}.study-card .mode-symbol{width:30px;height:30px;font-size:17px}.study-card .mode-copy b{font-size:15px;white-space:nowrap}.study-card .mode-copy p{font-size:10px;line-height:1.6;min-height:32px}.study-card .go{font-size:11px}.recall-feedback{font-size:11px;padding:9px 10px;gap:8px}.recall-feedback small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.choice.bad,pre.code .ln.is-correct{animation:none}}

/* Read first, then draw the solution at the selected speed. */
.coding-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 10px; }
.coding-speed { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12px; }
.coding-speed select { min-height: 44px; padding: 6px 10px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.coding-speed select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.coding-solution { scroll-margin-top: 94px; }
.flash.has-code { animation: none; }
.coding-toolbar .btn { min-width: 112px; }
.coding-solution pre.code { scroll-margin-top: 94px; }
.recall-details { margin: 8px 0 12px; }
.recall-details summary { font-size: 11px; }
.recall-details .statement h3:first-child { margin-top: 8px; }
.recall-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.recall-tools .btn { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.recall-tools .recall-progress { margin: 0; }
.choice code { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  :root { --recall-dock-height: clamp(170px, 30dvh, 300px); }
  #app:not(.is-session) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .top { height: 50px; grid-template-areas: "brand tools"; padding: 0 14px; background: var(--bg); backdrop-filter: none; }
  .brand { font-size: 23px; }
  .brand small { margin-left: 8px; font-size: 10px; }
  .mark { transform: scale(.85) rotate(-8deg); margin-right: 8px; }
  .head-tools { gap: 10px; }
  .theme { width: 32px; height: 32px; }
  .top nav { position: fixed; inset: auto 0 0; height: calc(56px + env(safe-area-inset-bottom)); margin: 0; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); gap: 8px; background: var(--bg); border-top: 1px solid var(--line); }
  .top nav a { min-height: 40px; font-size: 12px; }
  .is-session .top { height: 44px; }
  .is-session .top nav { display: none; }
  .is-session .brand { font-size: 20px; }
  .is-session .brand small { display: none; }
  .session-main { padding: 10px 12px 20px; }
  .session-bar { grid-template-columns: 30px 1fr auto; gap: 8px; }
  .close { width: 30px; height: 30px; }
  .steps { gap: 12px; font-size: 11px; }
  .bar { margin: 8px 0 12px; height: 2px; }
  .flash { padding: 18px 16px; border-radius: 14px; }
  .card-meta { gap: 8px; font-size: 10px; }
  .official { font-size: 10px; }
  .card-title.small { margin: 8px 0 12px; font-size: 25px; }
  .statement .task, .statement p { font-size: 14px; line-height: 1.7; }
  .statement h3 { margin: 14px 0 6px; }
  .statement li { font-size: 12px; }
  .recognize .io, .library-card .io { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .io > div { min-width: 0; }
  .coding-solution pre.code { scroll-margin-top: 54px; }
  .flash.recall pre.code { scroll-margin-top: 54px; }
  .is-recall .session-main { padding-bottom: calc(var(--recall-dock-height) + 24px); }
  .recall-dock { position: fixed; z-index: 15; inset: auto 0 0; height: var(--recall-dock-height); padding: 8px 12px max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgb(0 0 0 / .06); }
  .recall-dock .recall-feedback { flex: 0 0 auto; min-height: 32px; margin: 0; padding: 5px 8px; border-radius: 6px; }
  .recall-dock .recall-feedback i { width: 18px; height: 18px; font-size: 13px; }
  .recall-dock .choices { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start; gap: 6px; margin: 0; padding: 2px; scrollbar-width: thin; }
  .recall-dock .choice { flex-shrink: 0; padding: 7px 9px; min-height: 36px; }
  .recall-dock .choice code { font-size: 11px; line-height: 1.55; }
  .recall-tools { flex: 0 0 auto; margin: 0; padding-top: 5px; border-top: 1px solid var(--line); }
  .recall-tools .btn { min-height: 32px; padding: 5px 12px; font-size: 11px; }
  .recall-tools .recall-progress { font-size: 11px; }
  .is-recall .dots, .is-recall .keys { display: none; }
  .is-recall pre.code .ln { scroll-margin-top: 56px; scroll-margin-bottom: calc(var(--recall-dock-height) + 12px); }
}

/* Keep progression reachable while the problem and code scroll independently. */
:root { --progression-height: calc(72px + env(safe-area-inset-bottom, 0px)); }
#app.has-progression { padding-bottom: calc(var(--progression-height) + 12px); }
.progression-bar { position: fixed; z-index: 16; inset: auto 0 0; height: var(--progression-height); padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -5px 24px rgb(0 0 0 / .04); }
.progression-bar .answer-actions, .progression-bar .browse-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; height: 100%; max-width: 760px; margin: 0 auto; }
.progression-bar .btn { min-width: 0; min-height: 46px; }
.progression-bar .btn:only-child { width: 100%; max-width: 320px; justify-self: center; }
.progression-bar .browse-nav .btn { white-space: nowrap; overflow: hidden; padding: 10px 14px; }
.progression-bar .browse-nav .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.progression-bar .browse-nav .btn > span[aria-hidden] { flex-shrink: 0; }
.has-progression pre.code .ln { scroll-margin-bottom: calc(var(--progression-height) + 12px); }
@media (max-width: 620px) {
  .has-progression .top nav { display: none; }
  .progression-bar { padding-inline: 14px; }
  .progression-bar .answer-actions, .progression-bar .browse-nav { gap: 10px; }
  .progression-bar .btn { padding-inline: 10px; font-size: 12px; }
  .progression-bar .browse-nav .btn { gap: 6px; padding-inline: 10px; }
}

.study-intro { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.8; }
main#main { scroll-margin-top: 90px; }
.resume-link, .review-count { margin: 12px 0; color: var(--muted); font-size: 12px; }
.resume-link .text-link { margin-left: 12px; }
.notice { max-width: 984px; margin: 16px auto 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 13px; }
.notice .text-link { margin-right: 18px; white-space: normal; }
.session-switch { margin: 16px 0; }
.session-switch p, .data-tools p { margin: 8px 0 14px; color: var(--muted); font-size: 13px; }
.session-switch .answer-actions, .data-tools .answer-actions { flex-wrap: wrap; }
.data-tools { margin-top: 24px; }
.import-label { position: relative; cursor: pointer; }
.import-label input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.import-label:focus-within { outline: 2px solid var(--warm); outline-offset: 3px; }
.import-preview { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.import-preview .btn { margin-right: 10px; }
.practice-one { max-width: 760px; margin: 0 auto 16px; }
.load-failure { margin: 8vh auto; max-width: 640px; padding: 28px; }
.load-failure p { margin: 16px 0; }
.choices-space { display: none; }
@media (max-width: 620px) {
  :root { --recall-dock-height: clamp(240px, 42dvh, 380px); }
  #app.choices-expanded { --recall-dock-height: clamp(300px, 62dvh, 520px); }
  .recall-dock { gap: 6px; }
  .recall-dock .choice code { font-size: 12px; }
  .recall-tools { gap: 6px; }
  .recall-tools .recall-progress { font-size: 10px; white-space: nowrap; }
  .recall-tools .btn { min-width: 105px; padding-inline: 8px; }
  .choices-space { display: inline-block; font-size: 11px; }
  .notice { margin: 10px 12px 0; padding: 10px 12px; }
  .study-card .mode-copy p { font-size: 11px; }
  .study-intro { font-size: 13px; }
  main#main { scroll-margin-top: 60px; }
  .session-switch .btn, .data-tools .btn { padding-inline: 12px; }
}