:root {
  /* Space Grotesk for the wordmark */
  --counter-black: #111820;
  --porcelain-mist: #E7EDF2;
  --sakura-milk: #F6C8D8;
  --brushed-steel: #AEB8C2;
  --amber-syrup: #D8B36A;
  --rail-gray: #6C7A89;
  --ink-shadow: #070A0D;
  --mint-glass: #8ED6D1;
  --accent: #F6C8D8;
  --progress: 0;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-shadow);
  background: var(--porcelain-mist);
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  overflow-x: hidden;
}

.site-shell { position: relative; isolation: isolate; }

.grid-plane {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(108,122,137,.22) 1px, transparent 1px) 0 0 / 8.333vw 100%,
    linear-gradient(180deg, rgba(108,122,137,.12) 1px, transparent 1px) 0 calc(var(--progress) * -160px) / 100% 11.5vh,
    var(--porcelain-mist);
}

.crosshair-plane { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .58; }
.crosshair-plane span:first-child { position: absolute; left: var(--pointer-x); top: 0; width: 1px; height: 100%; background: rgba(108,122,137,.28); }
.crosshair-plane span:last-child { position: absolute; top: var(--pointer-y); left: 0; height: 1px; width: 100%; background: rgba(108,122,137,.22); }

.ripple-field {
  position: fixed;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 44vmin;
  height: 44vmin;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(.8 + var(--progress) * .45));
  z-index: -1;
  opacity: .42;
  box-shadow: 0 0 0 5vmin rgba(142,214,209,.05), inset 0 0 44px rgba(255,255,255,.16);
  pointer-events: none;
}

.ripple-field::before, .ripple-field::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 50%;
  animation: glassPulse 7s ease-in-out infinite;
}
.ripple-field::after { inset: -18%; animation-delay: -2.8s; }

.fixed-wordmark {
  position: fixed;
  top: 28px;
  left: 3.5vw;
  z-index: 20;
  display: grid;
  gap: 2px;
  mix-blend-mode: difference;
  color: var(--porcelain-mist);
}
.brand-jp { font-family: "Noto Sans JP", sans-serif; font-weight: 700; letter-spacing: .08em; }
.brand-en { font-size: 11px; text-transform: uppercase; letter-spacing: .24em; color: var(--brushed-steel); }

.sticky-rail {
  position: fixed;
  top: 0;
  left: 8.333vw;
  width: 1px;
  height: 100vh;
  z-index: 15;
  color: var(--rail-gray);
}
.rail-line { height: 100%; background: var(--ink-shadow); }
.rail-label {
  position: absolute;
  bottom: 32px;
  left: 12px;
  writing-mode: vertical-rl;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
}
.progress-track { position: absolute; top: 20vh; left: -2px; width: 5px; height: 46vh; background: rgba(108,122,137,.22); }
.progress-track span { display: block; width: 100%; height: calc(var(--progress) * 100%); background: var(--accent); transition: background .4s ease; }

.station {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  padding: 9vh 4.166vw;
  overflow: hidden;
}
.station.is-dark { background: var(--counter-black); color: var(--porcelain-mist); }
.station.is-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(231,237,242,.06) 1px, transparent 1px) 0 0 / 8.333vw 100%;
  pointer-events: none;
}

.station-number {
  position: sticky;
  top: 11vh;
  grid-column: 1 / 3;
  align-self: start;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(74px, 14vw, 210px);
  line-height: .78;
  font-weight: 700;
  letter-spacing: -.09em;
  color: color-mix(in srgb, var(--accent) 46%, var(--rail-gray));
}

.caption-rail {
  grid-column: 3 / 4;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  writing-mode: vertical-rl;
  padding: 3vh 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--rail-gray);
}

.station-copy { grid-column: 4 / 8; align-self: center; position: relative; z-index: 3; }
.station-copy.compact { grid-column: 3 / 7; align-self: start; margin-top: 13vh; }
.station-copy.narrow { grid-column: 8 / 12; }
.receipt-copy { grid-column: 3 / 7; }

.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--accent);
  font-weight: 600;
}
h1, h2 {
  margin: 0;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.055em;
}
h1 { font-size: clamp(56px, 8.8vw, 138px); max-width: 7ch; }
h2 { font-size: clamp(44px, 6.3vw, 104px); max-width: 8ch; }
p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.45; color: color-mix(in srgb, currentColor 76%, var(--rail-gray)); max-width: 34rem; }

.noren { position: absolute; top: 0; left: 16.666vw; right: 8.333vw; height: 18vh; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; z-index: 2; }
.noren span { background: linear-gradient(180deg, var(--brushed-steel), rgba(174,184,194,.12)); border-right: 1px solid rgba(231,237,242,.14); }

.dessert-form { position: absolute; z-index: 1; transition: transform .18s linear; }
.massive-circle {
  right: -8vmin;
  bottom: -34vmin;
  width: 78vmin;
  height: 78vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff 0 7%, var(--sakura-milk) 8% 42%, rgba(246,200,216,.58) 43% 100%);
  box-shadow: inset 0 0 52px rgba(231,237,242,.45), 0 0 80px rgba(246,200,216,.16);
}
.hud-ring { position: absolute; border: 1px solid rgba(142,214,209,.58); border-radius: 50%; inset: -5%; animation: rotateHud 24s linear infinite; }
.ring-two { inset: 14%; border-color: rgba(216,179,106,.58); animation-duration: 18s; animation-direction: reverse; }
.seal { position: absolute; left: 20%; top: 24%; font-family: "Noto Sans JP", sans-serif; color: var(--counter-black); border: 1px solid currentColor; padding: 8px 11px; letter-spacing: .16em; }

