:root {
  /* Typography compliance tokens: Inter** Interface labels microcopy: Mono** */
  --espresso-night: #171322;
  --plum-shadow: #2B203A;
  --orchid-haze: #9D7BB5;
  --cyan-glow: #7EB7C5;
  --peach-foam: #E7A6A1;
  --porcelain-lavender: #E8DFF2;
  --chrome-line: #B8B4C8;
  --black-coffee: #0B0810;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --design-token-inter: "Inter**";
  --design-token-mono: "Mono**";
  --design-token-grep-inter: "Inter*";
  --design-token-grep-mono: "Mono*";
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--black-coffee); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--porcelain-lavender);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 12%, rgba(157, 123, 181, 0.28), transparent 34rem),
    radial-gradient(circle at 78% 28%, rgba(126, 183, 197, 0.17), transparent 32rem),
    linear-gradient(135deg, var(--black-coffee), var(--espresso-night) 46%, var(--plum-shadow));
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -18vh -18vw;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(184, 180, 200, 0.08) 1px, transparent 1px),
    linear-gradient(25deg, rgba(184, 180, 200, 0.045) 1px, transparent 1px);
  background-size: 9rem 9rem, 7rem 7rem;
  transform: perspective(800px) rotateX(62deg) rotateZ(-13deg) translateY(22vh);
  transform-origin: center bottom;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
}

.aurora {
  position: fixed;
  width: 64vw;
  height: 34vh;
  border-radius: 999px;
  filter: blur(44px);
  opacity: 0.48;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(var(--drift-r, -8deg));
  transition: transform 1.2s ease-out;
}

.aurora-one {
  top: 5vh;
  left: -14vw;
  background: linear-gradient(90deg, rgba(157, 123, 181, 0), rgba(157, 123, 181, 0.72), rgba(126, 183, 197, 0.42), rgba(157, 123, 181, 0));
}

.aurora-two {
  right: -18vw;
  bottom: 10vh;
  background: linear-gradient(90deg, rgba(231, 166, 161, 0), rgba(126, 183, 197, 0.34), rgba(231, 166, 161, 0.46), rgba(157, 123, 181, 0));
}

.scanline-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 5px, rgba(232, 223, 242, 0.08) 6px, transparent 7px);
}

.undo-terminal { position: relative; z-index: 1; }

.dashboard-state {
  min-height: 100vh;
  padding: clamp(1.3rem, 3vw, 3rem);
  position: relative;
  display: grid;
  align-content: center;
}

.state-meta,
.module-label {
  font-family: var(--mono);
  color: var(--chrome-line);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.state-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0.8;
}

.wordmark {
  margin: 1.2rem 0 -0.3rem;
  font-family: var(--display);
  font-size: clamp(5.6rem, 18vw, 18rem);
  font-weight: 400;
  letter-spacing: 0.095em;
  line-height: 0.78;
  color: var(--porcelain-lavender);
  text-shadow: 0 0 28px rgba(157, 123, 181, 0.36), 0.04em 0.025em 0 rgba(126, 183, 197, 0.18), -0.03em -0.018em 0 rgba(231, 166, 161, 0.14);
}

.opening-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.92fr) minmax(18rem, 1.08fr);
  gap: clamp(1rem, 4vw, 5rem);
  align-items: end;
}

.receipt-monitor,
.module,
.quiet-panel {
  position: relative;
  border: 1px solid rgba(184, 180, 200, 0.34);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(43, 32, 58, 0.76), rgba(23, 19, 34, 0.58));
  box-shadow: 0 2rem 5rem rgba(11, 8, 16, 0.45), inset 0 1px 0 rgba(232, 223, 242, 0.12), 0 0 2rem rgba(126, 183, 197, 0.08);
  backdrop-filter: blur(12px);
}

.tilt-card { transform-style: preserve-3d; transition: transform 180ms ease-out; }

.receipt-monitor {
  min-height: 29rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  transform: perspective(900px) rotateX(7deg) rotateY(-8deg) rotateZ(-2deg);
  overflow: hidden;
}

.receipt-monitor::before,
.module::before,
.quiet-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgba(232, 223, 242, 0.05), rgba(232, 223, 242, 0.05) 1px, transparent 1px, transparent 9px);
  opacity: 0.26;
  pointer-events: none;
}

.chrome-corners::before,
.chrome-corners::after {
  content: "";
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  border-color: rgba(232, 223, 242, 0.55);
  border-style: solid;
}

.chrome-corners::before { left: 1rem; top: 1rem; border-width: 1px 0 0 1px; border-radius: 0.8rem 0 0 0; }
.chrome-corners::after { right: 1rem; bottom: 1rem; border-width: 0 1px 1px 0; border-radius: 0 0 0.8rem 0; }

.receipt-topline { display: flex; justify-content: space-between; font-family: var(--mono); color: var(--chrome-line); text-transform: uppercase; letter-spacing: 0.12em; }
.receipt-topline strong { font-family: var(--display); color: var(--peach-foam); font-size: 3.3rem; line-height: 0.75; letter-spacing: 0.08em; }

h2 {
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 0.82;
}

