/* ═══════════════════════════════════════════════════
   DUCKYST — dark anonymous persona
   ═══════════════════════════════════════════════════ */

:root{
  --bg:        #050505;
  --bg-2:      #080808;
  --bg-3:      #0b0b0c;
  --ink:       #f4f4f1;
  --ink-2:     #c4c4bc;
  --dim:       #9d9d95;
  --dimmer:    #7e7e76;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --red:       #ff2f3c;
  --red-dim:   #e8545c;
  --blue:      #4ea8ff;
  --green:     #00ffa3;
  --amber:     #ffb347;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.no-scroll{ overflow:hidden; }

::selection{ background:var(--green); color:#000; }

a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#1d1d1d; border:2px solid #000; }
::-webkit-scrollbar-thumb:hover{ background:#333; }

/* ─────────── AMBIENT LAYERS ─────────── */
.fx{ position:fixed; inset:0; z-index:9000; pointer-events:none; }

.fx-noise{
  position:absolute; inset:-120%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.038;
  animation:grain 700ms steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) }
  33%{ transform:translate(-3%,2%) }
  66%{ transform:translate(2%,-3%) }
  100%{ transform:translate(0,0) }
}

.fx-scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.26) 3px, rgba(0,0,0,.26) 4px);
  opacity:.4;
}

.fx-beam{
  position:absolute; left:0; right:0; height:32vh;
  background:linear-gradient(180deg, transparent, rgba(0,255,163,.028) 45%, rgba(255,255,255,.018) 55%, transparent);
  animation:beam 9s linear infinite;
}
@keyframes beam{
  0%{ transform:translateY(-40vh) }
  100%{ transform:translateY(120vh) }
}

.fx-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 85%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 85%);
}

.fx-vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 105% 85% at 50% 45%, transparent 45%, rgba(0,0,0,.5) 82%, #000 100%);
}

.fx-glow{ position:absolute; border-radius:50%; filter:blur(120px); }
.fx-glow--red{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-12%; right:-16%;
  background:radial-gradient(circle, rgba(255,47,60,.13), transparent 68%);
  animation:drift 22s ease-in-out infinite alternate;
}
.fx-glow--blue{
  width:48vw; height:48vw; max-width:700px; max-height:700px;
  bottom:-14%; left:-14%;
  background:radial-gradient(circle, rgba(78,168,255,.10), transparent 68%);
  animation:drift 27s ease-in-out infinite alternate-reverse;
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1) }
  100%{ transform:translate(-6%,7%) scale(1.18) }
}

/* ─────────── CUSTOM CURSOR ─────────── */
.cur{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; mix-blend-mode:difference; }
.cur__ring{
  position:absolute; top:-13px; left:-13px; width:26px; height:26px;
  border:1px solid rgba(255,255,255,.55);
  transition:transform .28s var(--ease), opacity .2s;
}
.cur__ring i{ position:absolute; background:#fff; }
.cur__ring i:nth-child(1){ top:-1px; left:-1px; width:5px; height:1px }
.cur__ring i:nth-child(2){ bottom:-1px; right:-1px; width:5px; height:1px }
.cur__ring i:nth-child(3){ top:50%; left:50%; width:1px; height:1px; opacity:.6 }
.cur__ring i:nth-child(4){ top:50%; left:50%; width:1px; height:1px; opacity:.6 }
.cur__dot{
  position:absolute; top:-1px; left:-1px; width:2px; height:2px;
  background:var(--green); border-radius:50%;
  transition:transform .2s var(--ease);
}
.cur__label{
  position:absolute; top:22px; left:0;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; opacity:0;
  white-space:nowrap; transition:opacity .2s, transform .28s var(--ease);
  transform:translateY(-4px);
}
.cur.is-label .cur__label{ opacity:.85; transform:translateY(0); }
.cur.is-hot .cur__ring{ transform:scale(1.9); border-color:rgba(255,255,255,.9); }
.cur.is-hot .cur__dot{ transform:scale(2.4); }
.cur.is-down .cur__ring{ transform:scale(.72); }

body.has-cur,
body.has-cur *{ cursor:none !important; }
body.has-cur .term__input,
body.has-cur .term__input:focus{ cursor:text !important; }

/* ─────────── BOOT ─────────── */
.boot{
  position:fixed; inset:0; z-index:9999;
  background:#040404;
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
  transition:opacity .7s ease, visibility .7s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{ width:min(560px,100%); }
.boot__logo{
  font-family:var(--mono); font-size:clamp(9px,2.1vw,14px);
  line-height:1.25; color:var(--ink); margin:0 0 1.6rem;
  letter-spacing:0; text-shadow:0 0 14px rgba(255,255,255,.16);
}
.boot__logo .dim{ color:var(--dimmer); }
.boot__log{
  font-family:var(--mono); font-size:12.5px; line-height:2;
  color:var(--dim); min-height:150px; margin-bottom:1.4rem;
}
.boot__log b{ color:var(--green); font-weight:500; }
.boot__log s{ color:var(--red); text-decoration:none; }
.boot__log .e{ color:var(--red); }
.boot__log .p{ color:var(--green); }
.boot__log .d{ color:var(--dim); }
.boot__bar{
  height:1px; width:100%; background:rgba(255,255,255,.12); position:relative; overflow:hidden;
}
.boot__bar i{
  position:absolute; inset:0 100% 0 0; background:var(--green);
  box-shadow:0 0 12px rgba(0,255,163,.8);
  transition:right .25s linear;
}
.boot__hint{
  margin-top:1rem; font-family:var(--mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dimmer);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:.9} }

/* ─────────── PROGRESS ─────────── */
.prog{ position:fixed; top:0; left:0; right:0; height:1px; z-index:8000; background:rgba(255,255,255,.05); }
.prog i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--red-dim),var(--green)); }

