:root {
  color-scheme: light;
  --ink: #18212f;
  --muted: #667085;
  --paper: #fbfaf7;
  --surface: #fff;
  --line: #e6e1d8;
  --teal: #117f7a;
  --teal-dark: #0a5655;
  --coral: #ef6f51;
  --mustard: #d9a018;
  --shadow: 0 18px 55px rgba(24, 33, 47, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px; background: var(--paper); color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: calc(100% - 48px); max-width: 1440px; margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(230,225,216,.78);
  background: rgba(251,250,247,.88); backdrop-filter: blur(18px);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 950; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(24,33,47,.08); box-shadow: 0 10px 24px rgba(24,33,47,.14);
}
.brand-mark img { width: 36px; height: 36px; object-fit: contain; }
.nav-links { display: flex; gap: 20px; color: var(--muted); font-weight: 850; }
main { padding: 24px 0 58px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.eyebrow {
  display: inline-flex; align-items: center; width: fit-content; border: 1px solid rgba(17,127,122,.2);
  border-radius: 999px; padding: 6px 11px; background: rgba(17,127,122,.07); color: var(--teal-dark);
  font-size: .82rem; font-weight: 900;
}
p { margin: 0; color: #4e5b6d; line-height: 1.65; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px;
  border: 1px solid transparent; border-radius: 8px; padding: 0 16px; font-weight: 900; cursor: pointer;
}
.button.primary { background: var(--ink); color: #fff; }
.button.secondary { border-color: var(--line); background: rgba(255,255,255,.82); color: var(--ink); }
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.scene-wrap {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px;
  background: #1b2230; box-shadow: var(--shadow); aspect-ratio: 16 / 9;
}
.scene-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 48% 72%, rgba(255,255,255,.18), transparent 16rem);
}
.lab-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speech {
  position: absolute; left: 12.4%; top: 11.2%; z-index: 3; width: 34.8%; min-height: 18%;
  padding: 0; background: transparent; border: 0; box-shadow: none; color: #4b321f;
  text-shadow: 0 1px 0 rgba(255,255,255,.48);
}
.speech strong { display: block; min-height: 1.18em; font-size: clamp(1.02rem, 2vw, 1.72rem); line-height: 1.18; }
.speech span { display: block; min-height: 2.9em; margin-top: 7px; color: #705235; font-size: clamp(.72rem, 1.08vw, 1rem); font-weight: 850; line-height: 1.38; }
.type-line.typing::after {
  content: ""; display: inline-block; width: .12em; height: .9em; margin-left: .08em;
  background: currentColor; transform: translateY(.12em); animation: caret-blink 820ms steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.capsule-choice {
  position: absolute; z-index: 4; width: 15.5%; aspect-ratio: 1; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; transform: translate(-50%, -50%);
}
.capsule-choice::before {
  content: ""; position: absolute; inset: 8%; border-radius: inherit; border: 3px solid rgba(255,255,255,.68);
  opacity: 0; transform: scale(.86); transition: opacity 180ms ease, transform 180ms ease;
}
.capsule-choice:hover::before,
.capsule-choice:focus-visible::before { opacity: 1; transform: scale(1.03); }
.capsule-choice.selected::before { opacity: 1; animation: capsule-pulse 460ms ease infinite alternate; }
.capsule-left { left: 26.9%; top: 68%; }
.capsule-mid { left: 43.5%; top: 68%; }
.capsule-right { left: 60.3%; top: 68%; }
@keyframes capsule-pulse {
  from { box-shadow: 0 0 0 0 rgba(255,255,255,.2), 0 0 18px rgba(217,160,24,.35); }
  to { box-shadow: 0 0 0 12px rgba(255,255,255,.09), 0 0 44px rgba(217,160,24,.85); }
}
.result-layer {
  position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 24px;
  background: rgba(10,15,24,.72); backdrop-filter: blur(12px);
}
.result-layer.visible { display: grid; }
.result-card {
  position: relative; width: min(560px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px; background: #fbfaf7; box-shadow: 0 30px 100px rgba(0,0,0,.42);
}
.result-stage {
  position: relative; display: grid; place-items: center; min-height: 330px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.95), rgba(217,160,24,.28) 20%, transparent 42%),
    linear-gradient(135deg, rgba(17,127,122,.12), rgba(239,111,81,.12)), #f2ece1;
}
.capsule-open {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.cap-half {
  position: absolute; width: 180px; height: 90px; border: 6px solid #422d25; background: linear-gradient(#ff6149, #cb2f24);
  box-shadow: 0 16px 28px rgba(24,33,47,.18);
}
.cap-top { border-radius: 90px 90px 12px 12px; transform: translateY(-36px); animation: cap-top 950ms cubic-bezier(.2,.8,.2,1) forwards; }
.cap-bottom { border-radius: 12px 12px 90px 90px; background: linear-gradient(#fff5de, #e7cda3); transform: translateY(54px); animation: cap-bottom 950ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cap-top { 60%,100% { transform: translate(-34px, -112px) rotate(-14deg); opacity: .38; } }
@keyframes cap-bottom { 60%,100% { transform: translate(30px, 128px) rotate(12deg); opacity: .38; } }
.sparkle {
  position: absolute; width: 12px; height: 12px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 18px #fff, 0 0 38px var(--mustard); animation: sparkle 920ms ease-out infinite;
}
.sparkle:nth-child(1) { left: 26%; top: 35%; animation-delay: 80ms; }
.sparkle:nth-child(2) { left: 68%; top: 42%; animation-delay: 220ms; }
.sparkle:nth-child(3) { left: 48%; top: 20%; animation-delay: 360ms; }
@keyframes sparkle { from { transform: scale(.4); opacity: .1; } 50% { opacity: 1; } to { transform: scale(1.7) translateY(-18px); opacity: 0; } }
.result-pet { position: relative; z-index: 2; display: grid; place-items: center; opacity: 0; transform: translateY(18px) scale(.82); }
.result-layer.revealed .result-pet { animation: pet-reveal 520ms ease forwards; }
@keyframes pet-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
.result-sprite-viewport { display: grid; place-items: center; width: min(44vw, 210px); aspect-ratio: 12 / 13; }
.result-sprite-frame {
  width: 100%; height: 100%; background-repeat: no-repeat; background-size: 800% var(--sprite-sheet-height, 900%);
  background-position: 0% var(--sprite-row-y, 62.5%); filter: drop-shadow(0 22px 18px rgba(24,33,47,.18));
  animation: sprite-row-six 1200ms steps(1) infinite;
}
.result-pet img { width: min(44vw, 220px); max-height: 240px; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(24,33,47,.18)); }
@keyframes sprite-row-six {
  0% { background-position: 0% var(--sprite-row-y, 62.5%); }
  12.5% { background-position: 14.2857% var(--sprite-row-y, 62.5%); }
  25% { background-position: 28.5714% var(--sprite-row-y, 62.5%); }
  37.5% { background-position: 42.8571% var(--sprite-row-y, 62.5%); }
  50% { background-position: 57.1429% var(--sprite-row-y, 62.5%); }
  62.5% { background-position: 71.4286% var(--sprite-row-y, 62.5%); }
  75% { background-position: 85.7143% var(--sprite-row-y, 62.5%); }
  87.5%, 100% { background-position: 100% var(--sprite-row-y, 62.5%); }
}
.result-body { padding: 22px; }
.result-body h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1; }
.result-body p { margin-top: 10px; }
.command-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center;
  margin-top: 16px; border: 1px solid #dfe5e2; border-radius: 8px; padding: 9px 9px 9px 12px; background: #f8fbfa;
}
code { overflow: hidden; color: #25313f; font-family: "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 8px; background: var(--teal); color: #fff; cursor: pointer; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.share-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-title { margin-bottom: 10px; color: #57647a; font-size: .82rem; font-weight: 900; text-transform: uppercase; }
.share-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.share-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  border: 1px solid #dfe5e2; border-radius: 8px; background: #fff; color: #243041;
  font-size: .84rem; font-weight: 900; cursor: pointer;
}
.share-button svg { width: 16px; height: 16px; fill: currentColor; }
.share-button:hover { border-color: rgba(17,127,122,.36); color: var(--teal-dark); background: #f8fbfa; }
.status { display: none; margin-top: 10px; border-radius: 8px; padding: 10px 12px; background: rgba(17,127,122,.1); color: var(--teal-dark); font-weight: 900; }
.status.visible { display: block; }
.close-result { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(255,255,255,.84); color: var(--ink); }
footer { padding: 0 0 44px; color: var(--muted); }
.footer-row { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; }
@media (max-width: 860px) {
  .speech { left: 8.8%; top: 10%; width: 42%; }
  .speech strong { font-size: clamp(.98rem, 2.7vw, 1.3rem); }
  .speech span { font-size: clamp(.68rem, 2vw, .88rem); line-height: 1.3; }
  .scene-wrap { aspect-ratio: 4 / 3; }
  .lab-art { object-position: 50% center; }
  .capsule-left { left: 26.9%; top: 68%; }
  .capsule-mid { left: 43.5%; top: 68%; }
  .capsule-right { left: 60.3%; top: 68%; }
}
@media (max-width: 620px) {
  .shell { width: calc(100% - 28px); }
  .nav-links { display: none; }
  main { padding-top: 20px; }
  .scene-wrap { aspect-ratio: 16 / 9; }
  .lab-art { width: 100%; max-width: none; left: 0; object-fit: cover; }
  .speech { left: 12.4%; top: 10.8%; width: 35%; }
  .speech strong { font-size: clamp(.58rem, 3vw, .9rem); line-height: 1.12; }
  .speech span { margin-top: 3px; font-size: clamp(.45rem, 2.15vw, .66rem); line-height: 1.18; }
  .capsule-choice { width: 17%; }
  .capsule-left { left: 26.9%; top: 68%; }
  .capsule-mid { left: 43.5%; top: 68%; }
  .capsule-right { left: 60.3%; top: 68%; }
  .share-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-stage { min-height: 280px; }
  .footer-row { flex-direction: column; }
}