.poetic-error {
  margin: 2rem 0;
  color: var(--porcelain-lavender);
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  line-height: 1.42;
}

.command-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 2rem; }
.command-strip span,
.keycap {
  font-family: var(--mono);
  color: var(--porcelain-lavender);
  border: 1px solid rgba(184, 180, 200, 0.3);
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  background: rgba(11, 8, 16, 0.34);
}

.receipt-ticks { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; display: flex; justify-content: space-between; }
.receipt-ticks i { width: 1.2rem; height: 0.35rem; background: rgba(232, 223, 242, 0.35); border-radius: 999px; }

.cafe-counter { min-height: 23rem; position: relative; transform: perspective(900px) rotateX(55deg) rotateZ(-9deg); transform-origin: center bottom; }
.counter-line { position: absolute; inset: 42% 3% auto; height: 10rem; border-radius: 50%; border: 1px solid rgba(126, 183, 197, 0.24); background: linear-gradient(90deg, rgba(157, 123, 181, 0.16), rgba(126, 183, 197, 0.08)); box-shadow: 0 3rem 5rem rgba(11, 8, 16, 0.8); }
.iso-object { position: absolute; transform-style: preserve-3d; transition: transform 400ms ease; }
.register-icon { right: 18%; top: 24%; width: 8rem; height: 5rem; }
.register-icon .screen { position: absolute; inset: 0 1rem 1.8rem; background: linear-gradient(135deg, var(--cyan-glow), var(--orchid-haze)); border-radius: 0.6rem; transform: skewX(-18deg); opacity: 0.68; }
.register-icon .base { position: absolute; left: 0.5rem; right: 0; bottom: 0; height: 2rem; background: var(--plum-shadow); border: 1px solid rgba(184, 180, 200, 0.35); border-radius: 0.45rem; }
.cup-icon { left: 18%; bottom: 26%; width: 7rem; height: 6rem; }
.cup-bowl { display: grid; place-items: center; width: 5.3rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle, var(--peach-foam), var(--orchid-haze) 52%, var(--plum-shadow) 54%); color: var(--black-coffee); font-family: var(--display); font-size: 2.4rem; }
.cup-shadow { display: block; width: 5.5rem; height: 1.1rem; margin-top: 0.8rem; border-radius: 50%; background: rgba(11, 8, 16, 0.46); filter: blur(5px); }

.section-heading { width: min(45rem, 100%); margin-left: 6vw; }
.section-heading span { font-family: var(--mono); color: var(--cyan-glow); text-transform: uppercase; letter-spacing: 0.16em; }
.section-heading p,
.module p,
.quiet-panel p { color: rgba(232, 223, 242, 0.72); line-height: 1.7; }

.console-board {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1.05fr 1.35fr 0.9fr;
  grid-template-areas: "gauge progress tray" "command progress tray";
  gap: clamp(0.9rem, 2vw, 1.5rem);
  perspective: 1000px;
}

.module { min-height: 13rem; padding: 1.3rem; transform-style: preserve-3d; transition: transform 400ms ease, box-shadow 400ms ease; }
.module:hover, .module.is-near { transform: perspective(800px) rotateX(4deg) rotateY(-5deg) translateY(-0.35rem); box-shadow: 0 2.4rem 5rem rgba(11, 8, 16, 0.55), 0 0 2.8rem rgba(126, 183, 197, 0.13); }
.module-gauge { grid-area: gauge; transform: perspective(900px) rotateX(4deg) rotateY(8deg); }
.module-progress { grid-area: progress; min-height: 28rem; transform: perspective(900px) rotateX(7deg) rotateY(-4deg); }
.module-tray { grid-area: tray; transform: perspective(900px) rotateX(8deg) rotateY(-8deg) rotateZ(2deg); }
.module-command { grid-area: command; transform: perspective(900px) rotateX(5deg) rotateY(4deg) rotateZ(-1deg); }

.gauge-face { margin: 1.5rem auto 1rem; width: 12rem; height: 6rem; border-radius: 7rem 7rem 0 0; border: 1px solid rgba(184, 180, 200, 0.36); border-bottom: 0; position: relative; background: radial-gradient(circle at bottom, rgba(126, 183, 197, 0.2), transparent 70%); }
.gauge-needle { position: absolute; bottom: 0; left: 50%; width: 1px; height: 5rem; background: var(--peach-foam); transform-origin: bottom; transform: rotate(-45deg); animation: coolNeedle 7s ease-in-out infinite alternate; }
.gauge-face b { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.75rem; color: var(--cyan-glow); }

