/* Send Me SPAM — shared styles */

@property --sick { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --bloat { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --ink: #2b2340;
  --wall: #eab98f;
  --floor: #f1d3a6;
  --floor-edge: #c99a68;
  --coral: #ff6f86;
  --mint: #bdeed6;
  --peach: #ffae94;
  --sick-green: #a3d84a;
  --sick-olive: #c3c25a;
  --pink: #ff9cc0;
  --hand: #ff8f7e;
  --screen: #7ff3ff;
  --screen-sick: #d6ff52;
  --paper: #fffaf3;
  --floor-h: clamp(110px, 20vh, 220px);
  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Fredoka", ui-rounded, system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

body {
  position: relative;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--wall);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Server closet backdrop ---------- */

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56'%3E%3Cg fill='%23d9996b' fill-opacity='.45'%3E%3Crect x='2' y='2' width='56' height='24' rx='4'/%3E%3Crect x='62' y='2' width='56' height='24' rx='4'/%3E%3Crect x='-28' y='30' width='56' height='24' rx='4'/%3E%3Crect x='92' y='30' width='56' height='24' rx='4'/%3E%3C/g%3E%3Crect x='32' y='30' width='56' height='24' rx='4' fill='%23f3c9a2' fill-opacity='.6'/%3E%3C/svg%3E"),
    linear-gradient(#e2ac83, var(--wall) 60%);
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--floor-h);
  background: linear-gradient(var(--floor), #e8c290);
  border-top: 6px solid var(--floor-edge);
}

.window {
  position: absolute;
  top: 8%;
  right: 14%;
  width: clamp(140px, 16vw, 230px);
  aspect-ratio: 5 / 6;
  border: 10px solid #fff2dc;
  outline: 4px solid var(--ink);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent calc(50% - 5px), #fff2dc 0 calc(50% + 5px), transparent 0),
    linear-gradient(transparent calc(50% - 5px), #fff2dc 0 calc(50% + 5px), transparent 0),
    linear-gradient(160deg, #fffbe0, #ffd98a);
  box-shadow: 0 0 90px 40px rgba(255, 222, 140, 0.55);
}
.window::after {
  /* The top edge matches the pane width and starts below the 10px sill.
     The wider lower edge casts light leftward without shifting its source. */
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  left: -100%;
  width: 200%;
  height: 120vh;
  background: linear-gradient(rgba(255, 240, 190, 0.45), transparent 70%);
  clip-path: polygon(50% 0, 100% 0, 65% 100%, 0 100%);
  pointer-events: none;
}

.rack {
  position: absolute;
  bottom: calc(var(--floor-h) - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  background: #4a3f6b;
  border: 5px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset -10px 0 0 rgba(0, 0, 0, 0.18);
}
.rack-left { left: -18px; width: 140px; height: 44vh; }
.rack-right { right: -14px; width: 160px; height: 60vh; }
.unit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #3a3157;
  border: 3px solid var(--ink);
  border-radius: 6px;
}
.unit i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 8px var(--led);
  animation: led var(--speed) steps(2, jump-none) var(--delay) infinite;
}
.unit b { flex: 1; height: 6px; margin-left: 4px; border-radius: 3px; background: #241d3a; }
@keyframes led { 50% { opacity: 0.25; box-shadow: none; } }

.cables {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 28vh;
  overflow: visible;
}
.cable-outline, .cable { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cable-outline { stroke: var(--ink); stroke-width: 11; }
.cable { stroke-width: 6; }

/* ---------- Layout ---------- */

.scene {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4vw;
  /* Left padding keeps the text clear of the server rack (122px visible). */
  padding: max(5vh, 1.5rem) clamp(1rem, 7vw, 7rem) calc(var(--floor-h) * 0.4) max(160px, 12vw);
}

.intro {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.machine-wrap {
  position: relative;
  width: min(100%, 460px);
  justify-self: center;
}

/* Narrow screens: title, then the machine on the floor, then the rest. */
@media (max-width: 820px) {
  .scene {
    position: relative;
    overflow: clip;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 0.9rem;
    padding: 1.25rem 1rem 3rem;
    text-align: center;
  }
  .intro { display: contents; }
  .intro > * { order: 2; }
  .intro > .title, .intro > .tagline { order: 0; }
  .machine-wrap { order: 1; width: min(72vw, 330px, 40dvh); margin-top: 1.5rem; }
  .machine-wrap::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 90%;
    left: 50%;
    width: 100vw;
    height: 300vh;
    translate: -50% 0;
    background: var(--floor);
    border-top: 6px solid var(--floor-edge);
  }
  .backdrop::after, .rack, .window { display: none; }
  .cables { height: 13vh; }
}

/* ---------- Type ---------- */

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 8.5vw, 7rem);
  line-height: 0.95;
  color: #fff;
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--coral), 0.09em 0.11em 0 var(--ink);
}
.title span { display: block; }

.tagline {
  margin: 0;
  display: inline-block;
  padding: 0.35em 1em;
  background: var(--mint);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  rotate: -2deg;
}

.card {
  max-width: 34rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--ink);
  font-size: 1.06rem;
  line-height: 1.45;
}
.card p { margin: 0; }
.card p + p { margin-top: 0.6em; }

.counter {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1.1em;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
}
.counter strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4em;
  color: var(--coral);
  -webkit-text-stroke: 0.1em var(--ink);
  paint-order: stroke fill;
}