/* ─────────── SOUND TOGGLE ─────────── */
.snd{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); background:transparent;
  border:1px solid var(--line); padding:.34rem .55rem;
  transition:color .25s, border-color .25s, background .25s;
  white-space:nowrap;
}
.snd:hover{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.045); }
.snd:focus-visible{ outline:1px solid var(--green); outline-offset:2px; }
.snd[aria-pressed="true"]{
  color:var(--green); border-color:rgba(0,255,163,.35); background:rgba(0,255,163,.05);
}
.snd__eq{ display:flex; align-items:flex-end; gap:2px; height:9px; }
.snd__eq i{ display:block; width:2px; height:2px; background:currentColor; }
.snd[aria-pressed="true"] .snd__eq i{ animation:eq .95s ease-in-out infinite; }
.snd[aria-pressed="true"] .snd__eq i:nth-child(2){ animation-delay:.16s }
.snd[aria-pressed="true"] .snd__eq i:nth-child(3){ animation-delay:.32s }
@keyframes eq{ 0%,100%{ height:2px } 50%{ height:9px } }
.snd.is-hint{ animation:hintPulse 3s ease-in-out 1; }
@keyframes hintPulse{
  0%,100%{ border-color:var(--line) } 35%{ border-color:rgba(0,255,163,.45); color:var(--ink) }
}

/* ─────────── NAV ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.9rem var(--pad);
  background:linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,0));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:padding .4s var(--ease), background .4s;
}
.nav.is-stuck{
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; }
.nav__dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:blip 2.6s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.25} }
.nav__brandtext{ color:var(--ink); }
.nav__links{ display:flex; gap:1.35rem; font-family:var(--mono); font-size:11px; letter-spacing:.1em; }
.nav__links a{ color:var(--dim); position:relative; padding:.2rem 0; transition:color .25s; white-space:nowrap; }
.nav__links a i{ font-style:normal; color:var(--dimmer); margin-right:.4rem; transition:color .25s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--green); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover i{ color:var(--green); }
.nav__links a:hover::after{ width:100%; }
.nav__links a.is-active{ color:var(--ink); }
.nav__links a.is-active i{ color:var(--red); }
.nav__right{ display:flex; align-items:center; gap:1rem; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim); }
.nav__state{ display:flex; align-items:center; gap:.4rem; color:var(--green); }
.nav__state i{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blip 2.6s infinite; }

@media (max-width:1080px){ .nav__links{ display:none; } .nav__clock{ display:none; } }
@media (max-width:640px){ .nav__state{ display:none; } .nav__lbl{ display:none; }
  .snd{ padding:.4rem .5rem; } .snd__eq{ height:10px; } }

/* ─────────── SHARED ─────────── */
main{ position:relative; z-index:1; }

.sec{
  position:relative;
  max-width:var(--max); margin:0 auto;
  padding:clamp(5rem,12vh,9rem) var(--pad);
}
.sec__head{ display:flex; align-items:center; gap:1rem; margin-bottom:3.2rem; }
.sec__num{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--red);
  border:1px solid rgba(255,47,60,.35); padding:.28rem .55rem;
  background:rgba(255,47,60,.05);
}
.sec__rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line-2),transparent); }
.sec__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--dim);
}
.sec__note{
  font-family:var(--mono); font-size:12.5px; color:var(--dim);
  margin:-2rem 0 2.2rem; max-width:52ch;
}

