:root{
  --paper:#efe7d6;
  --cream:#fbf3df;
  --ink:#173f78;
  --blue:#1e5fa5;
  --deep:#123d72;
  --red:#d84839;
  --yellow:#e9b63f;
  --green:#1a8b63;
  --purple:#7b1e9e;
  --line:#2f4b6e;
  --shadow:rgba(29,32,40,.20);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#d9d0c0;color:#153a68;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC","Helvetica Neue",sans-serif}
body{overflow:hidden}
button{font:inherit}
img{display:block;max-width:100%}
.app{
  width:min(100vw,430px);
  height:100dvh;
  margin:0 auto;
  background:var(--paper);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 32px rgba(0,0,0,.18);
}
.pages{
  display:flex;
  width:100%;
  height:calc(100dvh - 58px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.pages::-webkit-scrollbar{display:none}
.page{
  min-width:100%;
  height:100%;
  scroll-snap-align:start;
  position:relative;
  overflow-y:auto;
  padding-bottom:18px;
}
.broadcast{
  position:relative;
  width:100%;
  aspect-ratio:9/10.5;
  overflow:hidden;
  background:#2b5e9b;
}
.studio-bg,.studio-board,.studio-desk,.presenter{position:absolute}
.studio-bg{inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.studio-brand{
  position:absolute;z-index:8;left:4.5%;top:4.2%;width:46%;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
}
.network-logo{width:38%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18))}
.program-logo{width:100%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.16))}
.studio-meta{
  position:absolute;z-index:8;right:4.5%;top:5%;
  background:rgba(250,243,224,.94);
  border:2px solid #173f78;border-radius:14px;
  padding:7px 10px 6px;text-align:right;
  box-shadow:3px 3px 0 rgba(23,63,120,.16);
}
.studio-meta b{display:block;font-size:15px;line-height:1}
.studio-meta span{display:block;font-size:10px;margin-top:3px}
.ornament{position:absolute;pointer-events:none}
.studio-star{z-index:8;width:23px;right:27%;top:13%}
.studio-curve{z-index:8;width:44px;right:3%;top:16%}
.studio-board{z-index:3;right:4.8%;top:21%;width:24%}
.studio-board-data{
  position:absolute;z-index:4;right:7%;top:23.2%;width:18.3%;height:17%;
  display:grid;grid-template-columns:34% 66%;grid-template-rows:auto auto auto;
  align-items:center;text-align:center;color:#163d72;transform:rotate(.4deg);
}
.studio-board-data img{width:34px;height:30px;object-fit:contain;grid-row:1/3;align-self:center;justify-self:center}
.studio-board-data strong{font-size:24px;line-height:1}
.studio-board-data span{font-size:8px;font-weight:800}
.studio-board-data small{grid-column:1/3;font-size:7px;font-weight:800}
.studio-presenters{position:absolute;z-index:5;left:7%;right:8%;bottom:19%;height:48%}
.studio-presenters .presenter{bottom:0;object-fit:contain;object-position:bottom center}
.studio-sheep{left:0;width:27%}
.studio-anchor{left:26%;width:25%}
.studio-cow{left:49%;width:28%}
.studio-rooster{right:0;width:24%}
.studio-desk{z-index:6;left:-1%;bottom:-2%;width:102%}
.studio-effects{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none}
.fx-rain,.fx-snow,.fx-wind{position:absolute;display:block;pointer-events:none}
.fx-rain{top:-20%;width:2px;height:34px;background:rgba(255,255,255,.72);transform:rotate(10deg);animation:rainfall 1s linear infinite}
.fx-snow{top:-6%;width:7px;height:7px;border-radius:50%;background:#fff;animation:snowfall 4s linear infinite}
.fx-wind{left:-20%;width:42%;height:2px;background:rgba(255,255,255,.65);animation:windline 1.8s linear infinite}
@keyframes rainfall{to{transform:translate(22px,650px) rotate(10deg)}}
@keyframes snowfall{to{transform:translate(25px,650px) rotate(180deg)}}
@keyframes windline{to{transform:translateX(650px)}}

.subtitle-card{
  margin:10px 14px 8px;
  background:#152c49;color:#fff4d2;
  border-radius:18px;padding:12px 14px 11px;
  box-shadow:0 4px 0 rgba(17,35,58,.16);
  position:relative;
}
.subtitle-card b{display:block;font-size:17px;line-height:1.38;font-weight:800;letter-spacing:.01em}
.subtitle-card small{display:block;margin-top:7px;font-size:10px;opacity:.78}
.subtitle-card .speak-btn{
  position:absolute;right:10px;bottom:8px;border:0;border-radius:999px;background:#f3c448;color:#173f78;
  font-size:10px;font-weight:900;padding:5px 8px;
}
.vocab-word{border-bottom:1px dotted rgba(255,255,255,.65)}
.review-word{background:rgba(233,182,63,.2)}

.weather-strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  padding:0 14px;margin-top:8px;
}
.weather-strip div{
  min-width:0;background:#f8f0dd;border:1.5px solid rgba(23,63,120,.22);border-radius:12px;
  padding:7px 4px;text-align:center;
}
.weather-strip span{display:block;font-size:8px;font-weight:700}
.weather-strip b{display:block;font-size:11px;margin-top:2px}
.hourly{
  display:flex;gap:8px;overflow-x:auto;padding:10px 14px 3px;scrollbar-width:none;
}
.hourly::-webkit-scrollbar{display:none}
.hour{
  flex:0 0 54px;background:#f8f0dd;border-radius:13px;padding:7px 5px;text-align:center;
  border:1.5px solid rgba(23,63,120,.18);
}
.hour span{font-size:8px}.hour img{width:27px;height:24px;object-fit:contain;margin:3px auto}.hour strong{font-size:11px}.hour em{font-style:normal;font-size:7px;opacity:.7}

