*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#100d0c;color:#eadfd2;font-family:Arial,sans-serif}body{background:radial-gradient(ellipse at 50% 62%,#443329 0,#211b18 40%,#100d0c 75%)}header{position:fixed;z-index:2;top:0;left:0;width:100%;padding:28px 5%;display:flex;align-items:center;gap:24px}header a{font-size:24px;letter-spacing:.13em;color:#f47738;text-decoration:none;font-weight:300}header span{font-size:10px;letter-spacing:.22em;opacity:.35}button{font:inherit;color:#d8a88a;background:transparent;border:1px solid #79513b;cursor:pointer}#sound{margin-left:auto;font-size:10px;letter-spacing:.1em;padding:10px 12px;border-radius:30px}main,canvas{position:absolute;inset:0;width:100%;height:100%}canvas{touch-action:none;outline:none}.intro{position:absolute;top:15%;width:100%;text-align:center;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.24em;color:#b68c71}h1{font-size:clamp(26px,5vw,55px);letter-spacing:-.045em;margin:12px 0;line-height:.95}h1 i{display:block;font-size:.45em;font-weight:400;color:#ff813f;letter-spacing:.01em;margin-top:10px}footer{position:fixed;bottom:25px;width:100%;padding:0 5%;display:flex;align-items:center;justify-content:center;pointer-events:none}footer p{font-size:11px;color:#b59a87;letter-spacing:.04em}footer button{position:absolute;right:5%;border-radius:50%;width:36px;height:36px;font-size:23px;pointer-events:auto}#reaction{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);font-size:clamp(24px,5vw,48px);font-weight:900;color:#ff995a;pointer-events:none;text-shadow:0 2px 15px #000;opacity:0;transition:opacity .15s}#error{position:absolute;top:50%;width:100%;text-align:center}@media(max-width:600px){header{padding-top:max(24px,env(safe-area-inset-top))}header span{display:none}.intro{top:14%}footer{bottom:max(22px,env(safe-area-inset-bottom))}footer p{max-width:260px;text-align:center;line-height:1.8;padding-right:16px}}@media(prefers-reduced-motion:reduce){#reaction{transition:none}}

/* V2: give the character more of the mobile stage. */
.intro{top:11%}h1{font-size:clamp(24px,4vw,40px)}.eyebrow{font-size:9px}.intro h1 i{font-size:.48em}#reaction{top:32%}

.intro,header>span,#reaction{display:none}footer p{opacity:.55;font-size:10px}body{background:radial-gradient(ellipse at 50% 55%,#51443c 0,#27211e 43%,#100d0c 82%)}

