:root {
  --ink: #07060c;
  --ink-soft: #111020;
  --paper: #f4f0ed;
  --acid: #c7ff00;
  --acid-hot: #e1ff4e;
  --violet: #9748ff;
  --violet-deep: #42148b;
  --electric: #08dcb6;
  --danger: #ff4056;
  --mist: rgba(232, 245, 224, 0.76);
  --line: rgba(199, 255, 0, 0.33);
  --edge: rgba(173, 85, 255, 0.55);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: Arial, Helvetica, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 86% 3%, rgba(101, 25, 184, 0.33), transparent 21rem),
    radial-gradient(circle at 8% 48%, rgba(111, 203, 0, 0.08), transparent 33rem),
    var(--ink);
  font-family: var(--body);
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-noise,
.scanlines,
.edge-glow { pointer-events: none; position: fixed; inset: 0; z-index: 30; }
.site-noise {
  opacity: 0.09;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.scanlines { opacity: 0.09; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(196,255,0,.45) 3px 4px); mix-blend-mode: screen; }
.edge-glow { box-shadow: inset 0 0 7rem rgba(104, 44, 210, 0.18), inset 0 0 1.5rem rgba(199, 255, 0, 0.06); }

.topbar {
  align-items: center;
  display: flex;
  height: 95px;
  justify-content: space-between;
  left: 0;
  padding: 18px clamp(24px, 4.15vw, 80px);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}
