@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--red:#8e292d;--bright:#e44436;--cream:#fff0c8;--ink:#242120;--gold:#e7b94c}*{box-sizing:border-box}body{margin:0;background:#211e1c;color:var(--cream);font-family:'DM Sans',sans-serif}button,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button{color:inherit}header{height:76px;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 3.5%;border-bottom:3px solid var(--ink)}.station{display:flex;align-items:center;gap:7px;font:900 30px 'Barlow Condensed',sans-serif;letter-spacing:-1px}.station-face{font:30px sans-serif;margin-right:4px}.tv{font-size:14px;align-self:flex-start;background:var(--red);color:var(--cream);padding:2px 4px;letter-spacing:0;margin-top:7px}.show-name{font-size:12px;font-weight:600}.header-actions{display:flex;align-items:center;gap:25px}.header-actions button{background:none;border:0;color:inherit;font-size:12px}.header-actions #motion{border:1px solid #24212055;width:31px;height:31px}.stage{height:calc(100svh - 210px);min-height:610px;max-height:1000px;position:relative;isolation:isolate;overflow:hidden;background:var(--red)}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.stage-shade{position:absolute;inset:0;background:linear-gradient(90deg,#8e292d 0%,#8e292df5 22%,#8e292db0 31%,transparent 48%);z-index:-2}.hero-copy{position:absolute;left:4.5%;top:11%;width:42%;z-index:2}.episode{display:block;font-size:11px;color:#e4b7a5;margin-bottom:8px}h1{font:900 clamp(90px,11vw,180px)/.92 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.035em;margin:0 0 18px;color:var(--cream);text-shadow:5px 5px 0 #4e141f;transform:rotate(-3deg);transform-origin:left center}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:.99}.hero-copy h2{font-size:clamp(34px,4vw,63px);margin:0}.premise{font-size:16px;line-height:1.45;color:#f8dfbc;margin:24px 0}.news-button{display:flex;align-items:center;gap:17px;border:3px solid #242120;background:var(--gold);color:var(--ink);padding:16px 22px;font-weight:800;font-size:14px;box-shadow:4px 5px 0 #242120;transform:rotate(-1deg);transition:transform .15s,box-shadow .15s}.news-button:hover{transform:translate(2px,2px) rotate(-1deg);box-shadow:2px 3px 0 #242120}.button-icon{font-size:17px}.meme-link{display:block;background:none;border:0;border-bottom:1px solid #fff0c855;padding:13px 0 6px;font-size:13px;margin:9px 0 15px}.meme-link span{margin-left:30px}.fiction{font-size:9px;color:#e4b7a5}.reaction{position:absolute;top:7%;right:6%;width:265px;background:var(--cream);border:3px solid var(--ink);color:var(--ink);padding:14px 19px 18px;box-shadow:5px 5px 0 #242120;transform:rotate(3deg);z-index:4}.reaction:after{content:'';position:absolute;bottom:-17px;left:32px;width:24px;height:26px;background:var(--cream);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewY(35deg)}.reaction-speaker{font-size:10px;font-weight:800;color:#9d392d}.reaction p{font:700 26px/1.05 'Barlow Condensed',sans-serif;margin:6px 0 0}.reaction.pop{animation:pop .35s ease}.stage.shake .scene{animation:shake .4s ease}.episode-counter{position:absolute;bottom:22px;right:3%;background:#242120e6;padding:8px 11px;font-size:11px;letter-spacing:2px}.episode-counter>span{color:var(--gold)}.stage-sticker{position:absolute;right:4%;bottom:90px;transform:rotate(11deg);background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:50%;width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font:700 22px/1 'Barlow Condensed',sans-serif}.stage-sticker b{font-size:17px}.chyron{display:flex;align-items:stretch;min-height:68px;background:var(--cream);color:var(--ink);border-top:4px solid var(--ink);border-bottom:3px solid var(--ink)}.breaking{background:var(--bright);font:900 26px/.95 'Barlow Condensed',sans-serif;color:var(--cream);padding:12px 28px 9px;display:flex;flex-direction:column;justify-content:center;transform:skew(-8deg);margin-left:-8px;padding-left:34px;min-width:175px}.breaking span{font:700 9px 'DM Sans',sans-serif;letter-spacing:1.8px;margin-top:3px}.headline{align-self:center;padding:10px 26px;font:800 clamp(20px,2.3vw,35px)/1 'Barlow Condensed',sans-serif;letter-spacing:.1px}.chyron button{margin-left:auto;min-width:65px;background:none;border:0;border-left:1px solid #24212040;color:var(--ink);font-size:27px}.bottom-strip{min-height:66px;display:flex;align-items:center;justify-content:space-between;padding:15px 3.5%;background:#292622}.grump-meter{display:flex;gap:16px;align-items:center;font-size:10px}.meter-track{width:100px;height:8px;background:#fff0c822;transform:skew(-12deg)}.meter-track i{display:block;width:85%;height:100%;background:var(--bright);transition:width .3s}.grump-meter strong{font-weight:500;color:var(--gold);font-size:10px}.token-info{display:flex;gap:25px;font-size:12px;align-items:center}.token-info>span{font-weight:800}.token-info button{background:none;border:0;color:#c8bfa9;font-size:11px}.token-info button span{margin-left:10px}footer{padding:14px 3.5%;display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:9px;color:#a69c88}footer button{background:none;border:0;color:inherit;font-size:9px;text-decoration:underline}.paused *{animation:none!important}dialog{padding:32px;background:var(--cream);color:var(--ink);border:4px solid var(--ink);width:min(960px,94vw);max-height:91svh;overflow:auto;box-shadow:10px 10px 0 #0004}dialog::backdrop{background:#21191cc9;backdrop-filter:blur(6px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:15px}.mini-label{font-size:10px;color:var(--red);font-weight:700}.dialog-header h2{font-size:40px;margin:7px 0 0}.close{font:30px sans-serif;background:none;border:0;color:var(--ink);padding:5px}.studio{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}.poster{position:relative;aspect-ratio:1;border:3px solid var(--ink);overflow:hidden;background:#a47725}.poster img{height:100%;width:100%;object-fit:cover}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(#0009,transparent 40%,transparent 75%,#0006);pointer-events:none}.poster>p{position:absolute;top:6%;left:4%;right:4%;margin:0;text-align:center;white-space:pre-line;overflow-wrap:anywhere;font:900 32px/1 'Barlow Condensed',Impact,sans-serif;color:#fff8dc;text-shadow:2px 2px 0 #211e1c,-1px -1px 0 #211e1c;z-index:1}.poster>span{position:absolute;bottom:14px;left:17px;z-index:1;color:var(--cream);font:900 25px 'Barlow Condensed',sans-serif}.studio-controls label{font-size:12px;font-weight:700;display:block;margin-bottom:10px}.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.presets button{padding:9px 11px;font-size:11px;border:1px solid #24212060;background:transparent;color:var(--ink)}.presets button.selected{background:var(--red);color:var(--cream);border-color:var(--red)}textarea{width:100%;min-height:112px;max-height:220px;padding:12px;background:#fff8e5;border:2px solid var(--ink);color:var(--ink);resize:vertical;line-height:1.4}.download{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--red);color:var(--cream);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:16px;font-size:13px;font-weight:700;margin-top:19px}.hint{font-size:10px;line-height:1.5;color:#6c6151;margin:14px 0 0}.small-dialog{max-width:520px;padding:38px}.small-dialog>.close{float:right;margin:-12px -12px 0 0}.small-dialog h2{font-size:53px;margin:25px 0}.small-dialog p{font-size:15px;line-height:1.7}.small-dialog .fine{font-size:11px;color:#756753;border-top:1px solid #24212030;padding-top:17px;margin-top:25px}dl{margin:25px 0}dl>div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #24212030;font-size:12px}dd{font-weight:700;margin:0}@keyframes pop{0%{transform:rotate(3deg) scale(.9)}60%{transform:rotate(-2deg) scale(1.04)}100%{transform:rotate(3deg) scale(1)}}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@media(min-width:1700px){.hero-copy{top:12%}.reaction{right:8%;width:310px}.reaction p{font-size:31px}}@media(max-width:750px){header{height:62px;padding:0 5%}.station{font-size:25px}.station-face{font-size:25px}.tv{font-size:11px;margin-top:5px}.show-name{display:none}.header-actions{gap:16px}.header-actions button{font-size:10px}.stage{height:900px;min-height:0;max-height:none}.scene{height:61%;top:39%;object-position:64% center}.stage-shade{background:linear-gradient(#8e292d 0%,#8e292d 34%,#8e292d70 44%,transparent 53%)}.hero-copy{top:29px;left:6%;width:88%}.episode{font-size:10px;margin-bottom:5px}h1{font-size:26vw;max-width:100%;margin:0 0 15px;text-shadow:3px 4px 0 #4e141f}.hero-copy h2{font-size:38px}.premise{font-size:13px;line-height:1.4;margin:14px 0}.news-button{font-size:12px;padding:12px 17px;gap:14px;display:inline-flex}.meme-link{display:inline-block;margin:0 0 0 17px;font-size:11px;padding:8px 0}.meme-link span{margin-left:9px}.fiction{display:block;margin-top:15px;font-size:8px}.reaction{top:auto;bottom:37%;right:6%;width:190px;padding:10px 14px 12px}.reaction p{font-size:22px}.reaction-speaker{font-size:9px}.stage-sticker{right:5%;bottom:69px;width:70px;height:70px;font-size:20px}.stage-sticker b{font-size:13px}.episode-counter{bottom:16px;right:6%;font-size:9px}.chyron{min-height:65px}.breaking{min-width:110px;padding:10px 12px 10px 22px;font-size:21px}.breaking span{font-size:7px;letter-spacing:1px}.headline{font-size:20px;padding:8px 12px}.chyron button{min-width:40px;font-size:22px}.bottom-strip{padding:17px 5%;flex-wrap:wrap;gap:20px}.grump-meter{gap:11px;width:100%;font-size:9px;justify-content:space-between}.meter-track{width:75px}.grump-meter strong{font-size:9px}.token-info{width:100%;justify-content:space-between;font-size:11px}footer{padding:15px 5%;flex-wrap:wrap;gap:9px;font-size:8px}footer span:nth-child(2){max-width:210px}footer button{font-size:8px}dialog{padding:20px}.studio{grid-template-columns:1fr;gap:22px}.dialog-header h2{font-size:30px}.poster{max-height:42svh}.poster>p{font-size:28px}.small-dialog{padding:28px}.small-dialog h2{font-size:43px}.small-dialog p{font-size:14px}}@media(max-width:370px){.stage{height:860px}.hero-copy h2{font-size:34px}.meme-link{margin-left:9px;font-size:10px}.news-button{padding:10px 12px}.reaction{bottom:36%;width:175px}.grump-meter{gap:7px}.meter-track{width:55px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.meme-link span,.token-info button span,.button-icon{font-family:Arial,sans-serif}.reaction p{white-space:pre-line}
/* A cut-paper television broadcast, with a slow camera and short comic accents. */
.stage .scene{transform:translate(var(--px,0px),var(--py,0px)) scale(1.035);animation:camera-drift 14s ease-in-out infinite alternate;transition:translate .8s ease;will-change:transform}
.hero-copy{animation:copy-arrives .8s cubic-bezier(.16,1,.3,1) both}
.reaction{animation:bubble-idle 5s ease-in-out infinite}
.reaction.pop{animation:pop .4s ease,bubble-idle 5s .4s ease-in-out infinite}
.stage-sticker{animation:sticker-rock 4s steps(3,end) infinite}
.live-badge{position:absolute;top:20px;left:4.5%;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1.6px;font-weight:700;color:var(--cream)}
.live-badge i{width:6px;height:6px;border-radius:50%;background:#f9df98;animation:live-dot 2.4s ease-in-out infinite}
.scene-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#0002;z-index:5}.scene-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .1s linear}
.camera-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 40%,#fff8e8 0%,transparent 65%);opacity:0;z-index:1;animation:press-flash 13s 4s infinite}
.steam{position:absolute;left:61%;top:31%;width:90px;height:75px;pointer-events:none;z-index:1}.steam i{position:absolute;bottom:0;width:15px;height:40px;border:3px solid #fff0c8aa;border-right:0;border-bottom:0;border-radius:50%;opacity:0;animation:steam-rise 3s ease-out infinite}.steam i:nth-child(2){left:28px;animation-delay:1s}.steam i:nth-child(3){left:55px;animation-delay:2s}
.flying-papers{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.paper{position:absolute;left:66%;bottom:11%;width:35px;height:24px;background:#fff0c8;border:1px solid #c4a570;box-shadow:2px 2px 0 #0003;opacity:0;animation:paper-toss 2s var(--delay) ease-out both}.paper:after{content:'';position:absolute;inset:5px;background:repeating-linear-gradient(transparent 0 3px,#8e292d66 3px 4px)}
.stage.shake .scene{animation:news-jolt .55s ease,camera-drift 14s .55s ease-in-out infinite alternate}
#motion{font:700 9px Arial,sans-serif;min-width:38px}
.paused .scene{transform:scale(1.035)!important}.paused .camera-flash,.paused .steam,.paused .flying-papers{display:none}.paused .scene-progress{opacity:0}
@keyframes camera-drift{from{transform:translate(var(--px,0px),var(--py,0px)) scale(1.035)}to{transform:translate(var(--px,0px),var(--py,0px)) scale(1.065)}}
@keyframes copy-arrives{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes bubble-idle{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1deg) translateY(-7px)}}
@keyframes sticker-rock{0%,100%{transform:rotate(11deg)}50%{transform:rotate(5deg)}}
@keyframes live-dot{50%{opacity:.25}}
@keyframes press-flash{0%,3%,100%{opacity:0}1.5%{opacity:.18}}
@keyframes steam-rise{0%{opacity:0;transform:translateY(12px) rotate(-10deg)}25%{opacity:.65}100%{opacity:0;transform:translateY(-45px) rotate(20deg)}}
@keyframes paper-toss{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}45%{transform:translate(calc(var(--dx)*.6),-230px) rotate(var(--spin));opacity:1}100%{transform:translate(var(--dx),160px) rotate(calc(var(--spin)*2));opacity:0}}
@keyframes news-jolt{0%,100%{transform:scale(1.045)}25%{transform:translate(-6px,3px) scale(1.06)}60%{transform:translate(5px,-2px) scale(1.045)}}
@media(max-width:750px){.live-badge{top:13px;left:auto;right:6%;font-size:7px;letter-spacing:1px}.steam{left:56%;top:61%}.paper{left:60%;bottom:8%}.hero-copy{top:37px}}
@media(prefers-reduced-motion:reduce){.camera-flash,.steam,.flying-papers{display:none}}
/* Actual character animation replaces the simulated camera/effect layer. */
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;background:var(--red)}
.stage .scene{animation:none!important;transform:none!important;transition:none;will-change:auto}
.film-playing .scene{visibility:hidden}
.camera-flash,.steam,.flying-papers{display:none!important}
.reaction,.reaction.pop,.stage-sticker{animation:none}
.film-play{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);z-index:6;padding:14px 24px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:800}
.film-play[hidden]{display:none}
@media(max-width:750px){.hero-film{height:61%;top:39%;object-position:65% center}.film-play{bottom:25px;font-size:12px;white-space:nowrap}}
@media(max-width:750px){
 .stage{height:calc(410px + 84.375vw)}
 .hero-film{width:150%;height:84.375vw;left:-50%;top:auto;bottom:0;object-fit:fill}
 .stage-shade{background:linear-gradient(#8e292d 0%,#8e292d 44%,transparent 60%)}
 .reaction{top:350px;bottom:auto;width:180px;right:5%;padding:9px 13px}
 .reaction p{font-size:20px}.stage-sticker{bottom:65px}
}
/* Fixed in sites/grump: on mobile the still and the poster share the film's 16:9 box, so nothing doubles or stretches before the film plays; the bubble tail clears the quote; the bubble clears the fiction line on very narrow phones. */
@media(max-width:750px){.scene{width:150%;height:84.375vw;left:-50%;top:auto;bottom:0}.hero-film{object-fit:cover}.reaction{padding-bottom:18px}}
@media(max-width:370px){.reaction{top:376px}}