:root {
  --red: #ff4d5e;
  --teal: #3ddad0;
  --purple: #7b2ff7;
  --violet: #a685fa;
  --edge: rgba(233, 230, 226, .28);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --yellow: #f4d35e;
  --ink: #0a0a0d;
  --bg: #0a0a0d;
  --paper: #e9e6e2;
  --radius: 22px;
  --border: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--edge);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--bg);
  color: var(--paper);
  line-height: 1.6;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(166, 133, 250, .22), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(61, 218, 208, .14), transparent 35%),
    radial-gradient(circle at 70% 85%, rgba(255, 77, 94, .14), transparent 40%);
  background-attachment: fixed;
}

h1, h2, h3, .logo { font-family: Bungee, "Arial Black", sans-serif; font-weight: 400; line-height: 1.05; }
a { color: inherit; }

#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.disco { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; }
body.party .disco { opacity: 1; animation: disco 3s linear infinite; }
.disco {
  background: conic-gradient(from 0deg at 50% -10%,
    rgba(255,59,78,.35), rgba(255,217,61,.35), rgba(18,214,193,.35), rgba(123,47,247,.35), rgba(255,59,78,.35));
  mix-blend-mode: screen;
}
@keyframes disco { to { filter: hue-rotate(360deg); } }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .8rem clamp(1rem, 4vw, 3rem);
  background: rgba(10, 10, 13, .88);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--yellow);
}
.logo { font-size: 1.8rem; text-decoration: none; color: var(--yellow); }
.logo span { color: var(--red); }
.nav nav { display: flex; gap: 1.2rem; margin-left: auto; }
.nav nav a { text-decoration: none; font-weight: 700; position: relative; }
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav nav a:hover::after { transform: scaleX(1); }
.party-btn {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--purple); color: var(--paper);
  border: var(--border); border-color: var(--ink); border-radius: 999px;
  padding: .45rem 1rem; box-shadow: 3px 3px 0 var(--edge);
  transition: transform .15s, box-shadow .15s;
}
.party-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--edge); }
.party-btn[aria-pressed="true"] { background: var(--red); }

/* hero */
.hero {
  position: relative; text-align: center;
  padding: clamp(4rem, 12vw, 9rem) 1rem clamp(3rem, 8vw, 6rem);
}
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .25em; color: var(--teal); font-weight: 500; font-size: .8rem; display: inline-block; border: 1px solid #28242e; border-radius: 999px; padding: .4rem 1rem; }
h1 { font-size: clamp(3rem, 13vw, 9.5rem); margin: .5rem 0; letter-spacing: -.02em; }
h1 span {
  display: inline-block;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--edge);
  animation: bob 2.4s ease-in-out infinite;
  cursor: default;
  transition: transform .2s;
}
h1 span:nth-child(2n) { animation-delay: -.6s; }
h1 span:nth-child(3n) { animation-delay: -1.2s; }
h1 span:hover { transform: translateY(-14px) rotate(-8deg) scale(1.15); }
.c1 { color: var(--red); } .c2 { color: var(--yellow); } .c3 { color: var(--teal); } .c4 { color: var(--violet); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.tagline { font-size: clamp(1.1rem, 2.5vw, 1.5rem); max-width: 34ch; margin: 0 auto 2rem; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  display: inline-block; padding: .8rem 1.5rem; color: var(--ink);
  border: var(--border); border-radius: 999px; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--edge); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--edge); }
.btn-yellow { background: var(--yellow); }
.btn-teal { background: var(--teal); }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 rgba(255,255,255,.35); border-color: var(--ink); }

