@font-face { font-family: 'SFM'; src: url('../fonts/SF-Mono-Regular.otf'); font-weight: 400; }
@font-face { font-family: 'SFM'; src: url('../fonts/SF-Mono-Medium.otf'); font-weight: 500; }
@font-face { font-family: 'SFM'; src: url('../fonts/SF-Mono-Semibold.otf'); font-weight: 600; }
@font-face { font-family: 'SFM'; src: url('../fonts/SF-Mono-Bold.otf'); font-weight: 700; }

:root {
  --bg: #0b0b0d;
  --bg2: #121216;
  --ink: #f2efe8;
  --mute: rgba(242, 239, 232, .56);
  --dim: rgba(242, 239, 232, .22);
  --line: rgba(242, 239, 232, .12);
  --red: #ff4d2e;
  --lime: #c6ff3d;
  --sans: -apple-system, system-ui, 'PingFang SC', sans-serif;
  --mono: 'SFM', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  background: var(--bg); overflow: hidden; transform-origin: 0 0;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -1px -1px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); z-index: 50; }
.grain { position: absolute; inset: -200px; pointer-events: none; z-index: 51; opacity: .07; mix-blend-mode: overlay; }

.scene { position: absolute; inset: 0; visibility: hidden; }
.abs { position: absolute; }
.mono { font-family: var(--mono); }
.kicker { font-family: var(--mono); font-size: 20px; letter-spacing: .18em; color: var(--mute); text-transform: uppercase; }
.kicker b { color: var(--red); font-weight: 500; }
.h1 { font-weight: 700; font-size: 84px; line-height: 1.12; letter-spacing: -.01em; }
.h2 { font-weight: 600; font-size: 56px; line-height: 1.2; }
.body { font-size: 26px; line-height: 1.7; color: var(--mute); }
.red { color: var(--red); }
.lime { color: var(--lime); }
.mask { display: block; overflow: hidden; padding-bottom: .08em; }
.mask > span { display: inline-block; will-change: transform; }
.ch { display: inline-block; white-space: pre; }
.rule { height: 1px; background: var(--line); transform-origin: 0 50%; }

.pill { font-family: var(--mono); font-size: 22px; padding: 14px 22px; border: 1px solid var(--dim);
  border-radius: 10px; background: var(--bg2); white-space: nowrap; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: rgba(18,18,22,.9); overflow: hidden; }
.panel-h { font-family: var(--mono); font-size: 18px; color: var(--mute); padding: 18px 24px;
  border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.dot3 { display: inline-flex; gap: 8px; margin-right: 8px; }
.dot3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); display: block; }

/* HUD */
#hud { position: absolute; inset: 0; z-index: 40; pointer-events: none; font-family: var(--mono);
  font-size: 15px; letter-spacing: .14em; color: var(--dim); }
#hud .tl { left: 60px; top: 48px; } #hud .tr { right: 60px; top: 48px; text-align: right; }
#hud .bl { left: 60px; bottom: 44px; } #hud .br { right: 60px; bottom: 44px; }
#hud .bar { left: 60px; right: 60px; bottom: 30px; height: 1px; background: var(--line); }
#hud .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); width: 0; }
#hud .corner { width: 18px; height: 18px; border-color: var(--dim); border-style: solid; border-width: 0; }