/* TOKENS (ui-ux-pro-max consulted: Baloo 2 chosen for lane, block-based energy kept,
   its pink palette overridden by the art's own roasted-peach + bandana red)
   roast #1e130e page  panel #2c1b12  line #54382a  peach #f6d4a0  cream #fff1d6
   orange #c98550 (avatar wall)  red #c8322a (bandana)  ink #120a06
   radius 3px  borders 3px solid ink, hard offset shadows only  spacing 8/16/24/40
   motion: bars + ripples on roar, chat tick, LIVE dot blink */
@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(assets/fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(assets/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --roast:#1e130e;--panel:#2c1b12;--line:#54382a;--peach:#f6d4a0;--cream:#fff1d6;
  --orange:#c98550;--red:#c8322a;--ink:#120a06;
  --disp:"Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--roast)}
body{background:var(--roast);color:var(--cream);font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.45;padding:0 4vw 48px;min-height:100vh;
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(246,212,160,.035) 31px 32px)}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--peach);outline-offset:3px}

#js-error-banner{position:fixed;left:0;right:0;top:0;z-index:99;background:var(--red);color:#fff;font:500 14px var(--mono);padding:8px 12px}

/* channel bar */
.bar{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between;padding:24px 0 20px;max-width:1240px}
.bar-title{position:relative}
.onair{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:var(--cream);font:800 14px var(--disp);letter-spacing:.12em;padding:2px 10px 2px 8px;border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink)}
.onair i{width:10px;height:10px;border-radius:50%;background:var(--cream);animation:blink 1.4s steps(2,jump-none) infinite}
h1{font-weight:800;font-size:clamp(46px,8.2vw,104px);line-height:.88;letter-spacing:-.02em;margin-top:12px;color:var(--peach);text-shadow:5px 5px 0 var(--ink)}
h1 span{color:var(--red);margin-left:.08em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.sub{font-size:19px;color:var(--peach);margin-top:12px;max-width:30ch}
.bar-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.key{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 12px;background:var(--panel);border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);padding:6px 12px;text-align:left;max-width:100%;transition:transform .12s}
.key:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.key-label{font:800 12px var(--disp);letter-spacing:.14em;color:var(--orange)}
.key code{font:500 15px var(--mono);color:var(--cream);overflow-wrap:anywhere;user-select:all}
.key-state{font:800 12px var(--disp);letter-spacing:.12em;background:var(--peach);color:var(--ink);padding:1px 8px;border-radius:2px}
.key.copied .key-state{background:var(--red);color:var(--cream)}
.links{display:flex;gap:12px}
.links a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--peach);color:var(--ink);font:800 16px var(--disp);letter-spacing:.08em;padding:4px 14px 4px 8px;border:3px solid var(--ink);border-radius:3px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.links a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--cream)}
.links a:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}

