:root{--c-room:#0d0908;--c-room-2:#17100c;--c-flame:#ffb347;--c-flame-hot:#ffe6b0;--c-cream:#f7ece1;--c-muted:#f7ece194;--c-line:#f7ece129;--font-display:"Instrument Serif", Georgia, serif;--font-body:"Instrument Sans", system-ui, -apple-system, sans-serif;--fs-eyebrow:clamp(12px, 1.5vw, 15px);--fs-title:clamp(44px, 11vw, 132px);--fs-sub:clamp(14px, 2vw, 20px);--ease-out:cubic-bezier(.22,.86,.3,1);--dur:.6s}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{background:var(--c-room);color:var(--c-cream);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;place-items:center;display:grid;position:fixed;inset:0}.scene{width:100%;height:100%;display:block;position:absolute;inset:0}.eyebrow{top:calc(clamp(28px, 9vh, 92px) + env(safe-area-inset-top));width:fit-content;font-family:var(--font-display);letter-spacing:.01em;color:var(--c-cream);opacity:0;transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);text-shadow:0 2px 30px #0009;pointer-events:none;margin:0 auto;font-size:clamp(20px,3.4vw,34px);font-style:italic;position:absolute;left:0;right:0;transform:translateY(10px)}.eyebrow.is-in{opacity:.92;transform:none}.eyebrow.is-out{opacity:0;transition-duration:.5s;transform:translateY(-8px)}.msg{text-align:center;pointer-events:none;z-index:2;width:fit-content;max-width:min(92vw,900px);margin:0 auto;position:absolute;top:clamp(60px,16vh,190px);left:0;right:0}.msg__eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--c-flame);opacity:0;margin:0 0 clamp(6px,1.2vh,14px)}.msg__title{font-family:var(--font-display);font-weight:400;font-size:var(--fs-title);letter-spacing:-.015em;color:#fff8ee;text-shadow:0 0 60px #ffb34747,0 6px 40px #00000080;margin:0;line-height:1.02}.msg__ch{white-space:pre;opacity:0;will-change:transform, opacity;display:inline-block;transform:translateY(.22em)}.msg__sub{font-size:var(--fs-sub);color:var(--c-muted);opacity:0;margin:clamp(10px,2vh,22px) 0 0}.controls{left:0;right:0;bottom:calc(clamp(22px, 5vh, 54px) + env(safe-area-inset-bottom));z-index:3;opacity:0;width:fit-content;max-width:92vw;transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px);margin:0 auto;display:flex;position:absolute;transform:translateY(12px)}.controls.is-in{opacity:1;transform:none}.controls.is-out{opacity:0;pointer-events:none;transform:translateY(10px)}.btn{cursor:pointer;transition:transform .25s var(--ease-out), background-color .25s, border-color .25s, opacity .25s;border-radius:999px;font-family:inherit}.btn:focus-visible{outline:2px solid var(--c-flame);outline-offset:3px}.btn--mic{letter-spacing:.01em;color:#1b1109;background:linear-gradient(180deg, #ffd79a, var(--c-flame));border:0;align-items:center;gap:.6em;padding:.78em 1.5em;font-size:clamp(14px,1.7vw,16px);font-weight:500;display:inline-flex;box-shadow:0 10px 34px #ff962838,inset 0 2px #ffffff59}.btn--mic:hover{transform:translateY(-2px)}.btn--mic:active{transform:translateY(0)}.btn--mic[disabled]{opacity:.55;cursor:default;transform:none}.btn__mic{opacity:.85;background:#1b1109;border-radius:999px;flex:none;width:.62em;height:1em}.btn--hold{color:var(--c-muted);border:1px solid var(--c-line);background:0 0;padding:.5em 1.1em;font-size:clamp(13px,1.5vw,15px)}.btn--hold:hover{color:var(--c-cream);border-color:#f7ece157}.btn--hold.is-holding{color:#1b1109;background:var(--c-flame-hot);border-color:#0000}.note{color:#f7ece15c;text-align:center;margin:0;font-size:clamp(11px,1.3vw,12.5px)}.meter{left:0;right:0;bottom:calc(clamp(22px, 5vh, 54px) + env(safe-area-inset-bottom));z-index:3;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:0 auto;display:flex;position:absolute}.meter__track{background:#f7ece124;border-radius:999px;width:clamp(150px,26vw,240px);height:4px;overflow:hidden}.meter__fill{background:linear-gradient(90deg, var(--c-flame), var(--c-flame-hot));transform-origin:0;will-change:transform;border-radius:999px;width:100%;height:100%;transform:scaleX(0)}.meter__label{letter-spacing:.18em;text-transform:uppercase;color:#f7ece173;margin:0;font-size:clamp(12px,1.4vw,13.5px)}.replay{right:calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-right));bottom:calc(clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom));z-index:4;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);border:1px solid var(--c-line);cursor:pointer;opacity:0;transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .25s, border-color .25s;background:#140d0999;border-radius:999px;align-items:center;gap:.5em;padding:.62em 1.15em;font-family:inherit;font-size:clamp(12px,1.4vw,14px);display:inline-flex;position:absolute;transform:translateY(8px)}.replay.is-shown{opacity:1;transform:none}.replay:hover{color:var(--c-cream);border-color:#f7ece157}.replay:focus-visible{outline:2px solid var(--c-flame);outline-offset:3px}@media (height<=540px){.eyebrow{top:calc(clamp(8px, 2.5vh, 18px) + env(safe-area-inset-top));font-size:clamp(16px,5vh,24px)}.controls{bottom:calc(clamp(8px, 2vh, 16px) + env(safe-area-inset-bottom));gap:6px}.btn--mic{padding:.5em 1.1em;font-size:13px}.btn--hold{padding:.34em .85em;font-size:12px}.note{font-size:10px}.meter{bottom:calc(clamp(8px, 2vh, 16px) + env(safe-area-inset-bottom));gap:6px}.msg{top:calc(clamp(10px, 3vh, 30px) + env(safe-area-inset-top))}.msg__sub{margin-top:6px}}@media (height<=430px){.controls{flex-flow:wrap;justify-content:center;gap:8px}.note{flex-basis:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.msg__ch{opacity:1;transform:none}}
