/* przx gate pages — same gothic Win9x desktop as the card (fonts, palette, bevels, motion curves). */
@font-face { font-family: "Pirata One"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pirata-one-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
/* Cyrillic in UI chrome comes from IBM Plex Mono: Pixelify's Cyrillic reads poorly at heading sizes (д≈а, в≈е, з≈э). */
@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: swap; src: url("/assets/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2580-259F; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg: #09070b; --ink: #f0eee7; --muted: #a9a4ad; --dim: #7d7781;
  --accent: #765281; --accent-hi: #a67bb0; --accent-dark: #392540;
  --face: #b7b3b7; --hi: #f6f3f1; --lo: #5c575f; --shadow: #050406;
  --ok: #8fd18b; --warn: #e6c36a; --bad: #e57b86;
  --font-ui: "Pixelify Sans", "MS Sans Serif", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --font-display: "Pirata One", "UnifrakturCook", Impact, serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-snap: cubic-bezier(.2, .9, .25, 1.15);
  --lift: 6px 7px 0 rgba(57, 37, 64, .55), 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 44px rgba(118, 82, 129, .07);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100dvh; margin: 0; overflow-x: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(118, 82, 129, .12), transparent 42%), var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--font-mono);
  -webkit-font-smoothing: none;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent-hi); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- scene (fixed, never scrolls: cheap to composite) ---------- */
.scene, .scene::before, .scene::after { position: fixed; inset: 0; pointer-events: none; }
.scene { z-index: 0; overflow: hidden; }
.scene::before {             /* aurora */
  content: ""; inset: -25%;
  background:
    radial-gradient(38% 34% at 24% 30%, rgba(118, 82, 129, .34), transparent 70%),
    radial-gradient(34% 38% at 80% 68%, rgba(84, 52, 128, .26), transparent 70%),
    radial-gradient(26% 26% at 62% 14%, rgba(166, 123, 176, .15), transparent 70%),
    radial-gradient(30% 22% at 12% 86%, rgba(150, 70, 110, .12), transparent 70%);
  animation: aurora 28s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
}
.scene::after {              /* grid */
  content: ""; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 72%);
}
@keyframes aurora { to { transform: translate3d(4%, 3%, 0) rotate(3deg) scale(1.08); } }
.ghost {                     /* giant PRZX watermark */
  position: fixed; right: -1.8vw; bottom: -2vw; z-index: 0; pointer-events: none; user-select: none;
  font: 400 clamp(150px, 30vw, 430px)/.7 var(--font-display); letter-spacing: .02em; color: transparent;
  color: rgba(118, 82, 129, .09); -webkit-text-stroke: 1px rgba(166, 123, 176, .26);   /* flat fill: gradient text clip is expensive to raster */
}
.crt {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;   /* no blend mode: plain alpha is ~free to composite */
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%);
}
.crt::after {
  content: ""; position: absolute; inset: 0; height: 16%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.022), transparent);
  animation: roll 8s linear infinite;
}
@keyframes roll { from { transform: translateY(-120%); } to { transform: translateY(720%); } }
.grain {
  position: fixed; inset: -6%; z-index: 49; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}   /* static on purpose: this page must stay cheap on weak phones (it is the first thing everyone sees) */

.stage {
  position: relative; z-index: 10; min-height: 100dvh;
  display: grid; place-items: center; padding: 28px 16px 72px;
}

