/* --- fonts --- */
/* icons are Nerd Fonts symbols, the emoji face is SerenityOS and only used when the settings ask for it */
@font-face {
	font-family: "Nerd Icons";
	src: url("/fonts/SymbolsNerdFontMono.woff2") format("woff2");
	unicode-range: U+E000-F8FF;
	font-display: block;
}
/* the ranges leave out 0-9, # and *, which the font draws as keycap bases */
@font-face {
	font-family: "Serenity Emoji";
	src: url("/fonts/SerenityOS-Emoji.woff2") format("woff2");
	unicode-range: U+A9, U+AE, U+200D, U+203C, U+2049, U+20E3, U+2122-21AA, U+231A-23FF, U+24C2, U+25AA-27BF, U+2934-2935, U+2B05-2B55, U+3030, U+303D, U+3297, U+3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F;
	font-display: swap;
}

/* --- tokens --- */
:root {
	--bg: #0e0e12;
	--card: #17171d;
	--raise: #1f1f27;
	--well: #0b0b0f;
	--fg: #f4f4f6;
	--mute: #8a8a96;
	--line: #2c2c36;
	--line-hi: #3a3a46;
	--c0: #e21b3c;
	--c1: #1368ce;
	--c2: #d89e00;
	--c3: #26890c;
	--ok: #2fb344;
	--bad: #e21b3c;
	--ok-fg: #4bd062;
	--bad-fg: #ff6b81;
	--gap: clamp(.5rem, 1.8vw, .875rem);
	--pad: clamp(.875rem, 3.5vw, 1.5rem);
	--tap: max(2.75rem, 44px);
	--safe-t: env(safe-area-inset-top, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px);
	--safe-l: env(safe-area-inset-left, 0px);
	/* the symbols font goes first and only claims private use code points, so text never reaches it.
	   Emoji fonts are kept out of the text stack: they carry glyphs for 0-9, so digits would be drawn by
	   them wherever no named monospace font exists. Emoji still fall back on their own */
	--text: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
	--emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	font-family: "Nerd Icons", var(--text);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* --- emoji face --- */
:root[data-emoji="serenity"] { --emoji: "Serenity Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; font-family: "Nerd Icons", "Serenity Emoji", var(--text); }

/* --- accent --- */
/* the player's own color for the focus ring, the open tab and the avatar. Gold is the default */
:root, [data-accent="default"] { --accent: var(--c2); }
[data-accent="red"] { --accent: #e21b3c; }
[data-accent="blue"] { --accent: #3b82f6; }
[data-accent="green"] { --accent: #2fb344; }
[data-accent="violet"] { --accent: #8b5cf6; }
[data-accent="teal"] { --accent: #14b8a6; }
[data-accent="pink"] { --accent: #ec4899; }

.c0 { --col: var(--c0); }
.c1 { --col: var(--c1); }
.c2 { --col: var(--c2); --on: #000; }
.c3 { --col: var(--c3); }

/* --- states --- */
/* every right, partial or wrong look reads these, so no input type picks its own colors.
   --glyph is the corner mark, so the result never depends on color alone */
[data-state="right"] { --state: var(--ok); --state-fg: var(--ok-fg); --on-state: #000; --glyph: "\f00c"; }
[data-state="part"] { --state: var(--c2); --state-fg: #f0b72f; --on-state: #000; --glyph: "\00bd"; }
[data-state="wrong"] { --state: var(--bad); --state-fg: var(--bad-fg); --on-state: #fff; --glyph: "\f00d"; }
/* the right answer the player did not give */
[data-state="missed"] { --state: var(--ok); --state-fg: var(--ok-fg); --on-state: #000; --glyph: "\f00c"; }
[data-state="time"] { --state: var(--mute); --state-fg: #c4c4cc; --on-state: #000; --glyph: "\f017"; }
[data-state="skip"] { --state: var(--mute); --state-fg: #c4c4cc; --on-state: #000; --glyph: "\f061"; }
[data-state="dim"] { --glyph: none; }

/* --- base --- */
* { box-sizing: border-box; border-radius: 0; }
button, input, select, textarea { font: inherit; touch-action: manipulation; }
button { color: inherit; }
[hidden] { display: none !important; }
:where(button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* the grid drifts slowly so idle screens still feel alive */
html { min-height: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	color: var(--fg);
	background-color: var(--bg);
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 4rem 4rem;
	animation: pan 14s linear infinite;
}
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }

/* --- keyframes --- */
@keyframes pan { to { background-position: 4rem 4rem; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pulse { 50% { transform: scale(1.04); } }
@keyframes shrink { to { transform: scaleX(0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes count { 0% { opacity: 0; transform: scale(2.5); } 25% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
@keyframes floatup { to { opacity: 0; transform: translate(-50%, -90px); } }
@keyframes stamp { from { opacity: 0; transform: scale(4) rotate(-14deg); } 60% { opacity: 1; } to { transform: rotate(-4deg); } }
@keyframes slide { from { opacity: 0; transform: translateY(10px); } }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* --- layout --- */
.screen {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
	padding-block: calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-b));
	padding-inline: max(var(--pad), var(--safe-l)) max(var(--pad), var(--safe-r));
	animation: rise .35s ease-out backwards;
}
/* a screen with a dock keeps it at the bottom of the viewport even when the content is short */
.screen.docked { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.screen.shake { animation: shake .4s; }
.center {
	display: grid;
	place-content: center;
	justify-items: center;
	min-height: 100vh;
	min-height: 100svh;
	text-align: center;
}
.flow { display: grid; gap: 1rem; min-width: 0; }
.lead { max-width: 46ch; margin: 0 0 1rem; color: var(--mute); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.center .lead { margin-inline: auto; }
.title { margin: 0 0 .75rem; font-size: clamp(1.5rem, 4.5vw, 2.4rem); overflow-wrap: anywhere; }
.subtitle { margin: 1.75rem 0 .75rem; font-size: 1.1rem; }
.hint { margin: 0 0 1rem; color: var(--mute); overflow-wrap: anywhere; }
.none { color: var(--mute); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); }
.bar > :last-child:not(:only-child) { margin-inline-start: auto; }
.back::before { content: "\2190"; margin-right: .5rem; }

/* --- buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: clamp(.6rem, 2vw, .875rem) clamp(1rem, 4vw, 1.75rem); font-size: clamp(1rem, .95rem + .35vw, 1.1rem); font-weight: 700; color: #000; text-align: center; background: var(--fg); border: 1px solid var(--fg); border-bottom: 4px solid #888; cursor: pointer; transition: transform .08s, opacity .15s, background-color .15s; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.ghostbtn { color: var(--fg); background: transparent; border-color: var(--line-hi); border-bottom-color: var(--line-hi); }
.dangerbtn { color: #fff; background: var(--bad); border-color: var(--bad); border-bottom-color: #8f1126; }
.btn.small { min-height: 2.5rem; padding: .5rem .875rem; font-size: .95rem; border-bottom-width: 2px; }
.btn.on { color: #fff; background: var(--c1); border-color: var(--c1); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.row > .btn { flex: 1 1 min(100%, 10rem); }

/* the footer of a screen: it stays reachable on a long page and never hides the content above it */
.dock {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap);
	margin: auto calc(-1 * var(--pad)) 0;
	padding: .75rem var(--pad) calc(.75rem + var(--safe-b));
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	border-top: 1px solid var(--line);
	backdrop-filter: blur(6px);
}
.dock .btn { flex: 1 1 min(100%, 9rem); }
.dock .grow { flex: 1 1 14rem; min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* --- fields and forms --- */
.field { display: grid; gap: .375rem; min-width: 0; }
.field input:not([type="checkbox"], [type="range"], [type="file"]), .field select, .field textarea { width: 100%; min-height: var(--tap); padding: .625rem .75rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--gap); align-items: end; }
.form { display: grid; gap: 1rem; max-width: min(24rem, 100%); }
.form .btn { justify-self: start; }
.inlineForm { display: flex; flex-wrap: wrap; align-items: end; gap: var(--gap); }
.inlineForm .field { flex: 1 1 12rem; }
.formerr { margin: 0; color: var(--bad-fg); overflow-wrap: anywhere; }
.formok { margin: 0; color: var(--ok-fg); overflow-wrap: anywhere; }
.formerr:empty, .formok:empty { display: none; }
.check { display: flex; align-items: center; gap: .625rem; min-height: var(--tap); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.source { width: 100%; min-height: 18rem; padding: .75rem; font: .95rem/1.45 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; color: var(--fg); background: var(--card); border: 1px solid var(--line); tab-size: 2; resize: vertical; }
.linkbox { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; }

/* a group of choices that fit on one line, one of them on */
.seg { position: relative; display: flex; border: 1px solid var(--line); background: var(--card); }
/* one marker slides to the chosen slot, --at and --n are set by the client */
.seg::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--at, 0) * 100% / var(--n, 1)); width: calc(100% / var(--n, 1)); background: var(--raise); box-shadow: inset 0 -3px var(--accent); transition: left .22s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.seg button { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: var(--tap); padding: .5rem .625rem; color: var(--mute); font-weight: 700; background: none; border: 0; cursor: pointer; overflow-wrap: anywhere; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-checked="true"] { color: var(--fg); }

/* a section that stays closed until the player wants it */
.fold { background: var(--card); border: 1px solid var(--line); }
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--tap); padding: .5rem .875rem; font-weight: 700; list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "\25BE"; color: var(--mute); transition: transform .2s; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary small { margin-right: auto; color: var(--mute); font-weight: 400; }
.foldBody.sliding { overflow: hidden; }
.foldBody { display: grid; gap: 1rem; min-width: 0; padding: .25rem .875rem 1rem; }
.foldBody > :is(p, h3) { margin: 0; }

/* --- menu --- */
.menu { position: relative; }
.menuList { position: absolute; z-index: 40; top: calc(100% + .25rem); right: 0; display: grid; min-width: min(15rem, 80vw); background: var(--card); border: 1px solid var(--line-hi); box-shadow: 0 12px 28px rgba(0, 0, 0, .6); transform-origin: top right; }
.menuItem { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: var(--tap); padding: .5rem .875rem; color: var(--fg); text-align: left; background: none; border: 0; cursor: pointer; transition: background-color .12s; }
.menuItem:not(:disabled):hover, .menuItem:focus-visible { background: var(--raise); }
.menuItem.danger { color: var(--bad-fg); }
.menuSep { height: 1px; margin: 0; background: var(--line); border: 0; }

/* --- sheet --- */
.sheet { width: min(45rem, calc(100vw - 2 * var(--pad))); max-height: min(88svh, 52rem); margin: auto; padding: 0; color: var(--fg); background: var(--bg); border: 1px solid var(--line-hi); overflow: auto; overscroll-behavior: contain; }
.sheet.small { width: min(26rem, calc(100vw - 2 * var(--pad))); }
.sheet::backdrop { background: rgba(0, 0, 0, .72); }
.sheetHead { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: .75rem var(--pad); background: var(--bg); border-bottom: 1px solid var(--line); }
.sheetHead strong { min-width: 0; overflow-wrap: anywhere; }
.sheetBody { display: grid; gap: 1.125rem; padding: var(--pad); }
.sheetBody p { margin: 0; overflow-wrap: anywhere; }
.sheetFoot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap); padding: .75rem var(--pad); background: var(--bg); border-top: 1px solid var(--line); }

/* --- toast --- */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(1rem + var(--safe-b)); width: max-content; max-width: min(30rem, calc(100vw - 2rem)); padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line-hi); border-left: 6px solid var(--state, var(--accent)); transform: translateX(-50%); overflow-wrap: anywhere; animation: rise .25s ease-out backwards; }

/* --- the corner mark of a stated thing --- */
:is(.opt, .item, .node, .chip, .blank, .textbox, .slider, .sharebox) { position: relative; }
:is(.opt, .item, .node, .chip, .blank, .textbox, .slider, .sharebox)[data-state]::after {
	content: var(--glyph);
	position: absolute;
	z-index: 2;
	top: -.5rem;
	right: -.5rem;
	display: grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding-inline: .25rem;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
	color: var(--on-state);
	background: var(--state);
	border: 2px solid var(--bg);
	pointer-events: none;
}

/* the verdict of a question: its own mark, then the words */
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; padding: .625rem .875rem; background: var(--card); border-left: 6px solid var(--state); }
.verdictMark { display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; font-weight: 700; color: var(--on-state); background: var(--state); }
.verdictMark::before { content: var(--glyph); }
.verdict strong { min-width: 0; font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--state-fg); overflow-wrap: anywhere; }
.verdict .pts { margin-left: auto; font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem); font-weight: 700; white-space: nowrap; }
.verdict small { flex: 1 0 100%; color: var(--mute); }
.banner { background: var(--card); border-left: 6px solid var(--state); animation: rise .35s backwards; }
.banner .verdict { border: 0; }
.banner p { margin: 0; padding: 0 .875rem .75rem calc(.875rem + 2.375rem); overflow-wrap: anywhere; }

/* --- labels and pictures --- */
.labelWrap { display: inline-flex; align-items: center; gap: clamp(.4rem, 1.6vw, .625rem); min-width: 0; max-width: 100%; }
.labelText { min-width: 0; overflow-wrap: anywhere; }
.emoji { flex: none; font-family: "Nerd Icons", var(--emoji), sans-serif; font-size: 1.4em; line-height: 1; }
.labelImg { flex: none; width: clamp(2rem, 8vw, 2.625rem); aspect-ratio: 1; object-fit: cover; background: #fff; border: 1px solid rgba(255, 255, 255, .35); pointer-events: none; }
.opt .labelImg { width: clamp(2.25rem, 10vw, 2.875rem); }
.chip .labelImg { width: clamp(1.875rem, 8vw, 2.5rem); }
.chip.flat .labelImg { width: clamp(2.5rem, 12vw, 3.5rem); }
.node .labelImg { width: clamp(1.875rem, 8vw, 2.5rem); }

/* --- media frames --- */
.media { display: grid; gap: var(--gap); margin: 0 0 1rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--gap); margin: 0; }
.gallery.one { grid-template-columns: minmax(0, 35rem); justify-content: center; }
.tile { margin: 0; padding: .625rem .625rem 0; background: var(--card); border: 1px solid var(--line); }
.tileFrame { display: grid; place-items: center; min-height: clamp(6rem, 18vw, 7.5rem); padding: .375rem; background: #0b0b0f; }
.tile img { display: block; width: 100%; max-width: 100%; max-height: clamp(12rem, 42svh, 18.75rem); object-fit: contain; }
.tile figcaption { min-height: 2.2em; padding: .5rem .125rem; color: var(--mute); font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.chartFrame { margin: 0; padding: clamp(.5rem, 2vw, .625rem); background: var(--card); border: 1px solid var(--line); }
.chartBody { min-width: 0; }
.chartFrame svg, .chart { display: block; width: 100%; height: auto; }
.chartFrame figcaption { min-height: 2.2em; padding: .5rem .125rem; color: var(--mute); font-size: .9rem; line-height: 1.3; }
.chart text { font-family: inherit; }
.chartAxis { fill: var(--mute); font-size: 12px; }
.chartGrid { stroke: var(--line); stroke-width: 1; }
.chartLine { fill: none; stroke: var(--c2); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chartDot { fill: var(--c2); stroke: var(--bg); stroke-width: 2; }

.bars { display: grid; gap: clamp(.4rem, 1.6vw, .75rem); }
.barRow { display: grid; grid-template-columns: minmax(3.25rem, 28%) minmax(0, 1fr) auto; align-items: center; gap: clamp(.35rem, 1.6vw, .75rem); font-size: clamp(.85rem, .8rem + .3vw, 1rem); }
.barLabel { overflow-wrap: anywhere; }
.barTrack { height: clamp(.9rem, 3vw, 1.25rem); background: var(--line); overflow: hidden; }
.barFill { display: block; width: calc(var(--v) * 100%); min-width: 2px; height: 100%; }
.barValue { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barFill.b0, .stackSeg.b0, .legendDot.b0 { background: var(--c0); }
.barFill.b1, .stackSeg.b1, .legendDot.b1 { background: var(--c1); }
.barFill.b2, .stackSeg.b2, .legendDot.b2 { background: var(--c2); }
.barFill.b3, .stackSeg.b3, .legendDot.b3 { background: var(--c3); }

.pieWrap { display: grid; gap: var(--gap); align-items: center; }
.donut { position: relative; justify-self: center; width: min(12rem, 58vw); aspect-ratio: 1; background: var(--pie); border-radius: 50%; }
.donut::after { content: ""; position: absolute; inset: 28%; background: var(--card); border-radius: 50%; }
.donutLegend { display: grid; gap: .35rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.legendItem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.legendDot { width: clamp(.7rem, 2.6vw, .9rem); aspect-ratio: 1; }
.legendLabel { overflow-wrap: anywhere; }
.legendValue { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 34rem) {
	.pieWrap { grid-template-columns: auto minmax(0, 1fr); }
}

.stack { display: flex; width: 100%; min-height: clamp(2.25rem, 7vw, 2.75rem); overflow: hidden; }
.stackSeg { display: grid; flex: 0 0 calc(var(--w) * 100%); place-items: center; min-width: 2px; container-type: inline-size; }
.stackSeg.stackEmpty { flex: 1 1 100%; background: var(--line); }
.stackText { color: #fff; font-size: .8rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
@container (max-width: 3.4rem) {
	.stackText { display: none; }
}

/* --- home --- */
.logo { margin: 0; font-size: clamp(1.6rem, 7vw, 2.4rem); letter-spacing: .04em; text-transform: uppercase; }
.logo span { display: inline-block; animation: pop .6s calc(var(--i) * 60ms) backwards; }
.logo span:nth-child(4n+1) { color: var(--c0); }
.logo span:nth-child(4n+2) { color: var(--c1); }
.logo span:nth-child(4n+3) { color: var(--c2); }
.logo span:nth-child(4n+4) { color: var(--c3); }
.logo.big { margin: .75rem 0; font-size: clamp(2.2rem, 10vw, 5rem); }
.acct { max-width: 14rem; gap: .5rem; }
.acct .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin-bottom: 1.25rem; padding: .875rem 1rem; background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--accent); }
.callout p { flex: 1 1 14rem; margin: 0; }
.callout .btn { flex: 0 0 auto; }
.section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin: 1.25rem 0 .625rem; }
.section h2, .section h3 { margin: 0; font-size: 1.1rem; }
.section .tally { color: var(--mute); }
.section .bulk { display: flex; gap: .25rem; margin-left: auto; }
.linkbtn { min-height: var(--tap); padding: .25rem .625rem; color: var(--fg); text-align: left; text-decoration: underline; text-underline-offset: .25em; background: none; border: 0; cursor: pointer; }
.linkbtn:hover, .linkbtn:focus-visible { background: var(--line); }
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.card {
	position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 7.5rem; padding: clamp(.875rem, 3.5vw, 1.125rem); text-align: left; color: var(--on, #fff); cursor: pointer;
	background: var(--col); border: 1px solid rgba(255, 255, 255, .2); border-bottom: 5px solid rgba(0, 0, 0, .35);
	animation: pop .5s calc(var(--i) * 80ms) backwards; transition: transform .12s;
}
.card:active { transform: scale(.98); }
.cardTop { display: flex; align-items: center; gap: .75rem; padding-right: 2rem; }
.card strong { font-size: clamp(1.05rem, 1rem + .6vw, 1.3rem); overflow-wrap: anywhere; }
.card .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* the line under a tile takes the color of the tile text, the grey of .meta is for the dark page */
.card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; margin-top: auto; color: inherit; }
.pill { padding: .125rem .5rem; font-size: .85rem; font-weight: 700; background: color-mix(in srgb, currentColor 18%, transparent); }
.card .tick { position: absolute; top: .875rem; right: .875rem; width: 1.375rem; aspect-ratio: 1; border: 2px solid currentColor; background: rgba(0, 0, 0, .2); }
.card[aria-pressed="true"] { outline: 4px solid var(--fg); outline-offset: 2px; }
.card[aria-pressed="true"] .tick { background: currentColor; animation: pop .25s; }
.card[aria-pressed="true"] .tick::after { content: ""; position: absolute; inset: 4px; background: var(--col); }
.setup { display: grid; gap: var(--gap); }
.setup .hint { margin: 0; }
.meta { color: var(--mute); }
@media (hover: hover) {
	.card:hover { transform: translateY(-4px); }
	.opt:hover { transform: translateY(-3px); }
}

/* --- hud, timer and progress --- */
.hud { display: flex; align-items: center; gap: .5rem .875rem; padding: .25rem 0 .5rem; }
.hud .pos { min-width: 0; font-variant-numeric: tabular-nums; }
.scorebox { margin-inline-start: auto; white-space: nowrap; }
.scorebox b { font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem); font-variant-numeric: tabular-nums; }
.streak { padding: .125rem .625rem; background: var(--c2); color: #000; font-weight: 700; animation: pop .4s; }
.progress { height: 4px; margin-bottom: .625rem; background: var(--line); }
.progress i { display: block; width: calc(var(--p) * 100%); height: 100%; background: var(--fg); transition: width .3s; }
.timer { display: flex; align-items: center; gap: .75rem; margin: 0 0 clamp(.75rem, 2.5vw, 1.125rem); transition: opacity .3s; }
.timer .track { position: relative; flex: 1; height: .75rem; background: var(--line); overflow: hidden; }
.timer .track i { position: absolute; inset: 0; background: var(--c1); transform-origin: left; animation: shrink var(--t) linear forwards; }
.timer.low .track i { background: var(--c0); }
.timer.low .track::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .15; animation: blink .6s steps(2) infinite; }
.timer.low .clock { color: var(--bad-fg); }
.timer.done { opacity: .4; }
.clock { min-width: 3ch; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.qtext { margin: 0 0 .5rem; padding: clamp(.875rem, 3vw, 1.25rem); font-size: clamp(1.15rem, 1rem + 1.4vw, 2rem); background: var(--card); border: 1px solid var(--line); overflow-wrap: anywhere; animation: drop .45s ease-out backwards; }
.stage { min-width: 0; }
.float { position: fixed; z-index: 70; transform: translateX(-50%); font-size: clamp(1.2rem, 1rem + 1.5vw, 1.6rem); font-weight: 700; color: var(--c2); pointer-events: none; animation: floatup .9s ease-out forwards; }
.countdown { height: 1.2em; font-size: clamp(5rem, 28vw, 14rem); font-weight: 700; line-height: 1; }
.countdown span { display: inline-block; animation: count .75s ease-out both; }
.explain { display: grid; gap: var(--gap); margin-top: var(--gap); }

/* --- colored blocks --- */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.opt {
	display: flex; align-items: center; gap: clamp(.5rem, 2vw, .875rem); min-height: clamp(4rem, 11svh, 5.75rem); padding: clamp(.75rem, 3vw, 1rem);
	text-align: left; font-size: clamp(1rem, .95rem + .5vw, 1.15rem); color: var(--on, #fff); cursor: pointer; background: var(--col);
	border: 1px solid rgba(255, 255, 255, .2); border-bottom: 5px solid rgba(0, 0, 0, .35);
	animation: pop .45s calc(var(--i) * 90ms) backwards; transition: transform .12s, opacity .3s, filter .3s;
}
.opt .label { min-width: 0; }
.opt.picked, .opt.on { outline: 3px solid currentColor; outline-offset: 2px; }
/* the checkbox of a multiple choice is gone once the answer is judged, the corner mark takes over */
.opts.multi .opt::before { content: ""; flex: none; order: 9; margin-left: auto; width: clamp(1.125rem, 4.5vw, 1.375rem); aspect-ratio: 1; border: 2px solid currentColor; }
.opts.multi .opt.on::before { background: currentColor; }
.opts.multi .opt[data-state]::before { display: none; }
.opt[data-state="right"] { outline: 3px solid currentColor; outline-offset: 2px; animation: pulse .5s 2; }
.opt[data-state="missed"] { outline: 3px dashed currentColor; outline-offset: 2px; }
.opt[data-state="wrong"] { opacity: .65; outline: 3px dashed currentColor; outline-offset: 2px; animation: shake .45s; }
.opt[data-state="dim"] { opacity: .25; filter: grayscale(.7); }
.opts.tf .opt { justify-content: center; min-height: clamp(6rem, 20svh, 10rem); font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); }
@media (max-width: 40rem) {
	.opts:not(.tf) { grid-template-columns: 1fr; }
}

/* --- order --- */
.order { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.item { display: flex; align-items: center; gap: clamp(.5rem, 2vw, .75rem); padding: clamp(.6rem, 2.2vw, .75rem); background: var(--card); border: 1px solid var(--line); cursor: grab; touch-action: pan-y; user-select: none; animation: rise .4s calc(var(--i) * 70ms) backwards; }
.item .n { flex: none; display: grid; place-items: center; width: clamp(1.75rem, 6vw, 1.875rem); aspect-ratio: 1; background: var(--c1); font-weight: 700; }
.item .label { flex: 1; min-width: 0; }
.arrows { display: flex; flex: none; gap: .25rem; }
.arrows button { position: relative; width: var(--tap); height: var(--tap); background: var(--line); border: 1px solid var(--line-hi); cursor: pointer; }
.arrows button::after { content: ""; position: absolute; inset: 30%; background: var(--fg); }
.arrows .up::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.arrows .down::after { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.item[data-state] .arrows { display: none; }
.dragging { opacity: .35; }
/* the clone must not replay entry animations, they would override the inline transform */
.dragGhost { position: fixed; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none; opacity: .95; box-shadow: 0 14px 28px rgba(0, 0, 0, .6); animation: none !important; }

/* a judged thing takes the tint of its state, an inset ring leaves its own borders alone */
:is(.item, .node)[data-state] { background: color-mix(in srgb, var(--state) 16%, var(--card)); box-shadow: inset 0 0 0 2px var(--state); }
.item[data-state="wrong"] { animation: shake .45s; }

/* --- match --- */
.match { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 14vw, 12.5rem); align-items: start; }
.match .col { display: grid; gap: clamp(.4rem, 1.8vw, .625rem); min-width: 0; }
.node { display: block; width: 100%; min-width: 0; min-height: var(--tap); padding: clamp(.6rem, 2.4vw, .875rem); text-align: left; color: var(--fg); background: var(--card); border: 1px solid var(--line); cursor: pointer; touch-action: pan-y; user-select: none; animation: rise .4s calc(var(--i) * 70ms) backwards; transition: border-color .15s, background .15s; }
.node.l { border-right: 4px solid var(--c1); }
.node.r { border-left: 4px solid var(--c2); }
.node.linked { background: #1b2540; }
.node.sel { outline: 2px solid var(--fg); }
.over { background: #24243a; border-color: var(--fg); }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.link { fill: none; stroke: var(--fg); stroke-width: 3; }
.link.temp { stroke-dasharray: 6 6; opacity: .7; }
.link.ok { stroke: var(--ok); }
.link.bad { stroke: var(--bad); }
.link.solution { stroke: var(--ok); stroke-dasharray: 8 6; }
/* pathLength is 1 on new links, so one dash covers the whole path and the offset draws it */
.link.draw { stroke-dasharray: 1; animation: draw .35s ease-out; }
.tip { fill: var(--fg); }
.tip.ok { fill: var(--ok); }
.tip.bad { fill: var(--bad); }

/* --- written answer --- */
.textbox { display: grid; gap: .25rem; }
.answer { width: 100%; min-height: var(--tap); padding: clamp(.75rem, 3vw, 1rem); font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-bottom: 4px solid var(--c1); outline: none; }
.answer:focus { border-bottom-color: var(--c2); }
.textbox[data-state] .answer { border-bottom-color: var(--state); }
.textbox[data-state="wrong"] .answer { animation: shake .45s; }
.note { min-height: 1.5em; margin: .25rem 0 0; color: var(--ok-fg); overflow-wrap: anywhere; }
.numberbox { display: flex; align-items: center; gap: .625rem; }
.numberbox .answer { flex: 1; min-width: 0; }
.unit { color: var(--mute); white-space: nowrap; }

/* --- slider --- */
.sliderbox { --thumb: clamp(1.5rem, 5vw, 1.75rem); --track: .625rem; padding-top: clamp(2.5rem, 8vw, 3.5rem); }
.slider { position: relative; }
.slider[data-state] { margin-bottom: clamp(1.75rem, 6vw, 2.5rem); }
.slider input { width: 100%; height: calc(var(--thumb) + .5rem); margin: 0; background: transparent; appearance: none; }
.slider input::-webkit-slider-runnable-track { height: var(--track); background: var(--line); border: 1px solid var(--line-hi); }
.slider input::-moz-range-track { height: var(--track); background: var(--line); border: 1px solid var(--line-hi); }
.slider input::-webkit-slider-thumb { appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((var(--track) - var(--thumb)) / 2 - 1px); background: var(--state, var(--c1)); border: 2px solid #fff; }
.slider input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); background: var(--state, var(--c1)); border: 2px solid #fff; }
.slider:not(.touched) input::-webkit-slider-thumb { background: var(--mute); }
.slider:not(.touched) input::-moz-range-thumb { background: var(--mute); }
.bubble { position: absolute; bottom: calc(100% + .375rem); left: calc(var(--p) * (100% - var(--thumb)) + var(--thumb) / 2); transform: translateX(-50%); padding: .25rem .625rem; background: var(--fg); color: #000; font-weight: 700; white-space: nowrap; }
.goal { position: absolute; top: calc(100% + .25rem); left: calc(var(--s) * (100% - var(--thumb)) + var(--thumb) / 2); transform: translateX(-50%); padding: .125rem .5rem; background: var(--ok); color: #000; font-weight: 700; white-space: nowrap; animation: rise .4s backwards; }
.ends { display: flex; justify-content: space-between; gap: .5rem; margin-top: .25rem; color: var(--mute); }

/* --- share --- */
.sharebox { display: grid; gap: 1rem; }
.sharebox .stack { opacity: .55; transition: opacity .2s; }
.sharebox.touched .stack, .sharebox[data-state] .stack { opacity: 1; }
.shareRows { display: grid; gap: .625rem; }
.shareRow { display: grid; grid-template-columns: minmax(6rem, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: clamp(.4rem, 2vw, .75rem); padding: .625rem .75rem; background: var(--card); border-left: 4px solid var(--col); }
.shareName { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.shareRow input[type="range"] { width: 100%; accent-color: var(--col); }
.shareOut { min-width: 3.75rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.shareTarget { display: grid; gap: .375rem; padding-top: .625rem; border-top: 1px solid var(--line); }
.shareTarget small { color: var(--mute); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.shareView { display: grid; gap: .625rem; }
.shareLegend { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.shareLegend li { display: flex; align-items: center; justify-content: space-between; gap: .625rem; }
.shareLegend b { white-space: nowrap; }
@media (max-width: 40rem) {
	.shareRow { grid-template-columns: minmax(0, 1fr) auto; }
	.shareName { grid-column: 1 / -1; }
}

/* --- chips, blanks, classify --- */
.sentence { margin: 0 0 .5rem; font-size: clamp(1.1rem, 1rem + .9vw, 1.4rem); line-height: 2.6; overflow-wrap: anywhere; }
.blank { display: inline-block; min-width: clamp(4rem, 34%, 8rem); min-height: 2.4em; margin: 0 .25rem; text-align: center; vertical-align: middle; border-bottom: 3px dashed var(--mute); transition: background .15s, border-color .15s; }
.blank[data-state] { border-bottom: 3px solid var(--state); }
.fix { display: block; color: var(--ok-fg); font-size: .85rem; line-height: 1.4; }
.bank { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 3.75rem; margin-top: 1rem; padding: .75rem; border: 1px dashed var(--line-hi); }
.chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 2.5rem; padding: .5rem .875rem; color: #fff; text-align: left; background: var(--c1); border: 1px solid rgba(255, 255, 255, .25); border-bottom: 3px solid rgba(0, 0, 0, .35); cursor: grab; touch-action: pan-y; user-select: none; }
.chip.flat { background: #2a2a36; }
.chip.sel { outline: 2px solid var(--fg); outline-offset: 2px; }
.chip[data-state] { color: var(--on-state); background: var(--state); }
.blank .chip { margin: 2px; }
.classify .bank { margin: 0 0 1rem; }
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--gap); }
@media (max-width: 40rem) { .buckets { grid-template-columns: 1fr; } }
.bucket { min-width: 0; background: var(--card); border: 1px solid var(--line); animation: rise .4s calc(var(--i) * 90ms) backwards; }
.bucket h3 { margin: 0; padding: .625rem .75rem; font-size: clamp(.9rem, .85rem + .3vw, 1rem); color: #fff; background: var(--col); overflow-wrap: anywhere; }
.zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; min-height: clamp(6rem, 20svh, 8.75rem); padding: .625rem; }

/* --- music: staff and keyboard --- */
.score { display: grid; justify-items: center; gap: .75rem; margin: 0 0 .75rem; padding: .75rem; background: var(--card); border: 1px solid var(--line); }
.staff { display: block; height: auto; max-width: 100%; }
.staff .line, .staff .bar { stroke: var(--mute); stroke-width: 1; }
.staff .ledger { stroke: var(--fg); stroke-width: 1.2; }
.staff .head, .staff .dot, .staff .rest { fill: var(--ink, var(--fg)); }
.staff .head.open { fill: none; stroke: var(--ink, var(--fg)); stroke-width: 1.6; }
.staff .stem { stroke: var(--ink, var(--fg)); stroke-width: 1.6; }
.staff .flag, .staff .restline { fill: none; stroke: var(--ink, var(--fg)); stroke-width: 1.8; }
.staff .sign { fill: var(--ink, var(--fg)); font-size: 22px; }
.staff .clef { fill: var(--mute); font: italic 700 40px Georgia, serif; }
.staff .meter { fill: var(--fg); font: 700 22px Georgia, serif; text-anchor: middle; }
.staff .ev[data-state] { --ink: var(--state); }
.staff .ev.ghost { opacity: .45; }
.writing { display: grid; gap: .75rem; }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.writer { display: grid; justify-items: center; gap: .5rem; padding: .75rem; overflow-x: auto; background: var(--card); border: 1px solid var(--line); cursor: crosshair; touch-action: pan-x pan-y; }
.writer .caption { margin: 0; color: var(--mute); font-size: .9rem; }
.writer .score { padding: 0; border: 0; }
.piano { --whites: 7; position: relative; display: flex; width: 100%; max-width: calc(var(--whites) * 4.3rem); height: clamp(9rem, 38vw, 12rem); margin: 0 auto; user-select: none; }
.piano button { padding: 0 0 .5rem; font: inherit; font-size: clamp(.6rem, .5rem + .5vw, .9rem); font-weight: 700; cursor: pointer; }
.wkey { display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; color: #000; background: #f4f4f6; border: 1px solid #555; border-top: 0; }
.bkey { position: absolute; top: 0; left: calc(var(--at) * 100% / var(--whites) - 31.5% / var(--whites)); z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: calc(63% / var(--whites)); height: 60%; min-width: 0; color: #fff; background: #111; border: 1px solid #000; border-top: 0; }
.piano button.on { color: #fff; background: var(--c1); }
.piano button[data-state="right"], .piano button[data-state="wrong"] { color: var(--on-state); background: var(--state); }
.piano button[data-state="missed"] { outline: 3px dashed var(--ok); outline-offset: -4px; }
.piano button[data-state="dim"] { opacity: .5; }

/* --- code challenge --- */
.codebox, .codefallback { display: grid; gap: var(--gap); min-width: 0; }
.terminal { height: clamp(15rem, 48svh, 24rem); padding: .625rem; background: var(--well); border: 1px solid var(--line); border-bottom: 4px solid var(--c1); overflow: hidden; }
.terminal .xterm { height: 100%; }
.terminal .xterm-viewport { background: transparent !important; }
.codearea { width: 100%; min-height: clamp(13rem, 42svh, 22rem); padding: .75rem; color: var(--fg); background: var(--well); border: 1px solid var(--line); border-bottom: 4px solid var(--c1); resize: vertical; }
.foldBody ol { display: grid; gap: .5rem; margin: 0; padding-left: 1.25rem; }
.foldBody small { display: block; color: var(--mute); }
.foldBody pre { margin: .125rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- web question: editors, live preview and the report --- */
.webbox { display: grid; gap: var(--gap); min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.webeditor, .webside { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.webtabs { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.webtabs button { flex: 1; min-height: var(--tap); background: var(--card); border: 0; color: var(--mute); cursor: pointer; }
.webtabs button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -3px var(--accent); }
.webfile { display: grid; gap: .25rem; min-width: 0; }
.webfile .hint { margin: 0; }
.webarea { min-height: clamp(8rem, 24svh, 14rem); tab-size: 2; white-space: pre; overflow: auto; }
/* a file the question does not ask for stays visible but smaller and dimmed */
.webarea.fixed { min-height: 5rem; max-height: 10rem; opacity: .75; }
.webpreview { background: #fff; border: 1px solid var(--line); border-bottom: 4px solid var(--c1); }
.webframe { display: block; width: 100%; height: clamp(11rem, 36svh, 20rem); border: 0; background: var(--bg); }
.webreport { grid-column: 1 / -1; display: grid; gap: .25rem; }
.webreport p { margin: 0; color: var(--state-fg); }

/* --- net question: the simulator and its report --- */
.netbox { display: grid; gap: var(--gap); min-width: 0; }
.netside { min-width: 0; border: 1px solid var(--line); border-bottom: 4px solid var(--c1); background: var(--bg); }
.netframe { display: block; width: 100%; height: clamp(24rem, calc(100svh - 14rem - var(--safe-b)), 44rem); border: 0; background: var(--bg); }
.netframe.locked { pointer-events: none; opacity: .85; }
/* the probe is laid out like the real one, only out of sight, because the simulator measures by layout */
.netprobe { position: fixed; left: -9999px; top: 0; width: 1200px; height: 800px; visibility: hidden; }

/* --- result --- */
.end { text-align: center; }
.stamp { display: inline-block; max-width: 100%; margin: 1rem 0 .5rem; padding: .875rem clamp(1.25rem, 6vw, 2.5rem); border: 5px solid; transform: rotate(-4deg); animation: stamp .7s .15s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.stamp.pass { color: var(--ok-fg); }
.stamp.fail { color: var(--bad-fg); }
.stamp small { display: block; letter-spacing: .3em; text-transform: uppercase; }
.stamp em { font-style: normal; font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); text-transform: uppercase; }
.grade { font-size: clamp(3.5rem, 16vw, 8rem); font-weight: 700; line-height: 1.1; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap: var(--gap); max-width: 36rem; margin: clamp(1rem, 4vw, 1.5rem) auto; }
.stat { display: grid; gap: .25rem; align-content: center; min-width: 0; min-height: 4.5rem; padding: clamp(.75rem, 2.4vw, 1rem); background: var(--card); border: 1px solid var(--line); animation: pop .5s calc(var(--i) * 120ms + .5s) backwards; }
.stat small { color: var(--mute); font-size: clamp(.8rem, 2.8vw, .9rem); }
.stat b { font-size: clamp(1.05rem, 1rem + 1vw, 1.5rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.actions { display: grid; gap: var(--gap); max-width: 36rem; margin: 0 auto 1.5rem; }
.actions .row .btn { flex-basis: 8rem; }
.review { display: grid; gap: .625rem; max-width: 36rem; margin: 0 auto; text-align: left; }
.review h3 { margin: 1rem 0 0; text-align: center; }
/* fixed squares so the grid reads as one block. A partial one fills from the bottom in proportion to its credit */
.pips { --pip: clamp(2.5rem, 11vw, 3.25rem); display: grid; grid-template-columns: repeat(auto-fit, var(--pip)); justify-content: center; gap: .5rem; }
.pip { display: grid; place-items: center; width: var(--pip); height: var(--pip); padding: 0; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); font-weight: 700; color: #000; background: var(--state); border: 2px solid var(--state); animation: pop .4s calc(var(--i) * 70ms + 1s) backwards; }
.pip[data-state="part"] { color: #fff; background: linear-gradient(to top, var(--c2) calc(var(--p) * 1%), #2a2410 0); text-shadow: 0 1px 2px #000; }
.pip[data-state="wrong"] { color: #fff; background: #3a1219; }
button.pip { cursor: pointer; }
button.pip:hover, button.pip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; margin: .75rem 0 0; padding: 0; color: var(--mute); font-size: .9rem; list-style: none; }
.legend li::before { content: var(--glyph); display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .4rem; font-size: .75rem; font-weight: 700; color: var(--on-state); background: var(--state); vertical-align: -.1em; }
/* the questions a finished run offers to play again, each opens its review */
.missed { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
.missed li { background: var(--card); border-left: 4px solid var(--state); }
.missed .linkbtn { display: flex; align-items: center; gap: .625rem; width: 100%; text-decoration: none; }
.missed .linkbtn::before { content: var(--glyph); flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; font-size: .8rem; font-weight: 700; color: var(--on-state); background: var(--state); }

/* --- review --- */
.reviewText { margin: 0; font-size: clamp(1.05rem, 1rem + .7vw, 1.25rem); overflow-wrap: anywhere; }
.reviewSection h4 { margin: 0 0 .375rem; color: var(--mute); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.reviewSection p { margin: 0; overflow-wrap: anywhere; }
.reviewTime { margin: 0; color: var(--mute); }
.answers { margin: 0; padding-left: 1.25rem; }
.answers li { margin: .2rem 0; overflow-wrap: anywhere; }
.pairLine { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pairLine .arrow { color: var(--mute); }
.sheet .media { margin: 0; }
.sheet .tile img { max-height: min(15rem, 40svh); }
.log { max-height: clamp(10rem, 34svh, 17.5rem); margin: 0; padding: .625rem; background: var(--well); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.filled { line-height: 1.8; overflow-wrap: anywhere; }
.groups { display: grid; gap: .625rem; }
.answerGroup { padding: .5rem .625rem; background: var(--card); border-left: 4px solid var(--c1); }
.answerGroup strong { display: block; margin-bottom: .125rem; }
.tests { display: grid; gap: .5rem; }
.test { padding: .625rem .75rem; background: var(--card); border-left: 4px solid var(--state); }
.test strong { display: block; margin-bottom: .375rem; color: var(--state-fg); }
.testRow { margin-top: .375rem; }
.testRow small { display: block; color: var(--mute); }
.test pre { margin: .125rem 0 0; padding: .375rem .5rem; background: var(--well); white-space: pre-wrap; overflow-wrap: anywhere; }
.testError { margin: .375rem 0 0; color: var(--bad-fg); }

/* --- lists, badges, tables --- */
.qlist { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.qrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line); }
.qinfo { display: grid; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.qact { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.qrow .out { flex: 1 0 100%; }
.badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.badge { padding: .125rem .5rem; font-size: .85rem; color: var(--mute); border: 1px solid var(--line); }
.panel { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.tablewrap { margin: 1rem 0; overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--line); }
.grid th { color: var(--mute); font-size: .9rem; white-space: nowrap; }
.grid tr.me td { font-weight: 700; background: var(--card); }

/* --- accounts --- */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.25rem; }
.tab { min-height: 2.5rem; padding: .5rem .875rem; font: inherit; font-weight: 700; color: var(--mute); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.mailbox { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: 1.25rem 0; padding: 0; list-style: none; font-size: 1.1rem; }
.codes li { padding: .625rem .75rem; background: var(--card); border: 1px solid var(--line); user-select: all; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 1.75em; aspect-ratio: 1; overflow: hidden; font-weight: 700; color: #000; background: var(--accent); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 5rem; font-size: 2rem; }
.person { display: inline-flex; align-items: center; gap: .5rem; }
.person .real { display: block; color: var(--mute); font-weight: 400; }
.pickRow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatch { width: var(--tap); height: var(--tap); padding: 0; background: var(--accent); border: 3px solid transparent; cursor: pointer; }
.swatch[aria-checked="true"] { border-color: var(--fg); }

/* --- marks, rows that open, glyphs --- */
.glyph { flex: none; display: inline-block; width: 1.25em; line-height: 1; text-align: center; font-style: normal; }
.quizIcon { display: inline-grid; place-items: center; flex: none; width: 2.75rem; aspect-ratio: 1; overflow: hidden; font-weight: 700; font-size: 1.15rem; line-height: 1; background: var(--raise); border: 1px solid var(--line-hi); }
.quizIcon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.quizIcon .emoji { font-size: 1.6rem; }
.card .quizIcon { color: inherit; background: color-mix(in srgb, currentColor 16%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.quizIcon.big { width: 4rem; font-size: 1.6rem; }
.qlist > li { animation: slide .3s calc(var(--i, 0) * 45ms) backwards; }
.hit { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .625rem .875rem; color: var(--fg); text-align: left; background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, transform .1s; }
.hit:hover, .hit:focus-visible { border-color: var(--accent); }
.hit:active { transform: scale(.99); }
.hit .qinfo { flex: 1 1 auto; }
.hit .tail { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .375rem; max-width: 45%; }
.person.pick { min-height: var(--tap); padding: .25rem .5rem .25rem 0; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.person.pick:hover > span:last-child, .person.pick:focus-visible > span:last-child { text-decoration: underline; text-underline-offset: .25em; }
/* the wifi glyph struck through, the mark of a control that needs the server */
.slashed { position: relative; }
.slashed::after { content: ""; position: absolute; inset: 50% 0 auto; border-top: .12em solid currentColor; transform: rotate(-45deg); }
.menuItem:disabled { opacity: .35; cursor: not-allowed; }
.badge .glyph { width: 1em; margin-right: .25rem; vertical-align: -.1em; }
.badge.hold { color: #000; font-weight: 700; background: var(--c2); border-color: var(--c2); }
.swap { animation: slide .25s backwards; }

/* the buttons of the home bar: the label goes away on a phone, the glyph stays */
.nav { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.navbtn { gap: .5rem; }
@media (max-width: 36rem) {
	.navLabel { display: none; }
}

/* --- ranking and profile --- */
.standing { display: grid; gap: .75rem; padding: .875rem 1rem; background: var(--card); border: 1px solid var(--line); }
.standingHead { display: flex; align-items: center; gap: .75rem; }
.standingHead .qinfo { flex: 1 1 auto; }
.podium { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.podium li { display: flex; align-items: center; gap: .625rem; padding: .25rem .625rem .25rem .375rem; background: var(--well); }
.podium li.me { box-shadow: inset 3px 0 var(--accent); }
.podium .score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rankNo { display: grid; place-items: center; flex: none; width: 1.75rem; aspect-ratio: 1; font-weight: 700; color: #000; background: var(--mute); }
.rankNo[data-rank="1"] { background: var(--c2); }
.rankNo[data-rank="2"] { background: #c4c4cc; }
.rankNo[data-rank="3"] { background: #b9743a; }
/* --- the end of a ranked room --- */
.winners { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.winners[data-count="1"] { grid-template-columns: 1fr; }
.winners[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.block { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.block .score { font-weight: 700; font-variant-numeric: tabular-nums; }
.block .column { display: grid; place-items: start center; width: 100%; padding-top: .5rem; background: var(--well); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .3, 1), opacity .4s; }
.block[data-place="1"] .column { height: 8rem; border-top: 4px solid var(--c2); }
.block[data-place="2"] .column { height: 5.5rem; border-top: 4px solid #c4c4cc; }
.block[data-place="3"] .column { height: 4rem; border-top: 4px solid #b9743a; }
.block[data-up="false"] .column { transform: scaleY(0); opacity: 0; }
.block[data-up="false"] > :not(.column) { visibility: hidden; }
.ranked { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.ranked li { display: flex; align-items: center; gap: .625rem; padding: .25rem .625rem .25rem .375rem; background: var(--well); }
.ranked li.me { box-shadow: inset 3px 0 var(--accent); }
.ranked .score { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .block .column { transition: none; } }

.who { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.who .title { margin: 0; }
.who .meta { display: block; }
.stats.plain { max-width: none; margin-inline: 0; }
.stats.plain .stat { animation-delay: calc(var(--i) * 70ms); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- settings --- */
.setting { display: grid; gap: .75rem; max-width: 32rem; }
.setting h3 { margin: 0; }
.emojiSample { margin: 0; font-size: 2rem; line-height: 1.3; letter-spacing: .25em; font-family: var(--emoji), sans-serif; }

/* --- courses --- */
.lessonMark { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; font-weight: 700; border: 2px solid var(--line-hi); }
.lessonMark[data-state] { color: var(--on-state); background: var(--state); border-color: var(--state); }
.courseSum { display: grid; gap: .375rem; margin-bottom: 1rem; }
.courseSum .progress { height: .5rem; margin: 0; }

/* --- point on a picture --- */
.pointPane { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; line-height: 0; border: 1px solid var(--line); touch-action: manipulation; user-select: none; }
.pointPane img { display: block; max-width: 100%; max-height: 60svh; height: auto; -webkit-user-drag: none; }
.pointPane.live { cursor: crosshair; }
.pointPane.live:focus-visible { outline: 3px solid var(--c1); outline-offset: 2px; }
.pointMarker { position: absolute; width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem; background: var(--c1); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); pointer-events: none; }
.pointMarker[data-state="right"], .pointMarker[data-state="part"], .pointMarker[data-state="wrong"], .pointMarker[data-state="skip"] { background: var(--state); }
.pointTarget { position: absolute; border: 3px dashed var(--ok); background: rgba(255, 255, 255, .12); pointer-events: none; }
.pointReview { display: grid; gap: .25rem; }

/* --- the board of a group --- */
.postBody { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- private comments --- */
.thread { display: grid; gap: .5rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.comment { padding: .5rem .75rem; background: var(--card); border: 1px solid var(--line); }
.comment[data-staff="true"] { border-left: 4px solid var(--c1); }
.commentHead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.comment p { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheetBody textarea { width: 100%; padding: .625rem .75rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); }