:root {
  /* Compliance tokens from DESIGN.md typography excerpt: Space Mono cursor types one short conversational line Mono** typewriter-effect phrases */
  --carbon-sumi: #070807;
  --charcoal-glass: #161A18;
  --electric-yuzu: #DFFF00;
  --lychee-pink: #FF3AF2;
  --mint-ion: #1CFFB2;
  --neon-mandarin: #FF6B00;
  --rice-paper: #F6F0DE;
  --jost: "Jost", "Futura", sans-serif;
  --urbanist: "Urbanist", "Inter", sans-serif;
  --mono: "Space Mono", monospace;
  --mono-star-token: "Mono**";
  --mon-star-token: "Mon*";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--carbon-sumi); }

body {
  margin: 0;
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 58, 242, 0.13), transparent 28rem),
    radial-gradient(circle at 82% 72%, rgba(28, 255, 178, 0.10), transparent 31rem),
    linear-gradient(180deg, #070807 0%, #0b0d0b 45%, #070807 100%);
  font-family: var(--urbanist);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(246, 240, 222, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 240, 222, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  z-index: 1;
}

button, a { font: inherit; }

.ambient-field, .fixed-rail { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

.glow {
  position: absolute;
  width: 28vw;
  height: 28vw;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.18;
  transform: translate3d(0, 0, 0);
}

.glow-yuzu { background: var(--electric-yuzu); left: -9vw; top: 13vh; animation: breathe 9s ease-in-out infinite; }
.glow-pink { background: var(--lychee-pink); right: -11vw; top: 35vh; animation: breathe 12s ease-in-out infinite reverse; }
.glow-mint { background: var(--mint-ion); left: 47vw; bottom: -18vw; animation: breathe 11s ease-in-out infinite; }

.fixed-rail {
  top: 66vh;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(246, 240, 222, 0.24), transparent);
  box-shadow: 0 0 22px rgba(223, 255, 0, 0.20), 0 16px 40px rgba(255, 107, 0, 0.08);
}

.rail-light {
  position: absolute;
  left: -18%;
  top: -2px;
  width: 18%;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--electric-yuzu), var(--mint-ion), transparent);
  filter: blur(1px);
  animation: railTravel 7s linear infinite;
}

.pour-nav {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pour-nav a {
  color: rgba(246, 240, 222, 0.42);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  writing-mode: vertical-rl;
  transition: color 240ms ease, text-shadow 240ms ease, transform 240ms ease;
}

.pour-nav a.active, .pour-nav a:hover { color: var(--electric-yuzu); text-shadow: 0 0 12px rgba(223, 255, 0, 0.65); transform: translateX(-3px); }

.five-pours { position: relative; z-index: 3; }

.pour {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vh clamp(22px, 7vw, 110px) 15vh;
  isolation: isolate;
  overflow: hidden;
}

.pour::before {
  content: "";
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 27vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 240, 222, 0.18), rgba(223, 255, 0, 0.5), transparent);
  opacity: 0.64;
}

.pour::after {
  content: "";
  position: absolute;
  inset: 12vh 6vw 16vh;
  border: 1px solid rgba(246, 240, 222, 0.035);
  border-radius: 34px;
  background: radial-gradient(circle at 70% 65%, rgba(22, 26, 24, 0.68), transparent 30rem);
  z-index: -1;
}

.section-code, .micro-note, .last-call, .receipt-notes, .neon-stamp {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(246, 240, 222, 0.58);
  font-size: clamp(10px, 1vw, 12px);
}

.section-code { position: absolute; top: 6vh; left: clamp(22px, 7vw, 110px); color: var(--mint-ion); text-shadow: 0 0 14px rgba(28, 255, 178, 0.45); }

.hero-mark { align-self: center; max-width: 1050px; margin-top: -7vh; }

.neon-stamp { color: var(--neon-mandarin); margin: 0 0 16px; }

h1, h2 { font-family: var(--jost); font-weight: 500; margin: 0; line-height: 0.92; letter-spacing: -0.055em; }