.reel-page,.agenda-page{background:var(--paper);padding-top:10px}
.reel-shell,.agenda-shell{
  width:calc(100% - 20px);height:61vh;min-height:485px;max-height:590px;margin:0 auto;
  position:relative;overflow:hidden;border-radius:26px;
  background:
    radial-gradient(circle at 15% 12%,rgba(255,255,255,.42),transparent 24%),
    #efe5cf;
  border:2px solid rgba(23,63,120,.20);
  box-shadow:0 8px 22px rgba(27,38,54,.14);
}
.reel-shell.dark{background:#2f6198}
.reel-shell::before,.agenda-shell::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11px;background:#173f78;
}
.reel-shell::after,.agenda-shell::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:#e9b63f;
}
.reel-title{
  position:absolute;z-index:4;left:7%;top:7%;width:52%;
  background:#fff6e4;border:3px solid #173f78;border-radius:17px;
  padding:10px 12px 9px;box-shadow:4px 4px 0 rgba(23,63,120,.14);
}
.reel-title.inverse{background:#f7edd7}
.reel-title span{display:block;text-align:center;font-size:18px;font-weight:950;line-height:1}
.reel-title img{width:46%;height:7px;object-fit:fill;margin:5px auto 0}
.reel-panel{
  position:absolute;z-index:2;left:7%;top:20%;width:66%;height:55%;
  background:#fbf3df;border:4px solid #173f78;border-radius:24px;
  box-shadow:5px 6px 0 rgba(23,63,120,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 14px 16px;overflow:hidden;
}
.panel-right{left:auto;right:7%}
.paper-label{height:28px;max-width:78%;object-fit:contain;margin-bottom:8px}
.paper-label.wide{height:25px;max-width:88%}
.metric-lockup{display:flex;align-items:center;justify-content:center;gap:9px;width:90%}
.weather-icon{width:58px;height:52px;object-fit:contain}
.paper-number{height:62px;display:flex;align-items:flex-start;justify-content:center}
.paper-number.large{height:74px}
.paper-number img{height:57px;margin:0 -1px}
.paper-number.large img{height:69px}
.paper-number img.paper-degree{height:21px;margin:3px 0 0 1px}
.paper-number img.paper-percent{height:40px}
.paper-number img.paper-minus{height:13px;margin-top:23px}
.board-line{font-size:12px;line-height:1.2;font-weight:850;text-align:center;margin:7px 0 9px}
.board-line.emphasis{font-size:13px;margin:2px 0 3px}
.mini-cards{width:88%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-cards div{
  background:#fff9e9;border:2px solid rgba(23,63,120,.24);border-radius:12px;
  padding:7px 6px;text-align:center;
}
.mini-cards span{display:block;font-size:8px;font-weight:800}.mini-cards b{display:block;font-size:11px;margin-top:2px}
.reel-presenter{position:absolute;z-index:5;bottom:0;height:39%;object-fit:contain;object-position:bottom}
.presenter-right{right:-3%;transform:translateX(14%)}
.presenter-left{left:-3%;transform:translateX(-14%)}
.o-star{left:6%;top:8%;width:19px}
.o-spark{right:5%;top:7%;width:24px}
.o-burst{left:5%;top:7%;width:24px}
.o-exclaim{right:5%;top:7%;width:15px}

.bars{width:90%;height:66px;display:flex;align-items:end;justify-content:center;gap:7px;margin-top:6px}
.barcol{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:7px}
.barcol b{font-size:8px;margin-bottom:2px}.barcol span{font-size:7px;margin-top:3px}
.bar{width:12px;max-height:43px;min-height:3px;background:#4f9fd2;border-radius:7px 7px 2px 2px;border:1px solid rgba(23,63,120,.2)}

.agenda-shell{
  background:
    radial-gradient(circle at 80% 10%,rgba(255,255,255,.65),transparent 30%),
    #e9e2d1;
}
.agenda-top{
  position:absolute;z-index:4;left:6%;right:6%;top:5%;height:15%;
  display:flex;align-items:center;gap:10px;
}
.agenda-logo{width:56%;max-height:74px;object-fit:contain;object-position:left center}
.agenda-arrow{width:55px;right:22%;top:34%}
.refresh-btn{
  margin-left:auto;border:0;border-radius:999px;background:#173f78;color:#fff8df;padding:8px 10px;font-size:10px;font-weight:850
}
.agenda-board{
  position:absolute;z-index:2;left:6%;right:6%;top:21%;bottom:8%;
  background:#fbf3df;border:3px solid #173f78;border-radius:24px;
  box-shadow:5px 6px 0 rgba(23,63,120,.14);
  padding:16px 14px 80px;overflow:auto;
}
.agenda-items,.events-block{display:flex;flex-direction:column;gap:9px}
.agenda-item,.event-item{
  display:grid;grid-template-columns:58px 1fr;gap:9px;align-items:center;
  background:#fff9ea;border:1.5px solid rgba(23,63,120,.22);border-radius:14px;padding:9px 10px;
}
.agenda-item .time,.event-item .time{font-size:11px;font-weight:950;color:#d84839}
.agenda-item strong,.event-item strong{display:block;font-size:11px;line-height:1.15}
.agenda-item small,.event-item small{display:block;font-size:8.5px;opacity:.7;margin-top:2px}
.agenda-item.job{border-left:6px solid #e9b63f}
.agenda-item.gym{border-left:6px solid #1a8b63}
.agenda-item.weather{border-left:6px solid #4f9fd2}
.events-block{margin-top:13px;padding-top:12px;border-top:2px dashed rgba(23,63,120,.24)}
.events-logo{width:38%;max-height:46px;object-fit:contain;object-position:left center;margin-bottom:2px}
.agenda-anchor{
  position:absolute;z-index:5;right:-6%;bottom:0;height:33%;object-fit:contain;object-position:bottom;
}
.agenda-star{z-index:5;width:24px;right:7%;top:18%}
.agenda-asterisk{z-index:5;width:21px;left:4%;bottom:6%}

.show-controls{
  height:58px;display:flex;align-items:center;justify-content:space-between;padding:8px 13px 10px;
  background:#eee4d2;border-top:1px solid rgba(23,63,120,.15);
}
.page-dots{display:flex;gap:5px}
.page-dots button{border:0;background:transparent;color:#173f78;font-size:14px;padding:4px}
.audio-toggle{
  border:0;border-radius:999px;background:#173f78;color:#fff3cc;font-weight:900;font-size:11px;padding:9px 12px
}
.vocab-popover{
  position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(82vw,330px);background:#fff4dd;border:3px solid #173f78;border-radius:22px;padding:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.22)
}
.vocab-close{position:absolute;right:8px;top:7px;border:0;background:none;font-size:24px}
.vocab-popover b{display:block;font-size:28px}.vocab-popover span{display:block;font-weight:800;margin-top:4px}.vocab-popover p{font-size:14px}.vocab-popover small{opacity:.65}

@media(max-width:380px){
  .studio-brand{width:44%;top:4%}
  .studio-meta{right:4%;top:4.8%;padding:6px 8px}
  .subtitle-card b{font-size:16px}
  .reel-shell,.agenda-shell{min-height:475px;height:60vh}
  .reel-title span{font-size:17px}
  .reel-panel{height:56%;top:19.5%}
  .paper-label{height:26px}
  .weather-icon{width:54px;height:49px}
  .paper-number{height:59px}.paper-number img{height:54px}
  .agenda-item,.event-item{grid-template-columns:54px 1fr}
}


/* === v35 true 90s broadcast subtitles === */
.broadcast .subtitle-card,
.reel-shell .subtitle-card,
.agenda-shell .subtitle-card{
  position:absolute;
  z-index:20;
  left:5%;
  right:5%;
  bottom:3.8%;
  margin:0;
  padding:0 4px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#ffd84a;
  text-align:center;
  pointer-events:auto;
}
.broadcast .subtitle-card b,
.reel-shell .subtitle-card b,
.agenda-shell .subtitle-card b{
  display:block;
  font-size:21px;
  line-height:1.22;
  font-weight:900;
  letter-spacing:.01em;
  color:#ffd84a;
  -webkit-text-stroke:1.8px #111;
  paint-order:stroke fill;
  text-shadow:
    -2px -2px 0 #111,
     2px -2px 0 #111,
    -2px  2px 0 #111,
     2px  2px 0 #111,
     0 3px 0 rgba(0,0,0,.7);
}
.broadcast .subtitle-card small,
.reel-shell .subtitle-card small,
.agenda-shell .subtitle-card small{
  display:block;
  margin-top:5px;
  font-size:9px;
  font-weight:800;
  color:#ffd84a;
  -webkit-text-stroke:.8px #111;
  text-shadow:1px 1px 0 #111,-1px -1px 0 #111;
  opacity:.95;
}
.broadcast .subtitle-card .speak-btn,
.reel-shell .subtitle-card .speak-btn,
.agenda-shell .subtitle-card .speak-btn{
  position:absolute;
  right:0;
  bottom:-28px;
  border:2px solid #111;
  border-radius:999px;
  background:#ffd84a;
  color:#111;
  font-size:9px;
  font-weight:900;
  padding:4px 7px;
  -webkit-text-stroke:0;
  text-shadow:none;
}
.reel-shell .subtitle-card,
.agenda-shell .subtitle-card{bottom:2.7%}
@media(max-width:380px){
  .broadcast .subtitle-card b,
  .reel-shell .subtitle-card b,
  .agenda-shell .subtitle-card b{font-size:19px;-webkit-text-stroke:1.6px #111}
}


/* === v36 subtitle cleanup: one clean 90s-TV line === */
.broadcast .subtitle-card small,
.reel-shell .subtitle-card small,
.agenda-shell .subtitle-card small{
  display:none!important;
}
.broadcast .subtitle-card .speak-btn,
.reel-shell .subtitle-card .speak-btn,
.agenda-shell .subtitle-card .speak-btn{
  right:1%;
  bottom:calc(100% + 9px);
  padding:5px 8px;
  font-size:9px;
  border:2px solid #111;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.broadcast .subtitle-card{bottom:5.2%}
.reel-shell .subtitle-card,
.agenda-shell .subtitle-card{bottom:4.2%}


/* === v37 studio board realignment === */
.studio-board-data{
  right:6.8%;
  top:25.8%;
  width:18.7%;
  height:31.5%;
  display:grid;
  grid-template-columns:38% 62%;
  grid-template-rows:42% 23% 35%;
  align-items:center;
  justify-items:center;
  text-align:center;
  transform:perspective(520px) rotateY(-5deg) rotateZ(.45deg) skewY(-.35deg);
  transform-origin:50% 50%;
}
.studio-board-data img{
  width:38px;
  height:34px;
  object-fit:contain;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
}
.studio-board-data strong{
  grid-column:2;
  grid-row:1;
  font-size:25px;
  line-height:1;
  align-self:center;
}
.studio-board-data span{
  grid-column:1/3;
  grid-row:2;
  font-size:9px;
  font-weight:900;
  align-self:center;
}
.studio-board-data small{
  grid-column:1/3;
  grid-row:3;
  font-size:8px;
  font-weight:900;
  align-self:start;
  padding-top:7px;
}


/* === v38 studio board: align data to measured cream face === */
.studio-board-wrap{
  position:absolute;
  z-index:3;
  right:4.8%;
  top:21%;
  width:24%;
  aspect-ratio:175/389;
}
.studio-board-wrap .studio-board{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
}
.studio-board-face{
  position:absolute;
  left:2.3%;
  top:25.2%;
  width:81.1%;
  height:66.6%;
  overflow:hidden;
  transform:perspective(520px) rotateY(-4.5deg) rotateZ(.35deg);
  transform-origin:50% 50%;
}
.studio-board-face .studio-board-data{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:40% 60%;
  grid-template-rows:43% 24% 33%;
  align-items:center;
  justify-items:center;
  text-align:center;
  color:#173f78;
  transform:none;
}
.studio-board-face #boardIcon{
  grid-column:1;
  grid-row:1;
  width:76%;
  height:70%;
  object-fit:contain;
  align-self:center;
  justify-self:center;
}
.studio-board-face #boardTemp{
  grid-column:2;
  grid-row:1;
  font-size:24px;
  line-height:1;
  font-weight:950;
  align-self:center;
  justify-self:center;
}
.studio-board-face #boardCond{
  grid-column:1/3;
  grid-row:2;
  font-size:10px;
  line-height:1;
  font-weight:900;
  align-self:center;
}
.studio-board-face #boardHilow{
  grid-column:1/3;
  grid-row:3;
  font-size:8px;
  line-height:1.05;
  font-weight:900;
  align-self:start;
  padding-top:7px;
}


/* === v39 board face layer fix === */
.studio-board-wrap .studio-board{z-index:1!important}
.studio-board-face{z-index:2!important}


/* === v40 subtitle safe-area fix: keep faces clear === */
.broadcast .subtitle-card,
.reel-shell .subtitle-card,
.agenda-shell .subtitle-card{
  left:4%;
  right:4%;
  bottom:1.2%!important;
  padding:0 3px;
  max-height:22%;
  overflow:visible;
}
.broadcast .subtitle-card b,
.reel-shell .subtitle-card b,
.agenda-shell .subtitle-card b{
  font-size:19px;
  line-height:1.16;
}
.broadcast .subtitle-card .speak-btn,
.reel-shell .subtitle-card .speak-btn,
.agenda-shell .subtitle-card .speak-btn{
  right:1%;
  bottom:calc(100% + 5px);
}
/* keep presenters above board but out of subtitle safe zone */
.studio-presenters{bottom:22%!important;height:45%!important}
.sheep-reel,.rooster-reel{bottom:7%!important;height:32%!important}
.cow-reel{bottom:7%!important;height:32%!important}
.agenda-anchor{bottom:6%!important;height:31%!important}

@media(max-width:380px){
  .broadcast .subtitle-card b,
  .reel-shell .subtitle-card b,
  .agenda-shell .subtitle-card b{
    font-size:18px;
    line-height:1.14;
  }
  .studio-presenters{bottom:22%!important;height:44%!important}
}


/* === v41 studio rooster clearance + camera gaze composition === */
.studio-rooster{
  right:-2.2%!important;
  width:23%!important;
  bottom:-3.5%!important;
}


/* === v42 persistent reel network bugs === */
.reel-bugs{
  position:absolute;
  z-index:8;
  left:4.5%;
  right:4.5%;
  top:3.5%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  pointer-events:none;
}
.reel-bugs img{
  object-fit:contain;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.14));
}
.bug-ribo{width:15%}
.bug-weather{width:27%}
.reel-title{top:10.5%}
.reel-panel{top:23%}
.agenda-top{top:8.5%}
.agenda-board{top:24%}


/* === v43 dedicated subtitle-safe zone for expanded scripts === */
.broadcast .subtitle-card,
.reel-shell .subtitle-card,
.agenda-shell .subtitle-card{
  left:4%;
  right:4%;
  bottom:.6%!important;
  max-height:14%;
  min-height:10%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 3px 7px;
  overflow:visible;
}
.broadcast .subtitle-card b,
.reel-shell .subtitle-card b,
.agenda-shell .subtitle-card b{
  width:100%;
  font-size:18px;
  line-height:1.12;
  text-align:center;
}
.broadcast .subtitle-card .speak-btn,
.reel-shell .subtitle-card .speak-btn,
.agenda-shell .subtitle-card .speak-btn{
  right:1%;
  bottom:calc(100% + 3px);
}

/* protect the caption zone: visual content stays above it */
.studio-presenters{
  bottom:24%!important;
  height:43%!important;
}
.reel-presenter{
  bottom:8.5%!important;
  height:30.5%!important;
}
.agenda-anchor{
  bottom:8.5%!important;
  height:29.5%!important;
}

/* keep main reel information comfortably above captions */
.reel-panel{
  top:22.5%;
  height:51%;
}
.agenda-board{
  bottom:14%;
}

@media(max-width:380px){
  .broadcast .subtitle-card b,
  .reel-shell .subtitle-card b,
  .agenda-shell .subtitle-card b{
    font-size:17px;
    line-height:1.1;
  }
  .studio-presenters{bottom:24%!important;height:42%!important}
  .reel-presenter{bottom:8.5%!important;height:30%!important}
}