@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root{--bg:#080b09;--text:#e3e8df;--muted:#7b847a;--line:#293026;--lime:#bcff59;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-padding:0}body{width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}
a{-webkit-tap-highlight-color:transparent;color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
::selection{background:var(--lime);color:var(--bg)}

.scene{position:relative;height:100svh;min-height:560px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#050d08;isolation:isolate}.matrix-stage{background:#07100a}
canvas{display:block;width:100%;height:100%}
.stage-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#06100755,transparent 35%,transparent 75%,#050b0677),linear-gradient(0deg,#030905ed,transparent 30%,transparent 75%,#050c05bb)}
.scanline{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#00000018 4px);opacity:.8}

.header{position:fixed;top:0;left:0;right:0;z-index:10;min-height:94px;padding:calc(24px + env(safe-area-inset-top)) max(4.2%,env(safe-area-inset-right)) 24px max(4.2%,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.brand{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:-1.4px;display:flex;align-items:center;gap:12px;pointer-events:auto}
.brand-symbol{font-family:Arial,sans-serif;font-size:26px;position:relative;border:1px solid var(--lime);color:var(--lime);width:32px;height:33px;display:grid;place-items:center;font-weight:900;font-style:italic;line-height:1}
.brand-symbol span{position:absolute;font-size:18px;right:-6px;top:-9px;background:var(--bg)}
.brand-dot{font-size:11px;align-self:flex-start;margin-top:4px;margin-left:-7px;color:var(--muted)}
.online{font:10px var(--mono);display:flex;align-items:center;gap:9px;color:#bbc3b5;white-space:nowrap}
.online i{width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 8px #baff5977}
.header-clock{color:#b2bca7;border-left:1px solid var(--line);padding-left:15px;margin-left:7px;font-variant-numeric:tabular-nums}

footer{position:fixed;bottom:0;left:max(4.2%,env(safe-area-inset-left));right:max(4.2%,env(safe-area-inset-right));z-index:10;border-top:1px solid var(--line);min-height:67px;padding:20px 0 calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:16px;font:8px var(--mono);color:#9aa68f;letter-spacing:.5px;pointer-events:none}
.footer-divider{margin:0 12px;color:#3f4c36}
.footer-message{font-family:'Noto Sans SC',sans-serif;letter-spacing:1px;font-size:9px}
footer a{color:#b2bca7;pointer-events:auto;white-space:nowrap}
footer a:hover{color:var(--lime)}

@media(max-width:650px){
  .header{min-height:74px;padding:calc(20px + env(safe-area-inset-top)) max(6%,env(safe-area-inset-right)) 20px max(6%,env(safe-area-inset-left));gap:12px}
  .brand{font-size:20px;gap:9px}
  .brand-symbol{width:26px;height:28px;font-size:23px}
  .online{font-size:8px;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:105px}
  .header-clock{flex-basis:100%;text-align:right;border:0;padding:0;margin:0;font-size:10px}
  footer{min-height:74px;left:max(6%,env(safe-area-inset-left));right:max(6%,env(safe-area-inset-right));font-size:7px;letter-spacing:0}
  .footer-message{display:none}
  .footer-divider{margin:0 5px}
}

.scene>canvas{position:absolute;inset:0}
.scene-links{position:absolute;inset:0;pointer-events:none}
.scene-link{position:absolute;display:block;pointer-events:auto;cursor:pointer;border-radius:12px;touch-action:pan-y}
.scene-link:focus-visible{outline:1px solid var(--lime);outline-offset:5px;background:#bcff5908}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}