/* A precision ESD tech studio: slate-black pages, slightly lighter cards, electric cyan for what is active and hazard red
   for what goes wrong. */
:root {
  --panel: rgba(10, 15, 26, 0.84);
  --panel-line: rgba(255, 255, 255, 0.09);
  --text: #eef1f6;
  --muted: #98a2b3;
  --accent: #06b6d4;
  --paper: #090d16;
  --card: #111827;
  --doc: #ffffff;
  --doc-muted: #9ca3af;
  --rule: #1f2937;
  --link: #06b6d4;
  --nav-h: 56px;
}

* { 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 top bar on every page: logo, instant search, catalog links. */
.site-nav {
  position: relative; z-index: 10; height: var(--nav-h); display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--doc); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 26px; }
.logo .wm b { color: var(--accent); font-weight: inherit; }
.search { position: relative; flex: 1; max-width: 480px; }
.search > svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; translate: 0 -50%; color: var(--doc-muted); pointer-events: none; }
.search input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card);
  color: var(--doc); font: inherit; font-size: 14px;
}
.search input:focus { outline: none; border-color: var(--accent); }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; z-index: 20;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.search-results[hidden] { display: none; }
.search-results a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--doc); text-decoration: none; font-size: 14px; }
.search-results small { display: block; color: var(--doc-muted); font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.search-results a:hover, .search-results li.on a { background: rgba(6, 182, 212, 0.14); }
.search-results .none { padding: 8px 10px; color: var(--doc-muted); font-size: 14px; }
.nav-links { display: flex; gap: 18px; margin-left: auto; }
.nav-links a { color: var(--doc-muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-links a:hover { color: var(--doc); }
/* On a phone the links fold into a menu beside the search. */
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--doc); cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg { width: 20px; height: 20px; }
.nav-menu[open] summary { border-color: var(--accent); }
.nav-menu nav { position: absolute; right: 0; top: 46px; z-index: 30; min-width: 180px; display: grid; padding: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.nav-menu nav a { padding: 9px 12px; border-radius: 8px; color: var(--doc); text-decoration: none; font-weight: 600; }
.nav-menu nav a:hover { background: rgba(255, 255, 255, 0.06); }

/* A guide page: the 3D stage and, on wide screens, a 320 px rail at its right; on narrower screens the rail goes under. */
.workspace { display: flex; height: calc(100svh - var(--nav-h) - var(--sc-h, 0px)); min-height: 520px; }
.rail {
  flex: none; width: 320px; overflow: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 16px;
  background: var(--card); border-left: 1px solid var(--rule); color: var(--doc);
}
.slot-card small, .rail-card small { color: var(--doc-muted); font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.rail-step h2 { margin: 0 4px 10px; font-size: 15px; letter-spacing: -0.01em; }
.rail-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); font-size: 14px; }
.rail-card b a { color: var(--doc); }
.rail-card span { color: var(--doc-muted); font-size: 13px; }
.rail-card code { color: var(--accent); }
.rail-card .slot { margin-top: 6px; padding: 6px; border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 8px; color: var(--accent); font: normal 600 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-align: center; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.rail-card .slot:hover { background: rgba(6, 182, 212, 0.1); }
.rail-none { margin: 0 4px; color: var(--doc-muted); font-size: 14px; }
/* Under the cards: the step's tip, the next step (a link that plays it) and, on the last step, what was built. */
.rail-more { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rail-more:empty { display: none; }
.rail-more small { color: var(--doc-muted); font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.rail-tip { padding: 10px 12px; border-radius: 10px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.3); }
.rail-tip p { margin: 4px 0 0; color: var(--doc); font-size: 13.5px; line-height: 1.45; }
.rail-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); color: var(--doc); text-decoration: none; }
.rail-next:hover { border-color: var(--accent); }
.rail-next b { grid-column: 1; font-size: 14px; }
.rail-next span { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); font-size: 18px; }
.rail-done { padding: 12px; border-radius: 10px; background: var(--paper); border: 1px solid rgba(6, 182, 212, 0.55); }
.rail-done b { display: block; margin: 2px 0; font-size: 16px; }
.rail-done p { margin: 6px 0 0; color: var(--doc-muted); font-size: 13.5px; line-height: 1.45; }
.rail-done .rail-safety { color: var(--doc); }
.rail-done a { display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
body.clean .site-nav, body.clean .rail, body.clean .scorecard { display: none; }
/* The card and share images (?clean) are the picture alone: no scorecard over it, no links on it. */
body.clean { --sc-h: 0px !important; }
body.clean .workspace { height: 100svh; }
.stage.clean .stage-links { display: none; }
.player-note { max-width: 1100px; margin: 0 auto; padding: 10px 16px; color: #6b7280; font-size: 12px; text-align: center; }

/* The 3D stage */
.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  background: #0b1018;
  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(10, 15, 26, 0.95); }
.full[hidden] { display: none; }
.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: #0f1522; 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(34, 211, 238, 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(900px, 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: #032027; min-width: 46px; }
.btn.primary:hover { background: #67e8f9; }
.btn svg { flex: none; 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; }
/* Guided: a step that has played to its end waits, and play shows it goes on to the next step. */
.btn [data-icon="next"], .btn[data-state="next"] [data-icon="play"] { display: none; }
.btn[data-state="next"] [data-icon="next"] { display: block; }
.btn.primary[data-state="next"] { animation: nudge 1.8s ease-out infinite; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); } }

.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: #032027; background: var(--accent); font-weight: 700; }
/* A long guide (over 21 steps): every step a dot that shares the line evenly; every fifth step, the last and the one on
   screen show their number over their dot, so the line never runs its numbers together. */
.ticks.many a { flex: 1 1 0; width: auto; min-width: 0; height: 20px; font-size: 0; position: relative; }
.ticks.many a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--muted); opacity: 0.7;
}
.ticks.many a.label::before, .ticks.many a[aria-current]::before {
  content: attr(data-step); width: auto; height: auto; padding: 0 4px; border-radius: 6px; background: none; opacity: 1;
  font: 11px/20px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted); white-space: nowrap;
}
.ticks.many a:hover::before { color: var(--text); }
.ticks.many a[aria-current] { background: none; }
.ticks.many a[aria-current]::before { z-index: 1; color: #032027; 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: #ef4444;
}
.mistake {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 7px 8px;
  border-radius: 10px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
}
.mistake[hidden] { display: none; }
.mistake-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(239, 68, 68, 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: #ef4444; border-color: transparent; color: #fff; }
.mistake-bar .dot { background: #ef4444; }
.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: #ef4444; 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: #032027; }
#recenter.lit { color: var(--accent); border-color: rgba(34, 211, 238, 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: #032027; background: var(--accent); }
.actions-list button.now em, .actions-list button.now code { color: #032027; }
.actions-list button.now .mark { border-color: #032027; }
.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 speed button opens a short list above it: 0.2× to 2×, the one in use lit. */
.speed-pick { position: relative; }
.speed-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4; display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 72px; }
.speed-menu[hidden] { display: none; }
.speed-menu button {
  appearance: none; border: 0; border-radius: 8px; background: transparent; padding: 8px 10px; cursor: pointer; text-align: right;
  color: var(--muted); font: 600 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.speed-menu button:hover, .speed-menu button:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--text); outline: none; }
.speed-menu button[aria-checked="true"] { background: var(--accent); color: #032027; }
#dock-more { display: none; }
#dock-more svg { transition: transform 0.2s ease; }

/* 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: var(--card); 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: var(--card); 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:first-child { 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: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.35); border-radius: 12px; padding: 12px 14px; }
.mistake-note { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.38); 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: #f87171; font-style: normal; }
.fine { color: var(--doc-muted); font-size: 13px; }
.toollist { padding-left: 20px; }
.toollist li { margin: 4px 0; color: var(--doc-muted); }
.toollist b { color: var(--doc); }
.faq details { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary::marker { color: var(--accent); }
.faq p { margin: 8px 0 2px; color: var(--doc-muted); }
.foot { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; color: var(--doc-muted); font-size: 13px; border-top: 1px solid var(--rule); }
.foot .logo { font-size: 15px; margin-right: 8px; vertical-align: middle; }
.foot .logo svg { width: 20px; height: 20px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.foot .social { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--doc-muted); text-decoration: none; font-weight: 600; }
.foot .social:hover { color: var(--doc); }
.foot .social svg { width: 15px; height: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 12px; }
.foot-links a { color: var(--doc-muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: var(--doc); }

/* The site's own pages (About, Contact, Privacy, Terms) and the 404: the reading column of a guide page. */
.page { padding-bottom: 56px; }
.page p, .page li { color: #d1d5db; }
.page .lead { color: var(--doc); }
.page h2 { scroll-margin-top: calc(var(--nav-h) + 12px); }
.page .warn { color: var(--doc); }
.page .btn { height: 42px; padding: 0 16px; text-decoration: none; color: var(--doc); }
.page .btn.primary { color: #032027; }
.updated { margin: -6px 0 14px; color: var(--doc-muted); font-size: 14px; }
.page-list { padding-left: 20px; }
.page-list li { margin: 8px 0; }
.page-list b { color: var(--doc); }
.page-guides { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; }
.page-guides a { display: grid; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; color: var(--doc); text-decoration: none; }
.page-guides a:hover { border-color: var(--accent); }
.page-guides span { color: var(--doc-muted); font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 26px 0 18px; }
.contact-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px 6px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.contact-card h2 { margin: 0 0 6px; font-size: 19px; }
.contact-card p { margin: 0 0 12px; }
.not-found .page-guides { margin-top: 18px; }
.not-found .page p:last-child { display: flex; flex-wrap: wrap; gap: 10px; }

/* Home: the hero with a live 3D preview, the category pills and the catalog cards. */
.home main { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; padding: 56px 0 40px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em; margin: 10px 0 16px; }
.hero .lead { color: var(--doc-muted); max-width: 520px; }
.hero-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero-links .btn { height: 44px; padding: 0 18px; text-decoration: none; color: var(--doc); }
.hero-links .btn.primary { color: #032027; }
.hero-preview {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #1b2433 0%, #111827 60%, #0b0f19 100%); border: 1px solid var(--rule);
}
.hero-preview canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hero-preview .seg { position: absolute; left: 12px; top: 12px; background: rgba(9, 13, 22, 0.75); }
.hero-preview .seg button { color: var(--doc-muted); }
.hero-preview .seg button[aria-pressed="true"] { color: #11151f; }
/* The caption sits on a soft dark band, so it reads over the room's light floor. */
.hero-preview figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 13px; color: #e5e7eb;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); background: linear-gradient(to top, rgba(9, 13, 22, 0.78), rgba(9, 13, 22, 0));
}
.hero-preview.paper figcaption { color: #374151; text-shadow: none; background: none; }
.hero-preview.paper figcaption a { color: #0e7490; }
.library h2 { font-size: 26px; letter-spacing: -0.02em; margin: 10px 0 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pills button { appearance: none; border: 1px solid var(--rule); background: var(--card); color: var(--doc-muted); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pills button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #032027; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding-bottom: 40px; }
.card { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--doc); transition: border-color 0.2s ease, transform 0.2s ease; }
.card[hidden] { display: none; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .thumb { position: relative; display: block; aspect-ratio: 1200 / 630; background: #0b1018; }
.card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
.card .thumb .wire { opacity: 0; }
.card:hover .thumb .wire, .card:focus-visible .thumb .wire { opacity: 1; }
.card b { display: block; padding: 14px 16px 6px; font-size: 17px; line-height: 1.3; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.badges i { font: normal 600 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--doc-muted); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 9px; }

/* A part page: the part in 3D beside what it is and where it goes; the Part Finder lists them all. */
.part-page, .parts-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }
.crumbs { font-size: 14px; color: var(--doc-muted); margin-bottom: 16px; }
.crumbs a { color: var(--doc-muted); }
.part-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.part-view { position: relative; margin: 0; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: radial-gradient(100% 100% at 50% 35%, #273142 0%, #111827 70%); border: 1px solid var(--rule); }
.part-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.part-view figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: var(--doc-muted); font-size: 12px; }
.part-info h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.025em; margin: 8px 0 12px; }
.part-info h1 code { color: var(--accent); font-size: 0.8em; margin-right: 8px; }
.part-info .lead { color: var(--doc-muted); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 18px 0; }
.facts dt { color: var(--doc-muted); }
.facts dd { margin: 0; }
.slot-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px dashed #334155; border-radius: 12px; }
.slot-card span { color: #6b7280; font-size: 13px; }
.spare { color: var(--doc-muted); font-size: 14px; }
.parts-page h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.025em; margin: 8px 0 8px; }
.parts-page .lead { color: var(--doc-muted); }
.parts-filter { width: 100%; max-width: 420px; height: 42px; margin: 8px 0 18px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--doc); font: inherit; }
.parts-filter:focus { outline: none; border-color: var(--accent); }
.part-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.part-list li[hidden] { display: none; }
.part-list a { display: grid; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; color: var(--doc); text-decoration: none; }
.part-list a:hover { border-color: var(--accent); }
.part-list code { color: var(--accent); font-size: 15px; }
.part-list span, .part-list em { color: var(--doc-muted); font-size: 13px; font-style: normal; }

/* Guided sits beside the views and turns cyan while on. */
#guided[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #032027; }
#guided[aria-pressed="true"]:hover { background: #67e8f9; }
/* Guided's line: what to do in this step and what it takes, at the top of the panel. It keeps one height from step to
   step (a head line, three lines of words, a row of parts), so the picture, centred above it, never moves; longer words
   fold, and a tap opens them. The head holds a hint. */
.guide-now { margin: -2px 0 10px; padding: 0 2px 10px; border-bottom: 1px solid var(--panel-line); cursor: pointer; }
.guide-now[hidden] { display: none; }
.guide-head {
  display: flex; align-items: center; height: 16px; margin-bottom: 5px; overflow: hidden; white-space: nowrap;
  font: 600 11px/16px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--muted);
}
.guide-hint { display: flex; align-items: center; gap: 8px; }
.guide-hint::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.guide-text {
  margin: 0; font-size: 15px; line-height: 1.45; height: 4.35em; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.guide-now.open .guide-text { display: block; height: auto; max-height: 40vh; overflow-y: auto; }
.guide-uses {
  display: flex; flex-wrap: nowrap; gap: 5px; height: 22px; margin: 7px 0 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.guide-uses::-webkit-scrollbar { display: none; }
.guide-uses li { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--panel-line); font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.guide-uses b { color: var(--text); }
.guide-uses code { color: #8fd0ff; font-size: 11px; }
.guide-uses li.tool { border-color: rgba(6, 182, 212, 0.4); color: #a5f3fc; }

/* 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(10, 15, 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: #032027; }
.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(34, 211, 238, 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(34, 211, 238, 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(10, 15, 26, 0.95); }
  .camtools .cam-toggle[aria-expanded="true"] { background: #fff; color: #11151f; }
  .camtools .cam-toggle.lit { color: var(--accent); border-color: rgba(34, 211, 238, 0.55); }
  .camtools:not(.open) .cam-body { display: none; }
  /* The picture fills the screen under the top bar and the controls sit on it, in a panel at the bottom: play, the
     step and All in a row, the step line under them. The arrow at its side opens the rest (the steps either side, the
     common mistake, the views, the actions and the speed) and folds it away again. */
  .stage canvas { height: 100%; }
  .dock {
    left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    width: auto; transform: none; padding: 7px 8px 3px; border-radius: 16px;
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 6px;
    grid-template-areas: "guide guide guide guide guide" "back play title all more" "scrub scrub scrub scrub scrub";
  }
  .guide-now { grid-area: guide; margin: 1px 0 7px; padding: 0 2px 7px; }
  .guide-head { margin-bottom: 4px; }
  .guide-text { font-size: 13.5px; line-height: 1.4; height: 4.2em; }
  .guide-now.open .guide-text { max-height: 40svh; }
  .guide-uses { margin-top: 5px; }
  .dock-row { display: contents; }
  #play { grid-area: play; }
  #back { grid-area: back; }
  .dock-step { grid-area: title; }
  .dock-step b { font-size: 15px; }
  .dock-step small { display: none; }
  #playall { grid-area: all; white-space: nowrap; }
  #dock-more { grid-area: more; display: inline-flex; padding: 0; }
  .scrub { grid-area: scrub; margin: 4px 0 0; }
  #prev, #next, .dock .seg, #actions-btn, .speed-pick, .dock .mistake, #guided, .explode-pick, #reassemble { display: none; }
  .dock.open {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; padding-bottom: 8px;
    grid-template-areas: "guide guide guide guide guide guide guide" "prev back play title next all more" "scrub scrub scrub scrub scrub scrub scrub" "mistake mistake mistake mistake mistake mistake mistake" "modes modes modes modes modes modes modes";
  }
  .dock.open #prev { display: inline-flex; grid-area: prev; justify-self: center; }
  .dock.open #next { display: inline-flex; grid-area: next; justify-self: center; }
  .dock.open .mistake:not([hidden]) { display: flex; grid-area: mistake; margin: 2px 0 8px; }
  .dock.open .dock-modes { display: flex; grid-area: modes; align-items: center; justify-content: space-between; gap: 6px; }
  .dock.open .seg, .dock.open #guided, .dock.open #actions-btn, .dock.open #reassemble { display: inline-flex; }
  .dock.open .speed-pick, .dock.open .explode-pick { display: block; }
  .dock.open .dock-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock.open #dock-more svg { transform: rotate(180deg); }
}
/* 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) {
  /* Sideways the screen is short, so the folded panel is one row (play, the step line, All, the arrow) in the middle,
     clear of the camera tools at the right; the actions list fits above it. */
  .dock { left: 50%; right: auto; width: min(560px, calc(100% - 260px)); transform: translateX(-50%); }
  .dock:not(.open) { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "guide guide guide guide guide" "back play scrub all more"; padding: 5px 8px; }
  .guide-now { margin: 2px 0 5px; padding-bottom: 5px; }
  .guide-text { height: 2.8em; -webkit-line-clamp: 2; }
  .guide-uses { display: none; }
  /* The open panel's bottom row holds the views, Guided, the actions and the speed: the views as icons. */
  .seg button { display: inline-flex; padding: 5px 7px; }
  .seg button svg { display: block; }
  .seg button span, #explode span, #reassemble span { display: none; }
  .dock:not(.open) .dock-step { display: none; }
  .dock:not(.open) .scrub { margin: 0 4px; }
  .actions { top: 10px; max-height: calc(var(--dock-t, 100%) - 20px); }
  #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(--dock-t, 60svh) - 20px); }
  .replay { top: calc(var(--dock-t, 60svh) - 10px); translate: 0 -100%; max-width: calc(100% - 20px); }
  .replay b { overflow: hidden; text-overflow: ellipsis; }
  #actions-btn span, #playall .wide, #explode span, #reassemble span, #guided span { 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; }
  .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; }
  /* 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 just above the panel, clear of the title. */
  .view-hint { top: calc(var(--dock-t, 60svh) - 10px); transform: translate(-50%, -100%); }
  /* The card sits just above the panel, as small as it can be; the outline shows what it is about. */
  .info { left: 10px; right: 10px; width: auto; top: calc(var(--dock-t, 60svh) - 10px); translate: 0 -100%; max-height: calc(var(--dock-t, 60svh) - 60px); 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; }
  .ticks.many a { width: auto; font-size: 0; }
  .ticks.many a.label::before, .ticks.many a[aria-current]::before { font-size: 10px; }
  .doc { padding-top: 24px; }
  .lead { font-size: 17px; }
}

/* Narrower screens: the rail goes under the picture, its step's cards and its modules side by side. */
@media (max-width: 1099px) {
  .workspace { display: block; height: auto; min-height: 0; }
  .workspace .stage { height: calc(100svh - var(--nav-h) - var(--sc-h, 0px)); min-height: 520px; }
  .rail { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; border-left: 0; border-top: 1px solid var(--rule); padding: 16px; }
  .rail-step { min-width: 0; }
  .hero { gap: 24px; }
}
/* Phones: a slimmer top bar with the logo and the search, everything stacked. */
@media (max-width: 760px) {
  :root { --nav-h: 52px; }
  .site-nav { gap: 10px; padding: 0 10px; }
  .logo { font-size: 16px; }
  .logo svg { width: 22px; height: 22px; }
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .search input { height: 36px; font-size: 16px; }
  .rail { display: flex; flex-direction: column; align-items: stretch; padding: 14px 10px; }
  .rail-step { width: 100%; }
  .hero { grid-template-columns: 1fr; padding: 28px 0 24px; }
  .part-top { grid-template-columns: 1fr; gap: 20px; }
  .player-note { font-size: 11px; }
}

/* Phones, upright or sideways: the stage is the screen under the top bar (after the rules above that size it for
   wider screens). On a guide page the top bar steps aside for the picture, which takes the whole screen: only the
   logo stays, on the picture's top left corner, and the search is on the other pages. The empty title box under it
   keeps its height, so what is placed under the title (the part card, sideways) stays clear of the logo. */
@media (max-width: 760px), (max-height: 520px) {
  .workspace .stage { height: calc(100svh - var(--nav-h)); min-height: 0; }
  body.guide { --nav-h: 0px; }
  body.guide .site-nav { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 10px; height: auto; padding: 0; background: none; border: 0; }
  body.guide .site-nav .search, body.guide .site-nav .nav-links, body.guide .site-nav .nav-menu { display: none; }
  body.guide .site-nav .logo {
    padding: 5px 10px 5px 7px; border-radius: 12px; font-size: 14px; background: var(--panel); border: 1px solid var(--panel-line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 16px rgba(10, 12, 20, 0.2);
  }
  body.guide .site-nav .logo svg { width: 20px; height: 20px; }
  body.guide .hud { min-height: 34px; }
}
@media (max-height: 520px) and (min-width: 761px) {
  body.guide .site-nav { left: max(16px, env(safe-area-inset-left)); top: 16px; }
}

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

@media (max-width: 369px) {
  #guided span { display: none; }
}
/* Beside the rail, which lists the step's parts, Guided's line leaves out its row of parts; on a short screen its words
   fold to two lines, so the picture keeps its room. */
@media (min-width: 1100px) {
  .guide-uses { display: none; }
}
@media (max-height: 760px) and (min-height: 521px) and (min-width: 761px) {
  .guide-text { height: 2.9em; -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.primary[data-state="next"] { animation: none; }
}

/* Teardowns: the Explode slider, the reassembly order, the risk level, the safety warnings. */
/* Explode: the button opens a slider above it that spreads the layers apart; lit while they are spread. */
.explode-pick { position: relative; }
.explode-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4; width: 230px; padding: 10px 12px 9px; display: grid; gap: 6px; }
.explode-menu[hidden] { display: none; }
.explode-menu label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; }
.explode-menu label b { color: var(--accent); font: 600 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.explode-menu small { color: var(--muted); font-size: 11.5px; }
.explode-menu input { width: 100%; accent-color: var(--accent); cursor: pointer; }
#explode.lit { color: var(--accent); border-color: rgba(34, 211, 238, 0.55); }
/* Reassemble: lit while the steps play in reverse order; the step's line says so. */
#reassemble[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: #032027; }
#reassemble[aria-pressed="true"]:hover { background: #67e8f9; }
.stage.reassembling .dock-step small { color: var(--accent); }
/* The risk level reads in its colour. */
.stat b[data-level="high"] { color: var(--hazard); }
.stat b[data-level="med"] { color: #f59e0b; }
.stat b[data-level="low"] { color: #22c55e; }
.stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
:root { --hazard: #ef4444; }

/* The safety warnings: under the player and in every footer. */
.safety-strip { list-style: none; margin: 0 auto 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; text-align: left; }
.safety-strip li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.22); color: var(--doc-muted); font-size: 12px; line-height: 1.45; }
.safety-strip svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #f87171; }
.safety-strip b { color: var(--doc); }
.player-note p { margin: 6px 0 0; }
.safety-list { padding-left: 20px; }
.safety-list li { margin: 4px 0; }
.foot .safety-strip { margin: 0 0 14px; }

/* The catalog: each card names its category and its risk. */
.card .cat { display: block; padding: 12px 16px 0; color: var(--accent); font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.card .cat + b { padding-top: 4px; }
.card .risk { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 4px 8px; border-radius: 999px; font: normal 700 10.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(9, 13, 22, 0.82); color: var(--doc); border: 1px solid var(--rule); }
.card .risk[data-level="high"] { color: #fca5a5; border-color: rgba(239, 68, 68, 0.6); }
.card .risk[data-level="med"], .card .risk[data-level="medium"] { color: #fcd34d; border-color: rgba(245, 158, 11, 0.6); }
.card .risk[data-level="low"] { color: #86efac; border-color: rgba(34, 197, 94, 0.6); }
.hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-points li { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); color: var(--doc-muted); font-size: 13px; }
.hero-points b { color: var(--doc); }

/* A phone held upright: the open panel's bottom row holds the views, Guided, Explode, Reassemble, the actions and
   the speed, as icons, a little tighter so all of them fit in 375 px. */
@media (max-width: 420px) {
  .dock.open .dock-modes { gap: 3px; }
  .dock.open .dock-modes .btn { min-width: 32px; padding-left: 6px; padding-right: 6px; }
  .dock.open .dock-modes .seg button { padding: 5px 5px; }
  .dock.open #speed { min-width: 40px; }
}
/* A rig without layers or a reverse order (the car, watch and lock rigs) hides both controls, on phones too. */
.explode-pick[hidden], #reassemble[hidden] { display: none !important; }

/* Before you open it: the scorecard above the player (under the picture on phones): four badges, its height taken
   from the picture (--sc-h, measured by main.js) so the player still fits the screen. */
body.guide:has(.sc-top) { --sc-h: 86px; }
.scorecard {
  display: grid; grid-template-columns: 148px minmax(92px, 0.7fr) minmax(92px, 0.7fr) minmax(0, 2fr) minmax(0, 2.6fr); gap: 8px;
  padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--rule); color: var(--doc);
}
.sc-head { display: flex; flex-direction: column; justify-content: center; }
.sc-head small, .sc-badge small { color: var(--doc-muted); font: 600 10px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-head small { color: var(--accent); }
.sc-head b { font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; }
.sc-badge { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.sc-badge > b { font-size: 15px; line-height: 1.3; }
.sc-badge[data-level="high"] { border-color: rgba(239, 68, 68, 0.55); }
.sc-badge[data-level="high"] > b { color: #f87171; }
.sc-badge[data-level="med"] { border-color: rgba(245, 158, 11, 0.5); }
.sc-badge[data-level="med"] > b { color: #fbbf24; }
.sc-badge[data-level="low"] { border-color: rgba(34, 197, 94, 0.5); }
.sc-badge[data-level="low"] > b { color: #4ade80; }
.sc-wrong span { font-size: 12.5px; line-height: 1.35; color: var(--doc); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.4; }
.sc-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sc-row a { flex: none; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sc-row + .sc-row a { color: #fca5a5; }
.sc-row a:hover { text-decoration: underline; }
.sc-cost i { color: #6b7280; font: normal 10.5px/1.3 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-phone { display: none; }
@media (max-width: 1099px) {
  .scorecard { grid-template-columns: minmax(84px, 0.7fr) minmax(84px, 0.7fr) minmax(0, 2fr) minmax(0, 2.4fr); }
  .sc-top .sc-head { display: none; }
}
@media (max-width: 760px), (max-height: 520px) {
  body.guide:has(.sc-top) { --sc-h: 0px; }
  .sc-top { display: none; }
  .sc-phone { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 10px; border-top: 1px solid var(--rule); border-bottom: 0; }
  .sc-phone .sc-head { display: flex; }
  .sc-phone .sc-head, .sc-phone .sc-wrong, .sc-phone .sc-cost { grid-column: 1 / -1; }
  .sc-phone .sc-wrong span { -webkit-line-clamp: unset; }
  .sc-phone .sc-cost i { white-space: normal; }
}

/* The risk map on the picture: a red tag over each zone (a line down to it), a pin on each screw in the colour of its
   length, and the legend where the part card goes (the card covers it). */
.risk-tags { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.risk-tags[hidden], .risk-tag[hidden], .risk-pin[hidden], .risk-legend[hidden] { display: none; }
.risk-tag {
  position: absolute; left: 0; top: 0; max-width: 230px; padding: 4px 9px 5px; border-radius: 8px;
  background: rgba(36, 8, 11, 0.9); border: 1px solid rgba(239, 68, 68, 0.9); color: #fff; box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
  font-size: 12px; line-height: 1.3;
}
.risk-tag b { display: block; color: #fca5a5; font: 700 10.5px/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.risk-tag span { display: block; color: #fde4e4; }
.risk-lead { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; background: rgba(239, 68, 68, 0.85); }
.risk-lead::after { content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.risk-lead[hidden], .risk-num[hidden] { display: none; }
/* A zone's number (phones) draws over the pins and the lines. */
.risk-pin { z-index: 1; }
.risk-num { z-index: 2; }
.risk-num { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; display: grid; place-items: center; border-radius: 50%; background: #ef4444; color: #fff; font: 700 10.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; box-shadow: 0 0 0 2px rgba(9, 13, 22, 0.9), 0 0 10px #ef4444; }
.risk-pin { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(9, 13, 22, 0.9), 0 0 10px var(--c); }
/* The legend: a bar over the dock, what red is and what each pin's colour is. */
.risk-legend {
  /* Centred over the dock, clear of the camera tools at the right (on phones they fold away, and it takes the width). */
  position: absolute; left: 16px; right: 132px; top: var(--dock-t, 80%); z-index: 2; translate: 0 calc(-100% - 8px);
  width: fit-content; margin-inline: auto;
  display: flex; align-items: center; gap: 4px 12px; max-width: min(900px, calc(100% - 32px)); padding: 5px 6px 5px 12px; border-radius: 12px;
}
.risk-legend > b { flex: none; color: #fca5a5; font: 700 10.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; cursor: help; }
#risk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; }
#risk-list li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#risk-list i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
#risk-list .zone i { border-radius: 2px; background: rgba(239, 68, 68, 0.35); border: 1px solid #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
#risk-list em { color: var(--muted); font: normal 11.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
#risk-close { flex: none; height: 26px; min-width: 26px; padding: 0; font-size: 16px; }
#risk-list .zone-row { display: none; }
#risk-list .zone-row i { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #ef4444; box-shadow: none; color: #fff; font: 700 9px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-style: normal; }
#riskmap { white-space: nowrap; }
#riskmap[aria-pressed="true"] { background: #ef4444; border-color: transparent; color: #fff; }
.stage.clean .risk-tags, .stage.clean .risk-legend, .stage.clean .report { display: none; }
/* While the map shows, the title box leaves out its counters, so the callouts have the side of the picture. */
.stage.risk-on .hud-title .stats { display: none; }

/* Spot an error in this 3D model? The report button, on the picture's top right under the full-screen button. */
.stage-links { position: absolute; right: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; }
/* A replay's or a trap's bar stands at the top in the middle, over the units and Report it: they step aside while it
   shows (on a phone the bar sits over the dock instead). */
@media (min-width: 761px) { .stage:has(.replay:not([hidden])) .stage-links { visibility: hidden; } }
.full:not([hidden]) + .stage-links { right: 65px; }
.stage-links .manual-link, .stage-links .embed-credit { position: static; }
/* On the panel's own dark glass, like the full-screen button: a plain button's faint white fades out over a light scene. */
.btn.report { height: 39px; padding: 0 12px; gap: 7px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn.report u { color: var(--text); text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; }
.btn.report svg { width: 15px; height: 15px; color: #fca5a5; }
.btn.report:hover { background: rgba(10, 15, 26, 0.95); color: var(--text); }
/* Millimetres or inches: a pair of buttons on the panel's glass beside the report button, and again over the page's
   text; the one in use is white, like the view in use. */
.units { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.units button { appearance: none; border: 0; background: transparent; color: var(--muted); border-radius: 7px; height: 31px; min-width: 34px; padding: 0 8px; cursor: pointer; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.units button:hover { color: var(--text); }
.units button[aria-pressed="true"] { background: #fff; color: #11151f; }
.units button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.doc-units { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 -8px; color: var(--doc-muted); font-size: 12.5px; }
.doc-units .units { background: var(--card); border-color: var(--rule); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sc-buy { flex: none; display: inline-flex; gap: 10px; }
/* A measurement (units.js) reads as part of the words round it, whatever a rule does to the spans where it stands
   (the mistake card's, the risk tags', the scorecard's). */
span.u { all: unset !important; }

/* Under the player: the honest note on what the 3D is. */
.recon-note { display: flex; gap: 8px; align-items: flex-start; max-width: 900px; margin: 0 auto 8px; padding: 8px 12px; border-radius: 10px; background: rgba(6, 182, 212, 0.06); border: 1px solid rgba(6, 182, 212, 0.25); color: var(--doc-muted); font-size: 12.5px; line-height: 1.45; text-align: left; }
.recon-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.doc .recon { padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: rgba(6, 182, 212, 0.06); }

/* The rail's modules in the place of an advertisement: the kit checklist, a repair shop near you, and for brands. */
.rail-kit, .rail-shop, .rail-brands { padding: 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.rail-kit h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: -0.01em; }
.kit-list { list-style: none; margin: 0; padding: 0; }
.kit-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.35; }
.kit-list label { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.kit-list input { flex: none; margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--accent); }
.kit-list small { display: block; color: var(--doc-muted); font: 600 9.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.kit-list em { color: var(--doc-muted); font-style: normal; font-size: 12.5px; }
.kit-list input:checked + span { color: var(--doc-muted); text-decoration: line-through; }
.kit-list a { flex: none; color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.kit-list a:hover { text-decoration: underline; }
.rail .btn { color: var(--doc); }
.kit-all { display: flex; width: 100%; margin-top: 10px; text-decoration: none; }
.rail .btn.primary { color: #032027; }
.kit-note { margin: 8px 0 0; color: #6b7280; font-size: 11.5px; line-height: 1.4; }
.rail-shop { border-color: rgba(239, 68, 68, 0.35); background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), transparent 70%), var(--paper); }
.rail-shop small, .rail-brands small { color: #fca5a5; font: 600 10.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.rail-brands small { color: var(--accent); }
.rail-shop b, .rail-brands b { display: block; margin: 2px 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.rail-shop p, .rail-brands p { margin: 0 0 10px; color: var(--doc-muted); font-size: 13.5px; line-height: 1.45; }
.rail-shop .btn { display: flex; width: 100%; height: auto; min-height: 38px; padding: 8px 12px; text-align: center; text-decoration: none; white-space: normal; }
.rail-brands a { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.rail-brands a:hover { text-decoration: underline; }

/* The risk map in words, in the page under the step. */
.before h3 { margin: 18px 0 6px; font-size: 16px; }
.before .zones, .before .pins { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; }
.before .zones li { padding: 8px 12px; border-radius: 10px; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.3); font-size: 15px; }
.before .zones b { display: block; color: #fca5a5; font: 700 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.before .pins { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.before .pins li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.before .pins i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* Pin groups past the ten colours: rings, then squares, of the same colours (pinLegend's `shape`). */
.risk-pin.ring, #risk-list i.ring, .before .pins i.ring { background: transparent; box-shadow: inset 0 0 0 3px var(--c), 0 0 0 2px rgba(9, 13, 22, 0.9), 0 0 8px var(--c); }
.risk-pin.square, #risk-list i.square, .before .pins i.square { border-radius: 2px; }
.before .pins em { color: var(--doc-muted); font-style: normal; }

/* Phones: the risk map's switch sits with the views in the open panel, an icon like its neighbours; the report button
   is a flag under the folded camera tools. */
@media (max-width: 760px), (max-height: 520px) {
  #riskmap { display: none; }
  .dock.open #riskmap { display: inline-flex; }
  #riskmap span { display: none; }
  .stage-links { right: 10px; top: 10px; gap: 6px; }
  .full:not([hidden]) + .stage-links { right: 49px; }
  .btn.report { height: 33px; min-width: 33px; padding: 0; border-radius: 8px; }
  .btn.report span { display: none; }
  .stage-links .units { padding: 2px; border-radius: 8px; }
  .stage-links .units button { height: 27px; min-width: 28px; padding: 0 6px; font-size: 11px; border-radius: 6px; }
  .risk-tag { max-width: 150px; padding: 3px 7px 4px; font-size: 10.5px; }
  .risk-tag b { font-size: 9.5px; }
  #risk-list { font-size: 11px; gap: 2px 9px; }
  /* At most two fifths of the picture above the dock: a longer legend (the USB-C port's 16 groups) scrolls. */
  .risk-legend { left: 10px; right: 10px; translate: 0 calc(-100% - 8px); max-width: none; max-height: calc(var(--dock-t, 60svh) * 0.4); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 4px 9px; align-items: flex-start; }
  #risk-list { flex: 1; min-width: 0; }
  .risk-legend > b { padding-top: 5px; }
  #risk-list .zone { display: none; }
  #risk-list .zone-row { display: flex; flex-basis: 100%; white-space: normal; }
}

/* Embedded on another site (?embed): the player alone, with a link back to the full guide and its safety notes. */
.embed-credit[hidden] { display: none; }
body.embed { --nav-h: 0px; --sc-h: 0px !important; }
body.embed .site-nav, body.embed .scorecard, body.embed .rail, body.embed .player-note, body.embed .doc, body.embed .foot, body.embed .manual-link, body.embed .btn.full { display: none !important; }
body.embed .workspace, body.embed .workspace .stage { height: 100svh; min-height: 0; }
.embed-credit { padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.embed-credit:hover { border-color: var(--accent); }

/* A phone held sideways, a tablet or a narrow embed: the numbered zones list in two columns. */
@media (max-width: 760px) and (min-width: 520px), (max-height: 520px) and (min-width: 761px) {
  #risk-list .zone-row { flex-basis: calc(50% - 6px); }
}

/* For Brands: the embedded guide and its one line of HTML. */
.embed-demo { margin: 14px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: #0b1018; }
.embed-demo iframe { display: block; width: 100%; height: 600px; border: 0; }
.snippet { margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); overflow-x: auto; font-size: 13px; line-height: 1.5; }
.snippet code { white-space: pre-wrap; word-break: break-all; color: #a5f3fc; }
@media (max-width: 760px) { .embed-demo iframe { height: 520px; } }

/* The dock's bottom row keeps to one line at any width: as the dock narrows, its buttons drop their words for their
   icons, Guided and Actions first, then the views and the teardown controls (a phone's own rules come first). */
.dock { container: dock / inline-size; }
.dock-row.dock-modes { gap: 8px; }
.dock-modes > .btn, .dock-modes .explode-pick > .btn { padding: 0 10px; }
@container dock (max-width: 860px) {
  .dock-modes #guided span, .dock-modes #actions-btn span { display: none; }
}
@container dock (max-width: 780px) {
  .dock-modes #explode span, .dock-modes #reassemble span, .dock-modes #riskmap span { display: none; }
  .dock-modes .seg button { display: inline-flex; padding: 5px 8px; }
  .dock-modes .seg button svg { display: block; }
  .dock-modes .seg button span { display: none; }
}