/* UI experiment: native CSS glass approximation, not Apple's platform material.
   Glass belongs to navigation. Reading surfaces stay opaque.
   Shape scale: 10px controls, 18–24px content panels, pill navigation. */
:root {
  --bg: #11191c;
  --panel: #192326;
  --panel-2: #223034;
  --line: #3c4d51;
  --line-soft: #2b3c40;
  --text: #edf3f3;
  --text-dim: #b3c3c5;
  --text-faint: #9cafb2;
  --accent: #91e2d2;
  --accent-dim: #68bbaa;
  --accent-ink: #102c27;
  --good: #91e2d2;
  --warn: #efc278;
  --bad: #ff969b;
  --link: #a2e6dc;
  --code-bg: #121d20;
  --glass-edge: rgb(218 250 248 / .22);
  /* Thin, lightly frosted, and pulled a little toward the accent. The tint is the neutral
     panel color mixed 15 percent toward --accent, which is why it is not a round number.
     Frost drives saturation with it: a material this thin would read as gray without it. */
  --glass: rgb(40 66 67 / .22);
  --glass-frost: 6px;
  --glass-sat: 112%;
  --glass-bright: .88;
  --sheen: rgb(225 255 253 / .10);
  --shadow: 0 18px 50px rgb(3 14 17 / .20);
  --radius: 10px;
  --topbar-h: 88px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #edf2f1;
  --panel: #fbfdfc;
  --panel-2: #e6eeec;
  --line: #becfca;
  --line-soft: #dce6e2;
  --text: #1a3434;
  --text-dim: #47635f;
  --text-faint: #526e69;
  --accent: #186a5c;
  --accent-dim: #368674;
  --accent-ink: #ffffff;
  --good: #186a5c;
  --bad: #ae313e;
  --warn: #85570d;
  --link: #186a5c;
  --code-bg: #edf3f1;
  --glass-edge: rgb(255 255 255 / .92);
  --glass: rgb(214 231 226 / .22);
  --glass-bright: 1.05;
  --sheen: rgb(255 255 255 / .7);
  --shadow: 0 18px 50px rgb(39 75 64 / .09);
  color-scheme: light;
}
body { font-size: 15px; line-height: 1.7; isolation: isolate; }
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-user-select: none; user-select: none; }
.ambient span { position: absolute; color: var(--text-dim); opacity: .09; font: 400 clamp(35px, 5vw, 70px)/1 var(--mono); animation: drift 22s ease-in-out infinite alternate; }
.ambient span:nth-child(1) { left: 2%; top: 18%; transform: rotate(-12deg); }
.ambient span:nth-child(2) { right: 2%; top: 40%; animation-delay: -9s; }
.ambient span:nth-child(3) { left: 3%; top: 76%; animation-delay: -16s; }
.ambient span:nth-child(4) { right: 5%; top: 86%; animation-delay: -4s; }
.ambient span:nth-child(5) { left: 40%; top: 4%; animation-delay: -12s; }
.ambient span:nth-child(6) { right: 26%; top: 68%; animation-delay: -18s; }
@keyframes drift { to { transform: translate3d(16px, -35px, 0) rotate(12deg); } }
body[data-section="problem"] .ambient { display: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a, button, .card, .choice, input, select {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
button:not(:disabled):active, .btn:active { transform: translateY(1px); }
button:disabled { cursor: default; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.13; letter-spacing: -.045em; font-weight: 650; margin-bottom: 18px; }
h2 { font-size: 23px; letter-spacing: -.025em; margin-top: 38px; }
h3 { font-size: 18px; }
p { text-wrap: pretty; }
.note { font-size: 14px; line-height: 1.7; max-width: 78ch; }
.eyebrow { font: 600 11px/1.5 var(--sans); letter-spacing: .13em; margin-bottom: 14px; }
/* A floating, optically edged navigation surface. Text remains legible without blur. */
.topbar {
  height: 64px; min-height: 64px; margin: 12px 18px; padding: 0 18px; top: 12px;
  gap: 24px; border: 1px solid var(--glass-edge); border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-frost)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-frost)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow);
}
.brand { gap: 11px; }
.brand-mark { border-radius: 12px; font: 750 22px/36px var(--sans); letter-spacing: -.08em; width: 36px; height: 36px; text-align: center; padding: 0 3px 3px 0; }
.brand-name { font-size: 14px; letter-spacing: -.03em; }
.tabs { gap: 3px; }
.tabs a { padding: 8px 13px; font-size: 13px; border-radius: 999px; white-space: nowrap; }
.tabs a.on { background: var(--text); color: var(--bg); box-shadow: 0 3px 8px rgb(0 0 0 / .08); }
.seg { padding: 3px; border-radius: 999px; background: var(--panel-2); border-color: transparent; }
.seg button { border-radius: 999px; padding: 7px 12px; font-size: 12px; }
.seg button.on { color: var(--text); background: var(--panel); box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); border-color: transparent; font-size: 19px; }
/* Shared page frame */
.shell { max-width: 1540px; margin: auto; min-height: calc(100dvh - 88px); }
.sidebar { flex-basis: 240px; width: 240px; background: transparent; border: 0; padding: 30px 14px 40px 26px; height: calc(100dvh - 100px); top: 88px; }
.side-head { padding: 22px 12px 8px; font-size: 10px; }
.side-link { padding: 9px 12px; border: 0; font-size: 13px; position: relative; }
/* The marker is its own short bar rather than an inset shadow. A shadow is clipped by the
   link's corner radius, which bent both of its ends inward like a bracket. */
