@import url('/gcsephy/assets/fonts/archivo-black.css');

/* Slide decks that match the unit companion sites (year9phy/unit01 and
   year10phy/unit01): navy and paper, Arial Black headings, 2px ink borders
   and hard offset shadows in the mission colours. The Year 9 palette is the
   default; <html class="deck-y10"> switches to the Year 10 electric palette. */
:root {
  --navy: #07162f;
  --navy-deep: #030c1e;
  --paper: #f4f0e5;
  --ink: #0b1730;
  --muted: #56606e;
  --hi: #c9ee49;
  --cyan: #42cbe8;
  --hot: #ff795e;
  --violet: #a895ff;
  --alt: #ffd45a;
  --line: rgba(7, 22, 47, .17);
  --card: #fffdf7;
  --diagram-bg: #fffdf8;
  --formula: #eef8d1;
  --note: #fff2bd;
  --wrong: #c2410c;
  --right: #15803d;
  --display: "Arial Black", "Archivo Black", Arial, sans-serif;
  --accent: var(--hi);
}
.deck-y10 {
  --navy: #0a1326;
  --paper: #f3f0e7;
  --ink: #0a1326;
  --hi: #ffd23f;
  --cyan: #3fd0e8;
  --hot: #ff8a4c;
  --violet: #a996ff;
  --alt: #b8ec58;
  --line: rgba(10, 19, 38, .17);
  --formula: #fff4c7;
}
.a-hi { --accent: var(--hi); }
.a-cyan { --accent: var(--cyan); }
.a-hot { --accent: var(--hot); }
.a-violet { --accent: var(--violet); }
.a-alt { --accent: var(--alt); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background-color: var(--navy);
  background-image: linear-gradient(rgba(68, 168, 200, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 168, 200, .12) 1px, transparent 1px);
  background-size: 58px 58px;
  color: var(--ink);
  font: 16px/1.45 Arial, Helvetica, sans-serif;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
sub, sup { line-height: 0; }

/* Top bar and controls */
.topbar {
  position: fixed;
  top: var(--standalone-top);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
}
.brand { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; min-width: 0; font-weight: 800; letter-spacing: -.02em; }
.brand a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.brand-logo { flex: none; justify-content: center; min-width: 48px; margin-left: -8px; }
.brand-name { min-width: 0; padding-right: 8px; }
.brand img { width: 32px; height: 32px; flex: none; }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: none; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.nav-pill:hover { background: #fff; color: var(--navy); }
.nav-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.controls {
  position: fixed;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--vv-bottom, 0px));
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--cyan);
}
.controls button { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; background: var(--hi); color: var(--ink); }
.controls button:hover { transform: translate(-1px, -1px); }
.controls button:disabled { opacity: .35; cursor: default; transform: none; }
.controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.counter { min-width: 92px; text-align: center; font: 900 15px Arial, sans-serif; letter-spacing: .08em; color: var(--muted); }
.counter b { color: var(--ink); }
.progress { position: fixed; left: 0; right: 0; bottom: var(--vv-bottom, 0px); z-index: 21; height: 5px; }
.progress span { display: block; height: 100%; width: 0; background: var(--hi); transition: width .3s ease; }