.dim{ color:var(--dim); }
.green{ color:var(--green); }
.red{ color:var(--red); }
.blue{ color:var(--blue); }

.cur-blink{
  display:inline-block; width:8px; height:15px; background:var(--green);
  vertical-align:-2px; box-shadow:0 0 10px rgba(0,255,163,.7);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* glitch text */
[data-glitch]{ position:relative; display:inline-block; }
[data-glitch]::before,[data-glitch]::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
  opacity:0;
}
[data-glitch]::before{ color:var(--red); }
[data-glitch]::after{ color:var(--blue); }
[data-glitch].gl-on::before,
[data-glitch].gl-on::after{ opacity:.85; animation:glitchA 420ms steps(2) infinite; }
[data-glitch].gl-on::before{ animation-name:glitchB; }
@keyframes glitchA{
  0%{ clip-path:inset(0 0 100% 0); transform:translate(0) }
  20%{ clip-path:inset(12% 0 62% 0); transform:translate(-3px,-1px) }
  40%{ clip-path:inset(52% 0 28% 0); transform:translate(3px,1px) }
  60%{ clip-path:inset(78% 0 6% 0); transform:translate(-2px,0) }
  80%{ clip-path:inset(28% 0 58% 0); transform:translate(2px,-1px) }
  100%{ clip-path:inset(0 0 100% 0); transform:translate(0) }
}
@keyframes glitchB{
  0%{ clip-path:inset(60% 0 22% 0); transform:translate(2px,1px) }
  25%{ clip-path:inset(0 0 84% 0); transform:translate(-3px,0) }
  50%{ clip-path:inset(34% 0 46% 0); transform:translate(3px,-1px) }
  75%{ clip-path:inset(8% 0 76% 0); transform:translate(-2px,1px) }
  100%{ clip-path:inset(60% 0 22% 0); transform:translate(2px,1px) }
}
.glitch-flash{ animation:glitchFlash 260ms steps(2) 2; }
@keyframes glitchFlash{
  0%{ transform:translate(0) } 50%{ transform:translate(2px,-1px) } 100%{ transform:translate(0) }
}

/* panels */
.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,14,15,.72), rgba(6,6,7,.72));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.panel__bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.55rem .8rem;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim);
  background:rgba(255,255,255,.015);
}
.panel__bar i{ width:8px; height:8px; border-radius:50%; background:#242424; display:block; }
.panel__bar i:first-child{ background:rgba(255,47,60,.45); }
.panel__bar i:last-of-type{ background:rgba(0,255,163,.35); }
.panel__bar span{ margin-left:.5rem; }
.panel__right{ margin-left:auto; color:var(--green); }
.panel__body{ padding:1.2rem; }
.panel__foot{
  border-top:1px solid var(--line); padding:.5rem .8rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dimmer);
  text-transform:uppercase;
}
.panel__foot b{ color:var(--dim); font-weight:500; }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

