/* A Quarter of a Second: shared styles. Art direction: "By Its Own Light" (review/creative-direction.md).
   Everything is drawn on a fixed 1280x720 stage that scales to the window.
   Decks use ONLY the variables below for colour, so each stratum can re-skin them.
   On the seabed the only light on screen is the signal. Daylight arrives a layer at a time. */

:root {
  --font-display: 'Anek Latin', 'Avenir Next', sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Avenir Next', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layer colours: constant everywhere. Also the colours of Pip's coats. */
  --c-phys: #ffd23f;   /* the signal. The only warm thing below 200 m. */
  --c-link: #ff8a3d;
  --c-ip:   #ff5c97;
  --c-tcp:  #a48bff;
  --c-tls:  #2fd4a7;
  --c-http: #3fb4ff;
  --c-rails: #d30001;

  --abyss: #03090c;    /* the darkest water. Also the ink of daylight. */
  --noon:  #f6fbff;    /* the brightest sky. Also the ink of the seabed. */

  --nav-h: 64px;
}

/* ---------- strata themes ---------- */
/* --wdth: display type is squeezed by pressure and relaxes as you climb.
   --rim: the light that catches the top edge of things under water.
   --cast: the shadow things throw, only where there is a sun.
   --pip-glow: Pip is the lamp below the surface.
   --accent-text: the accent, darkened where needed so small text in it stays readable.
   Contrast floor (measured on the canvas, see tools/contrast.py): ink 7:1, dim 4.5:1. */
body, body[data-layer="hook"] {
  --bg: #0d1024; --bg2: #24160f;
  --ink: #f8eedb; --dim: #b9a995; --faint: #8d7e70;
  --line: rgba(255,236,200,.2); --line2: rgba(255,236,200,.09);
  --panel: rgba(0,0,0,.28); --panel2: rgba(255,236,200,.1);
  --accent: var(--c-phys); --accent-ink: #1a1400; --accent-text: var(--accent);
  --hot: #ff7a4d; --ok: #4fe0a0; --bad: #ff6b7d; --cool: #6cc8ff;
  --code-bg: #0b0a10; --code-ink: #e9e2d4;
  --pip: #fff3c4; --pip-edge: #1a1206; --pip-glow: rgba(255,210,63,.55);
  --glyph: #2a1d16; --glyph-edge: #c9b89c; --glyph-screen: #0c0806;
  --rim: #ffd23f; --cast: transparent;
  --shadow: 0 12px 34px rgba(0,0,0,.5);
  --wdth: 100%;
  color-scheme: dark;
}
body[data-layer="seabed"] {
  --bg: #03090c; --bg2: #010304;
  --ink: #e4ece8; --dim: #92a7a1; --faint: #667e78;
  --line: rgba(214,236,226,.17); --line2: rgba(214,236,226,.08);
  --panel: rgba(214,236,226,.045); --panel2: rgba(214,236,226,.1);
  --accent: var(--c-phys); --accent-ink: #1a1400;
  --code-bg: #070e10; --code-ink: #d9e6e0;
  --pip-edge: #0a0e0c;
  --glyph: #12262a; --glyph-edge: #86a39b; --glyph-screen: #020506;
  --rim: #ffd23f; --wdth: 80%;
}
body[data-layer="deep"] {
  --bg: #05131d; --bg2: #020a11;
  --ink: #e4edf0; --dim: #93abb5; --faint: #668089;
  --line: rgba(206,232,244,.17); --line2: rgba(206,232,244,.08);
  --panel: rgba(206,232,244,.045); --panel2: rgba(206,232,244,.1);
  --accent: var(--c-link); --accent-ink: #220d00;
  --code-bg: #030b12; --code-ink: #dbe8f0;
  --pip-edge: #06121a;
  --glyph: #122a38; --glyph-edge: #8fb0bf; --glyph-screen: #030a10;
  --rim: #ffb27a; --wdth: 85%;
}
body[data-layer="waist"] {
  --bg: #08223c; --bg2: #041423;
  --ink: #e8f1f8; --dim: #9db5c9; --faint: #7189a0;
  --line: rgba(200,226,250,.18); --line2: rgba(200,226,250,.08);
  --panel: rgba(0,6,16,.3); --panel2: rgba(200,226,250,.1);
  --accent: var(--c-ip); --accent-ink: #2a0012;
  --code-bg: #040f1c; --code-ink: #dbe8f3;
  --pip-edge: #06162a;
  --glyph: #10304f; --glyph-edge: #9dbdd8; --glyph-screen: #051222;
  --rim: #cfe6ff; --wdth: 90%;
}
body[data-layer="twilight"] {
  --bg: #0b3d66; --bg2: #072a4c;
  --ink: #f2f8fd; --dim: #bcd4e6; --faint: #93b0c6;
  --line: rgba(220,238,255,.2); --line2: rgba(220,238,255,.09);
  --panel: rgba(0,14,34,.28); --panel2: rgba(220,238,255,.12);
  --accent: #c8b8ff; --accent-ink: #150a3a;
  --code-bg: #051c36; --code-ink: #dbe8f3;
  --pip-edge: #071d38; --pip-glow: rgba(255,240,190,.4);
  --glyph: #114468; --glyph-edge: #b4d3e8; --glyph-screen: #062440;
  --rim: #e4f3ff; --wdth: 95%;
}
body[data-layer="shallows"] {
  --bg: #08525e; --bg2: #064358;
  --ink: #ffffff; --dim: #d6eeee; --faint: #a8d0d3;
  --line: rgba(240,255,252,.26); --line2: rgba(240,255,252,.12);
  --panel: rgba(0,32,46,.3); --panel2: rgba(240,255,252,.15);
  --accent: #b6ffe4; --accent-ink: #00261a;
  --hot: #ffa27a; --bad: #ff98a4;
  --code-bg: #04303c; --code-ink: #e2f3f2;
  --pip-edge: #06303f; --pip-glow: rgba(255,250,220,.3);
  --glyph: #0a4658; --glyph-edge: #d2eeee; --glyph-screen: #063040;
  --rim: #ffffff; --wdth: 100%;
}
body[data-layer="surface"] {
  --bg: #d9effa; --bg2: #9fd6de;
  --ink: #06202c; --dim: #284a5a; --faint: #4a6f7e;
  --line: rgba(6,32,44,.22); --line2: rgba(6,32,44,.1);
  --panel: rgba(255,255,255,.66); --panel2: rgba(255,255,255,.94);
  --accent: #00626f; --accent-ink: #ffffff; --accent-text: #00525e;
  --hot: #cf4a22; --ok: #087a50; --bad: #c22843; --cool: #1166b4;
  --code-bg: #06202c; --code-ink: #dcecf2;
  --pip: #fffbe9; --pip-edge: #06202c; --pip-glow: transparent;
  --glyph: #ffffff; --glyph-edge: #06202c; --glyph-screen: #cfe8ee;
  --rim: transparent; --cast: rgba(20,70,150,.2);
  --shadow: 7px 9px 0 rgba(20,70,150,.14);
  --wdth: 104%;
  color-scheme: light;
}
body[data-layer="daylight"] {
  --bg: #cfe9fa; --bg2: #f3faff;
  --ink: #03121c; --dim: #405866; --faint: #5d7684;
  --line: rgba(3,18,28,.2); --line2: rgba(3,18,28,.1);
  --panel: rgba(255,255,255,.74); --panel2: #ffffff;
  --accent: var(--c-rails); --accent-ink: #ffffff; --accent-text: #b10001;
  --hot: #cf4a22; --ok: #10804a; --bad: #c62020; --cool: #1f62c9;
  --code-bg: #03121c; --code-ink: #e6eef2;
  --pip: #fffbe9; --pip-edge: #03121c; --pip-glow: transparent;
  --glyph: #ffffff; --glyph-edge: #03121c; --glyph-screen: #dceaf2;
  --rim: transparent; --cast: rgba(24,60,170,.22);
  --shadow: 7px 9px 0 rgba(24,60,170,.15);
  --wdth: 108%;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--ink); font-family: var(--font-body);
  transition: background .6s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
}
#app { position: fixed; inset: 0; opacity: 0; transition: opacity .3s; }
body.ready #app { opacity: 1; }
/* the water (and the sky) is drawn on this canvas; the body gradient is only the fallback */
#ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a slide may ask for a painted frame behind the stage: { backdrop: 'assets/art/x.webp' } */
#backdrop { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: #000 right bottom / cover no-repeat; }
#backdrop.on { opacity: 1; }
/* the dive: start -> wire, once per visit. The stall's light closes to a point, then the dark. */
#dive { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: #010304; opacity: 0; }
#dive.go { animation: diveIn 1.7s cubic-bezier(.5,0,.3,1) both; }
@keyframes diveIn { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; } }
#stage-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: var(--nav-h); overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center center; }

