/* The editor's panel, hint, debugger dock and labels. Four themes, picked with ?theme=NAME or the
   switcher: paper (the default), toybox (the base values below), craft and arcade. */
:root {
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #20222c; --soft: #555a6e;
  --panel: #fffaf0; --panel-line: 3px solid var(--ink); --panel-radius: 26px; --panel-shadow: 7px 7px 0 rgba(32, 34, 44, .85);
  --sheet-shadow: 0 -4px 0 rgba(32, 34, 44, .18);
  --card: #fff; --card-line: 2px solid var(--ink); --card-radius: 18px;
  --field: #fff; --field-line: 2px solid #20222c;
  --btn: #fff; --btn-ink: var(--ink); --btn-line: 2.5px solid var(--ink); --btn-radius: 14px; --btn-shadow: 0 4px 0 var(--ink); --btn-drop: 4px;
  --go: #2447d8; --go-ink: #fff; --on: #20222c; --on-ink: #fff; --focus: #2447d8;
  --make: #ff9233; --run: #5a8dff; --program: #2fd07a; --tidy: #ff6ec7; --title-ink: #20222c; --fold: #dfe6ee;
  --box: #fff; --box-top: #ffe14d; --box-top-ink: #20222c;
  /* Layout: the panel's width on a wide screen; on a phone the sheet's height, which main.js sets. */
  --panel-w: 340px; --sheet: 0px; --half: 0px;
}
/* The switcher's buttons carry data-theme too and preview their theme, so --btn-ink is set again
   in each block: it must follow that theme's --ink, or the preview is ink on ink. */
[data-theme="craft"] {
  --btn-ink: var(--ink);
  --font: "Chalkboard SE", "Comic Neue", "Comic Sans MS", "Marker Felt", cursive, sans-serif;
  --ink: #3b2f2a; --soft: #55463c;
  --panel: #efe3c8; --panel-line: 0 solid transparent; --panel-radius: 6px; --panel-shadow: 0 14px 34px rgba(60, 40, 20, .38);
  --sheet-shadow: 0 -8px 26px rgba(60, 40, 20, .35);
  --card: #fffdf4; --card-line: 0 solid transparent; --card-radius: 3px;
  --field: #fffef8; --field-line: 2px dashed #9b8672;
  --btn: #fffdf4; --btn-line: 2px solid #3b2f2a; --btn-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; --btn-shadow: 2px 3px 0 rgba(59, 47, 42, .35); --btn-drop: 2px;
  --go: #c2362b; --go-ink: #fff; --on: #2b5ea7; --on-ink: #fff; --focus: #2b5ea7;
  --make: #f6b04a; --run: #8fc0ea; --program: #a8d68a; --tidy: #f3a6c4; --fold: #e8dcc0;
  --box: #fffdf4; --box-top: #f6d24a;
}
[data-theme="arcade"] {
  --btn-ink: var(--ink);
  --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #f4f1ff; --soft: #b9b4dc;
  --panel: #15122e; --panel-line: 2px solid #29d3e6; --panel-radius: 8px; --panel-shadow: 0 0 0 4px #15122e, 0 0 28px 4px rgba(41, 211, 230, .55);
  --sheet-shadow: 0 0 26px 2px rgba(41, 211, 230, .5);
  --card: #1e1a40; --card-line: 1px solid #3c3780; --card-radius: 6px;
  --field: #0c0a1e; --field-line: 1px solid #5b55b0;
  --btn: #0c0a1e; --btn-line: 2px solid #ff6ec7; --btn-radius: 4px; --btn-shadow: 0 0 10px rgba(255, 110, 199, .5); --btn-drop: 0px;
  --go: #ffe14d; --go-ink: #15122e; --on: #29d3e6; --on-ink: #0c0a1e; --focus: #ffe14d;
  --make: #ff9233; --run: #ffe14d; --program: #2fd07a; --tidy: #ff6ec7; --title-ink: #15122e;
  --box: #0c0a1e; --box-top: #ffe14d; --box-top-ink: #15122e;
}
/* Cream watercolor paper, so the panels belong to the world's picture book. The torn edge is drawn in
   the border (border-image): a mask would hide the lesson card too, which is fixed inside the panel. */
