/* One identity for the whole room, shared with the cheat sheet: the same paper,
   the same teal, the same three faces. Tokens on :root are the light palette;
   dark is a token swap, never a second stylesheet. */
:root {
  --paper: #F5F7F6; --panel: #FFFFFF; --ink: #17222B; --muted: #5E6B76; --line: #D6DDE0;
  --accent: #136F73; --accent-ink: #0B5457; --code-bg: #EDF1F0;
  --ok: #1E7B4A; --ok-bg: #E7F4EC; --warn: #8A5A00; --warn-bg: #FFF4E3; --bad: #B23A3A; --bad-bg: #FBE9E9;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14191D; --panel: #1B2126; --ink: #E4E9EC; --muted: #97A3AC; --line: #2C353C;
    --accent: #5FC4C7; --accent-ink: #8FE0E2; --code-bg: #232B31;
    --ok: #6FD39A; --ok-bg: #16281E; --warn: #F0C07A; --warn-bg: #2E2416; --bad: #F08A8A; --bad-bg: #331A1A;
  }
}
:root[data-theme="dark"] {
  --paper: #14191D; --panel: #1B2126; --ink: #E4E9EC; --muted: #97A3AC; --line: #2C353C;
  --accent: #5FC4C7; --accent-ink: #8FE0E2; --code-bg: #232B31;
  --ok: #6FD39A; --ok-bg: #16281E; --warn: #F0C07A; --warn-bg: #2E2416; --bad: #F08A8A; --bad-bg: #331A1A;
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--sans); }
a { color: var(--accent-ink); }
code, pre, kbd { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--code-bg); padding: 0.05em 0.35em; border-radius: 3px; }
pre { background: var(--code-bg); padding: 0.85rem 1rem; border-radius: 4px; overflow-x: auto; line-height: 1.45; margin: 0; }
pre code { background: none; padding: 0; font-size: 1em; }
.muted { color: var(--muted); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- the bar across the top ------------------------------------------------- */
nav.site { border-bottom: 1px solid var(--line); background: var(--panel); }
nav.site .in { max-width: 1240px; margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; }
nav.site .brand { font: 500 1.15rem var(--display); color: var(--ink); text-decoration: none; margin-right: auto; }
nav.site .brand em { font-style: italic; color: var(--accent); }
nav.site a.l { color: var(--muted); text-decoration: none; font-size: 0.9rem; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
nav.site a.l:hover, nav.site a.l[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.prose { max-width: 72ch; }
.prose h1, .prose h2, .prose h3 { font-family: var(--display); font-weight: 500; line-height: 1.15; text-wrap: balance; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 1.5rem 0 0.5rem; }
.prose h2 { font-size: 1.4rem; margin: 2.2rem 0 0.5rem; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 0.3rem; }
.prose p, .prose ul, .prose ol { margin: 0.5rem 0 0.9rem; }
.prose li { margin: 0.2rem 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 0.6rem 0 1.2rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.prose th { font: 500 0.7rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.prose blockquote { margin: 0.8rem 0; padding: 0.6rem 1rem; border-left: 3px solid var(--accent); background: var(--panel); color: var(--muted); }
.prose pre { margin: 0.6rem 0 1.2rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }
.eyebrow { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* -- home ----------------------------------------------------------------- */
header.hero { padding: 3rem 0 1.5rem; display: grid; gap: 0.7rem; border-bottom: 1px solid var(--line); }
header.hero h1 { font: 500 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
header.hero h1 em { font-style: italic; color: var(--accent); }
header.hero .lede { max-width: 64ch; color: var(--muted); margin: 0; font-size: 1.05rem; }
.cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.btn { font: 500 0.9rem var(--sans); padding: 0.5rem 0.9rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; }
section.h { margin-top: 2.5rem; }
section.h > h2 { font: 500 1.5rem/1.2 var(--display); margin: 0 0 0.25rem; }
section.h > .note { color: var(--muted); max-width: 70ch; margin: 0 0 1rem; }
.cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem 1.1rem; display: grid; gap: 0.45rem; align-content: start; }
.card h3 { margin: 0; font: 600 1.05rem var(--sans); }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--accent-ink); }
.card .dom { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.card .meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font: 400 0.8rem var(--mono); color: var(--muted); margin-top: 0.3rem; }
.card .best { font-family: var(--mono); font-size: 0.85rem; }
.steps { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .t { font: 500 0.9rem var(--mono); color: var(--accent); }
.steps .what { display: grid; gap: 0.15rem; }
.steps .what span { color: var(--muted); font-size: 0.9rem; }
.two { display: grid; gap: 1rem; }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; }
.panel h3 { margin: 0 0 0.4rem; font: 600 1rem var(--sans); }
.panel pre { font-size: 0.85rem; }
table.log { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
table.log td, table.log th { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.log th { font: 500 0.7rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
table.log .n { text-align: right; font-family: var(--mono); }

/* -- project page ------------------------------------------------------------ */
header.proj { padding: 2rem 0 1rem; display: grid; gap: 0.5rem; }
header.proj h1 { font: 500 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--display); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
header.proj .fl { color: var(--muted); max-width: 70ch; margin: 0; }
header.proj .meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font: 400 0.85rem var(--mono); color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; border-bottom: 1px solid var(--line); margin: 0.6rem 0 1.5rem; position: sticky; top: 0; background: var(--paper); z-index: 5; }
.tabs button { font: 500 0.92rem var(--sans); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.6rem 0.9rem; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
.tasks-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 0.5rem 0 1.5rem; }
.tasks-table td, .tasks-table th { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tasks-table th { font: 500 0.7rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tasks-table .pts { text-align: right; font-family: var(--mono); white-space: nowrap; }

/* practice */
.practice { display: grid; gap: 1.2rem; }
@media (min-width: 1100px) { .practice { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .practice .edbox { position: sticky; top: 4.6rem; } }
.edbox { display: grid; gap: 0.5rem; }
.edbox .head { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; justify-content: space-between; }
.edbox .head b { font: 500 0.95rem var(--mono); }
.edbox .head span { font-size: 0.8rem; color: var(--muted); }
.CodeMirror { height: min(72vh, 900px); border: 1px solid var(--line); border-radius: 4px; font: 13.5px/1.5 var(--mono); background: var(--panel); color: var(--ink); }
.CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: var(--muted); }
.CodeMirror-cursor { border-left-color: var(--ink); }
.CodeMirror-selected { background: rgba(19, 111, 115, 0.18) !important; }
.cm-s-default .cm-keyword { color: #8A3B5C; } .cm-s-default .cm-def { color: var(--accent-ink); }
.cm-s-default .cm-string { color: #2F5D9E; } .cm-s-default .cm-number { color: #B86A12; }
.cm-s-default .cm-comment { color: var(--muted); font-style: italic; }
.cm-s-default .cm-builtin { color: #6B4FA0; }
:root[data-theme="dark"] .cm-s-default .cm-keyword, :root:not([data-theme="light"]) .cm-s-default .cm-keyword { color: #DB8AA9; }
:root[data-theme="dark"] .cm-s-default .cm-string { color: #7FA8E6; } :root[data-theme="dark"] .cm-s-default .cm-number { color: #E8A24F; } :root[data-theme="dark"] .cm-s-default .cm-builtin { color: #B39AE6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-s-default .cm-string { color: #7FA8E6; }
  :root:not([data-theme="light"]) .cm-s-default .cm-number { color: #E8A24F; }
  :root:not([data-theme="light"]) .cm-s-default .cm-builtin { color: #B39AE6; }
}
textarea#editor { width: 100%; min-height: 60vh; font: 13.5px/1.5 var(--mono); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem; }
.side { display: grid; gap: 0.9rem; }
.side .panel { display: grid; gap: 0.6rem; }
#clock .bar { height: 8px; background: var(--code-bg); border-radius: 4px; overflow: hidden; }
#clock .bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
#clock.over .bar i { background: var(--bad); }
#clock .clockline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem 1rem; font: 400 0.9rem var(--mono); font-variant-numeric: tabular-nums; margin-top: 0.4rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.row label { font-size: 0.85rem; color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }
.row input[type=number] { width: 4.5rem; font: 500 0.9rem var(--mono); padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
#status { font-size: 0.85rem; color: var(--muted); min-height: 1.3em; }
#status.spin::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin-right: 0.45em; vertical-align: -0.05em; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #status.spin::before { animation: none; } #clock .bar i { transition: none; } }
#output { display: grid; gap: 0.6rem; }
#output .note { margin: 0; color: var(--muted); }
#output pre { font-size: 0.8rem; }
#output pre.eda { max-height: 70vh; overflow: auto; }
.cases h4 { margin: 0.6rem 0 0.2rem; font: 500 0.95rem var(--sans); display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.case { padding: 0.35rem 0 0.35rem 0.6rem; border-left: 2px solid var(--line); display: grid; gap: 0.3rem; }
.case.bad { border-left-color: var(--bad); } .case.warn { border-left-color: var(--warn); } .case.ok { border-left-color: var(--ok); }
.case .line { display: flex; gap: 0.6rem; align-items: baseline; }
.mark { font: 500 0.75rem var(--mono); padding: 0.05em 0.4em; border-radius: 3px; white-space: nowrap; }
.mark.ok { color: var(--ok); background: var(--ok-bg); } .mark.bad { color: var(--bad); background: var(--bad-bg); } .mark.warn { color: var(--warn); background: var(--warn-bg); }
.blk { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.4rem; align-items: start; }
.blk .lbl { font: 500 0.68rem/2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.case .detail { color: var(--bad); font-size: 0.9rem; }
.total { font: 500 1rem var(--mono); margin: 0.6rem 0 0; }
.report { display: grid; gap: 0.6rem; }
.report .rhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; font-size: 0.9rem; }
table.tasks { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.tasks td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tasks td.id { font-family: var(--mono); white-space: nowrap; }
table.tasks td.pts { text-align: right; font-family: var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tasks .tnote { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
table.tasks tr.bad .tnote { color: var(--bad); }
table.tasks tr.warn .tnote { color: var(--warn); }
.teaches { font-size: 0.9rem; } .teaches ul { margin: 0.3rem 0; padding-left: 1.2rem; }

/* reference */
details.spoiler { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); margin: 0 0 0.7rem; }
details.spoiler summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 500; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
details.spoiler summary .id { font-family: var(--mono); color: var(--accent); }
details.spoiler summary .teach { color: var(--muted); font-weight: 400; font-size: 0.9rem; flex-basis: 100%; }
details.spoiler .body { padding: 0 1rem 1rem; }
details.spoiler pre { font-size: 0.85rem; }
.warnbox { background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 0.7rem 1rem; margin: 0 0 1rem; max-width: 72ch; }

footer.site { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1rem; color: var(--muted); font-size: 0.85rem; max-width: 80ch; }