/* Glitch'n lesson player styles.
   Layout: two columns like a workbench. Left: the video and the magnifier stills below it.
   Right: the step list (same height as the video), progress, and the "what's next" map. Stacks on narrow screens.
   This file is the shared layout plus the old TV look that the styles in /styles build on.
   The default look is Simple (styles/simple.css). */
:root {
  --ink: #161514;
  --page: #FAF9F7;
  --muted: #5E5955;
  --panel: #EE6668;
  --card: #FCE4E4;
  --deep: #C3474A;
  --on-panel: #161514;
  --white: #FFFFFF;
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bw: 3.5px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--page); color: var(--ink); }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 40px;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.app { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; }

/* ---------- Header ---------- */
/* Header: title on the left, language and colour controls pinned top-right. The title wraps in its own column,
   so a longer title (Spanish, say) never pushes the controls around. */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px 28px; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.draft-chip { font-family: var(--mono); letter-spacing: .04em; text-transform: none; font-size: 12px; border: 2px solid var(--ink); border-radius: 99px; padding: 1px 9px; color: var(--ink); background: var(--white); }
h1 { font-family: var(--display); font-weight: 860; font-stretch: 112%; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.02; letter-spacing: -.01em; margin: 6px 0 0; text-wrap: balance; }
h1 .sub { display: block; font-weight: 600; font-stretch: 100%; font-size: .44em; letter-spacing: 0; margin-top: 8px; color: var(--muted); }

/* ---------- Grid ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); grid-template-areas: "tv steps" "stills side"; gap: 26px 26px; align-items: stretch; }
.tv-wrap { grid-area: tv; padding-top: 54px; min-width: 0; }
.steps-cell { grid-area: steps; position: relative; min-width: 0; min-height: 320px; }
.stills-cell { grid-area: stills; min-width: 0; }
.side { grid-area: side; display: grid; grid-template-rows: auto 1fr; gap: 22px; min-width: 0; }

.panel { background: var(--panel); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); }

/* ---------- TV ---------- */
.tv { position: relative; padding: 18px 18px 10px; }
.screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0E0E0E; border: var(--bw) solid var(--ink); border-radius: var(--r-md); overflow: hidden; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.screen video.on { opacity: 1; }
.big-play { position: absolute; inset: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.big-play span { width: 86px; height: 86px; border-radius: 50%; background: var(--panel); border: var(--bw) solid var(--ink); display: grid; place-items: center; box-shadow: 0 6px 0 var(--ink); transition: transform .12s; }
.big-play:hover span { transform: translateY(-2px); }
.big-play svg { width: 34px; height: 34px; margin-left: 5px; }
.now-chip { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-sm); padding: 5px 10px; font-size: 14px; font-weight: 700; line-height: 1.25; pointer-events: none; transition: opacity .25s; }
.now-chip b { font-family: var(--mono); font-weight: 600; margin-right: 6px; }
.screen.idle .now-chip { opacity: 0; }

.scrub { position: relative; margin: 14px 0 0; height: 30px; }
.track { position: absolute; left: 0; right: 0; top: 9px; height: 13px; border: 2.5px solid var(--ink); border-radius: 8px; background: var(--card); overflow: hidden; }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.track .sep { position: absolute; top: -2px; bottom: -2px; width: 2.5px; background: var(--ink); }
.ticks { position: absolute; left: 0; right: 0; top: 0; height: 8px; }
.ticks i { position: absolute; top: 0; width: 2px; height: 7px; background: var(--ink); border-radius: 1px; opacity: .55; }
.scrub input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scrub .knob { position: absolute; top: 5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--white); border: 3px solid var(--ink); pointer-events: none; }
.scrub:focus-within .knob { box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px var(--ink); }
.hover-tip { position: absolute; bottom: 34px; transform: translateX(-50%); background: var(--ink); color: var(--white); font-size: 13px; line-height: 1.3; padding: 6px 9px; border-radius: 7px; width: max-content; max-width: 260px; pointer-events: none; z-index: 3; }
.hover-tip b { font-family: var(--mono); font-weight: 600; color: var(--panel); margin-right: 4px; }