.sticker { position: absolute; font-size: 3rem; pointer-events: none; animation: spin 14s linear infinite; }
.s-star { top: 14%; left: 8%; color: var(--yellow); }
.s-bolt { bottom: 12%; right: 9%; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ticker */
.ticker { background: var(--yellow); color: var(--ink); border-block: var(--border); transform: rotate(-1.2deg); margin: 0 -2rem; overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: marquee 22s linear infinite; font-family: Bungee, sans-serif; font-size: 1.5rem; padding: .5rem 0; white-space: nowrap; }
.ticker-track span { padding-right: 1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sections */
.section { max-width: 1100px; margin: 0 auto; padding: clamp(6rem, 14vw, 10rem) 1.2rem 0; position: relative; z-index: 1; }
.section h2 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 1.5rem; }
.lead { margin: -1rem 0 1.5rem; opacity: .8; }
.hl { display: inline-block; padding: 0 .35em; border: var(--border); border-radius: 12px; box-shadow: 4px 4px 0 var(--edge); transform: rotate(-2deg); color: var(--ink); }
.hl-red { background: var(--red); } .hl-teal { background: var(--teal); }
.hl-yellow { background: var(--yellow); } .hl-purple { background: var(--violet); }

.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.card { border: var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); color: var(--ink); transition: transform .25s; }
.card h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.card-purple { background: var(--violet); } .card-teal { background: var(--teal); } .card-yellow { background: var(--yellow); }
.tilt-l { transform: rotate(-1.5deg); } .tilt-r { transform: rotate(1.5deg); }
.card:hover { transform: rotate(0) translateY(-6px); }
.fact { font-weight: 700; min-height: 4.5em; margin-bottom: .8rem; }
.rules { list-style: none; padding: 0; }
.rules li { padding: .35rem 0 .35rem 1.8rem; position: relative; font-weight: 500; }
.rules li::before { content: "✦"; position: absolute; left: 0; color: var(--red); }

/* cartridges */
.carts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.6rem; perspective: 900px; }
.cart { position: relative; height: 270px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.cart-inner { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.cart.flipped .cart-inner { transform: rotateY(180deg); }
.cart:hover .cart-inner { transform: translateY(-6px) rotate(-1deg); }
.cart.flipped:hover .cart-inner { transform: rotateY(180deg) translateY(-6px); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--border); border-radius: 18px 18px 8px 8px; box-shadow: var(--shadow);
  padding: 1.2rem; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 88% 100%, 88% 94%, 12% 94%, 12% 100%, 0 100%);
}
.face::before { content: ""; position: absolute; top: 12px; left: 12px; right: 12px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); opacity: .35; }
.face.back { transform: rotateY(180deg); }
.cart h3 { font-size: 1.6rem; margin-top: 1rem; }
.cart .genre { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; }
.stars { font-size: 1.3rem; letter-spacing: .1em; }
.cart .hours { font-weight: 700; }
.back p { font-weight: 500; margin-top: 1rem; }
.cart:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 6px; }
.k0 { background: var(--red); } .k1 { background: var(--teal); } .k2 { background: var(--yellow); } .k3 { background: var(--violet); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .9rem; }
.chip {
  font-weight: 700; font-size: 1.15rem; padding: .6rem 1.2rem; color: var(--ink);
  border: var(--border); border-radius: 999px; box-shadow: 4px 4px 0 var(--edge);
  cursor: pointer; transition: transform .2s; user-select: none; background: none; font-family: inherit;
}
.chip:hover { transform: rotate(var(--r, 3deg)) scale(1.1); }

/* now */
.now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.now-grid div { border: 3px dashed var(--teal); border-radius: var(--radius); padding: 1.1rem 1.3rem; background: rgba(0, 0, 0, .2); }
.now-grid dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .2em; color: var(--yellow); font-weight: 700; }
.now-grid dd { font-size: 1.3rem; font-weight: 700; }

/* links */
.links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.link-pill { font-family: Bungee, sans-serif; font-size: 1.7rem; text-decoration: none; color: var(--ink); padding: .5rem 1.6rem; border: var(--border); border-radius: 999px; box-shadow: var(--shadow); transition: transform .2s; }
.link-pill:hover { transform: rotate(-4deg) scale(1.08); }
.l1 { background: var(--violet); } .l2 { background: var(--red); } .l3 { background: var(--teal); } .l4 { background: var(--yellow); }
.hint { margin-top: 2rem; opacity: .55; font-size: .9rem; }

.footer { text-align: center; padding: 4rem 1rem 2.5rem; opacity: .7; font-size: .9rem; position: relative; z-index: 1; }

