:root{--display:"Arial Black",Impact,sans-serif;--body:"Courier New",ui-monospace,monospace}
    
:root {
  --void: #03050a;
  --ink: #e9fbff;
  --muted: #88a4ad;
  --cyan: #00e7ff;
  --red: #ff365c;
  --amber: #ffd43b;
  --violet: #8e6cff;
  --panel: #080d17;
  --line: rgba(0, 231, 255, 0.26);
  --background: #03050a;
  --foreground: #e9fbff;
  --card: #080d17;
  --card-foreground: #e9fbff;
  --popover: #080d17;
  --popover-foreground: #e9fbff;
  --primary: #00e7ff;
  --primary-foreground: #03050a;
  --secondary: #111928;
  --secondary-foreground: #e9fbff;
  --muted-foreground: #88a4ad;
  --accent: #ff365c;
  --accent-foreground: #fff;
  --destructive: #ff365c;
  --border: rgba(0, 231, 255, 0.26);
  --input: rgba(0, 231, 255, 0.26);
  --ring: #00e7ff;
  --radius: 0;
}
.dark {
  --background: #03050a;
  --foreground: #e9fbff;
  --card: #080d17;
  --card-foreground: #e9fbff;
  --popover: #080d17;
  --popover-foreground: #e9fbff;
  --primary: #00e7ff;
  --primary-foreground: #03050a;
  --secondary: #111928;
  --secondary-foreground: #e9fbff;
  --muted: #111928;
  --muted-foreground: #88a4ad;
  --accent: #ff365c;
  --accent-foreground: #fff;
  --border: rgba(0, 231, 255, 0.26);
  --input: rgba(0, 231, 255, 0.26);
  --ring: #00e7ff;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--void);
  scroll-behavior: smooth;
}
body {
  background: var(--void);
  color: var(--ink);
  font:
    17px/1.72 var(--body),
    ui-monospace,
    monospace;
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
}
::selection {
  background: var(--cyan);
  color: var(--void);
}
.arcade {
  background: var(--void);
  min-height: 100vh;
  position: relative;
}
.arcade::before {
  background-image:
    linear-gradient(rgba(0, 231, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 231, 255, 0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.16) 4px
  );
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 50;
}
.hud {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(3, 5, 10, 0.86);
  border-bottom: 1px solid var(--line);
  display: grid;
  font:
    700 0.7rem/1 var(--display),
    ui-monospace,
    monospace;
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: 0.13em;
  min-height: 68px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 40;
}
.hud-brand {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}
.status-light {
  animation: pulse 1.8s ease-in-out infinite;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  display: inline-block;
  height: 7px;
  width: 7px;
}
.hud-status {
  color: var(--muted);
  display: flex;
  gap: 2.4rem;
}
.hud-status span:last-child {
  color: var(--cyan);
}
.hud-buy {
  border: 1px solid var(--cyan);
  color: var(--cyan);
  justify-self: end;
  padding: 0.78rem 1rem;
  transition: 0.2s ease;
}
.hud-buy:hover {
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(0, 231, 255, 0.38);
  color: var(--void);
}
.hero {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  isolation: isolate;
  min-height: calc(100svh - 68px);
  overflow: hidden;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.25rem, 7vw, 8rem) 3rem;
  position: relative;
}
.hero::after {
  background: radial-gradient(
    circle,
    rgba(0, 231, 255, 0.42) 0 2px,
    transparent 3px
  );
  background-size: 92px 92px;
  content: '';
  inset: 0;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 35%,
    transparent 92%
  );
  opacity: 0.2;
  position: absolute;
  z-index: -1;
}
.hero-grid {
  background:
    linear-gradient(to top, rgba(0, 231, 255, 0.19), transparent 55%),
    repeating-linear-gradient(
      90deg,
      transparent 0 8vw,
      rgba(0, 231, 255, 0.12) calc(8vw + 1px)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 8vw,
      rgba(0, 231, 255, 0.12) calc(8vw + 1px)
    );
  bottom: -37%;
  height: 65%;
  left: -15%;
  position: absolute;
  transform: perspective(420px) rotateX(60deg);
  width: 130%;
  z-index: -1;
}
.hero-content {
  margin: auto;
  max-width: 1180px;
  text-align: center;
  width: 100%;
}
.system-label,
.kicker {
  color: var(--cyan);
  font:
    700 clamp(0.72rem, 1vw, 0.86rem)/1.4 var(--display),
    ui-monospace,
    monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero h1 {
  filter: drop-shadow(0 0 28px rgba(0, 231, 255, 0.15));
  font:
    900 clamp(4.2rem, 11vw, 10.5rem)/0.79 var(--display),
    Impact,
    sans-serif;
  letter-spacing: -0.055em;
  margin: 2rem 0 2.4rem;
  text-transform: uppercase;
}
.hero h1 span {
  display: block;
  text-shadow:
    -3px 0 var(--red),
    3px 0 var(--cyan);
}
.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.18vw, 3px) var(--ink);
  text-shadow: 0 0 26px rgba(233, 251, 255, 0.2);
}
.hero-question {
  font:
    400 clamp(1.25rem, 2.3vw, 2rem)/1.45 var(--body),
    ui-monospace,
    monospace;
  margin: 0 auto;
  max-width: 880px;
}
.start-button {
  align-items: center;
  background: var(--amber);
  border: 2px solid var(--amber);
  box-shadow: 6px 6px 0 var(--red);
  color: var(--void);
  display: inline-flex;
  font:
    900 0.82rem/1 var(--display),
    ui-monospace,
    monospace;
  gap: 0.75rem;
  letter-spacing: 0.12em;
  margin-top: 3rem;
  min-height: 58px;
  padding: 0 1.6rem;
  text-transform: uppercase;
  transition:
    transform 0.16s,
    box-shadow 0.16s;
}
.start-button:hover {
  box-shadow: 2px 2px 0 var(--red);
  transform: translate(4px, 4px);
}
.hero-footer {
  bottom: 1.4rem;
  color: var(--muted);
  display: flex;
  font:
    700 0.65rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  left: clamp(1.25rem, 4vw, 4.5rem);
  letter-spacing: 0.16em;
  position: absolute;
  right: clamp(1.25rem, 4vw, 4.5rem);
}
.blink {
  animation: blink 1.15s steps(1, end) infinite;
  color: var(--amber);
}
.game-section {
  border-bottom: 1px solid var(--line);
  min-height: 78svh;
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 7vw, 8rem);
  position: relative;
  z-index: 1;
}
.section-marker {
  border-bottom: 1px solid var(--line);
  color: var(--cyan);
  display: flex;
  font:
    700 0.69rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  letter-spacing: 0.18em;
  padding-bottom: 1rem;
  text-transform: uppercase;
}
.section-marker span:last-child {
  color: var(--muted);
}
.copy-grid {
  display: grid;
  gap: clamp(4rem, 11vw, 11rem);
  grid-template-columns: minmax(0, 1.22fr) minmax(19rem, 0.78fr);
  margin-top: clamp(5rem, 9vh, 7rem);
}
.copy-grid h2,
.statement h2,
.rules-copy h2,
.checkout h2,
.ready h2 {
  font:
    900 clamp(3.8rem, 8.2vw, 8.6rem)/0.9 var(--display),
    Impact,
    sans-serif;
  letter-spacing: -0.055em;
  margin: 0;
  text-transform: uppercase;
}
.copy {
  align-self: end;
  border-left: 2px solid var(--cyan);
  padding-left: clamp(1.3rem, 3vw, 2.5rem);
}
.copy p {
  color: #b9cdd3;
  margin-bottom: 1.5rem;
  max-width: 36rem;
}
.copy .lead {
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.5;
}
.perspective {
  background: linear-gradient(
    135deg,
    rgba(142, 108, 255, 0.1),
    transparent 45%
  );
}
.perspective .section-marker,
.perspective .copy {
  border-color: var(--violet);
}
.perspective .section-marker {
  color: var(--violet);
}
.experience {
  background: var(--amber);
  color: var(--void);
}
.experience .section-marker {
  border-color: rgba(3, 5, 10, 0.35);
  color: var(--void);
}
.experience .section-marker span:last-child {
  color: rgba(3, 5, 10, 0.6);
}
.statement {
  margin-top: clamp(4rem, 8vh, 6rem);
}
.statement .kicker {
  color: var(--void);
  margin-bottom: 1.5rem;
}
.statement h2 {
  color: transparent;
  font-size: clamp(4.3rem, 10vw, 10.5rem);
  -webkit-text-stroke: clamp(2px, 0.2vw, 4px) var(--void);
}
.experience-copy {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin: clamp(3.5rem, 7vh, 5rem) 0 0 auto;
  max-width: 900px;
}
.experience-copy p {
  border-top: 2px solid var(--void);
  padding-top: 1rem;
}
.experience-copy strong {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  grid-column: 1/3;
  line-height: 1.45;
  margin-top: 1rem;
}
.player {
  background:
    radial-gradient(
      circle at 10% 75%,
      rgba(255, 54, 92, 0.14),
      transparent 28%
    ),
    var(--void);
}
.player .section-marker {
  border-color: rgba(255, 54, 92, 0.4);
  color: var(--red);
}
.player h2 span {
  color: var(--red);
  text-shadow: 0 0 25px rgba(255, 54, 92, 0.3);
}
.player .copy {
  border-color: var(--red);
}
.rules-section {
  background: #070916;
  border-bottom: 1px solid rgba(142, 108, 255, 0.4);
  display: grid;
  gap: clamp(4rem, 9vw, 9rem);
  grid-template-columns: 1fr 0.9fr;
  min-height: 100svh;
  padding: clamp(6rem, 11vw, 10rem) clamp(1.25rem, 7vw, 8rem);
  position: relative;
  z-index: 1;
}
.rules-copy .system-label {
  color: var(--violet);
}
.rules-copy h2 {
  margin: 2rem 0 3rem;
}
.rules-copy > p:not(.system-label) {
  color: #b9c0d8;
  margin-bottom: 1.5rem;
  max-width: 42rem;
}
.rules-copy strong {
  color: var(--ink);
  display: block;
  font-size: 1.08rem;
  line-height: 1.65;
  margin-top: 3rem;
}
.rule-vault {
  align-self: center;
  background: #050712;
  border: 1px solid var(--violet);
  box-shadow:
    0 0 70px rgba(142, 108, 255, 0.12),
    inset 0 0 35px rgba(142, 108, 255, 0.05);
  padding: 1rem;
}
.vault-header,
.vault-footer {
  color: var(--violet);
  display: flex;
  font:
    700 0.68rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  letter-spacing: 0.15em;
  padding: 0.5rem 0.35rem 1.5rem;
}
.vault-header span:last-child {
  color: var(--red);
}
.rule-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, 1fr);
}
.rule-slot {
  align-items: center;
  aspect-ratio: 1;
  background: linear-gradient(
    145deg,
    rgba(142, 108, 255, 0.13),
    rgba(0, 231, 255, 0.03)
  );
  border: 1px solid rgba(142, 108, 255, 0.42);
  display: flex;
  justify-content: center;
  position: relative;
}
.rule-slot span {
  color: var(--muted);
  font:
    700 0.65rem/1 var(--display),
    ui-monospace,
    monospace;
  left: 0.7rem;
  position: absolute;
  top: 0.7rem;
}
.rule-slot b {
  color: var(--violet);
  font:
    400 clamp(1.8rem, 4vw, 3.5rem)/1 var(--display),
    ui-monospace,
    monospace;
  text-shadow: 0 0 18px var(--violet);
}
.vault-footer {
  justify-content: center;
  padding: 1.5rem 0.35rem 0.5rem;
}
.checkout {
  background: var(--cyan);
  color: var(--void);
  min-height: 100svh;
  padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 7vw, 8rem);
  position: relative;
  z-index: 1;
}
.checkout-top {
  border-bottom: 2px solid var(--void);
  display: flex;
  font:
    900 0.72rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  letter-spacing: 0.15em;
  padding-bottom: 1rem;
}
.checkout-grid {
  display: grid;
  gap: clamp(4rem, 10vw, 10rem);
  grid-template-columns: 1.2fr 0.8fr;
  margin-top: clamp(5rem, 12vh, 10rem);
}
.checkout .system-label {
  color: var(--void);
  margin-bottom: 2rem;
}
.access-copy {
  color: var(--void);
  font: 700 clamp(1rem, 1.7vw, 1.25rem)/1.55 var(--body);
  margin: 2rem 0 0;
  max-width: 34rem;
}
.order-card {
  align-self: end;
  background: var(--void);
  box-shadow: 10px 10px 0 var(--red);
  color: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}
