:root{--bg: #0a0807;--ink: #ece3d2;--dim: rgba(236, 227, 210, .5);--line: rgba(236, 227, 210, .18);--amber: #d9a441;--mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;--serif: "Songti SC", "Noto Serif SC", Georgia, serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}body{font:12px/1.5 var(--mono);letter-spacing:.08em;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer;padding:0}button:disabled{opacity:.4;cursor:default}.dim{color:var(--dim)}.splash{height:100%;display:grid;place-items:center;color:var(--dim);letter-spacing:.3em}.stage{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;user-select:none;-webkit-user-select:none}.stage canvas{display:block}.grain{pointer-events:none;position:fixed;top:-50%;right:-50%;bottom:-50%;left:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6) infinite;mix-blend-mode:overlay}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}to{transform:translate(0)}}.vignette{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 48%,transparent 55%,rgba(0,0,0,.55) 100%)}.hud-top{position:fixed;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud-top>*{pointer-events:auto}.brand-en{font-size:11px;letter-spacing:.32em}.brand-zh{margin-top:6px;font-family:var(--serif);font-size:13px;letter-spacing:.4em;color:var(--dim)}.roll-meta{display:grid;gap:4px;font-size:10.5px}.roll-meta .link{justify-self:start;margin-bottom:8px}.link{color:var(--dim);transition:color .2s}.link:hover{color:var(--ink)}.hud-right{display:flex;gap:18px;align-items:center}.music{display:inline-flex;align-items:center;gap:8px;font-size:10px}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}.eq i{width:2px;height:3px;background:currentColor}.music.on .eq i{animation:eq 1.1s ease-in-out infinite}.music.on .eq i:nth-child(2){animation-delay:-.4s}.music.on .eq i:nth-child(3){animation-delay:-.75s}@keyframes eq{50%{height:10px}}.hint{position:fixed;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:baseline;gap:14px;font-size:10px;color:var(--dim);pointer-events:none;text-align:center;padding:0 16px}.hint-year{color:var(--ink);font-size:13px}.fade{animation:fadein 1.2s ease both}@keyframes fadein{0%{opacity:0}}.controls{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(560px,calc(100% - 32px));display:grid;gap:10px;animation:fadein .8s ease both}.ctrl-row{display:flex;align-items:center;gap:6px}.ctrl{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:border-color .2s,background .2s}.ctrl:hover,.ctrl.on{border-color:#ece3d28c;background:#ece3d20f}.ctrl.main{width:46px;height:46px}.ctrl.speed{width:auto;min-width:46px;padding:0 10px;border-radius:19px;font-size:11px}.counter{margin-left:auto;display:grid;justify-items:end;font-size:11px;font-variant-numeric:tabular-nums}.bar{position:relative;height:22px;cursor:pointer;touch-action:none}.bar-track,.bar-fill{position:absolute;left:0;right:0;top:10px;height:2px;background:var(--line)}.bar-fill{background:var(--ink);transform-origin:left;transform:scaleX(0)}.bar-knob{position:absolute;top:6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}.sub-hint{text-align:center;font-size:9.5px;color:#ece3d252}.end-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:30px 34px;background:#0a0807b8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);animation:fadein .8s ease both}.end-title{font-size:13px;letter-spacing:.34em}.end-sub{margin-top:8px;color:var(--dim);font-size:10px}.end-actions{margin-top:22px;display:flex;gap:10px;justify-content:center}.btn{padding:10px 18px;border:1px solid rgba(236,227,210,.55);font-size:11px;transition:background .2s,color .2s}.btn:hover:not(:disabled){background:var(--ink);color:var(--bg)}.btn.ghost{border-color:var(--line);color:var(--dim)}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#060504f0;display:grid;grid-template-rows:1fr auto;animation:fadein .3s ease both;touch-action:auto}.viewer-scroll{overflow:auto;display:grid;place-items:center;padding:20px 16px 0;-webkit-overflow-scrolling:touch}.viewer-scroll img{max-width:100%;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);width:auto;height:auto;cursor:zoom-in;opacity:0;transition:opacity .4s;box-shadow:0 20px 60px #0009}.viewer-scroll img.in{opacity:1}.viewer-scroll.zoom{place-items:start center}.viewer-scroll.zoom img{max-height:none;width:min(100%,900px);cursor:zoom-out}.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px max(14px,env(safe-area-inset-bottom));font-size:11px}.login{height:100%;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#1a1310 0%,var(--bg) 70%)}.login-card{width:min(320px,calc(100% - 48px));display:grid;gap:14px;text-align:center}.login-card .brand-zh{margin-bottom:26px}.login-card input{font:inherit;font-size:16px;letter-spacing:.1em;text-align:center;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 4px;outline:none;border-radius:0}.login-card input:focus{border-color:#ece3d299}.login-msg{min-height:18px;font-size:11px;color:#d98a6a}.fallback{height:100%;overflow:auto;padding:24px 16px;display:grid;gap:18px;align-content:start}.fallback-note{color:var(--dim);font-size:11px;border:1px solid var(--line);padding:10px 12px}.fallback-years{display:flex;gap:8px;flex-wrap:wrap}.fallback-strip{display:flex;gap:10px;overflow-x:auto;padding:16px 12px;background:#120e0c}.fallback-strip img{height:min(60vh,480px);width:auto;flex:none}.veil{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--bg);color:var(--dim);letter-spacing:.4em;font-size:10px;pointer-events:none;transition:opacity 1.4s ease .2s}.veil span{animation:pulse 1.6s ease-in-out infinite}.veil.gone{opacity:0}@keyframes pulse{50%{opacity:.35}}.subtitle{position:fixed;left:50%;top:75.5%;transform:translate(-50%,6px);width:min(720px,calc(100% - 40px));text-align:center;font-family:var(--serif);font-size:clamp(15px,2vw,19px);line-height:1.7;letter-spacing:.12em;color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8);opacity:0;transition:opacity .6s ease,transform .6s ease;pointer-events:none}.subtitle.in{opacity:1;transform:translate(-50%)}.subtitle.latin{font-style:italic;letter-spacing:.06em}