/* ---------- the slide ---------- */
.slide {
  position: absolute; inset: 0; padding: 52px 84px 44px;
  font-size: 24px; line-height: 1.45; letter-spacing: .003em;
  display: flex; flex-direction: column;
}
.slide.center { align-items: center; justify-content: center; text-align: center; gap: 22px; }
.slide.center > p, .slide.center > h1, .slide.center > h2 { max-width: 860px; }
.slide.top { align-items: center; justify-content: flex-start; text-align: center; gap: 18px; }
.slide.top > p, .slide.top > h2 { max-width: 900px; }
/* text column beside a demo. Add class "flip" to put the text on the right. */
.slide.split { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: center; }
.slide.split.flip { grid-template-columns: 1fr 400px; }
.slide.split.flip > .col-text { order: 2; }
.slide.split.wide { grid-template-columns: 340px 1fr; }
.slide.split.wide.flip { grid-template-columns: 1fr 340px; }
.col-text { display: flex; flex-direction: column; gap: 18px; }
.col-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
/* a caption, then a demo that fills the rest */
.slide.stack { align-items: stretch; gap: 16px; }
.slide.stack > .cap { text-align: center; max-width: 940px; align-self: center; }
.slide.stack > .fill { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.slide.free { display: block; padding: 0; }

.slide p { margin: 0; text-wrap: pretty; }
.slide h1 { font-family: var(--font-display); font-stretch: var(--wdth); font-weight: 750; font-size: 74px; line-height: .98; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
.slide h2 { font-family: var(--font-display); font-stretch: var(--wdth); font-weight: 680; font-size: 45px; line-height: 1.05; letter-spacing: -.008em; margin: 0; text-wrap: balance; }
.slide h3 { font-family: var(--font-display); font-stretch: var(--wdth); font-weight: 650; font-size: 29px; line-height: 1.12; letter-spacing: 0; margin: 0; }
.lede { font-size: 29px; line-height: 1.38; }
.big { font-family: var(--font-display); font-stretch: var(--wdth); font-size: 35px; line-height: 1.2; font-weight: 520; letter-spacing: 0; }
.small { font-size: 19px; line-height: 1.4; }
.tiny { font-size: 15.5px; line-height: 1.35; }
.dim { color: var(--dim); }
/* labels speak in the display face, narrow, in sentence case. Mono is kept for machine text. */
.eyebrow { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; font-size: 20px; line-height: 1.2; letter-spacing: .01em; color: var(--accent-text); margin: 0; }
.mono, code, kbd { font-family: var(--font-mono); }
.slide :not(pre) > code { font-size: .86em; background: var(--panel2); padding: .08em .34em; border-radius: 6px; white-space: nowrap; }
.slide strong, .slide b { font-weight: 700; }
.slide em { font-style: italic; }
.accent { color: var(--accent-text); }
.hot { color: var(--hot); } .ok { color: var(--ok); } .bad { color: var(--bad); } .cool { color: var(--cool); }
/* the one honest line that says where a model breaks */
.caveat { font-size: 16.5px; color: var(--dim); max-width: 760px; }
.caveat::before { content: 'Simplified: '; font-family: var(--font-display); font-stretch: 84%; font-weight: 620; font-size: 16px; color: var(--dim); }
/* the sentence a slide exists for, revealed after the reader has done the thing */
.landing { font-family: var(--font-display); font-stretch: var(--wdth); font-size: 31px; line-height: 1.22; font-weight: 600; letter-spacing: 0; }
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.reveal.show { opacity: 1; transform: none; pointer-events: auto; }

/* slide transitions */
@keyframes enterNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes enterPrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes enterDeck { from { opacity: 0; transform: translateY(22px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes enterFade { from { opacity: 0; } to { opacity: 1; } }
.slide.enter-next { animation: enterNext .32s cubic-bezier(.2,.7,.2,1); }
.slide.enter-prev { animation: enterPrev .32s cubic-bezier(.2,.7,.2,1); }
.slide.enter-deck { animation: enterDeck .5s cubic-bezier(.2,.7,.2,1); }
.slide.enter-fade { animation: enterFade .3s ease; }
/* a door within one stratum drifts sideways; a step up the trunk settles from above (you are rising) */
@keyframes enterSide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes enterUp { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }
.slide.enter-side { animation: enterSide .4s cubic-bezier(.2,.7,.2,1); }
.slide.enter-up { animation: enterUp .85s cubic-bezier(.2,.7,.2,1); }

/* ---------- doors ---------- */
/* inline: <a data-door="light">what is the wire, actually?</a> */
a.door, span.door {
  color: var(--ink); text-decoration: none; cursor: pointer; position: relative; white-space: normal;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
  padding: 0 .12em .04em; border-radius: 4px 4px 0 0; transition: background-size .18s, color .18s;
}
a.door::after, span.door::after { content: '\2198'; font-family: var(--font-mono); font-size: .7em; color: var(--accent-text); margin-left: .18em; vertical-align: .12em; transition: color .18s; }
a.door:hover, a.door:focus-visible, span.door:hover, span.door:focus-visible { background-size: 100% 100%; color: var(--accent-ink); outline: none; }
a.door:hover::after, a.door:focus-visible::after, span.door:hover::after { color: var(--accent-ink); }
a.door.visited::after, span.door.visited::after { content: '\2713'; }
/* card: <button class="door-card" data-door="x"><b>Title</b><span>why go</span></button> */
.door-card {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1.5px solid var(--line2); border-radius: 14px; padding: 14px 18px 15px; min-width: 200px;
  transition: transform .16s, border-color .16s, background .16s; position: relative;
}
.door-card b { font-family: var(--font-display); font-stretch: var(--wdth); font-size: 22px; font-weight: 650; padding-right: 22px; line-height: 1.12; }
.door-card span { font-size: 16px; color: var(--dim); line-height: 1.3; }
.door-card::after { content: '\2198'; position: absolute; right: 14px; top: 12px; font-family: var(--font-mono); color: var(--accent-text); font-size: 16px; }
.door-card.visited::after { content: '\2713'; }
.door-card:hover, .door-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: var(--panel2); outline: none; }
/* svg parts that are doors */
svg .door { cursor: pointer; }
svg .door:hover, svg .door:focus-visible { filter: brightness(1.25) drop-shadow(0 0 6px var(--accent)); outline: none; }

/* ---------- controls ---------- */
.btn {
  font: inherit; font-family: var(--font-display); font-stretch: 96%; font-weight: 620; font-size: 20.5px; letter-spacing: 0;
  color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 9px 22px 10px; cursor: pointer; transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; user-select: none;
}
.btn:hover:not(:disabled) { background: var(--panel2); border-color: var(--ink); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); border-color: transparent; box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, #000); transform: translateY(3px); }
.btn.big { font-size: 26px; padding: 13px 32px 15px; border-radius: 14px; }
.btn.small { font-size: 16.5px; padding: 6px 14px 7px; border-radius: 10px; }
.btn.ghost { background: transparent; }
.btn.on, .btn.on:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.center { justify-content: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
/* chips: small toggles / choices */
.chip {
  font: inherit; font-family: var(--font-mono); font-size: 16px; color: var(--ink); cursor: pointer; user-select: none;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 9px; padding: 6px 12px; transition: all .14s;
}
.chip:hover:not(:disabled) { border-color: var(--ink); }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip:disabled { opacity: .4; cursor: default; }
/* segmented choice */
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; background: var(--panel); gap: 2px; }
.seg button { font: inherit; font-family: var(--font-display); font-stretch: 96%; font-weight: 620; font-size: 17.5px; color: var(--dim); background: none; border: 0; border-radius: 9px; padding: 6px 16px 7px; cursor: pointer; transition: all .15s; }
.seg button:hover { color: var(--ink); }
.seg button.on, .seg button.on:hover { background: var(--accent); color: var(--accent-ink); }
/* slider: <label class="slider"><span>Noise</span><input type="range"><output>12%</output></label> */
.slider { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; font-size: 18px; width: 100%; max-width: 460px; }
.slider span { color: var(--dim); }
.slider output { font-family: var(--font-mono); font-size: 16px; min-width: 64px; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; width: 100%; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2); margin-top: -9px; box-shadow: 0 0 0 1.5px var(--accent); transition: transform .12s; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg2); box-shadow: 0 0 0 1.5px var(--accent); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=text], input[type=search], textarea.input {
  font: inherit; font-family: var(--font-mono); font-size: 18px; color: var(--ink); background: var(--panel); border: 1.5px solid var(--line);
  border-radius: 9px; padding: 8px 12px; outline: none; min-width: 0;
}
input[type=text]:focus, input[type=search]:focus, textarea.input:focus { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- surfaces ---------- */
/* wells in the dark, sheets in the sun */
.panel { background: var(--panel); border: 1.5px solid var(--line2); border-radius: 16px; padding: 18px 20px; }
body[data-layer="surface"] .panel, body[data-layer="daylight"] .panel,
body[data-layer="surface"] .door-card, body[data-layer="daylight"] .door-card { box-shadow: var(--shadow); }
.panel.solid { background: var(--panel2); }
.label { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; font-size: 16px; line-height: 1.2; letter-spacing: .01em; color: var(--dim); }
.stat { display: flex; flex-direction: column; gap: 2px; }
/* milliseconds are the heroes: always wide, always tabular */
.stat b { font-family: var(--font-display); font-stretch: 116%; font-size: 40px; font-weight: 760; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; font-size: 16px; letter-spacing: .01em; color: var(--dim); }
.tag { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; padding: 2px 8px 3px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); }
.tag.ok { background: color-mix(in srgb, var(--ok) 22%, transparent); border-color: var(--ok); color: var(--ink); }
.tag.bad { background: color-mix(in srgb, var(--bad) 22%, transparent); border-color: var(--bad); color: var(--ink); }
.tag.hot { background: color-mix(in srgb, var(--hot) 22%, transparent); border-color: var(--hot); color: var(--ink); }
.kbd, kbd { font-family: var(--font-mono); font-size: .72em; border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 1px 7px 2px; background: var(--panel); }

/* code */
pre.code {
  margin: 0; font-family: var(--font-mono); font-size: 17px; line-height: 1.55; text-align: left; tab-size: 2;
  background: var(--code-bg); color: var(--code-ink); border-radius: 14px; padding: 16px 20px; overflow: hidden; border: 1px solid var(--line2);
}
body[data-layer="surface"] pre.code, body[data-layer="daylight"] pre.code { box-shadow: var(--shadow); border-color: transparent; }
pre.code.small { font-size: 14.5px; padding: 12px 16px; }
pre.code.big { font-size: 22px; padding: 22px 28px; }
pre.code code { display: flex; flex-direction: column; } /* flex drops the newline text nodes between line spans */
pre.code .ln { display: block; padding: 0 8px; margin: 0 -8px; border-radius: 5px; transition: background .25s, opacity .25s; white-space: pre; }
pre.code .ln.hl { background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
pre.code.focus .ln:not(.hl) { opacity: .42; }
.t-kw { color: #ff8f9c; } .t-str { color: #a5e39c; } .t-sym { color: #ffc56b; } .t-num { color: #d3a8ff; }
.t-com { color: #8696a3; font-style: italic; } .t-com span { color: inherit !important; }
.t-const { color: #7fd4ff; } .t-ivar { color: #ffb58a; } .t-dim { color: #8696a3; }
.t-erb { color: #ff8f9c; font-weight: 600; } .t-erbbody { background: rgba(255,143,156,.12); border-radius: 3px; }
/* a fake terminal */
.term { font-family: var(--font-mono); font-size: 16.5px; line-height: 1.55; background: #05090f; color: #cfe3d4; border-radius: 14px; padding: 14px 18px; text-align: left; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); white-space: pre-wrap; overflow: hidden; }
.term .prompt { color: #5fd38d; } .term .out { color: #9fb3c2; } .term .err { color: #ff8d9a; }
/* a fake browser window */
.browser { background: #fff; color: #1b1b1b; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,.25); text-align: left; display: flex; flex-direction: column; }
.browser-bar { display: flex; align-items: center; gap: 10px; background: #e9ecef; padding: 8px 12px; border-bottom: 1px solid #cfd4d9; }
.browser-bar .lights { display: flex; gap: 6px; } .browser-bar .lights i { width: 11px; height: 11px; border-radius: 50%; background: #c5cad0; display: block; }
.browser-url { flex: 1; font-family: var(--font-mono); font-size: 15px; background: #fff; border: 1px solid #cfd4d9; border-radius: 999px; padding: 5px 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.browser-body { padding: 18px 22px; font-size: 18px; line-height: 1.4; flex: 1; min-height: 0; overflow: hidden; position: relative; }
/* Bhaar's own look, inside the fake browser */
.bhaar { font-family: var(--font-body); color: #2a1a10; }
.bhaar h4 { font-family: var(--font-display); font-size: 27px; margin: 0 0 2px; letter-spacing: 0; color: #7a2e12; }
.bhaar .tagline { font-size: 14px; color: #9a7a66; margin: 0 0 12px; }
.bhaar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bhaar li { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed #e3d3c4; font-size: 17px; }
.bhaar li b { font-weight: 600; } .bhaar li span { font-family: var(--font-mono); font-size: 15px; color: #7a2e12; }
.bhaar .order-btn { margin-top: 12px; font: inherit; font-family: var(--font-display); font-weight: 650; font-size: 16px; background: #7a2e12; color: #fff; border: 0; border-radius: 999px; padding: 7px 18px 8px; cursor: pointer; }

/* table (data) */
table.data { border-collapse: collapse; font-family: var(--font-mono); font-size: 15.5px; text-align: left; }
table.data th { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; color: var(--dim); font-size: 16px; letter-spacing: .01em; padding: 6px 14px; border-bottom: 1.5px solid var(--line); }
table.data td { padding: 6px 14px; border-bottom: 1px solid var(--line2); transition: background .25s, opacity .25s; }
table.data tr.hit td { background: color-mix(in srgb, var(--accent) 24%, transparent); }
table.data tr.miss td { opacity: .32; }

/* ---------- Pip ---------- */
/* Below the surface Pip is the lamp: emissive, and the canvas pools light around it.
   Above it Pip throws one hard cobalt shadow (the .pip-cast shape, no filter needed). */
.pip { filter: drop-shadow(0 0 4px var(--pip-glow)); }
.pip.pip-lg { filter: drop-shadow(0 0 5px var(--pip-glow)) drop-shadow(0 0 18px var(--pip-glow)); }
body[data-layer="surface"] .pip, body[data-layer="daylight"] .pip { filter: none; }
.pip-cast { fill: var(--cast); stroke: none; }
.pip-body { fill: var(--pip); stroke: var(--pip-edge); stroke-width: 2; }
.pip-eye { fill: var(--pip-edge); transform-box: fill-box; transform-origin: center; animation: pipBlink 5.2s infinite; }
.pip-line { stroke: var(--pip-edge); stroke-width: 2; stroke-linecap: round; }
.pip-scramble { stroke: var(--pip-edge); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.pip-label { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); }
@keyframes pipBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.pip-svg { vertical-align: middle; overflow: visible; }
/* mood "lost": a dropped packet is a light that has gone out */
.pip.pip-lost { filter: none; }
.pip-lost .pip-body { fill: color-mix(in srgb, var(--dim) 16%, var(--bg2)); stroke: var(--dim); stroke-dasharray: 4 3.4; }
.pip-lost .pip-line { stroke: var(--dim); }
.pip-lost .pip-cast { display: none; }
/* sealed: what a router sees once TLS is on. Frosted glass over the face. */
.pip-sealed .pip-body { fill: color-mix(in srgb, var(--c-tls) 42%, var(--pip)); }
.pip-sealed .pip-eyes { opacity: .16; }
/* each coat carries one tell, so the coats can be told apart without colour (drawn from size 1.6 up) */
.pip-tell { pointer-events: none; }
.pip-stitch { fill: none; stroke: var(--pip-edge); stroke-width: 1; stroke-dasharray: 3 2.4; opacity: .8; }
.pip-string { fill: none; stroke: var(--pip-edge); stroke-width: .9; }
.pip-tag, .pip-addr, .pip-bib { fill: #fffdf4; stroke: var(--pip-edge); stroke-width: 1; stroke-linejoin: round; }
.pip-tellmark { stroke: var(--pip-edge); stroke-width: .9; stroke-linecap: round; fill: none; opacity: .75; }
.pip-hatch { stroke: none; }

/* the 250 ms budget bar (K.budget): one beam of light, pieced together */
.budget { display: flex; flex-direction: column; gap: 7px; }
.budget-track { display: flex; gap: 0; height: 56px; }
.budget-seg { --seg: var(--dim); border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; min-width: 0;
  border: 0; border-right: 1.5px solid var(--bg2); background: rgba(0,0,0,.34); color: var(--dim); transition: all .3s; }
.budget-seg:first-child { border-radius: 10px 0 0 10px; }
.budget-seg:last-child { border-radius: 0 10px 10px 0; border-right: 0; }
body[data-layer="surface"] .budget-seg, body[data-layer="daylight"] .budget-seg { border-right-color: var(--noon); }
body[data-layer="surface"] .budget-seg:not(.known), body[data-layer="daylight"] .budget-seg:not(.known) { background: rgba(3,18,28,.1); }
.budget-seg b { font-family: var(--font-display); font-stretch: 86%; font-weight: 650; font-size: 16.5px; line-height: 1.05; white-space: nowrap; }
.budget-seg span { font-family: var(--font-mono); font-size: 13px; opacity: .85; white-space: nowrap; }
.budget-seg.known { background: var(--seg); color: #10161c; box-shadow: 0 0 16px color-mix(in srgb, var(--seg) 50%, transparent); }
body[data-layer="surface"] .budget-seg.known, body[data-layer="daylight"] .budget-seg.known { box-shadow: 5px 7px 0 var(--cast); }
.budget-seg.known[data-id="rails"] { color: #fff; }
.budget-seg.now { box-shadow: 0 0 0 3px var(--bg2), 0 0 0 5.5px var(--seg); animation: budgetNow 1.4s ease-in-out infinite; position: relative; z-index: 1; border-radius: 4px; }
@keyframes budgetNow { 50% { filter: brightness(1.18); } }
.budget-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-stretch: 86%; font-size: 15.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.budget-total b { font-weight: 600; color: var(--ink); }

/* glyphs (K.glyph): under water they are lit along the top edge; in the sun they keep an ink outline and cast a shadow */
.glyph .gb { fill: var(--glyph); stroke: color-mix(in srgb, var(--glyph-edge) 55%, transparent); stroke-width: 1.3; stroke-linejoin: round; }
.glyph .gs { fill: var(--glyph-screen); stroke: color-mix(in srgb, var(--glyph-edge) 55%, transparent); stroke-width: 1; }
.glyph .gl { stroke: var(--glyph-edge); stroke-width: 2; stroke-linecap: round; fill: none; }
.glyph .gd { fill: var(--glyph-edge); }
.glyph > g:first-child { filter: drop-shadow(0 -1.6px 0 var(--rim)); }
body[data-layer="surface"] .glyph .gb, body[data-layer="daylight"] .glyph .gb { stroke: var(--glyph-edge); stroke-width: 2.4; }
body[data-layer="surface"] .glyph .gs, body[data-layer="daylight"] .glyph .gs { stroke: var(--glyph-edge); stroke-width: 1.2; }
body[data-layer="surface"] .glyph > g:first-child, body[data-layer="daylight"] .glyph > g:first-child { filter: drop-shadow(4px 5px 0 var(--cast)); }
.glyph-label { font-family: var(--font-body); font-size: 15px; fill: var(--ink); }
.glyph-sub { font-family: var(--font-mono); font-size: 13px; fill: var(--dim); }
.glyph.on .gb { stroke: var(--accent); stroke-width: 2.4; } .glyph.on .gd { fill: var(--accent); }
.glyph.dead { opacity: .35; }
.glyph.clickable { cursor: pointer; } .glyph.clickable:hover .gb { stroke: var(--accent); stroke-width: 2.4; }

/* generic svg text + strokes used by demos */
svg text { font-family: var(--font-body); fill: var(--ink); }
svg .t-mono { font-family: var(--font-mono); }
svg .t-dimfill { fill: var(--dim); }
svg .stroke { stroke: var(--ink); fill: none; } svg .stroke-dim { stroke: var(--line); fill: none; }

/* ---------- nav bar: no slab. It sits on the silt at the bottom, in the sea band in daylight, and floats in between ---------- */
#nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 18px; gap: 16px; background: transparent; z-index: 5;
}
.nav-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; }
.navbtn {
  font: inherit; font-family: var(--font-display); font-stretch: 96%; font-weight: 620; font-size: 16.5px; color: var(--ink); background: color-mix(in srgb, var(--bg2) 70%, transparent); border: 1.5px solid var(--line);
  border-radius: 12px; height: 40px; padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: all .15s;
}
body[data-layer="surface"] .navbtn:not(.next), body[data-layer="daylight"] .navbtn:not(.next) { background: rgba(255,255,255,.82); }
.navbtn:hover:not(:disabled) { border-color: var(--ink); background: var(--panel2); }
.navbtn:disabled { opacity: .3; cursor: default; }
.navbtn kbd { font-size: 11px; opacity: .7; padding: 0 5px 1px; border-bottom-width: 2px; }
.navbtn.ret { font-size: 14.5px; height: 34px; padding: 0 13px; color: var(--dim); max-width: 230px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 31px; }
.navbtn.ret[hidden] { display: none; }
.navbtn.ret:hover { color: var(--ink); }
.navbtn.arrow { width: 40px; padding: 0; justify-content: center; font-size: 18px; }
.navbtn.next { background: var(--accent); color: var(--accent-ink); border-color: transparent; padding: 0 18px 0 20px; max-width: 340px; }
.navbtn.next #next-label { overflow: hidden; text-overflow: ellipsis; }
.navbtn.next:hover { filter: brightness(1.08); background: var(--accent); border-color: transparent; }
.navbtn.next.locked { background: color-mix(in srgb, var(--bg2) 70%, transparent); color: var(--dim); border-color: var(--line); }
body[data-layer="surface"] .navbtn.next.locked, body[data-layer="daylight"] .navbtn.next.locked { background: rgba(255,255,255,.82); }
.navbtn.next.locked .arr::before { content: ''; }
.navbtn.next.pulse { animation: navPulse 1.1s ease 2; }
.navbtn.next.shake { animation: navShake .4s; }
@keyframes navPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes navShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
#gate-hint { font-size: 14px; color: var(--ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
#gate-hint.show { opacity: 1; }
/* the crumb: a sounding below the surface, a station nameboard above it */
#crumb { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; padding: 3px 0; }
.crumb-layer { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; font-size: 14.5px; letter-spacing: .01em; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crumb-title { font-family: var(--font-display); font-weight: 620; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-layer="daylight"] #crumb { background: #ffd23f; color: #0b0b0b; border: 2px solid #0b0b0b; outline: 2px solid #ffd23f; padding: 4px 14px 5px; border-radius: 3px; position: relative; box-shadow: 5px 6px 0 var(--cast); text-align: center; flex-direction: column-reverse; }
body[data-layer="daylight"] #crumb::before, body[data-layer="daylight"] #crumb::after { content: ''; position: absolute; top: 100%; width: 5px; height: 20px; background: #0b0b0b; margin-top: 4px; }
body[data-layer="daylight"] #crumb::before { left: 16px; } body[data-layer="daylight"] #crumb::after { right: 16px; }
body[data-layer="daylight"] .crumb-layer { color: #0b0b0b; font-size: 12px; font-weight: 600; }
body[data-layer="daylight"] .crumb-title { font-stretch: 100%; font-weight: 750; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
#dots { display: flex; gap: 11px; align-items: center; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--faint); opacity: .6; padding: 0; cursor: pointer; transition: all .15s; position: relative; }
.dot::after { content: ''; position: absolute; inset: -7px -5px; }   /* the hit area stays generous */
.dot.seen { background: var(--ink); opacity: .85; }
.dot.on { background: var(--accent); opacity: 1; transform: scale(1.7); box-shadow: 0 0 10px var(--pip-glow); }
.dot:hover:not(:disabled):not(.on) { opacity: 1; transform: scale(1.35); }
.dot:disabled { opacity: .3; cursor: default; }

/* ---------- the sounding line (left edge): depth, read off a line. Click opens the map. ---------- */
#sounding {
  position: absolute; left: 12px; top: 26px; bottom: calc(var(--nav-h) + 20px); width: 30px; z-index: 4;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: inherit;
}
#sounding .sl-line { position: absolute; left: 14px; top: 0; bottom: 0; width: 1.5px; background: var(--faint); opacity: .55; }
#sounding .sl-t { position: absolute; left: 8px; height: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
#sounding .sl-t i { display: block; width: 13px; height: 1.5px; background: var(--faint); opacity: .8; flex: none; }
#sounding .sl-t.sea { left: 2px; } #sounding .sl-t.sea i { width: 26px; height: 2px; background: var(--ink); opacity: .9; }
#sounding .sl-t b { font-family: var(--font-display); font-stretch: 84%; font-weight: 580; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink);
  background: color-mix(in srgb, var(--bg2) 92%, transparent); padding: 2px 8px 3px; border-radius: 6px; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; pointer-events: none; }
#sounding:hover .sl-t b, #sounding:focus-visible .sl-t b { opacity: 1; transform: none; }
#sounding .sl-t.on b { color: var(--accent-text); }
#sounding .sl-lead { position: absolute; left: 6.5px; width: 16px; height: 13px; margin-top: -6.5px; border-radius: 4.5px; background: var(--pip); border: 1.5px solid var(--pip-edge);
  box-shadow: 0 0 8px var(--pip-glow), 0 0 22px var(--pip-glow); transition: top .9s cubic-bezier(.3,.1,.2,1); }
body[data-layer="surface"] #sounding .sl-lead, body[data-layer="daylight"] #sounding .sl-lead { box-shadow: 2.5px 3px 0 var(--cast); }
#sounding .sl-lead::before, #sounding .sl-lead::after { content: ''; position: absolute; top: 2.5px; width: 2px; height: 3.5px; border-radius: 1px; background: var(--pip-edge); }
#sounding .sl-lead::before { left: 3px; } #sounding .sl-lead::after { right: 3px; }
@media (max-width: 760px) { #sounding { display: none; } }

/* ---------- a ship on the daylight horizon ---------- */
/* At rest: the cable ship from "Cables under the sea", far off. A slide can put a container ship to sea with data-ship. */
#ship { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .8s, transform 1.4s cubic-bezier(.3,.1,.2,1); transform: translate(-200px, 0); }
#ship svg { display: block; overflow: visible; }
#ship .hull { fill: #2a5a70; }
#ship .box { stroke: #03121c; stroke-width: 1; }
#ship text { font-family: var(--font-mono); font-size: 6.2px; fill: #fff; font-weight: 600; }
body[data-layer="daylight"] #ship { opacity: .5; }
body[data-layer="daylight"] #ship.cargo { opacity: .95; }
body.map-open #ship, body.has-backdrop #ship { opacity: 0 !important; }
body.still #ship, body.still #sounding .sl-lead, body.still #backdrop { transition: none; }

/* ---------- the map: one column of water, lit as you go ---------- */
#map { position: absolute; inset: 0; z-index: 20; background: #010304; display: flex; align-items: center; justify-content: center; color: #e4ece8; animation: enterFade .25s; }
#map[hidden] { display: none; }
.map-inner { width: min(100vw, calc((100vh - 20px) * 1.6)); padding: 14px 22px; display: flex; flex-direction: column; gap: 6px; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.map-head h2 { font-family: var(--font-display); font-stretch: 90%; font-weight: 700; font-size: 29px; margin: 0; letter-spacing: 0; }
.map-head p { margin: 2px 0 0; font-size: 15px; color: #9db2ac; }
.map-legend { display: flex; align-items: center; gap: 16px; font-size: 14.5px; color: #b4c6c0; font-family: var(--font-display); font-stretch: 88%; font-weight: 520; }
.map-legend .lg::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; background: #0a1418; box-shadow: inset 0 0 0 2px #50666c; }
.map-legend .lg.seen::before { background: #6b5a22; box-shadow: inset 0 0 0 2px #ffd23f; }
.map-legend .lg.done::before { background: #fff3c4; box-shadow: inset 0 0 0 2px #ffd23f, 0 0 8px #ffd23f; }
.map-legend .lg.count::before { display: none; }
.map-legend .lg.count { font-variant-numeric: tabular-nums; color: #e4ece8; }
.map-close, .map-reset { font: inherit; font-family: var(--font-display); font-weight: 620; font-size: 14.5px; color: #e4ece8; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px; padding: 6px 16px; cursor: pointer; }
.map-close:hover, .map-reset:hover { border-color: #fff; }
.map-foot { display: flex; justify-content: flex-end; }
.map-reset { font-size: 12.5px; opacity: .65; padding: 4px 12px; }
.map-svg { width: 100%; height: auto; display: block; overflow: visible; }
.band-daylight { fill: #cfe9fa; } .band-surface { fill: #a9dbe4; } .band-shallows { fill: #095561; } .band-twilight { fill: #0b3d66; }
.band-waist { fill: #08223c; } .band-deep { fill: #05131d; } .band-seabed { fill: #03090c; }
.map-silt { fill: #121d1b; } .map-siltdot { fill: #2a3a36; }
.map-wave { fill: none; stroke: #ffffff; stroke-width: 2; opacity: .9; stroke-linecap: round; }
.map-wave.move { animation: mapWave 7s linear infinite; }
@keyframes mapWave { to { transform: translateX(-48px); } }
.map-outline { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; }
.map-layer { font-family: var(--font-display); font-stretch: 90%; font-weight: 650; font-size: 17px; fill: #e4ece8; }
.map-layer-sub { font-family: var(--font-display); font-stretch: 84%; font-weight: 500; font-size: 13.5px; fill: #9db2ac; }
.map-depth { font-family: var(--font-display); font-stretch: 84%; font-weight: 500; font-size: 13px; fill: #7f968f; font-variant-numeric: tabular-nums; }
.map-edges { pointer-events: none; }
.map-edge { fill: none; stroke: rgba(150,170,180,.34); stroke-width: 2; }
.map-edge.trunk { stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.map-edge.side { stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
/* the visited path is the cable, carrying light */
.map-edge.lit { stroke: #ffd23f; stroke-dasharray: none; }
.map-edge.trunk.lit { stroke-width: 3.5; }
.map-edge.side.lit { stroke-width: 2; }
.map-cable-glow { filter: drop-shadow(0 0 5px rgba(255,210,63,.9)); }
.map-edge.on-light.lit { stroke: #e0a400; }
.map-node { cursor: pointer; outline: none; }
/* nodes are lamps: dark until you go there, dim once started, lit when finished */
.map-dot { fill: #0a1418; stroke: #50666c; stroke-width: 2; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.map-node.seen .map-dot { fill: #6b5a22; stroke: #ffd23f; }
.map-node.done .map-dot { fill: #fff3c4; stroke: #ffd23f; }
.map-halo { fill: #ffd23f; opacity: 0; pointer-events: none; }
.map-node.done .map-halo { opacity: .3; }
.map-node.on-light .map-dot { fill: #ffffff; stroke: #5d7f93; }
.map-node.on-light.seen .map-dot { fill: #ffe9a0; stroke: #a87800; }
.map-node.on-light.done .map-dot { fill: #ffd23f; stroke: #03121c; }
.map-node.on-light .map-halo { display: none; }
.map-node.on-light.done .map-castdot { fill: rgba(24,60,170,.3); }
.map-castdot { fill: none; pointer-events: none; }
/* the lamps come on in reading order when the map opens */
.map-node.done.kindle .map-dot, .map-node.done.kindle .map-halo { animation: mapKindle .5s ease both; animation-delay: var(--k, 0ms); }
@keyframes mapKindle { 0% { fill: #0a1418; opacity: 0; } 60% { opacity: 1; } 100% { } }
.map-here-ring { fill: none; stroke: #ffd23f; stroke-width: 1.5; opacity: .7; animation: mapPulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.map-node.on-light .map-here-ring { stroke: #03121c; opacity: .5; }
@keyframes mapPulse { 50% { transform: scale(1.18); opacity: .25; } }
.map-pip { pointer-events: none; }
.map-pip .pip-body { fill: #fff3c4; stroke: #0a0e0c; }
.map-pip .pip-eye { fill: #0a0e0c; } .map-pip .pip-line { stroke: #0a0e0c; }
.map-pip .pip-coat { stroke: #0a0e0c; }
.map-pip .pip { filter: drop-shadow(0 0 5px rgba(255,210,63,.7)); }
.map-node.on-light .map-pip .pip { filter: drop-shadow(2.5px 3.5px 0 rgba(24,60,170,.35)); }
.map-pip .pip-cast { display: none; }
.map-label { font-family: var(--font-body); font-size: 12.5px; fill: #e4ece8; paint-order: stroke; stroke: rgba(1,3,4,.85); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.map-node:hover .map-dot, .map-node:focus-visible .map-dot { stroke: #ffd23f; transform: scale(1.25); }
.map-node:hover .map-label, .map-node:focus-visible .map-label { fill: #ffd23f; }
.map-node.unbuilt { opacity: .45; }
.map-node.on-light .map-label { fill: #03121c; stroke: rgba(246,251,255,.8); }
.map-node.on-light:hover .map-dot, .map-node.on-light:focus-visible .map-dot { stroke: #03121c; }
.map-node.on-light:hover .map-label, .map-node.on-light:focus-visible .map-label { fill: #8a0001; }
.map-lead { stroke: rgba(255,255,255,.1); stroke-width: 1; stroke-dasharray: 2 4; }

@media (prefers-reduced-motion: reduce) {
  .slide, .pip-eye, .map-here-ring, .navbtn.next.pulse, .map-wave.move, .map-node.done.kindle .map-dot, .map-node.done.kindle .map-halo, #dive.go, .budget-seg.now { animation: none !important; }
  #sounding .sl-lead, #ship { transition: none; }
}

/* ---------- deck compatibility: places where a deck's fixed-height box was tuned to the old label size ---------- */
body[data-deck="crypto"] .cr-forge .label { line-height: 1.04; }