@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--ink:#f0eee4;--muted:#9da69b;--gold:#ddcaa0}*{box-sizing:border-box}body{margin:0;background:#111713;color:var(--ink);font-family:'DM Sans',sans-serif}main{max-width:1680px;margin:auto;padding:30px 5vw 20px}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:19px;letter-spacing:.27em;color:var(--ink);text-decoration:none}.brand span{display:block;font-size:8px;letter-spacing:.2em;color:var(--muted);margin-top:8px}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:6px}.outline{background:none;border:1px solid #526052;border-radius:30px;padding:12px 20px;font-size:12px}.outline[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.intro{display:flex;justify-content:space-between;align-items:end;padding:38px 0 28px}.eyebrow{font-size:9px;letter-spacing:.23em;color:var(--gold);margin:0 0 12px}h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(36px,4vw,64px);line-height:1.03;margin:0}h1 em{color:#a8b69e;font-weight:400}.instruction{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 3px}.viewer{position:relative;aspect-ratio:5568/3072;overflow:hidden;background:#202920;border:1px solid #ffffff16;border-radius:3px;isolation:isolate}.viewer img,.viewer canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.viewer canvas{opacity:0;touch-action:pan-y}.scene-label{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.18em;text-shadow:0 1px 5px #000;color:white;background:#15201655;border:1px solid #ffffff25;padding:9px 12px;border-radius:20px;pointer-events:none}.dot{width:5px;height:5px;background:#e6dfb6;border-radius:50%}.full{position:absolute;right:16px;top:16px;border:1px solid #ffffff45;background:#18251960;border-radius:50%;width:36px;height:36px;font-size:23px}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;background:#19221e;font-size:12px;letter-spacing:.1em}#loading span{width:16px;height:16px;border:1px solid #ffffff30;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:30px;background:#162018b5;padding:9px 16px;font-size:10px;pointer-events:none;transition:opacity 1s}.controls{max-width:880px;margin:25px auto 0}.time-head{display:flex;justify-content:space-between;align-items:center}.time-head .eyebrow{font-size:8px}.clock{font-size:36px;font-weight:400;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:4px}.colon{color:#73806d;margin:0 3px}.play{background:#dfd4b6;color:#172018;border:none;padding:13px 20px;border-radius:40px;font-size:11px}.play span{margin-left:8px}input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#c6b58a,#e3d7ae 25%,#f0e8cc 50%,#e2c397 75%,#caa16c);margin:27px 0 16px;cursor:ew-resize}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border:4px solid #111713;outline:1px solid #e5d6b8;border-radius:50%;background:#e5d6b8}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:3px solid #111713;border-radius:50%;background:#e5d6b8}.ticks{display:flex;justify-content:space-between}.ticks button{padding:5px 0;border:0;background:none;font-size:10px;color:#d5dacd;text-align:center}.ticks button:first-child{text-align:left}.ticks button:last-child{text-align:right}.ticks span{display:block;font-size:8px;color:#788674;margin-top:7px}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff12;margin-top:32px;padding-top:16px;color:#778371;font-size:8px;letter-spacing:.12em}footer p{margin:0;letter-spacing:0}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}.viewer:fullscreen{background:#080d0a;border:0;border-radius:0;aspect-ratio:auto}.viewer:fullscreen img,.viewer:fullscreen canvas{object-fit:contain}.viewer.expanded{position:fixed;inset:0;z-index:10;border:0;border-radius:0;background:#080d0a;aspect-ratio:auto}.viewer.expanded img,.viewer.expanded canvas{object-fit:contain}@media(max-width:600px){main{padding:23px 20px}.intro{padding:35px 0 24px;display:block}.instruction{margin-top:18px;font-size:11px}.brand{font-size:16px}.outline{font-size:10px;padding:10px 14px}.viewer{margin:0 -20px;border-radius:0;border-left:0;border-right:0}.scene-label{left:10px;top:10px;font-size:6px;padding:7px 9px}.full{right:10px;top:10px;width:29px;height:29px;font-size:19px}#hint{font-size:8px;bottom:8px;padding:6px 10px}.controls{margin-top:25px}footer{display:block;line-height:1.8}footer p{margin-top:7px}.clock{font-size:34px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}