:root{
  --red:#e10600;--red-dark:#9c0400;--ink:#0b0b0e;--yellow:#ffd400;--white:#f7f7f2;--grey:#9aa0a8;
  --cond:'Barlow Condensed',system-ui,sans-serif;--disp:'Big Shoulders Display','Barlow Condensed',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--white);font-family:var(--cond);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
kbd{font:700 11px var(--cond);opacity:.55;margin-left:6px;border:1px solid currentColor;border-radius:3px;padding:0 4px}

#broadcast{position:fixed;inset:0;background:#000}
#screen{position:absolute;inset:0}

/* the grid holds every feed; app.js places each one by composition (see COMPOSE) and the tiles fly between spots */
#grid{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 45%}
.feed{position:absolute;left:0;top:0;width:100%;height:100%;background:#0a0a0a;transform-origin:50% 50%;
  transition:left .7s cubic-bezier(.7,0,.2,1),top .7s cubic-bezier(.7,0,.2,1),width .7s cubic-bezier(.7,0,.2,1),height .7s cubic-bezier(.7,0,.2,1),transform .7s cubic-bezier(.7,0,.2,1),opacity .35s,border-radius .4s}
.feed .cam{position:absolute;inset:0;overflow:hidden;border-radius:inherit;will-change:transform}
.feed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) saturate(1.1)}
.feed .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* framed tiles: a beveled monitor housing with a matchup bar underneath, like the RedZone board */
.feed.framed{border-radius:7px;box-shadow:0 0 0 2px #2b2b33,0 0 0 5px #0c0c10,0 0 0 6px #ffffff1c,0 26px 50px -10px #000e}
.feed.framed .cam{border-radius:5px}
.feed.framed::before{content:'';position:absolute;inset:0;border-radius:5px;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px #fff3,inset 0 30px 40px -30px #fff2,inset 0 -40px 50px -30px #0009}
.feed .tag{display:none;position:absolute;left:-6px;right:-6px;top:calc(100% + 9px);height:30px;align-items:stretch;gap:0;z-index:4;font:900 italic 16px/1 var(--cond);text-transform:uppercase;letter-spacing:.5px;
  background:linear-gradient(#24242b,#0e0e12);border-radius:5px;box-shadow:0 0 0 1px #ffffff1a,0 8px 18px #000a;overflow:hidden}
.feed.framed .tag{display:flex}
.tag .shield{display:flex;align-items:center;padding:0 12px 0 10px;color:#fff;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.tag .shield.I{background:linear-gradient(#1f4fbf,#123488);box-shadow:inset 0 4px 0 #d3202a}
.tag .shield.US{background:linear-gradient(#f4f4f4,#cfcfcf);color:#111}
.tag .shield.SR{background:linear-gradient(#1b8a3a,#0f5c26)}
.tag .at{display:flex;align-items:center;padding:0 9px;font:800 13px var(--cond);color:var(--grey);letter-spacing:1px}
.tag .town{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;padding:0 10px 0 14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,#0000,#e1060033 40%,#e10600aa);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.tag .town span{overflow:hidden;text-overflow:ellipsis}
.feed .heat{position:absolute;right:8px;top:8px;z-index:4;font:900 italic 20px var(--cond);background:#000a;padding:0 8px;border-radius:3px}
.feed.small .tag{height:24px;font-size:13px;top:calc(100% + 7px)}
.feed.small .heat{font-size:15px}
.feed.hot{z-index:5!important;box-shadow:0 0 0 3px var(--red),0 0 0 6px #0c0c10,0 0 40px 6px #e10600aa,0 30px 60px -10px #000}
.feed.hot::after{content:'RED ZONE';position:absolute;left:8px;top:8px;z-index:4;background:var(--red);font:900 italic 14px var(--cond);padding:2px 8px;letter-spacing:1px;animation:pulse .8s infinite alternate}
.feed.bleed .heat,.feed.bleed::after{display:none}
.feed.bleed{box-shadow:none}
.feed .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0002 2px 3px);mix-blend-mode:multiply}
@keyframes pulse{to{opacity:.55}}

/* whip transition: a red slab tears across the screen on every cut */
#wipe{position:absolute;inset:0;pointer-events:none;z-index:6;display:flex;align-items:center;justify-content:center;transform:translateX(-120%) skewX(-14deg);background:linear-gradient(90deg,var(--red-dark),var(--red) 30%,var(--red) 70%,var(--red-dark))}
#wipe span{font:900 italic 12vw/1 var(--disp);letter-spacing:-.02em;color:#fff;text-shadow:6px 6px 0 #0006;white-space:nowrap}
#wipe.go{animation:wipe .62s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wipe{0%{transform:translateX(-120%) skewX(-14deg)}45%,55%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(120%) skewX(-14deg)}}
#screen.whoosh #grid{animation:blur .62s ease}
@keyframes blur{40%{filter:blur(8px) brightness(1.4)}}

/* broadcast chrome */
#bug{position:absolute;top:18px;left:18px;z-index:8;display:flex;align-items:stretch;font:900 italic 18px var(--cond);box-shadow:0 4px 16px #0008}
#bug b{background:var(--red);padding:3px 10px;font:900 italic 24px/1.1 var(--disp);letter-spacing:-.5px}
#bug .live{background:#fff;color:#000;padding:6px 10px;display:flex;align-items:center;gap:6px;letter-spacing:1px}
#bug .live i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:pulse .9s infinite alternate}
#bug #clock{background:var(--ink);padding:6px 10px;font-variant-numeric:tabular-nums}

#alert[hidden]{display:none}
#alert{position:absolute;top:84px;left:18px;z-index:8;display:flex;align-items:stretch;transform-origin:left;animation:slam .35s cubic-bezier(.2,1.6,.4,1)}
#alert b{background:var(--yellow);color:#000;padding:6px 12px;font:900 italic 22px var(--disp);letter-spacing:1px}
#alert span{background:var(--ink);padding:8px 14px;font:800 italic 20px var(--cond);text-transform:uppercase}
@keyframes slam{from{transform:scaleX(.2) translateX(-40px);opacity:0}}

#lower{position:absolute;left:18px;bottom:66px;z-index:8;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;max-width:min(760px,calc(100vw - 36px));box-shadow:0 8px 30px #000a;transition:opacity .2s}
.multi #lower{display:none}
.lt-tag{grid-column:1/-1;justify-self:start;background:var(--red);font:900 italic 16px var(--cond);letter-spacing:2px;padding:2px 12px;transform:skewX(-12deg);margin-left:6px}
.lt-main{background:#fff;color:#000;padding:8px 18px 8px 14px;display:flex;flex-direction:column;justify-content:center;min-width:0}
#lt-route{font:900 italic 44px/.9 var(--disp);letter-spacing:-1px;white-space:nowrap}
#lt-name{font:700 19px/1.1 var(--cond);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.lt-meter{background:var(--ink);padding:8px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:170px}
.lt-meter span{font:800 12px var(--cond);letter-spacing:2px;color:var(--grey)}
.meter{height:10px;background:#2a2a30;overflow:hidden;transform:skewX(-14deg)}
#meter{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--red));transition:width .25s}
#meter-num{font:900 italic 30px/1 var(--disp)}

#ticker{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:8;display:flex;align-items:stretch;background:var(--ink);border-top:3px solid var(--red)}
#ticker>b{background:var(--red);padding:0 16px;display:flex;align-items:center;font:900 italic 20px var(--disp);letter-spacing:1px;white-space:nowrap}
.tick-wrap{flex:1;overflow:hidden;position:relative}
#tick{position:absolute;white-space:nowrap;top:0;bottom:0;display:flex;align-items:center;gap:34px;padding-left:100%;animation:tick 60s linear infinite;font:700 19px var(--cond);text-transform:uppercase}
#tick em{font-style:normal;color:var(--yellow);font-weight:900;margin-right:6px}
#tick i{font-style:normal;color:var(--red);font-weight:900;margin-left:6px}
@keyframes tick{to{transform:translateX(-100%)}}

button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* cold open */
#cold{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 60% at 50% 45%,#0000,#000a 75%,#000d);transition:opacity .5s}
#cold:not(.show){opacity:0;pointer-events:none}
/* before tuning in, only the studio set shows behind the title card */
#broadcast:has(#cold.show) :is(#grid,#lower,#ticker,#bug,#plate){opacity:0}
.cold-inner{text-align:center;padding:24px;display:flex;flex-direction:column;align-items:center}
/* the wordmark, same as the header plate: TRAFFIC in red, ZONE in silver, cut in with depth */
.cold-logo{display:flex;align-items:baseline;gap:.16em;transform:skewX(-14deg);font:900 normal clamp(54px,11.5vw,168px)/1 var(--disp);letter-spacing:-.025em;padding:.06em .1em .12em;margin:0}
.cold-logo span{-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .035em 0 #000) drop-shadow(0 .1em .08em #000c)}
.cold-logo span:first-child{background-image:linear-gradient(#ff7a64,#ff2414 45%,#c00500 55%,#8e0300)}
.cold-logo span:last-child{background-image:linear-gradient(#ffffff,#f1f1f3 45%,#c9cbd1 55%,#9a9da5)}
.cold-rule{width:min(78vw,900px);height:2px;background:linear-gradient(90deg,#0000,#ff2a1a 20%,#ff7a5a 50%,#ff2a1a 80%,#0000);box-shadow:0 0 14px 2px #e1060088}
.cold-rule.top{margin-bottom:clamp(14px,2.4vw,30px)}
.cold-rule.bot{margin:clamp(10px,2vw,24px) 0 0}
.cold-inner p{font:800 italic 26px var(--cond);letter-spacing:3px;text-transform:uppercase;margin:0}
.cold-status{font:700 16px var(--cond);color:var(--grey);letter-spacing:1.5px;text-transform:uppercase;min-height:22px}
#go{margin-top:clamp(22px,3.4vw,40px);background:var(--yellow);color:#000;border:0;padding:14px 30px;font:900 italic 26px var(--disp);letter-spacing:1px;text-transform:uppercase;transform:skewX(-10deg);box-shadow:6px 6px 0 var(--red)}
#go:hover{background:#fff}

@media (max-width:760px){
  #lower{left:10px;bottom:56px}
  #lt-route{font-size:32px}
  #lt-name{font-size:15px;max-width:60vw}
  .lt-meter{min-width:110px;padding:6px 10px}
        #alert{top:104px;left:10px}
  #alert span{font-size:15px}
}
@media (prefers-reduced-motion:reduce){#wipe.go{animation:none}#screen.whoosh #grid{animation:none}#tick{animation-duration:200s}}

/* a feed that hasn't produced pictures yet shows broadcast static */
.feed:not(.ready) .cam::before{content:'';position:absolute;inset:-50%;background:repeating-radial-gradient(circle at 17% 32%,#fff1 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#ffffff0d 0 2px,#0000 2px 5px),#151518;animation:static .18s steps(3) infinite;z-index:1}
.feed:not(.ready)>.tag{display:none}
.feed:not(.ready) .heat::before{content:'ACQUIRING SIGNAL';position:absolute;right:0;top:0;white-space:nowrap;font:800 italic 13px var(--cond);letter-spacing:2px;color:var(--grey);background:#000a;padding:3px 8px}
.feed:not(.ready) .heat{font-size:0;background:none}
@keyframes static{33%{transform:translate(7%,-4%)}66%{transform:translate(-5%,6%)}}

.lt-stats{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lt-stats em{font:700 14px var(--cond);font-style:normal;color:var(--grey);letter-spacing:1px;text-transform:uppercase}
.lt-stats em b{color:#fff;font:900 italic 18px var(--cond)}
#cond{grid-column:1/-1;display:flex;gap:6px;margin-top:6px}
#cond span{background:var(--yellow);color:#000;font:900 italic 14px var(--cond);letter-spacing:1.5px;padding:2px 10px;transform:skewX(-12deg)}
#cond:empty{display:none}

/* "Up next" bumper between segments */
#bumper{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(115deg,var(--ink) 0 48%,var(--red) 48% 100%);clip-path:inset(0 100% 0 0)}
#bumper small{font:900 italic 26px var(--cond);letter-spacing:6px;color:var(--yellow)}
#bumper b{font:900 italic clamp(60px,11vw,170px)/.9 var(--disp);letter-spacing:-.02em;text-transform:uppercase;text-shadow:6px 6px 0 #0007}
#bumper.go{animation:bumper 1.7s cubic-bezier(.7,0,.3,1) forwards}
@keyframes bumper{0%{clip-path:inset(0 100% 0 0)}22%,78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}

/* instant replay: tilted frame, REPLAY bug, chrome steps back */
#replay-bug{position:absolute;top:84px;right:20px;z-index:9;display:none;background:var(--yellow);color:#000;font:900 italic 32px var(--disp);letter-spacing:2px;padding:2px 16px;transform:skewX(-12deg);box-shadow:5px 5px 0 var(--red)}
.replay #replay-bug{display:block;animation:pulse .6s infinite alternate}
.replay #screen{box-shadow:inset 0 0 0 10px var(--yellow)}
.replay .feed.on-air video{visibility:hidden}
@media (prefers-reduced-motion:reduce){#bumper.go{animation-duration:.01s}}

.feed.scout{position:absolute!important;width:2px;height:2px;opacity:0!important;pointer-events:none}
@media (max-width:760px){}

/* ─── the studio set ─────────────────────────────────────────────────────── */
#set{position:absolute;inset:-4%;overflow:hidden;background:radial-gradient(120% 90% at 72% 8%,#6a0508 0,#2a0306 38%,#0b0306 70%,#050507 100%);transition:transform 1.2s cubic-bezier(.6,0,.2,1),filter .6s}
#set>*{position:absolute;pointer-events:none}
#set .glow{inset:0;background:radial-gradient(40% 30% at var(--gx,70%) 12%,#ff2a1a66,#0000 70%),radial-gradient(60% 40% at 20% 110%,#b0040c55,#0000 70%);transition:opacity .4s;opacity:calc(.55 + var(--heat,0) * .0045)}
#set .dots{inset:0;background:radial-gradient(#ff4a3a55 1px,#0000 1.6px) 0 0/7px 7px;-webkit-mask:linear-gradient(170deg,#000 0 18%,#0000 40% 66%,#000a 90%);mask:linear-gradient(170deg,#000 0 18%,#0000 40% 66%,#000a 90%);animation:dots 30s linear infinite}
@keyframes dots{to{background-position:70px 35px}}
#set .hex{right:-2%;bottom:-2%;width:44%;height:46%;opacity:.5;-webkit-mask:radial-gradient(80% 80% at 100% 100%,#000,#0000 70%);mask:radial-gradient(80% 80% at 100% 100%,#000,#0000 70%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 0l14 8.08v16.17L14 32.33 0 24.25V8.08zM14 32.33v16.17' fill='none' stroke='%23ff3a2e' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E") 0 0/28px 48.5px}
.slab{background:linear-gradient(160deg,#5a0a0e,#1c0306 60%,#0a0204);box-shadow:inset 0 2px 0 #ff5a4a55,inset 0 0 60px #0008;transition:transform 1.4s cubic-bezier(.6,0,.2,1),opacity 1s}
.slab.s1{left:-6%;top:-10%;width:46%;height:38%;clip-path:polygon(0 0,100% 0,78% 100%,0 70%);transform:perspective(900px) rotateX(18deg) rotateZ(-6deg)}
.slab.s2{right:-8%;top:4%;width:40%;height:22%;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);transform:perspective(900px) rotateY(-24deg);background:linear-gradient(200deg,#7a0d10,#250407 70%)}
.slab.s3{left:4%;bottom:-6%;width:52%;height:24%;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);transform:perspective(700px) rotateX(48deg);background:linear-gradient(#8a1014,#2a0407 55%,#0a0204)}
.slab.s4{right:6%;bottom:6%;width:30%;height:16%;clip-path:polygon(0 0,100% 20%,100% 100%,6% 100%);transform:perspective(700px) rotateX(40deg) rotateZ(4deg);background:linear-gradient(#5a080c,#120204)}
.slab.s5{left:30%;top:-14%;width:24%;height:30%;clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);opacity:.6;background:linear-gradient(#a3141888,#0000)}
.streak{height:2px;width:60%;background:linear-gradient(90deg,#0000,#ff6a4a,#fff,#ff6a4a,#0000);filter:blur(.6px) drop-shadow(0 0 8px #ff3a1a);transform:rotate(-14deg);opacity:.7;animation:streak 9s ease-in-out infinite}
.streak.k1{right:-10%;top:16%}.streak.k2{right:-20%;top:24%;width:40%;animation-delay:-3s;opacity:.45}.streak.k3{left:-20%;bottom:20%;width:45%;transform:rotate(-8deg);animation-delay:-6s;opacity:.35}
@keyframes streak{0%,100%{translate:0 0}50%{translate:-8% 2%}}
.rail{left:0;right:0;height:2px;background:linear-gradient(90deg,#0000,#ff2a1a 15%,#ff7a5a 50%,#ff2a1a 85%,#0000);box-shadow:0 0 14px 2px #e1060088;opacity:.8}
.rail.r1{top:var(--r1,14%)}.rail.r2{top:var(--r2,86%)}
.hud i{position:absolute;width:44px;height:44px;border:2px solid #ff3a2e88}
.hud .t1{left:5%;top:9%;border-right:0;border-bottom:0}.hud .t2{right:5%;top:9%;border-left:0;border-bottom:0}.hud .t3{left:5%;bottom:13%;border-right:0;border-top:0}.hud .t4{right:5%;bottom:13%;border-left:0;border-top:0}
.sweep{inset:0;background:linear-gradient(105deg,#0000 40%,#ff4a3a30 48%,#fff2 50%,#ff4a3a30 52%,#0000 60%);transform:translateX(-100%)}
.sweep.go{animation:sweep 1s cubic-bezier(.5,0,.3,1)}
@keyframes sweep{to{transform:translateX(100%)}}
/* each composition re-dresses the set so it never sits still between layouts */
#set.c1 .s1{transform:perspective(900px) rotateX(10deg) rotateZ(-2deg) translate(-6%,4%)}
#set.c1 .s2{transform:perspective(900px) rotateY(-34deg) translateY(30%)}
#set.c1 .s3{transform:perspective(700px) rotateX(56deg) translateX(18%)}
#set.c2 .s1{transform:perspective(900px) rotateX(24deg) rotateZ(-10deg) translateX(10%)}
#set.c2 .s4{transform:perspective(700px) rotateX(30deg) rotateZ(-3deg) translate(-40%,-20%)}
#set.c2 .s5{transform:translateX(120%)}
#set.c3 .s2{transform:perspective(900px) rotateY(-14deg) translate(-20%,40%)}
#set.c3 .s3{transform:perspective(700px) rotateX(40deg) translateX(-10%) scaleX(1.2)}
#broadcast.bleed #set{filter:brightness(.4)}

/* header plate: the show logo in a beveled pill and the clock in a red box */
#plate{position:absolute;top:2.2vh;left:50%;z-index:8;display:flex;align-items:center;gap:10px;transform:translate(-50%,-140%);transition:transform .6s cubic-bezier(.6,0,.2,1);pointer-events:none}
.multi #plate,.framed-on #plate{transform:translate(-50%,0)}
.multi #bug,.framed-on #bug{opacity:0}
#bug{transition:opacity .4s}
.plate-logo{display:flex;align-items:center;gap:.18em;padding:6px 26px 6px 22px;border-radius:999px;font:900 italic clamp(22px,3.1vw,40px)/1 var(--disp);letter-spacing:-.01em;
  background:linear-gradient(#34343c,#111116 55%,#1d1d23);box-shadow:inset 0 1px 0 #fff4,inset 0 -2px 6px #0008,0 0 0 2px #050507,0 0 0 3px #ffffff22,0 12px 30px #000c}
.plate-logo span:first-child{color:var(--red);text-shadow:0 2px 0 #5a0000}
.plate-logo span:last-child{color:#f2f2f2;text-shadow:0 2px 0 #000}
.plate-clock{background:linear-gradient(#ff3b2e,#c80500);color:#fff;padding:4px 16px;border-radius:4px;font:700 clamp(20px,2.6vw,34px)/1.1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:1px;box-shadow:inset 0 1px 0 #fff6,0 0 0 2px #050507,0 10px 24px #000a}

/* screen shake on breaking moments */
#broadcast.shake #screen{animation:shake .45s cubic-bezier(.3,.1,.3,1)}
@keyframes shake{15%{transform:translate(-10px,4px) rotate(-.4deg)}30%{transform:translate(9px,-5px) rotate(.3deg)}50%{transform:translate(-6px,3px)}70%{transform:translate(4px,-2px)}}
@media (prefers-reduced-motion:reduce){.feed{transition-duration:.01s}#set .dots,.streak{animation:none}#broadcast.shake #screen{animation:none}.sweep.go{animation:none}}
@media (max-width:760px){.plate-logo{padding:4px 14px}#plate{top:12px}.feed .tag{height:22px;font-size:12px}.hud{display:none}}
.feed.nobar .tag{display:none!important}
.feed.small .tag{left:0;right:0}

/* pregame: shown on the studio set while the first streams come up, instead of a wall of static */
#warmup{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;pointer-events:none}
.warming #warmup{display:flex}
.warming #grid,.warming #lower,.warming #ticker,.warming #bug{opacity:0}
.warming #plate{transform:translate(-50%,0)}
.wu-inner{text-align:center;padding:24px;transform:skewX(-8deg)}
.wu-inner small{display:inline-block;background:var(--yellow);color:#000;font:900 italic 18px var(--cond);letter-spacing:4px;text-transform:uppercase;padding:2px 14px}
.wu-inner h2{margin:14px 0 22px;font:900 italic clamp(40px,6.4vw,92px)/.9 var(--disp);letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 6px 0 #0008}
.wu-pips{display:flex;justify-content:center;gap:10px}
.wu-pips i{width:clamp(26px,4.4vw,56px);height:16px;background:#2a0a0c;box-shadow:inset 0 0 0 1px #ff3a2e55;transform:skewX(-14deg);transition:background .3s,box-shadow .3s}
.wu-pips i.try{animation:wu-try .7s ease-in-out infinite alternate}
.wu-pips i.on{background:linear-gradient(#ff5a4a,#e10600);box-shadow:0 0 16px #ff2a1aaa,inset 0 1px 0 #fff8;animation:none}
@keyframes wu-try{to{background:#5a1014}}
.wu-count{margin-top:16px;font:800 italic 22px var(--cond);letter-spacing:2px;text-transform:uppercase}
.wu-count b{font:900 italic 30px var(--disp);color:var(--yellow)}
#wu-status{margin:8px 0 0;font:700 16px var(--cond);letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);min-height:22px}
@media (prefers-reduced-motion:reduce){.wu-pips i.try{animation:none;background:#4a0e12}}
.warming .plate-clock{display:none}