/* live area: stage + chat */
.live{display:grid;grid-template-columns:minmax(0,max(420px,min(760px,calc(100vh - 290px)))) minmax(280px,360px);gap:24px;align-items:stretch;max-width:1240px}
.stage{position:relative;aspect-ratio:1/1;border:3px solid var(--ink);border-radius:3px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;background:var(--orange)}
.cam{width:100%;height:100%;object-fit:cover}
#wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hud{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(18,10,6,.82);color:var(--cream);font:500 14px var(--mono);padding:3px 10px;border-radius:2px;letter-spacing:.04em}
.hud b{font-weight:500;color:var(--peach)}
.hud-tl{left:12px;top:12px}
.hud-bl{left:12px;bottom:12px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.4s steps(2,jump-none) infinite}
.mic{position:absolute;left:69%;top:64%;width:31%;height:36%;background:transparent;border:0;border-radius:40% 40% 8% 8%}
.mic:hover{background:rgba(255,241,214,.12)}
.mic:active{background:rgba(200,50,42,.3)}
.mic-tag{position:absolute;right:62%;bottom:56%;white-space:nowrap;background:var(--cream);color:var(--ink);font:800 13px var(--disp);letter-spacing:.1em;padding:2px 10px;border:3px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);animation:nudge 2.2s ease-in-out infinite}
.mic-tag::after{content:"";position:absolute;right:-10px;top:50%;width:12px;height:12px;background:var(--cream);border-right:3px solid var(--ink);border-top:3px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.mic.used .mic-tag{display:none}
.flash{position:absolute;inset:0;display:grid;place-items:center;background:var(--red);opacity:0;pointer-events:none}
.flash span{font:800 clamp(80px,22vw,190px)/1 var(--disp);color:var(--cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;letter-spacing:.02em;transform:rotate(-6deg)}
.stage.roar .flash{animation:flash .55s ease-out}
.stage.roar .cam{animation:shake .45s linear}

/* chat */
.chat{display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--ink);border-radius:3px;box-shadow:8px 8px 0 var(--ink);min-height:360px;max-height:max(420px,min(760px,calc(100vh - 290px)))}
.chat-head{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:3px solid var(--ink);background:var(--red);font-weight:800;letter-spacing:.12em;font-size:14px}
.chat-head span{font:500 13px var(--mono);letter-spacing:0}
.chat-log{list-style:none;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 14px;gap:7px}
.chat-log li{font-size:16px;line-height:1.3;overflow-wrap:anywhere;animation:rise .25s ease-out}
.chat-log time{font:400 12px var(--mono);color:#a98b74;margin-right:6px}
.chat-log .u{font-weight:800;margin-right:6px}
.chat-log .sys{color:var(--peach);font-style:normal}
.chat-input{border-top:3px solid var(--ink);padding:10px 14px;font:400 13px var(--mono);color:#a98b74;background:var(--roast)}

/* below the fold: three different shapes, no card grid */
.block{max-width:1240px;margin-top:64px}
h2{font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:.02em;color:var(--peach);margin-bottom:16px;display:inline-block;border-bottom:6px solid var(--red);line-height:1.05}
.sched{width:min(100%,860px)}
.sched-table{width:100%;border-collapse:collapse;font:500 15px var(--mono)}
.sched-table th{text-align:left;font:800 13px var(--disp);letter-spacing:.14em;color:var(--orange);padding:6px 10px;border-bottom:3px solid var(--ink)}
.sched-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.sched-table td:nth-child(3){font-family:var(--disp);font-weight:600;font-size:18px}
.sched-table td:nth-child(1){color:var(--peach)}
.sched-table tr.today{background:rgba(200,50,42,.22)}
.sched-table tr.today td:first-child::after{content:" NOW";color:var(--red);font-weight:500}
.tag{display:inline-block;background:var(--red);color:var(--cream);font:800 12px var(--disp);letter-spacing:.12em;padding:0 8px;border-radius:2px}
.tag-off{background:var(--line);color:var(--peach)}
.faq{width:min(100%,720px);margin-left:8vw}
details{border-top:3px solid var(--ink);padding:10px 0;background:linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat}
summary{font-size:20px;cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font:800 22px var(--disp);color:var(--red);width:16px}
details[open] summary::before{content:"-"}
details p{margin:8px 0 4px 28px;color:var(--peach);font-size:17px;max-width:52ch}
.foot{max-width:1240px;margin-top:64px;padding-top:16px;border-top:3px solid var(--ink);display:flex;justify-content:space-between;gap:16px;font:400 13px var(--mono);color:#a98b74}
.noscript{margin-top:16px;color:var(--peach)}

@keyframes blink{50%{opacity:.15}}
@keyframes nudge{50%{transform:rotate(-3deg) translateX(-6px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-9px,5px) scale(1.03)}40%{transform:translate(8px,-6px) scale(1.03)}60%{transform:translate(-6px,-4px)}80%{transform:translate(5px,5px)}}

@media (max-width:920px){
  .live{grid-template-columns:minmax(0,1fr)}
  .chat{min-height:0;height:300px;max-height:none}
  .bar-side{width:100%}
  .key{width:100%}
  .faq{margin-left:0}
}
@media (max-width:480px){
  body{font-size:16px;padding:0 14px 40px}
  .key{grid-template-columns:1fr auto}
  .key-label{grid-column:1/3}
  .key code{font-size:13px}
  .sched-table td:nth-child(2){white-space:nowrap}
  .sched-table th:nth-child(4),.sched-table td:nth-child(4){display:none}
  .stage{box-shadow:5px 5px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .stage.roar .flash{opacity:.85}
}