[data-theme="paper"] {
  --btn-ink: var(--ink);
  --font: "Avenir Next", Avenir, Seravek, "Segoe UI", system-ui, sans-serif;
  --hand: Noteworthy, "Segoe Print", "Bradley Hand", "Comic Neue", var(--font); /* headings, lettered by hand */
  --ink: #3a2340; --soft: #664d66;
  --panel: #f6eedd; --panel-line: 8px solid transparent; --panel-radius: 8px; --panel-shadow: 0 14px 26px -10px rgba(58, 35, 64, .5), 0 3px 8px -2px rgba(58, 35, 64, .2);
  --sheet-shadow: 0 -8px 22px -6px rgba(58, 35, 64, .4);
  --card: #fdf9ef; --card-line: 5px solid transparent; --card-radius: 4px;
  --field: #fffdf7; --field-line: 1.5px solid #8a7389;
  --btn: #fffaf0; --btn-line: 1.5px solid #6e566f; --btn-radius: 7px 12px 8px 11px / 11px 7px 12px 8px; --btn-shadow: 0 2px 0 rgba(58, 35, 64, .28), 0 3px 7px -2px rgba(58, 35, 64, .3); --btn-drop: 2px;
  --go: #34508c; --go-ink: #fff8ea; --on: #4a2b52; --on-ink: #fff8ea; --focus: #1b5fc1;
  --make: #f3c9a0; --run: #b9d8e6; --program: #c8dca8; --tidy: #ecc3d2; --title-ink: #3a2340; --fold: #e9dfca;
  --box: #fffdf7; --box-top: #f9e08a; --box-top-ink: #3a2340;
  /* A 120px sheet torn within its 8px rim; each rim's middle repeats along the edge, so the ends match. */
  --deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M.8 2.8l1.2 .9l2 -.9l2 .1l2 -.5l2 -.1l2 -.4l2 1.3l2 -.5l2 1.5l2 -.3l2 -.6l2 -.3l2 1l2 .5l2 -.3l2 -.8l2 1.2l2 -.8l2 -.5l2 -.8l2 .3l2 .4l2 .3l2 -1l2 -1l2 0l2 -.4l2 .2l2 .2l2 .7l2 1.6l2 0l2 -.1l2 0l2 .1l2 -.8l2 .6l2 -.2l2 -.8l2 -.7l2 .2l2 .7l2 -1.3l2 -.2l2 .8l2 .2l2 -.6l2 -.2l2 .3l2 .2l2 .5l2 0l2 1.2l2 -.9l2 .1l2 -.5l2 -.1l2 -.4l2 1.3l1.3 -.2l-.4 -.7l-.5 1.7l.4 2l.8 2l-1.1 2l-.3 2l-.1 2l-.4 2l.3 2l.7 2l-.4 2l-.1 2l0 2l-2 2l-.1 2l.8 2l.3 2l-.8 2l1.5 2l.3 2l-.8 2l1.4 2l-.5 2l.5 2l-.4 2l-.9 2l-1.1 2l1.2 2l-1.8 2l-.7 2l.3 2l.9 2l-.8 2l.1 2l-1.1 2l-.1 2l0 2l.5 2l-.3 2l1.5 2l.4 2l-.5 2l1.4 2l.8 2l-1.6 2l-.3 2l.7 2l.7 2l-.7 2l.1 2l.1 2l1.6 2l.6 2l-1 2l.4 2l.8 2l-1.1 2l-.3 2l-.1 2l-.8 1.2l.7 -3.6l-2 -.3l-2 .4l-2 -.2l-2 .1l-2 1.9l-2 1l-2 -.4l-2 -1.5l-2 .7l-2 0l-2 .7l-2 .3l-2 -.2l-2 -1l-2 .5l-2 0l-2 -1l-2 .6l-2 -.8l-2 .4l-2 .6l-2 0l-2 -.5l-2 .6l-2 .5l-2 -.4l-2 .4l-2 -.5l-2 .7l-2 -.3l-2 -.6l-2 -1.3l-2 .4l-2 .3l-2 .5l-2 -.4l-2 .6l-2 -.3l-2 .3l-2 -.4l-2 .5l-2 .1l-2 .1l-2 -.1l-2 0l-2 .3l-2 -1l-2 -.8l-2 1.1l-2 -.5l-2 -1.4l-2 .3l-2 -.3l-2 .4l-2 -.2l-2 .1l-2 1.9l-2 1l-1.1 -1l1.8 .5l-.1 -2l-.1 -2l.2 -2l.2 -2l-.4 -2l-1.2 -2l-.9 -2l0 -2l0 -2l.8 -2l.1 -2l-.2 -2l.4 -2l0 -2l1.1 -2l0 -2l-.2 -2l.9 -2l.8 -2l-.4 -2l-.1 -2l-.9 -2l.7 -2l-.7 -2l.4 -2l-.2 -2l-1.9 -2l.1 -2l1.1 -2l-.6 -2l.1 -2l.6 -2l1.9 -2l.5 -2l.2 -2l-.9 -2l.1 -2l1 -2l-.8 -2l.8 -2l.4 -2l-1.1 -2l.1 -2l-.3 -2l-1 -2l-.4 -2l1.3 -2l.1 -2l-.7 -2l-.8 -2l-.9 -2l.9 -2l-.1 -2l-.1 -2l.2 -2l.2 -2l-.4 -2l-1.2 -2z' fill='%23f6eedd' stroke='%23a89478' stroke-opacity='.45' stroke-width='.7'/%3E%3C/svg%3E");
  --deckle-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M.7 2.9l1.3 -.7l2 -.2l2 .8l2 -1.3l2 -.6l2 .7l2 .7l2 .5l2 -1.4l2 0l2 .4l2 .2l2 0l2 .1l2 .9l2 -.4l2 .2l2 -.8l2 -1l2 .6l2 .7l2 -.3l2 .3l2 1l2 -.7l2 .7l2 .6l2 -.4l2 -1.7l2 1.5l2 .4l2 -1.2l2 -1.4l2 -.1l2 1.8l2 .4l2 -.3l2 -.4l2 1.1l2 .5l2 -1.4l2 .8l2 -.3l2 1.1l2 1.1l2 .2l2 -.4l2 -.5l2 -.9l2 -.8l2 .8l2 -1.2l2 -.4l2 -.2l2 .8l2 -1.3l2 -.6l2 .7l2 .7l1.3 .7l-2.4 -1l-.9 2l-1.2 2l1.3 2l.3 2l.6 2l-.7 2l1.2 2l-.3 2l0 2l-.4 2l-.5 2l1.5 2l-.1 2l-.6 2l-.3 2l.9 2l-.3 2l0 2l1.3 2l.9 2l0 2l0 2l-.7 2l-.9 2l.2 2l-.9 2l.5 2l1.2 2l-.7 2l-1.3 2l-.4 2l.5 2l-1.2 2l1 2l0 2l.7 2l.6 2l-1.3 2l-.3 2l1.6 2l-.2 2l-.5 2l-.5 2l.4 2l-.6 2l-1.6 2l-.3 2l.8 2l.3 2l-.2 2l-.1 2l1.2 2l-.9 2l-1.2 2l1.3 2l.3 2l.6 2l-.7 2l.9 1.2l.7 -.4l-1.9 -1.3l-2 -.1l-2 1l-2 -.3l-2 -.8l-2 -.3l-2 .6l-2 -1.4l-2 -.1l-2 .2l-2 -.9l-2 .2l-2 .1l-2 1.1l-2 .1l-2 .1l-2 -.5l-2 .4l-2 1.3l-2 -1.7l-2 -1.5l-2 .7l-2 -.4l-2 -.1l-2 .8l-2 -.2l-2 2.1l-2 -.3l-2 -.1l-2 0l-2 .8l-2 -1.4l-2 -.1l-2 1.1l-2 -.5l-2 .4l-2 .4l-2 .1l-2 -1.4l-2 .8l-2 -.6l-2 .6l-2 .3l-2 -1.3l-2 .1l-2 2l-2 .5l-2 0l-2 .3l-2 0l-2 -.1l-2 -.5l-2 -1.5l-2 -.1l-2 1l-2 -.3l-2 -.8l-2 -.3l-1.2 .2l3.3 .8l.1 -2l.7 -2l-1.2 -2l-.4 -2l.1 -2l-.9 -2l-.2 -2l-.1 -2l-.2 -2l.3 -2l-.7 -2l-.9 -2l.5 -2l2.2 -2l-.5 -2l-.1 -2l1 -2l-1.1 -2l-1 -2l0 -2l-.4 -2l-.4 -2l1.6 -2l-.4 -2l-.2 -2l.6 -2l-.5 -2l-.4 -2l1.6 -2l-.7 -2l-.4 -2l.5 -2l-.7 -2l.3 -2l-.3 -2l.3 -2l.3 -2l.3 -2l-.1 -2l-.4 -2l-1.1 -2l1.5 -2l-.8 -2l1.3 -2l1.1 -2l1.1 -2l-.4 -2l.2 -2l-.5 -2l-.4 -2l.2 -2l-.4 -2l.1 -2l.7 -2l-1.2 -2l-.4 -2l.1 -2l-.9 -2z' fill='%23fdf9ef' stroke='%23a89478' stroke-opacity='.45' stroke-width='.7'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .24 .5 0 0 0 -.22'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* The page never scrolls or zooms under a finger: the world takes every gesture, the panels scroll inside. */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font: 14px/1.4 var(--font); color: var(--ink); background: #cfe6f5; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

/* ---- panel ---- */
/* No transform, filter or contain on the panel: the lesson card inside it is position: fixed to the window. */
#panel { position: fixed; top: 14px; right: 16px; max-height: calc(100% - 30px); width: var(--panel-w); box-sizing: border-box; padding: 12px; overflow-y: auto; overscroll-behavior: contain; z-index: 3;
         background: var(--panel); border: var(--panel-line); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
header.top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
h1 { margin: 0; font-size: 26px; line-height: 1; }
#logo { all: unset; cursor: pointer; font-weight: 900; letter-spacing: -.01em; border-radius: 8px; white-space: nowrap; } /* one word, also in a wider font */
#logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#logo span { display: inline-block; color: var(--c); -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill;
             animation: hop .5s calc(var(--i) * 45ms) both; }
