:root {
  --bg: #07020f;
  --ink: #f4ecff;
  --dim: #a99bc4;
  --pink: #ff2bd6;
  --cyan: #00f0ff;
  --yellow: #ffe14d;
  --orange: #ff7a3d;
  --violet: #7b2bff;
  --display: 'Unbounded', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.fine, body.fine * { cursor: none !important; }
::selection { background: var(--pink); color: #000; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- layers ---------- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#bg.nogl { background: radial-gradient(circle at 30% 30%, #3a0a5e, transparent 60%), radial-gradient(circle at 70% 70%, #0a3a5e, transparent 60%), var(--bg); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; mix-blend-mode: screen; }
#fluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; display: block; }
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .8s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); }
  60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); }
}
#app { position: relative; z-index: 10; }

/* 3D mode: scene.js owns the background, the name, the sun and the section titles */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
body.three #bg, body.three .sun, body.three .sun-glow, body.three .grid-floor { display: none; }
body.three #name { transform: none !important; }
body.three #name .ch-in { animation: none !important; opacity: 0 !important; }
body.three .title { -webkit-text-stroke-color: rgba(244, 236, 255, .14); }
body.three .title::after { display: none; }

/* ---------- cursor ---------- */
#cursor-dot, #cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 90; display: none; border-radius: 50%; }
body.fine #cursor-dot, body.fine #cursor-ring { display: block; }
#cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--pink); }
#cursor-ring {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--cyan);
  mix-blend-mode: difference; transition: width .25s, height .25s, margin .25s, border-color .25s, background .25s;
}
#cursor-ring.hover { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-color: var(--pink); background: rgba(255, 43, 214, .15); }
#cursor-ring.down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

#progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 95;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow), var(--cyan));
  background-size: 200% 100%; animation: shine 2s linear infinite; box-shadow: 0 0 14px var(--pink);
}

