:root {
  color-scheme: dark;
  --bg: #17110e;
  --bg-2: #241713;
  --espresso: #3a1d15;
  --espresso-deep: #210f0b;
  --terracotta: #c87552;
  --terracotta-dark: #7f402e;
  --ivory: #f5ecdc;
  --silver: #cbc6bc;
  --muted: rgba(245, 236, 220, 0.56);
  --hairline: rgba(245, 236, 220, 0.14);
  --spring-snappy: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%, 1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%, 1.004 59.2%, 1.001 69.3%, 1);
  --spring-smooth: linear(0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%, 0.25 9.9%, 0.601 16.5%, 0.815 21%, 0.929 25.2%, 0.987 29%, 1.025 33.5%, 1.042 38%, 1.04 43.5%, 1.027 50%, 1.013 57.5%, 1.005 67%, 1.001 79%, 1);
  --ease-snap: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ivory);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 37%, rgba(175, 91, 59, 0.14), transparent 28rem),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.035), transparent 25rem),
    linear-gradient(145deg, #1d1410 0%, var(--bg) 58%, #100c0a 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.experience {
  width: min(1220px, calc(100% - 40px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 28px 0 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}

.masthead,
.caption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mark {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--terracotta);
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}

.eyebrow,
.caption-row p,
.stage-copy,
.status {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 10px;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.4vw, 45px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.045em;
}

.status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: rgba(245,236,220,.72);
  font-size: 9px;
  background: rgba(255,255,255,.026);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 12px rgba(200,117,82,.82);
}

.stage {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,0)),
    radial-gradient(circle at 50% 45%, rgba(245,236,220,.045), transparent 43%),
    rgba(16, 11, 9, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 22px 80px rgba(0,0,0,.14);
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.stage::before {
  inset: 18px;
  border: 1px solid rgba(245,236,220,.055);
  border-radius: 20px;
}

.stage::after {
  top: 26px;
  left: 50%;
  width: 1px;
  height: calc(100% - 52px);
  background: linear-gradient(transparent, rgba(245,236,220,.05) 20%, rgba(245,236,220,.05) 80%, transparent);
}

.stage-halo {
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,117,82,.13), rgba(200,117,82,.035) 42%, transparent 70%);
  filter: blur(20px);
  animation: halo-breathe 5.6s ease-in-out infinite alternate;
}

#espressoScene {
  position: relative;
  width: min(100%, 1040px);
  height: min(74vh, 760px);
  min-height: 480px;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

.stage-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(245,236,220,.28);
  font-size: 8px;
  pointer-events: none;
}

.caption-row {
  color: rgba(245,236,220,.42);
  font-size: 9px;
}

.caption-row p { margin: 0; }

.keycap {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 18px;
  margin-right: 6px;
  border: 1px solid rgba(245,236,220,.16);
  border-radius: 5px;
  color: rgba(245,236,220,.65);
}