#logo:hover span { animation: hop .5s calc(var(--i) * 30ms) both reverse; }
#logo:active { transform: scale(.94); }
@keyframes hop { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-7px) rotate(-8deg); } 100% { transform: translateY(0) rotate(0); } }
#burst { position: absolute; left: 60px; top: 14px; pointer-events: none; }
#burst i { position: absolute; width: 11px; height: 5px; border-radius: 1px; animation: fly .9s ease-out forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.topbtns { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* The dock shows the stacks while debugging; one copy is enough. */
.debugging :is(#stacks, #stackh) { display: none; }

/* Groups fold. The title is a tab on the card's top edge; the whole tab is the switch. */
.group { margin: 0 0 12px; padding: 18px 10px 10px; position: relative; background: var(--card); border: var(--card-line); border-radius: var(--card-radius); --sec: var(--fold); }
.make { --sec: var(--make); } .run { --sec: var(--run); } .program { --sec: var(--program); } .tidy { --sec: var(--tidy); }
.group > summary { position: absolute; top: -9px; left: 12px; list-style: none; cursor: pointer; border-radius: 999px; }
.group > summary::-webkit-details-marker { display: none; }
.group h2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 1px 9px 1px 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
            color: var(--title-ink); background: var(--sec); border: var(--btn-line); border-width: 2px; border-radius: 999px; }
