/* The drill engine (src/drills/engine.js). DESIGN.md: you read on a flat sheet, and you answer on an instrument beside
   it (a warm metal body, a dark dot-matrix screen, keycaps, a lamp), which prints a thermal slip at the end. The parts
   follow src/games/games.css and src/sim/desk.css but live here, so any page can load the engine on its own.
   Uses the study.css variables, so light and dark both work. Needs the Doto font for the screen. Phone first. */

.dr { --dots: "Doto", ui-monospace, monospace; --scr: #131210; --scr-dim: rgba(255, 140, 90, .55); container-type: inline-size; color: var(--ink); font-family: var(--sans); }
.dr [hidden] { display: none !important; }
.dr .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dr-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@container (min-width: 860px) {
  .dr-wrap { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); gap: 24px; }
}

/* ---------------------------------------------------------------- the sheet: flat, calm, for reading */
.dr-sheet { min-width: 0; padding: 30px 34px 30px; border-radius: var(--r-card, 22px); background: var(--card); box-shadow: var(--lift-1); }
@container (max-width: 620px) { .dr-sheet { padding: 22px 18px 22px; border-radius: 18px; } }
.dr-h { margin: 0; font: 380 30px/1.08 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; text-wrap: balance; }
@container (max-width: 620px) { .dr-h { font-size: 27px; } }
.dr-h i, .dr-done-t i { font-style: italic; }
.dr-lede { margin: 10px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.dr-body { margin-top: 18px; }
.dr-body:empty { display: none; }

/* the ruler: one notch per problem, the current one orange (no counter) */
.dr-ruler { position: relative; display: flex; justify-content: space-between; max-width: 260px; margin: 18px 0 0; }
.dr-ruler:empty { display: none; }
.dr-ruler::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; border-top: 1.5px solid var(--rule-2); }
.dr-ruler i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink-3); transition: transform .16s var(--ease), background-color .16s var(--ease); }
.dr-ruler i.here { background: var(--orange); border-color: var(--orange); transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255, 90, 31, .16); }
.dr-ruler i.right { background: var(--ink); border-color: var(--ink); }
.dr-ruler i.half { background: linear-gradient(90deg, var(--ink) 50%, var(--card) 50%); border-color: var(--ink); }
.dr-ruler i.again { border-color: var(--red); border-width: 2px; }

