:root {
  --panel: rgba(13, 17, 26, 0.84);
  --panel-line: rgba(255, 255, 255, 0.09);
  --text: #eef1f6;
  --muted: #98a2b3;
  --accent: #f39a35;
  --paper: #f7f3ec;
  --doc: #1c2230;
  --doc-muted: #5d6676;
  --rule: #e4dccf;
  --link: #b4561b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--doc);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
a { color: var(--link); }
code { font: 0.86em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
button { font: inherit; color: inherit; }

/* The 3D stage */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  background: #e9dfd1;
  overflow: hidden;
  isolation: isolate;
}
.stage[data-view="drawing"] { background: #fff; }
.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.stage.ready canvas { opacity: 1; }
.stage.render canvas { transition: none; }
.stage.clean .hud, .stage.clean .dock, .stage.clean .manual-link, .stage.clean .tag, .stage.clean .callouts, .stage.clean .full, .stage.clean .camtools, .stage.clean .mistake-tag { display: none; }
.stage.no-webgl canvas { display: none; }
.stage.no-webgl::after {
  content: "The 3D view needs WebGL, which this browser has turned off. The written steps below still work.";
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--doc-muted);
}

.panel {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(10, 12, 20, 0.18);
}

.hud {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  padding: 7px 12px 7px 9px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
}
.brand svg { width: 20px; height: 20px; }
.brand .wm b { color: var(--accent); font-weight: inherit; }
.hud-title { padding: 10px 14px 12px; min-width: 250px; }
.hud-title small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.hud-title strong { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); }
.hud-title strong span { color: var(--text); font-weight: 600; font-size: 0.62em; letter-spacing: 0; margin-left: 6px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.stat { background: rgba(255, 255, 255, 0.05); border-radius: 9px; padding: 6px 9px; }
.stat span { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stat b { font: 600 19px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--accent); }
.stat i { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }

.manual-link {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  padding: 9px 13px; font-size: 13px; text-decoration: none; color: var(--text);
}
.manual-link:hover { border-color: rgba(255, 255, 255, 0.25); }
/* Full screen, beside the manual link; only shown where the browser can do it */
.btn.full { position: absolute; right: 16px; top: 16px; z-index: 2; height: 41px; min-width: 41px; padding: 0; background: var(--panel); color: var(--text); }
.btn.full:hover { background: rgba(13, 17, 26, 0.95); }
.full[hidden] { display: none; }
.full:not([hidden]) + .manual-link { right: 65px; }
.full [data-icon="shrink"], .full[aria-pressed="true"] [data-icon="expand"] { display: none; }
.full[aria-pressed="true"] [data-icon="shrink"] { display: block; }

.tag {
  position: absolute; left: 0; top: 0; z-index: 1;
  translate: -50% calc(-100% - 18px);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--panel); color: var(--text); border: 1px solid var(--panel-line);
  pointer-events: none;
}
.tag[hidden] { display: none; }
/* Part-number callouts in the 3D view, printed like the manual's: "6× 104321", and the tool in hand above */
.callouts {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.callouts[hidden] { display: none; }
.callout {
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: #fff; color: #15181e; border: 1px solid rgba(21, 24, 30, 0.14); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
  font: 600 13px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.callout.tool { font-weight: 500; color: #5d6676; }
.callout.word { font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
.callout.tip { background: #eef8e1; border-color: #a8c97c; color: #2c4612; }
.stage[data-view="drawing"] .callout { color: #111; border-color: #111; border-radius: 2px; box-shadow: none; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(243, 154, 53, 0.25); }
.tag code { color: #8fd0ff; }
.tag em { font-style: normal; color: var(--muted); font-weight: 500; }

.dock {
  position: absolute; left: 50%; bottom: 16px; z-index: 2;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 32px));
  padding: 12px 14px 12px;
}
.dock-row { display: flex; align-items: center; gap: 10px; }
.dock-step { flex: 1; min-width: 0; }
.dock-step b { display: block; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-step small { display: block; color: var(--muted); font: 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.btn {
  appearance: none; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, 0.06);
  border-radius: 10px; height: 38px; min-width: 38px; padding: 0 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); }
.btn:focus-visible, .seg button:focus-visible, .ticks a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: transparent; color: #1b1206; min-width: 46px; }
.btn.primary:hover { background: #ffad52; }
.btn svg { width: 18px; height: 18px; }
.btn [data-icon="pause"], .btn[data-state="pause"] [data-icon="play"] { display: none; }
.btn[data-state="pause"] [data-icon="pause"] { display: block; }

.scrub { position: relative; margin: 12px 0 8px; }
.scrub input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.scrub input::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--progress, 0%), rgba(255, 255, 255, 0.14) var(--progress, 0%));
}
.scrub input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.scrub input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
.scrub input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
}
.scrub input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.ticks { display: flex; justify-content: space-between; padding: 0 3px; margin-top: 2px; }
.ticks a {
  width: 22px; text-align: center; font: 11px/20px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--muted); text-decoration: none; border-radius: 6px;
}
.ticks a:hover { color: var(--text); }
.ticks a[aria-current] { color: #1b1206; background: var(--accent); font-weight: 700; }

/* Common mistake on a risky step (red dot on its tick): a card in the dock whose switch plays out what goes wrong,
   a red bar while it does, and a red label on the spot */
.ticks a.risky { position: relative; }
.ticks a.risky::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #e5484d;
}
.mistake {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 7px 8px;
  border-radius: 10px; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.3);
}
.mistake[hidden] { display: none; }
.mistake-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(229, 72, 77, 0.22); color: #ff8f93; }
.mistake-icon svg { width: 17px; height: 17px; }
.mistake-text { flex: 1; min-width: 0; line-height: 1.3; }
.mistake-text small { display: block; color: #ff9da0; font: 600 10px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.mistake-text b { display: block; font-size: 14px; }
.mistake-text span { display: block; color: var(--muted); font: 12px/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#mistake-btn { flex: none; white-space: nowrap; }
#mistake-btn[aria-pressed="true"] { background: #e5484d; border-color: transparent; color: #fff; }
.mistake-bar .dot { background: #e5484d; }
.mistake-tag {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; translate: -50% calc(-100% - 16px);
  padding: 5px 11px; border-radius: 999px; background: #e5484d; color: #fff; white-space: nowrap;
  font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(120, 20, 24, 0.3);
}
.mistake-tag[hidden] { display: none; }

.seg { display: inline-flex; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); border-radius: 10px; padding: 3px; }
.seg button {
  appearance: none; border: 0; background: transparent; border-radius: 7px; padding: 6px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.seg button svg { display: none; width: 18px; height: 18px; }
.seg button[aria-pressed="true"] { background: #fff; color: #11151f; }

/* Camera tools, level with the middle of the picture at its right: the zoom tool, zoom in and out, the lock, the
   reset (lit while the camera is off its guided path) and a pad of arrows that moves the view. They step aside
   for the actions list. */
.camtools {
  position: absolute; right: 16px; top: max(calc(50% - var(--lift, 0px)), 232px); z-index: 2; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.stage.actions-open .camtools { right: 348px; }
.camtools .cam-toggle { display: none; }
.cam-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam-col { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 12px; }
.camtools .btn { height: 36px; min-width: 36px; padding: 0; border-color: transparent; background: transparent; }
.camtools .btn:hover { background: rgba(255, 255, 255, 0.12); }
.camtools .btn[aria-pressed="true"] { background: var(--accent); color: #1b1206; }
#recenter.lit { color: var(--accent); border-color: rgba(243, 154, 53, 0.55); }
#lock [data-icon="locked"], #lock[aria-pressed="true"] [data-icon="unlocked"] { display: none; }
#lock[aria-pressed="true"] [data-icon="locked"] { display: block; }
.pad { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 2px; padding: 5px; border-radius: 50%; }
.pad .btn { height: 30px; min-width: 30px; border-radius: 8px; }
.pad .up { grid-area: 1 / 2; }
.pad .left { grid-area: 2 / 1; }
.pad .right { grid-area: 2 / 3; }
.pad .down { grid-area: 3 / 2; }

/* Actions list: every action in the build, click one for a slow close-up replay */
.actions {
  position: absolute; right: 16px; top: 64px; z-index: 3;
  width: 320px; max-height: calc(100% - 260px); display: flex; flex-direction: column;
  padding: 10px 8px 8px 12px;
}
.actions[hidden], .replay[hidden] { display: none; }
.actions-head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-line); }
.actions-head b { font-size: 15px; }
.actions-head small { grid-column: 1; color: var(--muted); font-size: 12px; }
.actions-head .btn { grid-row: 1 / span 2; grid-column: 2; height: 30px; min-width: 30px; padding: 0; font-size: 18px; }
.actions-list { list-style: none; margin: 6px 0 0; padding: 0 4px 0 0; overflow: auto; overscroll-behavior: contain; }
.actions-list .group { margin: 10px 0 4px; color: var(--muted); font: 600 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.actions-list button {
  appearance: none; width: 100%; display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center;
  text-align: left; border: 0; border-radius: 8px; background: transparent; padding: 6px 8px; cursor: pointer;
  font-size: 13px; color: var(--muted);
}
.actions-list button:hover, .actions-list button:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--text); outline: none; }
.actions-list button .mark { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.actions-list button code { color: #8fd0ff; font-size: 11px; }
.actions-list button em { font-style: normal; font-size: 11px; color: var(--muted); }
.actions-list button.done { color: var(--text); }
.actions-list button.done .mark { background: var(--accent); border-color: var(--accent); }
.actions-list button.now { color: #1b1206; background: var(--accent); }
.actions-list button.now em, .actions-list button.now code { color: #1b1206; }
.actions-list button.now .mark { border-color: #1b1206; }
.actions-list button.playing { box-shadow: inset 0 0 0 2px #fff; }
.replay {
  position: absolute; left: 50%; top: 16px; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; font-size: 13px; white-space: nowrap;
}
.replay .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.replay .btn { height: 30px; font-size: 12px; }
@keyframes pulse { 50% { opacity: 0.3; } }
#speed { min-width: 46px; font-variant-numeric: tabular-nums; }

/* The written guide under the stage */
.doc { max-width: 760px; margin: 0 auto; padding: 40px 16px 24px; }
.doc h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.15; letter-spacing: -0.025em; margin: 6px 0 14px; }
.doc h2 { font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 10px; }
.eyebrow { margin: 0; color: var(--doc-muted); font: 600 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.lead { font-size: 19px; line-height: 1.55; }
.uses { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uses li { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 6px 12px; }
.uses code { color: var(--link); }
.uses em { color: var(--doc-muted); }
.tools { color: var(--doc-muted); }
.tips { padding-left: 20px; color: var(--doc-muted); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.pager a {
  text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); color: var(--doc);
}
.pager a:hover { border-color: var(--link); }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.steps a { display: flex; gap: 12px; align-items: baseline; text-decoration: none; color: var(--doc); font-weight: 600; }
.steps a span { font: 600 13px ui-monospace, Menlo, Consolas, monospace; color: var(--doc-muted); min-width: 22px; }
.steps a[aria-current] { color: var(--link); }
.steps a:hover { color: var(--link); }
.steps p { margin: 4px 0 0 34px; color: var(--doc-muted); }
.box { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.box td { border-bottom: 1px solid var(--rule); padding: 8px 6px; vertical-align: top; }
.box td:first-child { width: 44px; font-weight: 700; }
.box em { color: var(--doc-muted); font-size: 13px; }
.warn { background: #fff4e8; border: 1px solid #f2c9a0; border-radius: 12px; padding: 12px 14px; }
.mistake-note { background: #fdeeee; border: 1px solid #f1b8ba; border-radius: 12px; padding: 12px 14px; }
.mistake-note em { color: var(--doc-muted); }
.steps em.risky { margin-left: 8px; font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: #c4383d; font-style: normal; }
.fine { color: var(--doc-muted); font-size: 13px; }
.foot { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; color: var(--doc-muted); font-size: 13px; border-top: 1px solid var(--rule); }

/* A hint that you can turn the view round */
.view-hint {
  position: absolute; left: 50%; top: 16px; z-index: 2; transform: translateX(-50%); pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); text-align: center;
  padding: 7px 14px; border-radius: 999px; background: rgba(13, 17, 26, 0.84); color: var(--text); font-size: 13px;
  border: 1px solid var(--panel-line); transition: opacity 0.5s ease;
}
.view-hint[hidden] { display: none; }

/* Click a part and it is selected: an orange outline in the picture, and a card under the title that says what it is,
   what it does and where it is now, with a line to it. Hovering shows a fainter outline and its name. */
.info {
  position: absolute; left: 16px; top: calc(var(--hud-b, 200px) + 10px); z-index: 3;
  width: 300px; max-height: calc(var(--dock-t, 100%) - var(--hud-b, 200px) - 26px);
  display: flex; flex-direction: column; padding: 10px 12px 12px 14px;
}
.info[hidden], .info-line[hidden] { display: none; }
.info > * { flex: none; }
.info-head { display: flex; align-items: center; gap: 8px; }
.info-kind { flex: 1; min-width: 0; color: var(--accent); font: 600 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.info-head .btn { flex: none; height: 28px; min-width: 28px; padding: 0; font-size: 18px; }
.info-name { margin: 2px 0 0; }
.info-name b { font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
.info-name small { margin-left: 8px; color: var(--muted); font: 500 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: nowrap; }
.info-state { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.info-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.info-state[data-state="now"] { color: var(--accent); }
.info-state[data-state="now"]::before { animation: pulse 1.2s ease-in-out infinite; }
.info-state[data-state="done"] { color: #74d68f; }
.info-about { margin: 8px 0 10px; font-size: 13px; line-height: 1.45; color: #d4d9e2; }
.info-facts {
  display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 5px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--panel-line);
  font-size: 12.5px; line-height: 1.4; flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
}
.info-facts dt { color: var(--muted); white-space: nowrap; }
.info-facts dd { margin: 0; min-width: 0; }
.info-facts a {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; margin: 0 2px 2px 0; vertical-align: 1px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.09); color: var(--text); text-decoration: none; font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.info-facts a:hover, .info-facts a[aria-current] { background: var(--accent); color: #1b1206; }
.info-facts code { color: #8fd0ff; }
.info-actions { flex: none; display: flex; gap: 8px; margin-top: 12px; }
.info-actions .btn { flex: 1; height: 34px; padding: 0 8px; font-size: 13px; gap: 6px; white-space: nowrap; }
.info-actions .btn svg { width: 16px; height: 16px; }
.info-actions .btn:disabled { opacity: 0.4; cursor: default; }
.info-line { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(243, 154, 53, 0.45)); }
.info-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.info-line polyline { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.info-line circle { fill: rgba(243, 154, 53, 0.18); stroke: var(--accent); stroke-width: 2; }
.hover-tag { z-index: 2; }
#info-more { display: none; }
#info-more svg { transition: transform 0.2s ease; }
.info.more #info-more svg { transform: rotate(180deg); }
.stage.clean .info, .stage.clean .info-line, .stage.clean .hover-tag { display: none; }

/* Phones, upright or turned sideways: only the logo and a short manual link sit on the picture, and the camera tools
   fold away behind one button that opens them downwards and turns orange while the lock or the zoom tool is on. */
@media (max-width: 760px), (max-height: 520px) {
  .hud-title { display: none; }
  .manual-link .wide { display: none; }
  .camtools, .stage.actions-open .camtools { top: 66px; transform: none; }
  .camtools .cam-toggle {
    display: inline-flex; height: 40px; min-width: 40px; border-radius: 50%;
    background: var(--panel); border-color: var(--panel-line); box-shadow: 0 6px 16px rgba(10, 12, 20, 0.2);
  }
  .camtools .cam-toggle:hover { background: rgba(13, 17, 26, 0.95); }
  .camtools .cam-toggle[aria-expanded="true"] { background: #fff; color: #11151f; }
  .camtools .cam-toggle.lit { color: var(--accent); border-color: rgba(243, 154, 53, 0.55); }
  .camtools:not(.open) .cam-body { display: none; }
}
/* Sideways, the arrow pad sits beside the tools so they fit the height. */
/* On a phone the card shows what it is and where it is now; More opens what it does and its facts. */
@media (max-width: 760px), (max-height: 520px) {
  .info:not(.more) .info-about, .info:not(.more) .info-facts { display: none; }
  .info:not(.more) .info-actions { margin-top: 8px; }
  #info-more { display: inline-flex; flex: 0 1 auto; }
}
@media (max-height: 520px) and (min-width: 761px) {
  #info-more { padding: 0; min-width: 34px; }
  #info-more span { display: none; }
  .camtools { align-items: flex-end; }
  .cam-body { flex-direction: row-reverse; align-items: flex-start; }
}

@media (max-width: 760px) {
  .actions { left: 10px; right: 10px; top: 10px; width: auto; max-height: calc(var(--view-h, 60svh) - 20px); }
  .replay { top: calc(var(--view-h, 60svh) - 10px); translate: 0 -100%; max-width: calc(100% - 20px); }
  .replay b { overflow: hidden; text-overflow: ellipsis; }
  #actions-btn span, #playall .wide { display: none; }
  .dock-row { gap: 6px; }
  /* Icons only on phones, so all the views fit. */
  .seg button { display: inline-flex; padding: 5px 7px; }
  .seg button svg { display: block; }
  .seg button span { display: none; }
  .dock-row .btn { padding-left: 9px; padding-right: 9px; }
  #playall { white-space: nowrap; }
  #speed { min-width: 40px; }
  .stage { height: auto; min-height: 0; background: var(--paper); }
  .stage canvas { height: 60svh; min-height: 340px; background: #e9dfd1; }
  .stage[data-view="drawing"] canvas { background: #fff; }
  .hud { left: 10px; top: 10px; gap: 6px; }
  .brand { padding: 5px 10px 5px 7px; font-size: 14px; }
  .manual-link { right: 10px; top: 10px; padding: 6px 10px; font-size: 12px; }
  .btn.full { right: 10px; top: 10px; height: 33px; min-width: 33px; border-radius: 8px; }
  .full:not([hidden]) + .manual-link { right: 49px; }
  /* Full screen on a phone: the picture takes the screen above the dock. */
  .stage:fullscreen { display: flex; flex-direction: column; }
  .stage:fullscreen canvas { flex: 1; height: auto; min-height: 0; }
  .dock { position: static; transform: none; width: auto; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  /* The folded camera tools sit under the top-right corner; the actions list covers them. */
  .camtools, .stage.actions-open .camtools { right: 10px; top: 52px; gap: 6px; }
  .cam-body { gap: 6px; }
  .cam-col { padding: 3px; gap: 2px; border-radius: 10px; }
  .cam-col .btn { height: 32px; min-width: 32px; }
  .pad { grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); padding: 3px; }
  .pad .btn { height: 26px; min-width: 26px; }
  /* Hints sit at the foot of the picture, clear of the title. */
  .view-hint { top: calc(var(--view-h, 60svh) - 10px); transform: translate(-50%, -100%); }
  /* The card sits at the foot of the picture, as small as it can be; the outline shows what it is about. */
  .info { left: 10px; right: 10px; width: auto; top: calc(var(--view-h, 60svh) - 10px); translate: 0 -100%; max-height: calc(var(--view-h, 60svh) * 0.56); padding: 8px 10px 10px 12px; }
  .info-name b { font-size: 17px; }
  .info-about { margin: 5px 0 8px; font-size: 12.5px; line-height: 1.4; }
  .info-facts { font-size: 12px; gap: 3px 10px; padding-top: 8px; }
  .info-actions { margin-top: 10px; }
  .info-line { display: none; }
  .ticks a { width: 18px; font-size: 10px; }
  .doc { padding-top: 24px; }
  .lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage canvas { transition: none; }
}