.side-link.on { background: var(--panel); box-shadow: none; }
.side-link.on::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 52%; border-radius: 2px; background: var(--accent);
}
.main { padding: 34px 36px 80px; }
.wrap, .wrap-wide { margin-inline: auto; }
.wrap { max-width: 860px; }
.wrap-wide { max-width: 1192px; }
body[data-view="index"] .sidebar { display: none; }
body[data-section="bookmarks"] .sidebar { display: none; }
body[data-section="guide"][data-view="index"] .main { padding-top: 26px; }
.main > .wrap, .main > .wrap-wide { animation: arrive 380ms ease-out both; }
@keyframes arrive { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Course catalogue: grouped rows instead of a wall of identical cards. */
.lesson-library { scroll-margin-top: 105px; }
.library-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 0 24px; }
.library-head h1 { margin: 0 0 12px; font-size: 36px; }
.library-head .eyebrow { margin-bottom: 5px; }
.search-field { width: 350px; max-width: 100%; }
.search-field label { font-size: 12px; color: var(--text-dim); }
.guide-search { background: var(--panel); border-radius: 12px; margin-bottom: 0; padding: 12px 16px; font-size: 13px; }
.guide-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#search-count:empty { display: none; }
/* The rule that closes the list belongs here, not on the note below it: .note caps its own
   width at 78ch for readability, so a border drawn on the note stopped two thirds of the way
   across while every divider above it ran the full column. */
#guide-results { display: grid; grid-template-columns: 135px minmax(0,1fr); margin-top: 12px;
  border-bottom: 1px solid var(--line); }
:root { --contest-rule: 1.5px solid color-mix(in srgb, var(--text-faint) 45%, var(--line)); }
#guide-results > .contest-heading { font-size: 13px; margin: 0; padding: 24px 0;
  border-top: var(--contest-rule); }
.contest-heading > span { display: block; font-size: 24px; font-weight: 400; color: var(--text-faint); margin-bottom: 8px; letter-spacing: -.04em; }
#guide-results > .grid { display: block; margin: 0; border-top: var(--contest-rule); }
#guide-results .card { display: grid; grid-template-columns: minmax(140px, .85fr) minmax(140px, 1.4fr) 120px; gap: 24px; align-items: center; background: transparent; border: 0; border-radius: 0; padding: 22px 16px; box-shadow: none; position: relative; }
/* The rule is drawn by a pseudo-element rather than the anchor's own border. A browser
   resolves :visited colours in a restricted pass that covers border-color as well as color,
   and that pass does not re-read custom properties, so a lesson you had opened kept the
   previous theme's divider after a switch. A pseudo-element is outside the restriction. */