/* Slide thumbnails: shown beside the stage unless presenting fullscreen. */
.nav-pill.icon-only { width: 44px; padding: 0; justify-content: center; }
.nav-pill .pane { fill: currentColor; stroke: none; opacity: 0; }
.nav-pill[aria-pressed="true"] { background: rgba(255, 255, 255, .12); }
.nav-pill[aria-pressed="true"]:hover { background: #fff; color: var(--navy); }
.nav-pill[aria-pressed="true"] .pane { opacity: .45; }
.thumbs {
  position: fixed;
  top: calc(60px + var(--standalone-top));
  left: 0;
  bottom: var(--vv-bottom, 0px);
  z-index: 15;
  width: 252px;
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px 28px max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid rgba(255, 255, 255, .15);
  background: var(--navy-deep);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
body.show-thumbs .thumbs { display: flex; }
body.show-thumbs .stage { left: 252px; }
body.show-thumbs .controls { left: calc(50% + 126px); }
.thumb { display: flex; gap: 8px; align-items: flex-start; padding: 0; border: 0; background: none; text-align: left; }
.thumb-num { width: 20px; flex: none; padding-top: 2px; font: 900 12px Arial, sans-serif; color: rgba(255, 255, 255, .5); text-align: right; }
.thumb-frame { position: relative; width: 184px; height: 103.5px; flex: none; overflow: hidden; border: 2px solid rgba(255, 255, 255, .22); background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.thumb:hover .thumb-frame { border-color: var(--cyan); }
.thumb[aria-current="true"] .thumb-frame { border-color: var(--hi); box-shadow: 5px 5px 0 var(--cyan); }
.thumb[aria-current="true"] .thumb-num { color: var(--hi); }
.thumb-slide { position: absolute; top: 0; left: 0; width: 1600px; height: 900px; transform-origin: 0 0; pointer-events: none; }
.thumb-slide .slide { visibility: visible; opacity: 1; transition: none; }
.thumb-slide .step { opacity: 1; transform: none; transition: none; }
.thumb-slide .worked .step dt, .thumb-slide .worked .step dd { opacity: 1; }
body.is-fullscreen .thumbs { display: none; }
body.is-fullscreen .stage { left: 0; }
body.is-fullscreen .controls { left: 50%; }
@media (max-width: 900px) {
  .thumbs, #thumbs-toggle { display: none !important; }
  body.show-thumbs .stage { left: 0; }
  body.show-thumbs .controls { left: 50%; }
}

/* Revision-note pane colours (layout in deck-notes.css). */
.notes {
  --rn-ink: var(--ink);
  --rn-muted: var(--muted);
  --rn-bar: var(--paper);
  --rn-bg: var(--card);
  --rn-border: 2px solid var(--ink);
  --rn-radius: 0px;
  --rn-accent: var(--cyan);
  --rn-callout: var(--note);
  --rn-trap: var(--wrong);
  --rn-tip: var(--right);
  --rn-more: #5b45c9;
  --rn-font: 16px/1.45 Arial, Helvetica, sans-serif;
  --rn-label-font: 900 13px Arial, sans-serif;
  --rn-label-spacing: .14em;
  --rn-label-case: uppercase;
  --rn-tag-font: 900 12px Arial, sans-serif;
}

/* Stage: slides are authored at 1600 × 900 and scaled to fit. */
.stage { position: fixed; top: calc(60px + var(--standalone-top)); left: 0; right: 0; bottom: calc(74px + var(--vv-bottom, 0px)); }
.deck {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 900px;
  transform-origin: 0 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 14px 14px 0 var(--cyan);
  overflow: hidden;
}
body.is-fullscreen .topbar, body.is-fullscreen .controls { display: none; }
body.is-fullscreen .stage { top: 0; bottom: var(--vv-bottom, 0px); }
body.is-fullscreen .deck { border: 0; box-shadow: none; }

/* Leaves the in-window presenting mode used where there is no Fullscreen API (iPhone). */
.exit-present {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + var(--standalone-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 30;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}
.exit-present svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
body.is-window-fullscreen .exit-present { display: grid; }
body.is-window-fullscreen .stage { top: var(--standalone-top); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vv-bottom, 0px)); }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 56px 84px 74px;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.slide.active { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.slide-foot {
  position: absolute;
  left: 84px;
  right: 84px;
  bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  font: 900 16px Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.slide-foot .tag { display: inline-flex; align-items: center; gap: 12px; }
.slide-foot .tag::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); }

/* Typography */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; font: 900 24px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.eyebrow .num { white-space: nowrap; padding: 5px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--ink); letter-spacing: .08em; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; }
h2 { font-size: 64px; line-height: .95; letter-spacing: -.055em; margin: 16px 0 30px; }
h2 em, h3 em { font-style: normal; box-shadow: inset 0 -.3em 0 var(--accent); }
h3 { font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.lower { text-transform: none; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; align-content: start; }
.points li { position: relative; padding-left: 46px; font-size: 35px; line-height: 1.25; }
.points li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 50%; background: var(--accent); }
.points.small li { font-size: 31px; }
.points.small li::before { width: 19px; height: 19px; }
.points.tight { gap: 13px; }
.points b { font-weight: 900; }
.points .sub { display: block; font-size: .78em; color: var(--muted); }
.points.cols { grid-template-columns: 1fr 1fr; gap: 16px 44px; }
.points.cols3 { grid-template-columns: repeat(3, 1fr); gap: 16px 36px; }
ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
ol.steps li { counter-increment: s; position: relative; min-height: 46px; padding: 6px 0 0 64px; font-size: 31px; line-height: 1.2; }
ol.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); font: 900 21px Arial, sans-serif; }