.group h2::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; transition: transform .15s; }
details.group:not([open]) h2::after { transform: rotate(-90deg); }
.group > summary:hover h2 { filter: brightness(1.06); }
/* A folded group is only its tab, and folded tabs line up side by side. */
details.group:not([open]) { display: inline-block; vertical-align: top; margin: 0 4px 10px 0; padding: 0; background: none; border: 0; box-shadow: none; transform: none; }
details.group:not([open]) > summary { position: static; translate: none; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.row:last-child { margin-bottom: 0; }
/* Make and Run buttons sit on a grid, their keys as tags on the corner, so the rows stay short. */
.make .row { display: grid; grid-template-columns: repeat(3, 1fr); }
.run .row { display: grid; grid-template-columns: 1fr 1fr; }
:is(.make, .run) .row { align-items: stretch; } /* every button in a row as tall as the tallest */
:is(.make, .run) .row button { position: relative; padding-inline: 6px; white-space: nowrap; } /* a label never stacks on its picture */
:is(.make, .run) .row kbd { position: absolute; top: -8px; right: -6px; margin: 0; padding: 0 4px; line-height: 14px; color: var(--btn-ink); background: var(--btn); border: 1.5px solid var(--btn-ink); opacity: 1; }

button, select, a.small { font: inherit; font-weight: 700; padding: 6px 10px; color: var(--btn-ink); background: var(--btn); border: var(--btn-line); border-radius: var(--btn-radius);
         box-shadow: var(--btn-shadow); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s; }
button:hover, select:hover, a.small:hover { transform: translateY(-1px); }
button:active, a.small:active { transform: translateY(var(--btn-drop)) scale(.96); box-shadow: none; }
button.small, a.small { padding: 3px 8px; font-size: 12px; }
button.go { background: var(--go); color: var(--go-ink); }
button[aria-pressed="true"] { background: var(--on); color: var(--on-ink); }
:is(button, select, input, textarea, summary, a, ol):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
kbd { font: 700 10px var(--mono); padding: 0 4px; margin-left: 2px; border: 1px solid currentColor; border-radius: 4px; opacity: .75; }

label, h3 { display: block; margin: 8px 0 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
input:not([type=range]), textarea, pre { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 6px 8px; color: var(--ink);
       font: 12px/1.4 var(--mono); border: var(--field-line); border-radius: 10px; background: var(--field); }
::placeholder { color: var(--soft); opacity: 1; }
pre { min-height: 2.3em; max-height: 9em; overflow: auto; white-space: pre-wrap; word-break: break-all; }
textarea { height: 6.2em; resize: vertical; white-space: pre; margin-bottom: 8px; }
.program label { margin-top: 0; }
#windinfo { margin: 6px 0 0; font-size: 12px; color: var(--soft); }
#windinfo:empty { display: none; }
.help { font-size: 12.5px; color: var(--soft); margin: 4px 0 0; }
/* Input, output and stacks: names on the left, so each takes one line. */
.io { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 6px 8px; align-items: center; }
.io > :is(label, h3) { margin: 0; }
#stackh { align-self: start; padding-top: 7px; }
.io { margin-top: 10px; }
#stacks { display: flex; flex-wrap: wrap; column-gap: 12px; }
#stacks .stack { margin-bottom: 0; }
#stacks .sname { width: auto; padding-right: 2px; }

#legend { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; font-size: 12px; }
#legend li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#legend i { flex: none; width: 30px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45), 1px 2px 0 rgba(0, 0, 0, .2); transform: rotate(-6deg); }
#legend li:nth-child(even) i { transform: rotate(5deg); }
#legend b { margin-left: auto; font: 700 10.5px var(--mono); color: var(--soft); }
#legend small { display: none; }
footer { display: flex; justify-content: center; }
#themes { display: flex; gap: 6px; align-items: center; }
#themes::before { content: "Theme"; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }

/* ---- stacks as boxes ---- */
.stack { display: flex; align-items: flex-start; gap: 4px; min-height: 30px; margin-bottom: 4px; flex-wrap: wrap; }
.stack:last-child { margin-bottom: 0; }
.sname { flex: none; width: 40px; padding-top: 5px; font: 700 11px var(--mono); color: var(--soft); }
.box, .more, .stack .empty { display: inline-flex; flex-direction: column; align-items: center; min-width: 26px; box-sizing: border-box; padding: 3px 6px; font: 700 12px/1.3 var(--mono);
       color: var(--ink); background: var(--box); border: 2px solid var(--ink); border-radius: 7px; }
.box small { font-size: 9.5px; font-weight: 400; color: var(--soft); }
.box.top { background: var(--box-top); color: var(--box-top-ink); }
.box.top small { color: inherit; }
.box em { font: 800 8.5px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.more, .stack .empty { border-style: dashed; font-weight: 400; color: var(--soft); border-color: var(--soft); }

/* ---- hint ---- */
#hint { position: fixed; top: 14px; left: 16px; z-index: 2; max-width: min(520px, calc(100vw - var(--panel-w) - 64px)); margin: 0; padding: 8px 14px; box-sizing: border-box; font-weight: 700;
        background: var(--panel); border: var(--btn-line); border-radius: 999px 999px 999px 6px; box-shadow: var(--btn-shadow); }
#hint:empty { display: none; }

/* ---- debugger dock ---- */
#dock { position: fixed; left: 16px; bottom: 16px; right: calc(var(--panel-w) + 36px); z-index: 2; height: min(292px, 42vh); display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 12px;
        background: var(--panel); border: var(--panel-line); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.dockbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dockbtns { display: contents; }
.docktitle { font-size: 15px; margin-right: 4px; }
.speed { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.speed input { width: 110px; accent-color: var(--go); }
.speed output { min-width: 78px; text-transform: none; letter-spacing: 0; font-weight: 400; }
#dstatus { font-size: 12.5px; color: var(--soft); flex: 1 1 200px; }
#dclose { position: absolute; top: 9px; right: 10px; min-width: 30px; } /* always in the corner, however the bar wraps */
.dockbar { padding-right: 40px; }
#dexplain { margin: 8px 0 0; padding: 4px 10px; font-size: 12.5px; background: var(--card); border: var(--card-line); border-width: 1.5px; border-radius: 8px; }
.dockcols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; min-height: 0; flex: 1; }
.tracecol { display: flex; flex-direction: column; min-height: 0; }
h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
#trace { list-style: none; margin: 0; padding: 4px 6px; flex: 1; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; font-size: 12.5px; line-height: 1.5;
         background: var(--field); border: var(--field-line); border-radius: 10px; }
#trace li { display: flex; gap: 6px; align-items: baseline; padding: 1px 2px; border-radius: 5px; }
#trace li:first-child:not(.empty) { background: var(--box-top); color: var(--box-top-ink); font-weight: 700; }
#trace li:first-child:not(.empty) .at { color: inherit; }
#trace .n { flex: none; min-width: 2.2em; text-align: right; font: 700 12px var(--mono); }
#trace i { flex: none; align-self: flex-start; margin-top: 5px; width: 18px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5); }
#trace b { flex: none; min-width: 9.6em; font: 700 11.5px var(--mono); }
#trace .at { flex: none; min-width: 2.2em; font: 11px var(--mono); color: var(--soft); }
#trace .empty { color: var(--soft); }

/* ---- labels over the bits (debug mode). Plain high-contrast chips in every theme: they sit on the 3D scene. ---- */
#labels { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#labels span { position: absolute; left: 0; top: 0; translate: -50% -135%; white-space: nowrap; padding: 0 5px; font: 700 10.5px/1.5 ui-monospace, Menlo, monospace;
               color: #20222c; background: rgba(255, 255, 255, .93); border: 1.5px solid #20222c; border-radius: 6px; }
#labels small { font-weight: 400; opacity: .7; }
#labels em { font-style: normal; margin-right: 5px; padding: 0 4px; border-radius: 4px; background: #20222c; color: #fff; }
#labels .tiny { padding: 0 3px; font-size: 9px; border-width: 1px; }
#labels .below { translate: -50% 55%; }
#labels .covered { color: #5b5f70; background: rgba(236, 236, 240, .93); border: 1.5px dashed #6c7082; z-index: 0; }
#labels .start { z-index: 2; background: #20222c; color: #fff; }
#labels .next { z-index: 3; background: #20222c; color: #ffd21f; }
#labels .now { z-index: 4; background: #ffd21f; font-size: 12px; box-shadow: 0 2px 0 #20222c; }
#labels .origin { background: #2447d8; color: #fff; border-color: #fff; }

/* ---- learn mode: the Learn button, the lesson list and the lesson card. All of learn mode's styles
   are in this block, down to the next heading. ---- */
#learn { display: block; width: 100%; margin: 0 0 14px; padding: 7px 11px; font-size: 15px; }
/* The card stands where the hint does, and says what to do next itself. */
.learning #hint { display: none; }
#lesson { position: fixed; top: 14px; left: 16px; z-index: 2; width: 340px; max-height: calc(100% - 30px); box-sizing: border-box; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain;
          background: var(--panel); border: var(--panel-line); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
/* While debugging, the dock has the bottom of the window. */
.learning.debugging #lesson { max-height: calc(100% - 46px - min(292px, 42vh)); }
.lhead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#lwhere { flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
#lesson h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; outline: none; }
.lidea { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.lsteps, #lhints { margin: 0 0 10px; padding-left: 22px; }
.lsteps li, #lhints li { margin-bottom: 5px; }
#lgoal { margin: 0 0 10px; padding: 7px 10px; color: var(--box-top-ink); background: var(--box-top); border: 2px solid var(--ink); border-radius: 10px; }
#lresult { margin: 8px 0; padding: 7px 10px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; }
#lresult:empty, #lhints:empty { display: none; }
.lact:has(> .pass) { scroll-margin-bottom: 64px; } /* scrolled into sight with the Next lesson button under it */
#lresult p { margin: 0 0 4px; }
#lresult p:last-child { margin-bottom: 0; }
#lresult code { padding: 0 4px; font: 700 13px var(--mono); border: 1px solid var(--soft); border-radius: 4px; }
#lhints { margin-top: 8px; }
p.lbytes { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 6px; }
.lbyte { min-width: 1.1em; padding: 1px 5px; text-align: center; font: 700 13px/1.5 var(--mono); color: var(--ink); background: var(--box); border: 2px solid var(--ink); border-radius: 6px; }
.lbyte.word { font: 11px/1.8 var(--font); color: var(--soft); border-style: dashed; border-color: var(--soft); }
.lbyte.diff { color: var(--box-top-ink); background: var(--box-top); border: 3px solid var(--ink); }
#lessons { list-style: none; margin: 0 0 8px; padding: 0 4px 4px 0; display: grid; gap: 7px; }
.lpick { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 8px; width: 100%; text-align: left; }
.lpick .lnum { flex: none; min-width: 1.5em; font: 700 12px var(--mono); }
.lpick .lname { flex: 1; }
.lpick .lmark { flex: none; font-size: 11px; }
.lpick.next { background: var(--go); color: var(--go-ink); }
.lfoot { margin: 0; font-weight: 700; }
.lfoot:empty { display: none; }
/* Too narrow for card, world and panel side by side: the card goes into the panel, under Learn. */
@media (min-width: 701px) and (max-width: 1100px) and (min-height: 501px) {
  #lesson, .learning.debugging #lesson { position: static; z-index: auto; width: auto; max-height: none; overflow: visible; margin: 0 0 12px; padding: 10px 12px;
            background: var(--card); border: var(--card-line); border-radius: var(--card-radius); box-shadow: none; }
  [data-theme="paper"] #panel #lesson { background: var(--grain), var(--card); background-clip: padding-box; border-image: var(--deckle-card) 8 round; box-shadow: 0 2px 5px -1px rgba(58, 35, 64, .2); }
}

/* ---- the phone's quick buttons and the sheet's handle: hidden on a wide screen ---- */
#fabs, #sheetbar { display: none; }

/* ---- craft: paper notes held on with tape ---- */
[data-theme="craft"] #panel, [data-theme="craft"] #dock { background: #d9b98a repeating-linear-gradient(48deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 9px); }
[data-theme="craft"] .group { box-shadow: 1px 3px 6px rgba(60, 40, 20, .3); transform: rotate(-.5deg); }
[data-theme="craft"] .group:nth-of-type(even) { transform: rotate(.6deg); }
[data-theme="craft"] .group > summary { top: -11px; left: 50%; translate: -50% 0; }
[data-theme="craft"] .group h2 { border: 0; border-radius: 1px; padding: 2px 14px 2px 16px; opacity: .92; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(60, 40, 20, .35); }
[data-theme="craft"] #logo span { -webkit-text-stroke: 0; text-shadow: 1.5px 1.5px 0 #3b2f2a; }
[data-theme="craft"] #hint { border-radius: 3px; transform: rotate(-.7deg); background: #fff7a8; border: 0; box-shadow: 2px 4px 8px rgba(60, 40, 20, .35); }
[data-theme="craft"] #dexplain { background: #fff7a8; }
[data-theme="craft"] :is(input:not([type=range]), textarea, pre, #trace) { border-radius: 2px; background-image: repeating-linear-gradient(transparent 0 16px, rgba(43, 94, 167, .16) 16px 17px); }

/* ---- arcade: a cabinet at night ---- */
[data-theme="arcade"] #panel, [data-theme="arcade"] #dock { background: #15122e repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }
[data-theme="arcade"] :is(button, select, a.small, .group h2, label, h3) { text-transform: uppercase; letter-spacing: .05em; }
[data-theme="arcade"] :is(button, select, a.small) { font-size: 12px; }
[data-theme="arcade"] .group h2 { border-radius: 2px; border: 0; box-shadow: 0 0 10px var(--sec); }
[data-theme="arcade"] .make button { border-color: var(--make); box-shadow: 0 0 10px rgba(255, 146, 51, .5); }
[data-theme="arcade"] .program :is(button, select) { border-color: var(--program); box-shadow: 0 0 10px rgba(47, 208, 122, .5); }
[data-theme="arcade"] :is(.run, #dock) button { border-color: var(--run); box-shadow: 0 0 10px rgba(255, 225, 77, .45); }
[data-theme="arcade"] :is(button, a.small):active { transform: scale(.94); filter: brightness(1.5); }
[data-theme="arcade"] h1 { font-size: 21px; }
[data-theme="arcade"] .topbtns kbd { display: none; }
[data-theme="arcade"] #logo span { -webkit-text-stroke: 0; text-shadow: 0 0 8px var(--c); }
[data-theme="arcade"] #hint { border-radius: 4px; border-color: #ffe14d; box-shadow: 0 0 14px rgba(255, 225, 77, .5); }
[data-theme="arcade"] #legend i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
[data-theme="arcade"] #trace i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
[data-theme="arcade"] select { color-scheme: dark; }

/* ---- paper: torn sheets lying on the picture, painted tabs, hand-lettered headings ---- */
[data-theme="paper"] :is(#panel, #dock, #lesson, #hint, .pwa) { background: var(--grain), var(--panel); background-clip: padding-box; border-image: var(--deckle) 8 round; }
[data-theme="paper"] :is(#hint, .pwa) { border-width: 6px; }
[data-theme="paper"] #hint { padding: 6px 12px; border-radius: 0; } /* the torn edge is the shape: a rounded fill would leave holes in its corners */
[data-theme="paper"] .group { padding: 15px 7px 7px; background: var(--grain), var(--card); background-clip: padding-box; border-image: var(--deckle-card) 8 round; box-shadow: 0 2px 5px -1px rgba(58, 35, 64, .2); }
[data-theme="paper"] .group > summary { top: -13px; left: 9px; }
/* A wash of color, darker where the pigment pooled at its edge. */
[data-theme="paper"] .group h2 { padding: 2px 11px; border: 0; border-radius: 14px 18px 12px 20px / 16px 12px 18px 14px;
                                  background: radial-gradient(farthest-side, transparent 60%, rgba(90, 50, 40, .14)), var(--grain), var(--sec); box-shadow: 0 1px 2px rgba(58, 35, 64, .22); }
[data-theme="paper"] h1 { font: 700 30px/1 var(--hand); }
[data-theme="paper"] #logo span { -webkit-text-stroke: 1px var(--ink); }
[data-theme="paper"] .docktitle { font: 700 18px var(--hand); }
[data-theme="paper"] #lesson h2 { font: 700 23px/1.2 var(--hand); }
/* Buttons are paper labels: a wash lighter in the middle (not the switcher's, which show their own theme);
   pressed in, they sit in their own shadow. */
[data-theme="paper"] :is(button, select, a.small):not([data-theme]) { background-image: radial-gradient(130% 100% at 50% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%), linear-gradient(transparent 65%, rgba(58, 35, 64, .07)); }
[data-theme="paper"] button[aria-pressed="true"] { box-shadow: inset 0 2px 5px rgba(20, 8, 24, .5); }
[data-theme="paper"] :is(input:not([type=range]), textarea, pre, #trace) { border-radius: 4px 7px 5px 6px; box-shadow: inset 0 1px 3px rgba(58, 35, 64, .12); }
[data-theme="paper"] :is(.box, .more, .stack .empty, .lbyte) { border-width: 1.5px; border-radius: 5px 8px 6px 7px; }
[data-theme="paper"] .lbyte.diff { border-width: 3px; }
[data-theme="paper"] #dexplain { border: 1.5px solid #ddd0b8; border-radius: 5px 8px 6px 7px; }
[data-theme="paper"] :is(#lgoal, #lresult) { border-width: 1.5px; border-radius: 6px 9px 7px 8px; }
[data-theme="paper"] #lresult.pass { background: #dcebc8; }
[data-theme="paper"] #lresult.fail { background: #f7dcd3; }
[data-theme="paper"] :is(#legend, #trace) i { box-shadow: 0 0 0 1.5px rgba(40, 32, 54, .85), 1px 2px 2px rgba(40, 32, 54, .2); }
/* The labels stay plain chips, in plum ink on cream, lifted a little off the ground. :where keeps each
   kind of label's own colors above these. */
:where([data-theme="paper"]) #labels span { color: #2a1a30; background: rgba(255, 250, 238, .95); border-color: #2a1a30; box-shadow: 0 1px 3px rgba(42, 26, 48, .35); }
:where([data-theme="paper"]) #labels :is(em, .start, .next) { background: #2a1a30; }
:where([data-theme="paper"]) #labels .now { box-shadow: 0 2px 0 #2a1a30; }
:where([data-theme="paper"]) #labels .covered { color: #5e4f60; background: rgba(240, 233, 221, .93); border-color: #7a687b; }

/* ---- phone: the world fills the screen. The panel is a sheet at the bottom that rests as a peek
   showing the output, half open or full; the quick buttons ride on top of it. While debugging, the
   dock's trace and stacks sit at the top and its buttons join the quick ones. The lesson is read in
   the sheet. main.js uses the same media query. ---- */
@media (max-width: 700px), (max-height: 500px) {
  kbd { display: none; } /* no keyboard to press them on */
  #hint { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); max-width: none; font-size: 13px; border-radius: 14px; }
  .debugging #hint { display: none; }

  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet); max-height: none; padding: 0 12px calc(12px + env(safe-area-inset-bottom));
           display: flex; flex-flow: row wrap; align-content: flex-start; align-items: center; gap: 10px 8px;
           border-bottom: 0; border-radius: var(--panel-radius) var(--panel-radius) 0 0; box-shadow: var(--sheet-shadow); transition: height .28s cubic-bezier(.2, .8, .2, 1);
           scroll-padding-top: 64px; /* what is scrolled to is not left under the handle */ }
  #panel > * { flex: 0 0 100%; min-width: 0; margin: 0; box-sizing: border-box; }
  /* At rest, the sheet shows only its handle and the output; what is under it can't be tabbed to. */
  [data-sheet="peek"] #panel { overflow: hidden; }
  [data-sheet="peek"] #panel > :not(#sheetbar) { visibility: hidden; }
  .sheetdrag #panel, .sheetdrag :is(#fabs, .dockbtns) { transition: none; }

  #panel > #sheetbar { flex-basis: calc(100% + 24px); }
  #sheetbar { display: block; order: -3; position: sticky; top: 0; z-index: 3; margin: 0 -12px; background: inherit; border-radius: inherit; touch-action: none;
              box-shadow: 0 7px 6px -7px rgba(0, 0, 0, .3); } /* an edge for what scrolls under it */
  #sheet { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 8px 18px 11px; cursor: grab; border-radius: inherit; }
  #sheet:focus-visible { outline: 3px solid var(--focus); outline-offset: -5px; }
  .grip { width: 46px; height: 5px; border-radius: 3px; background: var(--soft); opacity: .55; }
  /* A fixed height: the sheet's peek is measured from it, and the text in it changes font when empty. */
  .peek { display: flex; gap: 10px; align-items: baseline; width: 100%; min-width: 0; height: 20px; overflow: hidden; font: 700 14px/20px var(--mono); }
  .peek b { flex: none; font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
  #peekout { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #peekout:empty::before { content: "nothing yet"; font: 400 13px/20px var(--font); color: var(--soft); }
  #peekout.ended:empty::before { content: "the program stopped and wrote nothing"; }

  /* Order in the sheet: the lesson, Run, then the name, Learn, sound and docs on one line, then the
     other groups (folded ones as a row of tabs) and the themes. */
  #lesson { order: -2; }
  .run { order: -1; }
  header.top { display: contents; }
  #panel h1 { flex: none; font-size: 22px; }
  #learn { flex: 1 1 0; order: 0; padding: 8px 10px; font-size: 14px; }
  .topbtns { flex: none; order: 1; }
  /* Sound and docs as icons: their names are still there for screen readers. */
  .topbtns > .small { justify-content: center; min-width: 44px; padding-inline: 8px; box-sizing: border-box; font-size: 0; }
  .topbtns span[aria-hidden] { font-size: 18px; }
  #panel::after { content: ""; order: 2; flex: 0 0 100%; margin: -5px 0; } /* a line break after them */
  .make, .program, .tidy, .colors, .how { order: 3; }
  footer { order: 4; }
  #burst { left: 40px; top: 70px; }

  #panel .group { padding: 0 12px 12px; }
  #panel .group > summary { position: static; translate: none; display: flex; align-items: center; min-height: 46px; margin: 0 -12px; padding: 0 12px; }
  #panel details.group:not([open]) { flex: none; margin: 0; padding: 0; }
  #panel details.group:not([open]) > summary { margin: 0; padding: 0 2px; min-height: 44px; }
  .group h2 { padding-block: 4px; }
  .help { font-size: 13.5px; }

  /* The quick buttons, and the debugger's own while debugging. They hide when the sheet is full. */
  #fabs, .dockbtns { position: fixed; z-index: 2; bottom: calc(var(--sheet) + 10px); display: flex; gap: 8px; transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
  #fabs { left: 50%; translate: -50% 0; }
  :is(#fabs, .dockbtns) button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; height: 60px; box-sizing: border-box;
                                 padding: 4px 10px; font-size: 12.5px; line-height: 1.1; border-radius: 18px; }
  [data-theme="craft"] :is(#fabs, .dockbtns) button { border-radius: 255px 22px 225px 22px / 22px 225px 22px 255px; }
  [data-theme="paper"] :is(#fabs, .dockbtns) button { border-radius: 14px 20px 15px 19px / 19px 14px 20px 15px; }
  [data-theme="paper"] #panel { border-width: 8px 0 0; } /* torn along the top only: the sides are the screen's */
  [data-theme="paper"] #lesson { background: none; }
  .ico { font-size: 22px; line-height: 1; }
  #fabs #qcheck { display: none; }
  .learning:not(.debugging):has(#lcheck) #fabs #qcheck { display: flex; }
  #qrun.busy .ico { animation: busy 1s ease-in-out infinite; }
  @keyframes busy { 50% { transform: scale(.8); } }
  .debugging :is(#qrun, #qcheck) { display: none; }
  .debugging #fabs { left: calc(8px + env(safe-area-inset-left)); translate: none; }
  .debugging :is(#fabs, .dockbtns) button { min-width: 56px; padding-inline: 6px; font-size: 12px; } /* five in a row */
  .dockbtns { right: calc(8px + env(safe-area-inset-right)); flex-direction: row-reverse; }
  [data-sheet="full"] :is(#fabs, .dockbtns) { visibility: hidden; }

  #dock { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); bottom: auto; height: auto; max-height: 40%;
          display: block; overflow-y: auto; padding: 8px 10px 10px; }
  .dockbar { gap: 4px 8px; }
  .docktitle { flex: 1; font-size: 14px; white-space: nowrap; }
  .speed { order: 1; font-size: 0; } /* "Speed" stays the slider's name; "5 a second" says it on screen */
  .speed output { min-width: 0; font-size: 12.5px; }
  .speed input { width: 76px; }
  #dclose { position: static; order: 2; }
  .dockbar { padding-right: 0; }
  #dstatus { order: 4; flex-basis: 100%; }
  #dexplain { margin-top: 6px; }
  .dockcols { display: block; }
  .tracecol h3 { margin-top: 6px; }
  .stackcol h3 { position: absolute; clip-path: inset(50%); } /* the rows say main and stash */
  #dstacks { display: flex; flex-wrap: wrap; column-gap: 12px; margin-top: 6px; }
  #trace { max-height: 72px; }
  #trace b { min-width: 0; }

  #lesson, .learning.debugging #lesson { position: static; z-index: auto; width: auto; max-height: none; overflow: visible; padding: 2px 2px 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .lhead { margin-bottom: 4px; }

  /* Nothing a person reads on a phone is under 12px: the dock, the stack boxes and the labels grow to fit
     (main.js shows the labels' names only where there is room for them at this size). */
  label, h3, h3 small, .sname, .box :is(small, em), #trace :is(b, .at), .peek b, .lpick .lmark, .lbyte.word, #legend :is(b, small), #themes::before,
  #labels span, #labels .tiny { font-size: 12px; }
  #labels small { font-size: 100%; }
}
/* A phone on its side: the sheet stands at the right, the dock at the left, the quick buttons in a column. */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  #panel { left: auto; width: min(380px, 46vw); border-radius: var(--panel-radius) 0 0 0; padding-right: calc(12px + env(safe-area-inset-right)); }
  [data-theme="paper"] #panel { border-left-width: 8px; }
  #hint { right: auto; max-width: calc(100% - min(380px, 46vw) - 120px); }
  #fabs { left: auto; translate: none; right: calc(8px + env(safe-area-inset-right)); flex-direction: column; }
  html:not([data-sheet="peek"]) #fabs { right: calc(min(380px, 46vw) + 10px); bottom: calc(8px + env(safe-area-inset-bottom)); }
  [data-sheet="full"] #fabs { visibility: visible; }
  .debugging #fabs { left: auto; }
  /* The dock: its name and ✕, the speed, the status; then the stacks, then the trace taking what is left; its buttons at the foot. */
  #dock { right: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(310px, 38vw); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 66px; }
  [data-theme="paper"] #dock { padding-inline: 5px; } /* the torn rim is 8px wide: this keeps the trace as wide as in the other themes */
  .speed { order: 3; flex-basis: 100%; }
  .speed input { flex: 1; }
  .dockbtns { position: absolute; left: 8px; right: 8px; bottom: 8px; justify-content: space-between; flex-direction: row; transition: none; }
  .dockbtns button { flex: 1; min-width: 0; height: 50px; }
  [data-sheet="full"] .dockbtns { visibility: visible; }
  /* Too little height for both to stand still: the stacks and the trace scroll together, stacks first. */
  .dockcols { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .dockcols > * { flex: none; }
  .stackcol { order: -1; }
  #trace { max-height: none; min-height: 0; overflow: visible; }
  :is(.tracecol, .stackcol) h3 { margin: 4px 0 2px; }
  #dexplain.idle { display: none; }
}
/* Fingers: targets big enough to hit, and fields at 16px so that phones do not zoom in on them. */
@media (pointer: coarse) {
  button, select, a.small { min-height: 44px; }
  a.small { display: inline-flex; align-items: center; box-sizing: border-box; }
  input:not([type=range]), textarea, select { font-size: 16px; }
}
@media (hover: none) {
  kbd { display: none; }
  /* No pointer to hover with: the legend says what each color does in words. */
  #legend { grid-template-columns: 1fr; }
  #legend li { flex-wrap: wrap; white-space: normal; }
  #legend small { display: block; flex-basis: 100%; padding-left: 36px; color: var(--soft); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:hover, button:active, select:hover, a.small:hover, a.small:active, #logo:active { transform: none; }
}