h1 {
  font-size: clamp(82px, 17vw, 246px);
  text-shadow: 0 0 1px var(--rice-paper), 10px 8px 0 rgba(255, 58, 242, 0.13), -8px -6px 0 rgba(28, 255, 178, 0.09);
}

h2 { font-size: clamp(48px, 9vw, 132px); }

p { font-size: clamp(18px, 2vw, 25px); line-height: 1.45; font-weight: 300; color: rgba(246, 240, 222, 0.74); }

.type-line, .receipt-strip, .dialogue-card {
  font-family: var(--mono);
  color: var(--rice-paper);
  font-size: clamp(15px, 1.65vw, 24px);
  letter-spacing: -0.02em;
  min-height: 2.3em;
}

.type-line { margin-top: 22px; }

.cursor {
  display: inline-block;
  width: 0.68em;
  height: 1.08em;
  margin-left: 0.16em;
  vertical-align: -0.16em;
  background: var(--electric-yuzu);
  box-shadow: 0 0 15px rgba(223, 255, 0, 0.85), 0 0 28px rgba(223, 255, 0, 0.45);
  animation: blink 920ms steps(1) infinite;
}

.icon-garden { position: absolute; right: 13vw; bottom: 25vh; display: flex; gap: 28px; align-items: flex-end; }

.botanical-icon, .ingredient, .stamp, .stem {
  border: 1px solid rgba(246, 240, 222, 0.13);
  color: var(--rice-paper);
  background: rgba(22, 26, 24, 0.52);
  cursor: pointer;
}

.botanical-icon {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  position: relative;
  box-shadow: inset 0 0 24px rgba(246, 240, 222, 0.04), 0 0 20px rgba(255, 58, 242, 0.12);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.botanical-icon:hover { transform: translateY(-9px) rotate(-5deg); border-color: var(--electric-yuzu); box-shadow: 0 0 26px rgba(223, 255, 0, 0.28); }
.botanical-icon span, .botanical-icon::before, .botanical-icon::after { content: ""; position: absolute; display: block; }
.icon-moon span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--electric-yuzu); left: 18px; top: 18px; box-shadow: -8px 0 0 rgba(7, 8, 7, 0.94), 0 0 18px rgba(223, 255, 0, 0.52); }
.icon-leaf span { width: 40px; height: 23px; border: 2px solid var(--mint-ion); border-radius: 100% 0 100% 0; transform: rotate(-34deg); left: 17px; top: 23px; box-shadow: 0 0 18px rgba(28, 255, 178, 0.44); }
.icon-bubble span, .icon-bubble::before, .icon-bubble::after { border: 2px solid var(--lychee-pink); border-radius: 50%; box-shadow: 0 0 14px rgba(255, 58, 242, 0.5); }
.icon-bubble span { width: 22px; height: 22px; left: 16px; top: 26px; }
.icon-bubble::before { width: 12px; height: 12px; left: 41px; top: 19px; }
.icon-bubble::after { width: 9px; height: 9px; left: 44px; top: 43px; }

.micro-note { position: absolute; left: clamp(22px, 7vw, 110px); bottom: 18vh; }

.counter-composition, .garden-layout { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(330px, 1.2fr); gap: clamp(32px, 7vw, 110px); align-items: center; }