.credits{position:absolute;left:5%;bottom:-13px;font-size:9px;color:#9a8272;opacity:.6;pointer-events:auto;text-decoration:none}

/* Soft studio backdrop reveals the sculpted surfaces. */
body{background:radial-gradient(ellipse at 50% 50%,#827a72 0,#514b48 48%,#252223 100%)}header a{color:#f19b66}footer p{color:#e2d5c9;opacity:.7}

/* Main experience, version 18. */
#sound{width:40px;height:40px;border:0;padding:8px;border-radius:50%;display:grid;place-items:center;color:#e9b18c;background:transparent}#sound svg{width:23px;height:23px}.sound-off{display:none}.is-muted .sound-off{display:block}.is-muted .sound-waves{display:none}#sound:focus-visible{outline:1px solid #e9b18c;outline-offset:3px}footer{bottom:calc(36px + env(safe-area-inset-bottom));padding:0 24px;display:block;text-align:center}footer #instructions{margin:0 auto;max-width:none;padding:0;color:#e2d5c9;opacity:.8;font-size:12px;line-height:1.6;letter-spacing:.03em}#instructions span,#instructions small{display:block}#instructions small{font-size:11px;opacity:.65;margin-top:5px}@media(max-width:600px){footer{bottom:calc(28px + env(safe-area-inset-bottom))}header{padding-left:6%;padding-right:6%}}

header a,#sound{color:#ed625b}header a{display:flex;align-items:center}header .wordmark{display:block;width:150px;height:auto}#sound:focus-visible{outline-color:#ed625b}@media(max-width:600px){header .wordmark{width:142px}}

header .wordmark g{stroke-width:8}#sound svg{stroke-width:1.9}

.speech-bubble{position:absolute;z-index:1;transform:translate(-50%,-100%) rotate(-5deg);max-width:min(180px,42vw);padding:9px 15px;border:2px solid #ed625b;border-radius:18px 18px 17px 5px;background:#f7e7d6;color:#392a25;font-size:clamp(13px,1.4vw,17px);font-weight:800;letter-spacing:.03em;line-height:1.1;text-align:center;white-space:nowrap;box-shadow:0 6px 20px #1a100e38;pointer-events:none;will-change:opacity,transform}.speech-bubble[hidden]{display:none}.speech-bubble::after{content:'';position:absolute;top:calc(100% - 1px);left:var(--tail,25%);border:10px solid transparent;border-top-color:#ed625b;transform:translateX(-50%)}

/* Red-lit studio supplied for the character stage. */
body{background:#100d0c url("/v2/stage-desktop.jpg?v=4") center center/cover no-repeat}
@media(max-width:700px),(orientation:portrait){body{background-image:url("/v2/stage-mobile.jpg?v=4");background-position:center center}}

.ko-overlay{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%) scale(.72) rotate(-8deg);transform-origin:center bottom;color:#f24e48;font:1000 clamp(5rem,14vw,11rem)/.8 system-ui,sans-serif;letter-spacing:.035em;-webkit-text-stroke:2px rgba(255,183,145,.8);text-shadow:0 3px 0 #631714,0 0 18px rgba(255,69,48,.9),0 0 48px rgba(255,56,38,.55);opacity:0}.ko-overlay[hidden]{display:none}.ko-overlay.is-visible{animation:ko-impact .38s cubic-bezier(.16,1,.3,1) both}@keyframes ko-impact{0%{opacity:0;transform:translate(-50%,-100%) scale(.25) rotate(-16deg)}68%{opacity:1;transform:translate(-50%,-100%) scale(1.12) rotate(4deg)}100%{opacity:1;transform:translate(-50%,-100%) scale(1) rotate(-5deg)}}
.ko-overlay{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:.015em;-webkit-text-stroke:0 transparent;text-shadow:0 0 18px rgba(255,69,48,.8),0 0 42px rgba(255,56,38,.45)}
.ko-overlay{color:#ff6857;background-image:linear-gradient(180deg,#ffb18b 0%,#ff6958 36%,#ef3b3d 72%,#c52c37 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 rgba(101,24,21,.9)) drop-shadow(0 0 16px rgba(255,66,48,.78)) drop-shadow(0 0 38px rgba(255,50,38,.42))}
/* Information dialog and paired header actions */
header .header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}header .header-actions #sound{margin-left:0}#info{width:36px;height:36px;padding:0;border:1px solid rgba(237,98,91,.72);border-radius:50%;display:grid;place-items:center;color:#ed625b;background:rgba(16,13,12,.2)}#info svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}#info:focus-visible,.info-close:focus-visible{outline:1px solid #ff9b82;outline-offset:3px}#info-modal{width:min(580px,calc(100vw - 32px));max-height:min(78dvh,760px);margin:auto;border:1px solid rgba(237,98,91,.68);border-radius:18px;background:linear-gradient(155deg,rgba(39,24,21,.98),rgba(15,12,12,.99));color:#eadfd2;padding:clamp(22px,5vw,38px);box-shadow:0 20px 80px rgba(0,0,0,.72);overflow:auto}#info-modal::backdrop{background:rgba(7,5,5,.78);backdrop-filter:blur(5px)}#info-modal .info-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}#info-modal h2{color:#ed625b;font-size:clamp(21px,4vw,29px);line-height:1.2;margin:0}#info-modal .info-close{width:36px;height:36px;flex:0 0 36px;border:1px solid rgba(237,98,91,.6);border-radius:50%;display:grid;place-items:center;color:#ed625b;font-size:23px;line-height:1;background:transparent;padding:0}#info-modal p{font-size:clamp(15px,2.2vw,17px);line-height:1.62;color:#eadfd2;margin:0 0 13px}#info-modal p:last-child{margin-bottom:0}
/* Info icon without an enclosing circle */
#info{border-color:transparent;background:transparent}#info svg circle{display:block}

/* Restore the small ring inside the info glyph while keeping the outer button unframed */
#info svg circle{display:initial}