/* ---------- BIOS POST shell (challenge) ---------- */
.post {
  width: min(720px, 100%);
  border: 1px solid #514a54;
  box-shadow: 0 0 0 4px #0c0a0e, 0 0 0 5px #211b23, 22px 22px 0 rgba(0,0,0,.28), 0 0 90px rgba(118,82,129,.12);
  background: #0a080d;
  animation: power-on .9s var(--ease) both;
}
@keyframes power-on {
  0% { opacity: 0; transform: scale(.55, .006); filter: brightness(3); }
  45% { opacity: 1; transform: scale(1, .012); filter: brightness(2.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
.post__bar {
  display: flex; justify-content: space-between; gap: 16px; padding: 7px 10px;
  color: #c8c2ca; background: #17121a; font: 10px/1.1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase;
}
.post__word {
  overflow: hidden; padding: 8px 16px 0; text-align: center; color: var(--ink);
  font: 400 clamp(96px, 22vw, 210px)/.85 var(--font-display); letter-spacing: .03em;
  text-shadow: 6px 6px 0 var(--accent-dark), 0 0 40px rgba(166,123,176,.25);
  animation: glitch 6s steps(1, end) infinite;
}
@keyframes glitch {
  0%, 92%, 100% { transform: none; }
  93% { transform: translateX(-4px); text-shadow: 6px 6px 0 var(--accent-dark), -5px 0 0 rgba(255,60,90,.55), 5px 0 0 rgba(60,220,255,.5); }
  95% { transform: translateX(5px) skewX(-4deg); text-shadow: 6px 6px 0 var(--accent-dark), 5px 0 0 rgba(255,60,90,.55), -5px 0 0 rgba(60,220,255,.5); }
  97% { transform: translateX(-2px); }
}
.post__row {
  display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start;
  padding: 18px clamp(16px, 6vw, 52px) 6px; border-top: 1px solid #2a242d;
}
.log { min-height: 9.3em; margin: 0; color: #bdb7c0; font: 13px/1.55 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.log .ok { color: var(--ok); } .log .warn { color: var(--warn); } .log .bad { color: var(--bad); } .log .dim { color: var(--dim); }
.log .cursor { display: inline-block; width: .6em; height: 1.05em; vertical-align: -2px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.spinner { position: relative; width: 22px; height: 22px; margin-top: 3px; transition: opacity .4s var(--ease); }
.spinner i {
  position: absolute; left: 10px; top: 0; width: 2px; height: 6px; border-radius: 1px; background: var(--ink);
  transform-origin: 1px 11px; opacity: .15; animation: blade .8s linear infinite;
}
.spinner i:nth-child(1) { transform: rotate(0deg); animation-delay: -.8s; }
.spinner i:nth-child(2) { transform: rotate(45deg); animation-delay: -.7s; }
.spinner i:nth-child(3) { transform: rotate(90deg); animation-delay: -.6s; }
.spinner i:nth-child(4) { transform: rotate(135deg); animation-delay: -.5s; }
.spinner i:nth-child(5) { transform: rotate(180deg); animation-delay: -.4s; }
.spinner i:nth-child(6) { transform: rotate(225deg); animation-delay: -.3s; }
.spinner i:nth-child(7) { transform: rotate(270deg); animation-delay: -.2s; }
.spinner i:nth-child(8) { transform: rotate(315deg); animation-delay: -.1s; }
@keyframes blade { from { opacity: 1; } to { opacity: .15; } }
.done .spinner { opacity: 0; }

.meter { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 6px clamp(16px, 6vw, 52px) 4px; }
.meter__bar {
  position: relative; height: 16px; overflow: hidden;
  border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); background: #050406;
}
.meter__bar i {
  position: absolute; inset: 1px auto 1px 1px; width: calc((100% - 2px) * var(--p, 0));
  background: repeating-linear-gradient(90deg, var(--accent-hi) 0 9px, transparent 9px 11px);
  transition: width .25s var(--ease);
}
.meter__pct { min-width: 4ch; color: var(--muted); font-size: 12px; text-align: right; }
.post__note { margin: 10px clamp(16px, 6vw, 52px) 16px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.post__note b { color: var(--ink); font-weight: 400; }
/* blinkie banner (from the card's SpaceHey loot): 2x, crisp pixels */
.badge { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 2px clamp(16px, 6vw, 52px) 16px; }
.badge img { width: 300px; height: 40px; image-rendering: pixelated; border: 1px solid #2a242d; box-shadow: 4px 4px 0 rgba(57,37,64,.6); }
.badge span { color: var(--dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.badge--left { justify-content: flex-start; margin: 0 0 14px; }
@media (max-width: 420px) { .badge img { width: 225px; height: 30px; } }
.retry {
  margin: 0 clamp(16px, 6vw, 52px) 16px;
}

/* ---------- Win9x window (vpn / 429 / human / panel) ---------- */
.win {
  position: relative; width: min(560px, 100%);
  background: var(--face); color: #100e11;
  border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #fff, var(--lift);
  animation: rise .9s var(--ease) both;
}
.win::after {                /* double bezel: hairline outer tray */
  content: ""; position: absolute; inset: -7px; z-index: -1; pointer-events: none;
  border: 1px solid rgba(166,123,176,.45); background: rgba(118,82,129,.08);
}
@keyframes rise { from { opacity: 0; transform: perspective(1400px) translate3d(0, 42px, 0) rotateX(12deg) scale(.96); filter: blur(9px); } }
.win .title {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 23px; padding: 3px 4px 3px 8px; color: #fff; font: 700 13px/1 var(--font-ui);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px), linear-gradient(90deg, #6d447d, #38233f 52%, #17131a);
}
.win .title::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(166,123,176,.28), transparent);
  transform: translateX(-120%); animation: sheen 5.5s var(--ease) infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
.win .btns { display: flex; gap: 2px; }
.win .btns span {
  width: 19px; height: 17px; display: grid; place-items: center;
  border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
  background: var(--face); color: #100e11; font: 800 11px/1 var(--font-mono);
}
.win .body {
  margin: 3px; padding: 16px 18px 18px;
  border: 2px solid; border-color: var(--shadow) var(--hi) var(--hi) var(--shadow);
  background: #09070b; color: var(--ink);
  box-shadow: inset 0 0 36px rgba(118, 82, 129, .13);
}
.win h1, .win h2 { margin: 0 0 10px; font: 700 clamp(19px, 4.6vw, 24px)/1.2 var(--font-ui); letter-spacing: .01em; }
.win p { margin: 0 0 12px; color: #cfc9d2; line-height: 1.6; }
.win .fine { color: var(--dim); font-size: 11.5px; margin: 14px 0 0; }

.kicker {
  display: inline-block; margin-bottom: 12px; padding: 3px 9px;
  border: 1px solid rgba(166,123,176,.5); color: var(--accent-hi);
  font: 10px/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
}
.term {
  margin: 4px 0 14px; padding: 10px 12px;
  border: 1px solid #2a242d; background: #050406; color: #bdb7c0;
  font: 12px/1.6 var(--font-mono); white-space: pre-wrap;
}
.term .ok { color: var(--ok); } .term .warn { color: var(--warn); } .term .bad { color: var(--bad); } .term .dim { color: var(--dim); }
.steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; margin: 0 0 8px; padding-left: 30px; color: #cfc9d2; line-height: 1.5; }
.steps li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--accent-dark); color: var(--ink); font: 700 11px/1 var(--font-ui);
  box-shadow: 2px 2px 0 #050406;
}

/* buttons: bevel + "island" trailing icon */
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 5px 6px 5px 14px;
  border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
  background: linear-gradient(180deg, #d6d1d7, var(--face)); color: #100e11;
  font: 700 13px/1 var(--font-ui); text-decoration: none; cursor: pointer;
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #fff;
  transition: transform .35s var(--ease-snap), filter .35s var(--ease);
}
.btn i {
  width: 24px; height: 24px; display: grid; place-items: center; font-style: normal;
  background: #100e11; color: var(--ink); transition: transform .45s var(--ease-snap);
}
.btn:hover { filter: brightness(1.06); }
.btn:hover i { transform: translate(2px, -1px) scale(1.06); }
.btn:active { transform: translate(1px, 1px) scale(.98); border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); }
.btn--ghost { background: transparent; color: var(--muted); border-color: #3a333d; box-shadow: none; padding-right: 14px; font-weight: 400; }
.btn--ghost:hover { color: var(--ink); border-color: var(--accent); filter: none; }

/* human.exe — hold-to-confirm */
.human { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5,4,6,.62); backdrop-filter: blur(6px); }
.human[hidden] { display: none; }
.human .win { width: min(430px, 100%); }
.human__cat { float: right; margin: 0 0 6px 12px; color: var(--accent-hi); font: 13px/1.15 var(--font-mono); }
.hold {
  position: relative; overflow: hidden; width: 100%; min-height: 52px; margin: 6px 0 8px;
  border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
  background: var(--face); color: #100e11; font: 700 15px/1 var(--font-ui); letter-spacing: .04em;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #fff;
}
.hold__fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--h, 0));
  background: repeating-linear-gradient(90deg, var(--accent-hi) 0 9px, var(--accent) 9px 11px);
}
.hold__label { position: relative; }
.hold.holding { border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); }
.hold.passed { background: var(--ok); }
.hint { color: var(--dim); font-size: 11px; text-align: center; }

/* taskbar strip (vpn / 429) */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 34px;
  display: flex; align-items: center; gap: 6px; padding: 3px 4px;
  background: var(--face); border-top: 2px solid var(--hi); box-shadow: 0 -1px 0 #dcd7dd inset;
  font: 700 12px/1 var(--font-ui); color: #100e11;
}
.taskbar span {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 2px solid; border-color: var(--hi) var(--shadow) var(--shadow) var(--hi);
}
.taskbar .on { border-color: var(--shadow) var(--hi) var(--hi) var(--shadow); background: repeating-conic-gradient(#c9c5ca 0 25%, #bdb9be 0 50%) 0 0/2px 2px; }
.taskbar .clock { margin-left: auto; font: 12px var(--font-mono); border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.marquee {
  position: fixed; left: 0; right: 0; bottom: 34px; z-index: 19; overflow: hidden; height: 22px;
  border-top: 1px solid #2a242d; background: rgba(10,8,13,.85); color: var(--dim); font: 10px/22px var(--font-mono); letter-spacing: .16em; white-space: nowrap;
}
.marquee div { display: inline-block; padding-left: 100%; animation: ticker 38s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

noscript .win { margin: 0 auto; }

@media (max-width: 560px) {
  .post__bar span:last-child { display: none; }
  .post__row { grid-template-columns: 1fr; gap: 6px; }
  .spinner { display: none; }
  .log { font-size: 12px; min-height: 10.5em; }
  .win .body { padding: 14px 14px 16px; }
  .btn { width: 100%; justify-content: space-between; }
  .taskbar span:not(.on):not(.clock) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee div { padding-left: 0; }
}