.brand { align-items: center; color: var(--acid); display: inline-flex; font-family: var(--display); font-size: clamp(22px, 2.4vw, 43px); font-style: italic; letter-spacing: -1.6px; line-height: .8; text-shadow: 2px 2px 0 #28124b, 0 0 15px rgba(199,255,0,.55); transform: skew(-8deg); }
.brand i { color: var(--paper); font-style: normal; }
.brand-skull { color: var(--acid); font-family: Arial, sans-serif; font-size: .6em; margin-right: 7px; transform: rotate(-10deg); }
.main-nav { align-items: center; display: flex; gap: clamp(22px, 3.2vw, 64px); margin-left: 4vw; }
.main-nav a, .micro-link { color: rgba(244, 240, 237, .9); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .18em; position: relative; }
.main-nav a::after { background: var(--acid); bottom: -7px; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .22s ease; width: 100%; }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.topbar-actions { align-items: center; display: flex; gap: 20px; }
.micro-link:hover { color: var(--acid); text-shadow: 0 0 11px var(--acid); }

.toxic-button, .ca-button {
  align-items: center;
  border: 2px solid var(--acid);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--display);
  font-size: clamp(16px, 1.32vw, 24px);
  gap: 13px;
  justify-content: center;
  letter-spacing: .7px;
  min-height: 60px;
  overflow: hidden;
  padding: 12px 21px;
  position: relative;
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.toxic-button::before { background: var(--acid); content: ""; inset: 0; position: absolute; transform: translateX(-103%) skew(-13deg); transition: transform .27s cubic-bezier(.2,.8,.2,1); z-index: -1; }
.toxic-button { background: rgba(199,255,0,.15); box-shadow: 0 0 0 4px rgba(199,255,0,.08), 0 0 22px rgba(199,255,0,.28), inset 0 0 18px rgba(199,255,0,.14); color: var(--acid); }
.toxic-button:hover { box-shadow: 0 0 0 4px rgba(199,255,0,.12), 0 0 34px rgba(199,255,0,.58); color: var(--ink); transform: translateY(-3px) rotate(-1deg); }
.toxic-button:hover::before { transform: translateX(-2%) skew(-13deg); }
.toxic-button > * { position: relative; z-index: 1; }
.toxic-button b { color: var(--acid); font-family: Arial, sans-serif; font-size: 1.15em; }
.toxic-button:hover b { color: var(--ink); }
.toxic-button--compact { border-radius: 7px; font-size: 16px; min-height: 46px; padding: 9px 15px; }
.capsule { align-items: center; background: linear-gradient(135deg, var(--paper) 0 45%, var(--electric) 46%); border: 2px solid var(--ink); border-radius: 99px; display: inline-flex; height: 23px; justify-content: center; transform: rotate(-40deg); width: 13px; }
.capsule i { border-top: 2px solid var(--ink); width: 100%; }
.ca-button { background: rgba(3, 2, 7, .56); border-color: rgba(151,72,255,.84); box-shadow: inset 0 0 18px rgba(109,34,229,.15), 0 0 18px rgba(144,57,255,.24); color: #c78dff; min-width: 180px; }
.ca-button span { font-family: var(--mono); font-size: .54em; font-weight: 700; letter-spacing: .1em; }
.ca-button b { font-size: .95em; }
.ca-button i { font-family: Arial, sans-serif; font-size: .77em; font-style: normal; }
.ca-button:hover { border-color: var(--acid); box-shadow: inset 0 0 18px rgba(199,255,0,.18), 0 0 24px rgba(199,255,0,.25); color: var(--acid); transform: translateY(-3px) rotate(1deg); }

.chapter { isolation: isolate; min-height: max(100svh, 720px); overflow: hidden; position: relative; }
.page-shell { margin: 0 auto; max-width: 1920px; padding-left: clamp(24px, 6.3vw, 121px); padding-right: clamp(24px, 6.3vw, 121px); width: 100%; }
.hero { align-items: center; display: flex; min-height: 100svh; padding: 120px 0 50px; }
.hero::before { background: linear-gradient(90deg, rgba(5,4,11,.98) 0%, rgba(5,4,11,.9) 38%, rgba(5,4,11,.15) 68%, rgba(5,4,11,.5) 100%); content: ""; inset: 0; position: absolute; z-index: -1; }
.hero-grid { align-items: center; display: grid; grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr); min-height: 740px; }
.hero-copy { max-width: 680px; position: relative; z-index: 5; }
.eyebrow { align-items: center; color: var(--acid); display: flex; font-family: var(--mono); font-size: 12px; font-weight: 700; gap: 10px; letter-spacing: .19em; margin: 0 0 23px; }
.eyebrow--purple { color: #d4a4ff; }
.pulse-dot { background: var(--acid); border-radius: 50%; box-shadow: 0 0 10px var(--acid); display: inline-block; height: 8px; position: relative; width: 8px; }
.pulse-dot::before { animation: ping 1.8s ease-out infinite; border: 1px solid var(--acid); border-radius: inherit; content: ""; inset: -4px; position: absolute; }
.hero h1, .section-heading h2, .lore-copy h2, .roadmap-intro h2, .finale-copy h2 { color: var(--paper); font-family: var(--display); font-size: clamp(86px, 10.65vw, 204px); font-weight: 400; letter-spacing: -.043em; line-height: .75; margin: 0; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 > span:first-child { transform: translateX(-.06em); }
.hero h1 .hero-title-small { color: var(--paper); font-size: .5em; letter-spacing: .12em; margin: 9px 0 4px .1em; }
.hero h1 strong { color: var(--acid); display: block; font-weight: 400; letter-spacing: -.07em; text-shadow: 3px 4px 0 #2c1353, 0 0 25px rgba(199,255,0,.35); transform: skew(-7deg); }
.hero-lead { color: rgba(244,240,237,.8); font-size: clamp(15px, 1.17vw, 19px); line-height: 1.65; margin: 35px 0 28px; max-width: 570px; }
.hero-actions { align-items: stretch; display: flex; flex-wrap: wrap; gap: 16px; }
.hero-footnote { align-items: center; color: rgba(244,240,237,.5); display: flex; font-family: var(--mono); font-size: 10px; gap: 15px; letter-spacing: .12em; margin-top: 31px; }
.divider { color: var(--violet); }

.hero-aura { inset: 0; overflow: hidden; position: absolute; z-index: -2; }
.orb { background: radial-gradient(circle at 35% 29%, rgba(210,255,65,.9), rgba(112,209,0,.27) 22%, transparent 67%); border-radius: 50%; filter: blur(5px); position: absolute; }
.orb--one { animation: orb 7s ease-in-out infinite alternate; height: 38rem; right: 5%; top: 12%; width: 38rem; }
.orb--two { background: radial-gradient(circle, rgba(144,52,255,.62), transparent 66%); bottom: 2%; height: 47rem; right: 21%; width: 47rem; }
.orb--three { background: radial-gradient(circle, rgba(199,255,0,.28), transparent 68%); height: 24rem; left: 9%; top: 6%; width: 24rem; }
.toxic-smoke { border: 2px solid rgba(199,255,0,.13); border-radius: 47% 53% 38% 62% / 45% 40% 60% 55%; filter: blur(1px); opacity: .8; position: absolute; }
.smoke--one { animation: smoke 13s linear infinite; height: 43vw; right: -2vw; top: 8vh; width: 43vw; }
.smoke--two { animation: smoke 16s -4s linear infinite reverse; border-color: rgba(153,65,255,.32); height: 29vw; right: 14vw; top: 30vh; width: 29vw; }
.smoke--three { animation: smoke 18s -2s linear infinite; border-color: rgba(199,255,0,.24); height: 32vw; right: 2vw; top: 44vh; width: 32vw; }
.lightning { border-left: 3px solid var(--violet); box-shadow: 0 0 11px var(--violet), 0 0 28px rgba(199,255,0,.4); clip-path: polygon(42% 0, 82% 0, 55% 32%, 91% 32%, 19% 100%, 42% 55%, 7% 55%); height: 35%; opacity: .85; position: absolute; transform: rotate(14deg); width: 8%; }
.lightning--one { animation: flicker 3.5s infinite; right: 7%; top: 13%; }
.lightning--two { animation: flicker 4.8s .8s infinite; left: 9%; top: 25%; transform: rotate(-25deg) scale(.58); }

.hero-art { align-self: stretch; min-height: 670px; position: relative; }
.hero-art::after { background: linear-gradient(0deg, var(--ink), transparent 21%); bottom: 0; content: ""; height: 25%; left: -10%; position: absolute; right: -10%; z-index: 4; }
.hazard-ring { border-radius: 50%; left: 50%; position: absolute; top: 49%; transform: translate(-50%, -50%); }
.hazard-ring--outer { animation: rotateSlow 25s linear infinite; border: 1px dashed rgba(199,255,0,.45); box-shadow: 0 0 35px rgba(199,255,0,.2); height: min(43vw, 745px); width: min(43vw, 745px); }
.hazard-ring--inner { animation: rotateSlow 14s linear infinite reverse; border: 2px solid rgba(158,75,255,.48); height: min(34vw, 585px); width: min(34vw, 585px); }
.hero-shadow { background: radial-gradient(ellipse, rgba(0,0,0,.88), transparent 68%); bottom: 5%; filter: blur(8px); height: 11%; left: 19%; position: absolute; width: 72%; z-index: 2; }
.tycoon { display: block; object-fit: contain; position: absolute; user-select: none; z-index: 3; }
.tycoon--hero { animation: heroFloat 5.6s ease-in-out infinite; bottom: 0; filter: drop-shadow(0 0 16px rgba(209,255,11,.61)) drop-shadow(0 0 41px rgba(111,39,224,.47)); height: min(60vw, 950px); left: 48%; max-width: none; transform: translateX(calc(-50% + var(--mouse-x, 0px))) translateY(var(--mouse-y, 0px)); transform-origin: 50% 100%; transition: transform .16s ease-out; width: auto; }
.hero-sticker { border: 2px solid; box-shadow: 3px 4px 0 var(--ink), 0 0 17px currentColor; font-family: var(--display); line-height: .88; padding: 8px; position: absolute; text-align: center; z-index: 6; }
.sticker--audit { background: var(--danger); border-color: var(--paper); color: var(--ink); font-size: clamp(13px, 1.25vw, 21px); right: 5%; top: 17%; transform: rotate(11deg); }
.sticker--fresh { background: var(--acid); border-color: var(--ink); color: var(--ink); font-size: clamp(12px, 1.05vw, 18px); left: 6%; top: 22%; transform: rotate(-12deg); }
.floating-label { background: rgba(8,7,15,.77); border-left: 2px solid var(--acid); color: rgba(244,240,237,.72); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; line-height: 1.5; padding: 8px 10px; position: absolute; z-index: 6; }
.floating-label b { color: var(--acid); }
.label--left { bottom: 22%; left: 0; }
.label--right { right: 0; top: 53%; }
.drip { animation: drip 3.8s ease-in-out infinite; background: var(--acid); border-radius: 0 0 99px 99px; box-shadow: 0 0 17px var(--acid); position: absolute; width: 7px; z-index: 6; }
.drip--one { animation-delay: -.7s; height: 44px; left: 25%; top: 23%; }
.drip--two { animation-delay: -2.1s; height: 29px; right: 26%; top: 33%; }
.drip--three { animation-delay: -1.7s; background: var(--violet); box-shadow: 0 0 17px var(--violet); height: 55px; right: 7%; top: 61%; }
.hero-scroll-cue { align-items: center; bottom: 26px; color: rgba(244,240,237,.49); display: flex; font-family: var(--mono); font-size: 9px; gap: 12px; left: clamp(24px, 6.3vw, 121px); letter-spacing: .18em; position: absolute; z-index: 7; }
.hero-scroll-cue i { animation: scrollLine 1.7s ease-in-out infinite; background: var(--acid); height: 1px; width: 52px; }
.vertical-warning { color: rgba(199,255,0,.5); font-family: var(--mono); font-size: 9px; letter-spacing: .22em; position: absolute; right: 23px; top: 56%; transform: rotate(90deg); transform-origin: right top; z-index: 5; }

.lore { background: radial-gradient(circle at 15% 20%, rgba(129,53,228,.33), transparent 26rem), radial-gradient(circle at 91% 73%, rgba(177,255,0,.14), transparent 29rem), #0a0813; display: flex; align-items: center; padding: 100px 0; }
.lore::before { background: linear-gradient(90deg, transparent 49.85%, rgba(199,255,0,.11) 50%, transparent 50.15%); content: ""; inset: 0; position: absolute; z-index: -1; }
.lore-layout { align-items: center; display: grid; gap: clamp(35px, 9vw, 190px); grid-template-columns: minmax(320px, .8fr) minmax(390px, .8fr); }
.lore-art-panel { align-self: stretch; background: linear-gradient(135deg, rgba(198,255,0,.1), rgba(69,15,123,.13) 42%, rgba(9,8,15,.3)); border: 1px solid rgba(199,255,0,.35); min-height: 580px; overflow: hidden; position: relative; }
.lore-art-panel::after { background: linear-gradient(0deg, #080710 0%, transparent 31%); bottom: 0; content: ""; height: 44%; left: 0; position: absolute; right: 0; z-index: 2; }
.lore-gridlines { background-image: linear-gradient(rgba(199,255,0,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(199,255,0,.16) 1px, transparent 1px); background-size: 45px 45px; inset: 0; mask-image: linear-gradient(#000, transparent); opacity: .38; position: absolute; }
.vial-glow { animation: glowPulse 2.8s infinite alternate; background: radial-gradient(circle, rgba(199,255,0,.88), rgba(137,68,251,.26) 35%, transparent 67%); height: 68%; left: 14%; position: absolute; top: 7%; width: 70%; }
.tycoon--vial { animation: vialFloat 6.5s ease-in-out infinite; bottom: -2%; filter: drop-shadow(0 0 13px rgba(199,255,0,.48)); height: 108%; left: 50%; transform: translateX(-50%); width: auto; z-index: 3; }
.evidence-stamp { background: var(--acid); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font-family: var(--display); font-size: 18px; left: 20px; line-height: .8; padding: 9px 12px; position: absolute; top: 20px; transform: rotate(-7deg); z-index: 4; }
.evidence-stamp b { color: var(--violet-deep); font-size: 1.4em; }
.case-label { bottom: 17px; color: rgba(244,240,237,.67); font-family: var(--mono); font-size: 10px; letter-spacing: .13em; left: 20px; line-height: 1.6; margin: 0; position: absolute; z-index: 4; }
.case-label b { color: var(--acid); }
.lore-copy { max-width: 600px; }
.lore-copy h2, .section-heading h2, .roadmap-intro h2, .finale-copy h2 { font-size: clamp(70px, 7.3vw, 140px); line-height: .78; }
.lore-copy h2 em, .section-heading h2 em, .roadmap-intro h2 em, .finale-copy h2 em { color: var(--acid); font-style: normal; text-shadow: 3px 3px 0 var(--violet-deep); }
.lead-copy { color: var(--paper); font-size: clamp(17px, 1.4vw, 22px); font-weight: 700; line-height: 1.48; margin: 33px 0 15px; }
.lore-copy > p:not(.eyebrow) { color: rgba(244,240,237,.73); font-size: 16px; line-height: 1.66; }
.quote-box { border-left: 3px solid var(--violet); margin-top: 30px; padding: 6px 0 7px 24px; position: relative; }
.quote-box p { color: var(--acid); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .07em; line-height: 1.55; margin: 0 0 10px; max-width: 440px; }
.quote-box b { color: rgba(244,240,237,.55); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; }

.cabinet { align-items: center; background: #08070f; display: flex; padding: 100px 0; }
.cabinet::before { background: radial-gradient(circle at 50% 45%, rgba(155,66,253,.22), transparent 34rem); content: ""; inset: 0; position: absolute; z-index: -1; }
.section-heading { align-items: end; display: grid; grid-template-columns: 1fr auto; margin-bottom: clamp(36px, 6vw, 88px); }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { grid-column: 1; }
.section-heading > p { color: rgba(244,240,237,.62); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1.6; margin: 0 0 7px; max-width: 260px; }
.cabinet-grid { display: grid; gap: clamp(16px, 2.3vw, 37px); grid-template-columns: repeat(3, 1fr); }
.cabinet-card { background: linear-gradient(135deg, rgba(18,17,29,.94), rgba(7,6,13,.65)); border: 1px solid rgba(199,255,0,.26); min-height: 378px; overflow: hidden; padding: 23px; position: relative; transition: border-color .25s, transform .25s, box-shadow .25s; }
.cabinet-card::before { background: linear-gradient(115deg, transparent 39%, rgba(199,255,0,.08) 40%, transparent 47%); content: ""; inset: 0; opacity: 0; position: absolute; transform: translateX(-55%); transition: opacity .2s, transform .55s; }
.cabinet-card:hover { border-color: var(--acid); box-shadow: 0 13px 40px rgba(61,20,128,.4), 0 0 28px rgba(199,255,0,.12); transform: translateY(-7px) rotate(-.7deg); }
.cabinet-card:hover::before { opacity: 1; transform: translateX(55%); }
.card-count { color: var(--acid); font-family: var(--mono); font-size: 9px; letter-spacing: .15em; position: relative; z-index: 1; }
.card-icon { color: var(--acid); font-family: Arial, sans-serif; font-size: 76px; line-height: 1; margin: 50px 0 35px; position: relative; text-shadow: 0 0 25px rgba(199,255,0,.6); z-index: 1; }
.cabinet-card h3 { color: var(--paper); font-family: var(--display); font-size: clamp(25px, 2.7vw, 43px); font-weight: 400; letter-spacing: -.02em; line-height: .85; margin: 0; position: relative; z-index: 1; }
.cabinet-card p { color: rgba(244,240,237,.68); font-size: 14px; line-height: 1.57; margin: 12px 0 42px; max-width: 310px; position: relative; z-index: 1; }
.card-tag { bottom: 20px; color: var(--acid); font-family: var(--mono); font-size: 9px; left: 23px; letter-spacing: .13em; position: absolute; z-index: 1; }
.cabinet-card--tycoon { background: radial-gradient(circle at 76% 45%, rgba(204,255,0,.22), transparent 34%), linear-gradient(135deg, rgba(50,16,95,.86), rgba(9,8,14,.91)); border-color: rgba(151,72,255,.78); }
.cabinet-card--snake, .cabinet-card--tycoon, .cabinet-card--ghoul { isolation: isolate; }
.cabinet-card--snake::after, .cabinet-card--tycoon::after, .cabinet-card--ghoul::after { background: linear-gradient(90deg, rgba(8,7,15,.98) 0%, rgba(8,7,15,.93) 45%, rgba(8,7,15,.38) 72%, transparent 100%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.cabinet-character-stage { align-items: center; bottom: 14px; display: flex; justify-content: center; pointer-events: none; position: absolute; right: -1%; top: 42px; width: 68%; z-index: 0; }
.cabinet-character-stage::before { background: radial-gradient(circle, rgba(199,255,0,.16), transparent 69%); content: ""; inset: 4%; position: absolute; }
.cabinet-card--tycoon .cabinet-character-stage::before, .cabinet-card--ghoul .cabinet-character-stage::before { background: radial-gradient(circle, rgba(168,85,247,.2), transparent 69%); }
.cabinet-character { animation: sidekickHover 5.4s ease-in-out infinite; filter: drop-shadow(0 0 13px rgba(199,255,0,.55)); height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; object-position: center center; position: relative; width: 100%; z-index: 1; }
.cabinet-card--snake .cabinet-character { animation-duration: 5.8s; }
.cabinet-card--tycoon .cabinet-character { animation-duration: 5.2s; }
.cabinet-card--ghoul .cabinet-character { animation-direction: reverse; animation-duration: 6.1s; filter: drop-shadow(0 0 13px rgba(168,85,247,.72)); }
.cabinet-card--snake .card-count, .cabinet-card--tycoon .card-count, .cabinet-card--ghoul .card-count, .cabinet-card--snake h3, .cabinet-card--tycoon h3, .cabinet-card--ghoul h3, .cabinet-card--snake p, .cabinet-card--tycoon p, .cabinet-card--ghoul p, .cabinet-card--snake .card-tag, .cabinet-card--tycoon .card-tag, .cabinet-card--ghoul .card-tag { z-index: 2; }
.cabinet-card--snake h3, .cabinet-card--tycoon h3, .cabinet-card--ghoul h3 { margin-top: 92px; max-width: 58%; }
.cabinet-card--snake p, .cabinet-card--tycoon p, .cabinet-card--ghoul p { max-width: 55%; }
.cabinet-card--ghoul { border-color: rgba(151,72,255,.5); }

.roadmap { align-items: center; background: linear-gradient(116deg, #100c22, #09070e 50%, #13051f); display: flex; padding: 100px 0; }
.roadmap-haze { background: radial-gradient(circle at 75% 34%, rgba(199,255,0,.24), transparent 21rem), radial-gradient(circle at 52% 80%, rgba(148,52,255,.32), transparent 31rem); inset: 0; position: absolute; z-index: -1; }
.roadmap-layout { align-items: center; display: grid; gap: clamp(42px, 9vw, 185px); grid-template-columns: .7fr 1.1fr; }
.roadmap-intro { max-width: 555px; }
.roadmap-intro > p:not(.eyebrow) { color: rgba(244,240,237,.68); font-size: 15px; line-height: 1.68; margin: 32px 0; }
.text-link { border-bottom: 1px solid var(--acid); color: var(--acid); display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; padding-bottom: 7px; transition: color .2s, border-color .2s; }
.text-link:hover { border-color: var(--paper); color: var(--paper); }
.roadmap-list { counter-reset: roadmap; list-style: none; margin: 0; padding: 0; }
.roadmap-list li { align-items: center; border-bottom: 1px solid rgba(244,240,237,.18); display: grid; gap: 19px; grid-template-columns: 42px 1fr auto; min-height: 118px; padding: 17px 0; position: relative; transition: padding .25s ease, border-color .25s; }
.roadmap-list li:first-child { border-top: 1px solid rgba(244,240,237,.18); }
.roadmap-list li::before { background: linear-gradient(90deg, rgba(199,255,0,.16), transparent); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity .25s; }
.roadmap-list li:hover { border-color: var(--acid); padding-left: 13px; }
.roadmap-list li:hover::before { opacity: 1; }
.roadmap-index { color: var(--violet); font-family: var(--display); font-size: 30px; position: relative; }
.roadmap-list p { color: var(--acid); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; margin: 0 0 6px; position: relative; }
.roadmap-list h3 { color: var(--paper); font-family: var(--display); font-size: clamp(21px, 2.2vw, 35px); font-weight: 400; line-height: .85; margin: 0 0 7px; position: relative; }
.roadmap-list li div span { color: rgba(244,240,237,.55); font-size: 12px; line-height: 1.45; position: relative; }
.roadmap-status { border: 1px solid rgba(199,255,0,.45); color: var(--acid); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; padding: 6px 7px; position: relative; }

.finale { align-items: center; background: radial-gradient(circle at 58% 47%, rgba(151,72,255,.4), transparent 27rem), #07060c; display: flex; padding: 100px 0 40px; }
.finale::before { background: linear-gradient(90deg, var(--ink) 0%, rgba(7,6,12,.65) 46%, rgba(7,6,12,.1) 100%); content: ""; inset: 0; position: absolute; z-index: -1; }
.finale-layout { align-items: center; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 690px; }
.finale-copy { max-width: 680px; position: relative; z-index: 4; }
.finale-copy > p:not(.eyebrow) { color: rgba(244,240,237,.77); font-size: 17px; line-height: 1.65; margin: 34px 0; max-width: 560px; }
.finale-actions { align-items: stretch; display: flex; flex-wrap: wrap; gap: 15px; }
.ca-button--wide { min-width: 208px; }
.finale-art { align-self: stretch; min-height: 620px; position: relative; }
.finale-art::before { animation: glowPulse 3s infinite alternate; background: radial-gradient(circle, rgba(199,255,0,.78), rgba(94,30,181,.42) 36%, transparent 66%); content: ""; height: 89%; position: absolute; right: 8%; top: 1%; width: 86%; }
.finale-art::after { background: linear-gradient(0deg, #07060c, transparent 27%); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 2; }
.tycoon--finale { animation: finaleFloat 6s ease-in-out infinite; bottom: 0; filter: drop-shadow(0 0 20px rgba(199,255,0,.64)); height: 100%; left: 50%; transform: translateX(-50%); width: auto; z-index: 3; }
.finale-stamp { background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--acid); color: var(--ink); font-family: var(--display); font-size: clamp(21px, 2.2vw, 36px); left: 4%; line-height: .78; padding: 12px; position: absolute; text-align: center; top: 16%; transform: rotate(-11deg); z-index: 5; }
.finale-stamp b { color: var(--violet-deep); font-size: 1.25em; }
.finale-rain { background: repeating-linear-gradient(98deg, transparent 0 44px, rgba(199,255,0,.14) 45px 47px, transparent 48px 93px); inset: 0; opacity: .27; position: absolute; transform: skewX(-16deg); z-index: -1; }

.footer { align-items: center; background: #050509; border-top: 1px solid rgba(199,255,0,.18); display: flex; gap: 30px; justify-content: space-between; min-height: 105px; padding: 22px clamp(24px, 6.3vw, 121px); position: relative; z-index: 5; }
.brand--footer { font-size: 20px; }
.footer p { color: rgba(244,240,237,.43); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; margin: 0; text-align: center; }
.footer > div { display: flex; gap: 18px; }
.footer > div a { color: rgba(244,240,237,.75); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.footer > div a:hover { color: var(--acid); }
.toast { background: var(--acid); border: 2px solid var(--ink); bottom: 24px; box-shadow: 5px 5px 0 var(--violet); color: var(--ink); font-family: var(--display); font-size: 16px; left: 50%; opacity: 0; padding: 12px 18px; pointer-events: none; position: fixed; transform: translate(-50%, 23px) rotate(-2deg); transition: opacity .18s, transform .22s; z-index: 80; }
.toast--visible { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); }

[data-reveal] { opacity: 0; transform: translateY(25px); transition: opacity .62s ease, transform .72s cubic-bezier(.2,.72,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.cabinet-card:nth-child(2) { transition-delay: .1s; }
.cabinet-card:nth-child(3) { transition-delay: .2s; }
.roadmap-list li:nth-child(2) { transition-delay: .08s; }.roadmap-list li:nth-child(3) { transition-delay: .16s; }.roadmap-list li:nth-child(4) { transition-delay: .24s; }

@keyframes ping { 0% { opacity: .8; transform: scale(.4); } 80%,100% { opacity: 0; transform: scale(1.7); } }
@keyframes orb { from { transform: translate(-2%, -2%) scale(.94); } to { transform: translate(4%, 6%) scale(1.1); } }
@keyframes smoke { from { transform: rotate(0deg) scale(.86); } to { transform: rotate(360deg) scale(1.14); } }
@keyframes flicker { 0%, 17%, 22%, 59%, 100% { opacity: 0; } 19%, 20%, 57% { opacity: 1; } }
@keyframes rotateSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes heroFloat { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 16px; } }
@keyframes vialFloat { 0%,100% { margin-bottom: 0; transform: translateX(-50%) rotate(-1deg); } 50% { margin-bottom: 13px; transform: translateX(-50%) rotate(1deg); } }
@keyframes finaleFloat { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: 11px; } }
@keyframes drip { 0%,100% { transform: scaleY(.55); transform-origin: top; } 50% { transform: scaleY(1.1); transform-origin: top; } }
@keyframes scrollLine { 0%,100% { transform: scaleX(.25); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }
@keyframes glowPulse { from { opacity: .48; transform: scale(.93); } to { opacity: .9; transform: scale(1.08); } }
@keyframes sidekickHover { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }

@media (max-width: 1050px) {
  .topbar { height: 81px; padding-top: 13px; padding-bottom: 13px; }
  .main-nav { gap: 22px; margin-left: 1vw; }
  .topbar-actions { gap: 12px; }
  .micro-link { display: none; }
  .hero-grid { grid-template-columns: minmax(0, .93fr) minmax(340px, .8fr); }
  .hero-art { min-height: 610px; }
  .tycoon--hero { height: min(68vw, 810px); }
  .sticker--audit { right: 0; }
  .lore-layout { gap: 45px; }
  .roadmap-layout { gap: 50px; }
}

@media (max-width: 760px) {
  .chapter { min-height: auto; }
  .topbar { background: linear-gradient(180deg, rgba(5,4,11,.95), transparent); height: 76px; padding-left: 20px; padding-right: 20px; position: absolute; }
  .brand { font-size: 25px; }
  .main-nav { display: none; }
  .toxic-button--compact { font-size: 13px; min-height: 40px; padding: 8px 11px; }
  .page-shell { padding-left: 20px; padding-right: 20px; }
  .hero { align-items: flex-start; min-height: 830px; padding-top: 125px; }
  .hero::before { background: linear-gradient(180deg, rgba(5,4,11,.98) 0%, rgba(5,4,11,.76) 52%, rgba(5,4,11,.1) 100%); }
  .hero-grid { display: block; min-height: 0; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(76px, 25vw, 154px); }
  .hero-lead { font-size: 14px; margin: 27px 0 22px; max-width: 90%; }
  .hero-actions { gap: 12px; }
  .toxic-button, .ca-button { font-size: 17px; min-height: 52px; padding: 10px 13px; }
  .ca-button { min-width: 143px; }
  .hero-footnote { font-size: 8px; gap: 8px; margin-top: 23px; }
  .hero-art { bottom: 0; left: 0; min-height: 510px; pointer-events: none; position: absolute; right: 0; top: 325px; }
  .tycoon--hero { height: 590px; left: 56%; }
  .hazard-ring--outer { height: 440px; width: 440px; }.hazard-ring--inner { height: 340px; width: 340px; }
  .sticker--audit { font-size: 12px; right: 5%; top: 17%; }.sticker--fresh { font-size: 10px; left: 8%; top: 26%; }
  .label--right, .label--left { display: none; }
  .vertical-warning { display: none; }
  .hero-scroll-cue { bottom: 18px; left: 20px; }
  .lore { padding: 85px 0; }.lore-layout { display: flex; flex-direction: column-reverse; gap: 38px; }.lore-art-panel { align-self: auto; min-height: 462px; width: 100%; }.tycoon--vial { height: 110%; }
  .lore-copy h2, .section-heading h2, .roadmap-intro h2, .finale-copy h2 { font-size: clamp(67px, 20vw, 110px); }
  .lore-copy > p:not(.eyebrow), .roadmap-intro > p:not(.eyebrow), .finale-copy > p:not(.eyebrow) { font-size: 14px; }
  .cabinet { padding: 82px 0; }.section-heading { display: block; margin-bottom: 38px; }.section-heading > p { margin-top: 23px; }.cabinet-grid { grid-template-columns: 1fr; }.cabinet-card { min-height: 310px; }.cabinet-card p { margin-bottom: 36px; }.cabinet-character-stage { bottom: 12px; right: -2%; top: 32px; width: 73%; }.cabinet-card--snake h3, .cabinet-card--tycoon h3, .cabinet-card--ghoul h3 { margin-top: 76px; max-width: 59%; }.cabinet-card--snake p, .cabinet-card--tycoon p, .cabinet-card--ghoul p { max-width: 55%; }
  .roadmap { padding: 85px 0; }.roadmap-layout { display: block; }.roadmap-intro { margin-bottom: 42px; }.roadmap-list li { gap: 12px; grid-template-columns: 26px 1fr; padding: 17px 0; }.roadmap-status { display: none; }.roadmap-list li div span { font-size: 11px; }
  .finale { padding: 85px 0 0; }.finale-layout { display: block; min-height: auto; }.finale-art { min-height: 436px; margin-top: 18px; }.tycoon--finale { height: 101%; }.finale-stamp { font-size: 20px; left: 6%; top: 16%; }.footer { align-items: flex-start; flex-direction: column; gap: 17px; padding: 28px 20px; }.footer p { text-align: left; }.toast { font-size: 14px; max-width: calc(100vw - 40px); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Homepage rebuilt around the supplied Toxic Tycoon reference composition. */
.topbar {
  height: 112px;
  padding: 22px clamp(36px, 4.1vw, 80px);
}
.brand {
  color: var(--acid);
  font-size: clamp(30px, 2.45vw, 46px);
  letter-spacing: -2.3px;
  text-shadow: 2px 3px 0 #121006, 0 0 17px rgba(199,255,0,.62);
}
.brand i { color: var(--acid); }
.brand-skull { color: var(--acid); font-size: .5em; margin-right: 5px; }
.main-nav { gap: clamp(29px, 4.1vw, 80px); margin-left: 8vw; }
.main-nav a {
  color: rgba(244,240,237,.78);
  font-size: clamp(12px, .9vw, 17px);
  letter-spacing: .13em;
}
.main-nav .nav-social { color: rgba(244,240,237,.86); font-size: 1.1em; }
.header-pump {
  background: var(--acid);
  border: 2px solid #2c2a0b;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(199,255,0,.16), 0 0 25px rgba(199,255,0,.48), inset 0 -5px 0 rgba(54,67,0,.18);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(20px, 1.65vw, 32px);
  letter-spacing: .015em;
  line-height: 1;
  padding: 12px 25px 10px;
  position: relative;
  transform: rotate(-1.5deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.header-pump::after {
  border-bottom: 5px solid var(--acid);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  bottom: -11px;
  content: "";
  height: 10px;
  left: 23%;
  position: absolute;
  width: 52%;
}
.header-pump:hover { box-shadow: 0 0 0 4px rgba(199,255,0,.23), 0 0 38px rgba(199,255,0,.68); transform: rotate(1deg) translateY(-3px); }

.hero {
  align-items: stretch;
  background:
    radial-gradient(ellipse at 78% 38%, rgba(110,37,189,.56), transparent 31%),
    radial-gradient(ellipse at 67% 50%, rgba(199,255,0,.23), transparent 27%),
    linear-gradient(110deg, #08080e 0%, #09070f 47%, #120a20 100%);
  min-height: max(100svh, 820px);
  padding: 0;
}
.hero::before {
  background:
    linear-gradient(90deg, rgba(5,4,11,.98) 0%, rgba(5,4,11,.94) 32%, rgba(5,4,11,.22) 64%, rgba(5,4,11,.58) 100%),
    linear-gradient(0deg, rgba(5,4,11,.95) 0%, transparent 25%, transparent 78%, rgba(5,4,11,.76) 100%);
  z-index: 0;
}
.hero-aura { z-index: 0; }
.hero-stage {
  align-items: center;
  display: grid;
  grid-template-columns: 51.5% 48.5%;
  min-height: clamp(625px, calc(100svh - 230px), 800px);
  padding-bottom: clamp(155px, 17vh, 210px);
  padding-top: 104px;
  position: relative;
  z-index: 2;
}
.hero-copy { align-self: center; margin-top: 10px; max-width: 785px; }
.hero h1 { font-size: clamp(94px, 9.8vw, 188px); line-height: .7; letter-spacing: -.06em; }
.hero h1 .hero-title-main {
  color: var(--paper);
  display: block;
  font-family: var(--display);
  letter-spacing: -.045em;
  text-shadow: 4px 5px 0 rgba(13,12,17,.88), 0 0 4px rgba(244,240,237,.45);
  transform: none;
}
.hero h1 strong {
  color: var(--acid);
  font-size: 1.12em;
  letter-spacing: -.08em;
  margin-top: 11px;
  text-shadow: 4px 5px 0 #25202a, 0 0 21px rgba(199,255,0,.42);
  transform: skew(-8deg) rotate(-1.2deg);
}
.hero-kicker {
  color: #a656fa;
  font-family: var(--mono);
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 700;
  letter-spacing: .32em;
  margin: 42px 0 16px 6px;
  text-shadow: 0 0 17px rgba(151,72,255,.55);
}
.hero-rule { align-items: center; display: flex; gap: 9px; margin: 0 0 28px 6px; }
.hero-rule::before, .hero-rule::after { background: linear-gradient(90deg, var(--acid), rgba(199,255,0,0)); content: ""; height: 2px; width: min(17vw, 255px); }
.hero-rule::after { background: linear-gradient(90deg, rgba(199,255,0,.15), rgba(199,255,0,0)); width: min(6vw, 105px); }
.hero-rule span { color: var(--acid); font-size: 15px; text-shadow: 0 0 14px var(--acid); }
.hero-actions { gap: 22px; }
.hero-actions .toxic-button, .hero-actions .ca-button { min-height: 68px; }
.hero-actions .toxic-button { border-radius: 9px; font-size: clamp(20px, 1.65vw, 31px); padding: 13px 27px; }
.hero-actions .ca-button { border-radius: 7px; font-size: clamp(18px, 1.48vw, 27px); min-width: clamp(195px, 15vw, 283px); }
.hero-art { align-self: stretch; min-height: 0; overflow: hidden; position: relative; }
.hero-art::after { background: linear-gradient(0deg, rgba(7,6,12,.96) 0%, rgba(7,6,12,.18) 32%, transparent 64%); height: 65%; z-index: 5; }
.hazard-ring--outer { height: min(45vw, 840px); left: 50%; top: 46%; width: min(45vw, 840px); }
.hazard-ring--inner { height: min(35vw, 650px); left: 50%; top: 46%; width: min(35vw, 650px); }
.hero-shadow { bottom: 4%; left: 14%; width: 76%; z-index: 3; }
.tycoon--hero {
  bottom: -27%;
  filter: drop-shadow(0 0 21px rgba(209,255,11,.72)) drop-shadow(0 0 52px rgba(111,39,224,.65));
  height: min(73vw, 1185px);
  left: 48%;
  z-index: 4;
}
.drip--one { left: 12%; top: 24%; }.drip--two { right: 17%; top: 19%; }.drip--three { right: 8%; top: 51%; }
.hero-cards {
  bottom: clamp(22px, 4vh, 52px);
  display: grid;
  gap: clamp(16px, 2vw, 36px);
  grid-template-columns: repeat(3, 1fr);
  left: 0;
  position: absolute;
  right: 0;
  z-index: 8;
}
.hero-card {
  align-items: center;
  background: linear-gradient(110deg, rgba(16,13,25,.84), rgba(15,12,22,.46));
  border: 1px solid rgba(151,72,255,.84);
  border-radius: 15px;
  box-shadow: inset 0 0 30px rgba(151,72,255,.08), 0 0 18px rgba(151,72,255,.12);
  display: grid;
  gap: clamp(11px, 1.3vw, 23px);
  grid-template-columns: clamp(46px, 5vw, 91px) 1fr 22px;
  min-height: clamp(125px, 14vh, 170px);
  overflow: hidden;
  padding: 17px clamp(15px, 1.8vw, 30px);
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-card::before { background: radial-gradient(circle at 10% 50%, rgba(199,255,0,.14), transparent 48%); content: ""; inset: 0; opacity: .6; position: absolute; }
.hero-card:hover { border-color: var(--acid); box-shadow: inset 0 0 32px rgba(199,255,0,.1), 0 0 24px rgba(199,255,0,.22); transform: translateY(-5px); }
.hero-card > * { position: relative; z-index: 1; }
.hero-card-icon { color: var(--acid); filter: drop-shadow(0 0 9px rgba(199,255,0,.72)); font-family: Arial, sans-serif; font-size: clamp(45px, 4.6vw, 82px); line-height: 1; text-align: center; }
.hero-card-copy { display: block; }
.hero-card-copy b { color: var(--acid); display: block; font-family: var(--display); font-size: clamp(25px, 2.4vw, 48px); font-weight: 400; letter-spacing: -.025em; line-height: .8; margin-bottom: 10px; }
.hero-card-copy small { color: rgba(244,240,237,.8); display: block; font-family: var(--mono); font-size: clamp(8px, .77vw, 13px); letter-spacing: .06em; line-height: 1.5; }
.hero-card > i { color: var(--acid); font-family: Arial, sans-serif; font-size: 34px; font-style: normal; text-shadow: 0 0 10px var(--acid); transition: transform .2s ease; }
.hero-card:hover > i { transform: translateX(6px); }
.hero-card--plan .hero-card-icon { font-size: clamp(48px, 5vw, 85px); }.hero-card--cure .hero-card-icon { color: #c6fa00; }

@media (max-width: 1050px) {
  .topbar { height: 86px; padding: 15px 28px; }.main-nav { gap: 24px; margin-left: 2vw; }.header-pump { font-size: 19px; padding: 10px 16px 8px; }
  .hero-stage { grid-template-columns: 53% 47%; min-height: 670px; padding-bottom: 165px; padding-top: 84px; }.hero h1 { font-size: clamp(80px, 10vw, 134px); }.hero-kicker { margin-top: 30px; }
  .hero-actions { gap: 13px; }.hero-actions .toxic-button, .hero-actions .ca-button { min-height: 57px; }.hero-actions .toxic-button { font-size: 20px; padding: 11px 16px; }.hero-actions .ca-button { min-width: 170px; }
  .tycoon--hero { bottom: -14%; height: min(84vw, 920px); }.hero-card-copy b { font-size: clamp(22px, 2.7vw, 37px); }.hero-card { grid-template-columns: 54px 1fr 18px; min-height: 128px; padding: 15px; }.hero-card-copy small { font-size: 8px; }
}

@media (max-width: 760px) {
  .topbar { height: 72px; padding: 13px 17px; }.brand { font-size: 25px; }.main-nav { display: none; }.header-pump { border-radius: 8px; font-size: 15px; padding: 8px 11px 7px; }
  .hero { min-height: 940px; }.hero-stage { display: block; min-height: 0; padding: 116px 20px 0; }.hero-copy { margin: 0; }.hero h1 { font-size: clamp(73px, 24.4vw, 126px); }.hero-kicker { font-size: 13px; letter-spacing: .23em; margin: 28px 0 12px 3px; }.hero-rule { margin-left: 3px; margin-bottom: 21px; }.hero-rule::before { width: 37vw; }.hero-rule::after { width: 20vw; }
  .hero-actions { gap: 9px; }.hero-actions .toxic-button, .hero-actions .ca-button { min-height: 51px; }.hero-actions .toxic-button { font-size: 16px; padding: 9px 10px; }.hero-actions .ca-button { font-size: 16px; min-width: 128px; padding: 9px 8px; }
  .hero-art { bottom: 181px; left: 0; min-height: 475px; position: absolute; right: 0; top: auto; }.tycoon--hero { bottom: -9%; height: 670px; left: 54%; }.hazard-ring--outer { height: 470px; top: 52%; width: 470px; }.hazard-ring--inner { height: 360px; top: 52%; width: 360px; }
  .hero-cards { bottom: 17px; display: flex; gap: 8px; overflow-x: auto; padding-left: 20px; padding-right: 20px; scrollbar-width: none; }.hero-cards::-webkit-scrollbar { display: none; }.hero-card { flex: 0 0 min(87vw, 370px); grid-template-columns: 52px 1fr 19px; min-height: 131px; padding: 14px; }.hero-card-copy b { font-size: 31px; }.hero-card-copy small { font-size: 9px; }.hero-card-icon { font-size: 45px; }
}

/* Exact first-screen artwork supplied by the user. Functional areas remain clickable above it. */
#top.topbar { opacity: 0; pointer-events: none; }
.hero {
  aspect-ratio: 1521 / 855;
  background: #06050b;
  height: min(100svh, 56.213vw);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.hero::before,
.hero-aura,
.hero-stage,
.hero-cards { display: none; }
.hero-reference-image {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  user-select: none;
  width: 100%;
  z-index: 1;
}
.hero-hotspots { inset: 0; position: absolute; z-index: 4; }
.hero-hotspot {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  position: absolute;
}
.hero-hotspot:focus-visible { box-shadow: 0 0 0 3px #c7ff00, 0 0 15px 4px rgba(199,255,0,.66); }
.hero-hotspot--lore { height: 7%; left: 31%; top: 1.4%; width: 7.4%; }
.hero-hotspot--roadmap { height: 7%; left: 40.2%; top: 1.4%; width: 9.1%; }
.hero-hotspot--x { height: 7%; left: 50.8%; top: 1.4%; width: 5.1%; }
.hero-hotspot--tg { height: 7%; left: 56.5%; top: 1.4%; width: 5.1%; }
.hero-hotspot--pump { height: 9%; left: 84.8%; top: .15%; width: 14.4%; }
.hero-hotspot--buy { height: 10%; left: 2.3%; top: 62.5%; width: 24.6%; }
.hero-hotspot--ca { height: 10%; left: 27.7%; top: 62.5%; width: 15.3%; }
.hero-hotspot--card-lore { height: 22%; left: 4.1%; top: 76.1%; width: 28.9%; }
.hero-hotspot--card-plan { height: 22%; left: 34.4%; top: 76.1%; width: 28.9%; }
.hero-hotspot--card-cure { height: 22%; left: 64.8%; top: 76.1%; width: 28.9%; }

@media (max-width: 760px) {
  .hero { height: 56.213vw; min-height: 0; }
  .hero-hotspot:focus-visible { box-shadow: 0 0 0 2px #c7ff00; }
}