.hint {
  margin: 0;
  padding: 0.3em 0.9em;
  background: rgba(255, 250, 243, 0.85);
  border-radius: 999px;
  font-weight: 600;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 820px) { .actions { justify-content: center; } }

.btn {
  font-family: var(--font-display);
  font-size: 1.15rem;
  padding: 0.55em 1.15em;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  box-shadow: 0 5px 0 var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.btn-sick { background: var(--sick-green); color: var(--ink); }
.btn-ghost { background: #fff; color: var(--ink); }

.fineprint {
  position: absolute;
  inset: auto 0 0.7rem 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(43, 35, 64, 0.7);
  pointer-events: none;
}

/* ---------- Speech bubble ---------- */

.bubble {
  position: absolute;
  left: 62%;
  top: -6%;
  z-index: 7;
  max-width: min(17ch, 48vw);
  padding: 0.55em 0.95em;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.25;
  transform-origin: 10% 100%;
  scale: 0;
  transition: scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
/* Nested triangles keep the tail pointed and join its fill to the bubble. */
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  pointer-events: none;
}
.bubble::before {
  left: 18px;
  top: 100%;
  border-width: 18px 12px 0;
  border-top-color: var(--ink);
}
.bubble::after {
  left: 20px;
  top: calc(100% - 3px);
  border-width: 16px 10px 0;
  border-top-color: #fff;
}
.bubble.is-visible { scale: 1; }
.bubble:empty { display: none; }

/* ---------- Flying spam & effects ---------- */

.spam-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.spam {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 56px);
  will-change: transform;
  filter: drop-shadow(0 4px 0 rgba(43, 35, 64, 0.22));
}
.spam svg { display: block; width: 100%; height: auto; }

.pop {
  position: absolute;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #fff;
  -webkit-text-stroke: 0.14em var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
}

.crumb {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--pink);
  border: 2px solid var(--ink);
}

/* ---------- The machine ---------- */

.machine-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: --sick 1.4s ease, --bloat 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.machine-svg.is-spewing { transition: --sick 2s ease, --bloat 1.6s ease-out; }

