/* A lit studio at 2 am. This layer follows the original architecture and tokens. */
#afterdark { padding-top: 42px; }
.dark-head { max-width: 830px; position: relative; z-index: 1; }
.dark-lead { color: #bcb8b1; max-width: 54ch; line-height: 1.75; }
.dark-stage {
  height: min(84vh, 820px); min-height: 480px;
  margin: -26px calc(-1 * var(--pad)) 0;
  border: 0; border-radius: 0; background: transparent; overflow: visible;
}
.dark-stage.reveal { opacity: 1; transform: none; transition: none; }
.dark-stage canvas {
  opacity: 0; transition: none; /* Model alpha owns the prepared 1.2s reveal. */
  -webkit-mask-image: radial-gradient(ellipse 49% 48% at 50% 51%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 49% 48% at 50% 51%, #000 52%, transparent 100%);
  touch-action: pan-y;
}
.dark-stage canvas.is-rendered { opacity: 1; }
.dark-loading{position:absolute;left:var(--pad);bottom:76px;color:#a7a199;font:11px/1.6 var(--mono);letter-spacing:.04em;pointer-events:none}
.dark-stage figcaption { left: var(--pad); right: var(--pad); bottom: 22px; }
.dark-stage .mono-cap { max-width: 35ch; line-height: 1.8; color: #a7a199; }
.dark-hint { top: 100px; right: var(--pad); color: #9b968d; }
.dark-go { background: #e4d6be; box-shadow: 0 6px 28px -16px #eac09a; }
.dark-go:hover { box-shadow: 0 9px 38px -15px rgba(235,193,151,.5); }
.dark-go:focus-visible { outline: 2px solid #efd4ad; outline-offset: 5px; }
.dark-strip { margin-top: 24px; }
.dark-strip img { border: 0; border-radius: 3px; filter: brightness(.92); }
html:not(.light) {
  --ground: #0b0c10; --ground-2: #121318; --elevated: #17181d; --mist: #1b1b22;
  --ink: #ebe6dc; --ink-soft: #c6c0b5; --muted: #a19b91; --faint: #918b83;
  --line: rgba(222,209,188,.13); --line-strong: rgba(232,212,181,.24);
  --ember: #e4c79e; --ember-2: #f5dfbd; --accent-rgb: 228,199,158;
}
html:not(.light) body { background: #0b0c10; }
html:not(.light) .site-header.is-stuck { background: rgba(11,12,16,.90); }
html:not(.light) .hdr-time { color: #c1b8a9; }
html:not(.light) .hdr-time.is-night i { background: #e7c38e; box-shadow: 0 0 10px rgba(231,195,142,.5); }
/* The lamp and navigation inks are owned exclusively by nav.css. */
html:not(.light) .gentry-plate { border-color: rgba(228,199,158,.15); box-shadow: 0 22px 50px -30px #000; }
html:not(.light) .gentry-plate img { filter: grayscale(.10) brightness(.96); }
html:not(.light) .gentry-plate::after { opacity: .55; }
html:not(.light) .gentry-sub, html:not(.light) .gentry-term { color: #a29b91; }
html:not(.light) .dusk { background: linear-gradient(180deg, transparent, #0b0c10); }
/* glow sits inside the band and is fully faded before every edge, so night begins without a seam */
html:not(.light) .dusk::after { background: radial-gradient(46% 42% at 50% 56%, rgba(205,150,95,.07), transparent 100%); }
.night { --ink: #ebe6dc; --ink-soft: #c6c0b5; --muted: #a19b91; --faint: #918b83; }
.night .doc-name small, .night .doc-no, .night .contact-hint { color: #a39b8e; }
.night .doc-action:focus-visible, .night .contact-side a:focus-visible { outline: 2px solid #e4c79e; outline-offset: 5px; }
.night .doc:hover, .night .doc:focus-within { background: rgba(226,193,147,.025); }
.contact-glow { background: radial-gradient(circle at var(--gx,20%) var(--gy,20%), rgba(225,166,94,.16), rgba(205,136,71,.045) 26%, transparent 51%); }
html:not(.light) .st-panel, .story.is-night .st-panel { background: rgba(17,18,23,.84); box-shadow: inset 0 1px 0 rgba(255,225,183,.06), 0 22px 60px -35px #000; border-color: rgba(229,204,171,.15); }
.story.is-night { --ink: #ebe6dc; --ink-soft: #c6c0b5; --muted: #a19b91; --faint: #918b83; }
@media (max-width: 760px) {
  #afterdark { padding-top: 24px; }
  .dark-stage { margin-top: -5px; height: 480px; min-height: 0; }
  .dark-stage canvas { -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 47%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 46% at 50% 47%, #000 55%, transparent 100%); }
  .dark-stage figcaption { align-items: flex-start; bottom: 0; gap: 20px; }
  .dark-stage .mono-cap { font-size: 9px; letter-spacing: .12em; max-width: 21ch; }
  .dark-go { white-space: nowrap; padding: 11px 15px; font-size: 13px; }
  .dark-strip { margin-top: 42px; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dark-stage canvas, .dark-go, .dark-strip img { transition: none; }
}