:root {
  --kora: #f7f5f0;
  --chunnam: #eae6df;
  --paper: #faf8f4;
  --bougainvillea: #d49a9a;
  --blush: #e5c1c1;
  --silt: #5b6440;
  --cardamom: #8d9972;
  --slate: #4e5357;
  --ash: #8a8f93;
  --line: #ddd8d0;
  --ink: #3a3d40;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--kora);
  color: var(--slate);
}
html { background: var(--kora); }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  background:
    radial-gradient(1200px 640px at 78% -8%, rgba(212,154,154,.34), transparent 58%),
    radial-gradient(880px 520px at -12% 108%, rgba(91,100,64,.22), transparent 52%),
    var(--kora);
}
h1, h2, .word, .price {
  font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
  font-weight: 500;
}
a { color: var(--silt); }
a, button { touch-action: manipulation; }
:focus-visible {
  outline: 2px solid var(--bougainvillea);
  outline-offset: 2px;
}
.stage {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}
.roost {
  position: absolute;
  inset: .7rem;
  border-radius: 1.7rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--chunnam) center/cover no-repeat;
  box-shadow: 0 28px 70px rgba(62,64,58,.12);
}
.roost .grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.roost .mural {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(1.04);
  transform: scale(1.04);
  animation: mural-ease 18s ease-out forwards;
}
.veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(247,245,240,.08) 0%, transparent 28%, rgba(247,245,240,.18) 62%, rgba(247,245,240,.92) 100%);
  pointer-events: none;
}
.cast {
  position: absolute;
  left: 50%;
  top: 1.05rem;
  bottom: auto;
  transform: translateX(-50%);
  display: flex;
  gap: .65rem;
  z-index: 2;
  justify-content: center;
  width: min(44rem, calc(100% - 2rem));
}
.bird {
  width: 5.1rem;
  text-align: center;
  color: var(--ink);
  padding: .22rem .12rem .35rem;
  border-radius: 1.2rem;
  background: rgba(250, 248, 244, .82);
  box-shadow: 0 8px 18px rgba(62,64,58,.1);
  transform: translateY(10px);
  animation: rise .8s ease forwards;
}
.bird img, .bird .ph {
  width: 5.1rem;
  height: 5.1rem;
  object-fit: cover;
  border-radius: 1.15rem;
  border: 2px solid var(--paper);
  box-shadow: 0 10px 22px rgba(91,100,64,.2);
  background: var(--paper);
  display: block;
  margin: 0 auto;
}
.bird .ph {
  display: grid;
  place-items: center;
  font-family: Palatino, Georgia, serif;
  color: var(--bougainvillea);
  background: var(--chunnam);
}
.bird b { display: block; font-size: .74rem; font-weight: 650; margin-top: .32rem; }
.bird span {
  display: block;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ash);
}
.bird.on img { outline: 3px solid var(--bougainvillea); outline-offset: 1px; }
.bird.ok img { outline: 3px solid var(--cardamom); outline-offset: 1px; }
.plate {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  width: min(38rem, calc(100% - 2.2rem));
  z-index: 6;
  text-align: center;
  padding: 1.05rem 1.15rem 1rem;
  border-radius: 1.45rem;
  background: rgba(250, 248, 244, .94);
  border: 1px solid color-mix(in srgb, var(--paper) 70%, var(--line));
  box-shadow: 0 18px 50px rgba(62,64,58,.12);
  backdrop-filter: blur(16px);
}
.mast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .55rem;
  gap: .6rem;
  flex-wrap: wrap;
}
.word {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: .15rem .35rem .15rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: .02em;
  transition: color 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.word:active { transform: scale(0.97); }
.quiet {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
}
.mast nav { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; margin-left: auto; }
.mast nav a, .mast nav .here {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: .4rem .8rem;
  border-radius: .65rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  cursor: pointer;
  transition: color 150ms var(--ease-out), background 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.mast nav .here { color: var(--silt); background: var(--chunnam); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .word:hover { color: var(--silt); }
  .mast nav a:hover { color: var(--ink); background: var(--chunnam); }
  .chip:hover { border-color: var(--cardamom); }
  .capsule button:hover, .yes:hover { filter: brightness(1.04); }
}
.mast nav a:active { transform: scale(0.97); }
.headline {
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  line-height: 1.08;
  margin: 0 0 .35rem;
  color: var(--ink);
}
.lede {
  color: var(--ash);
  line-height: 1.45;
  margin: 0 auto .7rem;
  max-width: 34rem;
  font-size: .95rem;
}
.story {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  margin: 0 0 .9rem;
  text-align: left;
}
.beat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 5.4rem;
  padding: .55rem .6rem .7rem;
  border-radius: .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  animation: beat-in 480ms var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
.beat b {
  display: block;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: .28rem;
}
.beat span {
  display: block;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--ink);
}
.beat .glow {
  position: absolute;
  left: .7rem; right: .7rem; bottom: .45rem;
  height: 2px;
  border-radius: 99px;
  background: var(--bougainvillea);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rail 12.8s var(--ease-out) infinite;
  animation-delay: var(--d, 0s);
}
.beat:nth-child(1) .glow { animation-delay: 0s; }
.beat:nth-child(2) .glow { animation-delay: 3.2s; }
.beat:nth-child(3) .glow { animation-delay: 6.4s; }
.beat:nth-child(4) .glow { animation-delay: 9.6s; }
@keyframes beat-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rail {
  0%, 6% { transform: scaleX(0); opacity: .3; }
  10%, 22% { transform: scaleX(1); opacity: 1; }
  28%, 100% { transform: scaleX(0); opacity: .3; }
}
.capsule {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .38rem .38rem .38rem 1rem;
  box-shadow: 0 10px 28px rgba(62,64,58,.08);
}
.cue {
  margin: 0 0 .45rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--silt);
  min-height: 1.1rem;
}
.capsule.typing {
  border-color: var(--silt);
  box-shadow: 0 0 0 4px rgba(91,100,64,.16), 0 10px 28px rgba(62,64,58,.08);
}
.capsule.typing input { caret-color: var(--silt); }
.capsule.ready #hire,
#hire.press,
#yes.press {
  animation: hire-pulse 1.1s ease-in-out infinite;
}
@keyframes hire-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.08); transform: scale(1.04); }
}
.capsule input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  min-width: 0;
  outline: none;
  padding: .5rem 0;
}
.capsule button, .yes {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--silt);
  color: var(--paper);
  border-radius: 999px;
  padding: .72rem 1.2rem;
  font-weight: 650;
  font-size: .95rem;
  transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.capsule button:active, .yes:active { transform: scale(0.97); }