.frequency-board { grid-column: 7 / 12; align-self: center; right: 7vw; top: 19vh; width: 44vw; height: 52vh; border: 1px solid rgba(108,122,137,.45); }
.frequency-dot {
  position: absolute;
  width: 14vmin;
  height: 14vmin;
  border-radius: 50%;
  border: 1px solid var(--ink-shadow);
  background: var(--porcelain-mist);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease;
}
.frequency-dot:nth-child(1) { left: 6%; top: 18%; background: var(--sakura-milk); }
.frequency-dot:nth-child(2) { left: 36%; top: 48%; background: var(--mint-glass); }
.frequency-dot:nth-child(3) { right: 6%; top: 12%; background: var(--amber-syrup); }
.frequency-dot.active { transform: scale(1.12); box-shadow: 0 0 0 18px rgba(142,214,209,.18); }
.readout { position: absolute; left: 6%; bottom: 9%; font-family: "Space Grotesk", sans-serif; font-size: 34px; letter-spacing: -.04em; }
.tick { position: absolute; font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--rail-gray); }
.tick-a { left: 4%; top: 6%; }.tick-b { right: 6%; bottom: 8%; }.tick-c { right: 24%; top: 45%; writing-mode: vertical-rl; }

.syrup-instrument { left: 12vw; top: 7vh; width: 46vw; height: 86vh; }
.syrup-line { position: absolute; left: 48%; top: 0; width: 3px; height: 70%; background: var(--amber-syrup); box-shadow: 0 0 28px rgba(216,179,106,.58); }
.syrup-drop { position: absolute; left: calc(48% - 4.5vmin); top: 58%; width: 9vmin; height: 12vmin; border-radius: 50% 50% 56% 56%; background: var(--amber-syrup); animation: dropFloat 4.8s ease-in-out infinite; }
.oval-ice { position: absolute; left: 16%; bottom: 6%; width: 54%; height: 24%; border-radius: 50%; background: rgba(142,214,209,.36); border: 1px solid rgba(231,237,242,.58); }
.coordinate { position: absolute; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brushed-steel); border-top: 1px solid currentColor; padding-top: 8px; }
.c1 { right: 2%; top: 24%; }.c2 { left: 4%; bottom: 28%; }

.plate-system { right: 8vw; top: 18vh; width: 47vw; height: 58vh; }
.plate-circle { position: absolute; right: 7%; top: 4%; width: 34vmin; height: 34vmin; border-radius: 50%; background: var(--sakura-milk); box-shadow: inset 0 0 48px rgba(255,255,255,.42); }
.yokan { position: absolute; height: 12vmin; border-radius: 24px; background: var(--counter-black); border: 1px solid var(--rail-gray); }
.y1 { left: 2%; bottom: 16%; width: 38vmin; }.y2 { left: 18%; bottom: 38%; width: 24vmin; background: var(--brushed-steel); }
.stamp-mini { position: absolute; right: 11%; bottom: 16%; border: 1px solid var(--amber-syrup); color: var(--amber-syrup); padding: 10px 16px; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; }
.stamp-mini.second { right: 36%; top: 8%; color: var(--mint-glass); border-color: var(--mint-glass); font-family: "Noto Sans JP", sans-serif; }

.receipt-card { right: 12vw; top: 18vh; width: min(420px, 38vw); min-height: 58vh; background: var(--porcelain-mist); color: var(--ink-shadow); padding: 34px; border: 1px solid var(--brushed-steel); box-shadow: 24px 24px 0 rgba(108,122,137,.18); }
.receipt-top { font-family: "Space Grotesk", sans-serif; font-size: 36px; letter-spacing: -.06em; border-bottom: 1px solid var(--ink-shadow); padding-bottom: 24px; margin-bottom: 24px; }
.receipt-row { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(108,122,137,.3); padding: 14px 0; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.receipt-stamp { margin: 48px auto 0; width: 132px; height: 92px; display: grid; place-items: center; border: 3px solid var(--amber-syrup); color: var(--amber-syrup); font-family: "Noto Sans JP", sans-serif; font-size: 26px; transform: rotate(-7deg); }

@keyframes glassPulse { 0%,100% { transform: scale(.92); opacity: .35; } 50% { transform: scale(1.12); opacity: .72; } }
@keyframes rotateHud { to { transform: rotate(360deg); } }
@keyframes dropFloat { 0%,100% { transform: translateY(-3vh); } 50% { transform: translateY(4vh); } }

@media (max-width: 760px) {
  .station { grid-template-columns: repeat(6, 1fr); padding: 12vh 6vw; }
  .sticky-rail { left: 4vw; }
  .station-number { grid-column: 1 / 3; font-size: 26vw; }
  .caption-rail { grid-column: 6 / 7; }
  .station-copy, .station-copy.compact, .station-copy.narrow, .receipt-copy { grid-column: 1 / 6; align-self: center; }
  .dessert-form { opacity: .72; }
  .frequency-board, .plate-system, .syrup-instrument, .receipt-card { left: auto; right: -18vw; width: 76vw; }
  .receipt-card { top: 42vh; min-height: auto; }
}