#guide-results .card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line-soft); }
#guide-results .card:last-child::after { content: none; }
#guide-results .card:last-child { border-bottom: 0; }
/* Not on the anchor: a browser computes :visited colours in a restricted pass that does not
   re-resolve custom properties on a theme switch, so an anchor set to var(--text) keeps the
   old theme's colour and a read lesson becomes unreadable. The heading is not a link. */
#guide-results .card h3 { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
#guide-results .card p { font-size: 13px; }
#guide-results .card .chip { justify-self: end; font-size: 10px; white-space: normal; text-align: right; border: 0; padding: 0; background: transparent; }
#guide-results .card:hover { background: var(--panel); transform: translateX(3px); }
.syllabus-note { padding: 24px 0; margin-top: 0; }
/* Topic collections, exercises and quiet reading surfaces. */
/* Separated on both sides by the same amount. Without the lower half, the paragraph that
   follows the missed questions card sat right against it while every other block on the
   page had room around it. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(290px,100%), 1fr)); gap: 16px;
  margin: 24px 0; }
.card { border-radius: 18px; padding: 24px; background: var(--panel); border-color: var(--line-soft); }
.card h3 { font-size: 18px; line-height: 1.35; margin-bottom: 12px; letter-spacing: -.025em; }
.card p { font-size: 14px; line-height: 1.65; }
.card-foot { gap: 7px; flex-wrap: wrap; margin-top: 22px; }
a.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.chip { font: 500 11px/1.5 var(--sans); text-transform: none; letter-spacing: 0; border: 0; border-radius: 6px; padding: 3px 7px; background: var(--panel-2); color: var(--text-dim); }
.topic-progress { display: block; appearance: none; border: 0; border-radius: 5px; width: 100%; height: 4px; margin-top: 10px; background: var(--line-soft); color: var(--accent); }
.topic-progress::-webkit-progress-bar { background: var(--line-soft); border-radius: 5px; }
.topic-progress::-webkit-progress-value { background: var(--accent); border-radius: 5px; }
.topic-progress::-moz-progress-bar { background: var(--accent); border-radius: 5px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding: 9px 17px; font-size: 13px; border-radius: 10px; }
a.btn:hover { text-decoration: none; }
.btn-primary { box-shadow: 0 3px 8px rgb(0 0 0 / .08); }
.lesson { max-width: 82ch; padding: 40px 48px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 24px; font-size: 16px; line-height: 1.8; }
.lesson > h1 { font-size: clamp(32px,3.5vw,46px); }
.lesson-toc { background: var(--panel-2); border: 0; border-radius: 14px; padding: 20px 24px; margin-block: 28px; font-size: 13px; }
.lesson-toc b { font-size: 12px; }
.lesson h2 { margin-top: 44px; }
.lesson-tools { margin-top: 24px; }
.lesson-tools .btn { font-size: 12px; }
.tbl-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lead { font-size: 17px; }
.qtext { font-size: 17px; line-height: 1.8; margin-block: 24px; }
.choice { padding: 16px 18px; border-radius: 14px; gap: 16px; }
/* A letter in a box should sit in the middle of it, on both axes. */
.choice .key { border-radius: 7px; min-width: 28px; min-height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 0; }
.choice .val { padding-top: 3px; overflow-wrap: anywhere; min-width: 0; }
.choice:hover:not(:disabled) { transform: translateX(3px); }
.quiz-head { margin-top: 28px; padding-bottom: 18px; }
.explain { border-radius: 14px; padding: 22px 24px; }
.exam-bar { padding: 18px 20px; border-radius: 16px; }
.clock { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.review { padding: 25px 0; }
.scoreline { font-size: 64px; letter-spacing: -.055em; }
.empty { padding: 40px 0; border-top: 1px solid var(--line); margin-top: 26px; font-size: 16px; }
.jump-editor { display: none; }
/* Coding stays dense and stable; effects never run underneath the editor. */
.main.flush { padding: 0 18px 18px; }
.ws { height: calc(100dvh - 106px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--panel); }
.ws-left { background: var(--panel); padding: 32px 32px 60px; }
.ws-left h1 { font-size: 32px; }
.ws-bar { padding: 12px; gap: 8px; background: var(--panel-2); flex-wrap: nowrap; }
.ws-bar .btn { min-height: 34px; padding: 5px 11px; font-size: 12px; white-space: nowrap; }
.ws-bar select { min-height: 34px; min-width: 0; }
/* The row wraps when it has to and keeps Submit at the right end of whichever row it lands
   on, which is what the spacer's auto margin already does. Nothing shrinks, because a
   squeezed button clips its own text, and the two small labels give up their space first.
   The divider is draggable, so that threshold is the pane's width and not the window's. */
.ws-right { container-type: inline-size; }
.ws-bar { flex-wrap: wrap; }
.ws-bar > * { flex-shrink: 0; }
.ws-bar .ws-label { white-space: nowrap; }
@container (max-width: 700px) { .ws-bar .ws-label, .fontsize label { display: none; } }
/* Below this the panes stack and the workspace is a single column, so the window is the
   right measure again. */
@media (max-width: 1000px) {
  .ws-bar { flex-wrap: wrap; }
}
.ws-right { min-height: 0; }
.CodeMirror { background: var(--code-bg); }
html[data-theme="dark"] .cm-s-material-darker.CodeMirror,
html[data-theme="dark"] .cm-s-material-darker .CodeMirror-gutters { background: var(--code-bg); }
.hint { padding: 8px 0; }
.hint summary { font-weight: 550; }
/* Give up is a different kind of decision from opening a hint, so it does not sit right
   against the last one. */
.hint-end { margin-top: 26px; }
.footer { margin: 0 auto; max-width: 1504px; background: transparent; padding: 32px 36px; font-size: 11px; line-height: 1.8; gap: 18px; }
.footer > span:first-child { max-width: 85ch; }
.footer-links { margin-left: 0; gap: 12px 20px; }
.footer .linkish { font-size: 11px; min-height: 32px; }
.footer-note { opacity: .9; }
#motion-btn:disabled { opacity: .7; text-decoration: none; }
@media (max-width: 1150px) {
  .topbar { gap: 16px; }
  .brand-name { display: none; }
  .seg-label { display: none; }
  .sidebar { flex-basis: 208px; width: 208px; padding-left: 16px; }
  .main { padding-inline: 24px; }
  #guide-results .card { grid-template-columns: minmax(130px,1fr) minmax(180px,1.4fr); }
  #guide-results .card .chip { display: none; }
  .lesson { padding: 32px; }
}
@media (max-width: 1000px) {
  .jump-editor { display: inline-flex; }
  .ws-split { display: none; }
  .ws { height: auto; }
  .ws-right { min-height: 540px; height: 80dvh; }
}
@media (max-width: 780px) {
  :root { --topbar-h: 120px; }
  .topbar { top: 8px; margin: 8px; padding: 10px 12px 8px; border-radius: 20px; min-height: 104px; height: auto; gap: 0 12px; }
  .brand-name { display: inline; font-size: 12px; }
  .brand-mark { width: 30px; height: 30px; font-size: 19px; line-height: 30px; }
  .seg button { padding: 7px 10px; }
  .topbar-right { gap: 7px; }
  .tabs { margin-top: 10px; gap: 2px; }
  .tabs a { padding: 8px 10px; border: 0; border-radius: 999px; font-size: 12px; }
  .tabs a.on { background: var(--text); color: var(--bg); border: 0; }
  .topicbar:not(.empty) { background: transparent; border: 0; padding: 8px 20px; }
  body[data-view="index"] .topicbar { display: none; }
  .main { padding: 24px 20px 50px; }
  .library-head { align-items: start; flex-direction: column; gap: 18px; }
  .search-field { width: 100%; }
  #guide-results { grid-template-columns: 1fr; }
  #guide-results > .contest-heading { display: flex; align-items: baseline; gap: 14px; padding: 22px 0 0; }
  .contest-heading > span { margin: 0; }
  #guide-results > .grid { margin: 0; border-top: 0; }
  #guide-results > .contest-heading { border-top: var(--contest-rule); }
  #guide-results .card { display: block; padding: 20px 0; }
  #guide-results .card h3 { margin-bottom: 7px; }
  .lesson { padding: 24px; border-radius: 18px; }
  .lesson h1 { font-size: 32px; }
  .lesson-toc { padding: 18px; }
  .lesson-tools { gap: 14px; }
  .main.flush { padding: 10px; }
  .ws-left { padding: 24px 20px 40px; }
  .ws-split { display: none; }
  .footer { padding: 25px 20px; }
}
@media (max-width: 400px) {
  .brand-name { display: none; }
  .tabs a { padding-inline: 5px; font-size: 11px; }
  .main { padding-inline: 16px; }
  .lesson { padding: 20px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--panel); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ambient { display: none; }
}
/* Reduced motion, asked for by the system or by the accessibility menu. The menu's flag needs
   a rule of its own because a media query cannot be one branch of a selector list. This is what
   stops the ambient drift as well; there is no separate pause rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-motion="off"], html[data-motion="off"] *,
html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media print {
  .ambient, .topbar, .sidebar, .topicbar, .footer { display: none !important; }
  .shell { display: block; }
  .main, .lesson { padding: 0; border: 0; background: white; color: black; }
}


/* A worked expression is the same kind of thing as a code listing, so it gets the same
   frame. Without this, a question built from <pre> sat in a box and one built from these
   sat loose on the page, which read as two different kinds of content. */
.expr, .cases, .subq {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  overflow-x: auto;
}
.cases { padding-left: 15px; }
.expr { padding-left: 15px; }
.subq { padding-left: 15px; }


/* Editor text size. The stops are whole pixels, so the control is notched rather than
   continuous and the current value is always readable beside it. */
.fontsize { display: inline-flex; align-items: center; gap: 8px; }
.fontsize label { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); }
.fontsize output { font: 600 11px/1 var(--mono); color: var(--text-dim); min-width: 2ch;
  text-align: right; }