.m-fill { fill: color-mix(in oklab, var(--mint), var(--sick-green) calc(var(--sick) * 100%)); }
.m-band { fill: color-mix(in oklab, var(--peach), var(--sick-olive) calc(var(--sick) * 100%)); }
.m-stroke { stroke: var(--ink); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
.m-thin { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.m-line { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.m-band-line { stroke-width: 6; }
.m-ink { fill: var(--ink); }
.m-shine { fill: none; stroke: #fff; stroke-opacity: 0.7; stroke-width: 10; stroke-linecap: round; }
.m-tire { fill: #4a4560; }
.m-hub { fill: #c3c6da; }
.m-tube-outline, .m-tube, .m-tube-rings { fill: none; stroke-linecap: round; }
.m-tube-outline { stroke: var(--ink); stroke-width: 24; }
.m-tube { stroke: #d3d6e6; stroke-width: 14; }
.m-tube-rings { stroke: #9a9db8; stroke-width: 14; stroke-dasharray: 3 8; stroke-linecap: butt; }
.m-hand { fill: var(--hand); }
.m-heart { fill: var(--pink); }
.m-visor { fill: #1f2238; }
.m-visor-shine { fill: none; stroke: #fff; stroke-opacity: 0.18; stroke-width: 6; stroke-linecap: round; }
.m-rivet { fill: var(--ink); opacity: 0.5; }
.m-side { fill: color-mix(in oklab, #f7eddc, #dcef9e calc(var(--sick) * 100%)); }
.m-band-side { fill: color-mix(in oklab, #f29a80, #a9a84a calc(var(--sick) * 100%)); }
.m-edge { stroke-width: 5; }
.m-joint { fill: #c3c6da; }
.m-joint-hub { fill: #8d90ab; }
.m-lcd { fill: #b6eeae; }
.m-lcd-line { fill: none; stroke: #2f7a4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.m-brand { font-family: var(--font-display); text-anchor: middle; fill: #ee4f74; }
.m-sweat path { fill: #bfe9ff; }
.m-question {
  display: none;
  font-family: var(--font-display);
  font-size: 80px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 8;
  paint-order: stroke fill;
  transform-origin: 48px 106px;
}

/* Screen face */
.m-screen { --glow: color-mix(in oklab, var(--screen), var(--screen-sick) calc(var(--sick) * 100%)); }
.m-glyph { fill: none; stroke: var(--glow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-glyph-fill { fill: var(--glow); }

/* Animation groups are nested so their transforms never fight. */
.m-shadow { fill: rgba(43, 35, 64, 0.22); transform-origin: 214px 424px; animation: m-shadow 2.4s ease-in-out infinite; }
.m-bob { animation: m-bob 2.4s ease-in-out infinite; }
.m-wobble, .m-squash { transform-origin: 210px 420px; }
.m-bloat {
  transform-origin: 210px 392px;
  transform: scale(calc(1 + var(--bloat) * 0.3), calc(1 + var(--bloat) * 0.14));
}
.m-arm-left { transform-origin: 68px 286px; animation: m-wave-l 1.1s ease-in-out infinite alternate; }
.m-arm-right { transform-origin: 322px 298px; animation: m-wave-r 1.1s ease-in-out infinite alternate; }
.m-antenna { transform-origin: 300px 136px; animation: m-sway 2.4s ease-in-out infinite alternate; }
.m-lid { transform-origin: 244px 150px; transition: transform 0.18s ease-out; }
.machine-svg[data-mouth="open"] .m-lid, .is-spewing .m-lid { transform: rotate(80deg); }
.m-look { transition: transform 0.15s ease-out; }
.eyes-open { transform-origin: 173px 250px; animation: m-blink 4.6s infinite; }
.spiral-l { transform-origin: 133px 250px; animation: m-spin 0.9s linear infinite; }
.spiral-r { transform-origin: 213px 250px; animation: m-spin 0.9s linear infinite reverse; }

/* Face states */
.m-eyes > g, .m-mouth > * { display: none; }
.machine-svg[data-eyes="open"] .eyes-open,
.machine-svg[data-eyes="confused"] .eyes-open,
.machine-svg[data-eyes="confused"] .eyes-brows,
.machine-svg[data-eyes="happy"] .eyes-happy,
.machine-svg[data-eyes="squint"] .eyes-squint,
.machine-svg[data-eyes="dizzy"] .eyes-dizzy,
.machine-svg[data-mouth="smile"] .mouth-smile,
.machine-svg[data-mouth="chew"] .mouth-chew,
.machine-svg[data-mouth="open"] .mouth-open,
.machine-svg[data-mouth="wavy"] .mouth-wavy,
.machine-svg[data-mouth="spew"] .mouth-spew,
.machine-svg[data-mouth="burp"] .mouth-burp,
.machine-svg[data-mouth="grin"] .mouth-grin { display: inline; }
.machine-svg[data-eyes="confused"] .m-question { display: inline; animation: m-question 1.6s ease-in-out infinite alternate; }

/* Moods */
.m-sweat { opacity: 0; transition: opacity 0.5s; }
.m-sweat path { animation: m-drip 1.4s ease-in infinite; }
.m-sweat path + path { animation-delay: 0.6s; }
.is-queasy .m-sweat, .is-rumbling .m-sweat { opacity: 1; }
.is-queasy .m-arm, .is-rumbling .m-arm { animation-duration: 2.4s; }
.is-queasy .m-wobble { animation: m-queasy 1.2s ease-in-out infinite alternate; }
.is-rumbling .m-wobble { animation: m-rumble 0.1s linear infinite; }
.is-spewing .m-wobble { animation: m-rumble 0.15s linear infinite; }
.is-spewing .m-arm { animation-duration: 0.2s; }

/* Konami easter egg: dancing overrides the face and the sick wobbles. */
.machine-svg.is-dancing .m-wobble { animation: m-dance 0.41s ease-in-out infinite alternate; }
.machine-svg.is-dancing .m-bob { animation-duration: 0.82s; }
.machine-svg.is-dancing .m-arm { animation-duration: 0.205s; }
.machine-svg.is-dancing .m-antenna { animation-duration: 0.41s; }
.machine-svg.is-dancing .m-eyes > g,
.machine-svg.is-dancing .m-mouth > *,
.machine-svg.is-dancing .m-question { display: none; }
.machine-svg.is-dancing .m-eyes > .eyes-happy,
.machine-svg.is-dancing .mouth-grin { display: inline; }
.machine-svg.is-singing .mouth-grin { display: none; }
.machine-svg.is-singing .mouth-open { display: inline; }
.machine-svg.is-singing .m-lid { transform: rotate(80deg); }

@keyframes m-bob { 50% { transform: translateY(-8px); } }
@keyframes m-shadow { 50% { transform: scale(0.92); } }
@keyframes m-wave-l { from { transform: rotate(14deg); } to { transform: rotate(-12deg); } }
@keyframes m-wave-r { from { transform: rotate(-5deg); } to { transform: rotate(16deg); } }
@keyframes m-sway { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes m-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-queasy { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes m-rumble {
  0% { transform: translate(-3px, 1px); }
  25% { transform: translate(3px, -1px); }
  50% { transform: translate(-2px, -2px); }
  75% { transform: translate(2px, 2px); }
}
@keyframes m-drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(28px); opacity: 0; } }
@keyframes m-question { from { transform: rotate(-10deg); } to { transform: rotate(12deg) translateY(-6px); } }
@keyframes m-dance { from { transform: rotate(-7deg) translateX(-6px); } to { transform: rotate(7deg) translateX(6px); } }

/* ---------- Now playing (Konami easter egg) ---------- */

.now-playing {
  position: fixed;
  left: 50%;
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 10;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 0.45em 0.5em 0.45em 0.9em;
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  font-size: clamp(0.85rem, 2.6vw, 1rem);
  line-height: 1.2;
  animation: np-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.np-icon { font-size: 1.3em; animation: np-note 0.41s ease-in-out infinite alternate; }
.np-stop {
  flex: none;
  padding: 0.35em 0.85em;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  border: 3px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.np-stop:hover { filter: brightness(1.08); }
.np-stop:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@keyframes np-in { from { scale: 0.4; opacity: 0; } }
@keyframes np-note { from { transform: rotate(-12deg); } to { transform: rotate(12deg) translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .now-playing, .np-icon { animation: none; }
}

/* ---------- Spamout extras ---------- */

.meter {
  width: min(100%, 22rem);
  height: 28px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: calc(var(--fill, 0) * 100%);
  background: linear-gradient(90deg, var(--mint), var(--sick-green));
  border-right: 4px solid var(--ink);
  transition: width 0.3s ease;
}
.status { font-family: var(--font-display); font-size: 1.35rem; }

.burp {
  position: fixed;
  left: 50%;
  top: 38%;
  z-index: 10;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 12rem);
  color: #fff;
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--sick-green), 0.09em 0.11em 0 var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .m-bob, .m-shadow, .m-arm, .m-antenna, .m-question, .unit i, .machine-svg.is-dancing .m-wobble { animation: none !important; }
}

/* Warm, ink-outlined workshop inspired by the original Gobbler illustration. */
:root {
  --ink: #533d46;
  --mint: #b8e4bd;
  --peach: #ffa58b;
  --hand: #f5a28b;
  --coral: #de775e;
  --paper: #fff6e4;
  --screen: #9af9ef;
  --font-display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
}
.backdrop { background-color: #b67d67; background-blend-mode: multiply, normal; }
.backdrop::after { background: radial-gradient(ellipse at 70% 0, #ffe8af, #d7aa80); border-color: #b57e5f; }
.window { top: 15%; right: 16%; width: clamp(160px, 20vw, 300px); border-color: #ffdfaa; outline-color: #b87b58; border-radius: 3px; transform: skewY(-5deg); }
.workbench { position: absolute; left: -20px; bottom: calc(var(--floor-h) - 50px); width: clamp(150px, 19vw, 280px); opacity: .9; }
.rack-left { left: 17%; width: 115px; height: 34vh; opacity: .65; }
.rack-right { width: clamp(130px, 14vw, 220px); background: #756277; transform: skewY(-5deg); }
.unit { background: #56485d; border-width: 2px; }
.cables { opacity: .8; }
.scene { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-left: max(160px, 16vw); padding-right: 10vw; gap: 2vw; }
.intro { position: relative; z-index: 6; gap: 1.15rem; padding: 2rem 0; }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.title { color: #fff3d5; font-size: clamp(3.5rem, 7.5vw, 7rem); -webkit-text-stroke-width: .055em; text-shadow: .035em .05em 0 #c78367, .055em .075em 0 var(--ink); }
.tagline { background: #d8e6b8; font-size: clamp(.8rem, 1.25vw, 1rem); border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
.card { background: #fff4deeb; border: 2px solid #77534f; border-radius: 4px 18px 18px 18px; box-shadow: 4px 5px 0 #7c514a26; max-width: 29rem; font-size: 1rem; }
.counter { border-width: 2px; box-shadow: 0 3px 0 #77534f; font-size: .9rem; }
.counter strong { color: #b2513e; -webkit-text-stroke: 0; }
.hint { padding: 0; background: none; font-size: .86rem; }
.btn { border-width: 2px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; box-shadow: 0 3px 0 var(--ink); }
.btn-sick { background: #d2dfa8; }
.btn-ghost { background: #fff1d9; }
.machine-wrap { width: min(100%, 560px); margin-bottom: 1vh; }
.bubble { left: 46%; top: -3%; border-width: 2px; font-size: 1rem; max-width: min(24ch, 43vw); box-shadow: 2px 4px 0 #533d4620; }
.m-stroke { stroke-width: 4.5; }
.m-thin { stroke-width: 3; }
.m-line { stroke-width: 4; }
.m-band-line, .m-edge { stroke-width: 3; }
.m-visor { fill: url(#m-glass); stroke: #718d85; stroke-width: 6; }
.m-tube-outline { stroke-width: 21; }
.m-tube { stroke: #c8e3c6; stroke-width: 15; }
.m-tube-rings { stroke: #7e9283; stroke-width: 15; stroke-dasharray: 2 8; }
.m-heart { fill: #ffdf93; }
.m-hub { fill: #e9c482; stroke: #8a7b7b; stroke-width: 5; }
.m-brand { font-family: var(--font-body); font-weight: 600; fill: #dc7862; }
.m-brand text + text { fill: #559e92; }
.m-lid { transform-origin: 195px 140px; transform: rotate(5deg); transition: transform .3s ease; }
.machine-svg[data-mouth="open"] .m-lid, .is-spewing .m-lid, .machine-svg.is-singing .m-lid { transform: rotate(-7deg) translateY(-4px); }
.mail-wing { transform-box: fill-box; animation: mail-flap .36s ease-in-out var(--flap-delay, 0s) infinite alternate; }
.wing-left { transform-origin: right center; }
.wing-right { transform-origin: left center; animation-direction: alternate-reverse; }
.spam { filter: drop-shadow(2px 5px 2px #613c432e); }
@keyframes mail-flap { from { transform: scaleY(.65) rotate(-9deg); } to { transform: scaleY(1) rotate(9deg); } }
@media (min-width: 1500px) { .scene { padding-left: 20vw; padding-right: 13vw; } }
@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; padding: 2rem 1.25rem 3rem; gap: 1rem; }
  .intro { display: contents; }
  .intro > .eyebrow { order: 0; font-size: .65rem; }
  .title { font-size: clamp(3.2rem, 12vw, 5rem); }
  .title span { display: inline; }
  .machine-wrap { width: min(77vw, 370px); margin-top: 0; }
  .workbench { width: 135px; top: 190px; bottom: auto; left: -50px; opacity: .5; }
  .card { max-width: 32rem; }
  .bubble { left: 50%; top: 0; font-size: .85rem; }
  .eyebrow { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mail-wing { animation: none; }
  .m-lid { transition: none; }
}