/* ─────────── HERO ─────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:6rem var(--pad) 5rem;
  overflow:hidden;
}
.hero__frame{ position:absolute; inset:clamp(1rem,4vw,3rem); pointer-events:none; }
.hero__corner{ position:absolute; width:22px; height:22px; border:1px solid var(--line-2); }
.hero__corner--tl{ top:0; left:0; border-right:0; border-bottom:0 }
.hero__corner--tr{ top:0; right:0; border-left:0; border-bottom:0 }
.hero__corner--bl{ bottom:0; left:0; border-right:0; border-top:0 }
.hero__corner--br{ bottom:0; right:0; border-left:0; border-top:0 }

.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dimmer);
  margin-bottom:2.2rem;
}
.hero__title{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(3.2rem,15.5vw,12rem);
  line-height:.86;
  letter-spacing:.02em;
  margin:0;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    0 0 30px rgba(255,255,255,.10),
    0 0 90px rgba(0,255,163,.06),
    0 0 120px rgba(255,47,60,.07);
  animation:flicker 7s steps(1) infinite;
}
@keyframes flicker{
  0%,96%,100%{ opacity:1 }
  96.5%{ opacity:.86 }
  97%{ opacity:1 }
  97.6%{ opacity:.93 }
}

.term{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.95;
  color:var(--dim);
  white-space:pre;
  text-align:left;
}
.term--hero{ margin:2.4rem 0 0; opacity:0; }
.term--hero.in{ opacity:1; transition:opacity .8s var(--ease); }
.term b{ color:var(--ink); font-weight:400; }
.term s{ color:var(--red); text-decoration:none; }
.term u{ color:var(--green); text-decoration:none; }
.term i{ color:var(--blue); font-style:normal; }

.hero__line{
  font-family:var(--mono);
  font-size:clamp(.78rem,1.5vw,.95rem);
  letter-spacing:.06em;
  color:var(--ink-2);
  margin:2.6rem 0 0;
  min-height:1.6em;
}
.hero__line .typed{ color:var(--ink); }
.hero__line .ghost{ color:var(--dimmer); }

.hero__scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dimmer);
}
.hero__scroll i{ display:block; width:1px; height:46px; background:linear-gradient(180deg,var(--line-2),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; left:0; width:1px; height:12px; background:var(--green);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%{top:-14px} 100%{top:46px} }

/* ─────────── 01 WHO ─────────── */
.who{ max-width:44rem; }
.who__line{
  font-size:clamp(1.5rem,4.4vw,3.1rem);
  line-height:1.18;
  font-weight:300;
  letter-spacing:-.015em;
  margin:0 0 .35rem;
  color:#fff;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.who__line.in{ opacity:1; transform:none; }
.who__line:nth-child(4).in{ color:var(--dim); }
.who__line:nth-child(5).in{ color:var(--dim); }
.who__line:nth-child(7).in{ color:var(--ink-2); }
.who__gap{ height:1.6rem; }

.redact{
  margin-top:4.5rem; padding:1.6rem;
  border:1px solid var(--line); border-left:2px solid var(--red);
  background:linear-gradient(180deg, rgba(255,47,60,.03), transparent 60%);
  position:relative;
}
.redact__note{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--dimmer); margin:0 0 1rem; text-transform:uppercase;
}
.redact__body{
  font-family:var(--mono); font-size:13px; line-height:2.1;
  color:var(--ink-2); margin:0; max-width:62ch;
}
.redact__body u{ text-decoration:none; background:rgba(255,255,255,.08); color:transparent; padding:0 .18em; transition:color .3s, background .3s; }
.redact:hover .redact__body u{ color:var(--ink); background:rgba(0,255,163,.07); }
.redact__warn{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:var(--red); margin:1.2rem 0 0; text-transform:uppercase; opacity:.9;
}
.redact:hover .redact__warn{ opacity:.6; }

/* ─────────── 02 FOOTPRINT ─────────── */
.dfp{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
@media (max-width:900px){ .dfp{ grid-template-columns:1fr; } }

.syslog{ font-family:var(--mono); font-size:11.5px; line-height:1.95; color:var(--dim); margin:0; white-space:pre-wrap; }
.syslog b{ color:var(--green); font-weight:400; }
.syslog s{ color:var(--red); text-decoration:none; }
.syslog u{ color:var(--blue); text-decoration:none; }

.statline{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:11.5px; margin-bottom:1.8rem;
  border-bottom:1px dashed var(--line-2); padding-bottom:.9rem;
}
.statline__k{ color:var(--green); }
.statline__v{ color:var(--dimmer); letter-spacing:.1em; }

.bars{ list-style:none; margin:0 0 2.2rem; padding:0; }
.bar{
  display:grid; grid-template-columns:8.5rem 1fr 2.2rem;
  align-items:center; gap:1rem;
  font-family:var(--mono); font-size:12px;
  padding:.42rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.bar__k{ color:var(--ink-2); letter-spacing:.04em; }
.bar__t{
  position:relative; height:10px;
  background:#101012;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.bar__t::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.5) 5px 6px);
}
.bar__t i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(0,255,163,.35), var(--green));
  box-shadow:0 0 14px rgba(0,255,163,.4);
  transition:width 1.3s var(--ease);
}
.bar__v{ color:var(--green); text-align:right; }
.bar:hover .bar__t i{ filter:brightness(1.35); }

.tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.tags span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--dim); border:1px solid var(--line);
  padding:.32rem .6rem;
  background:rgba(255,255,255,.015);
  transition:color .25s, border-color .25s, background .25s;
}
.tags span:hover{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.05); }

