:root {
  color-scheme: dark;
  --void: #080a0b;
  --bone: #d8dad3;
  --acid: #72f4e1;
  --warning: #ff3b30;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  color: var(--bone);
  background:
    radial-gradient(circle at 79% 45%, rgba(29, 69, 66, .22), transparent 33rem),
    linear-gradient(115deg, #050607 0%, #0b0e0f 48%, #050607 100%);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  content: "";
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
  mix-blend-mode: overlay;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: .32;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.shell {
  width: min(1220px, calc(100% - 42px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header, footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #323a3a;
  padding: 21px 0 17px;
  font: 700 10px/1 "Courier New", monospace;
  letter-spacing: .18em;
  color: #a7afac;
}

header::after {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 112px;
  height: 3px;
  content: "";
  background: var(--warning);
  box-shadow: 118px 0 #2c3434;
}

.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 26px;
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 10px;
  letter-spacing: -.08em;
  transform: skewX(-9deg);
}

.edition { display: flex; align-items: center; gap: 9px; }
.edition i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 11px var(--acid);
  animation: pulse 1.8s steps(2) infinite;
}

main {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(36px, 7vw, 110px);
  padding: 52px 0 44px;
}

.intro { position: relative; z-index: 2; }
.intro::before {
  position: absolute;
  top: 46px;
  left: -52px;
  width: 3px;
  height: 242px;
  content: "";
  background: linear-gradient(var(--warning) 0 24%, #252b2c 24% 100%);
}

.eyebrow, .instruction, .status {
  text-transform: uppercase;
  font: 700 10px/1.4 "Courier New", monospace;
  letter-spacing: .17em;
}

.eyebrow { color: var(--warning); margin: 0 0 25px; }
.eyebrow::before { content: "[ "; color: #777; }
.eyebrow::after { content: " ]"; color: #777; }

h1 {
  margin: 0;
  color: #e0e1db;
  font-size: clamp(82px, 10vw, 154px);
  line-height: .68;
  letter-spacing: -.095em;
  font-weight: 900;
  text-transform: uppercase;
  transform: scaleX(.84);
  transform-origin: left center;
  text-shadow: 4px 0 0 rgba(255,59,48,.18), -2px 0 0 rgba(114,244,225,.12);
}

h1 em {
  display: inline-block;
  margin-left: 38px;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 2px var(--bone);
  text-shadow: 10px 0 0 rgba(255,59,48,.68);
}

.dek {
  max-width: 370px;
  margin: 38px 0 0;
  padding-left: 17px;
  border-left: 1px solid #42494a;
  font: 400 15px/1.6 "Courier New", monospace;
  color: #88918f;
}

.specs { display: flex; gap: 7px; margin-top: 26px; }
.specs span {
  padding: 7px 9px;
  border: 1px solid #303637;
  color: #727a78;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .08em;
}

.stage {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #394142;
  background:
    linear-gradient(rgba(114,244,225,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,244,225,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 51%, #1b2425 0, #101516 42%, #080b0c 76%);
  background-size: 32px 32px, 32px 32px, auto;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  box-shadow: 0 30px 80px rgba(0,0,0,.58), inset 0 0 90px rgba(0,0,0,.45);
}

.stage::before {
  position: absolute;
  inset: 68px;
  border: 1px solid rgba(114,244,225,.15);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 32px rgba(114,244,225,.018), 0 0 0 33px rgba(114,244,225,.08), 0 0 55px rgba(114,244,225,.06);
}

.stage::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 7px;
  content: "";
  background: linear-gradient(90deg, var(--warning) 0 17%, transparent 17% 18%, #252c2d 18% 64%, var(--acid) 64% 100%);
  opacity: .72;
}

.hazard {
  position: absolute;
  top: 37px;
  right: 36px;
  width: 62px;
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--warning) 0 5px, transparent 5px 10px);
  opacity: .75;
}

.serial {
  position: absolute;
  right: 35px;
  bottom: 34px;
  color: #485151;
  font: 700 9px/1.55 "Courier New", monospace;
  letter-spacing: .2em;
  text-align: right;
}

.instruction { position: absolute; top: 34px; left: 36px; margin: 0; color: #7d8784; }
.instruction span { color: var(--acid); margin-right: 11px; }

.milk-button {
  position: relative;
  z-index: 2;
  width: 204px;
  height: 72px;
  border: 1px solid #ff675f;
  border-radius: 2px;
  background: var(--warning);
  color: #0b0d0e;
  font: 900 17px/1 "Courier New", monospace;
  letter-spacing: .12em;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0) skewX(-4deg);
  box-shadow: 8px 8px 0 #681511, 0 24px 60px rgba(255,59,48,.2);
  transition: width .65s cubic-bezier(.2,.8,.2,1), height .65s cubic-bezier(.2,.8,.2,1), border .25s ease, border-radius .65s cubic-bezier(.2,.8,.2,1), background .35s ease, box-shadow .5s ease, transform .25s ease, clip-path .65s ease;
}

.milk-button::before {
  position: absolute;
  inset: 5px;
  z-index: 3;
  pointer-events: none;
  border: 1px dashed rgba(5,8,9,.38);
  content: "";
}
.milk-button:hover { transform: translate(-3px, -3px) skewX(-4deg); box-shadow: 12px 12px 0 #681511, 0 26px 65px rgba(255,59,48,.28); }
.milk-button:active { transform: translate(5px, 6px) skewX(-4deg); box-shadow: 3px 3px 0 #681511; }
.milk-button:focus-visible { outline: 2px solid var(--acid); outline-offset: 8px; }

.button-label { position: relative; z-index: 4; transition: opacity .16s ease, transform .3s ease; }
.milk {
  position: absolute;
  inset: 100% 0 0;
  background: linear-gradient(90deg, #bfcfcd, #f3f4ec 33%, #dfe9e5 80%, #a7bab7);
  transition: inset 1s .25s cubic-bezier(.16,.8,.25,1);
  box-shadow: 0 0 36px rgba(218,255,249,.45);
}
.milk::before {
  position: absolute;
  left: -5%;
  top: -8px;
  width: 110%;
  height: 18px;
  content: "";
  border-radius: 50%;
  background: #edf3ed;
  box-shadow: 0 -3px 12px rgba(114,244,225,.35);
}
.milk-sheen { position: absolute; inset: 10px auto 14px 15px; width: 9px; border-radius: 99px; background: rgba(255,255,255,.65); }
.bubble { position: absolute; border-radius: 50%; border: 1px solid rgba(71,100,96,.5); opacity: 0; }
.bubble-one { width: 12px; height: 12px; left: 31px; top: 34px; }
.bubble-two { width: 7px; height: 7px; right: 25px; top: 62px; }
.bubble-three { width: 15px; height: 15px; right: 37px; top: 22px; }

.milk-button.is-milk {
  width: 132px;
  height: 188px;
  border: 3px solid rgba(182,255,245,.7);
  border-top-width: 6px;
  border-radius: 3px 3px 19px 19px;
  clip-path: polygon(3% 0, 97% 0, 88% 100%, 12% 100%);
  background: rgba(114,244,225,.05);
  box-shadow: inset 8px 0 12px rgba(255,255,255,.1), inset -7px 0 12px rgba(0,0,0,.3), 0 0 22px rgba(114,244,225,.25), 7px 10px 0 #061413;
  cursor: default;
  transform: translateY(-10px) skewX(0);
}
.milk-button.is-milk::before { opacity: 0; }
.milk-button.is-milk .button-label { opacity: 0; transform: scale(.7); }
.milk-button.is-milk .milk { inset: 29px 4px 4px; }
.milk-button.is-milk .bubble { animation: bubbles 1.1s 1.05s ease both; }

.shadow {
  position: absolute;
  z-index: 1;
  width: 226px;
  height: 18px;
  margin-top: 122px;
  border-radius: 50%;
  background: rgba(0,0,0,.9);
  filter: blur(8px);
  transition: width .65s ease, margin .65s ease;
}
.stage:has(.is-milk) .shadow { width: 155px; margin-top: 222px; background: rgba(69,204,186,.15); }

.status {
  position: absolute;
  bottom: 34px;
  left: 36px;
  margin: 0;
  color: #65706e;
  transition: color .4s ease, text-shadow .4s ease;
}
.stage:has(.is-milk) .status { color: var(--acid); text-shadow: 0 0 9px rgba(114,244,225,.55); }
.cursor { animation: blink .9s steps(2) infinite; }

footer { border-top: 1px solid #323a3a; border-bottom: 0; padding: 18px 0 22px; color: #515a58; }
.footer-rule { height: 1px; flex: 1; margin: 0 24px; background: #292f30; }

@keyframes bubbles {
  0% { opacity: 0; transform: translateY(30px) scale(.5); }
  35% { opacity: 1; }
  100% { opacity: .55; transform: translateY(-8px) scale(1); }
}
@keyframes pulse { 50% { opacity: .25; box-shadow: none; } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 840px) {
  .shell { width: min(100% - 28px, 650px); }
  main { grid-template-columns: 1fr; padding: 56px 0 34px; }
  h1 { font-size: clamp(90px, 25vw, 145px); }
  .dek { margin-top: 34px; }
  .specs { margin-bottom: 42px; }
  .stage { min-height: 520px; }
  .intro::before { display: none; }
}

@media (max-width: 480px) {
  .edition { display: none; }
  header { padding-top: 18px; }
  h1 { font-size: clamp(80px, 28vw, 118px); }
  h1 em { margin-left: 20px; }
  .stage { min-height: 460px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
  .stage::before { inset: 58px 32px; }
  .instruction { left: 23px; top: 29px; }
  .hazard { right: 23px; top: 31px; width: 45px; }
  .status { left: 23px; bottom: 25px; font-size: 8px; }
  .serial { right: 21px; bottom: 22px; }
  footer { font-size: 8px; }
}

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