:root {
  --ink: #171916; --ink-raised: #20231e; --paper: #ede9dd; --paper-bright: #f8f5ed;
  --land: #d9d5c7; --border: #aaa99c; --muted: #b1b4a8; --map-muted: #5b6257;
  --accent: #bd482c; --accent-bright: #e17b4f; --line: #ffffff20;
  --font-display: 'Boska', Georgia, serif; --font-body: 'Switzer', Arial, sans-serif;
  --text-xs: clamp(.75rem,.7rem + .12vw,.8rem);
  --text-sm: clamp(.875rem,.82rem + .14vw,.95rem);
  --text-base: clamp(1rem,.95rem + .18vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .5vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1vw,2.25rem);
  --text-display: clamp(2rem,1.1rem + 2.1vw,3.5rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --ease: cubic-bezier(.16,1,.3,1); --transition-interactive:180ms var(--ease);
  --lyric-share:45%; --lyric-bottom-space:clamp(144px,17vh,180px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-text-size-adjust:none; text-size-adjust:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth }
body { min-height:100dvh; font-family:var(--font-body); font-size:var(--text-base); line-height:1.5; color:var(--paper-bright); background:var(--ink) }
button,input,select { font:inherit; color:inherit }
button { cursor:pointer; border:0; background:none }
a { color:inherit; text-underline-offset:3px }
svg { display:block }
button,a,input,select { transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive) }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent-bright); outline-offset:4px }
button:disabled { opacity:.55; cursor:default }
[hidden] { display:none !important }
h1,h2,h3 { font-weight:500; line-height:1.1; text-wrap:balance }
p { text-wrap:pretty }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.skip-link { position:fixed; z-index:100; left:var(--space-4); top:-100px; padding:var(--space-3); background:var(--paper); color:var(--ink) }
.skip-link:focus { top:var(--space-4) }
.experience { height:100dvh; min-height:480px; display:grid; grid-template-rows:minmax(0,1fr) 64px }
html:not([data-app-state="ready"]) body { overflow:hidden; background:var(--paper) }
html:not([data-app-state="ready"]) .skip-link { visibility:hidden }
#loading-status { display:flex; align-items:center; justify-content:center }
#load-failure { max-width:min(420px,calc(100vw - 48px)); text-align:center; font-size:var(--text-sm) }
#load-failure .failure-actions { justify-content:center }
#load-failure button { min-height:44px; color:var(--ink); text-decoration:underline; text-underline-offset:4px }
.icon-button { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.lucide { width:18px; height:18px; stroke-width:1.5; flex:none }
.stage { position:relative; display:grid; grid-template-columns:var(--lyric-share) minmax(0,1fr); min-height:0; overflow:hidden }
.record-panel { display:flex; flex-direction:column; min-width:0; min-height:0; background:#dedfdb }
.video-wrap { position:relative; width:100%; flex:1; min-height:0; background:#dedfdb; overflow:hidden; isolation:isolate }
/* Extend only source-paper pixels; the original caption image is never stretched. */
.video-wrap::before,.video-wrap::after { content:""; position:absolute; left:0; right:0; height:50%; background-size:100% 100%; pointer-events:none }
.video-wrap::before { top:0; background-image:url('./media/paper-top.webp?v=2') }
.video-wrap::after { bottom:0; background-image:url('./media/paper-bottom.webp?v=2') }
#local-video { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; opacity:0 }
#caption-pages { position:absolute; inset:0 0 var(--lyric-bottom-space); z-index:1; pointer-events:none }
.caption-page { position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
#lyric-overlay { position:absolute; inset:0 0 var(--lyric-bottom-space); z-index:2; width:100%; height:calc(100% - var(--lyric-bottom-space)); pointer-events:none; mix-blend-mode:multiply }
#lyric-highlight { fill:#45ff32; fill-opacity:.52 }
.record-panel[data-mode="local"] .video-wrap { background:#11140f }
.record-panel[data-mode="local"] #local-video { opacity:1 }
.record-panel[data-mode="local"] #lyric-overlay,.record-panel[data-mode="local"] #caption-pages,
.record-panel[data-mode="local"] .video-wrap::before,.record-panel[data-mode="local"] .video-wrap::after { display:none }
.failure-actions { display:flex; gap:var(--space-4); align-items:center; padding-top:var(--space-2) }
.failure-actions a,.failure-actions button { display:flex; align-items:center; gap:var(--space-1); min-height:44px; color:var(--paper-bright); font-size:var(--text-xs); text-decoration:underline }
.media-caption { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding-inline:var(--space-4); min-height:36px; font-size:var(--text-xs); color:var(--muted); background:var(--ink-raised) }
.media-caption>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.text-button { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); min-height:44px; color:inherit; text-align:left }
.text-button:hover { color:var(--accent-bright) }
.sync-notice { padding:var(--space-2) var(--space-4); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 var(--space-2); font-size:var(--text-xs); color:var(--muted); background:var(--ink-raised) }
.sync-notice>.text-button { color:var(--paper); min-height:36px }
.atlas-panel { position:relative; background:var(--paper); color:var(--ink); min-width:0; min-height:0; overflow:hidden; user-select:none; -webkit-user-select:none }
#map-background { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transform-origin:0 0; will-change:transform }
#map { position:relative; display:block; width:100%; height:100%; touch-action:pan-y; cursor:default }
.country { fill:var(--land); stroke:var(--border); stroke-width:.65px; vector-effect:non-scaling-stroke }
.state-border { stroke:#a9aa9d; stroke-width:.45px; fill:none; vector-effect:non-scaling-stroke }
.graticule { fill:none; stroke:#b8b9ac; stroke-width:.55px; opacity:.38; vector-effect:non-scaling-stroke }
.region-highlight { fill:#bd482c22; stroke:var(--accent); stroke-width:.8px; vector-effect:non-scaling-stroke; pointer-events:none }
.journey-path { fill:none; stroke:var(--accent); stroke-width:1.7px; stroke-linejoin:round; stroke-linecap:round; opacity:.44; vector-effect:non-scaling-stroke; pointer-events:none }
.live-path { fill:none; stroke:var(--accent); stroke-width:3px; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; pointer-events:none }
.place-dot { display:none; stroke-width:.75px; vector-effect:non-scaling-stroke; cursor:pointer }
.place-dot.visited { display:inline; fill:var(--accent); stroke:var(--paper-bright); opacity:.9 }
.place-hit { display:none; fill:transparent; cursor:pointer }
.place-hit.visited { display:inline }
.arrival-dot { fill:var(--accent); stroke:var(--paper-bright); stroke-width:1.8px; pointer-events:none; vector-effect:non-scaling-stroke }
.arrival-ring { fill:none; stroke:var(--accent); stroke-width:1.2px; pointer-events:none; vector-effect:non-scaling-stroke }
.traveler { fill:var(--accent); stroke:var(--paper-bright); stroke-width:1.3px; pointer-events:none; vector-effect:non-scaling-stroke }
.current-map-label { font-family:var(--font-body); font-size:32px; font-weight:600; fill:var(--ink); paint-order:stroke; stroke:var(--paper-bright); stroke-width:6px; stroke-linejoin:round; pointer-events:none }
.transport { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-2) var(--space-4); min-width:0; background:var(--ink) }
.play-button { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--ink); border-radius:50%; flex:none }
.play-button .lucide { width:21px; height:21px; stroke-width:1.8px }
.play-button:hover { background:white }
.play-button:active { transform:scale(.96) }
.transport .icon-button { color:var(--muted) }
.transport .icon-button:hover { color:var(--paper-bright) }
.timeline-wrap { flex:1; min-width:0 }
#time-display { font-variant-numeric:tabular-nums; font-size:var(--text-xs); color:var(--muted); white-space:nowrap }
#elapsed { color:var(--paper) }
.time-divider { margin-inline:var(--space-2) }
.timeline-track { height:44px; display:flex; align-items:center; position:relative }
#timeline { --progress:0%; appearance:none; -webkit-appearance:none; width:100%; height:24px; margin:0; background:transparent; position:relative; z-index:1; cursor:pointer }
#timeline::-webkit-slider-runnable-track { height:3px; background:linear-gradient(to right,var(--accent-bright) var(--progress),#ffffff32 var(--progress)) }
#timeline::-webkit-slider-thumb { appearance:none; width:11px; height:11px; margin-top:-4px; border-radius:50%; background:var(--paper-bright) }
#timeline::-moz-range-track { height:3px; background:#ffffff32 }
#timeline::-moz-range-progress { height:3px; background:var(--accent-bright) }
#timeline::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:var(--paper-bright) }
.distance-pill { position:absolute; z-index:4; left:var(--lyric-share); bottom:clamp(20px,3.2vh,36px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:clamp(252px,20vw,340px); padding:14px 30px 16px; border:1px solid #ffffff20; border-radius:999px; background:#10120f; color:var(--paper-bright); box-shadow:0 10px 28px #0003; font-variant-numeric:tabular-nums; cursor:default; user-select:none }
.distance-pill>span:first-child { font-size:clamp(44px,4vw,72px); font-weight:600; letter-spacing:-.035em; line-height:1 }
.distance-pill>span:last-child { font-size:14px; line-height:1.2; color:#dedfd7; letter-spacing:.035em }
dialog { color:var(--paper); background:var(--ink-raised); border:1px solid #ffffff35; width:560px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 48px); padding:var(--space-6); margin:auto; overflow:auto; overscroll-behavior:contain; font-size:var(--text-sm); box-shadow:0 20px 100px #0006 }
dialog::backdrop { background:#060a08a6; backdrop-filter:blur(5px) }
dialog[open] { animation:dialog-in 180ms var(--ease) }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-3) }
.dialog-header h2 { font-family:var(--font-display); font-size:var(--text-xl) }
.dialog-header .icon-button { margin-right:calc(-1 * var(--space-2)); color:var(--muted) }
.dialog-header .icon-button:hover { color:var(--paper-bright) }
.dialog-subtitle { color:var(--muted); margin-bottom:var(--space-4) }
.search-field { display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-3); background:var(--ink); border:1px solid #ffffff30; margin-bottom:var(--space-3) }
.search-field input { min-width:0; width:100%; border:0; background:none; min-height:48px; font-size:var(--text-sm) }
.search-field:focus-within { border-color:var(--accent-bright) }
.search-field input:focus { outline:none }
.search-field .lucide { color:var(--muted) }
.place-list { max-height:55dvh; overflow:auto }
.place-row { width:100%; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:var(--space-3); min-height:64px; text-align:left; padding:var(--space-2) var(--space-2); border-bottom:1px solid var(--line) }
.place-row:hover { background:#ffffff08 }
.place-row>span:first-child,.place-row time { color:var(--muted); font-size:var(--text-xs); font-variant-numeric:tabular-nums }
.place-row strong { display:block; font-size:var(--text-sm); font-weight:500 }
.place-row small { display:block; color:var(--muted); font-size:var(--text-xs); margin-top:var(--space-1) }
.empty-search { padding:var(--space-8) 0; color:var(--muted) }
dialog section+section { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--line) }
dialog h3 { font-family:var(--font-body); font-size:var(--text-base); font-weight:500; margin-bottom:var(--space-3) }
dialog p { line-height:1.65; color:var(--muted); margin-bottom:var(--space-3) }
dialog a { color:var(--paper-bright) }
.secondary-button { border:1px solid #ffffff40; min-height:44px; padding:var(--space-2) var(--space-4); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); font-size:var(--text-sm); text-align:left }
.secondary-button:hover { background:#ffffff10; border-color:var(--paper) }
.small-copy { font-size:var(--text-xs); margin-top:var(--space-2) }
.offset-control { border-top:1px solid var(--line); margin-top:var(--space-6); padding-top:var(--space-5) }
.offset-control>label { display:block; margin-bottom:var(--space-3) }
.offset-input { display:flex; align-items:center; border:1px solid #ffffff40; width:max-content; max-width:100%; gap:var(--space-2) }
.offset-input button { width:44px; height:44px; display:flex; align-items:center; justify-content:center }
.offset-input button:hover { background:#ffffff10 }
.offset-input input { width:86px; background:transparent; padding:var(--space-2); border:0; text-align:right; font-variant-numeric:tabular-nums }
.offset-input>span { color:var(--muted); font-size:var(--text-xs) }
.offset-control .text-button { text-decoration:underline }
.detail-dialog dl { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); border-block:1px solid var(--line); padding:var(--space-4) 0; margin:var(--space-4) 0; font-size:var(--text-sm) }
.detail-dialog dt { color:var(--muted) }
.detail-dialog dd { text-align:right; margin:0; font-variant-numeric:tabular-nums }
.detail-note:empty { display:none }
.detail-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-4); margin-top:var(--space-5); font-size:var(--text-sm) }
.detail-actions a,.detail-actions button { display:inline-flex; align-items:center; min-height:44px; gap:var(--space-2) }
.detail-actions button { background:var(--paper); color:var(--ink); padding:var(--space-2) var(--space-4) }
#alternative-wrap label { display:block; margin-block:var(--space-3) var(--space-2) }
#alternative { width:100%; background:var(--ink); border:1px solid #ffffff40; min-height:44px; padding:var(--space-2) }
.toast { position:fixed; z-index:99; bottom:100px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); padding:var(--space-3) var(--space-5); color:var(--paper); background:var(--ink); border:1px solid #ffffff40; font-size:var(--text-sm); box-shadow:0 6px 30px #0004; pointer-events:none }
@media(max-width:900px) {
  .experience { height:auto; min-height:100dvh; grid-template-rows:auto 64px }
  .stage { grid-template-columns:1fr; grid-template-rows:auto auto; overflow:visible }
  .record-panel { grid-area:1 / 1; padding-bottom:56px }
  .video-wrap { flex:none; aspect-ratio:8 / 5 }
  #caption-pages { inset:0 }
  #lyric-overlay { inset:0; height:100% }
  .record-panel[data-mode="local"] .video-wrap { aspect-ratio:4 / 3 }
  .atlas-panel { grid-area:2 / 1; height:clamp(360px,calc(100dvh - 62.5vw - 120px),600px); min-height:360px }
  .transport { gap:var(--space-3); padding-inline:var(--space-3); position:sticky; bottom:0; z-index:3 }
  .distance-pill { position:relative; grid-area:1 / 1; place-self:end center; left:auto; bottom:auto; transform:translateY(50%); width:230px; padding:11px 24px 13px; gap:3px }
  .distance-pill>span:first-child { font-size:40px }
  .distance-pill>span:last-child { font-size:12px }
  .time-divider { margin-inline:var(--space-1) }
  .failure-actions { gap:var(--space-3); padding:0 }
  .media-caption { gap:var(--space-1) }
  .media-caption button { flex:none }
  dialog { padding:var(--space-5) }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important }
}