.fontsize input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 96px; height: 18px;
  background: transparent; cursor: pointer; margin: 0;
}
.fontsize input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: var(--line);
}
.fontsize input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 2px; background: var(--line);
}
.fontsize input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 0; margin-top: -5px;
}
.fontsize input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 0;
}
.fontsize input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Chrome draws the datalist ticks itself; Firefox needs the marks left visible. */
.fontsize input[type="range"] { --tick: var(--text-faint); }


/* The site's own question box. A native <dialog> supplies the top layer, the focus trap and
   the Escape key; this is only its appearance. */
.ask {
  width: min(30rem, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}
.ask::backdrop { background: rgb(6 12 14 / .55); backdrop-filter: blur(2px); }
.ask form { padding: 24px 26px 22px; margin: 0; }
.ask h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.ask p { margin: 0 0 20px; color: var(--text-dim); font-size: 14px; line-height: 1.65; }
.ask p[hidden] { display: none; }
.ask-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ask-row .btn { min-height: 38px; }
/* An irreversible answer should not look like the ordinary one. */
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--accent-ink); }
html[data-theme="light"] .btn-danger { color: #fff; }
.btn-danger:hover { filter: brightness(1.06); }
@media (max-width: 420px) {
  .ask-row { flex-direction: column-reverse; }
  .ask-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ask[open] { animation: ask-in 140ms ease-out; }
  @keyframes ask-in { from { opacity: 0; transform: translateY(6px); } }
}


/* The saved list. One row per question, its stem readable at a glance and its own way out. */
.saved-heading { font-size: 15px; letter-spacing: .01em; color: var(--text-dim); margin: 30px 0 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.saved-list { list-style: none; margin: 0; padding: 0; }
.saved-list li { display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line-soft); }
.saved-list li:last-child { border-bottom: 0; }
.saved-list a { flex: 1 1 auto; display: flex; align-items: baseline; gap: 16px;
  padding: 16px 4px; color: var(--text); min-width: 0; }
.saved-list a:hover { color: var(--accent); text-decoration: none; }
.saved-stem { flex: 1 1 auto; font-size: 14px; line-height: 1.6; }
.saved-id { flex: 0 0 auto; font: 500 11px var(--mono); color: var(--text-faint); }
.saved-drop { flex: 0 0 auto; font-size: 12px; color: var(--text-faint); }
.saved-drop:hover { color: var(--bad); }
@media (max-width: 640px) {
  .saved-list a { flex-wrap: wrap; gap: 4px 12px; }
}

/* ------------------------------------------------------- accessibility menu */

.a11y { position: static; }
.a11y > summary { list-style: none; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; }
.a11y > summary::-webkit-details-marker { display: none; }
.a11y[open] > summary { border-color: var(--accent); color: var(--text); }
.a11y-menu {
  position: absolute; right: 12px; top: calc(100% + 8px); z-index: 60;
  width: min(19rem, calc(100vw - 48px));
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); text-align: left;
}
.a11y-lead { margin: 0 0 12px; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.a11y-menu label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  font-size: 13px; cursor: pointer; }
.a11y-menu label small { display: block; margin-top: 2px; font-size: 11.5px;
  color: var(--text-faint); line-height: 1.5; }
