/* "Nothing in Common": a tap-through campus sitcom in a flat 90s cartoon style. Nate (Stern) and Margo (Tisch) are the leads; Theo (Gallatin) and Dev (Tandon) cameo. */
.cast-section{padding:76px 24px 62px;text-align:center;background:radial-gradient(ellipse at 50% 70%,#bea8b240,transparent 65%),linear-gradient(140deg,#48445e,#383d51 60%,#525645);overflow:hidden}
.cast-section .tape-title{font-size:47px;line-height:1.14}
.cast-episode{font-size:10px;letter-spacing:2.2px;color:#e2d5e8b3;margin-top:26px}
.cast-episode b{font-weight:400;color:#ffd6ea}
.cast-stage{position:relative;max-width:740px;height:572px;margin:22px auto 0;isolation:isolate;border-radius:30px}
.cast-stage:focus-visible{outline:3px solid var(--pink);outline-offset:10px}

/* Dialogue */
.cast-dialogue{position:absolute;inset:0;z-index:5;pointer-events:none;--stern-x:28%;--tisch-x:74%;--bubble-y:150px}
.cast-speech{position:absolute;top:auto;bottom:calc(100% - var(--bubble-y));left:var(--stern-x);width:min(240px,46%);margin-left:max(-120px,-23%);padding:15px 18px;background:#eee8d9;color:#38303e;border-radius:19px 19px 4px 19px;box-shadow:4px 6px 0 #16122220;font-size:16px;line-height:1.4;min-height:80px;display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);transition:opacity .25s,visibility .25s}
.cast-speech:after{content:'';position:absolute;bottom:-14px;left:50%;margin-left:-4px;border-top:16px solid #eee8d9;border-left:14px solid transparent}
.tisch-speech{left:var(--tisch-x);bottom:calc(100% - var(--bubble-y) - 8px);background:#e5bed0;transform:rotate(4deg);border-radius:19px 19px 19px 4px}
.tisch-speech:after{left:50%;margin-left:-10px;border-top-color:#e5bed0;border-right:14px solid transparent;border-left:0}
.cameo-speech{position:absolute;left:50%;top:189px;bottom:auto;width:250px;margin-left:-125px;background:#d9e4b6;transform:rotate(-2deg);border-radius:19px 19px 19px 4px;min-height:60px;font-size:14px;padding:13px 16px;z-index:6}
.cameo-speech:after{right:auto;left:38px;border-top-color:#d9e4b6;border-right:18px solid transparent;border-left:0}
.cast-speech.is-empty{opacity:0;visibility:hidden}
.cast-speech.is-action{font-style:italic;font-size:13px;color:#6b5f74;background:#f6f2e8}
.cast-speech.is-action:after{border-top-color:#f6f2e8}
.cast-stage.is-live .cast-speech:not(.is-empty){animation:speech-pop .38s ease-out both}
.cast-stage.is-live .tisch-speech{animation-delay:.14s}
.cast-stage.is-live .cameo-speech{animation-delay:.26s}

/* Lower-third caption, like a sitcom title card */
.cast-caption{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:-34px;transform:rotate(-1deg);z-index:7;background:#101010;color:#fff2d6;font-size:10px;letter-spacing:1.8px;padding:7px 14px 8px;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 3px 2px #15121980;transition:opacity .2s}
.cast-caption:empty{opacity:0}
.cast-stage.is-live .cast-caption:not(:empty){animation:caption-in .5s cubic-bezier(.2,.8,.3,1.15) both}

/* Characters */
.cast-character{position:absolute;top:150px;width:250px;padding:0;border:0;background:none;color:var(--cream);z-index:2;transition:filter .2s,translate .45s cubic-bezier(.3,.9,.3,1.2),scale .45s cubic-bezier(.3,.9,.3,1.2),rotate .4s ease}
.cast-character:hover{filter:drop-shadow(0 0 15px #ffe8dd25)}
.cast-character:focus-visible{outline-offset:7px;border-radius:30px}
.stern-character{left:80px}.tisch-character{right:65px}
.cast-character svg{display:block;width:100%;height:auto;overflow:visible}
.cast-name{display:block;font-family:var(--display);font-size:29px;line-height:1.15;margin-top:-5px}
.cast-name>span{font-family:var(--display);font-size:13px;letter-spacing:.2px;display:block;color:#e2d5e8b3;margin-top:7px}
.cast-floor{position:absolute;bottom:52px;left:10%;width:80%;height:50px;border:1px solid #e9d5b314;background:#e9d5b30a;border-radius:50%;z-index:0}
.cast-doodle{position:absolute;font-family:var(--display);color:#dfc9a3;z-index:1}
.doodle-one{font-size:52px;left:33px;top:250px;transform:rotate(-13deg)}
.doodle-two{font-size:35px;right:30px;top:206px;transform:rotate(10deg)}

/* Mouths and faces are swapped by data-mood on the character button. */
.mouth-o,.mouth-flat,.mouth-grin,.blush,.sweat{display:none}
[data-mood="o"] .mouth-smile,[data-mood="flat"] .mouth-smile,[data-mood="grin"] .mouth-smile{display:none}
[data-mood="o"] .mouth-o,[data-mood="flat"] .mouth-flat,[data-mood="grin"] .mouth-grin{display:block}
.cast-stage.fx-tisch-blush .tisch-character .blush,.cast-stage.fx-stern-blush .stern-character .blush{display:block;animation:blush-in .6s ease-out both}
.cast-stage.fx-stern-sweat .stern-character .sweat,.cast-stage.fx-tisch-sweat .tisch-character .sweat{display:block;animation:sweat-drop 1.3s ease-in both}

/* Eyebrows and shock lines follow the mood too. */
.brows{transform-box:fill-box;transform-origin:center;transition:transform .25s}
[data-mood="o"] .brows{transform:translateY(-6px) scaleX(1.08)}
[data-mood="flat"] .brows{transform:translateY(3px) rotate(-4deg)}
[data-mood="grin"] .brows{transform:translateY(-2px)}
.shock{display:none}
[data-mood="o"] .shock{display:block;animation:shock-pop .5s cubic-bezier(.3,.9,.3,1.4) both}
.lashes{transform-box:fill-box;transform-origin:center}

/* 90s cel look: outlines "boil" between three hand-drawn-ish distortions, like re-traced frames. */
.boil-filters{position:absolute;width:0;height:0;overflow:hidden}
.cast-character svg,.cast-cameo svg{animation:boil .42s steps(1) infinite}
.rec{animation:rec-blink 1s steps(1) infinite}

/* Idle motion */
.stern-body{transform-origin:130px 330px;animation:stern-sway 4.5s ease-in-out infinite}
.tisch-body{transform-origin:120px 331px;animation:tisch-sway 4.7s ease-in-out infinite}
.stern-head{transform-origin:126px 111px;animation:stern-nod 5s ease-in-out infinite}
.tisch-head{transform-origin:124px 110px;animation:tisch-tilt 5s ease-in-out infinite}
.coffee-arm{transform-origin:160px 126px;animation:coffee-gesture 5s ease-in-out infinite}
.briefcase-arm{transform-origin:90px 124px;animation:case-swing 4.5s ease-in-out infinite}
.camera-arm{transform-origin:116px 160px}
.cast-eyes{transform-box:fill-box;transform-origin:center;animation:cast-blink 5.6s linear infinite}
.tisch-head .cast-eyes{animation-delay:1.7s}
.eye-shift{transition:transform .3s}
.camera-flash{opacity:0}
.pills{opacity:0}
.fx-stern-sip .pills{animation:pills-pop 1.6s ease-out both}

/* One-shot character bits. Each beat clears the fx-* classes, so animations retrigger. */
.fx-stern-sip .coffee-arm{animation:stern-sip 1.6s ease-in-out both}
.fx-stern-sip .stern-head{animation:stern-sip-head 1.6s ease-in-out both}
.fx-stern-watch .briefcase-arm{animation:stern-watch 1.8s ease-in-out both}
.fx-stern-watch .stern-head{animation:stern-watch-head 1.8s ease-in-out both}
.fx-stern-nod .stern-head{animation:stern-big-nod .9s ease-in-out 2 both}
.fx-stern-phone .coffee-arm{animation:stern-phone 1.4s ease-in-out both}
.fx-stern-phone .stern-head{animation:stern-watch-head 1.4s ease-in-out both}
.fx-stern-step .stern-character{translate:26px -6px;scale:1.05}
.fx-stern-shrug .stern-body{animation:shrug .8s ease-in-out both}
.fx-tisch-tilt .tisch-head{animation:tisch-big-tilt 1.2s ease-in-out both}
.fx-tisch-gasp .tisch-head{animation:tisch-gasp 1.1s cubic-bezier(.3,.9,.3,1.2) both}
.fx-tisch-gasp .camera-arm{animation:tisch-hands-up 1.1s cubic-bezier(.3,.9,.3,1.2) both}
.fx-tisch-side-eye .tisch-head .eye-shift{transform:translateX(-6px)}
.fx-tisch-side-eye .tisch-head{animation:tisch-side-eye 1.4s ease-in-out both}
.fx-tisch-wave .camera-arm{animation:tisch-wave 1.2s ease-in-out both}
.fx-tisch-flash .camera-flash{animation:camera-flash .65s ease-out 2}
.fx-tisch-flash .prop-flash{animation:stage-flash .5s ease-out 2}
.fx-tisch-step .tisch-character{translate:-26px -6px;scale:1.05}
.fx-tisch-bow .tisch-body{animation:tisch-bow 1.6s ease-in-out both}
.fx-tisch-bow .tisch-head{animation:tisch-bow-head 1.6s ease-in-out both}
.fx-tisch-faint .tisch-character{rotate:-9deg;translate:-10px 14px}
.fx-both-main .stern-character{translate:30px -8px;scale:1.07}
.fx-both-main .tisch-character{translate:-30px -8px;scale:1.07}

/* Stage effects */
.prop-spotlight{position:absolute;inset:-30px -40px 0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;-webkit-mask-image:radial-gradient(ellipse 46% 48% at 50% 46%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 46% 48% at 50% 46%,#000 35%,transparent 100%);background:radial-gradient(circle at var(--sx,50%) 55%,transparent 120px,#12101a99 260px),radial-gradient(circle at var(--sx2,-100%) 55%,transparent 120px,#12101a99 260px)}
.fx-tisch-stage .prop-spotlight{--sx:74%;opacity:1}
.fx-stern-stage .prop-spotlight{--sx:26%;opacity:1}
.fx-both-main .prop-spotlight{--sx:28%;--sx2:72%;opacity:1}
.fx-tisch-stage .stern-character,.fx-stern-stage .tisch-character{filter:brightness(.55)}
.fx-tisch-stage .tisch-character{z-index:3}
.prop-flash{position:absolute;inset:0;z-index:8;background:#fff8e6;opacity:0;pointer-events:none;border-radius:30px}

.cast-heart{position:absolute;left:48%;top:200px;font-size:44px;color:#efa3c5;z-index:2;animation:cast-heart 3.5s ease-in-out infinite}
.fx-heart .cast-heart{animation:heart-pop 1s cubic-bezier(.3,.9,.3,1.4) both}
.fx-heart-big .cast-heart{animation:heart-pop-big 1.4s cubic-bezier(.3,.9,.3,1.4) both}
.heart-burst{position:absolute;left:50%;top:225px;z-index:4;pointer-events:none}
.heart-burst i{position:absolute;font-style:normal;color:#ff9ccd;font-size:20px;opacity:0;left:-10px;top:-10px}
.fx-heart .heart-burst i,.fx-heart-big .heart-burst i{animation:heart-fly 1.2s ease-out both}
.fx-heart-big .heart-burst i{font-size:28px;animation-duration:1.6s}
.heart-burst i:nth-child(1){--dx:-90px;--dy:-80px}.heart-burst i:nth-child(2){--dx:70px;--dy:-100px;animation-delay:.08s}.heart-burst i:nth-child(3){--dx:-120px;--dy:10px;animation-delay:.14s}.heart-burst i:nth-child(4){--dx:110px;--dy:-20px;animation-delay:.05s}.heart-burst i:nth-child(5){--dx:-40px;--dy:-130px;animation-delay:.2s}.heart-burst i:nth-child(6){--dx:30px;--dy:-60px;animation-delay:.26s}

.cast-lights{position:absolute;top:-14px;left:-10px;right:-10px;height:40px;z-index:0;pointer-events:none}
.cast-lights svg{width:100%;height:100%;overflow:visible}
.cast-lights circle{animation:twinkle 2.6s ease-in-out infinite}
.cast-lights circle:nth-child(3n){animation-delay:.9s}.cast-lights circle:nth-child(3n+1){animation-delay:1.7s}
.prop-laugh{right:-6px;top:112px;background:#ffd6ea;color:#4a1f33;font-family:var(--display);font-size:19px;padding:9px 13px;transform:rotate(7deg);box-shadow:3px 4px 0 #16122233;border-radius:4px}
.prop-laugh.is-on{animation:laugh-pop 2.2s cubic-bezier(.3,.9,.3,1.3) both}
.prop{position:absolute;z-index:6;pointer-events:none;opacity:0;visibility:hidden}
.prop.is-on{visibility:visible}
.prop-toast{top:-30px;left:50%;width:260px;margin-left:-130px;display:flex;gap:12px;align-items:center;background:#2b2d33;border:3px solid #1a1720;border-radius:12px;padding:9px;box-shadow:4px 6px 0 #16122244;text-align:left}
.prop-toast.is-on{animation:toast-in 4s cubic-bezier(.2,.9,.3,1.1) both}
.toast-icon{flex:none;width:26px;height:26px;border-radius:50%;background:#e04848;color:transparent;font-size:0;box-shadow:inset -3px -3px 0 #0003}
.toast-text{flex:1;background:#a9bb8c;color:#1f2a18;font-family:"Courier New",monospace;font-weight:700;font-size:13px;letter-spacing:1px;padding:7px 9px;border-radius:4px;box-shadow:inset 2px 2px 0 #0002}
.toast-text small{display:block;font-size:11px;color:#2f3d22;margin-top:3px}
.prop-chart{left:14px;top:150px;display:flex;align-items:flex-end;gap:5px;height:70px;padding:8px 10px 20px;background:#f4f0e6;border-radius:8px;box-shadow:3px 5px 0 #16122228;transform:rotate(-7deg);color:#312a3a}
.prop-chart i{display:block;width:12px;background:#5a8f6a;transform-origin:bottom;transform:scaleY(0)}
.prop-chart i:nth-child(2){height:26px;background:#5a8f6a}.prop-chart i:nth-child(1){height:14px}.prop-chart i:nth-child(3){height:40px}.prop-chart i:nth-child(4){height:60px;background:#ff80bd}
.prop-chart b{position:absolute;bottom:4px;left:0;right:0;font-size:8px;letter-spacing:1.5px;text-align:center;font-weight:400}
.prop-chart.is-on{animation:prop-pop .5s cubic-bezier(.3,.9,.3,1.3) both}
.prop-chart.is-on i{animation:bar-grow .6s cubic-bezier(.3,.9,.3,1.3) both}
.prop-chart.is-on i:nth-child(2){animation-delay:.12s}.prop-chart.is-on i:nth-child(3){animation-delay:.24s}.prop-chart.is-on i:nth-child(4){animation-delay:.36s}
.prop-slate{left:50%;top:250px;margin-left:-52px;width:104px;transform:rotate(9deg);color:#f3ecd8;font-size:8px;letter-spacing:1px}
.slate-top{display:block;height:16px;background:repeating-linear-gradient(-55deg,#f3ecd8 0 10px,#1a1a1f 10px 20px);transform-origin:left bottom;border-radius:3px 3px 0 0}
.slate-body{display:block;background:#1a1a1f;padding:14px 8px 12px;line-height:1.7;border-radius:0 0 4px 4px}
.prop-slate.is-on{animation:prop-pop .5s cubic-bezier(.3,.9,.3,1.3) both}
.prop-slate.is-on .slate-top{animation:slate-clap .6s ease-in .3s both}
.prop-invite{left:50%;top:150px;width:230px;margin-left:-115px;background:#fffaf2;color:#2e2838;border-radius:12px;padding:14px 16px;text-align:left;box-shadow:0 14px 34px #0004;transform:rotate(-3deg);border-left:5px solid #ff80bd}
.prop-invite span{font-size:8px;letter-spacing:2px;color:#8c7f96}.prop-invite strong{display:block;font-size:14px;margin:5px 0 3px}.prop-invite small{font-size:10px;color:#6c6176}
.prop-invite.is-on{animation:prop-pop .55s cubic-bezier(.3,.9,.3,1.3) both}
.prop-applause{left:50%;top:150px;margin-left:-70px;width:140px;padding:9px 0;background:#2b2026;color:#ffd0e4;font-family:var(--display);font-size:22px;letter-spacing:2px;border:2px solid #ff80bd;border-radius:6px;transform:rotate(-2deg);box-shadow:0 0 25px #ff80bd66}
.prop-applause.is-on{animation:applause-blink 2.4s steps(1) both}
.prop-title{left:50%;top:145px;width:300px;margin-left:-150px;background:#fffdf5;color:#201b29;padding:24px 20px 26px;transform:rotate(-2deg);box-shadow:8px 10px 0 #16122233}
.prop-title span{display:block;font-size:9px;letter-spacing:2.5px;color:#8c7f96}.prop-title strong{display:block;font-family:var(--display);font-size:38px;line-height:1.05;font-weight:400;margin-top:8px}
.prop-title.is-on{animation:title-in .7s cubic-bezier(.2,.9,.3,1.1) both}
.cast-stage.is-title .cast-character{filter:brightness(.6)}

/* Cameos pop up between the leads, then slip out. */
.cast-cameo{position:absolute;left:50%;bottom:78px;width:150px;margin-left:-75px;z-index:3;transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.cast-cameo svg{display:block;width:100%;height:auto;overflow:visible}
.cameo-tag{display:block;font-family:var(--display);font-size:19px;line-height:1.1;margin-top:-2px}
.cameo-tag span{font-family:var(--display);display:block;font-size:12px;color:#e2d5e8b3;margin-top:4px}
.cameo-on.cameo-theo .cameo-theo,.cameo-on.cameo-dev .cameo-dev{transform:translateY(0);opacity:1}
.cameo-exit.cameo-theo .cameo-theo{animation:cameo-leave .7s ease-in both}
.cameo-exit.cameo-dev .cameo-dev{animation:cameo-leave-right .7s ease-in both}
.cameo-on.cameo-theo .cameo-theo svg{animation:theo-float 3s ease-in-out infinite,boil .42s steps(1) infinite}
.steam{animation:steam 2.2s ease-in-out infinite}
.cameo-on.cameo-dev .type-hand{animation:typing .18s ease-in-out infinite alternate}
.type-hand:nth-of-type(2){animation-delay:.09s}
.cameo-dev .screen-glow{animation:screen-glow 1.1s ease-in-out infinite alternate}
.cameo-on .cast-heart{opacity:.25}

/* Controls */
.cast-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:62px;flex-wrap:wrap}
.cast-controls button{background:#fff7ee15;color:#f9edf6;border:1px solid #ffffff30;border-radius:100px;font-size:12px;padding:13px 20px;display:flex;align-items:center;gap:14px;transition:background .2s}
.cast-controls button:hover{background:#fff7ee2b}
.cast-controls #next-line{background:var(--cream);color:#191d24;font-weight:600;border-color:transparent}
.cast-controls #next-line:hover{background:#ffdbee}
.cast-controls #cast-motion{border:0;background:transparent;color:#e2d5e8a3;padding:13px 6px;font-size:10px;gap:10px}
.cast-section.is-paused *,.cast-section:not(.is-visible) *{animation-play-state:paused!important}

@keyframes stern-sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.5deg)}}
@keyframes tisch-sway{0%,100%{transform:rotate(1deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-3px)}}
@keyframes stern-nod{0%,35%,100%{transform:rotate(0)}45%,55%{transform:rotate(5deg)}65%{transform:rotate(0)}}
@keyframes tisch-tilt{0%,30%,100%{transform:rotate(-3deg)}45%,65%{transform:rotate(5deg)}}
@keyframes coffee-gesture{0%,30%,100%{transform:rotate(0)}45%,60%{transform:rotate(-10deg)}}
@keyframes case-swing{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes cast-blink{0%,41%,45%,100%{transform:scaleY(1)}43%{transform:scaleY(.08)}}
@keyframes cast-heart{0%,100%{transform:translateY(0) rotate(-8deg);opacity:.55}50%{transform:translateY(-10px) rotate(6deg);opacity:1}}
@keyframes camera-flash{0%,15%,50%,100%{opacity:0}8%,38%{opacity:1}}
@keyframes stage-flash{0%,100%{opacity:0}12%{opacity:.85}}
@keyframes speech-pop{0%{opacity:.2;translate:0 9px;scale:.96}100%{opacity:1;translate:0 0;scale:1}}
@keyframes caption-in{0%{opacity:0;clip-path:inset(0 100% 0 0);translate:0 6px}100%{opacity:1;clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes stern-sip{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(-78deg) translate(-6px,2px)}}
@keyframes stern-sip-head{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(9deg) translate(6px,2px)}}
@keyframes stern-watch{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-105deg)}}
@keyframes stern-watch-head{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(16deg) translateY(4px)}}
@keyframes stern-big-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg) translateY(5px)}}
@keyframes stern-phone{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-120deg) translate(-10px,-4px)}}
@keyframes shrug{0%,100%{transform:translateY(0)}30%,60%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes tisch-big-tilt{0%,100%{transform:rotate(-3deg)}40%,70%{transform:rotate(14deg) translateX(4px)}}
@keyframes tisch-gasp{0%{transform:rotate(-3deg)}35%,75%{transform:rotate(-12deg) translate(-4px,-10px) scale(1.06)}100%{transform:rotate(-3deg)}}
@keyframes tisch-hands-up{0%,100%{transform:translateY(0)}35%,75%{transform:translateY(-16px) scale(1.04)}}
@keyframes tisch-side-eye{0%,100%{transform:rotate(-3deg)}30%,80%{transform:rotate(2deg) translateX(-5px)}}
@keyframes tisch-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) translateY(-8px)}50%{transform:rotate(8deg) translateY(-8px)}75%{transform:rotate(-10deg) translateY(-8px)}}
@keyframes tisch-bow{0%,100%{transform:translateY(0) scaleY(1)}35%,70%{transform:translateY(14px) scaleY(.92) rotate(-2deg)}}
@keyframes tisch-bow-head{0%,100%{transform:rotate(-3deg)}35%,70%{transform:rotate(22deg) translateY(10px)}}
@keyframes heart-pop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.5) rotate(-10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes heart-pop-big{0%{transform:scale(.4);opacity:0}40%{transform:scale(2.4) rotate(-12deg);opacity:1}100%{transform:scale(1.4) rotate(4deg);opacity:1}}
@keyframes heart-fly{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(20deg)}}
@keyframes toast-in{0%{opacity:0;transform:translateY(-30px) scale(.9)}10%,85%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px)}}
@keyframes prop-pop{0%{opacity:0;scale:.5}100%{opacity:1;scale:1}}
@keyframes bar-grow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes slate-clap{0%{transform:rotate(-28deg)}60%{transform:rotate(0)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
@keyframes applause-blink{0%,20%,40%,60%,80%{opacity:1}10%,30%,50%,70%{opacity:.25}90%,100%{opacity:1}}
@keyframes title-in{0%{opacity:0;transform:rotate(-6deg) scale(.7) translateY(30px)}100%{opacity:1;transform:rotate(-2deg) scale(1) translateY(0)}}
@keyframes cameo-leave{0%{transform:translateY(0);opacity:1}100%{transform:translate(-260px,-40px) rotate(-12deg);opacity:0}}
@keyframes cameo-leave-right{0%{transform:translateY(0);opacity:1}100%{transform:translate(260px,20px) rotate(10deg);opacity:0}}
@keyframes theo-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-10px)}}
@keyframes typing{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}
@keyframes screen-glow{0%{opacity:.35}100%{opacity:.75}}
@keyframes blush-in{0%{opacity:0}100%{opacity:1}}
@keyframes boil{0%{filter:url(#boil1)}33%{filter:url(#boil2)}66%{filter:url(#boil3)}}
@keyframes rec-blink{0%{opacity:1}50%{opacity:0}}
@keyframes pills-pop{0%,25%{opacity:0;transform:translate(0,10px)}45%{opacity:1;transform:translate(-6px,-6px)}100%{opacity:0;transform:translate(-14px,-24px)}}
@keyframes shock-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes laugh-pop{0%{opacity:0;scale:.4;rotate:-10deg}12%,80%{opacity:1;scale:1;rotate:7deg}100%{opacity:0;scale:.9;rotate:7deg}}
@keyframes sweat-drop{0%{opacity:0;transform:translateY(-4px)}20%{opacity:1}100%{opacity:0;transform:translateY(22px)}}

@media(max-width:650px){.cast-section{padding:62px 18px 48px}.cast-section .tape-title{font-size:33px}.cast-episode{font-size:8px;letter-spacing:1.6px;margin-top:20px}.cast-stage{height:428px;margin-top:14px;max-width:430px}.cast-dialogue{--stern-x:24%;--tisch-x:76%;--bubble-y:138px}.cast-speech{font-size:13.5px;line-height:1.3;padding:10px 11px;min-height:0;width:48%;margin-left:-24%;border-radius:16px 16px 4px 16px;transform:rotate(-2deg)}.tisch-speech{border-radius:16px 16px 16px 4px;transform:rotate(2deg)}.cast-speech:after{bottom:-12px;border-top-width:14px}.cast-speech.is-action{font-size:12.5px}.cameo-speech{top:166px;width:210px;margin-left:-105px;font-size:12.5px;padding:10px 12px}.cast-character{width:47%;max-width:185px;top:142px}.stern-character{left:0}.tisch-character{right:0}.cast-name{font-size:25px;margin-top:0}.cast-name>span{font-size:8px;margin-top:7px}.cast-heart{font-size:31px;left:47%;top:187px}.heart-burst{top:205px}.doodle-one{font-size:25px;left:1px;top:162px}.doodle-two{font-size:22px;right:0;top:150px}.cast-floor{bottom:66px;left:0;width:100%;height:30px}.cast-cameo{width:105px;margin-left:-52px;bottom:82px}.cameo-tag{font-size:15px}.cameo-tag span{font-size:7px}.cast-caption{font-size:8px;letter-spacing:1.2px;padding:6px 10px;white-space:normal;text-align:center;max-width:94%}.prop-toast{width:230px;margin-left:-115px;top:-20px}.toast-text{font-size:11px}.prop-chart{left:4px;top:150px;height:56px;gap:4px}.prop-chart i{width:9px}.prop-slate{width:86px;margin-left:-43px;top:200px}.prop-invite{width:190px;margin-left:-95px;top:140px;padding:11px 12px}.prop-invite strong{font-size:12px}.prop-invite small{font-size:9px}.prop-applause{font-size:17px;width:110px;margin-left:-55px}.prop-laugh{font-size:14px;padding:7px 10px;right:0;top:100px}.prop-title{width:240px;margin-left:-120px;top:130px;padding:18px 16px}.prop-title strong{font-size:29px}.fx-stern-step .stern-character,.fx-both-main .stern-character{translate:12px -4px}.fx-tisch-step .tisch-character,.fx-both-main .tisch-character{translate:-12px -4px}.cast-controls{margin-top:64px;gap:9px}.cast-controls button{padding:12px 15px;font-size:11px;gap:10px}.cast-controls #cast-motion{font-size:9px;gap:7px}}
@media(max-width:360px){.cast-stage{height:408px}.cast-speech{font-size:12.5px}.cast-section .tape-title{font-size:29px}.cast-name{font-size:22px}.cast-name>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.cast-section *{animation:none!important;transition:none!important}.prop.is-on{opacity:1}.fx-heart .heart-burst i,.fx-heart-big .heart-burst i{display:none}}

/* Instagram slide export dialog: the quiz's 90s cel look (plum stage, ink outlines, paper, hard shadows) */
#slides-dialog{width:940px;padding:30px 30px 24px;color:#eee8d9;border:3px solid #1a1720;border-radius:26px;box-shadow:10px 12px 0 #0e0c1488;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath fill='%23fff' fill-opacity='.07' d='M0 0h1v1H0zm2 2h1v1H2z'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 110%,#c9a8b84d,transparent 60%),linear-gradient(150deg,#4a4561,#383d51 58%,#4c5040)}
#slides-dialog::backdrop{background:#120f1ccc;backdrop-filter:blur(6px)}
#slides-dialog .close-dialog{width:38px;height:38px;border-radius:50%;background:#eee8d9;color:#1a1720;border:2.5px solid #1a1720;box-shadow:3px 3px 0 #1a172080;font-size:22px;display:grid;place-items:center;right:18px;top:18px}
.slides-tape{display:inline-block;margin:0 0 12px;background:#101010;color:#fff2d6;font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;padding:6px 10px 7px;transform:rotate(-1.5deg);box-shadow:0 0 3px 2px #15121980}
.slides-title{font-family:var(--display);font-weight:400;font-size:46px;line-height:1.05;margin:0 0 6px;color:#eee8d9}
.slides-title strong{color:#ff80bd;font-weight:400}
.slides-sub{font-family:var(--display);font-size:19px;line-height:1.3;color:#e2d5e8;margin:0 0 16px;max-width:560px}
.slides-pick{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:19px;color:#eee8d9;margin-bottom:12px}
.slides-pick select{flex:1;max-width:340px;height:46px;border:2.5px solid #1a1720;border-radius:14px;padding:0 12px;background:#eee8d9;color:#1a1720;font-family:var(--display);font-size:18px;box-shadow:3px 4px 0 #0e0c1499}
.slides-pick select:focus-visible{outline:3px solid #ff80bd;outline-offset:2px}
.slides-status{font-family:var(--display);font-size:16px;color:#e2d5e8cc;min-height:20px;margin:0 0 12px}
.slides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-height:50svh;overflow:auto;padding:4px 8px 10px 4px}
.slides-grid a{display:block;border:2.5px solid #1a1720;border-radius:12px;overflow:hidden;box-shadow:4px 5px 0 #0e0c14aa;transition:transform .15s;rotate:-.6deg}
.slides-grid a:nth-child(2n){rotate:.6deg}
.slides-grid a:hover{transform:translate(-2px,-2px)}
.slides-grid a:focus-visible{outline:3px solid #ff80bd;outline-offset:3px}
.slides-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#423f57}
.slides-caption{margin-top:16px;padding:14px 16px;background:#eee8d9;color:#38303e;border:2.5px solid #1a1720;border-radius:18px;box-shadow:4px 5px 0 #0e0c1499;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.slides-caption-label{grid-column:1/-1;margin:0;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;color:#8c7f96}
.slides-caption-text{margin:0;font-family:var(--display);font-size:17px;line-height:1.3;white-space:pre-line}
.slides-copy{align-self:start;background:#2c2a3c;color:#eee8d9;border:2.5px solid #1a1720;border-radius:999px;padding:9px 16px;font-family:var(--display);font-size:17px;box-shadow:3px 3px 0 #1a172066;white-space:nowrap}
.slides-copy:hover{background:#3a3750}
.slides-copy-status{grid-column:1/-1;font-family:var(--display);font-size:15px;color:#6b5f74}
.slides-copy-status:empty{display:none}
.slides-actions{margin-top:16px}
.slides-download{width:100%;min-height:56px;background:#ff80bd;color:#1a1720;border:3px solid #1a1720;border-radius:999px;box-shadow:4px 5px 0 #0e0c14aa;font-family:var(--display);font-size:24px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,box-shadow .15s}
.slides-download:hover:not(:disabled){background:#ff9ccd;transform:translate(-2px,-2px)}
.slides-download:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.slides-download:disabled{background:#2c2a3c;color:#e2d5e866;box-shadow:none}
.slides-fine{font-family:var(--display);font-size:15px;color:#e2d5e8aa;text-align:center;margin:12px 0 0}
.cast-controls #export-slides{border-style:dashed}
@media(max-width:800px){.slides-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){#slides-dialog{padding:22px 16px 18px;border-radius:20px}.slides-title{font-size:36px}.slides-sub{font-size:17px}.slides-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-height:44svh}.slides-caption{grid-template-columns:1fr}.slides-copy{justify-self:start}}

/* hand-lettered dialogue; size-adjust keeps it the same optical size as the old Arial */
.cast-speech:not(.is-action),.crew-bubble{font-family:var(--display);font-size-adjust:.52}