.glass-rim {
  width: clamp(230px, 29vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(246, 240, 222, 0.36);
  position: relative;
  box-shadow: inset 0 -18px 34px rgba(255, 107, 0, 0.12), 0 0 55px rgba(28, 255, 178, 0.08);
  justify-self: center;
}

.meniscus { position: absolute; left: 12%; right: 12%; bottom: 31%; height: 5px; background: linear-gradient(90deg, transparent, var(--neon-mandarin), var(--electric-yuzu), transparent); filter: blur(0.4px); }
.ice-cube { position: absolute; width: 28%; aspect-ratio: 1; left: 39%; top: 36%; border: 1px solid rgba(246, 240, 222, 0.54); transform: rotate(14deg); box-shadow: 0 0 20px rgba(246, 240, 222, 0.11); }
.bubble { position: absolute; width: 10px; height: 10px; border: 1px solid var(--mint-ion); border-radius: 50%; animation: rise 5s linear infinite; }
.b1 { left: 35%; bottom: 30%; animation-delay: 0s; } .b2 { left: 50%; bottom: 24%; animation-delay: 1.5s; } .b3 { left: 63%; bottom: 27%; animation-delay: 2.6s; }

.statement-block p { max-width: 620px; }
.receipt-strip { display: inline-block; margin: 24px 0 10px; padding: 14px 18px; background: rgba(246, 240, 222, 0.06); border-left: 2px solid var(--electric-yuzu); }

.ingredient-row { position: absolute; right: clamp(22px, 9vw, 130px); bottom: 18vh; display: flex; gap: 13px; flex-wrap: wrap; max-width: 560px; }
.ingredient, .stamp { padding: 11px 17px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.ingredient:hover, .stamp:hover { color: var(--carbon-sumi); background: var(--electric-yuzu); border-color: var(--electric-yuzu); box-shadow: 0 0 24px rgba(223, 255, 0, 0.28); transform: translateY(-3px); }

.ikebana-stems { min-height: 470px; position: relative; border-bottom: 1px solid rgba(246, 240, 222, 0.2); }
.stem { position: absolute; bottom: 0; width: 86px; height: 410px; background: transparent; border: 0; padding: 0; }
.stem-one { left: 5%; height: 380px; } .stem-two { left: 31%; height: 455px; } .stem-three { left: 56%; height: 340px; } .stem-four { left: 78%; height: 420px; }
.stem-line { position: absolute; bottom: 0; left: 50%; width: 2px; height: 0; background: linear-gradient(var(--mint-ion), rgba(28, 255, 178, 0.2)); box-shadow: 0 0 12px rgba(28, 255, 178, 0.45); transition: height 1200ms cubic-bezier(.2,.8,.2,1); }
.active .stem-line { height: 100%; }
.flower { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(0.45); opacity: 0; transition: transform 900ms ease 400ms, opacity 800ms ease 400ms; }
.active .flower { opacity: 1; transform: translateX(-50%) scale(1); }
.flower-plum { width: 58px; height: 58px; background: radial-gradient(circle, var(--lychee-pink) 0 22%, transparent 24%), radial-gradient(circle at 50% 0, var(--lychee-pink) 0 22%, transparent 23%), radial-gradient(circle at 100% 50%, var(--lychee-pink) 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, var(--lychee-pink) 0 22%, transparent 23%), radial-gradient(circle at 0 50%, var(--lychee-pink) 0 22%, transparent 23%); filter: drop-shadow(0 0 14px rgba(255, 58, 242, 0.65)); }
.flower-shiso { width: 64px; height: 38px; border: 2px solid var(--mint-ion); border-radius: 90% 0 90% 0; transform: translateX(-50%) rotate(-25deg) scale(0.45); filter: drop-shadow(0 0 14px rgba(28, 255, 178, 0.58)); }
.active .flower-shiso { transform: translateX(-50%) rotate(-25deg) scale(1); }
.flower-citrus { width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(var(--electric-yuzu) 0 18deg, transparent 18deg 26deg, var(--electric-yuzu) 26deg 55deg, transparent 55deg 64deg, var(--electric-yuzu) 64deg 98deg, transparent 98deg 110deg, var(--electric-yuzu) 110deg 180deg, transparent 180deg 198deg, var(--electric-yuzu) 198deg 360deg); box-shadow: 0 0 20px rgba(223, 255, 0, 0.58); }
.flower-carbon { width: 62px; height: 62px; border: 2px solid var(--rice-paper); border-radius: 50%; box-shadow: inset 17px -10px 0 rgba(246, 240, 222, 0.08), 0 0 18px rgba(246, 240, 222, 0.18); }

.garden-copy { align-self: center; }
.garden-copy p { max-width: 610px; }

.conversation-panel { max-width: 1000px; margin-left: auto; }
.dialogue-card { margin-top: 34px; min-height: 132px; padding: 24px 28px; border: 1px solid rgba(246, 240, 222, 0.12); background: linear-gradient(135deg, rgba(22, 26, 24, 0.74), rgba(7, 8, 7, 0.66)); box-shadow: 0 0 42px rgba(255, 58, 242, 0.06); }
.dialogue-card p { display: inline; margin: 0; font-family: var(--mono); color: var(--rice-paper); }
.speaker { display: block; color: var(--lychee-pink); text-transform: uppercase; font-size: 12px; letter-spacing: 0.18em; margin-bottom: 18px; }
.stamp-board { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 24px; }
.receipt-notes { position: absolute; left: clamp(22px, 7vw, 110px); bottom: 18vh; display: flex; flex-direction: column; gap: 9px; color: rgba(246, 240, 222, 0.48); }

.lantern-scene { text-align: center; justify-self: center; margin-top: -6vh; }
.last-flower { width: 116px; height: 116px; position: relative; margin: 0 auto 42px; filter: drop-shadow(0 0 24px rgba(255, 58, 242, 0.54)); animation: lanternPulse 5s ease-in-out infinite; }
.petal { position: absolute; width: 42px; height: 64px; left: 37px; top: 8px; background: var(--lychee-pink); border-radius: 80% 80% 25% 25%; transform-origin: 50% 50px; opacity: 0.86; }
.p1 { transform: rotate(0deg); } .p2 { transform: rotate(90deg); background: var(--mint-ion); } .p3 { transform: rotate(180deg); background: var(--electric-yuzu); } .p4 { transform: rotate(270deg); background: var(--neon-mandarin); }
.center-dot { position: absolute; left: 48px; top: 48px; width: 20px; height: 20px; border-radius: 50%; background: var(--carbon-sumi); border: 2px solid var(--rice-paper); }
.quiet-domain { font-family: var(--jost); font-size: clamp(54px, 10vw, 140px); line-height: 1; margin: 0; color: var(--rice-paper); letter-spacing: -0.05em; }
.final-type { color: var(--rice-paper); }
.last-call { position: absolute; right: clamp(22px, 7vw, 110px); bottom: 17vh; color: rgba(246, 240, 222, 0.48); }

.note-pop {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  transform: translate(-50%, -140%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  padding: 10px 13px;
  border: 1px solid rgba(223, 255, 0, 0.5);
  background: rgba(7, 8, 7, 0.88);
  color: var(--rice-paper);
  font-family: var(--mono);
  font-size: 12px;
  box-shadow: 0 0 22px rgba(223, 255, 0, 0.18);
  transition: opacity 160ms ease, transform 160ms ease;
}
.note-pop.show { opacity: 1; transform: translate(-50%, -155%) scale(1); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.18) translateY(2vh); opacity: 0.26; } }
@keyframes railTravel { to { left: 115%; } }
@keyframes rise { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-160px) scale(1.2); opacity: 0; } }
@keyframes lanternPulse { 50% { transform: scale(1.05); filter: drop-shadow(0 0 38px rgba(223, 255, 0, 0.36)); } }

@media (max-width: 860px) {
  .pour-nav { display: none; }
  .pour { padding: 9vh 22px 16vh; }
  .pour::after { inset: 10vh 14px 16vh; border-radius: 22px; }
  .fixed-rail { top: 70vh; }
  .counter-composition, .garden-layout { grid-template-columns: 1fr; gap: 32px; }
  .icon-garden { right: 22px; bottom: 18vh; gap: 12px; }
  .botanical-icon { width: 58px; height: 58px; }
  .ingredient-row { left: 22px; right: 22px; bottom: 9vh; }
  .ikebana-stems { min-height: 330px; }
  .stem { height: 290px; transform: scale(0.85); transform-origin: bottom center; }
  .conversation-panel { margin-left: 0; }
  .receipt-notes, .last-call, .micro-note { bottom: 7vh; left: 22px; right: 22px; }
}