/* ─────────── 03 DARK ─────────── */
.sec--dark{ position:relative; }
.sec--dark::before{
  content:""; position:absolute; left:50%; top:10%; transform:translateX(-50%);
  width:min(900px,90%); height:60%;
  background:radial-gradient(ellipse at center, rgba(255,47,60,.055), transparent 68%);
  pointer-events:none; z-index:-1;
}
.dark__title{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.9rem,6.6vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 2rem;
  color:#fff;
  max-width:16ch;
}
.term--center{
  margin:0 0 3.5rem; color:var(--ink-2); font-size:clamp(.8rem,1.6vw,1rem);
  line-height:2.1; letter-spacing:.1em;
}
.term--center b{ color:var(--red); }

.dark__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-bottom:3rem;
}
.shadow{
  background:#070707; padding:1.5rem 1.2rem 1.3rem;
  display:flex; flex-direction:column; gap:.5rem;
  position:relative; overflow:hidden;
  transition:background .35s, transform .35s var(--ease);
}
.shadow::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,47,60,.09) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.shadow:hover{ background:#0b0b0c; }
.shadow:hover::after{ transform:translateX(120%); }
.shadow__id{
  font-family:var(--mono); font-size:14px; color:var(--ink);
  letter-spacing:.04em; text-shadow:0 0 12px rgba(255,47,60,.35);
}
.shadow__role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red);
}
.shadow__body{
  font-size:12.5px; line-height:1.65; color:var(--dim); margin:.4rem 0 .6rem; flex:1;
}
.shadow__last{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  color:var(--dimmer); text-transform:uppercase;
  border-top:1px solid var(--line); padding-top:.6rem;
}

.dark__meter{ font-family:var(--mono); font-size:11.5px; }
.meter__row{
  display:grid; grid-template-columns:11rem 1fr 2.5rem;
  align-items:center; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--dim); letter-spacing:.12em;
}
.meter__bar{ position:relative; height:6px; background:#0e0e10; border:1px solid rgba(255,255,255,.06); }
.meter__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(255,255,255,.1), var(--red));
  transition:width 1.4s var(--ease);
}
.meter__bar--dim i{ background:linear-gradient(90deg, rgba(255,255,255,.08), #3a3a3a); }
.meter__bar--red i{ background:linear-gradient(90deg, rgba(255,47,60,.2), var(--red)); box-shadow:0 0 12px rgba(255,47,60,.4); }
.meter__v{ color:var(--ink-2); text-align:right; }
@media (max-width:640px){ .meter__row{ grid-template-columns:8rem 1fr 2rem; font-size:10px; gap:.6rem } }

/* ─────────── 04 GAMES ─────────── */
.gameslog{ font-family:var(--mono); font-size:12.5px; line-height:2.05; color:var(--dim); margin:0; white-space:pre-wrap; }
.gameslog .c{ color:var(--ink); }
.gameslog .g{ color:var(--green); }
.gameslog .r{ color:var(--red); }
.gameslog .b{ color:var(--blue); }
.gameslog .k{ color:var(--amber); }
.gameslog .p{ color:var(--green); }
.gameslog .w{ color:var(--ink); }
.gameslog .d{ color:var(--dim); }

.ach{ margin-top:3rem; }
.ach__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  color:var(--dim); text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.9rem; margin-bottom:1.2rem;
}
.ach__meta{ color:var(--dimmer); letter-spacing:.1em; }
.ach__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.achc{
  background:#070707; padding:1.1rem 1rem;
  display:flex; flex-direction:column; gap:.35rem;
  transition:background .3s;
  position:relative; overflow:hidden;
}
.achc__n{ font-family:var(--mono); font-size:9.5px; color:var(--dimmer); letter-spacing:.2em; }
.achc__t{
  font-family:var(--mono); font-size:12.5px; color:var(--ink); letter-spacing:.1em;
  text-transform:uppercase; min-height:1.2em;
}
.achc__d{ font-family:var(--mono); font-size:10.5px; color:var(--dimmer); }
.achc:hover{ background:#0d0d0e; }
.achc:hover .achc__t{ color:var(--green); }
.achc--locked .achc__t{ color:var(--dimmer); }
.achc--locked:hover .achc__t{ color:var(--red); }

/* ─────────── 05 TERMINAL ─────────── */
.panel--term{ max-width:52rem; }
.term__screen{
  padding:1.2rem;
  font-family:var(--mono); font-size:12.5px; line-height:1.85;
  min-height:340px; max-height:460px; overflow-y:auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,255,163,.035), transparent 65%),
    #060607;
}
.term__out{ white-space:pre-wrap; word-break:break-word; color:var(--dim); }
.term__out .p{ color:var(--green); }
.term__out .e{ color:var(--red); }
.term__out .w{ color:var(--ink); }
.term__out .b{ color:var(--blue); }
.term__out .c{ color:var(--amber); }
.term__line{ display:flex; gap:.7rem; align-items:baseline; margin-top:.2rem; }
.term__prompt{ color:var(--green); flex-shrink:0; }
.term__input{
  flex:1; background:transparent; border:0; outline:none;
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
  caret-color:var(--green); padding:0; min-width:0;
}

