:root{color-scheme:dark;--ink: #e8e6e1;--ink-dim: rgba(232, 230, 225, .55);--ink-faint: rgba(232, 230, 225, .32);--accent: #ff9a3c;--ease-out: cubic-bezier(.22, 1, .36, 1)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:#000;color:var(--ink);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}.scene-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease-out)}body[data-render-state=ready] .scene-canvas{opacity:1}.scene-vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%),linear-gradient(to bottom,rgba(0,0,0,.35),transparent 22%,transparent 78%,rgba(0,0,0,.45))}.loading-screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#000;transition:opacity .8s var(--ease-out),visibility .8s}body[data-render-state=ready] .loading-screen,body[data-render-state=error] .loading-screen{opacity:0;visibility:hidden}.loader-ring{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,154,60,.18);border-top-color:var(--accent);animation:loader-spin 1.1s linear infinite}@keyframes loader-spin{to{transform:rotate(360deg)}}.loader-text{font-size:12px;letter-spacing:.35em;color:var(--ink-dim)}.site-header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:28px 36px;pointer-events:none}.brand{pointer-events:auto;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}.brand b{font-size:13px;font-weight:600;letter-spacing:.28em}.brand small{font-size:10px;letter-spacing:.3em;color:var(--ink-faint)}.render-status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;color:var(--ink-dim)}.render-status i{width:6px;height:6px;border-radius:50%;background:#6fe38b;box-shadow:0 0 8px #6fe38bcc;animation:status-pulse 2.4s ease-in-out infinite}@keyframes status-pulse{50%{opacity:.35}}.site-main{position:fixed;inset:0;z-index:5;display:flex;align-items:flex-end;pointer-events:none}.hero{padding:0 36px 108px;max-width:560px}.eyebrow{font-size:11px;letter-spacing:.42em;color:var(--accent);margin-bottom:14px;text-shadow:0 0 10px rgba(0,0,0,.9)}.hero h1{font-size:clamp(56px,9vw,108px);font-weight:700;line-height:1;letter-spacing:.08em;text-shadow:0 0 60px rgba(255,154,60,.25)}.hero-subtitle{margin-top:18px;font-size:14px;line-height:1.9;color:var(--ink-dim);letter-spacing:.06em;text-shadow:0 0 12px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.8)}.site-footer{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px 36px;font-size:10px;letter-spacing:.3em;color:var(--ink-faint);pointer-events:none}.scene-plunge{position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 85% 70% at 50% 46%,transparent 32%,rgba(0,0,0,.92) 100%);opacity:0}.scroll-hud{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}.hud-percent{font-size:10px;letter-spacing:.18em;color:var(--ink-dim);font-variant-numeric:tabular-nums}.hud-track{display:block;width:2px;height:132px;border-radius:1px;background:#e8e6e124;overflow:hidden}.hud-progress{display:block;width:100%;height:100%;background:var(--accent);box-shadow:0 0 10px #ff9a3cbf;transform-origin:top;transform:scaleY(0)}.hud-stage{writing-mode:vertical-rl;font-size:10px;letter-spacing:.32em;color:var(--ink-dim)}.site-header,.hero,.site-footer{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease-out) .35s,transform 1s var(--ease-out) .35s}body[data-render-state=ready] .site-header,body[data-render-state=ready] .hero,body[data-render-state=ready] .site-footer{opacity:1;transform:none}.noscript-message{position:fixed;inset:auto 0 50%;z-index:30;text-align:center;font-size:14px;color:var(--ink-dim)}body[data-render-state=error]:after{content:"当前浏览器不支持 WebGL，无法渲染黑洞场景。";position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:.12em;color:var(--ink-dim)}@media(max-width:640px){.site-header,.site-footer{padding-left:20px;padding-right:20px}.hero{padding:0 20px 96px}.render-status{display:none}.scroll-hud{right:12px;gap:8px}.hud-track{height:92px}.site-footer{flex-direction:column;gap:8px}}@media(prefers-reduced-motion:reduce){.render-status i,.loader-ring{animation:none}}
