:root {
  --paper: #f2f3ef;
  --surface: #ffffff;
  --stage: #ffffff;
  --ink: #14171a;
  --muted: #59616a;
  --line: #d3d8d1;
  --line-ui: #8c938d;
  --green: #127d45;
  --green-ink: #ffffff;
  --orange: #d9620c;
  --red: #c92a2a;
  --chrome: #e3e6e9;
  --chrome2: #b9c0c7;
  --edge: #6f7880;
  --leather: #24272b;
  --dark: #17191c;
  --glass: #5d7f97;
  --film: #7a5433;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --paper: #000000;
  --surface: #121513;
  --stage: #070807;
  --ink: #f0f2ed;
  --muted: #a3aba4;
  --line: #2b312d;
  --line-ui: #626a64;
  --green: #3fcb70;
  --green-ink: #00210e;
  --orange: #ff9340;
  --red: #ff5d52;
  --chrome: #c9ced3;
  --chrome2: #8e969e;
  --edge: #5a626a;
  --leather: #2c3035;
  --dark: #1b1e21;
  --glass: #6e95b0;
  --film: #8d6440;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.5; }
a { color: var(--green); text-underline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 20; padding: 10px 16px; border-radius: 4px; background: var(--surface); color: var(--ink); font-weight: 700; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 10px 24px; background: var(--paper); border-bottom: 2px solid var(--green); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand-mark { font-stretch: 125%; font-weight: 900; font-size: 24px; letter-spacing: -0.01em; color: var(--green); }
.brand-sub { font-size: 14px; color: var(--muted); }
.bar nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.bar nav a { padding: 8px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.bar nav a.on { background: var(--green); color: var(--green-ink); }
@media (hover: hover) { .bar nav a:not(.on):hover { background: color-mix(in srgb, var(--green) 14%, transparent); } }
.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; flex: none; }

/* layout */
main { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 56px 0 40px; }
.hero-head { max-width: 760px; margin-bottom: 32px; }
h1 { font-stretch: 125%; font-weight: 900; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.lede { margin-top: 18px; font-size: 19px; color: var(--muted); max-width: 56ch; }
.chapter { padding: 56px 0; border-top: 1px solid var(--line); }
.ch-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
/* outlined numerals echo the booklet's step figures */
.ch-num, .step-num { font-stretch: 125%; font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--green); line-height: 1; }
.ch-num { font-size: 64px; }
h2 { font-stretch: 125%; font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.01em; }
h3 { font-size: 18px; font-weight: 800; }
.intro { max-width: 62ch; color: var(--muted); margin-bottom: 24px; }
.pg { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* diagram stage: the booklet cover's green frame */
.stage { background: var(--stage); border: 2px solid var(--green); padding: 14px; border-radius: 4px; }
.stage svg { display: block; width: 100%; height: auto; }

.parts-wrap, .player, .duo, .sim { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sim { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.part-card, .steps, .panel, .controls { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.part-card h2 { font-size: 24px; margin-bottom: 10px; }
.panel > * + *, .controls > * + * { margin-top: 16px; }

/* svg paint */
.c-chrome { fill: var(--chrome); } .c-chrome2 { fill: var(--chrome2); } .c-leather { fill: var(--leather); }
.c-dark { fill: var(--dark); } .c-glass { fill: var(--glass); } .edge { stroke: var(--edge); stroke-width: 1.5; }
.inside { fill: #0c0d0e; } .well { fill: #1d2023; } .rail { stroke: var(--chrome2); stroke-width: 3; }
.slit { stroke: var(--dark); stroke-width: 2; } .knurl { stroke: var(--edge); stroke-width: 2; }
.glint { fill: #fff; opacity: .35; } .coin { fill: #c9a23c; stroke: #8d6f1f; stroke-width: 1.5; }
.can { fill: var(--orange); stroke: var(--edge); stroke-width: 1.5; } .strip { fill: var(--film); }
.perfs { stroke: #f4efe6; stroke-width: 7; stroke-dasharray: 7 9; }
.g-arrow { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.index { stroke: var(--red); stroke-width: 4; } .plate { fill: var(--dark); }
.scale, .tiny-w, .win, .lbl-w { fill: #f2f2f2; font-weight: 700; } .scale { font-size: 20px; }
.tiny-w { font-size: 8px; } .win { font-size: 15px; } .lbl-w { font-size: 13px; fill: #9aa2a9; }
.lbl { fill: var(--muted); font-size: 13px; }
/* these labels sit on the chrome body, whose gradient is the same in both themes */
[data-player="battery"] .lbl { fill: #3a4046; }
.note { fill: var(--ink); font-size: 16px; font-weight: 700; }
.logo { fill: var(--dark); font-size: 13px; font-weight: 800; font-stretch: 125%; }
.plus { fill: var(--dark); font-size: 44px; font-weight: 800; }
.tri { fill: var(--orange); } .count { fill: #fff; font-size: 26px; font-weight: 800; }
.count-big { fill: #fff; font-size: 34px; font-weight: 900; } .dot-red { fill: var(--red); }
.ring-hint { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 6 6; }

/* hotspots */
.hs { cursor: pointer; outline: none; }
.hs-hit { fill: transparent; }
.hs-dot { fill: var(--green); stroke: var(--stage); stroke-width: 2.5; }
.hs-ring { fill: none; stroke: var(--green); stroke-width: 2; opacity: 0; }
.hs:hover .hs-ring, .hs.peek .hs-ring, .hs:focus-visible .hs-ring, .hs.on .hs-ring { opacity: 1; }
.hs.on .hs-dot { fill: var(--orange); } .hs.on .hs-ring { stroke: var(--orange); }
.hs:focus-visible .hs-ring { stroke: var(--orange); stroke-width: 3; }
.part-cap { display: none; }

/* step player */
.steps { display: flex; flex-direction: column; gap: 18px; }
/* --step-h is set by JS to the tallest step so the controls below never jump */
.step-body { min-height: var(--step-h, 190px); }
.step-caution, .step-list li > .caution { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--red); border-radius: 4px; background: color-mix(in srgb, var(--red) 8%, transparent); font-size: 15px; font-weight: 600; }
.step-list li > .caution { display: block; margin: 0 0 8px; font-style: normal; }
.step-num { font-size: 72px; display: block; margin-bottom: 8px; }
.step-title { font-size: 22px; margin-bottom: 8px; }
.ctrl { display: flex; gap: 8px; }
button { font: inherit; }
.ctrl button, .stepper button, .fire-row button, .primary, .gn button { padding: 10px 16px; border: 2px solid var(--ink); border-radius: 4px; background: none; color: var(--ink); font-weight: 700; cursor: pointer; }
.ctrl .play, .primary { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.ctrl .play { flex: 1; }
button:disabled { opacity: .4; cursor: not-allowed; }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.facts > div { border-top: 3px solid var(--green); padding-top: 14px; }
.facts h3 { margin-bottom: 6px; }
.tips { list-style: none; padding: 0; display: grid; gap: 8px; }
.tips li { padding-left: 16px; border-left: 3px solid var(--green); }

/* animated transforms need the element's own box as origin */
.spin, .spin-slow, .rw-crank, .t-lever, .lever, .cover-closed, .cover-open, .film, .rw-film { transform-box: fill-box; transform-origin: center; }
.lid, .cell, .cassette, .lock, .cover-closed, .cover-open, .film, .rw-film, .rw-can, .rw-btn, .lever, .t-lever { transition: transform .9s ease, opacity .5s ease; }
@keyframes ccw { to { transform: rotate(-360deg); } }
@keyframes cw { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .25; } }
@keyframes feed { to { stroke-dashoffset: -32; } }
@keyframes swing { 50% { transform: rotate(-28deg); } }

/* battery */
.a-ccw, .a-cw, .ok, .n-plus, .coin { opacity: 0; transition: opacity .4s; }
.ok circle { fill: var(--green); } .ok path { fill: none; stroke: var(--green-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
[data-player="battery"] .cell { transform: translateY(-190px); opacity: 0; }
[data-player="battery"] [data-step="1"] .coin, [data-player="battery"] [data-step="4"] .coin { opacity: 1; }
[data-player="battery"] [data-step="1"] .a-ccw, [data-player="battery"] [data-step="4"] .a-cw { opacity: 1; }
[data-player="battery"] [data-step="1"] .spin { animation: ccw 3s linear infinite; }
[data-player="battery"] [data-step="4"] .spin { animation: cw 3s linear infinite; }
[data-player="battery"] [data-step="2"] .lid, [data-player="battery"] [data-step="3"] .lid { transform: translate(170px, -120px); }
[data-player="battery"] [data-step="3"] .cell, [data-player="battery"] [data-step="4"] .cell, [data-player="battery"] [data-step="5"] .cell { transform: none; opacity: 1; }
[data-player="battery"] [data-step="3"] .n-plus, [data-player="battery"] [data-step="5"] .ok { opacity: 1; }

/* load */
.inset, .a-lock, .a-leader, .ring-hint { opacity: 0; transition: opacity .4s; }
.cover-closed { transform-origin: right center; } .cover-open { transform-origin: left center; transform: scaleX(0); opacity: 0; }
.film { transform-origin: left center; transform: scaleX(0); }
.cassette { transform: translateY(-190px); opacity: 0; }
.lever { transform-origin: 12% 50%; }
[data-player="load"] [data-step="1"] .i-ring { opacity: 1; }
[data-player="load"] [data-step="2"] .a-lock { opacity: 1; animation: pulse 1.2s infinite; }
[data-player="load"] :is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .lock { transform: translateY(14px); }
[data-player="load"] :is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .cover-closed { transform: scaleX(0); }
[data-player="load"] :is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .cover-open { transform: none; opacity: 1; }
[data-player="load"] :is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .cassette { transform: none; opacity: 1; }
[data-player="load"] :is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .film { transform: none; }
[data-player="load"] [data-step="4"] .a-leader { opacity: 1; }
[data-player="load"] [data-step="5"] .ring-hint { opacity: 1; animation: pulse 1.2s infinite; }
[data-player="load"] [data-step="5"] .perfs { animation: feed 1s linear infinite; }
[data-player="load"] :is([data-step="5"], [data-step="7"]) .lever { animation: swing 1.6s ease-in-out infinite; }
[data-player="load"] [data-step="6"] .i-crank, [data-player="load"] [data-step="7"] .i-count { opacity: 1; }
[data-player="load"] [data-step="6"] .spin-slow { animation: cw 2.4s linear infinite; }

/* rewind */
.a-btn, .a-crank, .a-out, .n-stop, .n-slack, .l-btn { opacity: 0; transition: opacity .4s; }
.rw-film { transform-origin: left center; }
[data-player="rewind"] [data-step="1"] .n-stop { opacity: 1; }
[data-player="rewind"] [data-step="2"] :is(.a-btn, .l-btn) { opacity: 1; }
[data-player="rewind"] :is([data-step="2"], [data-step="3"], [data-step="4"]) .rw-btn { transform: translateY(-10px); }
[data-player="rewind"] [data-step="3"] .a-crank { opacity: 1; }
[data-player="rewind"] [data-step="3"] .rw-crank { animation: cw 1.4s linear infinite; }
[data-player="rewind"] [data-step="3"] .rw-film { transform: scaleX(.25); transition-duration: 3.2s; }
[data-player="rewind"] [data-step="3"] .perfs { animation: feed .5s linear infinite reverse; }
[data-player="rewind"] [data-step="4"] .rw-crank { animation: cw .5s linear infinite; }
[data-player="rewind"] :is([data-step="4"], [data-step="5"]) .rw-film { transform: scaleX(0); }
[data-player="rewind"] [data-step="4"] .n-slack, [data-player="rewind"] [data-step="5"] .a-out { opacity: 1; }
[data-player="rewind"] [data-step="5"] .rw-can { transform: translateY(-70px); }

/* film speed ring */
#asaRing { transform-box: fill-box; transform-origin: center; transition: transform .35s ease; }
.ticks path { stroke: var(--dark); stroke-width: 3; }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper output { flex: 1; text-align: center; font-stretch: 125%; font-weight: 900; font-size: 30px; }

/* simulator */
.vf-stage { position: sticky; top: 76px; }
.vf-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
#ghost, #needle, #pointer { transition: transform .25s ease; }
#blink.go { animation: blink .28s ease; }
@keyframes blink { 30% { opacity: 1; } }
.sc { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; } .sc.red { fill: #ff6a5e; }
.status { padding: 12px 14px; border-left: 5px solid var(--green); background: var(--paper); font-weight: 600; min-height: 76px; }
.status.lock { border-color: var(--red); }
.ctl { display: grid; gap: 6px; }
.ctl-name { font-size: 14px; font-weight: 700; color: var(--muted); }
.ctl-val { font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--green); height: 28px; margin: 0; }
.dial-row { display: flex; align-items: center; gap: 16px; }
.dial { width: 104px; flex: none; }
#dialFace { transition: transform .35s ease; }
.ring { width: 100%; max-width: 360px; border-radius: 6px; }
#ringFace { transition: transform .35s ease; }
.dof-bar { position: relative; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.dof-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s; }
.dof-bar b { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); transition: left .3s; }
.dof { display: grid; gap: 6px; }
.fire-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.fire-row button { flex: 1; }
.fire-row #resetCam { flex-basis: 100%; }
.counter { display: grid; place-items: center; min-width: 64px; background: var(--dark); color: #fff; border-radius: 4px; font-weight: 900; font-size: 24px; border-left: 8px solid var(--orange); }
.link-btn { border: 0; background: none; color: var(--green); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.table-wrap { margin-top: 36px; overflow-x: auto; }
.table-wrap h3 { margin-bottom: 12px; }
table { border-collapse: collapse; width: 100%; max-width: 720px; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { border-bottom: 2px solid var(--green); font-size: 14px; }
td { font-weight: 800; font-stretch: 125%; font-variant-numeric: tabular-nums; }

/* flash and timer */
.gn { display: flex; flex-wrap: wrap; gap: 8px; }
.gn button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.iris-row { display: flex; align-items: center; gap: 16px; }
.iris { width: 84px; flex: none; }
#irisHole { transition: r .3s ease; }
/* both iris gradients are near-black; a light rim keeps the opening readable on the dark theme */
:root[data-theme="dark"] #irisHole { stroke: var(--chrome2); stroke-width: 2.5; }
.iris-row output { font-weight: 700; }
.timer-stage { padding: 8px; }
.t-lever.set { transform: rotate(-90deg); transition-duration: .5s; }
.t-lever.run { transform: none; transition: transform 10s linear; }

/* sources */
.ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.ref-grid h3 { margin: 22px 0 10px; padding-top: 12px; border-top: 3px solid var(--green); }
.ref-grid ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.ref-grid a { font-weight: 700; }
.ref-grid span { display: block; font-size: 14px; color: var(--muted); }
.foot { max-width: 1160px; margin: 0 auto; padding: 28px 24px 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
  .parts-wrap, .player, .duo, .sim, .facts, .ref-grid { grid-template-columns: minmax(0, 1fr); }
  .vf-stage { position: static; }
  .brand-sub { display: none; }
  .bar { padding: 8px 16px; gap: 12px; }
  /* the scrollbar is hidden, so fade the trailing edge to show more chapters lie off-screen */
  .bar nav { padding-right: 24px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  #partsStage { position: relative; }
  .part-cap { display: block; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 28px); padding: 4px 10px; border: 1px solid var(--line-ui); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; text-align: center; pointer-events: none; }
  .part-cap:empty { display: none; }
  main { padding: 0 16px; }
  .chapter { padding: 40px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}

/* ---- second pass: views, lists, chips, reference ---- */
.stage svg[hidden] { display: none; }
.views { display: flex; gap: 8px; margin-bottom: 12px; }
.views button, .chips button { padding: 8px 14px; border: 2px solid var(--line-ui); border-radius: 4px; background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; }
.views button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 8px 10px; min-width: 44px; min-height: 40px; font-variant-numeric: tabular-nums; }
.chips button.red { color: var(--red); } .chips button.red[aria-pressed="true"] { color: var(--green-ink); }
.ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.facts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
/* column counts that divide each group evenly: 7 shutter speeds, 10 ring stops, 9 focus marks */
.ctl:has(.chips) { container-type: inline-size; }
#speedChips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#ringChips, #focusChips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container (min-width: 344px) { #speedChips { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.chips button { padding: 8px 4px; }
.dial-row { flex-wrap: wrap; }
.dial-row .chips { flex: 1 1 100%; }
.dial { width: 88px; }
.fire-row button.primary { background: var(--green); border-color: var(--green); color: var(--green-ink); }

.legend, .step-list, .missions { list-style: none; padding: 0; margin: 0; }
.legend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.legend button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--ink); font-size: 14px; cursor: pointer; text-align: left; }
.legend button:hover { border-color: var(--green); }
.legend button.on { background: var(--orange); border-color: var(--orange); color: #201000; font-weight: 700; }

.step-list { display: grid; gap: 2px; counter-reset: s; border-top: 1px solid var(--line); padding-top: 12px; }
.step-list button { display: flex; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 15px; text-align: left; cursor: pointer; }
.step-list button::before { counter-increment: s; content: counter(s); font-weight: 800; min-width: 1.2em; }
.step-list button:hover { color: var(--ink); }
.step-list button.done { color: var(--ink); }
.step-list button.on { background: var(--green); color: var(--green-ink); font-weight: 700; }

.missions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; counter-reset: m; }
.missions li { padding: 10px 12px 10px 40px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 15px; position: relative; }
.missions li::before { counter-increment: m; content: counter(m); position: absolute; left: 10px; top: 9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.missions li.done { border-color: var(--green); }
.missions li.done::before { content: "✓"; background: var(--green); border-color: var(--green); color: var(--green-ink); }

.vf-stage .status { margin-top: 12px; }
.next-ch { display: inline-block; margin-top: 32px; padding: 12px 18px; border: 2px solid var(--green); border-radius: 4px; color: var(--green); font-weight: 800; text-decoration: none; }
.next-ch:hover { background: var(--green); color: var(--green-ink); }
.sub { margin: 44px 0 8px; font-size: 22px; }
.hold { margin-top: 40px; }
.keep { fill: none; stroke: var(--red); stroke-width: 4; stroke-dasharray: 9 7; }
.hold-cam { transform-box: fill-box; transform-origin: center; transition: transform .6s ease; }
.hold-cam.v { transform: rotate(-90deg) scale(.62); }
.ring-txt { fill: var(--dark); font-size: 11px; font-weight: 800; }

/* fill flash */
.hl { fill: none; stroke: var(--green); stroke-width: 3; }
.fl-ring, .fl-ptr { transition: transform .6s ease, opacity .4s; }
.fl-ptr { stroke: var(--ink); stroke-width: 4; opacity: 0; transform: translateX(180px); }
.fl-ring { transform: translateX(105px); }
.fl-gn, .fl-s2, .fl-read, .fl-match { transition: opacity .4s; }
.fl-gn { opacity: .3; } .fl-s2, .fl-read, .fl-match { opacity: 0; }
[data-player="fill"] [data-step="1"] .fl-gn { opacity: 1; }
[data-player="fill"] :is([data-step="2"], [data-step="3"]) .fl-ring { transform: translateX(165px); }
[data-player="fill"] :is([data-step="3"], [data-step="4"], [data-step="5"]) .fl-ptr { opacity: 1; }
[data-player="fill"] [data-step="4"] .fl-ptr { transform: translateX(260px); }
[data-player="fill"] :is([data-step="3"], [data-step="4"]) .fl-read, [data-player="fill"] [data-step="5"] .fl-match, [data-player="fill"] [data-step="5"] .fl-s2 { opacity: 1; }
[data-player="fill"] [data-step="5"] .fl-s1 { opacity: 0; }

/* reference */
table.wide { max-width: none; }
td.n { font-weight: 400; font-stretch: 100%; }
.specs { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; margin: 0; }
.specs dt, .specs dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 700; color: var(--muted); font-size: 15px; padding-right: 12px; }
.gn-table td, .gn-table th { text-align: right; padding: 8px 12px; }

@media (max-width: 860px) {
  .missions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* keep the viewfinder in sight while the controls below it are used */
  .vf-stage { position: sticky; top: 58px; z-index: 5; padding: 8px; }
  .vf-stage svg { max-height: 34vh; margin: 0 auto; width: auto; max-width: 100%; }
  .vf-note { display: none; }
  .vf-stage .status { min-height: 0; padding: 8px 10px; font-size: 14px; margin-top: 8px; }
}

/* ---- realistic materials: shared gradients live in the zero-size svg.defs ---- */
svg.defs { position: absolute; }
.c-chrome { fill: url(#gChrome) var(--chrome); }
.c-chrome2 { fill: url(#gChrome2) var(--chrome2); }
.c-dark { fill: url(#gDark) var(--dark); }
.c-glass { fill: url(#gLens) var(--glass); }
.c-leather { fill: #1b1d20; filter: url(#fLeather); stroke: #34383d; stroke-width: 1; }
.coin { fill: url(#gGold) #c9a23c; }
.can { fill: url(#gCan) var(--orange); }
.edge { stroke: #5d656c; stroke-width: 1.2; }
.engr { fill: #16181b; font-weight: 800; font-stretch: 125%; }
.lens-txt { fill: #f1f1f1; font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; }
.plus, .logo, .ring-txt { fill: #16181b; }

/* ---- no-JS fallback and off-screen animation pause ---- */
.stage.off * { animation-play-state: paused !important; }
.step-list li > b, .step-list li > span { display: block; }
.step-list li > span { color: var(--muted); margin-bottom: 8px; }
html.js .step-list li > b, html.js .step-list li > span, html.js .step-list li > .caution { display: none; }
html:not(.js) .step-body, html:not(.js) .ctrl, html:not(.js) .missions, html:not(.js) .views { display: none; }