@font-face { font-family: Geist; src: url('../../assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../../assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@view-transition { navigation: auto; }

/* Both scenes are dark, so the page keeps one dark ground in both site themes. */
:root {
  color-scheme: dark; font-family: Geist, ui-sans-serif, system-ui, sans-serif; font-synthesis: none;
  --bg: #111214; --surface: #1a1b1e; --line: #2e2f34; --text: #ededed; --text-dim: #a3a3a8; --accent: #4da3ff; --rail: #3a3b41; --computed: #6f7077;
  --ease: cubic-bezier(.16, 1, .3, 1); --thumb: 12px;
  color: var(--text); background: var(--bg);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
.gallery-stage { position: relative; overflow: hidden; background: #05070c; }
.gallery-scene, .gallery-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-scene canvas, .gallery-scene iframe { display: block; width: 100%; height: 100%; border: 0; }
.gallery-poster { object-fit: cover; transition: opacity .6s var(--ease); }
.gallery-poster.is-done { opacity: 0; pointer-events: none; }

.gallery-head, .gallery-note, .gallery-status { position: absolute; left: 16px; margin: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5); }
.gallery-head { top: 16px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 14px 6px 8px; border-radius: 8px; }
.gallery-head h1 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
.gallery-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; flex: none; }
.gallery-mark:hover { background: #2a2b30; }

.gallery-status { top: 70px; padding: 5px 10px; border-radius: 6px; font-size: 12px; line-height: 18px; color: var(--text-dim); }
.gallery-status.is-error { color: var(--text); }

.gallery-note { bottom: 16px; width: min(344px, calc(100% - 32px)); padding: 12px 14px 11px; border-radius: 8px; font-size: 13px; line-height: 19px; color: var(--text-dim); }
.gallery-note p { margin: 0; }
.gallery-note p:first-child { color: var(--text); }
.gallery-note p + p { margin-top: 6px; }
.gallery-note p:last-child { font-size: 12px; line-height: 18px; }
.gallery-note a { color: var(--accent); text-underline-offset: 3px; }

.gallery-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); }
.gallery-bar output { flex: none; min-width: 9ch; text-align: right; font: 400 12px/1 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--text); }
.gallery-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The rail shows what the run has reached and what the engine has computed.
   The thumb's center travels a track shorter than the input, so both stops
   are measured on that shorter track. */
#timeline { --played: 0; --reached: 0; --stop-played: calc(var(--thumb) / 2 + var(--played) * (100% - var(--thumb))); --stop-reached: calc(var(--thumb) / 2 + var(--reached) * (100% - var(--thumb))); flex: 1; min-width: 0; height: 24px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
#timeline:disabled { cursor: default; }
#timeline::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--stop-played), var(--computed) var(--stop-played) var(--stop-reached), var(--rail) var(--stop-reached)); }
#timeline::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--stop-played), var(--computed) var(--stop-played) var(--stop-reached), var(--rail) var(--stop-reached)); }
#timeline::-webkit-slider-thumb { width: var(--thumb); height: var(--thumb); margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--text); -webkit-appearance: none; appearance: none; transition: scale .2s var(--ease); }
#timeline::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: var(--text); transition: scale .2s var(--ease); }
#timeline:hover::-webkit-slider-thumb { scale: 1.25; }
#timeline:hover::-moz-range-thumb { scale: 1.25; }
#timeline:disabled::-webkit-slider-thumb { background: var(--rail); scale: 1; }
#timeline:disabled::-moz-range-thumb { background: var(--rail); scale: 1; }

/* Embed mode: the scene and the timeline, with nothing to read or to click. */
.is-embed .gallery-head, .is-embed .gallery-note, .is-embed .gallery-status:not(.is-error) { display: none; }
.is-embed .gallery-status { top: 10px; left: 10px; }
.is-embed .gallery-bar { gap: 10px; height: 30px; padding: 0 10px; }
.is-embed #timeline { --thumb: 8px; height: 16px; cursor: default; }
.is-embed #timeline:disabled { visibility: hidden; }
.is-embed #timeline::-webkit-slider-thumb { margin-top: -2.5px; }

@media (max-width: 640px) {
  .gallery-head { top: 12px; left: 12px; max-width: calc(100% - 24px); }
  .gallery-status { top: 64px; left: 12px; }
  .gallery-note { bottom: 12px; left: 12px; width: calc(100% - 24px); padding: 10px 12px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-poster, #timeline::-webkit-slider-thumb, #timeline::-moz-range-thumb { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}