body.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-.5deg); } 40% { transform: translateX(8px) rotate(.5deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

@media (max-width: 720px) {
  .nav nav { display: none; }
  .party-btn { margin-left: auto; }
  .ticker { margin: 0 -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- personal-vibe additions ---- */
.mono, .genre, .tag, .now-grid dt, .hint { font-family: var(--mono); }
.tag { display: inline-block; background: var(--teal); color: var(--ink); font-size: .8rem; font-weight: 600; padding: .25rem .7rem; border-radius: 8px; margin-bottom: .6rem; }
.hl { box-shadow: none; }
.ticker-track { font-size: 1.15rem; }

/* case file */
.case { background: #17151b; border: 1px solid #28242e; border-radius: 18px; overflow: hidden; position: relative; }
.case::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--red), var(--yellow), var(--teal), var(--violet)); }
.case-body { padding: clamp(1.3rem, 4vw, 2.4rem); }
.case-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.case-kicker { font-family: var(--mono); color: var(--red); font-size: .85rem; letter-spacing: .1em; }
.status { font-family: var(--mono); font-size: .8rem; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: .2rem .8rem; }
.case h3 { font-size: clamp(2rem, 6vw, 3.2rem); margin: .5rem 0; }
.case p { max-width: 62ch; opacity: .85; }
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin: 1.6rem 0; }
.feat { border: 1px solid #28242e; border-radius: 12px; padding: 1rem; background: #131217; }
.feat code { font-family: var(--mono); color: var(--yellow); font-size: .9rem; }
.feat p { font-size: .92rem; margin-top: .3rem; opacity: .8; }

/* favorites */
.favs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.fav { text-align: left; }
.fav .genre { font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.fav .big { font-family: Bungee, sans-serif; font-size: 2.2rem; line-height: 1.1; margin: .4rem 0; }
.fav p { font-size: .95rem; }

/* train toy */
#train { position: fixed; bottom: 10px; left: 0; font-size: 3.4rem; z-index: 40; pointer-events: none; transform: translateX(100vw); white-space: nowrap; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
#train.go { animation: choo 5s linear forwards; }
@keyframes choo { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }


/* drawer + datacenter */
.case + .case { margin-top: 1.4rem; }
.rack-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.rack-stats div { flex: 1 1 140px; border: 3px dashed var(--teal); border-radius: var(--radius); padding: .9rem 1.2rem; background: rgba(0,0,0,.2); }
.rack-stats b { display: block; font-family: Bungee, sans-serif; font-size: 2rem; color: var(--yellow); font-weight: 400; }
.rack-stats span { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; opacity: .8; }
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.node { background: #17151b; border: 1px solid #28242e; border-left: 6px solid var(--teal); border-radius: 14px; padding: 1.1rem 1.2rem; position: relative; transition: transform .2s, border-color .2s; }
.node:nth-child(4n+1) { border-left-color: var(--red); } .node:nth-child(4n+2) { border-left-color: var(--yellow); } .node:nth-child(4n+3) { border-left-color: var(--violet); }
.node::after { content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: blink 2.2s ease-in-out infinite; }
.node:nth-child(2n)::after { animation-delay: -1.1s; background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.node:hover { transform: translateY(-4px) rotate(-.5deg); }
.node h3 { font-size: 1.25rem; margin: .1rem 0 .5rem; }
.node .ram { font-family: var(--mono); color: var(--yellow); font-weight: 600; }
@keyframes blink { 50% { opacity: .25; } }

/* favorites: keep long words inside the card */
.fav { container-type: inline-size; min-width: 0; }
.fav .big { font-size: clamp(1.4rem, 12.5cqw, 2.2rem); overflow-wrap: anywhere; hyphens: auto; }

/* more vertical room */
.hero { min-height: calc(100vh - 70px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section + .section::before {
  content: ""; display: block; height: 14px; width: min(320px, 70%); margin: 0 auto clamp(3rem, 7vw, 5rem);
  background: radial-gradient(circle, var(--red) 5px, transparent 6px) 0 50% / 56px 14px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  animation: dots 6s linear infinite;
}
@keyframes dots { 25% { filter: hue-rotate(60deg); } 50% { filter: hue-rotate(160deg); } 75% { filter: hue-rotate(260deg); } }
.section h2 { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.footer { padding-top: clamp(6rem, 12vw, 9rem); }

/* disco ball */
body.party .disco { opacity: .35; }
#discoball { position: fixed; top: 0; left: 50%; z-index: 35; width: 0; height: calc(clamp(70px, 14vh, 140px) + 120px); pointer-events: none; transform: translateY(-120%); transition: transform 1.4s cubic-bezier(.3, 1.35, .5, 1); }
body.party #discoball { transform: translateY(0); }
#discoball .swing { position: absolute; left: -60px; top: 0; width: 120px; transform-origin: 60px 0; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(2.5deg); } 0%, 100% { transform: rotate(-2.5deg); } }
.string { width: 3px; height: clamp(70px, 14vh, 140px); margin: 0 auto; background: linear-gradient(#777, #eee); }
.ball {
  width: 110px; height: 110px; margin: -2px auto 0; border-radius: 50%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%),
    repeating-linear-gradient(90deg, #d9d9e6 0 9px, #8a8a9e 9px 11px),
    repeating-linear-gradient(0deg, #f5f5ff 0 9px, #6e6e84 9px 11px);
  background-blend-mode: normal, normal, multiply, normal;

  animation: spinball 3s linear infinite;
}
@keyframes spinball { to { background-position: 0 0, 0 0, 22px 0, 0 0; } }
.ball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,77,94,.25), rgba(244,211,94,.25), rgba(61,218,208,.25), rgba(166,133,250,.25), rgba(255,77,94,.25)); mix-blend-mode: color; animation: tint 3s linear infinite; }
@keyframes tint { to { transform: rotate(360deg); } }

.beams {
  position: absolute; left: 0; top: calc(clamp(70px, 14vh, 140px) + 55px);
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(rgba(255,77,94,.3) 0 4deg, transparent 4deg 30deg, rgba(61,218,208,.3) 30deg 34deg, transparent 34deg 60deg, rgba(244,211,94,.3) 60deg 64deg, transparent 64deg 90deg, rgba(166,133,250,.3) 90deg 94deg, transparent 94deg 120deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 8%, transparent 62%); mask: radial-gradient(circle closest-side, #000 8%, transparent 62%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 1s .9s; animation: beamspin 16s linear infinite;
}
body.party .beams { opacity: .8; }
@keyframes beamspin { to { transform: rotate(360deg); } }

/* drifting light spots */
#spots { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1s .9s; }
body.party #spots { opacity: 1; }
#spots i { position: absolute; top: 0; left: 0; width: 220px; height: 220px; margin: -110px; border-radius: 50%; mix-blend-mode: screen; filter: blur(6px); }
#spots i:nth-child(1) { background: radial-gradient(circle, rgba(255,77,94,.55), transparent 65%); animation: d1 9s ease-in-out infinite alternate; }
#spots i:nth-child(2) { background: radial-gradient(circle, rgba(61,218,208,.5), transparent 65%); animation: d2 11s ease-in-out infinite alternate; }
#spots i:nth-child(3) { background: radial-gradient(circle, rgba(244,211,94,.5), transparent 65%); animation: d3 13s ease-in-out infinite alternate; }
#spots i:nth-child(4) { background: radial-gradient(circle, rgba(166,133,250,.55), transparent 65%); animation: d2 8s ease-in-out infinite alternate-reverse; }
#spots i:nth-child(5) { background: radial-gradient(circle, rgba(255,77,94,.4), transparent 65%); animation: d3 10s ease-in-out infinite alternate-reverse; }
#spots i:nth-child(6) { background: radial-gradient(circle, rgba(61,218,208,.45), transparent 65%); animation: d1 12s ease-in-out infinite alternate-reverse; }
@keyframes d1 { 0% { transform: translate(10vw, 20vh); } 50% { transform: translate(80vw, 70vh); } 100% { transform: translate(30vw, 90vh); } }
@keyframes d2 { 0% { transform: translate(90vw, 15vh); } 50% { transform: translate(20vw, 60vh); } 100% { transform: translate(60vw, 85vh); } }
@keyframes d3 { 0% { transform: translate(50vw, 10vh); } 50% { transform: translate(85vw, 45vh); } 100% { transform: translate(15vw, 75vh); } }
body.party .ball { box-shadow: 0 0 40px 8px rgba(255,255,255,.35), 0 0 120px 30px rgba(166,133,250,.35); }

/* ======== the edge of the world ======== */
.footer { border-top: 1px solid #28242e; margin-top: clamp(3rem, 6vw, 5rem); }
.endcap { font-family: var(--mono); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 1.2rem; opacity: .85; }
#noise { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; }
#abyss { display: none; position: relative; z-index: 1; padding: 25vh 1.2rem 40vh; text-align: center; }

/* building pressure: the colour starts to drain */
body.uneasy main, body.uneasy .footer { filter: saturate(calc(1 - var(--p, 0) * .85)) contrast(calc(1 + var(--p, 0) * .25)); }
body.uneasy::after, body.broken::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: radial-gradient(circle, transparent 38%, rgba(0, 0, 0, calc(var(--p, .6) * .85)) 100%); }

/* the break */
html.glitch main, html.glitch .footer, html.glitch .nav { animation: tear 1.1s steps(1) both; }
@keyframes tear {
  0% { transform: none; filter: none; }
  10% { transform: translateX(-16px) skewX(6deg); filter: invert(1) contrast(2); }
  18% { transform: translateX(22px); filter: grayscale(1); }
  30% { transform: translateX(-6px) scaleY(1.03); filter: grayscale(1) contrast(3); }
  55% { transform: translateX(10px) skewX(-4deg); filter: invert(1); }
  62% { transform: translateX(-3px); filter: grayscale(1) contrast(2); }
  100% { transform: none; filter: grayscale(1) contrast(3); }
}
html.glitch #noise { opacity: 1; animation: cut 1.1s steps(1) both; }
@keyframes cut { 0% { background: #fff; } 9% { background: transparent; } 50% { background: #000; } 58% { background: transparent; } 100% { background: #000; } }

/* the site, after */
body.broken {
  --red: #fff; --teal: #fff; --yellow: #fff; --purple: #fff; --violet: #fff; --paper: #fff;
  --bg: #000; --ink: #000; --edge: transparent; --border: 1px solid #fff; --shadow: none;
  --mono: "Courier New", Courier, monospace;
  background: #000 !important; color: #fff; filter: none;
}
body.broken *, body.broken *::before, body.broken *::after {
  font-family: "Courier New", Courier, monospace !important;
  color: #fff !important; background-color: transparent !important; background-image: none !important;
  border-color: #fff !important; border-radius: 0 !important; box-shadow: none !important;
  text-shadow: none !important; -webkit-text-stroke: 0 !important; mix-blend-mode: normal !important;
  filter: none;
}
body.broken .nav { background-color: #000 !important; border-bottom: 1px solid #fff; backdrop-filter: none; }
body.broken .disco, body.broken #spots, body.broken #discoball, body.broken #confetti,
body.broken .sticker, body.broken #train, body.broken .hint { display: none !important; }
body.broken .tilt-l, body.broken .tilt-r, body.broken .hl, body.broken .ticker { transform: none !important; }
body.broken .card, body.broken .case, body.broken .feat, body.broken .node, body.broken .rack-stats div,
body.broken .btn, body.broken .party-btn, body.broken .link-pill, body.broken .tag, body.broken .status,
body.broken .eyebrow, body.broken .hl { border: 1px solid #fff !important; box-shadow: none !important; }
body.broken .node { border-left-width: 6px !important; }
body.broken .btn:hover, body.broken .party-btn:hover, body.broken .link-pill:hover { background-color: #fff !important; color: #000 !important; transform: none; }
body.broken .ticker { border-block: 1px solid #fff; background-color: #000 !important; }
body.broken h1 { font-weight: 700; letter-spacing: -.04em; }
body.broken h1 span { animation: vanish 4s steps(1) infinite !important; text-shadow: none; }
body.broken h1 span:nth-child(2n) { animation-delay: -1.3s !important; }
body.broken h1 span:nth-child(3n) { animation-delay: -2.7s !important; }
@keyframes vanish { 0%, 88%, 100% { opacity: 1; } 90% { opacity: 0; } 93% { opacity: .2; } }
body.broken h2, body.broken h3 { text-transform: uppercase; letter-spacing: .06em; }
body.broken main > section:not(.hero) h2 { border-bottom: 4px solid #fff; padding-bottom: .5rem; }
body.broken .section + .section::before { height: 1px; width: 100%; margin-bottom: clamp(3rem, 7vw, 5rem); background-color: #fff !important; -webkit-mask: none; mask: none; animation: none; filter: none; }
body.broken .node::after { background-color: #fff !important; box-shadow: none !important; }
body.broken .footer { border-top: 4px solid #fff; }
body.broken .feat, body.broken .now-grid div, body.broken .rack-stats div { border-style: solid !important; }
body.broken #noise {
  opacity: .13;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") !important;
  animation: grain .6s steps(5) infinite;
}
@keyframes grain { 20% { background-position: 0 0, 40px 30px; } 40% { background-position: 0 0, -30px 70px; } 60% { background-position: 0 0, 90px -20px; } 80% { background-position: 0 0, -60px -50px; } }
body.broken.flick main, body.broken.flick .footer { transform: translateX(6px) skewX(-2deg); filter: invert(1) !important; }

body.broken #abyss { display: block; }
.abyss-line { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; font-size: clamp(1.1rem, 3vw, 1.7rem); letter-spacing: .08em; opacity: 0; transition: opacity 1.8s; }
.abyss-line.seen { opacity: 1; }
.eyes { display: flex; gap: 2.4rem; }
body.broken .eye { position: relative; display: block; width: 70px; height: 70px; border: 1px solid #fff !important; border-radius: 50% !important; }
body.broken .pupil { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; background-color: #fff !important; border-radius: 50% !important; transition: transform .08s linear; }
body.broken .reload { text-decoration: underline; text-underline-offset: 6px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* living eyes */
body.broken .eye { overflow: hidden; }
body.broken .pupil { transition: transform .16s cubic-bezier(.2, .9, .3, 1); }
body.broken .lid { position: absolute; inset: 0; background-color: #000 !important; border-bottom: 2px solid #fff; transform: scaleY(0); transform-origin: top; transition: transform .06s linear; }
body.broken .eye.blink .lid { transform: scaleY(1); }

/* the way back */
body.broken .reload { font: inherit; letter-spacing: .08em; text-decoration: none; background: none; border: 1px solid #fff; padding: .9rem 1.8rem; cursor: pointer; }
body.broken .reload:hover { background-color: #fff !important; color: #000 !important; animation: none; }
html.restoring #noise { opacity: 0; background-image: none !important; background-color: #fff !important; animation: whiteout 1.3s linear both !important; }
@keyframes whiteout { 0% { opacity: 0; } 25% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }

/* the other side of the glass */
body.broken main, body.broken .nav { transform: scaleX(-1); }
body.broken.flick main { transform: scaleX(-1) translateX(6px) skewX(-2deg); }
body.broken.flick .footer { transform: translateX(6px) skewX(-2deg); }
html.arrive #noise { opacity: 0; background-image: none !important; background-color: #000 !important; animation: arrive 1s linear both !important; }
@keyframes arrive { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* NEW tag */
.case-badges { display: inline-flex; align-items: center; gap: .6rem; }
.new-tag { font-family: Bungee, sans-serif; font-size: .8rem; letter-spacing: .08em; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; padding: .15rem .55rem; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--edge); animation: newpulse 1.8s ease-in-out infinite; }
@keyframes newpulse { 50% { transform: rotate(-4deg) scale(1.12); } }
body.broken .new-tag { border: 1px solid #fff !important; animation: none; transform: none; }