:root{color-scheme:dark;--ink: #f4e4c1;--muted: rgba(244, 228, 193, .62);--gold: #e8c547;--red: #d42b2b}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#071018}body{font-family:Noto Sans SC,PingFang SC,sans-serif;color:var(--ink);cursor:crosshair}canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(40,18,10,.22) 100%),linear-gradient(180deg,rgba(40,22,14,.12),transparent 22%,transparent 80%,rgba(40,18,12,.2))}.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.chrome{position:fixed;z-index:4;pointer-events:none;text-align:center;left:50%;transform:translate(-50%)}.chrome.top{top:28px}.chrome.bottom{bottom:22px}.eyebrow{margin:0 0 6px;letter-spacing:.28em;font-size:10px;color:var(--gold);text-transform:uppercase}h1{margin:0;font-family:"Noto Serif SC",Songti SC,serif;font-weight:700;font-size:clamp(28px,4vw,42px);letter-spacing:.34em;text-indent:.34em;text-shadow:0 0 24px rgba(232,197,71,.35)}#hint{margin:0;font-size:12px;letter-spacing:.12em;color:var(--muted)}.views{position:fixed;z-index:6;right:20px;top:50%;transform:translateY(-50%);display:grid;gap:8px;pointer-events:auto}.views button{border:1px solid rgba(232,197,71,.28);background:#080c10b8;color:var(--muted);font:500 12px/1 Noto Sans SC,sans-serif;letter-spacing:.12em;padding:10px 12px;cursor:pointer}.views button.active{color:var(--gold);border-color:#e8c547b3;background:#2a160ad1}.shots{position:fixed;z-index:6;left:50%;bottom:52px;transform:translate(-50%);display:flex;gap:8px}.shots button{border:1px solid rgba(232,197,71,.28);background:#120a089e;color:var(--muted);font:500 12px/1 Noto Sans SC,sans-serif;letter-spacing:.14em;padding:8px 12px;cursor:pointer}.shots button:hover{color:var(--gold)}.plaque{position:fixed;z-index:5;left:28px;bottom:28px;width:min(320px,calc(100vw - 40px));padding:18px 20px 20px;border:1px solid rgba(232,197,71,.35);background:linear-gradient(180deg,#120a08e0,#080c10d6);box-shadow:0 16px 40px #00000059}.plaque.hidden,.plaque[hidden]{display:none}.plaque-kicker{margin:0 0 6px;color:var(--gold);letter-spacing:.18em;font-size:10px}.plaque-title{margin:0 0 8px;font-family:"Noto Serif SC",serif;font-size:26px;letter-spacing:.12em}.plaque-body{margin:0;color:var(--muted);line-height:1.6;font-size:13px}#loader{position:fixed;inset:0;z-index:10;display:grid;place-content:center;gap:14px;background:#071018;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}#loader.done{opacity:0;visibility:hidden;display:none}.loader-mark{width:72px;height:72px;margin:0 auto;display:grid;place-items:center;border:2px solid var(--gold);color:var(--gold);font-family:"Noto Serif SC",serif;font-size:36px;animation:pulse 1.4s ease-in-out infinite}#loader p{margin:0;text-align:center;letter-spacing:.2em;color:var(--muted);font-size:12px}@keyframes pulse{50%{transform:scale(.96);opacity:.7}}@media(max-width:720px){.chrome.top{top:16px}h1{letter-spacing:.2em;text-indent:.2em}.plaque{left:12px;right:12px;width:auto;bottom:64px}#hint{font-size:10px;letter-spacing:.06em}}