.floor-shadow { fill: rgba(0,0,0,.28); }
.machine-back { fill: url(#silver); stroke: rgba(255,255,255,.2); stroke-width: 1.4; }
.machine-top { fill: #a7a39b; stroke: rgba(255,255,255,.18); }
.machine-panel { fill: #29211e; stroke: rgba(245,236,220,.15); stroke-width: 1.5; }
.machine-base { fill: url(#silverDark); stroke: rgba(255,255,255,.22); }
.drip-tray { fill: #34302c; stroke: rgba(255,255,255,.12); }
.tray-slats path { stroke: #a8a39b; stroke-width: 2; }
.foot { fill: #1a1715; }

.hopper-glass {
  fill: rgba(222,216,205,.11);
  stroke: rgba(244,237,225,.44);
  stroke-width: 2;
}
.hopper-rim, .hopper-neck { fill: url(#silverDark); stroke: rgba(255,255,255,.24); }
.bean { fill: #4b2519; stroke: #6e3927; stroke-width: 1.4; }
.bean-seam { fill: none; stroke: rgba(239,184,132,.55); stroke-width: 1.3; stroke-linecap: round; }

.grinder-ring { fill: #27201d; stroke: #918b83; stroke-width: 3; }
.gear path { fill: #968f85; stroke: #d5d0c7; stroke-width: 1.1; }
.gear circle { fill: #312925; stroke: #c6bfb5; stroke-width: 1.4; }
.gear-small { opacity: .9; }
.grinder-chute { fill: #6e6861; stroke: #bdb6ac; stroke-width: 1.5; }

.group-neck { fill: #5f5b56; stroke: #beb8af; stroke-width: 1.4; }
.group-head { fill: url(#silverDark); stroke: #d1cbc1; stroke-width: 1.6; }
.group-lip { fill: #302b27; stroke: #b7b0a6; stroke-width: 2.1; }
.spout { fill: none; stroke: #9f9a92; stroke-width: 8; stroke-linecap: round; }
.spout-tip { fill: #4c4540; stroke: #c7c0b7; stroke-width: 1; }

.tamper-handle { fill: #743823; stroke: #b86747; stroke-width: 1.3; }
.tamper-neck { fill: #a6a198; }
.tamper-base { fill: url(#silverDark); stroke: #d8d2ca; stroke-width: 1.4; }
.ground { fill: #2c130d; }

.pf-basket { fill: url(#silverDark); stroke: #e0d9cf; stroke-width: 1.5; }
.pf-neck { fill: #8f8a83; }
.pf-handle { fill: #4c2a20; stroke: #8f5540; stroke-width: 1.2; }
.pf-end { fill: #382019; stroke: #7c4736; stroke-width: 1.3; }
.coffee-bed { fill: #32170f; stroke: #5b2b1c; stroke-width: 1; }

.gauge-case { fill: #716c66; stroke: #c7c1b8; stroke-width: 2; }
.gauge-face { fill: #eee7d8; stroke: #332c28; stroke-width: 1.5; }
.gauge-scale { fill: none; stroke: #5e514b; stroke-width: 2; }
.ticks path { stroke: #5a4c45; stroke-width: 1.8; stroke-linecap: round; }
.needle { fill: none; stroke: #b9523b; stroke-width: 2.6; stroke-linecap: round; }
.needle-cap { fill: #3a312d; }
.gauge-label { fill: #6d5b51; font: 600 7px/1 ui-monospace, monospace; letter-spacing: .08em; }

.brew-button { cursor: pointer; outline: none; }
.button-aura { fill: url(#buttonGlow); opacity: .52; filter: url(#glow); }
.button-ring { fill: #23201d; stroke: #c9c1b8; stroke-width: 2; }
.button-face { fill: #d27b55; stroke: #f3d7bd; stroke-width: 1.3; }
.button-icon { fill: none; stroke: #2a1712; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brew-button:hover .button-face,
.brew-button:focus .button-face { fill: #e49069; }
.brew-button:focus-visible .button-ring { stroke: #fff2dc; stroke-width: 3; }

.saucer-shadow { fill: rgba(20,11,8,.3); }
.saucer { fill: #dfd4c0; stroke: #fff7e8; stroke-width: 2; }
.saucer-inner { fill: none; stroke: #c9bca8; stroke-width: 2; }
.cup { fill: url(#milkGrad); stroke: #fff9ee; stroke-width: 2.4; }
.cup-rim { fill: #f7eddb; stroke: #fff9ee; stroke-width: 2.2; }
.cup-handle { fill: none; stroke: #efe3cf; stroke-width: 15; stroke-linecap: round; }
.coffee-fill { fill: url(#espressoGrad); }
.crema { fill: #b86e3f; opacity: .94; }
.crema-swirl { fill: none; stroke: #e8ba7d; stroke-width: 4.2; stroke-linecap: round; }
.latte-heart { fill: #fff5df; stroke: #f7e6c9; stroke-width: 1.2; }
.espresso-stream { fill: none; stroke: url(#espressoGrad); stroke-width: 6; stroke-linecap: round; }

.steam { fill: none; stroke: rgba(255,248,233,.72); stroke-width: 3.3; stroke-linecap: round; }

.pitcher-body { fill: url(#silver); stroke: #ebe5db; stroke-width: 2; }
.pitcher-highlight { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 4; stroke-linecap: round; }
.pitcher-rim { fill: #5f5a54; stroke: #d9d3ca; stroke-width: 2; }
.pitcher-spout { fill: #a8a39b; stroke: #dbd5cb; stroke-width: 1.5; }
.pitcher-handle { fill: none; stroke: #a5a097; stroke-width: 13; stroke-linecap: round; }
.milk-stream { fill: none; stroke: #fff4de; stroke-width: 7; stroke-linecap: round; }
.milk-drop { fill: #fff4de; }

.biscuit { fill: #b96e3f; stroke: #d88f5b; stroke-width: 2; }
.chip { fill: #6d321f; }
.crumb { fill: #c77d4d; }

.indicator-track { fill: rgba(245,236,220,.08); }
.indicator-fill { fill: var(--terracotta); transform-origin: 340px 610px; }
.indicator-dots circle { fill: #4b403a; stroke: rgba(245,236,220,.18); stroke-width: 1; }

@keyframes halo-breathe {
  from { transform: translate(-50%, -50%) scale(.96); opacity: .65; }
  to { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

@media (max-width: 760px) {
  .experience {
    width: min(100% - 20px, 1220px);
    padding: 14px 0;
    gap: 11px;
  }
  .masthead { align-items: flex-start; }
  .brand-mark { width: 36px; }
  .status { padding: 8px 10px; }
  #espressoScene {
    min-height: 430px;
    height: 68svh;
    transform: scale(1.03);
  }
  .stage { border-radius: 20px; }
  .stage::before { inset: 10px; border-radius: 14px; }
  .stage-copy { left: 16px; right: 16px; bottom: 11px; }
  .stage-copy span:nth-child(even) { display: none; }
  .caption-row { display: none; }
}

@media (max-width: 520px) {
  .status { display: none; }
  .eyebrow { font-size: 8px; }
  h1 { font-size: 28px; }
  #espressoScene { min-height: 390px; height: 72svh; }
  .stage-copy { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-halo { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}