/* ─────────── 06 VAULT ─────────── */
.vault{
  display:grid; grid-template-columns:minmax(0,290px) minmax(0,1fr);
  border:1px solid var(--line); background:#060607; min-height:420px;
}
@media (max-width:820px){ .vault{ grid-template-columns:1fr; } }

.vault__tree{ border-right:1px solid var(--line); overflow:hidden; }
@media (max-width:820px){ .vault__tree{ border-right:0; border-bottom:1px solid var(--line); } }
.vault__thead{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--green);
  padding:.9rem 1rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015);
}
.vault__list{ padding:.7rem 0; max-height:340px; overflow-y:auto; }
@media (max-width:820px){ .vault__list{ max-height:230px; } }

.fi{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:12px; color:var(--dim);
  padding:.4rem 1rem; cursor:pointer; width:100%; text-align:left;
  background:transparent; border:0; border-left:2px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
}
.fi:hover{ color:var(--ink); background:rgba(255,255,255,.035); border-left-color:var(--line-2); }
.fi.is-active{ color:var(--ink); background:rgba(0,255,163,.055); border-left-color:var(--green); }
.fi__i{ color:var(--dimmer); width:1ch; flex-shrink:0; }
.fi.is-active .fi__i{ color:var(--green); }
.fi__n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fi--denied .fi__n{ color:var(--red-dim); }
.fi--denied .fi__i{ color:var(--red-dim); }

.vault__view{ position:relative; padding:1.2rem 1.4rem; overflow:hidden; }
.vault__path{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--dimmer); border-bottom:1px solid var(--line);
  padding-bottom:.8rem; margin-bottom:1.1rem; word-break:break-all;
}
.vault__body{
  font-family:var(--mono); font-size:12.5px; line-height:2;
  color:var(--ink-2); margin:0; white-space:pre-wrap; word-break:break-word;
  min-height:250px;
}
.vault__body .g{ color:var(--green) }
.vault__body .r{ color:var(--red) }
.vault__body .d{ color:var(--dimmer) }
.vault__body .w{ color:var(--ink) }
.vault__stamp{
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-family:var(--mono); font-size:clamp(1rem,3.4vw,1.9rem);
  letter-spacing:.3em; color:var(--red);
  background:rgba(6,6,7,.93);
  text-shadow:0 0 24px rgba(255,47,60,.5);
  animation:deny .5s steps(3) 3;
  z-index:2;
}
.vault__stamp[hidden]{ display:none; }
.vault__view.shake{ animation:shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes deny{
  0%{ opacity:1 } 33%{ opacity:.2; transform:translateX(-3px) } 66%{ opacity:.9; transform:translateX(3px) } 100%{ opacity:1 }
}
@keyframes shake{
  10%,90%{ transform:translateX(-2px) } 20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-6px) } 40%,60%{ transform:translateX(6px) }
}
.vault__body .cursorline{ display:inline-block; width:7px; height:13px; background:var(--green); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* ─────────── FOOTER ─────────── */
.foot{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:4rem var(--pad) 3.5rem;
  text-align:center;
}
.foot__rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); margin-bottom:3.4rem; }
.foot__big{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1.6rem,7vw,4.4rem);
  letter-spacing:-.01em; margin:0 0 1.6rem; color:#fff;
  text-shadow:0 0 40px rgba(255,255,255,.08);
}
.foot__sub{
  font-family:var(--mono); font-size:13px; line-height:2.1;
  color:var(--dim); margin:0 0 3rem;
}
.foot__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 2.4rem;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--dimmer); text-transform:uppercase;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.4rem 0; margin-bottom:1.6rem;
}
.foot__meta b{ color:var(--dim); font-weight:400; }
.foot__secret{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--red); margin:0 0 1.2rem; opacity:0;
  transition:opacity 1.2s ease;
}
.foot__secret.in{ opacity:.8; }
.foot__fine{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--dimmer); margin:0; text-transform:uppercase;
}

/* ─────────── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .who__line,.reveal{ opacity:1 !important; transform:none !important; }
  .fx-beam,.fx-noise{ display:none; }
}