@font-face {
  font-family: 'TT Commons Pro Mono';
  src: url('/fonts/TT_Commons_Pro_Mono_Trial_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --accent: #dfff32;
  --accent-rgb: 223, 255, 50;
  --border: #2a2a2a;
  --text: #fafafa;
  --text-secondary: #a8a8a8;
  --muted: #737373;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#html-loader.html-loader--out {
  opacity: 0;
  transform: scale(1.02);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.55s;
}
/* ===== PRELOADER (typographic, cinematic) ===== */
#html-loader.pre{position:fixed;inset:0;z-index:2147483000;background:#070707;overflow:hidden;display:flex;align-items:center;justify-content:center;animation:preFadeIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes preFadeIn{from{opacity:0}to{opacity:1}}
.pre-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 45% at 50% 50%,rgba(var(--accent-rgb),.07),transparent 60%),
  radial-gradient(ellipse 100% 60% at 50% 110%,rgba(var(--accent-rgb),.04),transparent 70%),
  linear-gradient(180deg,#0a0a0a,#050505 70%);
  animation:preBgPulse 5s ease-in-out infinite alternate}
@keyframes preBgPulse{from{filter:brightness(.95)}to{filter:brightness(1.08)}}
.pre-grain{position:absolute;inset:0;opacity:.12;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:3.5rem 3.5rem;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 75%)}

.pre-corner{position:absolute;display:flex;align-items:flex-start;gap:.6rem;z-index:3}
.pre-corner--tl{top:1.8rem;left:1.8rem}
.pre-corner--tr{top:1.8rem;right:1.8rem}
.pre-corner--bl{bottom:1.8rem;left:1.8rem}
.pre-corner--br{bottom:1.8rem;right:1.8rem}
.pre-mark{width:.7rem;height:.7rem;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2);margin-top:.12rem;animation:preMark 1.4s ease-in-out infinite}
@keyframes preMark{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}50%{transform:scale(.85);box-shadow:0 0 0 6px rgba(var(--accent-rgb),0)}}
.pre-corner-k{font-family:'TT Commons Pro Mono', ui-monospace, monospace;font-size:.64rem;color:var(--text);text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.pre-corner-v{font-family:'TT Commons Pro Mono', ui-monospace, monospace;font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:.18rem}

.pre-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.6rem;padding:0 2rem}
.pre-eyebrow{display:flex;align-items:center;gap:.6rem;font-family:'TT Commons Pro Mono', ui-monospace, monospace;font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.22em;animation:preFadeUp .8s .1s cubic-bezier(.22,1,.36,1) both}
.pre-eyebrow-dot{width:.32rem;height:.32rem;border-radius:50%;background:var(--accent);box-shadow:0 0 .6rem rgba(var(--accent-rgb),.7)}
.pre-wordmark{font-family:'TT Commons Pro Mono', ui-monospace, monospace;font-weight:800;font-size:clamp(4rem,7vw + 1rem,9rem);line-height:.92;letter-spacing:-.045em;color:var(--text);display:flex;gap:.01em;text-shadow:0 0 80px rgba(var(--accent-rgb),.06)}
.pre-letter{display:inline-block;animation:preLetterIn .9s cubic-bezier(.22,1,.36,1) both}
@keyframes preLetterIn{from{opacity:0;transform:translateY(.6em) scale(.96)}to{opacity:1;transform:none}}
.pre-tagline{font-size:.95rem;color:var(--text-secondary);font-weight:400;animation:preFadeUp .8s .55s cubic-bezier(.22,1,.36,1) both}
@keyframes preFadeUp{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}

.pre-stages{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;animation:preFadeUp .8s .7s cubic-bezier(.22,1,.36,1) both}
.pre-stage-pill{display:flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border:1px solid var(--border);border-radius:999px;font-family:'TT Commons Pro Mono', ui-monospace, monospace;font-size:.65rem;color:var(--muted);text-transform:lowercase;letter-spacing:.05em;transition:all .3s cubic-bezier(.22,1,.36,1);background:rgba(255,255,255,.015)}
.pre-stage-dot{width:.34rem;height:.34rem;border-radius:50%;background:var(--muted);transition:all .3s cubic-bezier(.22,1,.36,1)}
.pre-stage-pill.done{border-color:rgba(var(--accent-rgb),.25);color:var(--text-secondary)}
.pre-stage-pill.done .pre-stage-dot{background:var(--accent);opacity:.6}
.pre-stage-pill.active{border-color:var(--accent);color:var(--text);background:rgba(var(--accent-rgb),.06);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)}
.pre-stage-pill.active .pre-stage-dot{background:var(--accent);box-shadow:0 0 .5rem rgba(var(--accent-rgb),.7);animation:preDotPulse 1.2s ease-in-out infinite}
@keyframes preDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}

.pre-track{width:min(38rem,80vw);height:1px;background:rgba(255,255,255,.07);position:relative;animation:preFadeUp .8s .85s cubic-bezier(.22,1,.36,1) both}
.pre-track-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.4));transition:width .15s linear}
.pre-track-tip{position:absolute;top:50%;width:.55rem;height:.55rem;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 1rem rgba(var(--accent-rgb),.8),0 0 0 4px rgba(var(--accent-rgb),.15);transition:left .15s linear}

.pre-meter{display:flex;align-items:baseline;gap:.6rem;font-family:'TT Commons Pro Mono', ui-monospace, monospace;animation:preFadeUp .8s 1s cubic-bezier(.22,1,.36,1) both}
.pre-meter-pct{font-size:1.6rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pre-meter-pct-suffix{font-size:.85rem;color:var(--accent);margin-left:-.4rem}
.pre-meter-sep{width:1px;height:1.2rem;background:var(--border);margin:0 .3rem}
.pre-meter-stage{font-size:.78rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.14em}