/* ---------- boot ---------- */
#boot {
  position: fixed; inset: 0; z-index: 100; background: #000; color: #7cff9b;
  font-family: var(--mono); font-size: clamp(.72rem, 1.6vw, .95rem); line-height: 1.7;
  padding: 24px; display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: circle(150% at 50% 50%); transition: clip-path .8s cubic-bezier(.7, 0, .3, 1);
}
#boot.done { clip-path: circle(0% at 50% 50%); }
.boot-log p { white-space: pre-wrap; text-shadow: 0 0 8px rgba(124, 255, 155, .6); }
.boot-log .ok { color: var(--cyan); }
.boot-log .fail { color: var(--pink); }
.boot-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.boot-bar { flex: 1; height: 8px; background: #111; overflow: hidden; border: 1px solid #222; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow)); box-shadow: 0 0 20px var(--pink); }
.boot-pct { min-width: 9ch; text-align: right; font-weight: 700; color: #fff; }
.boot-skip { margin-top: 10px; opacity: .4; font-size: .75em; }

/* ---------- hud ---------- */
#hud { position: fixed; top: 14px; right: 16px; left: 16px; z-index: 80; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none; }
#hud .pill { pointer-events: auto; }
.pill {
  font-family: var(--mono); font-size: .72rem; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 0, 30, .55); backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s;
}
.pill:hover { background: rgba(255, 43, 214, .25); border-color: var(--pink); }

/* ---------- hero ---------- */
#hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 90px 16px 70px; perspective: 900px;
}
.sun {
  position: absolute; left: 50%; top: 50%; width: min(72vw, 560px); aspect-ratio: 1; z-index: -1;
  border-radius: 50%; translate: -50% -50%; opacity: .55;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--orange) 35%, var(--pink) 68%, var(--violet) 100%);
  -webkit-mask-image: linear-gradient(#000 52%, transparent 52%), repeating-linear-gradient(#000 0 12px, transparent 12px 20px);
  mask-image: linear-gradient(#000 52%, transparent 52%), repeating-linear-gradient(#000 0 12px, transparent 12px 20px);
  animation: sunpulse 5s ease-in-out infinite;
}
.sun-glow {
  position: absolute; left: 50%; top: 50%; width: min(110vw, 900px); aspect-ratio: 1; z-index: -2; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 43, 214, .35), rgba(123, 43, 255, .15) 40%, transparent 65%);
  animation: sunpulse 5s ease-in-out infinite reverse;
}
@keyframes sunpulse { 50% { scale: 1.06; } }
.grid-floor {
  position: absolute; left: -50%; right: -50%; bottom: -2%; height: 48%; z-index: -1; opacity: .55;
  background-image: linear-gradient(var(--pink) 2px, transparent 2px), linear-gradient(90deg, var(--pink) 2px, transparent 2px);
  background-size: 64px 64px; transform: perspective(320px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 95%); mask-image: linear-gradient(to top, #000 30%, transparent 95%);
  animation: floor 1.2s linear infinite;
}
@keyframes floor { to { background-position: 0 64px; } }

.kicker, .role, .hint, .cta { opacity: 0; transition: opacity 1s ease 1.2s, translate 1s cubic-bezier(.2, 1, .3, 1) 1.2s; translate: 0 20px; }
body.ready .kicker, body.ready .role, body.ready .hint, body.ready .cta { opacity: 1; translate: 0 0; }
.kicker { color: var(--cyan); font-size: .85rem; letter-spacing: .15em; margin-bottom: 18px; }

#name {
  font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 10vw, 10.5rem);
  line-height: .92; letter-spacing: -.02em; display: flex; flex-direction: column; align-items: center;
  user-select: none; will-change: transform;
}
.line { display: block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }
.ch-in {
  display: inline-block; opacity: 0; color: transparent;
  background: linear-gradient(120deg, #fff 0%, var(--cyan) 25%, #fff 50%, var(--pink) 75%, #fff 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(0, 240, 255, .4));
}
body.ready .ch-in {
  animation: drop 1.2s cubic-bezier(.2, 1.5, .35, 1) both, shine 5s linear infinite;
  animation-delay: calc(var(--i) * 60ms), calc(var(--i) * -180ms);
}
@keyframes drop {
  from { opacity: 0; transform: translate3d(var(--dx), -160px, 300px) rotate(var(--r)) scale(2.4); filter: blur(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes shine { to { background-position: -300% 0; } }

#name.glitch { animation: glitch .38s steps(1) both; }
@keyframes glitch {
  0% { filter: drop-shadow(7px 0 var(--pink)) drop-shadow(-7px 0 var(--cyan)); clip-path: inset(8% 0 55% 0); translate: -12px 0; }
  20% { filter: drop-shadow(-9px 0 var(--pink)) drop-shadow(9px 0 var(--cyan)); clip-path: inset(60% 0 5% 0); translate: 14px 0; }
  40% { filter: drop-shadow(5px 0 var(--yellow)) drop-shadow(-5px 0 var(--cyan)); clip-path: inset(30% 0 30% 0); translate: -6px 0; }
  60% { filter: drop-shadow(-4px 0 var(--pink)); clip-path: inset(0 0 75% 0); translate: 8px 0; }
  80% { filter: drop-shadow(3px 0 var(--cyan)); clip-path: inset(45% 0 20% 0); translate: -3px 0; }
  100% { filter: none; clip-path: none; translate: 0 0; }
}

.role { margin-top: 26px; font-size: clamp(.9rem, 2.2vw, 1.25rem); color: var(--ink); min-height: 1.6em; }
.role .dud { color: var(--pink); }
.caret { animation: blink 1s steps(1) infinite; color: var(--cyan); }
@keyframes blink { 50% { opacity: 0; } }
.cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.hint { margin-top: 34px; font-size: .75rem; color: var(--dim); letter-spacing: .1em; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px; border: 2px solid var(--cyan); color: var(--ink); text-decoration: none;
  background: rgba(0, 240, 255, .08);
  box-shadow: 0 0 22px rgba(0, 240, 255, .35), inset 0 0 22px rgba(0, 240, 255, .15);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background .3s;
}
.btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn:hover::before { left: 130%; }
.btn:hover { background: rgba(0, 240, 255, .2); box-shadow: 0 0 40px rgba(0, 240, 255, .7), inset 0 0 30px rgba(0, 240, 255, .3); }
.btn-danger { border-color: var(--pink); background: rgba(255, 43, 214, .1); box-shadow: 0 0 22px rgba(255, 43, 214, .4), inset 0 0 22px rgba(255, 43, 214, .15); }
.btn-danger:hover { background: rgba(255, 43, 214, .25); box-shadow: 0 0 44px rgba(255, 43, 214, .8), inset 0 0 30px rgba(255, 43, 214, .3); }
.btn-big { font-size: clamp(.9rem, 2.4vw, 1.3rem); padding: 22px 42px; }
.btn-isaac { border-color: #ff3b3b; background: rgba(255, 59, 59, .12); box-shadow: 0 0 22px rgba(255, 59, 59, .45), inset 0 0 22px rgba(255, 59, 59, .15); }
.btn-isaac:hover { background: rgba(255, 59, 59, .28); box-shadow: 0 0 44px rgba(255, 59, 59, .85), inset 0 0 30px rgba(255, 59, 59, .3); }
.cta-break { flex-basis: 100%; height: 0; margin: -8px 0; }
.btn-egg { border-color: #fff2c2; background: rgba(255, 242, 194, .1); box-shadow: 0 0 22px rgba(255, 225, 77, .4), inset 0 0 22px rgba(255, 242, 194, .12); }
.btn-egg:hover { background: rgba(255, 242, 194, .25); box-shadow: 0 0 44px rgba(255, 225, 77, .8), inset 0 0 30px rgba(255, 242, 194, .25); }

/* ---------- bands ---------- */
.bands { position: relative; height: 200px; overflow: hidden; z-index: 5; }
.band {
  position: absolute; left: -10%; width: 120%; top: 50%; padding: 14px 0; overflow: hidden;
  font-family: var(--display); font-weight: 900; font-size: clamp(1.1rem, 3vw, 2rem); text-transform: uppercase; white-space: nowrap;
}
.band-a { background: var(--yellow); color: #0b0016; transform: translateY(-50%) rotate(-4deg); box-shadow: 0 0 40px rgba(255, 225, 77, .5); }
.band-b { background: var(--pink); color: #fff; transform: translateY(-50%) rotate(3.5deg); box-shadow: 0 0 40px rgba(255, 43, 214, .6); }
.track { display: inline-flex; animation: marquee 22s linear infinite; }
.track span { padding-right: .6em; }
.band-b .track { animation-direction: reverse; animation-duration: 18s; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { position: relative; padding: 120px 16px; max-width: 1200px; margin: 0 auto; }
.skew { will-change: transform; }
.label { color: var(--cyan); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.title {
  position: relative; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 12vw, 9rem);
  line-height: .95; color: transparent; -webkit-text-stroke: 2px rgba(244, 236, 255, .85);
  margin-bottom: 56px; white-space: nowrap;
}
.title::after {
  content: attr(data-text); position: absolute; inset: 0; -webkit-text-stroke: 0;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--cyan)); -webkit-background-clip: text; background-clip: text;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1) .5s;
}
.title.in::after { clip-path: inset(0 0 0 0); }
.title .dud { color: var(--pink); -webkit-text-stroke: 0; }
.sub { color: var(--dim); max-width: 60ch; margin: -30px 0 40px; line-height: 1.7; }

.reveal { opacity: 0; transform: translateY(50px) scale(.96); filter: blur(10px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, 1, .3, 1), filter .9s ease; }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- cards ---------- */
.tilt-wrap { perspective: 1000px; }
.card {
  position: relative; height: 100%; border-radius: 24px; padding: 34px; overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-style: preserve-3d; transition: transform .2s ease-out, border-color .3s, box-shadow .3s;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.card:hover { border-color: rgba(255, 43, 214, .6); box-shadow: 0 30px 80px rgba(255, 43, 214, .25); }
.holo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
  background:
    radial-gradient(circle at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%), rgba(255, 255, 255, .55), transparent 45%),
    conic-gradient(from calc(var(--px, .5) * 540deg) at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%), var(--pink), var(--cyan), var(--yellow), var(--violet), var(--pink));
}
.card:hover .holo { opacity: .45; }
.card h3 { font-family: var(--display); font-size: 1.5rem; margin: 18px 0 14px; transform: translateZ(40px); }
.card p { color: var(--dim); line-height: 1.75; margin-bottom: 12px; transform: translateZ(20px); }

.about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; position: relative; transform: translateZ(60px);
  font-family: var(--display); font-weight: 900; font-size: 1.8rem;
}
.avatar::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 4px;
  background: conic-gradient(var(--pink), var(--cyan), var(--yellow), var(--violet), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat .card { padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; }
.stat b {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); transform: translateZ(50px);
  background: linear-gradient(90deg, var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { color: var(--dim); font-size: .8rem; margin-top: 6px; transform: translateZ(25px); }

/* ---------- sphere ---------- */
#sphere { position: relative; width: min(600px, 92vw); aspect-ratio: 1; margin: 0 auto; }
#sphere::before {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, .35), rgba(123, 43, 255, .2) 45%, transparent 70%);
  filter: blur(10px); animation: sunpulse 3s ease-in-out infinite;
}
#sphere::after {
  content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(255, 43, 214, .35);
  animation: orbit 14s linear infinite;
}
@keyframes orbit { from { transform: rotateX(70deg) rotateZ(0); } to { transform: rotateX(70deg) rotateZ(360deg); } }
.tag {
  position: absolute; left: 50%; top: 50%; white-space: nowrap; will-change: transform, opacity;
  font-family: var(--display); font-weight: 700; font-size: clamp(.62rem, 1.5vw, .95rem);
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 0, 30, .55);
  transition: background .2s, color .2s, border-color .2s;
}
.tag:hover { background: var(--pink); color: #000; border-color: var(--pink); }

/* ---------- work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project { min-height: 300px; display: flex; flex-direction: column; }
.project .num { font-family: var(--display); font-weight: 900; font-size: 3.6rem; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); transform: translateZ(30px); line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; transform: translateZ(30px); }
.chips i { font-style: normal; font-size: .72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cyan); color: var(--cyan); }
.status { position: absolute; top: 28px; right: 28px; font-size: .7rem; color: var(--yellow); letter-spacing: .1em; text-transform: uppercase; transform: translateZ(40px); }
.status::before { content: '● '; animation: blink 1s steps(1) infinite; }

/* ---------- live ---------- */
.hud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile {
  position: relative; padding: 24px; border-radius: 16px; overflow: hidden;
  background: rgba(5, 0, 18, .6); border: 1px solid rgba(0, 240, 255, .3); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 30px rgba(0, 240, 255, .08);
}
.tile::after {
  content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%;
  background: linear-gradient(transparent, rgba(0, 240, 255, .12), transparent); animation: scan 3s linear infinite;
}
@keyframes scan { to { top: 130%; } }
.tile span { display: block; font-size: .72rem; color: var(--dim); letter-spacing: .15em; text-transform: uppercase; }
.tile b { display: block; margin-top: 10px; font-size: clamp(1.4rem, 3.4vw, 2.2rem); color: var(--cyan); text-shadow: 0 0 18px rgba(0, 240, 255, .7); font-variant-numeric: tabular-nums; }
.useless b { color: var(--pink); text-shadow: 0 0 18px rgba(255, 43, 214, .7); }
.meter { height: 6px; margin-top: 12px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--pink); transition: width .2s; }

/* ---------- contact ---------- */
.flee-zone { position: relative; height: 300px; display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, .15); border-radius: 24px; margin-bottom: 40px; }
#flee { transition: transform .35s cubic-bezier(.3, 1.6, .4, 1), box-shadow .3s, background .3s; }
.socials { display: flex; gap: 28px; flex-wrap: wrap; }
.socials a { display: inline-block; color: var(--ink); font-family: var(--display); font-weight: 700; text-decoration: none; font-size: 1.1rem; border-bottom: 2px solid var(--pink); padding-bottom: 4px; transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s; }
.socials a:hover { color: var(--pink); }

footer { position: relative; text-align: center; padding: 60px 16px 80px; font-size: .8rem; line-height: 2; }
footer .dim { color: var(--dim); }

/* ---------- modes ---------- */
body.disco #app { animation: disco .9s linear infinite; }

/* ABACABB */
.overkill {
  position: fixed; inset: 0; z-index: 85; pointer-events: none; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, rgba(255, 0, 60, .35), transparent 70%);
  animation: ok-bg 4.2s ease forwards;
}
.overkill b {
  position: relative; display: block; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 16vw, 14rem); line-height: 1;
  color: #fff; letter-spacing: -.03em;
  text-shadow: 0 0 30px #ff2b2b, 0 0 80px #ff2bd6, 6px 0 0 var(--cyan), -6px 0 0 var(--pink);
  animation: ok-slam 4.2s cubic-bezier(.2, 1.6, .3, 1) forwards, ok-jitter .08s steps(2) infinite;
}
.overkill span { margin-top: 18px; font-size: clamp(.75rem, 2vw, 1rem); letter-spacing: .3em; text-transform: uppercase; color: var(--yellow); animation: ok-bg 4.2s ease forwards; }
@keyframes ok-slam {
  0% { transform: scale(6) rotate(-12deg); opacity: 0; filter: blur(20px); }
  12% { transform: scale(1) rotate(-4deg); opacity: 1; filter: none; }
  80% { transform: scale(1.08) rotate(-4deg); opacity: 1; }
  100% { transform: scale(.6) rotate(10deg); opacity: 0; filter: blur(10px); }
}
@keyframes ok-jitter { 50% { translate: 3px -2px; } }
@keyframes ok-bg { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes disco { to { filter: hue-rotate(360deg) saturate(1.6); } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .about-grid, .work-grid { grid-template-columns: 1fr; }
  .hud-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 90px 16px; }
  .card { padding: 26px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .hud-grid { grid-template-columns: 1fr; }
  .pill { font-size: .65rem; padding: 6px 10px; }
  .title { -webkit-text-stroke-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .grid-floor, .sun, .sun-glow, .tile::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   RETRO — 1998 to 2007, lovingly over-rendered
   ===================================================================== */

/* ---------- Windows 98 chrome ---------- */
.w98 {
  background: #c0c0c0; color: #000; font: 12px/1.45 Tahoma, 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
  border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf, 4px 4px 0 rgba(0, 0, 0, .35);
}
.w98-title {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700;
}
.w98-x, .w98-btn {
  background: #c0c0c0; color: #000; font: inherit; border: 2px solid; border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #808080; cursor: pointer;
}
.w98-x { width: 18px; height: 16px; line-height: 10px; padding: 0; font-weight: 700; }
.w98-btn { padding: 4px 14px; min-width: 75px; }
.w98-btn:active, .w98-x:active { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px #808080; }
.w98-body { padding: 14px 16px; }
.w98-body p + p { margin-top: 6px; }
.w98-actions { display: flex; gap: 8px; justify-content: center; padding: 0 12px 12px; flex-wrap: wrap; }
.dialog { position: fixed; z-index: 96; left: 50%; top: 40%; translate: -50% -50%; width: min(360px, calc(100vw - 32px)); animation: pop .25s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { scale: .6; opacity: 0; } }
.toast { position: fixed; z-index: 97; top: 64px; left: 50%; translate: -50% 0; min-width: 240px; max-width: calc(100vw - 32px); animation: pop .25s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .4s, translate .4s; }
.toast.out { opacity: 0; translate: -50% -20px; }

/* ---------- screensaver ---------- */
.saver { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .92); animation: fadein .6s; transition: opacity .4s; }
.saver.out { opacity: 0; }
@keyframes fadein { from { opacity: 0; } }
.saver-logo {
  --h: 280; position: absolute; left: 0; top: 0; padding: 14px 34px; border-radius: 50%; text-align: center; line-height: 1;
  color: hsl(var(--h) 100% 60%); border: 4px solid currentColor; box-shadow: 0 0 30px currentColor;
  transition: color .2s;
}
.saver-logo b { display: block; font: 900 46px/1 var(--display); font-style: italic; letter-spacing: -.04em; }
.saver-logo span { display: block; margin-top: 4px; font: 700 10px var(--mono); letter-spacing: .3em; }
.saver-hint { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: #555; font-size: .75rem; }
.saver-corner {
  position: absolute; left: 50%; top: 45%; translate: -50% -50%; white-space: nowrap;
  font: 900 clamp(1.6rem, 6vw, 4rem) var(--display); color: #fff; text-shadow: 0 0 30px var(--pink), 0 0 60px var(--cyan);
  animation: ok-slam 2.6s cubic-bezier(.2, 1.6, .3, 1) forwards;
}

/* ---------- bluescreen ---------- */
.bsod {
  position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 24px;
  background: #0000aa; color: #fff; font: clamp(13px, 1.8vw, 20px)/1.55 'Lucida Console', 'Courier New', monospace;
}
.bsod-inner { max-width: 780px; }
.bsod-tag { display: table; margin: 0 auto 28px; padding: 0 8px; background: #aaaaaa; color: #0000aa; font-weight: 700; }
.bsod p { margin-bottom: 22px; }
.bsod .c { text-align: center; }
.blink { animation: blink 1s steps(1) infinite; }

/* ---------- cheat effects ---------- */
body.god #app { filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.08); }
body.god #cursor-ring { border-color: gold; box-shadow: 0 0 20px gold; }
body.comic, body.comic * { font-family: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive !important; }
body.y2k #app { animation: y2k .12s steps(2) infinite; }
@keyframes y2k { 0% { filter: invert(1) hue-rotate(90deg); translate: -6px 3px; } 50% { filter: invert(0) contrast(3); translate: 5px -4px; } }
.y2k-count {
  position: fixed; inset: 0; z-index: 93; display: grid; place-items: center; text-align: center; pointer-events: none;
  font: 900 clamp(3rem, 14vw, 12rem)/1 var(--display); color: #fff; text-shadow: 0 0 40px var(--yellow), 0 0 80px var(--pink);
}
.money { position: fixed; top: -60px; z-index: 89; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(calc(100vh + 120px)) rotate(720deg); } }
.hadou {
  position: fixed; left: 0; top: 0; z-index: 88; width: 110px; height: 70px; margin: -35px 0 0 -55px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 65% 50%, #fff 0 18%, #8ff 30%, #08f 55%, transparent 70%);
  filter: drop-shadow(0 0 24px #0af) drop-shadow(0 0 50px #06f); animation: hadou .08s steps(2) infinite;
}
@keyframes hadou { 50% { scale: 1.12 .9; } }
.shout {
  position: fixed; left: 6vw; top: 30%; z-index: 88; pointer-events: none;
  font: italic 900 clamp(2.4rem, 9vw, 7rem) Impact, 'Arial Black', sans-serif; color: #fff; -webkit-text-stroke: 3px #06f;
  text-shadow: 0 0 30px #0af; animation: ok-slam 1.4s cubic-bezier(.2, 1.6, .3, 1) forwards;
}
.matrix { position: fixed; inset: 0; z-index: 93; width: 100%; height: 100%; background: #000; transition: opacity 1s; }
.matrix-msg {
  position: fixed; left: 8vw; top: 40%; z-index: 94; color: #00ff41; font: clamp(1.2rem, 3vw, 2rem) 'Courier New', monospace;
  text-shadow: 0 0 12px #00ff41; transition: opacity 1s; pointer-events: none;
}
.matrix.out, .matrix-msg.out { opacity: 0; }

/* ---------- live: extra tiles ---------- */
.tile small { display: block; margin-top: 6px; color: var(--dim); font-size: .7rem; }
.lime b { color: #7cff4a; text-shadow: 0 0 18px rgba(124, 255, 74, .7); }

.retro-foot span { border-bottom: 1px dotted var(--dim); }

/* ---------- flash layer (flash.js) ---------- */
html { scrollbar-color: var(--pink) var(--bg); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid var(--bg); background: linear-gradient(var(--pink), var(--yellow), var(--cyan), var(--violet)); box-shadow: 0 0 10px var(--pink); }

@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.flash-frame {
  position: fixed; inset: 0; z-index: 85; pointer-events: none; padding: 5px; opacity: .9;
  background: conic-gradient(from var(--fa), var(--pink), var(--yellow), var(--cyan), var(--violet), var(--pink));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: framespin 3s linear infinite; transition: padding .35s cubic-bezier(.2, 1.6, .4, 1);
}
.flash-frame.pulse { padding: 18px; }
@keyframes framespin { to { --fa: 360deg; } }

.starburst {
  position: absolute; z-index: 5; width: 96px; height: 96px; display: grid; place-items: center; padding: 14px; text-align: center;
  font: 900 .72rem/1.05 var(--display); color: #000; background: var(--yellow); pointer-events: none;
  clip-path: polygon(50% 0%, 61% 15%, 79% 7%, 82% 26%, 100% 32%, 89% 48%, 100% 65%, 82% 70%, 79% 90%, 61% 84%, 50% 100%, 39% 84%, 21% 90%, 18% 70%, 0% 65%, 11% 48%, 0% 32%, 18% 26%, 21% 7%, 39% 15%);
  animation: starspin 7s linear infinite, starpulse .45s steps(2) infinite; filter: drop-shadow(0 0 12px rgba(255, 225, 77, .7));
}
.starburst.alt { background: var(--pink); color: #fff; filter: drop-shadow(0 0 12px rgba(255, 43, 214, .8)); }
.starburst.alt2 { background: var(--cyan); filter: drop-shadow(0 0 12px rgba(0, 240, 255, .8)); }
@keyframes starspin { to { rotate: 360deg; } }
@keyframes starpulse { 50% { scale: 1.18; } }
@media (max-width: 700px) { .starburst { width: 70px; height: 70px; font-size: .55rem; } }

.lightning { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: #fff; opacity: 0; mix-blend-mode: screen; }
.lightning.zap { animation: zap .8s steps(1) forwards; }
@keyframes zap { 0% { opacity: .95; } 7% { opacity: 0; } 13% { opacity: .6; } 19% { opacity: 0; } 24% { opacity: 1; } 42% { opacity: 0; } 100% { opacity: 0; } }

.live-ticker {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: rgba(7, 2, 15, .75); border: 1px solid rgba(255, 43, 214, .5); font: 700 .68rem var(--mono); color: var(--ink);
  backdrop-filter: blur(6px); box-shadow: 0 0 18px rgba(255, 43, 214, .35); animation: slideup .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.live-ticker i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: blink .8s steps(1) infinite; }
.live-ticker b { color: var(--yellow); }
.live-ticker span { color: var(--dim); font-weight: 400; }
@media (max-width: 700px) { .live-ticker span { display: none; } }

/* MAX FLASH */
body.hyper #app { animation: disco 1.3s linear infinite; }
body.hyper .card, body.hyper .tile { animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
body.hyper .track { animation-duration: 5s !important; }
body.hyper .title { animation: titlestrobe .3s steps(2) infinite; }
@keyframes titlestrobe { 50% { filter: invert(1) hue-rotate(180deg) brightness(1.4); } }
body.hyper .btn, body.hyper .w98-btn { animation: btnstrobe .35s steps(2) infinite; }
@keyframes btnstrobe { 50% { background: var(--yellow); color: #000; border-color: #fff; } }
body.hyper .flash-frame { animation-duration: .6s; padding: 12px; }
body.hyper .starburst { animation-duration: 1.4s, .16s; }
body.hyper .label, body.hyper .kicker { animation: blink .5s steps(1) infinite; }
.parade { position: fixed; left: 0; right: 0; bottom: 0; z-index: 79; pointer-events: none; white-space: nowrap; font-size: 46px; line-height: 1.3; overflow: hidden; }
.parade span { display: inline-block; animation: paradewalk 9.8s linear infinite, bop .32s ease-in-out infinite alternate; }
@keyframes paradewalk { from { transform: translateX(100vw); } to { transform: translateX(-120px); } }
@keyframes bop { to { translate: 0 -14px; rotate: 10deg; } }

/* the Schwartz */
body.schwartz #cursor-ring { border-color: #39ff14; box-shadow: 0 0 24px #39ff14, inset 0 0 12px #39ff14; }
body.schwartz #cursor-dot { background: #39ff14; box-shadow: 0 0 16px #39ff14; }
body.schwartz #app { filter: hue-rotate(-60deg) saturate(1.4); }

/* ---------- phones: no horizontal scroll ---------- */
@media (max-width: 700px) {
  .section { overflow-x: clip; }
  .starburst[style*="right"] { right: 14px !important; }
  .starburst[style*="left:"] { left: 14px !important; }
}

/* ---------- earthbound party ---------- */
.eb-walk { position: fixed; left: 0; bottom: 64px; width: 100%; z-index: 45; pointer-events: none; image-rendering: pixelated; }

/* ---------- GB DOOM (doom.js) ---------- */
.doom-wrap { max-width: 800px; margin: 0 auto; }
.doom-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; background: #000; overflow: hidden; outline: none;
  border: 4px solid; border-color: #8a8a8a #2a2a2a #2a2a2a #8a8a8a; box-shadow: 0 0 0 2px #000, 0 0 40px rgba(255, 43, 214, .35), 0 30px 80px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.doom-frame:focus-visible { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--cyan); }
.doom-frame canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
.doom-frame.playing canvas, .doom-frame.playing .doom-touch { touch-action: none; }
.doom-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 6px; font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #cfcfcf;
  background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); pointer-events: none;
}
.doom-tag { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doom-bar-btns { display: flex; gap: 4px; pointer-events: auto; }
.doom-bar button { width: 30px; height: 26px; font-size: 14px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; cursor: pointer; }
.doom-bar button:hover { background: rgba(255, 43, 214, .55); border-color: var(--pink); }
.doom-overlay {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px;
  padding: 24px 16px; background: rgba(5, 0, 10, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.doom-overlay[hidden] { display: none; }
.doom-overlay h3 {
  font: 900 clamp(2rem, 7vw, 3.6rem)/1 var(--display); letter-spacing: .02em;
  color: #ff3b3b; text-shadow: 0 0 2px #000, 3px 3px 0 #5a0000, 0 0 30px rgba(255, 59, 59, .7);
}
.doom-overlay h3.doom-red { color: #ff1a1a; animation: doom-pulse 1.1s ease-in-out infinite alternate; }
@keyframes doom-pulse { to { text-shadow: 0 0 2px #000, 3px 3px 0 #5a0000, 0 0 60px rgba(255, 0, 0, 1); } }
.doom-sub { color: #e8dcff; font-size: .85rem; margin: 0; }
.doom-hint { color: var(--dim); font-size: .68rem; line-height: 1.6; margin-top: 4px; max-width: 46ch; }
.doom-stats { font: 700 .95rem var(--mono); color: #fff; letter-spacing: .06em; }
.doom-stats b { color: var(--yellow); }
.doom-btn {
  display: inline-block; margin: 4px 2px 0; padding: 12px 22px; font: 700 .9rem var(--display); color: #fff; text-decoration: none; cursor: pointer;
  background: #a3121c; border: 3px solid; border-color: #ff6a6a #5a0000 #5a0000 #ff6a6a; box-shadow: 0 0 20px rgba(255, 59, 59, .5); text-transform: uppercase; letter-spacing: .06em;
}
.doom-btn:hover { background: #d81a27; }
.doom-btn:active { border-color: #5a0000 #ff6a6a #ff6a6a #5a0000; }
.doom-btn-dim { background: #3a3a3a; border-color: #8a8a8a #1a1a1a #1a1a1a #8a8a8a; box-shadow: none; }
.doom-btn-dim:hover { background: #555; }
.doom-foot { margin-top: 16px; text-align: center; color: var(--dim); font-size: .72rem; line-height: 1.7; }
.doom-foot code { color: var(--yellow); }

/* touch controls: shown on coarse pointers (or once a finger touches the frame) */
.doom-touch { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; }
@media (hover: none), (pointer: coarse) { .doom-frame.playing .doom-touch { display: block; } }
.doom-frame.playing.touch .doom-touch { display: block; }
.doom-stick {
  position: absolute; left: 22px; bottom: 56px; width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); opacity: .45; transition: opacity .15s;
}
.doom-stick.on { opacity: .9; }
.doom-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 14px rgba(0, 240, 255, .6); }
.doom-fire {
  position: absolute; right: 22px; bottom: 64px; width: 86px; height: 86px; border-radius: 50%; pointer-events: auto; cursor: pointer;
  font: 900 15px var(--display); color: #fff; letter-spacing: .06em; background: rgba(255, 43, 214, .35); border: 3px solid var(--pink); box-shadow: 0 0 24px rgba(255, 43, 214, .6);
}
.doom-fire:active { background: rgba(255, 43, 214, .8); transform: scale(.94); }

/* fullscreen: real (top layer) or fake (pinned to the viewport on iPhone) */
.doom-frame:fullscreen, .doom-frame:-webkit-full-screen, .doom-frame.fake-full { width: 100%; height: 100%; aspect-ratio: auto; border: 0; box-shadow: none; background: #000; }
.doom-frame.fake-full { position: fixed; inset: 0; z-index: 95; }
.doom-frame:fullscreen canvas, .doom-frame:-webkit-full-screen canvas, .doom-frame.fake-full canvas { object-fit: contain; }
.doom-frame.is-full .doom-stick { bottom: 80px; left: 34px; }
.doom-frame.is-full .doom-fire { bottom: 90px; right: 34px; }
html.doom-fake-full, html.doom-fake-full body { overflow: hidden; }
@media (max-width: 700px) {
  .doom-bar { font-size: 9px; }
  .doom-overlay { gap: 6px; padding: 12px; }
  .doom-hint { font-size: .6rem; }
  .doom-btn { padding: 9px 14px; font-size: .75rem; }
  .doom-stick { width: 90px; height: 90px; left: 14px; bottom: 44px; }
  .doom-stick i { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .doom-fire { width: 70px; height: 70px; right: 14px; bottom: 50px; font-size: 12px; }
}

/* ---------- path tracer (trace.js) ---------- */
.trace { position: relative; max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px #000, 0 0 60px rgba(0, 240, 255, .25), 0 30px 80px rgba(0, 0, 0, .6); }
.trace canvas { display: block; width: 100%; aspect-ratio: 16 / 10; touch-action: pan-y; cursor: crosshair; }
.trace.nogl canvas { background: radial-gradient(circle at 30% 40%, #3a0a5e, #07020f 70%); }

/* ---------- The Binding of Isaac ---------- */
.isaac-corner { position: absolute; right: 24px; top: 150px; z-index: 5; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.isaac-sprite { position: relative; width: 100px; height: 100px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: isaac-bob 1.6s ease-in-out infinite; }
.isaac-sprite canvas { width: 100px; height: 100px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.isaac-sprite .tear { position: absolute; left: 36px; top: 42px; width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #7fd6ff; box-shadow: 0 0 6px #7fd6ff; animation: isaac-tear 1.1s linear infinite; }
.isaac-sprite .tear2 { left: 62px; animation-delay: .55s; }
@keyframes isaac-tear { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(70px) scale(1); opacity: 0; } }
@keyframes isaac-bob { 50% { transform: translateY(-4px); } }
.tile.isaac-tile b { color: #7fd6ff; text-shadow: 0 0 18px rgba(127, 214, 255, .8); }
.tile .h { display: inline-block; width: 11px; height: 10px; margin-right: 2px; vertical-align: -1px; background: #ff2020; clip-path: polygon(50% 100%, 0 40%, 0 20%, 15% 0, 35% 0, 50% 18%, 65% 0, 85% 0, 100% 20%, 100% 40%); filter: drop-shadow(0 0 3px rgba(255, 32, 32, .8)); }
.tile .h.s { background: #7fd6ff; filter: drop-shadow(0 0 3px rgba(127, 214, 255, .8)); }
@media (max-width: 900px) { .isaac-corner { position: static; margin: -30px 0 28px; justify-content: flex-start; } }

/* ---------- The Matrix: red pill / blue pill ---------- */
.pills { margin-top: 56px; padding: 28px; border: 1px dashed rgba(0, 255, 65, .35); border-radius: 18px; background: rgba(0, 20, 5, .35); }
.pills-q { font: 700 .95rem var(--display); color: #baffc9; margin-bottom: 18px; }
.pills-row { display: flex; gap: 18px; flex-wrap: wrap; }
.pill-choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .45); cursor: pointer; text-align: left; transition: transform .2s, box-shadow .2s; }
.pill-choice i { grid-row: 1 / 3; width: 54px; height: 24px; border-radius: 12px; background: linear-gradient(90deg, #d8e8ff 0 50%, #2a6bff 50% 100%); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .35), inset 0 4px 6px rgba(255, 255, 255, .5), 0 0 16px rgba(42, 107, 255, .7); }
.pill-red i { background: linear-gradient(90deg, #ffd6d6 0 50%, #e0101e 50% 100%); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .35), inset 0 4px 6px rgba(255, 255, 255, .5), 0 0 16px rgba(224, 16, 30, .8); }
.pill-choice span { font: 700 .95rem var(--display); color: var(--ink); }
.pill-choice small { font-size: .68rem; color: var(--dim); letter-spacing: .08em; }
.pill-blue:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(42, 107, 255, .45); border-color: #2a6bff; }
.pill-red:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(224, 16, 30, .5); border-color: #e0101e; }
.pills-hint { margin-top: 14px; font-size: .7rem; color: #5fbf78; letter-spacing: .08em; }
body.bluepill #app { filter: blur(3px) saturate(.4); transition: filter 1.5s; }
.dialog.redpill { border-color: #0f0; } .dialog.redpill .w98-body { font-family: 'Courier New', monospace; color: #0a0; }

/* ---------- cracktro / keygen (cracktro.js) ---------- */
.kg-wrap { max-width: 800px; margin: 0 auto; }
.kg { display: flex; flex-direction: column; width: 100%; color: #000; }
.kg-winbtns { display: flex; gap: 3px; }
.kg-winbtns .w98-x { width: auto; min-width: 18px; padding: 0 6px; font-weight: 700; font-size: 11px; line-height: 12px; white-space: nowrap; }
.kg-screen { position: relative; margin: 3px; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.kg-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.kg-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, .5); text-align: center; color: #fff; font: 12px/1.5 Tahoma, 'MS Sans Serif', sans-serif; text-shadow: 0 1px 0 #000; }
.kg-overlay[hidden] { display: none; }
.kg-start { font: 700 15px/1.2 Tahoma, sans-serif; padding: 10px 22px; box-shadow: inset -1px -1px #808080, 0 0 18px rgba(255, 225, 77, .4); animation: kgpulse 2s ease-in-out infinite alternate; }
@keyframes kgpulse { to { box-shadow: inset -1px -1px #808080, 0 0 28px rgba(255, 43, 214, .6); } }
.kg-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: center; padding: 6px 10px 10px; }
.kg-panel label { display: flex; align-items: center; gap: 8px; font: 12px Tahoma, 'MS Sans Serif', sans-serif; }
.kg-panel input { flex: 1; min-width: 0; padding: 3px 6px; font: 13px/1.3 'Courier New', monospace; color: #000; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; border-radius: 0; }
.kg-serial { font-weight: 700; letter-spacing: .06em; }
.kg.gen .kg-serial { color: #008000; }
.kg-btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.kg-btns .w98-btn { min-width: 0; padding: 4px 10px; }
.kg-status { grid-column: 1 / -1; margin: 0; padding: 3px 6px; font: 11px/1.4 'Courier New', monospace; color: #000080; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-foot { margin: 16px auto 0; max-width: 800px; text-align: center; color: var(--dim); font-size: .72rem; line-height: 1.7; }
.kg-foot code, #cracktro .sub code { color: var(--yellow); }
.kg:fullscreen, .kg:-webkit-full-screen, .kg.fake-full { width: 100%; height: 100%; background: #000; border: 0; box-shadow: none; }
.kg.fake-full { position: fixed; inset: 0; z-index: 95; }
.kg.is-full .kg-screen { flex: 1; min-height: 0; margin: 0; aspect-ratio: auto; border: 0; }
.kg.is-full .kg-canvas { object-fit: contain; }
.kg.is-full .w98-title, .kg.is-full .kg-panel { flex: none; }
.kg.is-full .kg-panel { background: #c0c0c0; }
@media (max-width: 700px) {
  .kg-panel { grid-template-columns: 1fr; }
  .kg .w98-title > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kg-btns .w98-btn { padding: 4px 7px; font-size: 11px; }
}

/* ---------- AI slop disclaimer + DOOM / keygen page buttons ---------- */
.btn-doom { border-color: #ff1a1a; background: rgba(120, 0, 0, .25); box-shadow: 0 0 22px rgba(255, 26, 26, .45), inset 0 0 22px rgba(255, 120, 0, .15); }
.btn-doom:hover { background: rgba(200, 20, 20, .35); box-shadow: 0 0 44px rgba(255, 60, 0, .85), inset 0 0 30px rgba(255, 120, 0, .3); }
.btn-keygen { border-color: #1084d0; background: rgba(0, 0, 128, .25); box-shadow: 0 0 22px rgba(16, 132, 208, .5), inset 0 0 22px rgba(16, 132, 208, .18); }
.btn-keygen:hover { background: rgba(16, 132, 208, .35); box-shadow: 0 0 44px rgba(16, 132, 208, .9), inset 0 0 30px rgba(16, 132, 208, .3); }
.slop {
  position: relative; z-index: 6; display: inline-block; max-width: 100%; margin: 0 auto 22px; padding: 4px 12px;
  font: .68rem/1.4 var(--mono); letter-spacing: .06em; color: var(--dim);
  border: 1px solid rgba(255, 225, 77, .35); border-radius: 999px; background: rgba(7, 2, 15, .55);
}
.slop b { color: var(--yellow); font-weight: 700; margin-right: 6px; text-transform: uppercase; }
.solo-link { color: var(--cyan); white-space: nowrap; }

/* ---------- code inside the hero letters (2D fallback; the chrome letters get it as a texture) ---------- */
.ch-in { position: relative; }
.ch-code {
  position: absolute; inset: 0; font-style: normal; color: transparent; pointer-events: none; filter: none;
  -webkit-background-clip: text; background-clip: text; background-repeat: repeat-y; background-size: 100% auto;
  animation: codescroll calc(var(--n, 20) * 1.1s) linear infinite;
}
@keyframes codescroll { to { background-position-y: calc(var(--cs, 100px) * -1); } }

/* ---------- experience cards (the WORK section lists jobs, not projects) ---------- */
.job { min-height: 220px; }
.job .num { font-size: 2.4rem; letter-spacing: .02em; white-space: nowrap; }
.job h3 { margin: 16px 0 6px; }
.job p { margin-bottom: 0; font-size: 1.05rem; }
@media (max-width: 700px) {
  .job .status { top: auto; bottom: 22px; right: 26px; }
}

/* ---------- CARL: floating, INCREDIBLY intense (flash.js moves it, splits the letters, spawns the ghosts and bangs) ---------- */
#carl, .carl-ghost {
  position: fixed; left: 0; top: 0; pointer-events: none; user-select: none;
  font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 6.6vw, 6.4rem); line-height: 1.02;
  text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; text-align: center; padding: .25em .45em;
  will-change: transform;
}
#carl { z-index: 84; transform: translate(50vw, 60vh) translate(-50%, -50%); perspective: 900px; filter: hue-rotate(var(--carl-hue, 0deg)); }
#carl.dash { filter: hue-rotate(var(--carl-hue, 0deg)) brightness(1.8) saturate(1.6); }
/* god rays */
#carl::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; z-index: -2; border-radius: 50%; translate: -50% -50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 7deg, rgba(255, 255, 255, .5) 7deg 10deg, rgba(255, 43, 214, 0) 10deg 16deg, rgba(0, 240, 255, .45) 16deg 19deg, rgba(255, 255, 255, 0) 19deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: carl-rays 2.2s linear infinite;
}
/* colour aura */
#carl::after {
  content: ''; position: absolute; inset: -25% -3%; z-index: -1; border-radius: 50%; opacity: .5;
  background: conic-gradient(from 0deg, var(--pink), var(--yellow), var(--cyan), #fff, var(--violet), var(--pink));
  filter: blur(30px) hue-rotate(0deg); animation: carl-aura 1s linear infinite, carl-breathe .3s ease-in-out infinite alternate;
}
.carl-txt { position: relative; display: block; transform-style: preserve-3d; animation: carl-tilt 1.1s ease-in-out infinite alternate, carl-flicker .18s steps(2) infinite; }
.carl-line { display: block; }
.cl {
  display: inline-block; white-space: pre; position: relative; will-change: transform; color: transparent;
  animation: carl-letter .42s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.055s);
}
.cl::before, .cl::after { content: attr(data-t); position: absolute; left: 0; top: 0; will-change: transform; }
/* ::before = a dark copy underneath carrying the red/cyan jitter ghosts and the 3D extrusion (a background always paints under it, so the gradient lives on ::after instead) */
.cl::before {
  color: #3a0040; -webkit-text-fill-color: #3a0040; -webkit-text-stroke: 0;
  text-shadow: -6px 1px 0 rgba(255, 0, 64, .9), 6px -1px 0 rgba(0, 240, 255, .9), 2px 2px 0 #5a0040, 4px 4px 0 #46003a, 6px 6px 0 #320030, 8px 8px 0 #1e0022, 10px 10px 0 #0a0014;
  animation: carl-ghost .13s steps(2) infinite; animation-delay: calc(var(--i) * -.03s);
}
/* ::after = the rainbow glyph on top */
.cl::after {
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--cyan), #fff, var(--violet), var(--pink)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .7);
  animation: carl-rainbow .45s linear infinite; animation-delay: calc(var(--i) * -.04s);
}
.carl-ghost { z-index: 83; color: hsl(var(--h, 310) 100% 65%); -webkit-text-stroke: 1px #fff; opacity: .55; animation: carl-fade .55s ease-out forwards; }
.carl-bang {
  position: fixed; inset: 0; z-index: 83; pointer-events: none;
  background: radial-gradient(circle 70vmax at var(--x, 50%) var(--y, 50%), #fff 0, hsl(var(--h, 310) 100% 60%) 12%, transparent 40%);
  animation: carl-bang .35s ease-out forwards;
}
@keyframes carl-rainbow { to { background-position: 300% 0; } }
@keyframes carl-letter { from { transform: translateY(-.12em) rotate(-9deg) scale(1); } to { transform: translateY(.12em) rotate(9deg) scale(1.22); } }
@keyframes carl-ghost {
  0% { text-shadow: -6px 1px 0 rgba(255, 0, 64, .9), 6px -1px 0 rgba(0, 240, 255, .9), 2px 2px 0 #5a0040, 4px 4px 0 #46003a, 6px 6px 0 #320030, 8px 8px 0 #1e0022, 10px 10px 0 #0a0014; }
  50% { text-shadow: 5px -3px 0 rgba(255, 0, 64, .9), -5px 3px 0 rgba(0, 240, 255, .9), 2px 2px 0 #5a0040, 4px 4px 0 #46003a, 6px 6px 0 #320030, 8px 8px 0 #1e0022, 10px 10px 0 #0a0014; }
}
@keyframes carl-tilt { from { transform: rotateX(14deg) rotateY(-18deg) rotate(-6deg) scale(1); } to { transform: rotateX(-14deg) rotateY(18deg) rotate(6deg) scale(1.12); } }
@keyframes carl-flicker { from { filter: brightness(1) contrast(1); } to { filter: brightness(1.6) contrast(1.15); } }
@keyframes carl-rays { to { rotate: 360deg; } }
@keyframes carl-aura { to { filter: blur(30px) hue-rotate(360deg); } }
@keyframes carl-breathe { from { opacity: .3; scale: .92 .9; } to { opacity: .7; scale: 1.08 1.25; } }
@keyframes carl-fade { to { opacity: 0; scale: 1.18; } }
@keyframes carl-bang { from { opacity: .6; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #carl::before, #carl::after, .carl-txt, .cl, .cl::before, .cl::after { animation: none; } }