.order-card dl {
  margin: 0;
}
.order-card dl div {
  border-bottom: 1px solid #253143;
  display: flex;
  justify-content: space-between;
  padding: 1.1rem 0;
}
.order-card dt {
  color: var(--muted);
  font:
    700 0.7rem/1.4 var(--display),
    ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
.order-card dd {
  font:
    700 0.78rem/1.4 var(--display),
    ui-monospace,
    monospace;
  margin: 0;
  text-align: right;
}
.price {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin: 3.5rem 0 1.5rem;
}
.price span {
  color: var(--amber);
  font:
    700 0.72rem/1 var(--display),
    ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  padding-bottom: 0.6rem;
}
.price strong {
  color: var(--cyan);
  font:
    900 clamp(3.3rem, 6vw, 5.8rem)/0.85 var(--display),
    Impact,
    sans-serif;
  letter-spacing: -0.05em;
}
.purchase-button {
  align-items: center;
  background: var(--red);
  box-shadow: 5px 5px 0 var(--amber);
  color: #fff;
  display: flex;
  font:
    900 0.78rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  letter-spacing: 0.1em;
  min-height: 68px;
  padding: 0 1.3rem;
  transition: 0.16s;
}
.purchase-button:hover {
  box-shadow: 1px 1px 0 var(--amber);
  transform: translate(4px, 4px);
}
.ready {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 94svh;
  overflow: hidden;
  padding: 7rem 1.25rem;
  position: relative;
  text-align: center;
  z-index: 1;
}
.ready::before {
  background: radial-gradient(circle, rgba(255, 54, 92, 0.2), transparent 58%);
  content: '';
  height: 70vw;
  left: 50%;
  max-height: 900px;
  max-width: 900px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  z-index: -1;
}
.ready .system-label {
  color: var(--red);
}
.ready h2 {
  font-size: clamp(5rem, 14vw, 13rem);
  margin: 2.5rem 0;
}
.ready h2 span {
  color: var(--red);
  text-shadow:
    -4px 0 var(--cyan),
    4px 0 var(--amber),
    0 0 35px rgba(255, 54, 92, 0.45);
}
.ready > p:not(.system-label) {
  color: #b9cdd3;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.start-button-final {
  box-shadow: 6px 6px 0 var(--cyan);
}
footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font:
    700 0.66rem/1 var(--display),
    ui-monospace,
    monospace;
  justify-content: space-between;
  letter-spacing: 0.15em;
  margin: 0 clamp(1.25rem, 4vw, 4.5rem);
  padding: 2rem 0 2.5rem;
  position: relative;
  z-index: 1;
}
.mobile-buy {
  display: none;
}
a:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 5px;
}
@keyframes blink {
  0%,
  48% {
    opacity: 1;
  }
  49%,
  100% {
    opacity: 0.16;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 900px) {
  .hud-status {
    display: none;
  }
  .hud {
    grid-template-columns: 1fr 1fr;
  }
  .copy-grid,
  .rules-section,
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .copy-grid {
    gap: 4rem;
  }
  .copy {
    margin-left: auto;
    max-width: 38rem;
  }
  .experience-copy {
    grid-template-columns: 1fr;
  }
  .experience-copy strong {
    grid-column: 1;
  }
  .rule-vault,
  .order-card {
    justify-self: end;
    max-width: 36rem;
    width: 100%;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 16px;
    padding-bottom: 0;
  }
  .scanlines {
    opacity: 0.65;
  }
  .hud {
    min-height: 58px;
    padding: 0 1rem;
  }
  .hud-buy {
    display: none;
  }
  .hud-brand {
    font-size: 0.64rem;
  }
  .hero {
    min-height: calc(100svh - 58px);
    padding: 4.5rem 1.1rem 4rem;
  }
  .hero h1 {
    font-size: clamp(3.55rem, 19vw, 5.3rem);
    line-height: 0.84;
    margin: 1.8rem 0 2rem;
  }
  .hero h1 span {
    text-shadow:
      -2px 0 var(--red),
      2px 0 var(--cyan);
  }
  .hero-question {
    font-size: 1.08rem;
    line-height: 1.55;
  }
  .hero-footer {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }
  .hero-footer span:first-child {
    display: none;
  }
  .game-section,
  .rules-section,
  .checkout {
    min-height: auto;
    padding: 5.5rem 1.1rem;
  }
  .copy-grid {
    margin-top: 5rem;
  }
  .copy-grid h2,
  .statement h2,
  .rules-copy h2,
  .checkout h2 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }
  .copy {
    border-left-width: 1px;
    padding-left: 1.2rem;
  }
  .statement {
    margin-top: 5rem;
  }
  .statement h2 {
    font-size: clamp(3.8rem, 18vw, 5.7rem);
  }
  .experience-copy {
    margin-top: 4rem;
  }
  .experience-copy strong {
    margin-top: 1rem;
  }
  .rules-section {
    gap: 4rem;
  }
  .rule-vault {
    padding: 0.7rem;
  }
  .rule-grid {
    gap: 0.4rem;
  }
  .checkout-grid {
    margin-top: 5rem;
  }
  .order-card {
    box-shadow: 6px 6px 0 var(--red);
    padding: 1.25rem;
  }
  .order-card dd {
    max-width: 55%;
  }
  .ready {
    min-height: 82svh;
  }
  .ready h2 {
    font-size: clamp(4.1rem, 22vw, 6.5rem);
  }
  footer {
    padding-bottom: 1.5rem;
  }
  .mobile-buy {
    align-items: center;
    background: var(--red);
    border-top: 2px solid var(--amber);
    bottom: 0;
    color: #fff;
    display: flex;
    font:
      900 0.72rem/1 var(--display),
      ui-monospace,
      monospace;
    height: 58px;
    justify-content: center;
    left: 0;
    letter-spacing: 0.12em;
    position: fixed;
    right: 0;
    z-index: 60;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .status-light,
  .blink {
    animation: none;
  }
  .start-button,
  .purchase-button,
  .hud-buy {
    transition: none;
  }
}

  
  :root{--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
  body{font-family:var(--body);letter-spacing:-.012em}
  .copy p,.rules-copy>p:not(.system-label),.experience-copy p,.experience-copy strong,.hero-question,.ready>p:not(.system-label){font-family:var(--body)}
  .game-progress{background:rgba(0,231,255,.12);bottom:-1px;height:3px;left:0;overflow:hidden;position:absolute;right:0}
  .game-progress span{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--red));box-shadow:0 0 14px var(--cyan);display:block;height:100%;transform-origin:left;width:0;transition:width .35s ease}
  .hud-phase{min-width:13rem;text-align:right}
  .motion-ready [data-fase] .section-marker,.motion-ready [data-fase] h2,.motion-ready [data-fase] .copy,.motion-ready [data-fase] .statement,.motion-ready [data-fase] .experience-copy,.motion-ready [data-fase] .rules-copy,.motion-ready [data-fase] .rule-vault,.motion-ready [data-fase] .checkout-top,.motion-ready [data-fase] .checkout-grid,.motion-ready [data-fase] .hero-content,.motion-ready [data-fase] .ready>p,.motion-ready [data-fase] .ready>.start-button{opacity:.12;transform:translateY(14px)}
  .motion-ready [data-fase].is-visible .section-marker,.motion-ready [data-fase].is-visible h2,.motion-ready [data-fase].is-visible .copy,.motion-ready [data-fase].is-visible .statement,.motion-ready [data-fase].is-visible .experience-copy,.motion-ready [data-fase].is-visible .rules-copy,.motion-ready [data-fase].is-visible .rule-vault,.motion-ready [data-fase].is-visible .checkout-top,.motion-ready [data-fase].is-visible .checkout-grid,.motion-ready [data-fase].is-visible .hero-content,.motion-ready [data-fase].is-visible .ready>p,.motion-ready [data-fase].is-visible .ready>.start-button{opacity:1;transform:translateY(0);transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1)}
  .motion-ready [data-fase].is-visible h2{animation:senal .42s steps(2,end)}
  .motion-ready [data-fase].is-visible .copy,.motion-ready [data-fase].is-visible .experience-copy,.motion-ready [data-fase].is-visible .rule-vault,.motion-ready [data-fase].is-visible .checkout-grid{transition-delay:.04s}
  .motion-ready .game-section{filter:saturate(.72);transition:filter .55s ease}
  .motion-ready .game-section.is-active{filter:saturate(1)}
  .rule-slot{appearance:none;color:inherit;cursor:pointer;font:inherit;overflow:hidden;padding:0}
  .rule-slot::after{background:var(--violet);bottom:.45rem;color:#050712;content:"REGLA BLOQUEADA";font:700 .54rem/1 var(--display),sans-serif;left:.45rem;letter-spacing:.07em;opacity:0;padding:.4rem;position:absolute;right:.45rem;transform:translateY(8px);transition:.16s}
  .rule-slot:hover::after,.rule-slot:focus-visible::after,.rule-slot.comprobando::after{opacity:1;transform:translateY(0)}
  .rule-slot:hover b,.rule-slot:focus-visible b,.rule-slot.comprobando b{color:var(--cyan);text-shadow:-3px 0 var(--red),3px 0 var(--cyan);transform:scale(1.12)}
  .rule-slot b{transition:color .16s,transform .16s,text-shadow .16s}
  .rule-slot.comprobando{animation:bloqueo .42s steps(2,end)}
  .checkout.is-active .order-card{animation:credito .7s ease both}
  @keyframes senal{0%{clip-path:inset(0 0 70% 0);transform:translate(-5px,2px)}45%{clip-path:inset(35% 0 20% 0);transform:translate(5px,-2px)}100%{clip-path:inset(0);transform:none}}
  @keyframes bloqueo{0%,100%{transform:translate(0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px)}}
  @keyframes credito{0%{box-shadow:0 0 0 var(--red);transform:translateY(18px)}100%{box-shadow:10px 10px 0 var(--red);transform:none}}
  @media(max-width:900px){.hud-phase{display:none}}
@media(prefers-reduced-motion:reduce){.motion-ready [data-fase] *{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}.motion-ready .game-section{filter:none}.game-progress span{transition:none}}

/* Ajustes de lectura y conversión */
.scanlines{opacity:.26}
.hero{min-height:calc(92svh - 68px);padding-top:clamp(4.5rem,8vh,6.5rem)}
.hero h1{font-size:clamp(3.9rem,9.2vw,8.6rem);line-height:.82;margin:1.7rem 0 2rem}
.hero-question{font-size:clamp(1.15rem,1.8vw,1.65rem);line-height:1.48;max-width:800px}
.start-button{margin-top:2rem}
.game-section{min-height:auto;padding-top:clamp(4.5rem,7vw,6.5rem);padding-bottom:clamp(4.5rem,7vw,6.5rem)}
.copy-grid{gap:clamp(3rem,8vw,8rem);margin-top:clamp(3.5rem,6vh,5rem)}
.copy-grid h2,.rules-copy h2,.checkout h2{font-size:clamp(3.3rem,6.7vw,7rem);line-height:.92}
.copy p{margin-bottom:1.45rem;max-width:36rem}
.compact-section{background:linear-gradient(135deg,rgba(142,108,255,.1),transparent 50%)}
.phase-invert{background:radial-gradient(circle at 82% 42%,rgba(142,108,255,.18),transparent 34%),linear-gradient(315deg,rgba(142,108,255,.09),transparent 52%)}
.phase-invert .copy-grid{grid-template-columns:minmax(19rem,.78fr) minmax(0,1.22fr)}
.phase-invert .copy-grid h2{grid-column:2;grid-row:1;text-align:right}
.phase-invert .copy{border-left:0;border-right:2px solid var(--violet);grid-column:1;grid-row:1;padding-left:0;padding-right:clamp(1.3rem,3vw,2.5rem)}
.phase-invert .copy-grid h2,.phase-three .copy-grid h2{font-size:clamp(2.9rem,5.3vw,5.5rem);line-height:.95}
.phase-three{background:radial-gradient(circle at 20% 45%,rgba(255,212,59,.11),transparent 34%),linear-gradient(135deg,rgba(255,54,92,.05),transparent 55%)}
.phase-three .section-marker,.phase-three .copy{border-color:var(--amber)}
.phase-three .section-marker{color:var(--amber)}
.rules-section{background:radial-gradient(circle at 76% 50%,rgba(142,108,255,.13),transparent 32%),#040611;min-height:auto;padding-top:clamp(5rem,8vw,7.5rem);padding-bottom:clamp(5rem,8vw,7.5rem)}
.rules-copy h2{margin:1.5rem 0 2.25rem}
.rules-copy>p:not(.system-label){margin-bottom:1.1rem}
.rules-copy strong{margin-top:2rem}
.rule-slot{cursor:pointer}
.rule-slot::after{display:block}
.rule-vault{border-width:2px;box-shadow:0 0 110px rgba(142,108,255,.24),inset 0 0 42px rgba(142,108,255,.08)}
.rule-slot:hover,.rule-slot:focus-visible,.rule-slot.comprobando{border-color:var(--cyan);box-shadow:inset 0 0 22px rgba(0,231,255,.1)}
.checkout{min-height:auto;padding-top:clamp(5rem,8vw,7rem);padding-bottom:clamp(5rem,8vw,7rem)}
.checkout-grid{margin-top:clamp(3.5rem,7vh,6rem)}
.ready{min-height:68svh;padding-top:6rem;padding-bottom:6rem}
.ready h2{align-items:baseline;column-gap:.16em;display:flex;flex-wrap:wrap;font-size:clamp(3.4rem,7.5vw,6.8rem);justify-content:center;line-height:.92;margin:2rem auto;max-width:1100px;row-gap:0}
.ready h2 span{display:inline-block}
.ready>p:not(.system-label){color:var(--ink);font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:600;line-height:1.45}
.copy p,.rules-copy>p:not(.system-label),.rules-copy strong,.ready>p:not(.system-label){color:var(--ink);font-family:var(--body);font-size:clamp(1.125rem,1.5vw,1.3rem);font-weight:500;line-height:1.65}
.access-copy{color:var(--void);font-family:var(--body);font-size:clamp(1.125rem,1.5vw,1.3rem);font-weight:600;line-height:1.65}
.start-button,.purchase-button{font-size:.78rem;letter-spacing:.1em;min-height:64px}
.purchase-button:hover{box-shadow:1px 1px 0 var(--amber);transform:translate(4px,4px)}

@media(max-width:600px){
  .scanlines{opacity:.2}
  .hero{min-height:auto;padding-top:4rem;padding-bottom:4.5rem}
  .hero h1{font-size:clamp(3.15rem,17vw,4.8rem)}
  .hero-footer{display:none}
  .game-section,.rules-section,.checkout{padding-top:4.5rem;padding-bottom:4.5rem}
  .copy-grid{gap:2.5rem;margin-top:3.5rem}
  .phase-invert .copy-grid{grid-template-columns:1fr}
  .phase-invert .copy-grid h2{grid-column:1;grid-row:1;text-align:left}
  .phase-invert .copy{border-left:1px solid var(--violet);border-right:0;grid-column:1;grid-row:2;padding-left:1.2rem;padding-right:0}
  .phase-invert .copy-grid h2,.phase-three .copy-grid h2{font-size:clamp(2.5rem,11vw,3.6rem)}
  .copy-grid h2,.rules-copy h2,.checkout h2{font-size:clamp(2.85rem,14vw,4.2rem)}
  .rules-section{gap:3rem}
  .checkout-grid{margin-top:3.5rem}
  .ready{min-height:auto;padding-top:5rem;padding-bottom:5rem}
  .ready h2{font-size:clamp(2.35rem,9vw,3rem);line-height:1}
}

/* Continuidad visual con el área de la masterclass: Matrix editorial */
.game-section .copy-grid h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.07;letter-spacing:-.04em}
.matrix-code{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:flex;justify-content:space-between;mask-image:linear-gradient(90deg,#000,transparent 24%,transparent 76%,#000);z-index:-1}
.matrix-code span{font:14px/1.85 monospace;writing-mode:vertical-rl;text-orientation:upright;color:var(--cyan);letter-spacing:.35em;opacity:.24;text-shadow:0 0 9px var(--cyan);transform:translateY(-22%);animation:matrix-flow 24s linear infinite;animation-delay:calc(var(--column) * -2.7s)}
.rules-section{isolation:isolate;overflow:hidden}
.rules-section .matrix-code{mask-image:linear-gradient(90deg,transparent 52%,#000);opacity:.5}
.hero-content,.rules-copy,.rule-vault{position:relative;z-index:1}
.copy p:empty{display:none}
.copy-grid h2{overflow-wrap:normal}
.game-section,.rules-section,.checkout{scroll-margin-top:76px}
.checkout.is-active .order-card{animation:none}
@keyframes matrix-flow{to{transform:translateY(12%)}}
@media(max-width:900px){.phase-invert .copy-grid{grid-template-columns:1fr}.phase-invert .copy-grid h2{grid-column:1;grid-row:1;text-align:left}.phase-invert .copy{grid-column:1;grid-row:2;border-right:0;border-left:1px solid var(--cyan);padding-right:0;padding-left:1.2rem}}
@media(max-width:600px){.matrix-code{mask-image:linear-gradient(90deg,#000,transparent 14%,transparent 86%,#000)}.matrix-code span{opacity:.16;font-size:11px}.start-button{max-width:100%;line-height:1.45;padding:1rem}.section-marker{gap:1rem;line-height:1.4}.vault-header,.vault-footer{letter-spacing:.04em;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.matrix-code span{animation:none}}
:root{
  --void:#000000;
  --panel:#020902;
  --ink:#f4f7f8;
  --muted:#b9c9be;
  --cyan:#16ff24;
  --red:#008f11;
  --amber:#48ff52;
  --violet:#008f11;
  --line:rgba(22,255,36,.24);
}
.arcade{
  background:var(--void);
}
.arcade::before{
  background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent 47px,rgba(22,255,36,.028) 48px,transparent 49px),
    linear-gradient(rgba(22,255,36,.018) 1px,transparent 1px),
    radial-gradient(circle at 75% 5%,rgba(0,143,17,.09),transparent 38rem);
  background-size:auto,48px 48px,auto;
  position:fixed;
}
.scanlines{opacity:.18}
.hud{
  background:rgba(2,6,4,.94);
  border-color:rgba(22,255,36,.24);
  min-height:76px;
}
.status-light{background:var(--cyan);box-shadow:0 0 16px rgba(22,255,36,.85)}
.hud-status,.hero-footer,footer{color:var(--muted)}
.hud-status span:last-child,.system-label,.kicker,.section-marker{color:var(--cyan)}
.hud-buy{
  border-color:var(--cyan);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  color:var(--cyan);
}
.hud-buy:hover{background:var(--cyan);box-shadow:0 0 24px rgba(22,255,36,.26);color:#021007}
.game-progress{background:rgba(22,255,36,.1)}
.game-progress span{background:linear-gradient(90deg,var(--cyan),var(--red));box-shadow:0 0 14px rgba(22,255,36,.8)}
.hero{border-color:rgba(22,255,36,.24)}
.hero::after{
  background:
    radial-gradient(circle at 76% 30%,rgba(0,143,17,.14),transparent 24rem),
    radial-gradient(circle at 28% 68%,rgba(22,255,36,.07),transparent 28rem);
  mask-image:none;
  opacity:1;
}
.hero-grid{
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent 79px,rgba(22,255,36,.09) 80px),
    repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(22,255,36,.065) 80px);
  bottom:0;
  height:100%;
  left:0;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 75%,transparent);
  opacity:.38;
  transform:none;
  width:100%;
}
.hero h1{filter:drop-shadow(0 0 26px rgba(22,255,36,.12))}
.hero h1 span{
  color:var(--ink);
  text-shadow:0 0 18px rgba(22,255,36,.12),1px 0 rgba(22,255,36,.62),-1px 0 rgba(0,143,17,.62);
}
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:clamp(1px,.18vw,3px) var(--ink);
  text-shadow:0 0 24px rgba(22,255,36,.16);
}
.hero-question{color:var(--ink)}
.start-button,.purchase-button{
  background:var(--cyan);
  border-color:var(--cyan);
  box-shadow:5px 5px 0 var(--red);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  color:#021007;
}
.start-button:hover,.purchase-button:hover{background:#48ff52;box-shadow:2px 2px 0 var(--red)}
.blink{display:none}
.game-section{border-color:rgba(22,255,36,.24)}
.section-marker{border-color:rgba(22,255,36,.24)}
.section-marker span:last-child{color:var(--muted)}
.copy{border-color:var(--cyan)}
.copy p,.rules-copy>p:not(.system-label),.rules-copy strong,.ready>p:not(.system-label){color:var(--ink)}
.perspective,.compact-section,.phase-invert,.phase-three{
  background:radial-gradient(circle at 82% 42%,rgba(0,143,17,.09),transparent 32%),linear-gradient(135deg,rgba(22,255,36,.025),transparent 55%);
}
.perspective .section-marker,.perspective .copy,.phase-invert .copy,.phase-three .section-marker,.phase-three .copy{border-color:rgba(22,255,36,.34)}
.perspective .section-marker,.phase-three .section-marker{color:var(--cyan)}
.rules-section{
  background:radial-gradient(circle at 76% 48%,rgba(0,143,17,.1),transparent 30%),#030806;
  border-color:rgba(22,255,36,.3);
}
.rules-copy .system-label,.vault-header,.vault-footer{color:var(--cyan)}
.rule-vault{
  background:#041008;
  border-color:var(--red);
  box-shadow:0 0 90px rgba(22,255,36,.12),inset 0 0 38px rgba(22,255,36,.04);
}
.rule-slot{
  background:linear-gradient(145deg,rgba(22,255,36,.08),rgba(0,143,17,.025));
  border-color:rgba(22,255,36,.34);
}
.rule-slot b{color:var(--cyan);text-shadow:0 0 18px rgba(22,255,36,.72)}
.rule-slot::after{background:var(--cyan);color:#021007}
.rule-slot:hover,.rule-slot:focus-visible,.rule-slot.comprobando{border-color:var(--cyan);box-shadow:inset 0 0 22px rgba(22,255,36,.1)}
.rule-slot:hover b,.rule-slot:focus-visible b,.rule-slot.comprobando b{color:var(--ink);text-shadow:0 0 18px var(--cyan)}
.checkout{
  background:linear-gradient(145deg,rgba(0,143,17,.08),transparent 48%),#010601;
  border-bottom:1px solid rgba(22,255,36,.24);
  color:var(--ink);
}
.checkout-top{border-color:rgba(22,255,36,.34)}
.checkout .system-label,.access-copy{color:var(--muted)}
.order-card{
  background:var(--void);
  border:1px solid var(--red);
  box-shadow:8px 8px 0 rgba(0,143,17,.14);
}
.order-card dl div{border-color:rgba(22,255,36,.2)}
.price span,.price strong{color:var(--cyan)}
.ready::before{background:radial-gradient(circle,rgba(0,143,17,.13),transparent 58%)}
.ready .system-label{color:var(--cyan)}
.ready h2 span{color:var(--ink);text-shadow:0 0 28px rgba(22,255,36,.18),1px 0 var(--cyan),-1px 0 var(--red)}
.start-button-final{box-shadow:5px 5px 0 var(--red)}
.mobile-buy{background:var(--cyan);border-color:var(--red);color:#021007}
a:focus-visible{outline-color:var(--cyan)}

@media(max-width:600px){
  body{font-size:17px}
  .hud{min-height:62px}
  .hero-grid{opacity:.2}
  .scanlines{opacity:.12}
  .start-button,.purchase-button{box-shadow:4px 4px 0 var(--red)}
  .start-button{font-size:.85rem}
  .mobile-buy{font-size:.84rem}
}

/* Clearer spacing for the revised introduction. */
.hud{justify-content:space-between}
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;margin:1.8rem 0 2rem;color:var(--cyan);font-family:var(--body);font-size:1rem}
.hero .start-button{margin-top:0}
.game-section .copy-grid{margin-top:0}
.intro .copy-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.intro .copy-grid h2{font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.16}
.intro h2 em{font-style:italic;color:var(--cyan)}
.rule-vault{padding:1.5rem}
@media(max-width:900px){.intro .copy-grid{grid-template-columns:1fr}}
@media(max-width:600px){.hero-facts{gap:.65rem 1.3rem;font-size:.86rem}.hud-brand{font-size:.6rem}.hud-buy{font-size:.57rem}.hero{padding-bottom:4rem}}

/* Course details sit together at a supporting text scale. */
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.75rem 2rem;max-width:640px;margin:1.8rem auto 2rem}
.hero-fact{display:flex;flex-direction:row;align-items:baseline;gap:.4em;min-width:0;white-space:nowrap;font-family:var(--body);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.4}
.hero-fact strong{font:700 1em/1.4 var(--body);letter-spacing:0;color:var(--cyan)}
.hero-fact span{font:400 1em/1.4 var(--body);color:var(--ink)}
@media(max-width:600px){.hero-facts{gap:.6rem 1rem;margin:1.6rem auto 1.8rem}.hero-fact{font-size:1rem}}

/* Compact page rhythm and a small, non-interactive rule archive. */
.hero{min-height:0;padding-top:2.5rem;padding-bottom:3rem}
.hero h1{font-size:clamp(3.2rem,7.5vw,6.3rem);margin:1.25rem 0 1.5rem;line-height:.94}
.hero-question{max-width:760px;font-size:clamp(1.08rem,1.65vw,1.4rem)}
.hero-facts{margin:1.4rem auto 1.6rem}
.game-section,.rules-section,.checkout{min-height:0;padding-top:clamp(3rem,4.5vw,4rem);padding-bottom:clamp(3rem,4.5vw,4rem)}
.copy-grid{gap:clamp(1.5rem,4vw,4rem)}
.game-section .copy-grid h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.13}
.copy{align-self:center}
.copy p,.rules-copy>p:not(.system-label),.access-copy{font-size:clamp(1.125rem,1.3vw,1.15rem);line-height:1.65}
.copy p{margin-bottom:1.2rem}
.copy p:last-child,.rules-copy>p:last-child{margin-bottom:0}
.rules-section{grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:clamp(2rem,6vw,5rem)}
.rules-copy h2,.checkout h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin:0 0 1.25rem}
.rule-vault{width:260px;max-width:100%;padding:.7rem;justify-self:center;box-shadow:0 0 35px rgba(22,255,36,.08)}
.rule-grid{gap:.4rem}
.rule-slot{cursor:default;transition:border-color .2s,box-shadow .2s;transform:none}
.rule-slot::after{display:none;content:none}
.rule-slot span{font-size:.6rem;left:.45rem;top:.45rem}
.rule-lock{color:var(--cyan);opacity:.7;margin-top:.45rem}
.rule-slot:hover{transform:none;border-color:rgba(22,255,36,.65);box-shadow:inset 0 0 16px rgba(22,255,36,.08);animation:none}
.checkout-grid{margin-top:0;gap:clamp(2rem,5vw,4rem)}
.start-button,.purchase-button{min-height:52px}
@media(max-width:900px){.rules-section{grid-template-columns:minmax(0,1fr) 240px}.rule-vault{width:240px}}
@media(max-width:600px){
 .hero{padding-top:2rem;padding-bottom:2.5rem}
 .hero h1{font-size:clamp(2.6rem,13.5vw,4.4rem)}
 .game-section,.rules-section,.checkout{padding-top:2.75rem;padding-bottom:2.75rem}
 .copy-grid{gap:1.75rem}
 .game-section .copy-grid h2{font-size:clamp(1.7rem,7.5vw,2.2rem)}
 .rules-section{grid-template-columns:1fr;gap:1.5rem}
 .rule-vault{width:225px;justify-self:start}
 .rules-copy h2,.checkout h2{font-size:2.25rem}
 .checkout-grid{margin-top:0;gap:1.5rem}
}

.purchase-availability{font-family:var(--body);font-size:1.125rem;line-height:1.6;color:var(--ink);margin:0 0 1.25rem}.purchase-availability strong{font-weight:700;color:var(--cyan)}

.order-card .price{justify-content:flex-end}

/* Black-and-phosphor Matrix palette, with quiet readable copy. */
:root{--line:rgba(22,255,36,.2)}
.hud{background:rgba(0,0,0,.96)}
.arcade::before{background-image:linear-gradient(rgba(22,255,36,.015) 1px,transparent 1px);background-size:48px 48px}
.hero::after{background:radial-gradient(ellipse at 50% 40%,rgba(0,143,17,.12),transparent 65%)}
.hero h1{filter:none}
.hero h1 span{text-shadow:0 0 22px rgba(22,255,36,.18)}
.hero h1 .outline{color:var(--cyan);-webkit-text-stroke:0;text-shadow:0 0 24px rgba(22,255,36,.3)}
.hero-grid{opacity:.16}
.matrix-code span{opacity:.36;text-shadow:0 0 8px var(--cyan)}
.perspective,.compact-section,.phase-invert,.phase-three{background:linear-gradient(135deg,rgba(0,143,17,.055),transparent 60%)}
.start-button,.purchase-button{box-shadow:none;clip-path:none;border:1px solid var(--cyan);border-radius:2px;background:var(--cyan);color:#000}
.start-button:hover,.purchase-button:hover{box-shadow:0 0 22px rgba(22,255,36,.2);transform:none;background:#48ff52}
.hud-buy{clip-path:none}
.order-card{box-shadow:none;border:1px solid rgba(22,255,36,.35);background:#010501}
.checkout{background:linear-gradient(145deg,rgba(0,143,17,.07),transparent 65%),#000}
.sale-clock{margin:0 0 1.4rem;padding:1rem;border:1px solid rgba(22,255,36,.3);background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(22,255,36,.02) 4px),#000;box-shadow:inset 0 0 24px rgba(0,143,17,.06)}
.sale-clock[hidden]{display:none}
.sale-clock-label{font:700 1rem/1.5 var(--body);color:var(--ink);margin:0 0 .8rem}
.sale-clock-digits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.sale-clock-digits>div{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.sale-clock-digits strong{font:400 clamp(1.7rem,3vw,2.4rem)/1.1 'Courier New',monospace;letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--cyan);text-shadow:0 0 10px rgba(22,255,36,.35)}
.sale-clock-digits span{font:400 .8rem/1.5 var(--body);color:var(--muted)}
.sale-clock-deadline{font:400 .85rem/1.5 var(--body);color:var(--muted);margin-top:.85rem}
.purchase-button[aria-disabled="true"]{background:transparent;color:var(--muted);border-color:var(--muted);pointer-events:none;box-shadow:none}
@media(max-width:600px){.matrix-code span{opacity:.25}.sale-clock{padding:.85rem}.sale-clock-digits span{font-size:.75rem}}

/* Phosphor terminal: restrained glow and fixed-width countdown digits. */
.sale-clock{position:relative;padding:1.2rem 1rem 1rem;border-color:rgba(22,255,36,.25);background:linear-gradient(180deg,rgba(22,255,36,.035),transparent 65%),repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(22,255,36,.018) 4px),#000;box-shadow:inset 0 0 28px rgba(0,143,17,.07),0 0 20px rgba(22,255,36,.035)}
.sale-clock::before,.sale-clock::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;border-color:var(--cyan);border-style:solid}
.sale-clock::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.sale-clock::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.sale-clock-label{text-align:center;margin-bottom:1rem}
.sale-clock-digits{gap:.65rem}
.sale-clock-digits>div{position:relative;gap:.45rem}
.sale-clock-digits>div:not(:last-child)::after{content:":";position:absolute;right:-.45rem;top:.1em;font:400 1.6rem/1 'Courier New',monospace;color:rgba(22,255,36,.5)}
.sale-clock-digits strong{font-weight:700;letter-spacing:.02em;text-shadow:0 0 6px rgba(22,255,36,.45),0 0 18px rgba(22,255,36,.2)}
.sale-clock-deadline{text-align:center;border-top:1px solid rgba(22,255,36,.12);padding-top:.75rem;margin-top:1rem}

/* One balanced purchase panel: details left, purchase controls right. */
.checkout-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,4rem);max-width:1100px;margin:0 auto;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid rgba(22,255,36,.28);background:linear-gradient(135deg,rgba(0,143,17,.05),transparent 60%),#010501}
.checkout-summary{min-width:0}
.checkout-summary .access-copy{margin-top:1.2rem}
.checkout-summary dl{margin:1.6rem 0 0}
.checkout-summary dl>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(22,255,36,.16);padding:.9rem 0}
.checkout-summary dt{font:700 .85rem/1.5 var(--body);color:var(--muted)}
.checkout-summary dd{font:700 .9rem/1.5 var(--body);color:var(--ink);margin:0;text-align:right;max-width:60%}
.checkout .order-card{min-width:0;align-self:center;justify-self:stretch;width:100%;max-width:none;padding:0;border:0;background:transparent;box-shadow:none}
.order-card .price{justify-content:flex-start;margin:1.25rem 0 1rem}
.order-card .price strong{font-size:clamp(2.8rem,4.5vw,4rem);line-height:1}
.order-card .sale-clock{margin-bottom:1.2rem}
.order-card .purchase-availability{margin-bottom:0}
@media(max-width:760px){.checkout-grid{grid-template-columns:1fr;gap:2rem;padding:1.4rem}.checkout-summary dl{margin-top:1.25rem}.checkout .order-card{border-top:1px solid rgba(22,255,36,.18);padding-top:2rem}}
@media(max-width:380px){.checkout-grid{padding:1rem}.sale-clock{padding:.85rem .6rem}.sale-clock-digits{gap:.5rem}.sale-clock-digits strong{font-size:1.65rem}.sale-clock-digits span{font-size:.7rem}}

/* A single, calm launch block with one action at a time. */
.launch-panel{max-width:1060px;margin:0 auto;padding:clamp(1.5rem,3vw,2.5rem);border:1px solid rgba(22,255,36,.28);background:linear-gradient(140deg,rgba(0,143,17,.05),transparent 60%),#010501}
.launch-heading{text-align:center;padding:0 0 1.75rem;border-bottom:1px solid rgba(22,255,36,.16);margin-bottom:2rem}
.launch-heading h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.1;margin:0 0 1rem}
.launch-facts{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5rem 1.75rem;font:400 1.125rem/1.5 var(--body);color:var(--muted)}
.launch-facts strong{color:var(--cyan);font-size:1.3rem}
.launch-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.launch-timing,.launch-action{min-width:0}
.launch-timing .sale-clock{margin:0 0 1.25rem}
.launch-timing .purchase-availability{font-size:1.0625rem;line-height:1.65;margin:0}
.launch-timing .access-copy{font-size:1rem;margin:1rem 0 0;color:var(--muted)}
.launch-action h3{font:700 clamp(1.35rem,2vw,1.7rem)/1.3 var(--body);letter-spacing:-.035em;color:var(--ink);margin:0 0 .8rem;text-transform:none}
.notify-copy{font-size:1.0625rem;line-height:1.6;color:var(--muted);margin:0 0 1.4rem}
.launch-notify form{margin:0}
.launch-notify label{display:block;font:400 1rem/1.5 var(--body);color:var(--ink);margin-bottom:.5rem}
.launch-notify input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.launch-notify select,.launch-notify textarea{width:100%;min-height:52px;padding:.85rem 1rem;background:#000;border:1px solid rgba(22,255,36,.4);border-radius:2px;color:var(--ink);font:400 1.0625rem/1.4 var(--body);box-shadow:none;margin:0 0 1rem}
.launch-notify input::placeholder{color:#9aa99a;opacity:1}
.launch-notify input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.notify-button{display:block;width:100%;min-height:52px;border:1px solid var(--cyan);border-radius:2px;background:var(--cyan);color:#000;font:700 1rem/1.4 var(--body);padding:.85rem 1rem;cursor:pointer}
.notify-button:hover:not(:disabled){background:#48ff52;box-shadow:0 0 18px rgba(22,255,36,.16)}
.notify-button:disabled{cursor:default;opacity:.65}
.notify-note{font:.85rem/1.5 var(--body);color:var(--muted);margin:.8rem 0 0}
.launch-purchase .price{justify-content:flex-start;margin:1.5rem 0}
.launch-purchase .price strong{font-size:3.4rem}
.launch-notify[hidden],.launch-purchase[hidden]{display:none}
@media(max-width:760px){.launch-columns{grid-template-columns:1fr;gap:2rem}.launch-action{padding-top:1.75rem;border-top:1px solid rgba(22,255,36,.16)}.launch-heading{padding-bottom:1.4rem;margin-bottom:1.5rem}.launch-panel{padding:1.4rem}.launch-facts{gap:.5rem 1rem;font-size:1rem}}
@media(max-width:380px){.launch-panel{padding:1rem}.launch-heading h2{font-size:1.8rem}}

/* Alternate dark surfaces and selected green phrases without extra content. */
.game-section.intro{background:#000}
.game-section.perspective{background:linear-gradient(110deg,rgba(0,143,17,.045),transparent 65%),#020b04}
.game-section.phase-three{background:#000}
.game-section .copy p{color:#d2dcd3}
.game-section .copy strong{color:var(--ink)}
.game-section.perspective h2>span:last-child,.game-section.phase-three h2>span:last-child{color:var(--cyan);text-shadow:none}
.game-section.perspective .copy{border-color:rgba(22,255,36,.45)}
.game-section.phase-three .copy{border-color:rgba(22,255,36,.25)}
.game-section.perspective .copy .lead strong{color:var(--cyan)}


/* Experiment B: layered phosphor rain at the edges, no grid. */
.hero{isolation:isolate;overflow:hidden}
.hero .hero-grid{display:none}
.arcade::before{background-image:none}
.hero::after{background:radial-gradient(ellipse at 50% 42%,rgba(0,90,16,.09),transparent 65%);z-index:-1}
.matrix-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.8}
.hero .matrix-rain{mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 76%,transparent)}
.hero-content{position:relative;z-index:1}
.sale-clock{isolation:isolate;overflow:hidden}
.sale-clock>.matrix-rain{opacity:.13;z-index:0}
.sale-clock>p,.sale-clock>.sale-clock-digits{position:relative;z-index:1}
@media(max-width:600px){.hero>.matrix-rain{opacity:.6}}


/* Softer terminal green for this experiment only. */
.hero h1 .outline{text-shadow:0 0 18px rgba(0,143,17,.18)}
.start-button,.purchase-button,.notify-button{background:#16ff24;border-color:#16ff24;color:#000}
.start-button:hover,.purchase-button:hover,.notify-button:hover:not(:disabled){background:#48ff52;box-shadow:0 0 14px rgba(0,143,17,.14)}
.sale-clock-digits strong{text-shadow:0 0 6px rgba(22,255,36,.22),0 0 14px rgba(0,143,17,.12)}


/* Pure green phosphor, black field, bright stream heads. */
.hero{background:#000}
.hero::after{background:radial-gradient(ellipse at 50% 45%,rgba(0,80,0,.09),transparent 65%)}
.hero h1 .outline{color:#16ff24;text-shadow:0 0 2px rgba(22,255,36,.28),0 0 18px rgba(0,143,17,.18)}
.game-section.perspective{background:#020902}
.matrix-rain{filter:contrast(1.12)}
.sale-clock{background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(22,255,36,.025) 4px),#000}


/* Reference: Rezmason/matrix classic palette, js/config.js.
   HSL 108deg/90% at lightness .2, .7, .8; cursor 87.12deg/100%/.73.
   A documented reconstruction, not an official film colour specification. */
.hero h1 .outline{color:#16ff24;text-shadow:0 0 16px rgba(22,255,36,.14)}
.start-button,.purchase-button,.notify-button{background:#16ff24;border-color:#16ff24;color:#050805}
.start-button:hover,.purchase-button:hover,.notify-button:hover:not(:disabled){background:#48ff52;box-shadow:0 0 14px rgba(22,255,36,.14)}
.sale-clock-digits strong{color:#16ff24;text-shadow:0 0 8px rgba(22,255,36,.2)}
.matrix-rain{filter:none}


/* Palette matched to the user's supplied visual reference. */
.hero h1 .outline{color:#16ff24;text-shadow:0 0 14px rgba(0,143,17,.2)}
.game-section.perspective{background:#010701}
.start-button,.purchase-button,.notify-button{background:#16ff24;border-color:#16ff24;color:#000}
.start-button:hover,.purchase-button:hover,.notify-button:hover:not(:disabled){background:#48ff52;box-shadow:0 0 15px rgba(0,143,17,.2)}
.sale-clock-digits strong{color:#16ff24;text-shadow:0 0 9px rgba(22,255,36,.22)}
.hero>.matrix-rain{opacity:.9}
@media(max-width:600px){.hero>.matrix-rain{opacity:.65}}


/* Stronger hero rain; checkout keeps its restrained treatment. */
.hero>.matrix-rain{opacity:1;mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 88%,transparent)}
.hero .hero-content{isolation:isolate}
.hero .hero-content::before{content:"";position:absolute;z-index:-1;inset:-1.5rem -1rem;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 43%,transparent 72%)}
@media(max-width:600px){.hero>.matrix-rain{opacity:.9}}


/* Electric green accents while preserving dark trails. */
.hero h1 .outline{color:#16ff24;text-shadow:0 0 15px rgba(22,255,36,.28)}
.sale-clock-digits strong{color:#16ff24;text-shadow:0 0 10px rgba(22,255,36,.35)}
.start-button,.purchase-button,.notify-button{background:#16ff24;border-color:#16ff24;color:#000}
.start-button:hover,.purchase-button:hover,.notify-button:hover:not(:disabled){background:#48ff52;box-shadow:0 0 18px rgba(22,255,36,.22)}


/* Neon lighting: a broad backlight and crisp lettering. */
.hero::after{background:radial-gradient(ellipse at 50% 35%,rgba(22,255,36,.16) 0%,rgba(0,160,18,.065) 38%,transparent 68%);z-index:0;opacity:1;pointer-events:none}
.hero .hero-content::before{background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,.46) 43%,transparent 72%)}
.hero h1 .outline{color:#50ff59;text-shadow:0 0 3px rgba(130,255,140,.85),0 0 16px rgba(22,255,36,.65),0 0 42px rgba(22,255,36,.34),0 0 85px rgba(0,210,20,.2)}
.hero h1 span:first-child{text-shadow:0 0 22px rgba(22,255,36,.14)}
.start-button,.purchase-button,.notify-button{box-shadow:0 0 14px rgba(22,255,36,.3),0 0 35px rgba(22,255,36,.12)}
.start-button:hover,.purchase-button:hover,.notify-button:hover:not(:disabled){box-shadow:0 0 20px rgba(22,255,36,.45),0 0 45px rgba(22,255,36,.18)}
.sale-clock{box-shadow:inset 0 0 25px rgba(22,255,36,.055),0 0 22px rgba(22,255,36,.075)}
.sale-clock-digits strong{text-shadow:0 0 3px rgba(160,255,165,.5),0 0 12px rgba(22,255,36,.5),0 0 25px rgba(22,255,36,.22)}
@media(max-width:600px){.hero h1 .outline{text-shadow:0 0 3px rgba(130,255,140,.65),0 0 13px rgba(22,255,36,.5),0 0 32px rgba(22,255,36,.25)}}


/* Final small-screen and keyboard audit. */
.copy-grid>*,.launch-columns>*{min-width:0}
.launch-panel,.sale-clock,.launch-notify form{max-width:100%}
.launch-action input,.launch-action button,.purchase-button{max-width:100%}
.purchase-button{gap:.75rem;line-height:1.45;white-space:normal}
.purchase-button span:first-child{min-width:0}
.launch-notify input[type="email"]{font-size:18px}
.notify-button:focus-visible,.purchase-button:focus-visible,.start-button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sale-clock-digits strong{font-variant-numeric:tabular-nums}
@media(max-width:900px){
 .launch-columns{grid-template-columns:minmax(0,1fr);gap:2rem}
 .launch-action{padding-top:1.75rem;border-top:1px solid rgba(22,255,36,.16)}
 .sale-clock{max-width:480px;margin-left:auto;margin-right:auto}
 .copy-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:380px){
 .sale-clock-digits{gap:.35rem}
 .sale-clock-digits>div:not(:last-child)::after{right:-.3rem;font-size:1.3rem}
 .sale-clock-digits strong{font-size:1.55rem}
 .sale-clock-digits span{font-size:.68rem}
 .hero h1{font-size:clamp(2.35rem,12.8vw,3rem)}
 .launch-heading h2{font-size:1.7rem;overflow-wrap:break-word}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep the email name accessible without a visible label. */
.launch-notify .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.launch-notify .form-group:has(input[type="email"])>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


/* More breathing room between the existing sections. */
.arcade > .hero{padding-bottom:clamp(6rem,9vw,8rem)}
.arcade > .game-section,
.arcade > .checkout{padding-top:clamp(6rem,9vw,8rem);padding-bottom:clamp(6rem,9vw,8rem)}
.launch-facts,.launch-facts span,.launch-facts strong{color:var(--cyan)}
@media(max-width:600px){
 .arcade > .hero{padding-bottom:5rem}
 .arcade > .game-section,
 .arcade > .checkout{padding-top:5rem;padding-bottom:5rem}
}

/* Inline registration feedback. */
.launch-notify form[hidden],.notify-copy[hidden],.notify-status[hidden]{display:none}
.notify-status{margin:1rem 0 0;font:400 1rem/1.6 var(--body);color:var(--ink)}
.notify-status[data-state="success"]{color:var(--cyan)}
.notify-status:focus{outline:none}

/* Final hero details: fixed two-line subtitle and three aligned facts. */
.hero-question{max-width:1100px}
.hero-question span{display:block}
.hero-question span+span{margin-top:.12em}
@media(min-width:761px){.hero-question span{white-space:nowrap}}
.hero-facts{max-width:780px}
.hero-fact-price strong{color:var(--cyan)}
@media(max-width:600px){
 .hero-question{max-width:34rem;line-height:1.42}
 .hero-question span{white-space:normal}
 .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));justify-content:center;gap:.6rem 1rem;width:100%}
 .hero-fact{font-size:clamp(.88rem,4.3vw,1rem)}
}
@media(max-width:340px){
 .hero-facts{gap:.5rem .7rem}
 .hero-fact{font-size:.84rem}
}