@font-face{font-family:"Crunch Cast Wide";src:url('./fonts/crunch-cast-wide.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap;unicode-range:U+0020,U+0041,U+0043-0046,U+0048-0049,U+004D-0050,U+0052,U+0054-0055}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#101113;color:#d6d4cf;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%;overflow-x:hidden}
body{background:radial-gradient(ellipse at 50% 40%,#222328 0%,#151619 42%,#101113 75%)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.stage:focus-visible{outline:2px solid #d67b83;outline-offset:6px}
.experience{height:100vh;height:100dvh;min-height:540px;display:grid;grid-template-rows:74px minmax(240px,1fr) auto;position:relative;isolation:isolate}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:0 38px;z-index:2}
h1{font-family:"Crunch Cast Wide",Arial,Helvetica,sans-serif;font-size:30px;line-height:1;letter-spacing:.015em;font-weight:900;margin:0;color:#c4c3c0;white-space:nowrap}
.audio-controls{display:flex;align-items:center;gap:15px}
.sound{display:flex;align-items:center;justify-content:center;background:none;border:0;width:44px;height:44px;padding:12px;color:#969696;transition:color .15s}
.sound:hover{color:#e1dfd9}
.sound svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.sound .muted{display:none}.sound[aria-pressed="false"] .muted{display:block}.sound[aria-pressed="false"] .waves{display:none}
.stage{position:relative;min-height:0;outline:none;touch-action:none;cursor:default;z-index:1;border-radius:4px}
.stage.over-head{cursor:grab}.stage.dragging{cursor:grabbing}
.stage:focus-visible{outline-offset:-14px;outline-color:#555054}
.stage.drop-ready{box-shadow:inset 0 0 0 1px #a62c37}
#scene{display:block;width:100%;height:100%;opacity:0;transition:opacity .45s}
.experience[data-state="idle"] #scene,.experience[data-state="loading-photo"] #scene,.experience[data-state="before"] #scene,.experience[data-state="feeding"] #scene,.experience[data-state="after"] #scene{opacity:1}
.controls{display:flex;align-items:center;flex-direction:column;position:relative;z-index:2;padding:4px 24px max(27px,env(safe-area-inset-bottom));text-align:center;min-height:104px}
.feeding-actions{position:relative;width:100%;height:52px;flex:none}
.feed-dock{position:absolute;left:50%;top:0;width:max-content;max-width:100%;transform:translateX(-50%)}
.triumph{position:absolute;left:0;bottom:0;display:flex;align-items:center;justify-content:center;min-height:52px;padding:13px 18px;border:1px solid #666568;color:#d6d4cf;text-decoration:none;font-size:14px;line-height:1.4;background:#151619}
.triumph:hover{border-color:#d6d4cf;color:#fff}
.triumph:focus-visible{outline:2px solid #d67b83;outline-offset:5px}
.experience[data-fed="true"] .feed-dock{animation:lazy-mosey 6.8s linear forwards}
.experience[data-fed="true"] .feed-dock:has(:focus-visible){animation-play-state:paused}
@media(hover:hover) and (pointer:fine) and (min-width:701px){.experience[data-fed="true"] .feed-dock:hover{animation-play-state:paused}}
@keyframes lazy-mosey{
  0%{left:50%;transform:translate(-50%,0) rotate(0)}
  12%{left:50.5%;transform:translate(-50.5%,3px) rotate(1deg)}
  27%{left:58%;transform:translate(-58%,2px) rotate(-1.8deg)}
  38%{left:58.5%;transform:translate(-58.5%,4px) rotate(-1.8deg)}
  58%{left:77%;transform:translate(-77%,-2px) rotate(1.1deg)}
  72%{left:77.2%;transform:translate(-77.2%,1px) rotate(1.1deg)}
  100%{left:100%;transform:translate(-100%,0) rotate(0)}
}
.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}
.feed{display:flex;align-items:center;justify-content:center;min-width:250px;min-height:52px;padding:15px 23px;background:linear-gradient(#a33140,#86212f);border:1px solid #c05964;border-bottom-color:#65212c;border-radius:3px;box-shadow:inset 0 1px 0 #ffffff14,0 5px 18px #0005;font-family:"Crunch Cast Wide",Arial,Helvetica,sans-serif;font-size:17px;line-height:1;font-weight:900;letter-spacing:.015em;color:#f0e2e0;transition:background .15s,transform .15s,opacity .15s}
.feed:hover:enabled{background:linear-gradient(#b23c4b,#962b39);transform:translateY(-1px)}
.feed:active:enabled{transform:translateY(1px);background:#822331;box-shadow:inset 0 2px 4px #0003}
.feed:disabled{cursor:default;opacity:.5;transform:none}
.error{font-size:12px;line-height:1.5;color:#ec9a9f;margin:12px 0 0;max-width:420px}
.renderer-error{max-width:400px;padding:30px;position:absolute;inset:30% 20px auto;margin:auto;line-height:1.6;text-align:center;font-size:15px;color:#bdb8b2}
[hidden]{display:none!important}
@media(min-width:1500px){.experience{grid-template-rows:86px minmax(240px,1fr) auto}.controls{min-height:123px;padding-bottom:40px}}
@media(max-width:600px){.experience{grid-template-rows:60px minmax(220px,1fr) auto;min-height:510px}.masthead{padding:0 16px 0 22px}h1{font-size:clamp(14px,5.13vw,20px);letter-spacing:.015em}.audio-controls{gap:6px}.sound svg{width:17px;height:17px}.controls{min-height:103px;padding-inline:20px;padding-top:6px}.feed{min-height:50px;min-width:244px}}
@media(max-height:650px) and (min-width:601px){.experience{grid-template-rows:52px minmax(190px,1fr) auto;min-height:430px}.controls{min-height:90px;padding-bottom:18px}.feed{min-height:43px;padding-block:14px}.masthead{padding-inline:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.feed,#scene{transition:none}}
@media(max-width:900px){
  .experience[data-fed="true"] .feeding-actions{height:116px}
  .triumph{font-size:13px;min-height:48px;padding:12px 15px}
  .experience[data-fed="true"] .feed{min-width:220px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.experience[data-fed="true"] .feed-dock{animation:none;left:100%;transform:translateX(-100%)}}

.experience[data-state="spitting"] #scene{opacity:1}
.returned-picture{position:absolute;display:block;z-index:2;touch-action:auto;-webkit-touch-callout:default;cursor:pointer}
.returned-picture img{display:block;width:100%;height:100%;object-fit:fill;user-select:auto;-webkit-user-select:auto}
.returned-picture:focus-visible{outline:1px solid #c4c3c0;outline-offset:8px}

/* Entrance starts hidden in HTML/CSS, before the module or fonts load. */
.experience:not([data-entrance="complete"]) h1{opacity:0;transform:translate3d(-120vw,0,0) rotate(-5deg)}
.experience.entry-title-in h1{animation:entry-title .64s cubic-bezier(.16,.8,.2,1) forwards}
.experience[data-entrance="complete"] h1{opacity:1;transform:none}
.experience[data-state="opening"] #scene{opacity:1;transition:none}
.experience[data-entrance="pending"] .audio-controls,.experience[data-entrance="pending"] .controls{visibility:hidden;opacity:0;pointer-events:none}
.experience[data-entrance="sound"] .controls{visibility:hidden;opacity:0;pointer-events:none}
.experience[data-entrance="sound"] .audio-controls{animation:entry-controls .5s ease-out both}
.experience[data-entrance="controls"] .audio-controls{opacity:1}
.experience[data-entrance="controls"] .controls{animation:entry-controls .5s ease-out both}
@keyframes entry-title{0%{opacity:0;transform:translate3d(-120vw,0,0) rotate(-5deg)}70%{opacity:1;transform:translate3d(9px,0,0) rotate(.8deg)}100%{opacity:1;transform:none}}
@keyframes entry-controls{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.stage::after{content:"";position:absolute;pointer-events:none;left:50%;top:50%;width:min(42vw,350px);aspect-ratio:1;border:3px solid #b6bfc1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.8)}
.entry-impact .stage::after{animation:entry-pressure .7s ease-out both}
@keyframes entry-pressure{0%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.8)}}
@media(prefers-reduced-motion:reduce){.experience.entry-title-in h1{animation:none;opacity:1;transform:none}.entry-impact .stage::after{animation:none}.experience[data-entrance="sound"] .audio-controls,.experience[data-entrance="controls"] .controls{animation:none}}

.experience[data-state="laughing"] #scene{opacity:1}

/* Explanatory copy belongs to the returned result, never to spoken dialogue. */
.result-note{max-width:34rem;margin:0 auto 12px;padding:0 8px;font-size:12.5px;line-height:1.45;color:#bdb8b2;text-align:center;animation:result-note-in .24s ease-out both}
@keyframes result-note-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.result-note{animation:none}}