.a11y-menu input { margin: 2px 0 0; accent-color: var(--accent); width: 15px; height: 15px;
  flex: 0 0 auto; cursor: pointer; }
.a11y-menu input:disabled { cursor: default; }
.a11y-menu input:disabled + span { color: var(--text-faint); }
#a11y-reset { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }


/* ------------------------------------------------------- what the settings do */

/* Higher contrast: full-strength text, borders that are actually visible, no dimming. */
html[data-contrast="on"] {
  --text-dim: var(--text);
  --text-faint: var(--text);
  --line: var(--text-dim);
  --line-soft: var(--text-dim);
}
html[data-contrast="on"] .ambient { display: none; }
html[data-contrast="on"] .card,
html[data-contrast="on"] .choice,
html[data-contrast="on"] .btn { border-width: 2px; }
html[data-contrast="on"] a { text-decoration: underline; }

/* Reduce transparency: the glass becomes a plain surface. */
html[data-plain="on"] .topbar,
html[data-plain="on"] .a11y-menu,
html[data-plain="on"] .ask {
  backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel);
}

html[data-plain="on"] .ask::backdrop { backdrop-filter: none; background: rgb(6 12 14 / .8); }

/* Larger text: everything that is sized in rem or inherits from the body grows with it. */
html[data-bigtext="on"] body { font-size: 17.5px; }
html[data-bigtext="on"] .note,
html[data-bigtext="on"] .card p,
html[data-bigtext="on"] .saved-stem,
html[data-bigtext="on"] .choice .val { font-size: 16px; }
html[data-bigtext="on"] .qtext { font-size: 19px; }
html[data-bigtext="on"] .lesson { font-size: 18px; }

