:root {
  --bg: #ddd5ca;
  --bg2: #efe9e0;
  --ink: #3a2f28;
  --soft: rgba(58, 47, 40, 0.58);
  --chip: rgba(255, 252, 247, 0.6);
  --pressed: rgba(255, 246, 236, 0.96);
  --label: #4a3e36;
  --ring: rgba(58, 47, 40, 0.72);
  --sab: var(--random-nav-h, env(safe-area-inset-bottom, 0px));
  --above: 126px; /* where the option rows (colours, Hook and Stretch, the shape modes) start up from the foot */
  /* the sizes, three and no more: a chrome tile (top bar, Look, Parts, Undo), a tool tile, and a row's chip (an option, a pill, a swatch) */
  --cw: 48px; --ch: 50px; --tw: 54px; --th: 54px; --chip-h: 40px;
  --top: max(12px, env(safe-area-inset-top));
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #26211e; --bg2: #3a3330; --ink: #f1e9df; --soft: rgba(241, 233, 223, 0.6); --chip: rgba(255, 255, 255, 0.1); --pressed: rgba(255, 246, 236, 0.9); --label: rgba(241, 233, 223, 0.8); --ring: rgba(241, 233, 223, 0.75); }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; color: var(--ink); background: radial-gradient(120% 90% at 50% 38%, var(--bg2), var(--bg)); }
body { font: 15px/1.4 var(--sans); -webkit-user-select: none; user-select: none; touch-action: pinch-zoom; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
canvas:focus { outline: none; }
canvas:focus-visible { outline: 2px solid var(--ring); outline-offset: -4px; }
button {
  font: inherit; color: inherit; border: 0; background: var(--chip); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent; transition: background 0.2s, opacity 0.2s; touch-action: manipulation;
}
button[aria-pressed="true"] { background: var(--pressed); color: #3a2f28; box-shadow: inset 0 0 0 1.5px rgba(58, 47, 40, 0.7); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar-top { position: fixed; z-index: 1; top: var(--top); right: 12px; display: flex; gap: 4px; }
.bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 12px);
  display: flex; gap: 16px; align-items: center;
}
.tools { display: flex; gap: 8px; }
.size { position: fixed; z-index: 1; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 66px); width: min(420px, calc(100vw - 24px)); display: flex; justify-content: center; gap: 12px; }
.size .sl { flex: 2 1 0; min-width: 0; max-width: 260px; }
.size #steady-row { flex: 1.4 1 0; max-width: 130px; }
.size .sl[hidden] { display: none; }
.sl { display: grid; gap: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--label); }
.sl span { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 22px; }
.sl span b { font-weight: 600; }
.sl em { font-style: normal; font-size: 10px; letter-spacing: 0.02em; text-transform: none; opacity: 0.85; }
.sl input { width: 100%; accent-color: var(--ink); height: 28px; margin: 0; }
.above { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + var(--above)); display: flex; gap: 8px; align-items: center; }
.above { width: max-content; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; }
.above[hidden] { display: none; }
.above button[hidden] { display: none; }
.above button { width: auto; min-width: 44px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.above button[aria-pressed="true"]:not(.sw) { background: var(--pressed); color: #3a2f28; box-shadow: inset 0 0 0 1.5px rgba(58, 47, 40, 0.7); }
.above button.sw { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background-clip: content-box; padding: 4px; }
.above button.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ring); }
.hint {
  position: fixed; left: 0; right: 0; bottom: calc(var(--sab) + var(--above) + 56px); text-align: center; color: var(--soft);
  font-family: var(--serif); font-size: 15px; font-style: italic; pointer-events: none; padding: 0 16px; text-wrap: balance; line-height: 1.6; transition: opacity 1.2s;
}
.hint .say { display: inline-block; max-width: 100%; padding: 5px 12px; border-radius: 10px; line-height: 1.4; text-wrap: balance; background: rgba(255, 252, 247, 0.74); color: #3a2f28; }
.hint.gone { opacity: 0; }
.mine { position: fixed; z-index: 1; top: max(12px, env(safe-area-inset-top)); left: 16px; width: auto; border-radius: 12px; padding: 0 16px; font-size: 14px; }
.mine[hidden] { display: none; }
.link { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(var(--top) + var(--ch) + 40px); box-shadow: 0 6px 24px rgba(58, 47, 40, 0.25); width: min(420px, calc(100vw - 32px)); height: 40px; padding: 0 12px; border-radius: 12px; border: 0; background: var(--pressed); color: #3a2f28; font: 13px ui-monospace, monospace; -webkit-user-select: text; user-select: text; }
.link[hidden] { display: none; }
.sheet {
  position: fixed; z-index: 2; left: 50%; transform: translateX(-50%); top: calc(max(12px, env(safe-area-inset-top)) + 84px);
  width: min(380px, calc(100vw - 32px)); padding: 14px 14px 0; border-radius: 12px; background: #fbf4ea; color: #3a2f28; border: 1px solid rgba(58, 47, 40, 0.18);
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - 84px - var(--sab) - 12px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 8px; justify-items: stretch; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}
.sheet[hidden] { display: none; }
.sheet button:focus-visible { outline-color: #3a2f28; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pills button { width: auto; padding: 0 14px; border-radius: 8px; background: rgba(58, 47, 40, 0.08); font-size: 14px; }
.pills button[aria-pressed="true"] { background: #3a2f28; color: #fff; box-shadow: none; }
#download { width: auto; padding: 0 22px; border-radius: 12px; background: #3a2f28; color: #fff; gap: 8px; display: inline-flex; align-items: center; }
@media (max-width: 400px) { .bar { gap: 8px; } .tools { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .hint, button { transition: none; } }
.hint { margin-bottom: 8px; }

/* "Back to your own" stays out of the views menu's way. */
body:has(#viewcube[aria-expanded="true"]) .mine { visibility: hidden; }
/* The view cube (Fusion's): the same turn as the clay, drawn with CSS 3D (app.js sets .vc's transform).
   A press goes home; a long press (or right-click) opens the list of views. */
#viewcube {
  position: fixed; z-index: 1; left: 12px; top: var(--top);
  width: 60px; height: 52px; border-radius: 10px; background: transparent; perspective: 220px; -webkit-touch-callout: none;
}
#viewcube[aria-expanded="true"] { background: var(--chip); }
.vc { position: relative; display: block; width: 34px; height: 34px; transform-style: preserve-3d; pointer-events: none; }
.vc .f { pointer-events: auto; } /* (a face can be tapped: app.js looks from that side) */
.vc .f {
  position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 7.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #3a2f28; background: rgba(255, 252, 247, 0.86); border: 1px solid rgba(58, 47, 40, 0.4); backface-visibility: hidden;
}
.vc .front  { transform: translateZ(17px); }
.vc .back   { transform: rotateY(180deg) translateZ(17px); }
.vc .right  { transform: rotateY(90deg) translateZ(17px); }
.vc .left   { transform: rotateY(-90deg) translateZ(17px); }
.vc .top    { transform: rotateX(90deg) translateZ(17px); background: rgba(255, 255, 255, 0.95); }
.vc .bottom { transform: rotateX(-90deg) translateZ(17px); background: rgba(226, 216, 204, 0.9); }
.views {
  position: fixed; z-index: 3; left: 80px; top: var(--top); min-width: 150px; padding: 6px;
  max-height: calc(100dvh - var(--top) - var(--sab) - 12px); overflow-y: auto; overscroll-behavior: contain; /* (a short screen: it scrolls, not runs off) */
  border-radius: 10px; background: var(--pressed); color: #3a2f28; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); display: grid; gap: 2px;
}
.views[hidden] { display: none; }
.views button { width: 100%; height: 44px; border-radius: 10px; background: transparent; justify-content: start; padding: 0 12px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.views button:hover, .views button:focus-visible { background: rgba(58, 47, 40, 0.1); outline: none; }
.views hr { border: 0; height: 1px; background: rgba(58, 47, 40, 0.15); margin: 4px 8px; }
.mine { left: 50%; transform: translateX(-50%); top: calc(max(12px, env(safe-area-inset-top)) + 150px); }

body.loading canvas, body.loading .bar, body.loading .bar-top, body.loading .rail, body.loading #form, body.loading .size, body.loading #viewcube { pointer-events: none; }
#stop-open { top: calc(max(12px, env(safe-area-inset-top)) + 150px); pointer-events: auto; }

.sheet .row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: center; }
.sheet .lbl { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: #5a4d44; }
.sheet .pills { justify-content: flex-start; gap: 6px; }
.sheet .row { grid-template-columns: 62px 1fr; }
.sheet .pills button { transition: background 0.2s, color 0.2s; min-height: 44px; height: 44px; padding: 0 12px; font-size: 14px; }
.sheet button:focus-visible { outline: 2px solid #3a2f28; outline-offset: 3px; }
.sheet .note { font-size: 14px; line-height: 1.35; color: #3a2f28; min-height: 1.4em; margin: 0; text-wrap: balance; text-align: center; }
.sheet .hint2 { font-size: 14px; line-height: 1.35; color: #5a4d44; margin: 0; text-wrap: balance; }
/* The note and the Download button stay in view at the foot of the sheet however far it has scrolled. */
.sheet .foot { position: sticky; bottom: 0; display: grid; gap: 6px; padding: 8px 0 14px; background: linear-gradient(to bottom, rgba(251, 244, 234, 0), #fbf4ea 14px); }
#download { justify-self: center; }
#download[aria-busy="true"] { cursor: progress; }
/* While it works: three dots, still under reduced motion. */
#download[aria-busy="true"]::after { content: ""; width: 1.4em; height: 0.35em; margin-left: 6px; background: radial-gradient(circle, currentColor 45%, transparent 50%) 0 50% / 0.47em 100% repeat-x; animation: dots 1s steps(4) infinite; }
@keyframes dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { #download[aria-busy="true"]::after { animation: none; } }

.sheet .textbtn { width: auto; height: 36px; border-radius: 10px; padding: 0 14px; justify-self: center; background: transparent; box-shadow: inset 0 0 0 1px rgba(58, 47, 40, 0.4); font-size: 14px; }
.sheet .textbtn[hidden] { display: none; }

/* The new-clay popover: the kind of clay, then the shape. */
#shapes { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
#shapes .row2 { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 100%; } /* (blob clay has more shapes than a phone fits in a row: they wrap, inside the card) */

/* The new-clay popover: what it does, the kind of clay (with what each is for), the shape. The hint steps aside while it is open. */
body:has(#shapes:not([hidden])) .hint { display: none; }
#shapes { max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--sab) - var(--above) - max(12px, env(safe-area-inset-top)) - 12px); overflow-y: auto; } /* (a short phone, its status bar: the card scrolls rather than run under it) */
#shapes .pop-head { margin: 0; font-size: 13px; font-weight: 600; color: var(--label); text-align: center; background: rgba(255, 252, 247, 0.74); border-radius: 8px; padding: 2px 10px; }
#shapes .pop-caption { margin: 0; font-size: 14px; line-height: 1.35; text-align: center; color: #3a2f28; background: rgba(255, 252, 247, 0.86); border-radius: 8px; padding: 6px 12px; max-width: 320px; text-wrap: balance; }
/* Which clay is in hand, always: a small tag under the top bar. */
.kindtag { position: fixed; z-index: 1; right: 12px; top: calc(var(--top) + var(--ch) + 6px); width: auto; height: 28px; padding: 0 4px 0 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--label); background: transparent; }
.kindtag svg { width: 14px; height: 14px; }
.kindtag:hover { background: var(--chip); }
/* A grid row that is hidden stays hidden (its display would otherwise win over the attribute). */
.sheet .row[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root { --chip: rgba(255, 255, 255, 0.17); } }


.wallbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink, #3a2f28); }
.wallbox[hidden] { display: none; }
.wallbox input { width: 88px; height: 44px; accent-color: var(--ink); }
.sl b { font-weight: 600; margin: 0 4px; }

.overlay { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 5; }
.overlay[hidden] { display: none; }
.trimshade { fill: rgba(196, 58, 48, 0.28); }
.trimline { stroke: rgba(58, 47, 40, 0.9); stroke-width: 2; stroke-dasharray: 7 5; }
.steadyunder { stroke: rgba(40, 32, 27, 0.45); stroke-width: 4.5; stroke-linecap: round; }
.steadyline { stroke: rgba(255, 252, 247, 0.95); stroke-width: 2; stroke-linecap: round; }
.steadyline.slack { stroke-dasharray: 3 4; }
.steadydot { fill: rgba(255, 252, 247, 0.95); stroke: rgba(40, 32, 27, 0.5); stroke-width: 1.5; }
.sayact { margin-left: 8px; min-height: 36px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--ink, #3a2f28); color: #fff; font: inherit; cursor: pointer; pointer-events: auto; }

.chip { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0 2px; cursor: pointer; letter-spacing: 0; text-transform: none; font-weight: 600; min-height: 24px; }
.readout { position: fixed; top: calc(var(--top) + var(--ch) + 36px); right: 16px; margin: 0; font-size: 13px; letter-spacing: 0.03em; color: var(--label); text-align: right; pointer-events: none; }
.numpad { position: fixed; z-index: 7; left: 50%; bottom: calc(var(--sab) + 130px); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255, 252, 247, 0.96); box-shadow: 0 6px 24px rgba(58, 47, 40, 0.25); }
.numpad[hidden] { display: none; }
.numpad label { display: grid; gap: 2px; font-size: 12px; color: var(--label); }
.numpad input { width: 90px; height: 40px; font: inherit; font-size: 16px; border: 1px solid rgba(58, 47, 40, 0.4); border-radius: 10px; padding: 0 8px; background: #fff; }
.numpad button { min-height: 40px; min-width: 44px; border-radius: 12px; border: 0; background: var(--ink, #3a2f28); color: #fff; font: inherit; cursor: pointer; }

.above .sw.plus { width: 36px; min-width: 36px; height: 36px; border-radius: 50%; border: 1.5px dashed var(--label); display: grid; place-items: center; font-size: 20px; color: var(--ink); cursor: pointer; position: relative; background: transparent; }
.above .sw.plus input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
#paintopts { gap: 10px; }
.pslider { display: grid; gap: 0; font-size: 12px; color: var(--label); min-width: 84px; }
.pslider input { width: 100%; height: 28px; margin: 0; accent-color: var(--ink); }
.pslider b { font-weight: 600; }

.size .sl em { display: none; }
.sl .chip { white-space: nowrap; }
.size .sl span { white-space: nowrap; }
@media (min-width: 560px) { .size .sl em { display: inline; } }
#swatches { gap: 6px; }
#swatches .sw, #swatches .sw.plus { width: 40px; min-width: 40px; height: 40px; padding: 3px; }
.sl button.chip { all: unset; box-sizing: border-box; cursor: pointer; font-weight: 600; text-decoration: underline dashed; text-underline-offset: 3px; padding: 10px 4px; margin: -10px 0; min-height: 44px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.sl button.chip:focus-visible { outline: 2px solid var(--ink, #3a2f28); outline-offset: 2px; }
.hint { z-index: 6; }

#cuts { flex-direction: column; align-items: center; }
#cuts .modes { display: flex; gap: 8px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
#cuts .modes::-webkit-scrollbar { display: none; }
#cuts .modes[hidden] { display: none; }
#cuts .modes button { flex: 0 0 auto; }
#cuts .mods { display: flex; gap: 8px; justify-content: safe center; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
#cuts .mods::-webkit-scrollbar { display: none; }
.profline { fill: none; stroke: rgba(58, 47, 40, 0.95); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.axisline { stroke: rgba(58, 47, 40, 0.55); stroke-width: 1.5; stroke-dasharray: 3 6; }
.axisline.off { display: none; }
.hint .sayact { all: unset; box-sizing: border-box; display: inline-block; vertical-align: middle; margin-left: 8px; min-height: 44px; line-height: 44px; padding: 0 16px; border-radius: 10px; background: #3a2f28; color: #fff; font-style: normal; font-size: 15px; cursor: pointer; pointer-events: auto; }
.hint .sayact:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #3a2f28; }

#ref { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; object-fit: contain; pointer-events: none; opacity: 0.4; z-index: 0; }
#ref[hidden] { display: none; }
.sheet .pills button:disabled { opacity: 0.55; }

.tools button, #mirror { width: var(--tw); height: var(--th); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tools button svg, #mirror svg { width: 22px; height: 22px; flex: 0 0 auto; }
.tl { font-size: 11px; line-height: 1; letter-spacing: 0.02em; }
.size { bottom: calc(var(--sab) + 72px); }
.bar { gap: 12px; }

@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 140, 60, 0.0); } 50% { box-shadow: 0 0 0 8px rgba(214, 140, 60, 0.55); } }
.glow { animation: glow 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; box-shadow: 0 0 0 4px rgba(214, 140, 60, 0.8); } }
#shapes [data-coach] { width: auto; min-width: 44px; padding: 0 16px; border-radius: 8px; margin-top: 4px; }
.tools button[hidden] { display: none; }
.tools button.needs-blob { opacity: 0.55; } /* (Shape on mesh clay: there to find, and it says what it needs) */
.bar { width: min(430px, calc(100vw - 12px)); justify-content: center; }
.bar .tools { flex: 1 1 auto; justify-content: space-between; gap: 4px; }
.tools button, #mirror { flex: 1 1 0; min-width: 44px; max-width: var(--tw); width: auto; }
#mirror { flex: 0 0 auto; width: var(--tw); }
.sl { font-size: 13px; }
.sl em { font-size: 12px; font-weight: 400; }
.tl { font-size: 12px; font-weight: 600; letter-spacing: 0; }

/* numbers with units read best in mono */
.readout, .chip, .sl button.chip, #steady-n, .sl span b, [data-brush="snap"] .ch-o, [data-brush="pitch"] .ch-o, .numpad input, .numpad label { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.readout { font-size: 12px; }
.sl button.chip, .chip { font-size: 12px; }
.readout { white-space: pre-line; line-height: 1.4; }

/* option tiles: the toolbar's look, icon over name, the value in mono under it */
.tile { flex: 0 0 auto; min-width: 58px; width: auto; min-height: 62px; padding: 6px 8px 5px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.tile svg { width: 24px; height: 24px; flex: 0 0 auto; }
.tile .tl { font-size: 12px; font-weight: 600; line-height: 1; }
.tile .tv { font: 10.5px/1 var(--mono); opacity: 0.8; min-height: 10px; }
#cuts .modes button { padding: 6px 10px; }
#paintopts .break { flex: 0 0 100%; height: 0; }
#paintopts .pslider { flex: 0 0 150px; }
@media (max-width: 380px) { #swatches { gap: 6px; } }
.pivotmark { fill: rgba(58, 130, 220, 0.25); stroke: rgba(58, 130, 220, 0.95); stroke-width: 2; pointer-events: none; }

/* ---- the layout: seeing (cube, Look) top left; files (New, Help, Share, Print) top right; Undo and Redo by the right thumb; the brush at the foot ---- */
.bar-top button, .rail button, #form { width: var(--cw); height: var(--ch); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.bar-top button svg, .rail button svg, #form svg { width: 20px; height: 20px; flex: 0 0 auto; }
.bar-top .tl, .rail .tl, #form .tl, #parts-btn .tl { font-size: 11px; }
/* a top-bar button whose sheet or menu is open reads as on, as a picked tool does (Print is a plain button: nothing about it is "on") */
.bar-top button[aria-expanded="true"] { background: var(--pressed); color: #3a2f28; box-shadow: inset 0 0 0 1.5px rgba(58, 47, 40, 0.7); }
.bar-top button[hidden] { display: none; }
#form { position: fixed; z-index: 1; left: calc(12px + 60px + 4px); top: var(--top); }
#form[aria-pressed="true"] { background: var(--pressed); color: #3a2f28; }
.rail { position: fixed; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.tv { font: 10px/1 var(--mono); opacity: 0.8; }
#form .tv, #mirror .tv { min-height: 10px; }
/* Mirror is a switch beside the tools, not one of them: set apart by a rule, and filled when on. */
#mirror { position: relative; margin-left: 6px; height: 58px; gap: 1px; }
#mirror::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 1px; background: var(--soft); }
#mirror[aria-pressed="true"] { background: var(--ink); color: var(--bg2); box-shadow: none; }
/* Hook and Stretch: what each does stays under its name. */
#grabs button { display: flex; flex-direction: column; justify-content: center; height: 48px; gap: 2px; padding: 0 16px; border-radius: 10px; }
#grabs .tl { font-size: 14px; font-weight: 600; }
#grabs .cap { font-size: 11px; opacity: 0.8; }
/* The New box: one card, like the sheet. */
#shapes { z-index: 2; background: #fbf4ea; color: #3a2f28; padding: 12px; border-radius: 12px; border: 1px solid rgba(58, 47, 40, 0.18); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22); }
#shapes .pop-head, #shapes .pop-caption { background: none; color: #3a2f28; padding: 0 6px; }
#shapes .row2 button { background: rgba(58, 47, 40, 0.08); color: #3a2f28; }
#shapes .row2 button[aria-pressed="true"] { background: #3a2f28; color: #fff; box-shadow: none; }
#shapes .detail-row { width: 100%; color: #5a4d44; padding: 0 6px 8px; border-bottom: 1px solid rgba(58, 47, 40, 0.14); }
#shapes .detail-row[hidden] { display: none; }
#shapes .detail-row input { accent-color: #3a2f28; }
/* Sheets have a heading and a way to close them. */
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sheet-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.sheet .x { width: 44px; height: 44px; flex: 0 0 auto; background: rgba(58, 47, 40, 0.08); color: #3a2f28; font-size: 22px; line-height: 1; }
.sheet .dims { font: 13px/1.4 var(--mono); text-align: center; color: #3a2f28; margin: 0; }
.helpsheet { padding-bottom: 14px; gap: 4px; }
.helpsheet h3 { font-size: 13px; font-weight: 700; margin: 10px 0 2px; color: #5a4d44; }
.helpsheet dl { margin: 0; }
.helpsheet dl div { display: grid; grid-template-columns: 44% 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(58, 47, 40, 0.1); font-size: 13px; line-height: 1.35; }
.helpsheet dt { font-weight: 600; }
.helpsheet dd { margin: 0; }
.helpsheet .tourbtn { width: auto; justify-self: center; padding: 0 18px; border-radius: 12px; background: #3a2f28; color: #fff; }
/* The menus by the cube: views (with their keys) and looks (the one in use dotted). */
.views kbd { margin-left: auto; padding-left: 12px; font: 11px var(--mono); opacity: 0.7; }
.views.looks { left: 12px; top: calc(var(--top) + var(--ch) + 6px); max-height: calc(100dvh - var(--top) - var(--ch) - 6px - var(--sab) - 12px); }
.views [role="menuitemradio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.views [aria-checked="true"]::before { background: currentColor; }
.looks .ref-op { display: flex; gap: 8px; align-items: center; padding: 4px 12px; font-size: 13px; }
.looks .ref-op[hidden] { display: none; }
.looks .ref-op input { width: 100px; accent-color: #3a2f28; }
/* On a phone nine 40 px swatches don't fit one row: two even rows instead of a lone "+". */
@media (max-width: 420px) { #swatches { max-width: 236px; } }
/* Focus: every control steps aside but the one that brings them back, which sits in the top right corner. (visibility, not opacity:
   hidden controls can't be tapped or tabbed to.) The message stays, out of the way of the hands. */
body.focus .bar-top, body.focus .bar, body.focus .size, body.focus .above, body.focus #viewcube, body.focus #form, body.focus .readout,
body.focus .kindtag, body.focus .views, body.focus .numpad { visibility: hidden; }
body.focus #undo, body.focus #redo { display: none; }
body.focus .rail { top: max(12px, env(safe-area-inset-top)); transform: none; }
body.focus #focus { opacity: 0.75; }
body.focus .hint { bottom: calc(var(--sab) + 24px) !important; }

/* the tall sliders (app.js draws them: a tablet's, and a phone's held upright) */
/* (the track, its fill and the knob all hang from the middle, so they line up whatever the width; the whole slider is the hit area,
   the knob only marks the value: 20 px, its travel inset by half of it at each end, as app.js reads a press) */
.vs { --kn: 20px; position: relative; width: 44px; height: var(--slh); border-radius: 12px; background: var(--chip); touch-action: none; cursor: ns-resize; }
.vs::before { content: ""; position: absolute; left: 50%; top: calc(var(--kn) / 2); bottom: calc(var(--kn) / 2); width: 4px; margin-left: -2px; border-radius: 2px; background: rgba(58, 47, 40, 0.18); }
.vs i { position: absolute; left: 50%; bottom: calc(var(--kn) / 2); width: 4px; margin-left: -2px; height: calc((100% - var(--kn)) * var(--k, 0.5)); border-radius: 2px; background: var(--ink); }
.vs b { position: absolute; left: 50%; bottom: calc((100% - var(--kn)) * var(--k, 0.5)); width: var(--kn); height: var(--kn); margin-left: calc(var(--kn) / -2); border-radius: 50%; background: var(--bg2); box-shadow: 0 0 0 2px var(--ink), 0 1px 4px rgba(0, 0, 0, 0.2); }
.vs:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* ---- a tablet (an iPad, held either way): the tools in a column by the pen hand, Size, Strength and Steady as tall sliders by the other hand
   with Undo, Redo and Focus under them; turned on its side, the tool's options stand in a column beside the tools; upright, along the foot.
   Everything is pinned from the top, sized for the height Safari leaves (its bars take about 100 px), and kept 28 px in from the sides,
   out of Safari's back-swipe. Left-handed (Help) swaps the sides. ---- */
.vs, #hold-smooth { display: none; }
@media (min-width: 700px) and (min-height: 560px) and (any-pointer: coarse) {
  :root { --above: 96px; --side: 28px; --tt: 58px; --top: max(12px, env(safe-area-inset-top)); }
  #viewcube { left: calc(var(--side) - 11px); }
  .seebar { left: calc(var(--side) + 64px); }
  .bar-top, .readout, .kindtag { right: var(--side); }
  .bar { left: auto; right: var(--side); top: calc(var(--top) + 128px); bottom: auto; transform: none; width: auto; flex-direction: column; gap: 10px; }
  .bar .tools { flex: 0 0 auto; flex-direction: column; gap: 6px; }
  .tools button, #mirror, #hold-smooth { flex: 0 0 auto; width: 62px; max-width: none; height: var(--tt); }
  #hold-smooth { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 10px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
  #hold-smooth svg { width: 22px; height: 22px; }
  #hold-smooth[aria-pressed="true"] { background: var(--ink); color: var(--bg2); }
  #mirror { margin: 0; }
  #mirror::before { left: 14px; right: 14px; top: -6px; bottom: auto; width: auto; height: 1px; }
  .tv { font-size: 12px; }
  /* the sliders: only the ones the tool uses, sharing the column's height (one alone is tall, three are shorter) */
  .size { --n: 1; --slh: clamp(56px, calc((100dvh - var(--sab) - 80px - 96px - var(--n) * 52px - 28px) / var(--n)), 180px); left: calc(var(--side) - 6px); top: calc(var(--top) + 80px); bottom: auto; transform: none; width: 66px; display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; }
  .size:has(.sl:not([hidden]) ~ .sl:not([hidden])) { --n: 2; }
  .size:has(.sl:not([hidden]) ~ .sl:not([hidden]) ~ .sl:not([hidden])) { --n: 3; }
  .size .sl { display: grid; justify-items: center; text-align: center; gap: 2px; max-width: none; }
  .size .sl span { flex-direction: column; gap: 2px; min-height: 0; }
  .size .sl input { display: none; }
  .vs { display: block; }
  .rail { left: var(--side); right: auto; top: auto; bottom: calc(var(--sab) + 18px); transform: none; display: flex; gap: 6px; }
  /* Hold (smooth) is the one a thumb keeps pressed while the pen draws: nearest the edge the hand holds */
  #hold-smooth { order: -1; }
  body.lefty .rail { flex-direction: row-reverse; }
  .rail button { width: 62px; }
  /* Focus leaves its own button where it was (Undo and Redo keep their places, unseen) */
  body.focus .rail { top: auto; bottom: calc(var(--sab) + 18px); left: var(--side); right: auto; }
  body.focus #undo, body.focus #redo { display: flex; visibility: hidden; }
  /* the option rows, upright: along the foot above Undo's row, between the two columns, the shape modes wrapping rather than scrolling */
  .above { max-width: calc(100vw - 2 * (var(--side) + 76px)); }
  #cuts .modes, #cuts .mods { max-width: 100%; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .hint { bottom: calc(var(--sab) + 96px); }
  .sheet { width: min(440px, calc(100vw - 2 * var(--side))); }
  .numpad { bottom: calc(var(--sab) + 96px); }
  /* New opens from New: a card under the top right buttons */
  #shapes { top: calc(var(--top) + 80px); bottom: auto !important; left: auto; right: var(--side); transform: none; max-height: calc(100dvh - var(--sab) - 100px); overflow-y: auto; z-index: 3; }
  /* short screens (an iPad on its side in Safari: about 640-700 px): smaller tool tiles */
  @media (max-height: 760px) {
    :root { --tt: 48px; }
    /* two tall sliders (Size, Strength); Steady keeps its place as a value to tap and type */
    /* Look stands beside the cube, so the sliders start higher */
    .size { top: calc(var(--top) + 80px); --slh: clamp(56px, calc((100dvh - var(--sab) - 80px - 96px - var(--n) * 52px - 28px) / var(--n)), 200px); }
    body.lefty .size { top: calc(var(--top) + 128px); --slh: clamp(56px, calc((100dvh - var(--sab) - 128px - 96px - var(--n) * 52px - 28px) / var(--n)), 200px); }
    .size #steady-row .vs { display: none; }
    .bar .tools { gap: 4px; }
    .tools button svg, #mirror svg, #hold-smooth svg { width: 20px; height: 20px; }
    .tools .tl, #mirror .tl, #hold-smooth .tl { font-size: 11px; }
    #mirror .tv, #hold-smooth .tv { display: none; }
  }
  /* left-handed: the tools (and their options) on the left, the sliders and Undo on the right */
  body.lefty .bar { right: auto; left: var(--side); }
  body.lefty .size { left: auto; right: calc(var(--side) - 6px); }
  body.lefty .rail, body.lefty.focus .rail { left: auto; right: var(--side); }
}
/* on its side: the options column beside the tools */
#opts { display: none; }
@media (min-width: 700px) and (min-height: 560px) and (any-pointer: coarse) and (orientation: landscape) {
  #opts { display: flex; flex-direction: column; gap: 10px; position: fixed; z-index: 1; right: calc(var(--side) + 62px + 14px); top: calc(var(--top) + 142px); width: 236px; max-height: calc(100dvh - var(--sab) - 142px - var(--top) - 18px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--bg2) 72%, transparent); }
  .hint { bottom: calc(var(--sab) + 92px); }
  body.lefty #opts { right: auto; left: calc(var(--side) + 62px + 14px); }
}
/* Help's settings: switches, one per row */
.helpsheet .prefs { display: grid; gap: 6px; margin-top: 6px; }
.helpsheet .prefs button { width: 100%; height: auto; min-height: 44px; border-radius: 10px; padding: 8px 12px; background: rgba(58, 47, 40, 0.08); color: #3a2f28; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; font-size: 14px; }
.helpsheet .prefs button b { font: 600 12px var(--mono); padding: 4px 10px; border-radius: 10px; background: rgba(58, 47, 40, 0.12); }
.helpsheet .prefs button[aria-pressed="true"] { box-shadow: none; background: rgba(58, 47, 40, 0.08); }
.helpsheet .prefs button[aria-pressed="true"] b { background: #3a2f28; color: #fff; }
.helpsheet .prefs [hidden] { display: none; }
.sl button.chip[hidden] { display: none; } /* (its "all: unset" would otherwise show it hidden) */
/* A sheet open (Print, Help): the floating message steps aside rather than float over its text. */
body:has(.sheet:not([hidden]):not(.partsheet)) .hint { visibility: hidden; } /* (the Parts panel talks through the hint: it stays) */
/* The New box: Detail of this clay, folded away under its own line. Engine pills carry what each is for. */
#shapes .detail-box { width: 100%; font-size: 13px; color: #5a4d44; }
#shapes .detail-box summary { cursor: pointer; padding: 10px 6px; font-weight: 600; min-height: 44px; box-sizing: border-box; }
#shapes .detail-box[hidden] { display: none; }
#shapes .row2 button[data-engine] { display: flex; flex-direction: column; justify-content: center; height: 52px; gap: 2px; border-radius: 10px; }
#shapes .row2 button[data-engine] .tl { font-size: 14px; font-weight: 600; }
#shapes .row2 button[data-engine] .cap { font-size: 11px; opacity: 0.8; }
/* The print sheet: the printer's own settings folded under one line */
.sheet .more { display: grid; gap: 8px; }
.sheet .more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #5a4d44; min-height: 44px; display: flex; align-items: center; }
.sheet .more[open] > summary { margin-bottom: 2px; }
.sheet .more > .row, .sheet .more > p { margin-left: 0; }
.sheet .more > summary, #shapes .detail-box summary { list-style: none; }
.sheet .more > summary::-webkit-details-marker, #shapes .detail-box summary::-webkit-details-marker { display: none; }
.sheet .more > summary::before, #shapes .detail-box summary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.sheet .more[open] > summary::before, #shapes .detail-box[open] summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .sheet .more > summary::before, #shapes .detail-box summary::before { transition: none; } }

/* ---- the side column (#opts), a tablet on its side or a computer's wide screen: the tool's row and all its settings, the kinds of
   shaping as five tabs over that kind's modes ---- */
@media (min-width: 960px) and (min-height: 600px) and (pointer: fine) {
  /* the tools in a column at the right edge, their options in the column beside them (not across the screen at the foot);
     Undo, Redo and Focus down the left edge, under Look and Parts; the sliders stay along the foot */
  .bar { left: auto; right: 12px; top: calc(var(--top) + 128px); bottom: auto; transform: none; width: auto; flex-direction: column; gap: 10px; }
  .bar .tools { flex: 0 0 auto; flex-direction: column; gap: 4px; }
  .tools button, #mirror { flex: 0 0 auto; width: var(--tw); max-width: none; }
  #mirror { margin: 0; }
  #mirror::before { left: 12px; right: 12px; top: -6px; bottom: auto; width: auto; height: 1px; }
  .rail { left: 12px; right: auto; }
  body.focus .rail { left: auto; right: 12px; }
  .size { bottom: calc(var(--sab) + 16px); }
  body #opts #cuts .fams { display: grid !important; grid-template-columns: repeat(5, auto); gap: 3px; } /* (the five kinds in one row) */
  body #opts #cuts .fams button { padding: 0 6px; font-size: 12.5px; }
  #opts { display: flex; flex-direction: column; gap: 10px; position: fixed; z-index: 1; right: calc(12px + var(--tw) + 10px); top: calc(var(--top) + 128px); width: 284px; max-height: calc(100dvh - var(--top) - 128px - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--bg2) 72%, transparent); }
  body.lefty .bar { right: auto; left: 12px; }
  body.lefty #opts { right: auto; left: calc(12px + var(--tw) + 10px); }
  body.lefty .rail { left: auto; right: 12px; }
}
/* ---- a wide screen (a computer, a tablet on its side or a big one upright): Print, Help and Saved open under the top bar at the
   right, by the buttons that open them, and the clay steps aside out of their way rather than sit under them; New's card too ---- */
@media (min-width: 760px) {
  .sheet:not(.partsheet):not(.confirm) { left: auto; right: 12px; transform: none; top: calc(var(--top) + var(--ch) + 10px); width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - var(--top) - var(--ch) - 10px - var(--sab) - 12px); }
  #shapes { top: calc(var(--top) + var(--ch) + 10px); bottom: auto !important; left: auto; right: 12px; transform: none; max-height: calc(100dvh - var(--sab) - var(--top) - var(--ch) - 22px); overflow-y: auto; z-index: 3; }
  .sheet .row { grid-template-columns: 76px 1fr; }
}
/* ---- strips, not pills: a group of buttons shares one backing (the tools, Undo's rail, Look and Parts, Hook and Stretch) and
   each button in it is a flat icon over its word, the whole tile still its hit area; only the one picked (or on) is filled ---- */
.seebar { position: fixed; z-index: 1; left: calc(12px + 60px + 4px); top: var(--top); display: flex; gap: 0; }
.seebar > #form, .seebar > #parts-btn { position: static; }
.bar .tools, .rail, .seebar, #grabs, .bar-top { background: var(--chip); border-radius: 12px; padding: 2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bar .tools, .seebar, #grabs { gap: 0 !important; }
.rail { gap: 0; }
.tools button, .rail button, .seebar button, #grabs button, .bar-top button { background: transparent; border-radius: 10px; }
.tools button[aria-pressed="true"], .seebar button[aria-pressed="true"], .seebar button[aria-expanded="true"], #grabs button[aria-pressed="true"], .bar-top button[aria-expanded="true"] { background: var(--pressed); box-shadow: none; }
#hold-smooth[aria-pressed="true"] { background: var(--ink); }
.rail button:disabled { opacity: 0.35; }
/* Mirror stays a switch of its own beside the strip: filled when on */
#mirror { border-radius: 10px; }
/* the marks in a sheet's head: a flat icon, no disc */
.sheet .x, .tsheet .x, #shapes .new-head .x { background: transparent; box-shadow: none; border-radius: 10px; }
body.focus .seebar { visibility: hidden; }
/* the shape modes along a phone's row: one strip too */
#toolrow #cuts .modes { background: var(--chip); border-radius: 12px; padding: 2px; gap: 0; }
#toolrow #cuts .modes .tile { background: transparent; }
#toolrow #cuts .modes .tile[aria-pressed="true"] { background: var(--pressed); box-shadow: none; }
/* ---- a phone held upright: Size and Strength (and Depth, Steady) as thin tall sliders down the left edge, Procreate's way, so the foot
   holds only the tools and the tool's row and the clay keeps the middle; each slider shares the column with the others the tool uses ---- */
@media (max-width: 699px) and (orientation: portrait) {
  :root { --above: 74px; }
  .size { --n: 1; --slh: clamp(44px, calc((100dvh - var(--sab) - var(--above) - 64px - var(--top) - var(--ch) - 16px - var(--n) * 40px - (var(--n) - 1) * 10px) / var(--n)), 180px);
    left: 6px; top: calc(var(--top) + var(--ch) + 14px); bottom: auto; transform: none; width: 48px; display: grid; grid-auto-flow: row; gap: 10px; }
  .size:has(.sl:not([hidden]) ~ .sl:not([hidden])) { --n: 2; }
  .size:has(.sl:not([hidden]) ~ .sl:not([hidden]) ~ .sl:not([hidden])) { --n: 3; }
  .size .sl, .size #steady-row:not([hidden]) { display: grid; justify-items: center; text-align: center; gap: 2px; max-width: none; font-size: 11px; }
  .size .sl[hidden] { display: none; }
  .size .sl span { flex-direction: column; gap: 0; min-height: 0; }
  .size .sl button.chip { font-size: 11px; padding: 6px 0; margin: -6px 0; min-height: 0; }
  .size .sl input { display: none; }
  .vs { display: block; width: 40px; }
  body.lefty .size { left: auto; right: 6px; }
}
/* a short phone (an SE): Steady is a value to tap and type, not a third slider, so Size and Strength keep their length */
@media (max-width: 699px) and (orientation: portrait) and (max-height: 700px) {
  .size:has(#steady-row:not([hidden])) { --n: 1.3; }
  .size:has(.sl:not([hidden]) ~ .sl:not([hidden]) ~ #steady-row:not([hidden])) { --n: 2.15; }
  #steady-row .vs { display: none; }
}
/* a mouse: smaller tiles than a finger needs */
@media (pointer: fine) { :root { --cw: 46px; --ch: 46px; --tw: 52px; --th: 50px; } }
/* the message stands over the clay's middle (app.js keeps --room-l and --room-r to the room it fits the clay in) */
.hint { left: var(--room-l, 0px); right: var(--room-r, 0px); }
#opts:not(:has(> .above:not([hidden]), > .ts-body > .ts-sec:not([hidden]))) { display: none; }
#opts [hidden] { display: none !important; }
#opts .above { position: static; transform: none; width: auto; max-width: none; bottom: auto !important; justify-content: flex-start; }
#opts #cuts { flex-direction: column; align-items: stretch; gap: 8px; }
#opts #cuts .fam, #opts #cuts .more-modes { display: none !important; }
#opts #cuts .fams { display: flex !important; flex-wrap: wrap; gap: 4px; }
#opts #cuts .fams button { flex: 1 1 auto; height: 36px; min-width: 0; padding: 0 8px; border-radius: 12px; font-size: 13px; }
#opts #cuts .modes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: none; align-content: start; } /* (fixed columns: auto-fill measured its height as one column) */
#opts .ch-os { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#opts .ch-os .ch-o { padding: 0 4px; white-space: nowrap; }
#opts .ch-o, #opts .act { height: 38px; padding: 0 10px; justify-content: center; }
#opts #grabs { flex-direction: row !important; }
#opts #grabs button { flex: 1 1 0; height: 52px; padding: 0 8px; }
#opts #cuts .modes button { min-width: 0; padding: 6px 2px; }
#opts .fam-modes.on { display: contents; }
#opts #swatches { display: grid; grid-template-columns: repeat(5, 40px); gap: 6px; justify-content: start; }
#opts #paintopts { justify-content: flex-start; }
#opts #grabs { align-items: stretch; }
#opts .ts-body { padding: 0; overflow: visible; gap: 14px; }
#opts .ts-title { display: block; margin: 4px 0 -4px; font-size: 13px; font-weight: 700; color: var(--ink); }
#opts .ts-sec { color: var(--ink); }
#opts .ch-o, #opts .act { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); }
#opts .ch-o[aria-checked="true"], #opts .act[aria-pressed="true"] { background: var(--ink); color: var(--bg2); box-shadow: none; }
#opts .ch-l { color: var(--label); }
#opts .psliders { grid-template-columns: 1fr; }
#opts .spill, #opts .spill-l { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 700px) and (min-height: 560px) and (any-pointer: coarse) and (orientation: landscape) {
}

/* ---- the tool's row: one row over the sliders, the tool's own (Shape's kind and its modes, Paint's colours, Hook and Stretch), with
   Settings at its end ---- */
#toolrow { flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: center; }
#toolrow > .above { position: static; transform: none; bottom: auto; width: auto; max-width: none; flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
#toolrow > #swatches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; }
#toolrow > #swatches::-webkit-scrollbar { display: none; }
#ts-open { flex: 0 0 auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 62px; height: 52px; padding: 4px 10px; border-radius: 10px; }
#ts-open[hidden] { display: none; }
#ts-open svg { width: 22px; height: 22px; }
#ts-open .tl { font-size: 11px; font-weight: 600; line-height: 1; }
#ts-open[aria-expanded="true"] { background: var(--pressed); color: #3a2f28; box-shadow: inset 0 0 0 1.5px rgba(58, 47, 40, 0.7); }
/* (the colour a Block, Tube or Revolve builds in: a small swatch in the button's corner, ringed, not a badge) */
#ts-open .dot { position: absolute; top: 5px; right: 6px; width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--bg2), 0 0 0 2.5px rgba(58, 47, 40, 0.5); }
#toolrow > #cuts { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
#cuts .fam { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; min-width: 70px; padding: 0 12px; border-radius: 10px; background: var(--ink); color: var(--bg2); }
#cuts .fam .tl { font-size: 13px; font-weight: 700; line-height: 1; }
#cuts .fam .tv { font-size: 11px; line-height: 1; opacity: 0.85; }
#cuts .fams { display: flex; gap: 6px; }
#cuts .fams[hidden] { display: none; }
#cuts .fams button { flex: 0 0 auto; height: 52px; padding: 0 12px; border-radius: 10px; font-weight: 600; }
#cuts .fams button[aria-current="true"] { background: var(--pressed); color: #3a2f28; box-shadow: inset 0 0 0 1.5px rgba(58, 47, 40, 0.7); }
#toolrow #cuts .modes, #toolrow #cuts .fams { flex: 0 1 auto; min-width: 0; max-width: none; overflow-x: auto; scrollbar-width: none; }
#toolrow #cuts .modes::-webkit-scrollbar, #toolrow #cuts .fams::-webkit-scrollbar { display: none; }
.fam-modes { display: none; gap: 6px; }
.fam-modes.on { display: flex; }
.fam-h { display: none; }
#cuts .modes .tile { min-height: 52px; min-width: 54px; }
#cuts .more-modes { flex: 0 0 auto; height: 52px; min-width: 44px; padding: 0 10px; border-radius: 10px; font: 600 13px var(--mono); }
#cuts .more-modes[hidden] { display: none; }
/* a part of the row with more than fits scrolls, faded at the end that has more */
#toolrow .spill { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
#toolrow .spill-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 22px); mask-image: linear-gradient(to right, transparent, #000 22px); }
#toolrow .spill.spill-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
@media (max-width: 440px) { #toolrow #swatches { gap: 4px; } #toolrow #swatches .sw, #toolrow #swatches .sw.plus { width: 40px; min-width: 40px; height: 40px; } }
/* choosing a kind: the five fill the row (picking one shows its modes) */
#cuts .fam[aria-expanded="true"], #toolrow:has(#cuts .fams:not([hidden])) #ts-open, #toolrow:has(#cuts .fams:not([hidden])) .more-modes { display: none; }

/* ---- the settings sheet: it stands on the tool's row (placed by app.js), as tall as its settings need up to a peek, taller on a
   drag; no dimming, the clay above stays live. Its own light colours, in either theme. ---- */
.tsheet {
  --ink: #3a2f28; --label: #4a3e36; --soft: rgba(58, 47, 40, 0.58); --ring: rgba(58, 47, 40, 0.72); --chip: rgba(58, 47, 40, 0.08); --bg2: #fbf4ea; --pressed: #fff6ec;
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + var(--above) + 64px);
  width: min(560px, calc(100vw - 16px)); height: auto; max-height: var(--ts-peek, 240px);
  display: flex; flex-direction: column; border-radius: 12px; background: #fbf4ea; color: #3a2f28;
  border: 1px solid rgba(58, 47, 40, 0.18); box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.18); transition: max-height 0.18s;
}
.tsheet.tall { max-height: var(--ts-max, 62dvh); }
.tsheet[hidden] { display: none; }
.ts-head { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 6px; padding: 14px 10px 6px 16px; touch-action: none; cursor: grab; }
.ts-head .grip { position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(58, 47, 40, 0.3); }
.ts-head h2 { flex: 1 1 auto; font-size: 15px; font-weight: 700; margin: 0; }
.tsheet .x[hidden] { display: none; }
.tsheet .x { width: 44px; height: 44px; flex: 0 0 auto; background: rgba(58, 47, 40, 0.08); color: #3a2f28; font-size: 20px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(58, 47, 40, 0.5); }
#ts-tall { transition: transform 0.18s; }
.tsheet.tall #ts-tall { transform: rotate(180deg); }
.tsheet button:focus-visible { outline-color: #3a2f28; }
.ts-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; display: grid; gap: 14px; align-content: start; }
.ts-title { display: none; }
.ts-sec[hidden], .ts-body > [hidden] { display: none !important; }
.ts-sec, .mods.ts-sec { display: grid; gap: 14px; justify-content: stretch; max-width: none; overflow: visible; padding: 0; }
.ts-colour { display: grid; gap: 6px; }
.ts-colour #swatches { position: static; transform: none; width: auto; max-width: none; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.tsheet .sw { box-shadow: inset 0 0 0 1px rgba(58, 47, 40, 0.3); }
.tsheet .sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #3a2f28; }
.choice { display: grid; gap: 6px; }
.choice[hidden] { display: none; }
.ch-l { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #5a4d44; }
.ch-os { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-o, .act { width: auto; height: 44px; min-width: 44px; padding: 0 14px; border-radius: 8px; background: rgba(58, 47, 40, 0.06); color: #3a2f28; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px rgba(58, 47, 40, 0.5); }
.ch-o[aria-checked="true"] { background: #3a2f28; color: #fff; box-shadow: none; }
.act { background: transparent; }
.act[aria-pressed="true"] { background: #3a2f28; color: #fff; box-shadow: none; }
.act[hidden], .ch-o[hidden] { display: none; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.acts[hidden] { display: none; }
.claybox { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(58, 47, 40, 0.15); }
.claybox[hidden] { display: none; }
.claybox .act, .ts-sec > .act { justify-self: start; }
.psliders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tsheet .sl, .tsheet .pslider { color: #4a3e36; }
.tsheet .sl input { accent-color: #3a2f28; }
.wallbox { display: flex; align-items: center; gap: 10px; color: #3a2f28; }
.wallbox input { flex: 1 1 auto; accent-color: #3a2f28; }
.wallbox b { font: 600 12px var(--mono); }
.tsheet .sw.plus { color: #3a2f28; border-color: #4a3e36; }
@media (prefers-reduced-motion: reduce) { .tsheet, #ts-tall { transition: none; } }

/* More (Share and Help behind it): a phone's. Its menu drops from the top bar's right end. */
/* the menu: one button at the top right, its list under it (New, Save, Share, Print, Help as rows, icon then word) */
#menu-btn { width: var(--ch); }
#menu-btn svg { width: 22px; height: 22px; }
.views.filemenu { left: auto; right: 12px; top: calc(var(--top) + var(--ch) + 6px); min-width: 210px; }
.filemenu button { box-shadow: none; }
.filemenu button .tl { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.filemenu button[aria-expanded="true"] { background: rgba(58, 47, 40, 0.1); }
.views svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* the marks drawn in place of ×, ▴ and + */
.x svg, #numpad-x svg { width: 18px; height: 18px; }
.sw.plus svg { width: 18px; height: 18px; }
#cuts .fam .tv svg { width: 10px; height: 10px; vertical-align: -1px; }
#check-note { scroll-margin-bottom: 120px; } /* (brought into view above the sheet's foot after a check) */

/* ---- a phone: the Undo rail stands clear above the tool's row, and the sheet and the message leave it room ---- */
@media (max-width: 699px) {
  /* seven tools and Mirror across a phone: the tiles share the bar, their words a size smaller */
  .bar { gap: 6px; width: calc(100vw - 8px); }
  .tools button { min-width: 0; padding: 0 1px; }
  .tools .tl, #mirror .tl { font-size: 10px; letter-spacing: -0.01em; }
  #mirror { width: 48px; margin-left: 4px; }
  #mirror::before { left: -6px; }
  /* Shape's row: the kind, four modes and Settings fit across a phone without a "+2" laid over the last */
  #cuts .fam { min-width: 0; padding: 0 9px; height: 48px; }
  #cuts .modes .tile { min-width: 50px; min-height: 48px; padding: 5px 5px 4px; }
  #ts-open { min-width: 54px; height: 48px; padding: 4px 6px; }
  #toolrow { gap: 6px; } #toolrow > #cuts { gap: 6px; }
  /* the numbers are the Print sheet's business: on a phone they don't stand over the clay */
  .readout { display: none; }
  /* what Hook and Stretch do is their title and the message they say */
  #grabs .cap { display: none; }
  #grabs button { height: var(--chip-h); padding: 0 18px; }
  .looks kbd { display: none; }
  /* Print, Help and Saved rise from the foot, the clay left in view above them (it steps up out of their way) */
  .sheet:not(.partsheet):not(.confirm) { top: auto; bottom: calc(var(--sab) + 8px); left: 8px; right: 8px; width: auto; transform: none; max-height: min(54dvh, calc(100dvh - var(--top) - var(--sab) - 120px)); }
  body.parts-on .rail { bottom: calc(var(--sab) + 92px + 34dvh); }
  .rail { top: auto; transform: none; bottom: calc(var(--sab) + var(--above) + 64px); }
  body.focus .rail { bottom: auto; }
  .tsheet { left: 8px; transform: none; width: calc(100vw - 16px - 72px); }
  .hint { padding: 0 74px 0 16px; }
  .modtag { top: calc(max(12px, env(safe-area-inset-top)) + 132px); }
}

/* ---- a held modifier (S, Hold smooth, Alt): a tag at the top, and the tool's button marked ---- */
.modtag { position: fixed; z-index: 5; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 8px); transform: translateX(-50%); padding: 7px 16px; border-radius: 10px; background: var(--ink); color: var(--bg2); font-size: 14px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.modtag[hidden] { display: none; }
.tools button.modded { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 3px var(--bg2), 0 0 0 5px var(--ink); }

/* ---- the New card's head: a title and a ×, as the Print and Help sheets have ---- */
#shapes .new-head { align-self: stretch; width: 100%; }
#shapes .new-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: #3a2f28; }
#shapes .new-head .x { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(58, 47, 40, 0.08); color: #3a2f28; font-size: 20px; line-height: 1; }
body.docked #toolrow, body.docked #toolsheet { display: none; }
/* the narrowest phones: seven buttons in the bar fit */
@media (max-width: 340px) { .bar { gap: 6px; } .tools { gap: 3px; } .tools button, #mirror { min-width: 40px; } .tools button .tl, #mirror .tl { font-size: 11px; } #mirror { margin-left: 3px; } #mirror::before { left: -5px; } }

/* ---- Parts (partsui.js): its button under Look, its panel down the left, a question asked over all ---- */
#parts-btn { position: fixed; z-index: 1; left: calc(12px + 60px + 4px + var(--cw) + 4px); top: var(--top); width: var(--cw); height: var(--ch); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#parts-btn svg { width: 20px; height: 20px; }
#parts-btn .tl { font-size: 12px; font-weight: 600; line-height: 1; }
#parts-btn .tv { font: 10.5px/1 var(--mono); opacity: 0.8; min-height: 10px; }
#parts-btn[aria-expanded="true"] { background: var(--pressed); color: #3a2f28; }
body.focus #parts-btn { display: none; }
.sheet.partsheet { left: 92px; transform: none; top: calc(max(12px, env(safe-area-inset-top)) + 84px); width: min(340px, calc(100vw - 108px)); max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - 84px - var(--sab) - 110px); gap: 12px; }
/* (clipped to its own box: its scrolled list otherwise left a pale slab drawn over the clay in Chrome) */
.sheet.partsheet { clip-path: inset(0 round 12px); box-shadow: none; border-color: rgba(58, 47, 40, 0.3); }
.partsheet .sheet-head { position: sticky; top: -14px; margin-top: -14px; padding: 14px 0 6px; background: #fbf4ea; z-index: 1; }
.pl-intro { margin: 0; font-size: 14px; line-height: 1.4; color: #4a3e36; }
.parts-body { display: grid; gap: 14px; padding-bottom: 14px; }
.pl-list { display: grid; gap: 4px; }
.pl-row { display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: 10px; }
.pl-row[aria-current="true"] { background: rgba(58, 47, 40, 0.08); }
.pl-pick { flex: 1 1 auto; min-width: 0; width: auto; height: auto; min-height: 44px; border-radius: 12px; padding: 4px 10px; display: grid; justify-items: start; text-align: left; background: transparent; color: #3a2f28; }
.pl-pick[aria-pressed="true"] { background: #3a2f28; color: #fff; box-shadow: none; }
.pl-nm { font-size: 14px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sub { font-size: 11px; opacity: 0.8; }
.pl-ic { flex: 0 0 auto; width: 40px; height: 44px; border-radius: 10px; background: transparent; color: #3a2f28; box-shadow: none; }
.pl-ic svg { width: 20px; height: 20px; }
.pl-ic.off { opacity: 0.7; }
.pl-ic:disabled { opacity: 0.35; }
.pl-this, .pl-add { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(58, 47, 40, 0.15); }
.pl-name { display: grid; gap: 6px; }
.pl-name input { height: 40px; border-radius: 12px; border: 1px solid rgba(58, 47, 40, 0.35); padding: 0 12px; font: inherit; color: #3a2f28; background: #fff; -webkit-user-select: text; user-select: text; }
.pl-blend span { color: #4a3e36; }
.pl-blend input { accent-color: #3a2f28; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-acts .act[aria-pressed="true"] { background: #3a2f28; color: #fff; }
.pl-add .act:disabled { opacity: 0.45; }
body.parts-on #toolrow, body.parts-on #toolsheet { display: none; }
body.parts-on canvas { cursor: pointer; }
body.parts-drag canvas { cursor: move; }
.sheet.confirm { z-index: 8; top: 30%; width: min(420px, calc(100vw - 32px)); padding: 18px; gap: 14px; }
.sheet.confirm p { margin: 0; font-size: 15px; line-height: 1.4; color: #3a2f28; }
.sheet.confirm .acts { justify-content: flex-end; }
.sheet.confirm .act[hidden] { display: none; }
@media (max-width: 699px) {
  /* (a phone: along the foot, over the sliders' place, so the clay above it stays in view to tap and drag) */
  .sheet.partsheet { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--sab) + 84px); max-height: 34dvh; }
  body.parts-on .size { visibility: hidden; }
  body.parts-on .hint, body.lefty.parts-on .hint { padding: 0 16px; bottom: calc(var(--sab) + 92px + 34dvh); } /* (over the panel, not under it) */
  .pl-ic { width: 38px; }
}
@media (min-width: 700px) and (min-height: 560px) and (any-pointer: coarse) {
  #parts-btn { left: calc(var(--side) + 64px + var(--cw) + 4px); } /* (beside Look, beside the cube: the sliders stand under them) */
  .sheet.partsheet { left: calc(var(--side) + 76px); top: calc(var(--top) + var(--ch) + 10px); } /* (beside the sliders, under Look and Parts) */
  body.lefty .sheet.partsheet { left: auto; right: calc(var(--side) + 128px); }
}

/* ---- Saved (savedui.js): its button beside New, its sheet under the bar ---- */
.sheet.savedsheet { left: auto; right: 16px; transform: none; width: min(380px, calc(100vw - 32px)); gap: 10px; clip-path: inset(0 round 12px); box-shadow: none; border-color: rgba(58, 47, 40, 0.3); }
.savedsheet .sheet-head { position: sticky; top: -14px; margin-top: -14px; padding: 14px 0 6px; background: #fbf4ea; z-index: 1; }
.saved-body { display: grid; gap: 12px; padding-bottom: 16px; }
.saved-this { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(58, 47, 40, 0.15); }
.saved-this .act.primary { background: #3a2f28; color: #fff; }
.saved-this .act.primary:disabled { background: rgba(58, 47, 40, 0.12); color: #3a2f28; opacity: 0.75; }
.saved-status { margin: 0; font-size: 13px; color: #5a4d44; }
.saved-status.bad { color: #8a2f1f; font-weight: 600; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.saved-row { display: flex; align-items: center; gap: 4px; border-radius: 10px; padding: 2px; }
.saved-row[aria-current="true"] { background: rgba(58, 47, 40, 0.08); }
.saved-open { flex: 1 1 auto; min-width: 0; width: auto; height: auto; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 4px; border-radius: 12px; background: transparent; color: #3a2f28; text-align: left; box-shadow: none; }
.saved-pic { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #ece4d8; }
.saved-words { display: grid; min-width: 0; }
@media (max-width: 420px) { .sheet.savedsheet { right: 8px; left: 8px; width: auto; } }
@media (max-width: 360px) { :root { --cw: 44px; --tw: 46px; } .bar-top { right: 8px; gap: 3px; } }
/* the narrowest phones (an SE): seven tools don't fit with their words; their icons stand alone (each still says its name, and shows it on hover) */
@media (max-width: 370px) { .tools .tl { display: none; } .tools button { height: 44px; } #mirror { height: 44px; width: 44px; } #mirror .tl { display: none; } }

/* (Measure has no brush: its size slider goes) */
.size[hidden] { display: none; }
/* Measure: the marks over the clay (they follow it as the view turns) and its numbers under the readout */
.measure.off { display: none; }
.mline { stroke: rgba(58, 130, 220, 0.95); stroke-width: 2; }
.mdot { fill: rgba(58, 130, 220, 0.3); stroke: rgba(58, 130, 220, 0.95); stroke-width: 2; }
.mthin { fill: none; stroke: rgba(220, 40, 30, 0.95); stroke-width: 2; stroke-dasharray: 3 3; }
.mlabel { font: 600 12px var(--mono, ui-monospace, monospace); fill: #1d2a3a; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 4px; stroke-linejoin: round; }
.mlabel.thin { fill: #8a1a10; }
.measures { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 122px); right: 16px; margin: 0; font: 12px/1.45 var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; color: var(--label); text-align: right; white-space: pre-line; pointer-events: none; max-width: min(60vw, 22rem); }
body.focus .measures { display: none; }

/* ---- a phone on its side: the tools stand in a column at the right edge, the top bar beside them; Look and Parts beside the
   cube; the sliders at the bottom left and the tool's row beside them, so the middle of a short screen is left to the clay ---- */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  :root { --cw: 44px; --ch: 42px; --tw: 46px; --th: 38px; --row-over: 0; } /* (seven tools and Mirror down a short screen) */
  .tl { font-size: 10px; }
  .tools button svg, #mirror svg { width: 18px; height: 18px; }
  #mirror .tv { display: none; }
  .bar { left: auto; right: 8px; top: var(--top); bottom: auto; transform: none; width: auto; flex-direction: column; gap: 6px; }
  .bar .tools { flex: 0 0 auto; flex-direction: column; gap: 0; }
  .tools button, #mirror { flex: 0 0 auto; width: var(--tw); max-width: none; gap: 1px; }
  .bar { gap: 4px; }
  #mirror { margin: 0; }
  #mirror::before { left: 10px; right: 10px; top: -4px; bottom: auto; width: auto; height: 1px; }
  .bar-top, .kindtag { right: calc(8px + var(--tw) + 8px); }
  .readout { display: none; }
  .views.looks { top: calc(var(--top) + var(--ch) + 6px); }
  .size { left: 12px; transform: none; bottom: calc(var(--sab) + 8px); width: min(330px, 44vw); gap: 10px; }
  .above:not(#shapes) { left: calc(min(330px, 44vw) + 24px); right: calc(8px + var(--tw) + 8px); transform: none; width: auto; max-width: none; bottom: calc(var(--sab) + 8px); justify-content: flex-start; }
  #shapes { top: var(--top); bottom: auto !important; left: auto; right: calc(8px + var(--tw) + 8px); transform: none; max-height: calc(100dvh - var(--sab) - var(--top) - 12px); }
  .rail { right: calc(8px + var(--tw) + 8px); top: 50%; bottom: auto; transform: translateY(-50%); }
  .hint { bottom: calc(var(--sab) + 70px); padding: 0 16px; }
  .tsheet { left: calc(min(330px, 44vw) + 24px); right: calc(8px + var(--tw) + 8px); width: auto; transform: none; }
  /* (last in the sheet, so a narrow phone's portrait rules above don't win here: the bar's width, the rail at the foot) */
  .bar { width: auto; }
  #mirror { width: var(--tw); margin: 0; }
  .tools .tl, #mirror .tl { font-size: 10px; }
  /* Print, Help and Saved open beside the tools, under the top bar, the clay stepping left out of their way */
  .sheet:not(.partsheet):not(.confirm) { top: var(--top); bottom: auto; left: auto; right: calc(8px + var(--tw) + 8px); width: min(380px, 62vw); transform: none; max-height: calc(100dvh - var(--top) - var(--sab) - 12px); }
  body.parts-on .rail { bottom: auto; }
}
/* a very short one (568 x 320): the tools' words go, so eight tiles fit down it */
@media (orientation: landscape) and (max-height: 380px) and (max-width: 1000px) {
  :root { --th: 32px; }
  .tools .tl, #mirror .tl, #mirror .tv { display: none; }
  .size #steady-row { display: none; } /* (Steady, a blob's: too little row for a third slider) */
  /* Undo's rail: icons, just under the menu, clear of the tool's row */
  .rail { top: calc(var(--top) + var(--ch) + 34px); transform: none; }
  .rail button { height: 36px; }
  .rail .tl { display: none; }
}
@media (orientation: landscape) and (max-height: 340px) and (max-width: 1000px) { :root { --th: 29px; } }