.yes { color: var(--right); font-weight: 900; }
.no { color: var(--wrong); font-weight: 900; }
.hl { box-shadow: inset 0 -.32em 0 var(--accent); font-weight: 900; }

/* Layouts */
.split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr; gap: 54px; align-items: center; }
.split.wide-fig { grid-template-columns: .8fr 1.3fr; }
.split.even { grid-template-columns: 1fr 1fr; }
.split.top { align-items: start; }
.split > .panel { align-self: stretch; height: auto; }
.stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
.stack.centre { justify-content: center; gap: 34px; }
.col { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.fill { flex: 1; min-height: 0; }
.row { display: grid; gap: 24px; }
.row.two { grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: repeat(3, 1fr); }
.row.four { grid-template-columns: repeat(4, 1fr); }

/* Figure frame, as .circuit-figure on the companion sites */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 16px 20px 18px;
  border: 2px solid var(--ink);
  background: var(--diagram-bg);
  box-shadow: 8px 8px 0 rgba(7, 22, 47, .12);
}
.panel.pop { box-shadow: 9px 9px 0 var(--accent); }
.panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 2px solid var(--ink); font: 900 19px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.panel-head span:first-child { margin-right: auto; }
.pill { padding: 3px 10px; border: 2px solid var(--ink); background: var(--accent); font-size: 20px; letter-spacing: .1em; }
.fig { position: relative; flex: 1; min-height: 0; }
.fig > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.panel .fig { margin-top: 12px; }
.cap { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); font-size: 25px; font-weight: 700; color: var(--muted); line-height: 1.3; }

/* Companion diagram figures (Diagrams.circuit) drawn inside a frame */
.fig > .circuit-figure { position: absolute; inset: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; }
.fig > .circuit-figure > svg { flex: 1; min-height: 0; width: 100%; height: auto; max-height: none; }
.fig > .circuit-figure figcaption { flex: none; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 25px; font-weight: 700; color: var(--muted); line-height: 1.3; }