.controls { display: flex; align-items: center; gap: 4px; margin-top: 6px; border-top: var(--bw) solid var(--ink); padding-top: 8px; color: var(--on-panel); }
.ctl { background: none; border: 0; height: 40px; min-width: 40px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 18px; }
.ctl:hover { background: rgba(0,0,0,.09); }
.ctl svg { width: 24px; height: 24px; }
.divider { width: 2.5px; height: 26px; background: currentColor; border-radius: 2px; opacity: .9; }
.time { font-family: var(--mono); font-size: 14px; font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.deco { display: none; } /* a spare decoration slot inside the TV; styles switch it on and draw in it */

.tv:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 18px 24px; }
.tv:fullscreen .screen { width: min(100%, calc((100vh - 120px) * 16 / 9)); margin: 0 auto; }
.tv:fullscreen .scrub, .tv:fullscreen .controls { width: min(100%, calc((100vh - 120px) * 16 / 9)); margin-left: auto; margin-right: auto; }

/* ---------- Steps ---------- */
.steps { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 10px 14px 16px; }
.steps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 10px 2px; color: var(--on-panel); }
.panel-title { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 21px; margin: 0; }
.follow { border: 2.5px solid var(--ink); background: var(--white); border-radius: 99px; padding: 3px 11px 3px 8px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink); }
.follow i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; }
.follow[aria-pressed="true"] i { background: var(--ink); }
.step-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 10px; padding: 2px 8px 6px 2px; margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.step { background: var(--card); border-radius: 11px; border: 2.5px solid transparent; }
.step.active { border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.step-btn { width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; display: flex; gap: 10px; align-items: baseline; cursor: pointer; border-radius: 10px; }
.step-btn:hover { background: rgba(0,0,0,.04); }
.step-num { font-family: var(--display); font-weight: 800; font-size: 18px; min-width: 1.4em; }
.step-title { font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.2; flex: 1; text-wrap: balance; }
.step-meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.step-meta .ok { color: var(--ink); font-weight: 600; }
.subs { list-style: none; margin: 0; padding: 0 10px 12px 12px; display: none; gap: 3px; }
.step.active .subs { display: grid; }
.sub { display: grid; grid-template-columns: 22px 46px minmax(0, 1fr); gap: 6px; align-items: start; text-align: left; width: 100%; background: none; border: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.sub:hover { background: rgba(0,0,0,.06); }
.sub .chk { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 5px; margin-top: 1px; display: grid; place-items: center; }
.sub .chk svg { width: 12px; height: 12px; opacity: 0; }
.sub.watched .chk { background: var(--ink); }
.sub.watched .chk svg { opacity: 1; stroke: var(--card); }
.sub .ts { font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding-top: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sub.current { background: var(--ink); color: var(--white); }
.sub.current .ts { color: var(--panel); }
.sub.current .chk { border-color: var(--white); }
.sub.current.watched .chk { background: var(--white); }
.sub.current.watched .chk svg { stroke: var(--ink); }

/* ---------- Stills ---------- */
.stills { padding: 18px 50px 16px; position: relative; }
.viewport { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border: var(--bw) solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: #D9D7D3; touch-action: none; cursor: none; }
.viewport img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.lens { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 5px solid var(--ink); box-shadow: 0 0 0 3px var(--white), 0 10px 24px rgba(0,0,0,.35); background-repeat: no-repeat; pointer-events: none; display: none; }
.lens::after { content: ""; position: absolute; left: 100%; top: 100%; width: 70px; height: 13px; background: var(--ink); border-radius: 8px; transform-origin: 0 50%; transform: translate(-14px, -14px) rotate(45deg); }
.viewport.lensing .lens { display: block; }
.hint { position: absolute; left: 10px; top: 10px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 99px; padding: 2px 10px; font-size: 13px; font-weight: 700; pointer-events: none; transition: opacity .2s; }
.viewport.lensing .hint { opacity: 0; }
.zoom { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; background: var(--white); border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; cursor: default; }
.zoom button { width: 32px; height: 28px; border: 0; background: none; font-weight: 800; font-size: 18px; cursor: pointer; line-height: 1; }
.zoom button:hover { background: var(--card); }
.zoom output { font-family: var(--mono); font-size: 13px; font-weight: 600; min-width: 38px; text-align: center; }
.arrow { position: absolute; top: calc(18px + (100% - 120px) / 2); width: 38px; height: 54px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--on-panel); border-radius: 10px; }
.arrow:hover { background: rgba(0,0,0,.09); }
.arrow svg { width: 26px; height: 26px; }
.arrow.prev { left: 6px; }
.arrow.next { right: 6px; }
.caption-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.caption { background: var(--card); border-radius: var(--r-sm); padding: 7px 14px; font-weight: 700; font-size: 16px; text-align: center; line-height: 1.3; min-width: 0; max-width: 100%; }
.caption .tag { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--muted); display: block; letter-spacing: .03em; }
.back-btn { border: 2.5px solid var(--ink); background: var(--white); border-radius: 99px; padding: 4px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.film { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding: 3px 3px 6px; scrollbar-width: thin; }
.film button { flex: 0 0 auto; width: 74px; aspect-ratio: 16 / 9; padding: 0; border: 2.5px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--card); cursor: pointer; opacity: .7; position: relative; }
.film button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--white); }
.film button span { position: absolute; left: 2px; bottom: 2px; font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--ink); color: var(--white); padding: 0 3px; border-radius: 3px; }

