/* The section drawing replaces both the native track and the former sun disc. */
html, body, * { scrollbar-width:none !important; -ms-overflow-style:none !important; }
::-webkit-scrollbar, *::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; }
html { overflow-x:clip; }
.daylight-rail {
  --rail-ink:var(--ink); --rail-reverse-ink:var(--ink);
  position:fixed; z-index:89; right:9px; top:31vh; width:18px; height:38vh;
  color:var(--rail-ink); opacity:1; transition:opacity .35s ease;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
html.light .daylight-rail { --rail-reverse-ink:#e9e7e1; }
html.light.night-zone .daylight-rail { --rail-ink:#e9e7e1; --rail-reverse-ink:var(--rail-ink); }
.daylight-rail.is-idle { opacity:.35; }
.daylight-rail:hover, .daylight-rail:focus-within, .daylight-rail.is-dragging { opacity:1; }
.daylight-rail::before { content:""; position:absolute; top:0; bottom:0; left:9px; width:1px; background:linear-gradient(to bottom,var(--rail-ink) 0,var(--rail-ink) var(--rail-boundary,100%),var(--rail-reverse-ink) var(--rail-boundary,100%),var(--rail-reverse-ink) 100%); opacity:.22; }
.daylight-rail[hidden] { display:none; }
.datum-minor { position:absolute; inset:0; pointer-events:none; }
.datum-minor i { position:absolute; left:7px; width:4px; height:1px; background:currentColor; opacity:.1; }
.daylight-marker {
  position:absolute; top:0; left:0; width:18px; height:22px; padding:0; margin-top:-11px;
  border:0; background:none; touch-action:none; cursor:grab; will-change:transform;
}
.datum-symbol {
  position:absolute; top:5px; left:3px; width:12px; height:12px; overflow:visible;
  transform-origin:50% 50%;
}
.daylight-rail.is-dragging .daylight-marker { cursor:grabbing; }
.daylight-tick {
  position:absolute; top:0; left:-4px; width:26px; height:22px; margin-top:-11px;
  padding:0; border:0; background:none; color:var(--rail-ink); cursor:pointer;
}
.daylight-tick::after { content:""; position:absolute; top:6px; left:13px; width:1px; height:9px; background:currentColor; transform:rotate(45deg); opacity:.6; }
.daylight-tick:hover::after, .daylight-tick.is-current::after, .daylight-tick:active::after { opacity:1; }
.daylight-tick:focus-visible { outline:1px solid currentColor; outline-offset:1px; }
.daylight-tick-label, .datum-level {
  position:absolute; width:max-content; max-width:min(260px,40vw);
  font:400 10px/1.4 var(--mono,monospace); letter-spacing:.14em; text-transform:uppercase;
  pointer-events:none; white-space:nowrap; opacity:0; transform:translateX(5px);
  transition:opacity .18s ease,transform .18s ease;
  color:inherit; padding:2px 4px;
}
.daylight-tick-label { right:30px; top:calc(2px + var(--rail-label-offset,0px)); }
.datum-level { right:30px; top:-20px; }
.daylight-rail:hover .daylight-tick-label, .daylight-rail:focus-within .daylight-tick-label { opacity:.6; transform:translateX(0); }
.daylight-rail:hover .daylight-tick.is-current .daylight-tick-label,
.daylight-rail:focus-within .daylight-tick.is-current .daylight-tick-label { opacity:1; }
.daylight-rail:hover .datum-level, .daylight-rail:focus-within .datum-level,
.daylight-rail.is-scrolling .datum-level, .daylight-rail.is-dragging .datum-level { opacity:1; transform:translateX(0); }
html.story-open .daylight-rail, html.menu-open .daylight-rail,
html.cc-open .daylight-rail, html.enter .daylight-rail,
html:has(#story.is-open) .daylight-rail,
html.shero-js:not(.hero-done) .daylight-rail { visibility:hidden; }
@media (max-width:979px) { .daylight-rail { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .daylight-rail, .daylight-tick-label, .datum-level { transition:none; }
}
@media print { .daylight-rail { display:none; } }

/* v7 (Claude): a single glowing light bar — no words, no ticks, no symbols.
   The faint track is the "fixture"; the lit segment is your place on the page. Drag still scrubs. */
.daylight-rail { --glow:#e7a356; --glow-core:#fff3df; right:12px; width:14px; }
html:not(.light) .daylight-rail, html.light.night-zone .daylight-rail { --glow:#ffc985; }
.daylight-rail::before { left:6px; width:2px; border-radius:2px; background:currentColor; opacity:.09; }
.datum-minor, .daylight-tick, .datum-level, .datum-symbol { display:none !important; }
.daylight-marker { left:4px; width:6px; height:58px; margin-top:-29px; border-radius:6px; cursor:grab; }
.daylight-marker::before { content:""; position:absolute; inset:0 1px; border-radius:4px;
  background:linear-gradient(to bottom, transparent, var(--glow-core) 30%, var(--glow-core) 70%, transparent);
  box-shadow:0 0 6px 1px var(--glow), 0 0 18px 3px color-mix(in srgb, var(--glow) 45%, transparent);
  opacity:.85; transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.daylight-rail:hover .daylight-marker::before, .daylight-rail.is-dragging .daylight-marker::before,
.daylight-rail.is-scrolling .daylight-marker::before { opacity:1; transform:scaleX(1.35); }
.daylight-marker:focus-visible { outline:1px solid var(--glow); outline-offset:3px; }
.daylight-rail.is-idle { opacity:.5; }

/* v31 (Claude): the rail as an LED strip, in the same language as the LED signs.
   Track = a column of unlit diode sockets; your place = a block of lit diodes with the signs' faint
   red/cyan fringe and soft glow. Black diodes by day, white by night (and in the night zone). */
.daylight-rail {
  --led:#121110; --led-g1:rgba(18,17,16,.30); --led-g2:rgba(18,17,16,.10);
  --led-fr:rgba(232,48,36,.30); --led-fc:rgba(10,160,225,.30);
}
html:not(.light) .daylight-rail, html.light.night-zone .daylight-rail {
  --led:#fff; --led-g1:rgba(255,243,230,.75); --led-g2:rgba(255,214,170,.32);
  --led-fr:rgba(255,60,40,.5); --led-fc:rgba(40,215,255,.5);
}
.daylight-rail::before {
  left:5px; width:4px; border-radius:0; opacity:.2;
  background:radial-gradient(circle at 2px 2px, currentColor 1px, transparent 1.4px) 0 0/4px 4px repeat-y;
  -webkit-mask:linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
          mask:linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
.daylight-marker {
  left:3px; width:8px; height:56px; margin-top:-28px; border-radius:0;
  filter:drop-shadow(0 0 2px var(--led-g1)) drop-shadow(0 0 7px var(--led-g2));
  transition:filter .35s cubic-bezier(.22,1,.36,1);
}
.daylight-marker::before {
  inset:0; border-radius:0; box-shadow:none; opacity:1; transform:none;
  background:
    radial-gradient(circle at 2px 2px, var(--led) 1.3px, transparent 1.7px) 0 0/4px 4px,
    radial-gradient(circle at 2px 2px, var(--led-fr) 1.3px, transparent 1.7px) 1px 0/4px 4px,
    radial-gradient(circle at 2px 2px, var(--led-fc) 1.3px, transparent 1.7px) -1px 0/4px 4px;
  -webkit-mask:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.daylight-rail:hover .daylight-marker::before, .daylight-rail.is-dragging .daylight-marker::before,
.daylight-rail.is-scrolling .daylight-marker::before { transform:none; }
.daylight-rail:hover .daylight-marker, .daylight-rail.is-dragging .daylight-marker,
.daylight-rail.is-scrolling .daylight-marker { filter:drop-shadow(0 0 3px var(--led-g1)) drop-shadow(0 0 11px var(--led-g2)); }
.daylight-marker:focus-visible { outline:1px solid var(--led); outline-offset:3px; }
/* v31b: two diode columns everywhere (the lit block sits on the same columns and rows as the track),
   and the signs' slow rolling refresh band, stepped row by row like a low-framerate panel. */
.daylight-rail { --led-bg:rgba(241,238,230,.75); }
html:not(.light) .daylight-rail, html.light.night-zone .daylight-rail { --led-bg:rgba(12,13,15,.7); }
.daylight-rail::before { left:3px; width:8px; background:radial-gradient(circle at 2px 2px, currentColor 1px, transparent 1.4px) 0 0/4px 4px; }
.daylight-marker::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 2px 2px, var(--led-bg) 1.4px, transparent 1.8px) 0 0/4px 4px;
  -webkit-mask:linear-gradient(to bottom, transparent 0 48.4%, #000 49.7% 50.3%, transparent 51.6% 100%) 0 0/100% 300% no-repeat;
          mask:linear-gradient(to bottom, transparent 0 48.4%, #000 49.7% 50.3%, transparent 51.6% 100%) 0 0/100% 300% no-repeat;
  animation:rail-led-refresh 3s steps(28) infinite;
}
@keyframes rail-led-refresh { from { -webkit-mask-position:0 100%; mask-position:0 100%; } to { -webkit-mask-position:0 0; mask-position:0 0; } }
html.story-open .daylight-marker::after, html.led-paused .daylight-marker::after { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .daylight-marker::after { display:none; } }

/* Story rail (Claude): the same LED rail inside every story, above the film. White diodes over dark films. */
html.story-open .daylight-rail.story-rail, html:has(#story.is-open) .daylight-rail.story-rail { visibility:visible; }
.daylight-rail.story-rail { z-index:10060; visibility:visible !important; }
.daylight-rail.story-rail.is-night {
  --rail-ink:#e9e7e1; color:#e9e7e1;
  --led:#fff; --led-g1:rgba(255,243,230,.75); --led-g2:rgba(255,214,170,.32);
  --led-fr:rgba(255,60,40,.5); --led-fc:rgba(40,215,255,.5);
}
/* Phones: a small tag that says the story is made for a big screen, then fades out by itself. */
.story-desktop-tag {
  position:fixed; z-index:10061; left:50%; top:calc(12px + env(safe-area-inset-top));
  transform:translate3d(-50%,-8px,0); opacity:0; padding:7px 12px 7px 26px; border-radius:999px;
  font:500 10px/1 var(--mono,ui-monospace,monospace); letter-spacing:.16em; text-transform:uppercase;
  color:#f4efe4; background:rgba(16,15,14,.58); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px rgba(20,14,8,.22);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.story-desktop-tag::before { content:""; position:absolute; left:11px; top:50%; width:8px; height:5px; margin-top:-4px;
  border:1px solid currentColor; border-radius:1.5px; box-shadow:0 3px 0 -2px currentColor; opacity:.8; }
.story-desktop-tag.is-on { opacity:1; transform:translate3d(-50%,0,0); }
.story-desktop-tag:active { transform:translate3d(-50%,1px,0) scale(.97); }
.story-desktop-tag:focus-visible { outline:1px solid #f4efe4; outline-offset:2px; }
.story-desktop-tag[hidden] { display:none; }
@media (prefers-reduced-motion:reduce) { .story-desktop-tag { transition:opacity .2s linear; transform:translate3d(-50%,0,0); } }

/* Colour follows the page under the lit block and eases between day and night diodes (Jun: it vanished over the
   dusk and switched abruptly). The registered properties let the diode colours themselves transition. */
@property --led { syntax:'<color>'; inherits:true; initial-value:#121110; }
@property --led-g1 { syntax:'<color>'; inherits:true; initial-value:rgba(18,17,16,.3); }
@property --led-g2 { syntax:'<color>'; inherits:true; initial-value:rgba(18,17,16,.1); }
@property --led-fr { syntax:'<color>'; inherits:true; initial-value:rgba(232,48,36,.3); }
@property --led-fc { syntax:'<color>'; inherits:true; initial-value:rgba(10,160,225,.3); }
@property --led-bg { syntax:'<color>'; inherits:true; initial-value:rgba(241,238,230,.75); }
.daylight-rail, .daylight-marker { transition:opacity .35s ease, filter .35s cubic-bezier(.22,1,.36,1), --led .45s ease, --led-g1 .45s ease, --led-g2 .45s ease, --led-fr .45s ease, --led-fc .45s ease, --led-bg .45s ease, color .45s ease; }
html.light .daylight-marker.is-reverse, html.light.night-zone .daylight-marker {
  --led:#fff; --led-g1:rgba(255,243,230,.75); --led-g2:rgba(255,214,170,.32);
  --led-fr:rgba(255,60,40,.5); --led-fc:rgba(40,215,255,.5); --led-bg:rgba(12,13,15,.7);
}
@media (prefers-reduced-motion:reduce) { .daylight-rail, .daylight-marker { transition:none; } }