/* Cards */
.card { padding: 24px 28px; border: 2px solid var(--ink); background: var(--card); box-shadow: 8px 8px 0 var(--accent); }
.card .eyebrow { font-size: 22px; }
.card h3 { margin: 10px 0 12px; }
.card p { margin: 0; font-size: 28px; color: var(--muted); line-height: 1.3; }
.card .points li { font-size: 29px; padding-left: 38px; }
.card .points li::before { width: 18px; height: 18px; }
.card.flat { box-shadow: 6px 6px 0 rgba(7, 22, 47, .12); }
.card .fig { height: 220px; flex: none; margin: 4px 0 12px; }
.card.figcard { display: flex; flex-direction: column; }
.card.figcard .fig { flex: 1; height: auto; min-height: 200px; }
.card.navy { background: var(--navy); color: #fff; }
.card.navy p { color: #d5deeb; }

/* Rules, notes and equations */
.rule { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 18px; padding: 16px 24px; border: 2px solid var(--ink); background: var(--accent); box-shadow: 6px 6px 0 var(--ink); font-size: 31px; font-weight: 800; line-height: 1.25; }
.rule > strong:first-child { flex: none; font: 900 22px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.rule.stacked { grid-template-columns: minmax(0, 1fr); gap: 6px; } /* label above a long word equation */
.remember { padding: 14px 20px; border-left: 6px solid var(--accent); background: var(--note); font-size: 29px; font-weight: 700; line-height: 1.3; }
.formula { padding: 16px 22px; border: 2px solid var(--ink); background: var(--formula); font-size: 30px; font-weight: 800; line-height: 1.35; }
.formula > span:first-child { display: block; margin-bottom: 6px; font: 900 22px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.eq-block { padding: 20px 26px; border: 2px solid var(--ink); background: var(--navy); color: #fff; box-shadow: 7px 7px 0 var(--accent); }
.eq-block .eq { display: block; font: 900 64px/1.05 var(--display); letter-spacing: -.02em; color: var(--hi); }
.eq-block .eq-words { display: block; margin-top: 8px; font-size: 27px; font-weight: 800; color: #d4deec; }
.eq-block .eq-units { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 24px; color: #b9c5d6; }
.eq-block .flag { display: inline-block; margin-top: 12px; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .4); font-size: 20px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

/* Worked example: Equation / Substitute / Answer frame */
.worked { border: 2px solid var(--ink); background: var(--card); box-shadow: 6px 6px 0 rgba(7, 22, 47, .12); }
.worked .wq { padding: 14px 20px; border-bottom: 2px solid var(--ink); background: var(--accent); font-size: 28px; font-weight: 800; line-height: 1.3; }
.worked .wq span { display: block; font: 900 22px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.worked dl { margin: 0; display: grid; grid-template-columns: 200px 1fr; }
.worked dt, .worked dd { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.worked dt { font: 900 22px/1.5 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.worked dd { font-size: 31px; font-weight: 700; }
.worked dd.ans { font-weight: 900; }
.worked .step { display: contents; }
.worked .step:not(.shown) dt, .worked .step:not(.shown) dd { opacity: 0; }
.worked dl > :nth-last-child(-n+2), .worked .step:last-child > * { border-bottom: 0; }

/* Mistakes: not this / say this */
.mistakes { display: grid; gap: 14px; }
.mistake { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); background: var(--card); }
.mistake p { margin: 0; padding: 12px 18px; font-size: 27px; line-height: 1.3; }
.mistake p + p { border-left: 2px solid var(--ink); }
.mistake p::before { display: block; margin-bottom: 4px; font: 900 22px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.mistake .wrong { color: #5b6470; }
/* SVG cross and tick (not ✗/✓, which some devices draw as emoji); colours match --wrong and --right. */
.mistake p::before { padding-left: 23px; background: no-repeat 0 50% / 16px 16px; }
.mistake .wrong::before { content: "Not this"; color: var(--wrong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%23c2410c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mistake .right { font-weight: 700; }
.mistake .right::before { content: "Say this"; color: var(--right); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Tables, as .data-table on the companion sites */
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: 29px; }
.data caption { padding: 10px 16px; border: 2px solid var(--ink); border-bottom: 0; background: var(--accent); font-weight: 900; text-align: left; font-size: 24px; }
.data th, .data td { padding: 11px 14px; border: 2px solid var(--ink); text-align: center; }
.data thead th { background: #eaf4f7; font-size: 24px; line-height: 1.2; }
.data tbody th { text-align: left; background: #fbfaf5; }
.data td.mean { background: var(--formula); font-weight: 900; }
.data .odd { background: #ffe1d8; font-weight: 900; }
.data.compact { font-size: 26px; }
.data.compact th, .data.compact td { padding: 8px 12px; }

/* Quick checks */
.quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; align-content: start; }
.q { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; border: 2px solid var(--ink); background: var(--card); box-shadow: 6px 6px 0 rgba(7, 22, 47, .12); }
.q p { margin: 0; font-size: 29px; font-weight: 800; line-height: 1.3; }
.q .n { display: inline-grid; place-items: center; min-width: 42px; height: 42px; margin-right: 12px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); font: 900 24px Arial, sans-serif; vertical-align: 2px; }
.q .ans { margin-top: auto; padding: 9px 14px; border: 2px solid var(--ink); background: #e5f2ea; color: #1f4a2f; font-size: 27px; font-weight: 800; }
.step { transition: opacity .3s ease, transform .3s ease; }
.step:not(.shown) { opacity: 0; transform: translateY(8px); }
.reveal-hint { font: 900 20px Arial, sans-serif; letter-spacing: .16em; color: var(--muted); }

/* Vocabulary panel */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; padding: 26px 34px; border: 2px solid var(--ink); background: var(--navy); color: #fff; box-shadow: 9px 9px 0 var(--accent); }
.term { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.term b { display: block; font: 900 29px/1.1 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--accent); }
.term span { display: block; margin-top: 6px; font-size: 26px; color: #d5deeb; line-height: 1.3; }

/* Mission map */
.missions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mission { display: flex; flex-direction: column; min-height: 0; padding: 18px 20px; border: 2px solid var(--ink); background: var(--card); box-shadow: 7px 7px 0 var(--accent); text-decoration: none; }
.mission-top { display: flex; justify-content: space-between; align-items: flex-start; }
.lesson-number { font: 900 22px/1 Arial, sans-serif; border: 2px solid; border-radius: 999px; padding: 7px 11px; }
.lesson-icon { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--ink); border-radius: 50%; background: var(--accent); font: 900 21px/1 var(--display); }
.lesson-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lesson-icon .icon-fill { fill: currentColor; stroke: none; }
.mission h3 { margin-top: 22px; font-size: 30px; }
.mission p { margin: 10px 0 0; font-size: 24px; color: var(--muted); line-height: 1.3; }

/* Title and section slides */
.slide.dark { justify-content: center; background-color: var(--navy); background-image: linear-gradient(rgba(68, 168, 200, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 168, 200, .17) 1px, transparent 1px); background-size: 58px 58px; color: #fff; }
.slide.dark .eyebrow { color: #fff; }
.slide.dark .eyebrow span.on { color: var(--accent); }
.slide.dark h1 { margin-top: 26px; font-size: 118px; line-height: .82; letter-spacing: -.075em; }
.slide.dark h1 em { font-style: normal; color: var(--accent); }
.slide.dark .lead { max-width: 800px; margin: 34px 0 0; font-size: 32px; line-height: 1.45; color: #d5deeb; }
.slide.dark .slide-foot { color: #fff; border-top-color: rgba(255, 255, 255, .3); }
.slide.dark .slide-foot .tag::before { border-color: #fff; }
.hero { display: grid; grid-template-columns: 1.12fr .88fr; gap: 70px; align-items: center; height: 100%; }
.hero.section h1 { font-size: 104px; }
.unlocks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.unlocks span { padding: 9px 16px; border: 2px solid var(--accent); font-size: 24px; font-weight: 800; }
.unlocks a { padding: 11px 18px; border: 2px solid var(--ink); background: var(--accent); color: var(--ink); font-size: 24px; font-weight: 900; text-decoration: none; box-shadow: 5px 5px 0 var(--cyan); }

.case-card { position: relative; padding: 28px 30px 30px; background: var(--paper); color: var(--ink); box-shadow: 16px 16px 0 var(--accent); transform: rotate(2deg); }
.case-card .label { padding-bottom: 10px; border-bottom: 2px solid; font: 900 22px Arial, sans-serif; letter-spacing: .2em; }
.case-card h3 { margin: 18px 0 16px; font-size: 38px; line-height: .95; }
.case-card .points li { font-size: 29px; padding-left: 38px; }
.case-card .points li::before { width: 18px; height: 18px; }
.case-card .fig { height: 330px; margin-top: 14px; }
.stamp { position: absolute; z-index: 3; display: grid; place-items: center; width: 132px; height: 132px; border: 6px double var(--hot); border-radius: 50%; color: var(--hot); text-align: center; font: 900 18px/1.05 var(--display); transform: rotate(11deg); }
.sticky { position: absolute; z-index: 3; padding: 12px 16px; background: var(--alt); color: var(--ink); font: 900 22px/1 Arial, sans-serif; text-transform: uppercase; box-shadow: 5px 5px 0 var(--navy-deep); }

/* Print or save as PDF: one slide per landscape page, all steps shown. */
@media print {
  @page { size: 1600px 900px; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  .topbar, .controls, .progress, .thumbs { display: none !important; }
  .stage { position: static; }
  .deck { position: static; transform: none !important; width: 1600px; height: auto; border: 0; box-shadow: none; overflow: visible; }
  .slide { position: relative; width: 1600px; height: 900px; visibility: visible; opacity: 1; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .step:not(.shown) { opacity: 1; transform: none; }
  .worked .step:not(.shown) dt, .worked .step:not(.shown) dd { opacity: 1; }
  .reveal-hint { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .step, .progress span { transition: none; }
}

@media (max-width: 640px) {
  .topbar { height: 56px; }
  .brand span { font-size: 14px; }
  .nav-pill .wide { display: none; }
  .stage { top: calc(56px + var(--standalone-top)); }
}