@import url('/viewer/town/ui.css');
:root{color-scheme:dark;font-family:system-ui,-apple-system,"Microsoft JhengHei",sans-serif;color:#eee4d4;background:#17191c}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input{touch-action:manipulation}a{color:inherit;text-decoration:none}#viewport{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}header{position:fixed;inset:0 0 auto;display:flex;align-items:center;gap:32px;padding:20px 30px;background:linear-gradient(#111820d9,transparent);z-index:2}header>a{font-weight:800;font-size:20px;letter-spacing:3px}i{font-style:normal;color:#e6b675}nav{display:flex;gap:24px;font-size:12px}nav a{opacity:.6}nav .current{opacity:1;border-bottom:1px solid #dcb780;padding-bottom:6px}#version{margin-left:auto;font:11px ui-monospace,monospace;color:#d2c4ad}.chapter{position:fixed;top:100px;left:34px;pointer-events:none;text-shadow:0 2px 15px #000}.eyebrow{font-size:10px;letter-spacing:3px;color:#e4bd85}h1{font-size:42px;letter-spacing:8px;margin:8px 0}#description{font-size:13px;color:#e5ddcf}.chapter:before{content:"";position:absolute;inset:-20px -35px;z-index:-1;background:radial-gradient(ellipse at left,#17191a88,transparent 70%)}aside{position:fixed;right:30px;top:110px;width:200px;text-align:right;text-shadow:0 2px 8px #000}.tag{display:block;color:#e2bf8b;font-size:11px;margin-bottom:8px;letter-spacing:2px}aside strong{font-size:16px}aside p{font-size:11px;line-height:1.9;color:#dacdbb}footer{position:fixed;bottom:0;left:0;right:0;padding:35px 30px 18px;background:linear-gradient(transparent,#111820e8);z-index:2}.toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}button{border:1px solid #ffffff36;background:#151d25d9;color:#e4d9c6;border-radius:4px;padding:10px 18px;cursor:pointer;font:12px inherit;backdrop-filter:blur(8px)}button:hover,button.selected{border-color:#e9bf82;background:#443d32e6}.primary{background:#d7b180;color:#181c20;border-color:#d7b180;font-weight:700}.footnote{display:flex;justify-content:space-between;color:#b0aa9d;font-size:10px;margin-top:20px;gap:12px}#subtitle{position:fixed;left:15%;right:15%;bottom:180px;text-align:center;color:#fff5dc;font-size:23px;letter-spacing:3px;text-shadow:0 2px 10px #000,0 0 20px #000;pointer-events:none}#playback{display:flex;align-items:center;gap:15px;max-width:820px;margin:15px auto 0}#playback[hidden]{display:none}#timeline{width:100%;accent-color:#dfb580}#time{font:11px ui-monospace,monospace;min-width:74px}body.cinematic .chapter{opacity:.3}button:focus-visible,a:focus-visible{outline:2px solid #f7cb8b;outline-offset:4px}@media(max-width:760px){header{padding:14px;gap:16px}header>a{font-size:15px;letter-spacing:1px}nav{gap:10px;font-size:10px}#version{font-size:9px}.chapter{left:18px;top:70px}h1{font-size:28px}.eyebrow{font-size:8px}aside{top:155px;right:16px;width:140px}aside strong{font-size:12px}aside p{font-size:10px}footer{padding:30px 12px 10px}.toolbar{gap:5px}button{padding:8px 9px;font-size:11px}#subtitle{font-size:17px;bottom:180px}.footnote{font-size:9px}}
@media(max-height:550px){.chapter{top:60px}h1{font-size:23px;margin:5px 0}.chapter p{display:none}aside{top:64px}footer{padding:18px 14px 8px}.toolbar{gap:5px}.toolbar button{padding:6px 9px;font-size:11px}.footnote{margin-top:8px}.sequence-row{margin-top:6px}#playback{margin-top:6px}#subtitle{bottom:140px}#walk-controls{bottom:145px}}

/* Leave a pause control while the cinematic fills the screen. */
.cinematic.playing .chapter,.cinematic.playing .sequence-row,.cinematic.playing #playback,.cinematic.playing .footnote,.cinematic.playing .toolbar>button:not(#play):not(#skip-intro){display:none}
.cinematic.playing footer{background:none;border:0;pointer-events:none}.cinematic.playing #play,.cinematic.playing #skip-intro{pointer-events:auto;opacity:.65}

.inspect-fountain .chapter,.inspect-fountain .sequence-row,.inspect-fountain #playback,.inspect-fountain .footnote{display:none}
.inspect-fountain footer{padding:16px 24px;background:linear-gradient(transparent,#11182099)}

#performance-hud{position:absolute;right:30px;top:52px;padding:5px 8px;border-radius:3px;background:#10171dcc;color:#e2d8c7;text-align:right;font:11px/1.5 ui-monospace,"Microsoft JhengHei",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
#shot-comparison{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 auto 12px;max-width:1000px;pointer-events:auto}
#shot-comparison button{padding:7px 11px;font-size:12px}#shot-comparison button[aria-pressed=true]{background:#d7b180;color:#181c20;border-color:#f0ce98}
#shot-comparison label{font-size:11px;color:#e6d3b6}#shot-comparison select{padding:6px;background:#1b252d;color:#eee0cc;border:1px solid #ffffff40;border-radius:3px}
#shot-comparison-state{width:100%;font-size:11px;color:#e6d3b6;text-align:center;text-shadow:0 1px 4px #000}
.walking #shot-comparison,.inspect-fountain #shot-comparison{display:none}
.cinematic.playing #shot-comparison{background:#111820bb;border-radius:5px;padding:7px;max-width:720px;margin-bottom:8px}
@media(max-width:760px){#shot-comparison{gap:5px;margin-bottom:8px}#shot-comparison button{padding:6px 8px;font-size:11px}#shot-comparison-state{font-size:10px}}
@media(max-width:760px){#performance-hud{right:14px;top:45px;font-size:10px}}@media(max-height:550px){aside{top:115px}}