/* the problem */
.dr-why-chosen { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-3); }
.dr-prompt { max-width: 64ch; font-size: 17px; line-height: 1.55; font-weight: 500; outline: none; text-wrap: pretty; }
.dr-prompt p { margin: 0 0 10px; }
.dr-prompt p:last-child { margin-bottom: 0; }
.dr-prompt b { font-weight: 700; }
.dr-sheet code { font: 13.5px/1.4 var(--mono); background: var(--card-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }
@container (max-width: 620px) { .dr-prompt { font-size: 16.5px; } }

/* data beside the prompt: a table or code, flat */
.dr-tablewrap { overflow-x: auto; margin: 14px 0 0; -webkit-overflow-scrolling: touch; }
.dr-table { border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.dr-table th { padding: 6px 18px 7px 0; border-bottom: 1px solid var(--rule-2); text-align: left; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.dr-table td { padding: 7px 18px 7px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dr-table .n { text-align: right; }
.dr-table td.n { font-family: var(--mono); font-size: 13.5px; }
.dr-table tr > :last-child { padding-right: 2px; }
.dr-sheet .dr-code { margin: 14px 0 0; padding: 12px 0; border-radius: 12px; background: var(--card-2); border: 1px solid var(--rule); overflow-x: auto; font: 13.5px/1.7 var(--mono); counter-reset: ln; }
.dr-code code { display: block; background: none; border: 0; padding: 0; font: inherit; }
.dr-code span { display: block; padding-right: 16px; white-space: pre; counter-increment: ln; }
.dr-code span::before { content: counter(ln); display: inline-block; width: 2.4em; margin-right: 1em; text-align: right; color: var(--ink-3); user-select: none; }

/* hints, one at a time, flat */
.dr-hints:empty { display: none; }
.dr-hints { margin-top: 14px; }
.dr-hint { margin: 8px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--rule-2); max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); animation: dr-in .32s var(--enter); }
.dr-hint b { font-weight: 500; color: var(--ink); }

/* Pro: calm, a hairline and a link */
.dr-wall { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.dr-wall p { margin: 0; max-width: 56ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* feedback: what was checked, then the usual slip, then the worked solution */
.dr-fb { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); animation: dr-in .32s var(--enter); }
.dr-verdict { margin: 0; max-width: 64ch; font-size: 15.5px; line-height: 1.6; }
.dr-verdict strong { font-weight: 700; }
.dr-verdict strong.ok { color: var(--green); }
.dr-verdict strong.ok::before { content: "✓ "; }
.dr-note { margin: 10px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.dr-note b { font-weight: 500; color: var(--ink); }
.dr-sol { margin-top: 12px; }
.dr-sol-h { margin: 14px 0 4px; font-size: 15px; font-weight: 500; }
.dr-steps-sol, .dr-order-key { margin: 6px 0 0; padding-left: 22px; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--ink); }
.dr-steps-sol li, .dr-order-key li { margin: 3px 0; padding-left: 2px; }
.dr-steps-sol li::marker, .dr-order-key li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
details.dr-sol summary, .dr-miss summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
details.dr-sol summary::-webkit-details-marker, .dr-miss summary::-webkit-details-marker { display: none; }
details.dr-sol summary::after, .dr-miss summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .16s var(--ease); }
details.dr-sol[open] summary::after, .dr-miss[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
details.dr-sol summary:hover, .dr-miss summary:hover { color: var(--ink); }
.dr-src, .dr-back { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.dr-src a { color: var(--ink-2); border-bottom: 1px solid var(--rule-2); }
.dr-src a:hover { color: var(--ink); }

/* moves on by itself: the line fills, then the next problem comes */
.dr-go { margin-top: 10px; }
.dr-go-b { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; text-align: left; }
.dr-go-k { flex: none; font-size: 13.5px; color: var(--ink-3); transition: color .16s var(--ease); }
.dr-go-b:hover .dr-go-k { color: var(--ink); }
.dr-go-line { flex: 1; height: 3px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.dr-go-line i { display: block; height: 100%; background: var(--ink-3); transform-origin: left; animation: dr-fill linear both; }
.dr-go.is-paused .dr-go-line i { animation-play-state: paused; }
.dr-go.is-still .dr-go-b { width: auto; }
.dr-go.is-still .dr-go-line { display: none; }
.dr-go.is-still .dr-go-k { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--rule-2); }

/* the end of a session */
.dr-done { animation: dr-in .32s var(--enter); }
.dr-done-t { margin: 0; font: 380 26px/1.1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.dr-done .dr-lede { margin-top: 8px; }
.dr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; }
.dr-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 14.5px var(--sans); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .16s var(--ease); }
.dr-linkbtn:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.dr-acts .st-btn { min-height: 44px; max-width: 100%; }
.dr-acts .st-btn span { overflow: hidden; text-overflow: ellipsis; }
.dr-start { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.dr-start .st-link { font-size: 15px; color: var(--ink); }

/* where you stand: bars and words, no numbers */
.dr-stand { list-style: none; margin: 14px 0 0; padding: 0; }
.dr-stand li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 12px; padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.dr-stand li:last-child { border-bottom: 0; }
.dr-stand-t { min-width: 0; font-size: 15px; font-weight: 500; }
.dr-stand-w { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.dr-stand .is-untried .dr-stand-w { color: var(--ink-3); }
.dr-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: var(--rule); overflow: hidden; }
.dr-bar i { display: block; height: 100%; border-radius: 6px; background: var(--ink); transition: width .6s var(--ease); }

/* a speed run's bands, and what you missed */
.dr-bands { margin: 0; }
.dr-bands > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.dr-bands > div:first-child { border-top: 1px solid var(--rule); }
.dr-bands dt { font-weight: 500; font-variant-numeric: tabular-nums; }
.dr-bands dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dr-bands dd b { font-weight: 500; color: var(--ink); }
.dr-bands .is-best dt::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--orange); vertical-align: 2px; }
.dr-fine { margin: 14px 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.dr-misses { margin-top: 18px; }
.dr-miss { border-bottom: 1px solid var(--rule); }
.dr-miss summary { justify-content: space-between; color: var(--ink); font-weight: 400; }
.dr-miss summary span { margin-left: auto; font-family: var(--mono); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.dr-miss[open] { padding-bottom: 12px; }
.dr-miss .dr-sol-h { margin-top: 4px; }

/* ---------------------------------------------------------------- the instrument: what you press */
.dr-side { min-width: 0; }
.dr-inst {
  padding: 12px 12px 14px; border-radius: 18px;
  background: linear-gradient(170deg, #E4E1DA 0%, #D6D2CA 55%, #CBC7BE 100%);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 0 0 1px rgba(60, 48, 30, .12);
  scroll-margin-top: 10px;
}
.dr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dr-grill { flex: none; width: 46px; height: 28px; border-radius: 6px; background-image: radial-gradient(circle, rgba(40, 34, 26, .55) 1.6px, transparent 2px); background-size: 7px 7px; opacity: .65; }
.dr-id { min-width: 0; line-height: 1.1; }
.dr-id b { display: block; font: 700 12px var(--sans); letter-spacing: .3em; color: #4A463F; }
.dr-id small { display: block; margin-top: 3px; font-size: 11.5px; color: #7A756C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-lamp { flex: none; position: relative; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #CFCAC1, #B5B0A6); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .6); }
.dr-lamp i { position: absolute; inset: 8px; border-radius: 50%; background: #6E665A; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.dr-lamp.pass i { background: #23885A; box-shadow: 0 0 14px rgba(35, 136, 90, .85), 0 0 30px rgba(35, 136, 90, .35); }
.dr-lamp.half i { background: #FF6A2B; box-shadow: 0 0 12px rgba(255, 90, 31, .7); }
.dr-lamp.fail i { background: #D23F2A; box-shadow: 0 0 10px rgba(210, 63, 42, .6); }

/* the dot-matrix screen */
.dr-screen {
  position: relative; overflow: hidden; min-height: 92px; padding: 9px 12px 9px; border-radius: 10px;
  background-color: var(--scr); background-image: radial-gradient(rgba(255, 255, 255, .035) .8px, transparent 1.1px); background-size: 4px 4px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .55);
}
.dr-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(255, 255, 255, .02) 2px 3px); }
.dr-screen.is-small { min-height: 0; }
.dr-sline { display: flex; justify-content: space-between; gap: 10px; font: 11.5px/1.35 var(--mono); color: var(--scr-dim); font-variant-numeric: tabular-nums; }
.dr-sline b { font: 800 18px var(--dots); color: #FF5A1F; text-shadow: 0 0 6px rgba(255, 90, 31, .45); margin-left: 4px; vertical-align: -2px; }
.dr-screen .ok { color: #5FD69A; text-shadow: 0 0 6px rgba(95, 214, 154, .45); }
.dr-screen .no { color: #FF7A62; text-shadow: 0 0 6px rgba(255, 106, 90, .4); }
.dr-entry { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; cursor: text; }
.dr-in { flex: 1; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: none; -webkit-appearance: none; appearance: none;
  font: 800 34px/1.2 var(--dots); color: #FF5A1F; text-shadow: 0 0 6px rgba(255, 90, 31, .45); caret-color: #FF5A1F; }
.dr-in::placeholder { color: rgba(255, 90, 31, .28); text-shadow: none; }
.dr-in.dr-tin { font: 500 19px/1.4 var(--mono); padding: 4px 0; }
.dr-in.dr-tin::placeholder { font-size: 15px; }
.dr-unit { flex: none; font: 12.5px var(--mono); color: var(--scr-dim); }
.dr-sub { min-height: 18px; margin-top: 2px; font: 12px/1.45 var(--mono); color: var(--scr-dim); overflow-wrap: anywhere; }
.dr-big { margin: 14px 0 2px; text-align: center; font: 800 38px/1.1 var(--dots); color: #FF5A1F; text-shadow: 0 0 8px rgba(255, 90, 31, .5); }
.dr-big.is-score { font-size: 54px; }
.is-intro .dr-sub { text-align: center; }
.dr-screen:focus-within { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 90, 31, .35), 0 1px 0 rgba(255, 255, 255, .55); }

/* a speed run: clock and score on top, the problem in the middle, your answer below */
.dr-clock { font-size: 12px; }
.dr-clock b { font-size: 20px; }
.dr-sprompt { margin: 10px 0 2px; font: 500 21px/1.35 var(--sans); color: #F3ECE0; overflow-wrap: anywhere; }
.dr-sprompt code { font: 17px var(--mono); }
.dr-sdata { margin-top: 6px; color: #E9E2D6; }
.dr-sdata .dr-table th, .dr-sdata .dr-table td { padding: 3px 12px 3px 0; border-color: rgba(255, 255, 255, .1); color: #E9E2D6; font-size: 13px; }
.dr-sdata .dr-code { margin: 0; background: none; border: 0; padding: 0; color: #E9E2D6; font-size: 12.5px; }

/* tap a line: code or log lines on the screen */
.dr-screen.is-lines { padding: 6px 4px; }
.dr-lines { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; }
.dr-line { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 9px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  color: #E9E2D6; font: 12.5px/1.5 var(--mono); -webkit-tap-highlight-color: transparent; transition: background-color .12s var(--ease); }
.dr-line .n { flex: none; width: 1.7em; text-align: right; color: rgba(255, 140, 90, .45); }
.dr-line code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.dr-line:hover { background: rgba(255, 255, 255, .05); }
.dr-line[aria-pressed="true"] { background: rgba(255, 90, 31, .16); box-shadow: inset 2px 0 0 #FF5A1F; color: #FFE1D2; }
.dr-line[aria-pressed="true"] .n { color: #FF7A45; }
.dr-line.right { background: rgba(95, 214, 154, .14); box-shadow: inset 2px 0 0 #5FD69A; color: #D9F5E6; }
.dr-line.wrong { background: rgba(255, 106, 90, .14); box-shadow: inset 2px 0 0 #FF6A5A; }
.dr-line:disabled { cursor: default; }
@media (pointer: coarse) { .dr-line { min-height: 44px; } }

/* keys (the workshop's keycaps) */
.dr-pad:empty { display: none; }
.dr-key {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 12px;
  border: 0; border-radius: 9px; font: 500 15px/1.2 var(--sans); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums; transition: transform .09s var(--ease), box-shadow .14s var(--ease), filter .16s var(--ease), opacity .16s var(--ease);
}
.dr-key:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dr-key:active { transform: translateY(2px); }
.dr-key.light {
  background: linear-gradient(#F7F5F0, #E9E6DF); color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14);
}
.dr-key.light:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), inset 0 1px 2px rgba(0, 0, 0, .08); background: linear-gradient(#ECE9E2, #E4E0D8); }
.dr-key.dark {
  color: #F6F3EC; background: linear-gradient(#3A3936, #262523);
  box-shadow: inset 0 -3px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .12);
}
.dr-key.dark:hover { filter: brightness(1.08); }
.dr-key.dark:active { box-shadow: inset 0 -1px 0 #171614, inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(0, 0, 0, .2); }
.dr-key .led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 6px rgba(255, 90, 31, .7); }
.dr-key kbd { font: 11px var(--mono); opacity: .5; }
.dr-key:disabled { cursor: default; transform: none; }
.dr-key.light:disabled:not(.right):not(.wrong) { opacity: .5; }
.dr-key.nudge { animation: dr-nudge .36s var(--ease); }
.dr-key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .dr-key kbd { display: none; } }

/* the keypad: numbers, a minus, a fraction bar or k / M / B / T for estimates */
.dr-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.dr-keypad .dr-key { padding: 0; font-size: 20px; }
.dr-keypad .dr-key.fn { font-size: 17px; color: #5E5850; }
.dr-keypad .span2 { grid-column: span 2; }
.dr-keypad .span3 { grid-column: span 3; }

/* the keys under the pad: hint, show me, check */
.dr-row { display: flex; gap: 8px; margin-top: 10px; }
.dr-row:empty { display: none; }
.dr-row .dr-key.light { flex: none; padding: 0 16px; font-size: 14.5px; }
.dr-row .dr-key:disabled { opacity: .55; }
.dr-row .dr-key.wide { flex: 1; min-width: 0; font-size: 15px; }
.dr-row.no-check .dr-key.light { flex: 1; }

/* choice keys */
.dr-choices { display: grid; gap: 8px; margin-top: 12px; }
.dr-choice { justify-content: flex-start; gap: 12px; min-height: 52px; padding: 10px 12px; text-align: left; font-size: 15px; line-height: 1.35; }
.dr-letter { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(29, 28, 26, .07); color: #4A463F; font: 700 12.5px var(--sans); }
.dr-ctext { min-width: 0; }
.dr-ctext code { font: 13px var(--mono); }
.dr-choice.right { box-shadow: inset 0 0 0 2px #23885A, inset 0 -3px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(60, 48, 30, .14); }
.dr-choice.right .dr-letter { background: #23885A; color: #fff; }
.dr-choice.wrong { box-shadow: inset 0 0 0 2px #D23F2A, inset 0 -3px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(60, 48, 30, .14); }
.dr-choice.wrong .dr-letter { background: #D23F2A; color: #fff; }

/* order the steps: drag, or tap one then tap where it goes */
.dr-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: st; }
.dr-step {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 4px 6px 12px; border-radius: 9px; counter-increment: st;
  background: linear-gradient(#F7F5F0, #E9E6DF); color: var(--ink); font-size: 15px; line-height: 1.35; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(60, 48, 30, .14);
  transition: box-shadow .14s var(--ease), background-color .14s var(--ease);
}
.dr-step::before { content: counter(st); flex: none; width: 20px; font: 700 12.5px var(--sans); color: #8F887C; font-variant-numeric: tabular-nums; }
.dr-step-t { flex: 1; min-width: 0; padding: 4px 0; }
.dr-step-t code { font: 13px var(--mono); }
.dr-grip { flex: none; display: grid; place-items: center; width: 40px; height: 44px; color: #8F887C; cursor: grab; touch-action: none; }
.dr-grip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dr-step:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dr-step.picked { box-shadow: inset 0 0 0 2px #FF5A1F, inset 0 -3px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(60, 48, 30, .14); }
.dr-step.is-drag { z-index: 3; cursor: grabbing; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 8px 18px rgba(60, 48, 30, .22); transition: none; }
.dr-step.right::before { content: "✓"; color: #23885A; }
.dr-step.wrong { box-shadow: inset 0 0 0 1.5px rgba(210, 63, 42, .7), inset 0 -3px 0 rgba(0, 0, 0, .1); }
.dr-step.wrong::before { color: #D23F2A; }
.dr-step.right, .dr-step.wrong { cursor: default; }

/* ---------------------------------------------------------------- the printer: a slot, and the slip that comes out */
.dr-out:empty { display: none; }
.dr-print { position: relative; margin-top: -4px; }
.dr-slot { display: block; height: 10px; margin: 0 14px; border-radius: 6px; background: #2A2826; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .5); }
.dr-slipwrap { overflow: hidden; margin-top: -5px; padding: 0 22px 18px; }
.dr-slip {
  position: relative; padding: 24px 18px 28px; background: #FFFEFA; color: #2A2723;
  font: 12px/1.55 var(--mono); letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(40, 30, 20, .10), 0 8px 18px rgba(40, 30, 20, .10);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 7px repeat-x;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .05), transparent 18px);
}
.dr-print.is-new .dr-slip { animation: dr-print 1.6s steps(18, end) both; }
.dr-slip .sl-top { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: #6E685E; }
.dr-slip .sl-k { margin-top: 8px; font-size: 10.5px; letter-spacing: .16em; color: #6E685E; }
.dr-slip .sl-rule { height: 0; margin: 12px 0; border-top: 1.5px dashed rgba(42, 39, 35, .35); }
.dr-slip .sl-row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.dr-slip .sl-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-slip .sl-row span:last-child { flex: none; }
.dr-slip .sl-row i { flex: 1; min-width: 14px; border-bottom: 1.5px dotted rgba(42, 39, 35, .4); transform: translateY(-3px); }
.dr-slip .sl-part { margin: 2px 0 8px; font: 800 40px/1.1 var(--dots); color: #1D1C1A; }
.dr-slip .sl-lamps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.dr-slip .sl-lamps b { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid #2A2723; }
.dr-slip .sl-lamps b.on { background: #2A2723; }
.dr-slip .sl-lamps b.half { background: linear-gradient(90deg, #2A2723 50%, transparent 50%); }
.dr-slip .sl-lamps span { margin-left: 6px; }
.dr-slip .sl-now { margin: 0; font: 13px/1.55 var(--sans); letter-spacing: 0; color: #3A3732; }

/* ---------------------------------------------------------------- dark */
[data-theme="dark"] .dr-inst { background: linear-gradient(170deg, #3B3935 0%, #33312D 55%, #2C2A27 100%); box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .4); }
[data-theme="dark"] .dr-id b { color: #CFC9BE; }
[data-theme="dark"] .dr-id small { color: #9A9387; }
[data-theme="dark"] .dr-grill { background-image: radial-gradient(circle, rgba(0, 0, 0, .7) 1.6px, transparent 2px); }
[data-theme="dark"] .dr-lamp { background: radial-gradient(circle at 50% 40%, #4A4743, #3A3733); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06); }
[data-theme="dark"] .dr-screen { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06); }
[data-theme="dark"] .dr-key.light, [data-theme="dark"] .dr-step { background: linear-gradient(#4A4743, #3D3A36); color: #EDE8DF; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .3); }
[data-theme="dark"] .dr-key.light:active { background: linear-gradient(#3F3C38, #35322F); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 1px 2px rgba(0, 0, 0, .2); }
[data-theme="dark"] .dr-keypad .dr-key.fn { color: #B9B2A6; }
[data-theme="dark"] .dr-letter { background: rgba(255, 255, 255, .08); color: #CFC9BE; }
[data-theme="dark"] .dr-step::before, [data-theme="dark"] .dr-grip { color: #9A9387; }
[data-theme="dark"] .dr-step.picked { box-shadow: inset 0 0 0 2px #FF5A1F, inset 0 -3px 0 rgba(0, 0, 0, .35); }
[data-theme="dark"] .dr-step.right::before { color: #5FD69A; }
[data-theme="dark"] .dr-choice.right { box-shadow: inset 0 0 0 2px #4CC08A, inset 0 -3px 0 rgba(0, 0, 0, .35); }
[data-theme="dark"] .dr-choice.wrong, [data-theme="dark"] .dr-step.wrong { box-shadow: inset 0 0 0 2px #F07563, inset 0 -3px 0 rgba(0, 0, 0, .35); }
[data-theme="dark"] .dr-slot { background: #050504; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(238, 235, 228, .14); }
[data-theme="dark"] .dr-key.dark { background: linear-gradient(#24231F, #171614); box-shadow: inset 0 -3px 0 #0B0A09, inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .4); }

/* ---------------------------------------------------------------- phones */
@container (max-width: 520px) {
  .dr-inst { padding: 10px 10px 12px; border-radius: 16px; }
  .dr-keypad { gap: 7px; margin-top: 10px; }
  .dr-keypad .dr-key { min-height: 50px; }
  .dr-in { font-size: 31px; }
  .dr-sprompt { font-size: 19px; }
  .dr-bands > div { grid-template-columns: 78px minmax(0, 1fr); }
}
/* A speed run on a narrow screen: the instrument comes to the top and the sheet waits. */
@container (max-width: 859px) {
  .dr.is-running .dr-sheet { display: none; }
}

@keyframes dr-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dr-print { from { transform: translateY(-101%); } }
@keyframes dr-nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .dr *, .dr *::before, .dr *::after { animation: none !important; transition: none !important; }
}


/* ---------------------------------------------------------------- v4 (2026-11-03): one column, no calculator
   The sheet is a column: the question, then the answer row (a dark readout with the main key beside it), then
   choices or chips, then quiet links, then hints and feedback. .dr-body and .dr-row dissolve (display: contents)
   so their parts can be placed without moving anything in the DOM. */
.dr4 .dr-wrap { display: block; max-width: 800px; margin: 0 auto; }
.dr4 .dr-sheet { display: flex; flex-direction: column; padding: 40px 48px 36px; border-radius: 28px; }
.dr4 .dr-head { order: -3; }
.dr4 .dr-ruler { order: -2; display: flex; justify-content: flex-start; gap: 6px; max-width: none; margin: 16px 0 0; }
.dr4 .dr-ruler::before { display: none; }
.dr4 .dr-ruler i { width: 26px; height: 4px; border: 0; border-radius: 4px; background: var(--rule-2, var(--rule)); transform: none; box-shadow: none; }
.dr4 .dr-ruler i.here { background: var(--orange); transform: none; box-shadow: none; }
.dr4 .dr-ruler i.right { background: var(--ink); }
.dr4 .dr-ruler i.half { background: linear-gradient(90deg, var(--ink) 50%, var(--rule-2, var(--rule)) 50%); }
.dr4 .dr-ruler i.again { background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange); }
.dr4 .dr-body { display: contents; }
.dr4 .dr-prompt { order: 0; margin-top: 22px; font-size: 21px; line-height: 1.55; }
.dr4 .dr-side { order: 1; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.dr4 .dr-hints, .dr4 .dr-fb, .dr4 .dr-go, .dr4 .dr-wall { order: 2; }
.dr4 .dr-out { margin-top: 16px; }
/* The answer area: no device chrome. */
.dr4 .dr-inst { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: stretch; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dr4 .dr-top { display: none; }
.dr4 .dr-screen { grid-column: 1 / 4; grid-row: 1; min-height: 70px; padding: 10px 20px 10px; border-radius: 16px; background: radial-gradient(120% 140% at 30% 0%, #23211e, #121110); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .5); }
.dr4 .dr-screen:empty { display: none; }
.dr4 .dr-screen.is-small { display: none; }
.dr4[data-mode="speed"] .dr-screen.is-small { display: block; }
.dr4 .dr-sline { font-size: 11px; }
.dr4 .dr-entry { margin-top: 2px; }
.dr4 .dr-in { font-size: 32px; }
.dr4 .dr-screen.is-intro { display: flex; flex-direction: column; justify-content: center; }
.dr4 .dr-big { margin: 2px 0 0; font-size: 30px; }
.dr4 .dr-big.is-score { font-size: 40px; }
.dr4 .dr-pad { grid-column: 1 / -1; grid-row: 2; }
.dr4 .dr-pad:empty { display: none; }
.dr4 .dr-row { display: contents; }
.dr4 .dr-row > .dr-key.dark { grid-column: 4; grid-row: 1; height: auto; min-height: 70px; min-width: 132px; padding: 0 26px; border-radius: 16px; font-size: 16.5px; }
.dr4 .dr-row.no-check > .dr-key.dark { grid-column: 4; }
.dr4 .dr-row > .dr-key.light { grid-row: 3; height: auto; min-height: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; color: var(--ink-2); font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--rule-2, var(--rule)); text-underline-offset: 5px; }
.dr4 .dr-row > .dr-key.light:nth-child(1) { grid-column: 1; }
.dr4 .dr-row > .dr-key.light:nth-child(2) { grid-column: 2; }
.dr4 .dr-row > .dr-key.light:hover { color: var(--ink); }
.dr4 .dr-row > .dr-key.light:disabled { opacity: .4; text-decoration: none; }
/* When there is no readout (choices), the main key sits on the first free row. */
.dr4 .dr-screen.is-small ~ .dr-row > .dr-key.dark { grid-row: 2; }
/* No calculator. Touch screens keep only the keys the phone's number pad lacks. */
.dr4 .dr-keypad { display: none; }
@media (hover: none) and (pointer: coarse) {
  .dr4 .dr-keypad { display: flex; flex-wrap: wrap; gap: 8px; }
  .dr4 .dr-keypad .dr-key { display: none; }
  .dr4 .dr-keypad .dr-key.fn:not([data-k="del"]):not([data-k="clear"]) { display: inline-flex; width: auto; height: 38px; min-width: 46px; padding: 0 14px; border-radius: 10px; font-size: 15px; }
}
/* Choices: full-width rows with a letter. */
.dr4 .dr-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dr4 .dr-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; height: auto; min-height: 56px; padding: 12px 16px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)); text-align: left; font-size: 16.5px; line-height: 1.45; }
.dr4 .dr-choice:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--ink); transform: none; }
.dr4 .dr-choice .dr-letter { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 600 13px var(--mono); box-shadow: inset 0 0 0 1.5px var(--ink-3); background: none; color: var(--ink-2); }
/* Speed runs keep their dark panel: the clock, the score and the problem live in it. */
.dr4[data-mode="speed"] .dr-screen { min-height: 120px; padding: 16px 22px; }
@media (max-width: 640px) {
  .dr4 .dr-sheet { padding: 24px 20px 22px; border-radius: 22px; }
  .dr4 .dr-prompt { font-size: 18px; margin-top: 16px; }
  .dr4 .dr-inst { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; }
  .dr4 .dr-row > .dr-key.dark { min-width: 0; padding: 0 18px; min-height: 60px; }
  .dr4 .dr-row > .dr-key.dark kbd { display: none; }
  .dr4 .dr-screen { min-height: 60px; padding: 8px 14px; }
  .dr4 .dr-in { font-size: 26px; }
  /* The answer row stays in reach while a long question scrolls. */
  .dr4[data-mode="drill"] .dr-side, .dr4[data-mode="placement"] .dr-side, .dr4[data-mode="set"] .dr-side { position: sticky; bottom: 0; z-index: 3; margin: 22px -20px -22px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); }
}
/* Phones: pages with the floating bottom bar keep the answer row above it. */
@media (max-width: 640px) { .st-shell .dr4[data-mode="drill"] .dr-side, .st-shell .dr4[data-mode="placement"] .dr-side, .st-shell .dr4[data-mode="set"] .dr-side { bottom: calc(86px + env(safe-area-inset-bottom)); } }
/* v4: the main key sits beside a one-line readout only. Under tall screens (a trace to tap, text, a speed run's
   problem) and on phones it runs full width underneath, with the quiet links below it. */
.dr4 .dr-screen.is-lines ~ .dr-row > .dr-key.dark,
.dr4 .dr-screen.is-text ~ .dr-row > .dr-key.dark,
.dr4[data-mode="speed"] .dr-screen.is-entry ~ .dr-row > .dr-key.dark { grid-column: 1 / -1; grid-row: 3; min-height: 56px; }
.dr4 .dr-screen.is-lines ~ .dr-row > .dr-key.light,
.dr4 .dr-screen.is-text ~ .dr-row > .dr-key.light,
.dr4[data-mode="speed"] .dr-screen.is-entry ~ .dr-row > .dr-key.light { grid-row: 4; }
.dr4 .dr-screen.is-lines, .dr4 .dr-screen.is-text { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .dr4 .dr-screen { grid-column: 1 / -1; }
  .dr4 .dr-row > .dr-key.dark { grid-column: 1 / -1 !important; grid-row: 3 !important; min-height: 54px; }
  .dr4 .dr-row > .dr-key.light { grid-row: 4 !important; }
}

/* ---------------------------------------------------------------- v5 speed runs: a drawn scale, the clock in the readout */
.dr4 .dr-scale { order: 0; margin-top: 26px; }
.dr4 .dr-sc-bar { position: relative; height: 10px; border-radius: 6px; background: var(--rule); overflow: visible; }
.dr4 .dr-sc-bar > i { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--card); }
.dr4 .dr-sc-bar > i:nth-child(1) { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 6px 0 0 6px; }
.dr4 .dr-sc-bar > i:nth-child(2) { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.dr4 .dr-sc-bar > i:nth-child(3) { background: color-mix(in srgb, var(--ink) 65%, transparent); }
.dr4 .dr-sc-bar > i:nth-child(4) { background: var(--orange); border-right: 0; border-radius: 0 6px 6px 0; }
.dr4 .dr-sc-best { position: absolute; top: -9px; bottom: -9px; width: 2px; margin-left: -1px; background: var(--ink); }
.dr4 .dr-sc-best em { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 11px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.dr4 .dr-sc-labels { position: relative; height: 46px; margin-top: 12px; }
.dr4 .dr-sc-seg { position: absolute; top: 0; padding-right: 10px; }
.dr4 .dr-sc-seg b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr4 .dr-sc-seg span { display: block; margin-top: 2px; font: 12px var(--mono); color: var(--ink-3); }
.dr4[data-mode="speed"] .dr-scale + .dr-fine, .dr4 .dr-bands { display: none; }
/* The run: the readout is a single line (clock and score above the answer), and the main key sits beside it. */
.dr4[data-mode="speed"] .dr-screen { min-height: 84px; padding: 10px 20px 10px; }
.dr4[data-mode="speed"] .dr-screen.is-entry ~ .dr-row > .dr-key.dark { grid-column: 4; grid-row: 1; min-height: 84px; }
.dr4[data-mode="speed"] .dr-screen.is-entry ~ .dr-row > .dr-key.light { grid-row: 3; }
.dr4[data-mode="speed"] .dr-clock { display: flex; justify-content: space-between; font-size: 11px; }
.dr4[data-mode="speed"] .dr-clock b { font-size: 18px; }
@media (max-width: 640px) {
  .dr4 .dr-sc-seg span { display: none; } .dr4 .dr-sc-labels { height: 40px; }
  .dr4 .dr-sc-seg b { font-size: 12px; white-space: normal; line-height: 1.2; }
}

/* ---------------------------------------------------------------- v6 (2026-11-03): a clean answer field, a real Next
   The answer is a form field (a caption above, plain digits, the unit in grey), with a normal Check button beside it.
   Right and wrong show on the field's border (from the engine's lamp). Speed runs keep their clock in the caption. */
.dr4 .dr-screen.is-entry { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dr4 .dr-screen.is-entry .dr-sline { display: flex; justify-content: space-between; padding: 0 2px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dr4 .dr-screen.is-entry .dr-sline b { color: var(--ink); text-shadow: none; font: 600 15px var(--mono); letter-spacing: .02em; }
.dr4 .dr-entry { display: flex; align-items: center; gap: 12px; height: 60px; margin: 0; padding: 0 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)); transition: box-shadow .2s var(--ease); }
.dr4 .dr-entry:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.dr4 .dr-in { font: 500 24px/1 var(--sans); color: var(--ink); text-shadow: none; caret-color: var(--orange); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dr4 .dr-in::placeholder { color: var(--ink-3); font-size: 17px; font-weight: 400; text-shadow: none; }
.dr4 .dr-unit { font: 15px var(--sans); color: var(--ink-3); }
.dr4 .dr-screen.is-entry .dr-sub { min-height: 0; padding: 0 2px; font: 13px var(--sans); color: var(--ink-2); }
.dr4 .dr-screen.is-entry .dr-sub:empty { display: none; }
.dr4 .dr-inst:has(.dr-lamp.pass) .dr-entry { box-shadow: inset 0 0 0 2px var(--green); }
.dr4 .dr-inst:has(.dr-lamp.half) .dr-entry { box-shadow: inset 0 0 0 2px var(--orange); }
.dr4 .dr-inst:has(.dr-lamp.fail) .dr-entry { box-shadow: inset 0 0 0 2px var(--red); }
/* The main key: a normal button, the field's height, aligned with the field (not the caption). */
.dr4 .dr-row > .dr-key.dark { align-self: end; min-height: 60px; height: 60px; min-width: 120px; padding: 0 24px; border-radius: 14px; font: 500 16px var(--sans); background: var(--ink); color: var(--card); box-shadow: none; }
.dr4 .dr-row > .dr-key.dark .led { display: none; }
.dr4 .dr-row > .dr-key.dark kbd { opacity: .5; }
.dr4 .dr-row > .dr-key.dark:disabled { opacity: .35; }
.dr4 .dr-screen.is-intro ~ .dr-row > .dr-key.dark { align-self: stretch; height: auto; }
.dr4[data-mode="speed"] .dr-screen.is-entry { min-height: 0; padding: 0; }
.dr4[data-mode="speed"] .dr-screen.is-entry ~ .dr-row > .dr-key.dark { min-height: 60px; }
/* After an answer: the reasoning, then a real Next button that fills as it moves on by itself. */
.dr4 .dr-back { display: none; }
.dr4 .dr-go { display: flex; justify-content: flex-end; margin-top: 22px; }
.dr4 .dr-go-b { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 180px; height: 52px; padding: 0 26px; overflow: hidden; border-radius: 14px; background: var(--ink); color: var(--card); }
.dr4 .dr-go-k { position: relative; z-index: 1; font: 500 15.5px var(--sans); color: var(--card); }
.dr4 .dr-go-b:hover .dr-go-k { color: var(--card); }
.dr4 .dr-go-line { position: absolute; inset: 0; height: auto; border-radius: 0; background: none; }
.dr4 .dr-go-line i { height: 100%; background: color-mix(in srgb, var(--card) 16%, transparent); }
/* Phones: no chips; the keyboard does it. */
@media (hover: none) and (pointer: coarse) { .dr4 .dr-keypad { display: none !important; } }
@media (max-width: 640px) {
  .dr4 .dr-row > .dr-key.dark { height: 54px; min-height: 54px; }
  .dr4 .dr-go-b { width: 100%; }
}

/* ---------------------------------------------------------------- v6 speed runs with choices, and choices in both themes */
.dr4[data-mode="speed"] .dr-screen.is-small { display: flex; align-items: center; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dr4[data-mode="speed"] .dr-screen.is-small::before { display: none; }
.dr4[data-mode="speed"] .dr-screen .dr-sline { flex: 1; display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dr4[data-mode="speed"] .dr-screen .dr-sline b { margin-left: 8px; color: var(--ink); font: 600 20px var(--mono); letter-spacing: 0; text-shadow: none; }
.dr4[data-mode="speed"] .dr-prompt { margin-top: 26px; font: 400 34px/1.3 var(--sans); letter-spacing: -.015em; }
.dr4 .dr-choice.dr-key, [data-theme="dark"] .dr4 .dr-choice.dr-key { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)); }
.dr4 .dr-choice.dr-key:hover:not(:disabled), [data-theme="dark"] .dr4 .dr-choice.dr-key:hover:not(:disabled) { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dr4 .dr-choice .dr-letter, [data-theme="dark"] .dr4 .dr-choice .dr-letter { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1.2px var(--rule-2, var(--rule)); }
.dr4[data-mode="speed"] .dr-choices { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dr4[data-mode="speed"] .dr-choice { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 8px; min-height: 96px; padding: 14px 10px; text-align: center; font: 500 24px var(--sans); font-variant-numeric: tabular-nums; }
.dr4[data-mode="speed"] .dr-choice .dr-letter { width: auto; height: auto; padding: 0; box-shadow: none; font-size: 11px; letter-spacing: .12em; }
@media (max-width: 640px) {
  .dr4[data-mode="speed"] .dr-prompt { font-size: 28px; }
  .dr4[data-mode="speed"] .dr-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr4[data-mode="speed"] .dr-choice { min-height: 76px; font-size: 21px; }
}

/* ---------------------------------------------------------------- v8 (user, 2026-11-04: "not liking the side by side,
   make it below"): back to one column, the question then the answer underneath, but wider than before (920px) so a
   question with a table or code scrolls less. Reorder questions: Check is a full-width key under the list. */
.dr4 .dr-wrap { max-width: 920px; }
.dr4 .dr-sheet { padding: 44px 56px 40px; }
.dr4 .dr-screen.is-small ~ .dr-pad:not(:empty) ~ .dr-row > .dr-key.dark { grid-column: 1 / -1; grid-row: 3; min-height: 56px; }
.dr4 .dr-screen.is-small ~ .dr-pad:not(:empty) ~ .dr-row > .dr-key.light { grid-row: 4; }
@media (max-width: 640px) { .dr4 .dr-sheet { padding: 24px 20px 22px; } }

/* ---------------------------------------------------------------- Pro card (2026-11-03): what the tap would have
   opened (its folder on its tint), one line on what Pro adds, the way to the plans. A window over the page, a
   sheet from the bottom on phones, or drawn in place (.is-inline). */
.pro-veil { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(20, 19, 17, .44); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s var(--ease); }
.pro-veil[hidden] { display: none; }
.pro-veil.in { opacity: 1; }
.pro-card { position: relative; width: min(440px, 100%); overflow: hidden; border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 30px 80px rgba(0, 0, 0, .28); transform: translateY(12px) scale(.98); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.pro-veil.in .pro-card { transform: none; }
.pro-x { position: absolute; right: 14px; top: 14px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(252, 251, 248, .7); color: #1D1C1A; cursor: pointer; }
.pro-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pro-art { display: grid; place-items: center; height: 200px; padding-top: 10px; background: var(--tint); }
.pro-art .st-folder { height: 164px; transform: rotate(-4deg); filter: drop-shadow(0 14px 16px rgba(60, 48, 30, .2)); }
.pro-body { padding: 26px 30px 26px; }
.pro-k { margin: 0; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pro-h { margin: 8px 0 0; font: 380 34px/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.pro-h i { font-style: italic; }
.pro-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pro-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.pro-go { height: 50px; padding: 0 24px; border-radius: 14px; font-size: 15.5px; }
.pro-later { padding: 4px 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 15px; text-decoration: underline; text-decoration-color: var(--rule-2, var(--rule)); text-underline-offset: 5px; cursor: pointer; }
.pro-later:hover { color: var(--ink); }
.pro-fine { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); }
.pro-fine a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2, var(--rule)); text-underline-offset: 4px; }
/* In place: a wide card, the folder beside the words. */
.pro-card.is-inline { width: 100%; max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 28px; box-shadow: none; transform: none; }
.pro-card.is-inline .pro-art { height: auto; min-height: 280px; }
.pro-card.is-inline:not(:has(.pro-art)) { grid-template-columns: 1fr; max-width: 640px; }
.pro-card.is-inline .pro-body { align-self: center; padding: 40px 44px; }
@media (max-width: 640px) {
  .pro-veil { place-items: end center; padding: 0; }
  .pro-card { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(30px); }
  .pro-art { height: 170px; } .pro-art .st-folder { height: 140px; }
  .pro-body { padding: 22px 22px 24px; }
  .pro-h { font-size: 29px; }
  .pro-go { flex: 1; }
  .pro-card.is-inline { grid-template-columns: 1fr; border-radius: 22px; }
  .pro-card.is-inline .pro-art { min-height: 170px; }
  .pro-card.is-inline .pro-body { padding: 24px 22px; }
}

/* Free users start every key now (2026-11-05): the cut comes inside the session, after a few problems, so keys
   no longer wear a lock. The cut: the next problem, fading out, above an inline Pro card. */
.dr-cut { display: grid; gap: 14px; }
.dr-cut { margin-top: 18px; }
.dr-cut-k { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
/* While the cut shows, the instrument below it has nothing to say: hide it. A card with no folder drawing is one column. */
.dr4:has(.dr-cut) .dr-inst { display: none; }
.pro-card.is-inline:not(:has(.pro-art)) { grid-template-columns: 1fr; max-width: 640px; }
.dr-cut-q { position: relative; max-height: 150px; overflow: hidden; color: var(--ink-2); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.dr-cut-q p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.dr-cut .pro-card.is-inline { margin-top: -6px; }
.dr-cut .dr-acts { margin-top: 2px; }
.pro-card:focus { outline: none; }

/* Code shows every character as typed (2026-11-04): the mono font's ligatures drew "<=" as one "≤" glyph, which hides
   the very characters a "spot the bug" question asks you to read. */
.dr pre, .dr code, .dr-code, .dr-lines, .dr-line, .dr-trace { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---------------------------------------------------------------- v9 (user, 2026-11-05: "the ui has a problem")
   After an answer the sheet has one state: the field is read-only, Check, Hint and Show me leave, and the answer is
   written once (in the verdict). "Show me" fills the field with the answer on a neutral border, not a red miss.
   Captions are plain sentence case. The Next key's countdown is a thin line along its foot, not a block. */
.dr4 .dr-screen.is-entry .dr-sline { font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.dr4.is-after .dr-row { display: none; }
.dr4.is-after .dr-hints:empty { display: none; }
.dr4 .dr-inst:has(.dr-lamp.shown) .dr-entry { box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)); }
.dr4.is-shown .dr-in { color: var(--ink-2); }
.dr4.is-after .dr-in { cursor: default; }
.dr4 .dr-go-line { inset: auto 0 0 0; height: 3px; }
.dr4 .dr-go-line i { background: color-mix(in srgb, var(--card) 55%, transparent); }
.dr4 .dr-go-k::after { content: " →"; }
/* v9 starter questions: the explanation is the point, so it's always open, as plain paragraphs. */
.dr4 .dr-explain { margin-top: 12px; }
.dr4 .dr-explain p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
/* v9: after an answer, the right choice shows green and a wrong pick red again (the v6 choice style hid them). */
.dr4 .dr-choice.dr-key.right { box-shadow: inset 0 0 0 2px #23885A; opacity: 1; }
.dr4 .dr-choice.dr-key.wrong { box-shadow: inset 0 0 0 2px #D23F2A; opacity: 1; }
.dr4 .dr-choice.dr-key.right .dr-letter { background: #23885A; color: #fff; box-shadow: none; }
.dr4 .dr-choice.dr-key.wrong .dr-letter { background: #D23F2A; color: #fff; box-shadow: none; }
[data-theme="dark"] .dr4 .dr-choice.dr-key.right { box-shadow: inset 0 0 0 2px #4CC08A; }
[data-theme="dark"] .dr4 .dr-choice.dr-key.wrong { box-shadow: inset 0 0 0 2px #F07563; }
[data-theme="dark"] .dr4 .dr-choice.dr-key.right .dr-letter { background: #4CC08A; color: #10120F; }
[data-theme="dark"] .dr4 .dr-choice.dr-key.wrong .dr-letter { background: #F07563; color: #10120F; }

/* ---------------------------------------------------------------- v10 (user, 2026-11-05: "bad as hell")
   No dark dot-matrix panel anywhere: the instrument's intro and idle screen (READY, DONE, KEEP GOING...) is hidden in
   every mode, and an instrument left with nothing to show is hidden too. Timed runs give their rules in words
   (.dr-rules, engine speedSheet) and start on a normal key. */
.dr4 .dr-screen.is-intro { display: none !important; }
.dr4 .dr-inst:has(.dr-screen.is-intro):not(:has([data-start])) { display: none; }
.dr4 .dr-rules { margin: 12px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.dr4 .dr-rules b { font-weight: 600; color: var(--ink); }
.dr4 .dr-inst:has(.dr-screen.is-intro) { display: block; margin-top: 26px; }
.dr4 .dr-screen.is-intro ~ .dr-row { display: flex; justify-content: flex-start; }
.dr4 .dr-screen.is-intro ~ .dr-row > [data-start] { flex: none; width: auto; min-width: 200px; height: 54px; min-height: 54px; padding: 0 28px; }