/* Underline links, so colour is not the only thing marking one. */
html[data-underline="on"] .main a:not(.btn):not(.card),
html[data-underline="on"] .footer a,
html[data-underline="on"] .lesson a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------- links keep their own colours

   A browser computes the styles of a visited link in a restricted pass, and that pass does
   not re-read custom properties when the theme changes. Anything themed that sits directly
   on an <a> therefore keeps the previous theme's value: a card you had opened stayed pale on
   a dark page. Colour, background and border are all restricted; a pseudo-element is not, so
   the card's surface is drawn by one. */
a.card { background: transparent; border-color: transparent; position: relative;
  isolation: isolate; }
a.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--panel); border: 1px solid var(--line-soft);
}
a.card:hover::before { border-color: var(--accent-dim); }
/* The guide rows have no surface of their own, only the rule under each one. */
#guide-results .card::before { background: transparent; border: 0; }
#guide-results .card:hover::before { background: var(--panel); }


/* A contest band on the practice and programming pages. The guide sets its number in a column
   of its own; there is no column here, so the number reads as part of the heading. */
.contest-band { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 0;
  padding-bottom: 10px; border-bottom: var(--contest-rule);
  font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--text-dim); }
.contest-band > span { font: 400 22px/1 var(--sans); letter-spacing: -.04em;
  color: var(--text-faint); }
.contest-band + .grid { margin-top: 16px; }