.capsule button:disabled, .yes:disabled { opacity: .5; cursor: not-allowed; }
.capsule #yes,
.yes {
  background: var(--bougainvillea);
  min-width: 6.4rem;
  color: #3a2c30;
  box-shadow: 0 10px 24px rgba(212,154,154,.38);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .75rem;
  min-height: 2.4rem;
  padding: .32rem .8rem .32rem .32rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: .86rem;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 150ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip img { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; }
.quote { display: none; margin-top: .35rem; }
.quote.show { display: block; animation: rise .5s ease; }
.price {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  margin: .05rem 0 .1rem;
  color: var(--silt);
  font-weight: 600;
}
.path {
  display: none;
  margin: 1.15rem auto .2rem;
  max-width: 34rem;
}
.path.show { display: flex; justify-content: space-between; gap: .32rem; }
.step {
  flex: 1;
  height: .32rem;
  border-radius: 99px;
  background: var(--line);
  position: relative;
}
.step::after {
  content: attr(data-label);
  position: absolute;
  top: .55rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.step.on { background: var(--bougainvillea); }
.step.ok { background: var(--cardamom); }
.delivery {
  display: none;
  position: absolute;
  inset: 5.4rem 1.1rem 1.1rem;
  z-index: 4;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 22px 50px rgba(62,64,58,.16);
}
.delivery.show { display: block; animation: rise .6s ease; }
.delivery iframe { width: 100%; height: 100%; border: 0; background: var(--paper); }
.note { margin: .85rem 0 0; color: var(--ash); font-size: .78rem; }
.more { display: none; margin-top: .7rem; text-align: left; }
.more.open { display: grid; gap: .4rem; }
.more input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: .8rem;
  padding: .62rem .8rem;
  font: inherit;
}
.linkish {
  background: none;
  border: 0;
  color: var(--ash);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: .55rem;
  min-height: 2.2rem;
  padding: .35rem .2rem;
  font-size: .82rem;
  transition: color 150ms var(--ease-out), transform 160ms var(--ease-out);
}
.linkish:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .word, .mast nav a, .chip, .capsule button, .yes, .linkish {
    transition: color 150ms var(--ease-out), background 150ms var(--ease-out), filter 150ms var(--ease-out);
  }
  .word:active, .mast nav a:active, .chip:active, .capsule button:active, .yes:active, .linkish:active {
    transform: none;
  }
  .roost .mural, .bird, .delivery.show, .quote.show, .beat, .beat .glow, .capsule.ready #hire, #hire.press, #yes.press {
    animation: none;
  }
  .beat { opacity: 1; transform: none; }
}
.err { color: #b56e7c; font-size: .88rem; margin: .4rem 0 0; min-height: 0; }
@keyframes rise {
  from { transform: translateY(10px); }
  to { transform: translateY(0); }
}
@keyframes mural-ease {
  from { transform: scale(1.08); }
  to { transform: scale(1.02); }
}
body[data-locked] #more-toggle,
body[data-locked] .more { display: none !important; }
body[data-stage="paste"] .story { opacity: .55; }
body[data-stage="quote"] .cue,
body[data-stage="work"] .cue { margin-bottom: .2rem; }
body[data-stage="kit"] .cue { display: none; }
body[data-stage="quote"] .story,
body[data-stage="work"] .story,
body[data-stage="kit"] .story { display: none; }
body[data-stage="quote"] .chip,
body[data-stage="work"] .chip,
body[data-stage="kit"] .chip,
body[data-stage="quote"] .linkish,
body[data-stage="work"] .linkish,
body[data-stage="kit"] .linkish,
body[data-stage="kit"] .note,
body[data-stage="work"] .note { display: none; }
body[data-stage="quote"] .capsule { justify-content: space-between; }
body[data-stage="work"] .capsule input { display: none; }
body[data-stage="kit"] .roost { filter: saturate(.75) brightness(.92); }
body[data-stage="kit"] .cast { top: .55rem; }
body[data-stage="kit"] .bird span, body[data-stage="kit"] .bird b { color: var(--paper); text-shadow: 0 1px 8px rgba(58,61,64,.45); }
body[data-stage="kit"] .plate {
  top: .85rem;
  bottom: auto;
  width: min(42rem, calc(100% - 2.2rem));
  padding: .7rem 1rem .75rem;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
body[data-stage="kit"] .headline { font-size: 1.45rem; }
body[data-stage="kit"] .lede { margin-bottom: 0; }
body[data-stage="kit"] .capsule, body[data-stage="kit"] .quote, body[data-stage="kit"] .path { display: none; }
@media (max-width: 760px) {
  body { overflow: auto; }
  .stage { height: auto; min-height: 100dvh; }
  .roost { position: relative; inset: auto; margin: .55rem; min-height: 46vh; }
  .roost .mural { min-height: 46vh; }
  .cast { position: absolute; top: .7rem; bottom: auto; }
  .bird, .bird img { width: 3.5rem; height: auto; }
  .bird img { height: 3.5rem; }
  .plate { position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 1.4rem); margin: -3.2rem auto 1.4rem; }
  .story { grid-template-columns: 1fr 1fr; }
  .beat { min-height: 4.8rem; }
  .mast nav { width: 100%; margin-left: 0; }
  .delivery { position: relative; inset: auto; width: calc(100% - 1.4rem); margin: 0 auto 1.4rem; min-height: 70vh; }
  body[data-stage="kit"] .plate { position: relative; top: auto; }
  body[data-stage="kit"] .cast { position: absolute; top: .55rem; bottom: auto; }
}