@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#15352f;background:#a9c9c1}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #f6ad47;outline-offset:3px}main{position:relative;min-height:100dvh;overflow:hidden}#scene{position:absolute;top:0;right:0;bottom:0;left:38%;z-index:0}#scene canvas{display:block}.scorebar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,5vw,80px);border-bottom:1px solid #315f5560}.brand,.stats{display:flex;align-items:center;gap:22px}.brand{font:700 14px Space Grotesk,sans-serif;letter-spacing:.16em}.brandmark{display:grid;place-items:center;width:37px;height:37px;background:#204a41;color:#e9e8cc;border-radius:50%;font-size:20px;letter-spacing:0}.stats{gap:clamp(16px,3vw,48px);font-size:10px;font-weight:700;letter-spacing:.14em}.stats b{display:block;font:600 23px Space Grotesk,sans-serif;letter-spacing:0;margin-top:4px}.play{position:relative;z-index:1;width:min(610px,53vw);padding:clamp(50px,10vh,125px) 0 130px clamp(24px,7vw,110px)}.eyebrow{font-size:12px;letter-spacing:.19em;font-weight:700;color:#416d60}.play h1{font:600 clamp(46px,5.8vw,92px)/1.02 "Space Grotesk",sans-serif;letter-spacing:-.065em;margin:24px 0 38px}.play h1 em{font-style:normal;color:#f8f1ce}.caption{background:#f6f1dd;border:1px solid #204a41;border-radius:18px 18px 18px 3px;box-shadow:7px 8px #204a4126;padding:22px 26px;max-width:440px;min-height:82px;font:500 clamp(17px,1.5vw,21px)/1.35 "Space Grotesk",sans-serif}.meter{display:inline-block;margin-bottom:18px;padding:9px 14px;border:1px solid #204a41;border-radius:100px;background:#f8f1ce;font-size:11px;font-weight:700;letter-spacing:.1em}.transcript{display:flex;flex-direction:column;gap:12px;max-width:460px}.bubble{margin:0;padding:15px 19px;max-width:90%;border-radius:18px;font:500 17px/1.35 Space Grotesk,sans-serif}.bubble.assistant{align-self:flex-start;background:#f6f1dd;border:1px solid #204a41;border-bottom-left-radius:3px}.bubble.user{align-self:flex-end;background:#204a41;color:#fff7dc;border-bottom-right-radius:3px}.partial{min-height:24px;margin-top:10px;font-size:14px;color:#416d60}.controls{display:flex;align-items:end;gap:14px;margin-top:35px}.start,.mic{border:0;background:#204a41;color:#fff7dc;border-radius:100px;padding:18px 27px;font-weight:700;font-size:17px;box-shadow:0 9px #163b33}.start span{padding-left:32px}.mic{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:95px;height:95px;padding:10px;font-size:27px}.mic span{font-size:12px}.mic.listening{background:#e07f59;box-shadow:0 0 0 10px #e07f5955;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 18px #e07f5920}}form{min-width:0;flex:1;max-width:310px}form label{display:block;margin-bottom:8px;font-size:12px;font-weight:700}.answer-row{display:flex;background:#f8f5e9;border:2px solid #204a41;border-radius:13px;overflow:hidden}.answer-row input{width:100%;min-width:0;background:none;border:0;padding:15px;font-size:17px}.answer-row button{border:0;background:#204a41;color:#fff;padding:0 18px;font-size:26px}#hint{font-size:13px;color:#416d60;margin-top:27px}footer{position:absolute;z-index:1;bottom:24px;left:clamp(24px,7vw,110px);font-size:10px;font-weight:700;letter-spacing:.2em}footer span{color:#f5f0ca;padding:0 7px}[hidden]{display:none!important}@media(max-width:760px){main{min-height:100dvh}#scene{top:78px;right:0;bottom:210px;left:0}.scorebar{padding:15px 18px;align-items:start}.brand{font-size:10px;gap:8px}.brandmark{width:29px;height:29px;font-size:16px}.stats{gap:9px;font-size:8px}.stats b{font-size:16px}.play{width:100%;padding:50vh 18px 75px}.play h1{font-size:40px;margin:10px 0 16px}.eyebrow{font-size:10px}.caption{padding:16px 18px;min-height:60px;font-size:16px}.controls{margin-top:18px}.mic{height:72px;min-width:72px;font-size:23px}.start{padding:15px 22px}footer{left:18px;bottom:18px;font-size:8px}}@media(max-width:390px){.stats span:last-child{display:none}.play{padding-top:47vh}}.meter-wave{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px;font-weight:600;color:#6f8c85}.meter-wave canvas{width:120px;height:18px}.meter-wave.live{color:#204a41}.transcript>:nth-last-child(n+4){display:none}html,body{overflow:hidden;overscroll-behavior:none;height:100%}main{display:grid;grid-template-rows:auto 1fr auto;height:100dvh;min-height:0}.play{display:flex;flex-direction:column;min-height:0;padding:clamp(20px,4vh,48px) 0 12px clamp(24px,7vw,110px)}.transcript{flex:1;min-height:0;justify-content:flex-end;overflow:hidden}main.playing .eyebrow,main.playing .play h1{display:none}.controls{margin-top:14px}#hint{margin-top:8px}footer{position:relative;bottom:auto;left:auto;z-index:1;padding:14px clamp(24px,7vw,110px);border-top:1px solid #315f5560}@media(max-width:760px){#scene{top:64px;right:0;bottom:0;left:0}.play{width:100%;padding:38vh 18px 10px}main.playing .play{padding-top:34vh}footer{padding:10px 18px}}.meter-wave{font-size:14px;padding:8px 14px;border-radius:100px;background:#e9e4cf;color:#8a4b3a;width:fit-content}.meter-wave i{width:10px;height:10px;border-radius:50%;background:#c4543a}.meter-wave.live{background:#d9ead0;color:#204a41}.meter-wave.live i{background:#2e9e5b;box-shadow:0 0 0 4px #2e9e5b33}main:not(.playing) .play{justify-content:center;gap:4px}main:not(.playing) .transcript,main:not(.playing) .partial,main:not(.playing) .meter-wave,main:not(.playing) #meter{display:none}main:not(.playing) .controls{margin-top:28px}main:not(.playing) .play h1{font-size:clamp(40px,min(5.8vw,9vh),92px);margin:18px 0 0}#meter{align-self:flex-start}.bubble.thinking{color:#6f8c85;font-style:italic}.bubble.thinking span{animation:blink 1.2s infinite both}.bubble.thinking span:nth-child(2){animation-delay:.2s}.bubble.thinking span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:.2}40%{opacity:1}}.meter-wave:not(.live){cursor:pointer}.credit{margin-left:16px;font-weight:500;letter-spacing:.04em;opacity:.6}@media(max-width:760px){main.playing .play{padding-top:30vh}.bubble{font-size:15px;padding:11px 14px}.transcript{gap:8px}.meter-wave{font-size:12px;padding:6px 12px}.meter-wave canvas{width:70px}main.playing #hint{display:none}.credit{display:block;margin:4px 0 0}.answer-row input{font-size:16px}}@media(max-width:760px){.play,main.playing .play{box-sizing:border-box;width:100%;padding-left:18px;padding-right:18px}.meter-wave{max-width:100%;box-sizing:border-box}}@media(max-width:760px){#scene{inset:64px 0 auto 0;height:38vh}.play,main.playing .play{padding-top:calc(38vh + 4px)}main:not(.playing) .play{justify-content:flex-start}main:not(.playing) .play h1{font-size:clamp(32px,9vw,44px)}}@media(max-width:760px){#scene{inset:auto 0 0 0;height:44vh}.play,main.playing .play{padding-top:20px;padding-bottom:calc(44vh - 40px)}main:not(.playing) .play{justify-content:center}}@media(max-width:760px){main:not(.playing) .play{justify-content:flex-start}}@media(max-width:760px){#scene{height:58vh}main:not(.playing) .play{padding-bottom:28px}main:not(.playing) .controls{margin-top:auto}main.playing .play{padding-bottom:calc(58vh - 230px)}}@media(max-width:760px){main.playing #scene{height:46vh}main.playing .play{padding-bottom:calc(46vh - 30px)}}@media(max-width:760px){#scene{height:64vh}main:not(.playing) #hint{background:#204a41;color:#f8f1ce;padding:8px 14px;border-radius:100px;width:fit-content;font-weight:600}}@media(max-width:760px){#scene{height:62vh}}@media(max-width:760px){#scene canvas{transform:scale(1.2);transform-origin:50% 100%}}
.transcript{justify-content:flex-start;overflow-y:auto;scrollbar-width:none;padding-top:14px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}
.transcript::-webkit-scrollbar{display:none}
.transcript>:first-child{margin-top:auto}
.bubble{flex-shrink:0}