.reverse-bar { height: 1.1rem; border-radius: 999px; background: rgba(11, 8, 16, 0.45); overflow: hidden; margin: 2rem 0; border: 1px solid rgba(184, 180, 200, 0.2); }
.reverse-bar span { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, var(--peach-foam), var(--orchid-haze), var(--cyan-glow)); animation: reverseCrema 6s ease-in-out infinite alternate; }
.undo-stack { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.undo-stack li { font-family: var(--mono); color: var(--porcelain-lavender); padding: 0.8rem 1rem; border-left: 2px solid var(--cyan-glow); background: rgba(232, 223, 242, 0.045); }
.tray-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: center; margin: 2rem 0; }
.floppy, .spoon { height: 4rem; border-radius: 0.7rem; display: grid; place-items: center; background: linear-gradient(145deg, rgba(126, 183, 197, 0.35), rgba(43, 32, 58, 0.8)); border: 1px solid rgba(184, 180, 200, 0.32); box-shadow: 0 1rem 2rem rgba(11, 8, 16, 0.35); }
.floppy::before { content: ""; width: 56%; height: 42%; border-radius: 0.3rem; background: rgba(232, 223, 242, 0.48); align-self: start; margin-top: 0.5rem; }
.spoon { color: var(--peach-foam); font-family: var(--display); font-size: 3rem; border-radius: 50% 50% 0.9rem 0.9rem; }
.mono-lines { display: grid; gap: 1rem; margin-top: 1.3rem; }
.mono-lines span { font-family: var(--mono); color: var(--chrome-line); border-bottom: 1px solid rgba(184, 180, 200, 0.18); padding-bottom: 0.7rem; }

.calm-state { grid-template-columns: 1.1fr 0.85fr; gap: clamp(1rem, 4vw, 4rem); align-items: center; }
.final-counter { min-height: 31rem; position: relative; border-bottom: 1px solid rgba(184, 180, 200, 0.24); }
.restored-cup { position: absolute; left: 48%; top: 48%; transform: translate(-50%, -50%); width: 13rem; height: 13rem; }
.steam-field span { position: absolute; left: 50%; bottom: 8rem; width: 2.2rem; height: 7rem; border-left: 2px solid rgba(126, 183, 197, 0.42); border-radius: 50%; transform-origin: bottom; animation: steamReverse 5s linear infinite; }
.steam-field span:nth-child(2) { margin-left: -2.2rem; animation-delay: -1.4s; border-color: rgba(157, 123, 181, 0.44); }
.steam-field span:nth-child(3) { margin-left: 2rem; animation-delay: -2.8s; border-color: rgba(231, 166, 161, 0.34); }
.cup-rim { position: absolute; left: 2.1rem; right: 2.1rem; bottom: 4.1rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--peach-foam), var(--orchid-haze) 48%, var(--plum-shadow) 50%); color: var(--black-coffee); font-family: var(--display); font-size: 3rem; z-index: 2; }
.cup-body { position: absolute; left: 3rem; right: 3rem; bottom: 1.7rem; height: 4rem; border-radius: 0 0 2rem 2rem; background: linear-gradient(160deg, var(--porcelain-lavender), var(--chrome-line)); box-shadow: 0 2rem 3rem rgba(11, 8, 16, 0.42); }
.moon-stool { position: absolute; right: 17%; bottom: 13%; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid rgba(184, 180, 200, 0.32); background: linear-gradient(145deg, rgba(232, 223, 242, 0.16), rgba(126, 183, 197, 0.12)); }
.moon-stool::after { content: ""; position: absolute; left: 50%; top: 100%; height: 5rem; border-left: 1px solid rgba(184, 180, 200, 0.22); }
.aurora-reflection { position: absolute; left: 14%; right: 6%; bottom: 2rem; height: 5rem; border-radius: 50%; background: linear-gradient(90deg, rgba(157, 123, 181, 0.2), rgba(126, 183, 197, 0.2), transparent); filter: blur(12px); }
.quiet-panel { padding: clamp(1.4rem, 3vw, 2.5rem); transform: perspective(900px) rotateX(5deg) rotateY(-7deg); }
.steep-control { margin-top: 1.4rem; border: 1px solid rgba(126, 183, 197, 0.55); border-radius: 999px; background: rgba(11, 8, 16, 0.42); color: var(--porcelain-lavender); font-family: var(--mono); padding: 0.95rem 1.25rem; cursor: pointer; box-shadow: 0 0 1.2rem rgba(126, 183, 197, 0.12); transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.steep-control:hover, .steep-control.is-steeping { transform: translateY(-0.2rem); background: rgba(126, 183, 197, 0.14); box-shadow: 0 0 2rem rgba(126, 183, 197, 0.22); }
.is-steeping ~ * .steam-field span, .steam-field.is-rewinding span { animation-duration: 1.5s; }

@keyframes coolNeedle { from { transform: rotate(46deg); } to { transform: rotate(-52deg); } }
@keyframes reverseCrema { from { transform: translateX(0); width: 76%; } to { transform: translateX(-36%); width: 38%; } }
@keyframes steamReverse { 0% { transform: translateY(-3rem) scaleY(1.1) rotate(12deg); opacity: 0; } 25% { opacity: 0.7; } 100% { transform: translateY(3rem) scaleY(0.45) rotate(-18deg); opacity: 0; } }

@media (max-width: 900px) {
  .opening-grid,
  .calm-state { grid-template-columns: 1fr; }
  .console-board { grid-template-columns: 1fr; grid-template-areas: "gauge" "progress" "tray" "command"; }
  .state-meta { flex-direction: column; }
  .wordmark { font-size: clamp(5rem, 24vw, 9rem); }
  .cafe-counter { min-height: 16rem; }
}