/* ---------- Progress ---------- */
.progress { padding: 14px 18px 16px; color: var(--on-panel); }
.prog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prog-pct { font-family: var(--mono); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.prog-bar { display: flex; gap: 4px; margin-top: 10px; height: 26px; }
.prog-seg { position: relative; flex: var(--w) 1 0; min-width: 6px; border: 2.5px solid var(--ink); border-radius: 6px; background: var(--card); overflow: hidden; cursor: pointer; padding: 0; }
.prog-seg .f { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 0; }
.prog-seg.cur { box-shadow: 0 0 0 2.5px var(--white); }
.prog-note { margin-top: 9px; font-size: 14.5px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.prog-note b { font-family: var(--display); font-weight: 700; }

/* ---------- Map ---------- */
.mapbox { background: var(--card); padding: 12px; min-height: 0; }
.map-inner { background: var(--panel); border-radius: 12px; padding: 12px 10px 8px; height: 100%; display: flex; flex-direction: column; }
.map-inner .panel-title { text-align: center; color: var(--on-panel); }
.map-svg { width: 100%; height: auto; flex: 1; min-height: 210px; display: block; color: var(--ink); }
.map-svg .edge { stroke: var(--ink); stroke-width: 3; fill: none; }
.map-svg .edge.soft { stroke-dasharray: 5 5; opacity: .75; }
.map-svg .node circle { fill: var(--card); stroke: var(--ink); stroke-width: 3.5; }
.map-svg .node.center circle { fill: var(--white); stroke-width: 4.5; }
.map-svg .node.later circle { stroke-dasharray: 6 4; fill: var(--card); }
.map-svg .node.far circle { opacity: .85; }
.map-svg .node text { font-family: var(--body); font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.map-svg .node .day { font-family: var(--mono); font-weight: 600; fill: var(--muted); }
.map-svg .node { cursor: pointer; }
.map-svg .node:hover circle, .map-svg .node:focus-visible circle { fill: var(--white); }
.map-svg .node:focus { outline: none; }
.map-svg .elabel rect { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.map-svg .elabel text { font-family: var(--mono); font-weight: 600; font-size: 11px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.map-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; color: var(--on-panel); margin-top: 4px; }
.map-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); vertical-align: -2px; margin-right: 5px; }
.map-legend i.dash { border-style: dashed; }

.keys { font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.keys kbd { font-family: var(--mono); font-size: 12px; border: 2px solid var(--ink); border-radius: 5px; padding: 0 5px; background: var(--white); color: var(--ink); margin-right: 4px; }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); text-align: center; z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.err { padding: 24px; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); background: var(--card); }

/* ---------- Layouts ----------
   1. Wide screens and landscape tablets (the default above): video and build steps side by side.
   2. Portrait tablets and smaller windows: video across the top, progress under it,
      then build steps beside the close-up stills, then the map.
   3. Phones: one column.
   Everything inside is fluid (percent widths, aspect ratios), so each layout stretches
   smoothly between these points instead of snapping to fixed sizes. */
@media (max-width: 1099px) and (orientation: portrait), (max-width: 899px) {
  /* The header gets the full width for the title; the controls move to their own row above it, on the right,
     so the header stays short and the build steps come into view sooner. */
  .top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "tv tv" "steps stills" "prog prog" "map map"; gap: 20px; }
  .tv-wrap { padding-top: 44px; }
  .side { display: contents; }
  .progress { grid-area: prog; }
  .mapbox { grid-area: map; }
  .map-svg { min-height: 0; flex: none; max-height: 330px; }
  .steps-cell { min-height: 420px; }
  .stills { padding: 14px; }
  .stills .arrow { display: none; }
  .caption { font-size: 15px; }
}
@media (max-width: 699px) {
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tv" "prog" "steps" "stills" "map"; }
  .steps-cell { min-height: 0; }
  .steps { position: static; max-height: min(520px, 70vh); }
  .stills { padding: 14px 12px; }
  .tv { padding: 12px 12px 6px; }
  .time { font-size: 12.5px; }
  .ctl { min-width: 36px; padding: 0 5px; font-size: 16px; }
  .hint { font-size: 12px; }
  .lens { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
  .now-chip { font-size: 12.5px;   /* keep every control at its full size; only the empty space gives way */
  .controls { gap: 4px; }
  .controls > * { flex-shrink: 0; }
  .controls > .grow { flex-shrink: 1; }
}
  /* keep every control at its full size; only the empty space gives way */
  .controls { gap: 4px; }
  .controls > * { flex-shrink: 0; }
  .controls > .grow { flex-shrink: 1; }
}
/* Touch screens (tablets, phones): larger targets for fingers. */
@media (pointer: coarse) {
  .lang { padding: 8px 16px; font-size: 15px; }
  .ctl { height: 46px; min-width: 46px; }
  .step-btn { padding: 14px; }
  .sub { padding: 10px 8px; }
  .follow { padding: 7px 14px 7px 10px; }
  .zoom button { width: 42px; height: 36px; }
  .film button { width: 86px; }
  .back-btn { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- additions for the shared player ---------- */
body { margin: 0; }
.site-bar { display: none; } /* the site header: only the Simple style shows it (styles/simple.css) */
.home-link { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); font-weight: 600; }
.home-link:hover { background: var(--card); }
.map-svg .map-note { font-family: var(--body); font-weight: 700; font-size: 12px; fill: var(--on-panel); text-anchor: middle; dominant-baseline: middle; }
/* ---------- language switch and style menu (header, top-right) ---------- */
.top-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 2px; }
.langs { display: inline-flex; border: var(--bw) solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--white); }
.lang { border: 0; background: none; padding: 4px 13px; font-family: var(--body); font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); }
.lang + .lang { border-left: 2.5px solid var(--ink); }
.lang:hover { background: var(--card); }
.lang[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.lang-note { background: var(--card); }
/* Portrait tablets, phones and small windows: the controls sit in one row above the title, on the right
   (placed last in the file so it wins over the default column arrangement above). */
@media (max-width: 1099px) and (orientation: portrait), (max-width: 899px) {
  .top-tools { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; }
  .tv-wrap { padding-top: 40px; }
  .steps-head { flex-wrap: wrap; row-gap: 8px; }
  .steps .panel-title { font-size: 19px; }
  .follow { white-space: nowrap; }
  .hint { font-size: 12px; max-width: calc(100% - 150px); }
}

/* =====================================================================
   STYLES — whole looks for the page. The default is "tv": everything in this file, including the TV parts below.
   Every other style is its own file in /styles (gadget.css, solarpunk.css, treehouse.css…), listed in styles/all.css.
   ===================================================================== */

/* ---------- TV: a television set, antenna, cabinet, glass and all ---------- */
.ant { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; pointer-events: none; }
.ant .rod { position: absolute; left: 0; bottom: -2px; width: 98px; height: 7px; background: var(--ink); border-radius: 7px; transform-origin: 0 50%; }
.ant .rod.l { transform: rotate(-144deg); }
.ant .rod.r { transform: rotate(-36deg); }
.ant .rod::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--ink); }
.ant .base { position: absolute; left: -27px; bottom: -3px; width: 54px; height: 24px; border-radius: 27px 27px 4px 4px; background: var(--ink); }
.ant .base::after { content: ""; position: absolute; left: 50%; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--panel); }
.tv { box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .1); }
.tv-wrap { padding-bottom: 16px; }
.feet { position: absolute; top: 100%; left: 12%; right: 12%; display: flex; justify-content: space-between; pointer-events: none; }
.feet i { width: 52px; height: 15px; background: var(--ink); border-radius: 0 0 12px 12px; }
.screen { border-radius: 26px / 22px; }
.glass { display: none; } /* the video is shown as it is: no glass, shading or lines over it */
.dial-face { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--ink); flex: none; transform: rotate(var(--rot, 0deg)); transition: transform .25s; }
.dial-mark { position: absolute; left: 50%; top: 2px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.ctl.dial { gap: 8px; }
.spacer { min-width: 0; } /* empty space that keeps the full-screen button at the right */
.style-pick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.style-pick select { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink); background: var(--white); border: var(--bw) solid var(--ink); border-radius: 99px; padding: 4px 10px; cursor: pointer; }
@media (pointer: coarse) { .style-pick select { padding: 8px 12px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .dial-face { transition: none; } }

/* Small phones: the controls need room, so the mute button (phones have volume buttons) and the dial's face drop out. */
@media (max-width: 480px) {
  #muteBtn { display: none; }
  .ctl.dial .dial-face { display: none; }
  .ctl.dial { padding: 0 8px !important; }
}

/* ---------- TV comes alive: the antenna sways a little while the video plays (nothing that looks like a control or a light) ---------- */
:root[data-style="tv"] .is-playing .ant .rod.l { animation: tv-sway-l 3.2s ease-in-out infinite alternate; }
:root[data-style="tv"] .is-playing .ant .rod.r { animation: tv-sway-r 3.6s ease-in-out infinite alternate; }
@keyframes tv-sway-l { from { transform: rotate(-144deg); } to { transform: rotate(-138deg); } }
@keyframes tv-sway-r { from { transform: rotate(-36deg); } to { transform: rotate(-43deg); } }
@media (prefers-reduced-motion: reduce) { .ant .rod { animation: none !important; } }

/* The lesson subtitle sits inside the title as <span class="sub">, which shares its class name with the build sub-steps.
   Keep sub-step styling (padding, hover backgrounds) off it in every style. */
:root[data-style] h1 .sub, :root[data-style] h1 .sub:hover { padding: 0; background: none; box-shadow: none; border-radius: 0; }

/* ---------- lesson facts (difficulty, start here / requires, chips, concepts) and the parts list ----------
   Built only from each style's colour and font tokens, so every style picks them up. */
.facts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; font-family: var(--body); font-size: 13.5px; line-height: 1.3; }
.fact { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); background: color-mix(in srgb, var(--card) 90%, transparent); }
.fact b { font-weight: 700; }
.fact a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fact.start { background: var(--ink); color: var(--card); border-color: var(--ink); font-weight: 700; }
.fact.level::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .85; }
.fact.level-medium::before { border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px; }
.fact.level-hard::before { border-radius: 0; width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid currentColor; }
.fact.learn { border-style: dashed; }
.parts { padding: 18px 20px 20px; color: var(--on-panel); }
.parts-note { margin: 4px 0 14px; font-size: 14px; opacity: .85; }
/* the parts list folds away: a single bar until someone opens it */
.parts-fold > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.parts-fold > summary::-webkit-details-marker { display: none; }
.parts-fold > summary .panel-title { margin: 0; }
.parts-fold > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); }
.parts-fold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.parts-fold[open] > summary { margin-bottom: 12px; }
.parts-count { font-size: 14px; opacity: .75; }
.parts-buy { margin: 14px 0 0; font-size: 15px; font-weight: 700; }
.parts-buy a { color: inherit; text-underline-offset: 3px; }
.parts-groups { columns: 4 230px; column-gap: 12px; }
.parts-group { background: var(--card); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 12px; break-inside: avoid; }
.parts-group h3 { margin: 0 0 8px; font-family: var(--display); font-size: 15px; font-weight: 700; }
.parts-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.parts-group li { display: grid; grid-template-columns: 40px 2.2em minmax(0, 1fr); gap: 6px; align-items: center; font-size: 14.5px; line-height: 1.3; }
.parts-group .pic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #FFFFFF; }
.parts-group .pic svg { width: 86%; height: 86%; }
.parts-group .pic:empty { visibility: hidden; }
.parts-group .qty { font-family: var(--display); font-size: 16px; text-align: right; }
.parts-group .qty::after { content: "×"; font-size: .75em; opacity: .6; margin-left: 1px; }
.parts-group small { display: block; font-size: 11.5px; opacity: .65; margin-top: 1px; }