:root{--bg:#0e0e10;--pan:#17171b;--ink:#ece8df;--amber:#f2a516;--red:#e04545;--grn:#3ccf7a;--mut:#8b8790}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 Georgia,serif}
header{display:flex;align-items:center;gap:16px;padding:10px 18px;border-bottom:2px solid var(--amber);flex-wrap:wrap}
.logo{font:800 26px/1 Impact,sans-serif;letter-spacing:2px}.logo span{color:var(--amber)}.tag{color:var(--mut);font-style:italic}.ctl{margin-left:auto}
button,select,input{background:#25252b;color:var(--ink);border:1px solid #333;border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
main{display:grid;grid-template-columns:2fr 300px;grid-template-rows:auto 1fr;gap:12px;padding:12px}
.stage{display:grid;grid-template-columns:300px 1fr;gap:12px}.board{grid-column:1}.list{grid-column:2;grid-row:1/3;background:var(--pan);border-radius:10px;padding:10px;max-height:calc(100vh - 90px);overflow:auto}
.host,.window,.board{background:var(--pan);border-radius:10px;padding:12px;position:relative}
#avatar{width:100%;max-height:260px}#mouth{transition:ry .07s}.talking #brows{animation:brow 1.6s infinite}@keyframes brow{50%{transform:translateY(-3px)}}
#eyes{animation:blink 4s infinite;transform-origin:100px 95px}@keyframes blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.1)}}
.nameplate{background:var(--amber);color:#111;font:700 14px Impact,sans-serif;padding:4px 8px;letter-spacing:1px}.nameplate small{font:italic 11px Georgia;display:block}
.caption{margin-top:8px;min-height:60px;font-size:13px;color:#cfc9bd}.pb{display:flex;gap:6px;margin-top:6px}#voice{max-width:120px}
.wbar{display:flex;justify-content:space-between;color:var(--mut);font-size:12px;text-transform:uppercase;margin-bottom:6px}.wbar a{color:var(--amber)}
.story iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:6px}.story h3{margin:.2em 0;font-size:22px}.story p{color:#cfc9bd;max-height:220px;overflow:auto}
h2{font:700 16px Impact,sans-serif;letter-spacing:2px;margin:0 0 8px;color:var(--amber)}
.grade{display:inline-block;min-width:44px;text-align:center;background:var(--red);color:#fff;border-radius:6px;padding:0 8px;font-size:20px}
.grade.A{background:var(--grn)}.grade.B{background:#8fc93a}.grade.C{background:var(--amber);color:#111}
.take{font-style:italic;color:var(--amber);margin-bottom:8px}
#chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:10px}
.meter{background:#222;border-radius:6px;padding:8px}.meter b{font:600 12px sans-serif;text-transform:uppercase;color:var(--mut)}
.bar{height:12px;background:#333;border-radius:6px;overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;width:0;transition:width 1.2s ease;background:linear-gradient(90deg,var(--red),var(--amber),var(--grn))}
.arg{border-left:4px solid var(--amber);background:#1d1d22;padding:10px 12px;margin:8px 0;border-radius:0 8px 8px 0;opacity:0;transform:translateY(8px);transition:.5s}.arg.show{opacity:1;transform:none}
.arg.on{outline:2px solid var(--amber)}.chips span{display:inline-block;font:700 11px sans-serif;padding:2px 7px;border-radius:10px;margin:2px 4px 2px 0}
.y{background:#1f5136;color:#9ff0c0}.n{background:#5a1d1d;color:#ffb3b3}.p{background:#5a4513;color:#ffe0a0}
.arg ol{margin:4px 0 4px 18px;padding:0}.concl{font-weight:bold}.fal{background:#2a1515;border-radius:6px;padding:6px 8px;margin:4px 0;font-size:13px}.fal q{color:#ffb3b3}
.red{color:var(--red);font-family:'Comic Sans MS',cursive;font-size:15px;margin-top:6px;transform:rotate(-.6deg)}
.seg{padding:8px;border-radius:6px;cursor:pointer;border-bottom:1px solid #222}.seg:hover,.seg.on{background:#25252b}.seg small{color:var(--mut);display:block}
.seg .g{float:right;font:700 13px Impact}.demo{color:var(--amber);font-weight:bold}#q{width:100%;margin-bottom:6px}
.emb header .tag,.emb .list{display:none}.emb main{grid-template-columns:1fr}
@media(max-width:900px){main,.stage{grid-template-columns:1fr}.list{grid-row:auto;grid-column:1}}

#tap{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:9}#tap button{font:700 28px Impact,sans-serif;padding:18px 34px;background:var(--amber);color:#111;border:0}
.menu{display:none}
/* ===== Embed: compact 16:9 broadcast layout, no inner scrolling ===== */
.emb{height:100vh;overflow:hidden;font-size:clamp(10px,1.35vw,15px)}
.emb header{padding:.4em .8em;gap:.8em;border-bottom-width:1px}.emb .logo{font-size:1.6em}.emb .ctl,.emb .tag{display:none}
.emb .menu{display:inline-block;margin-left:auto;padding:.3em .7em;font-size:.9em}
.emb main{height:calc(100vh - 2.6em);display:grid;grid-template-columns:27% 1fr 1fr;grid-template-rows:1fr auto;gap:.6em;padding:.6em;overflow:hidden}
.emb .stage{display:contents}
.emb .host{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;padding:.6em}
.emb #avatar{flex:1;min-height:0;max-height:none}.emb .nameplate{font-size:.85em}.emb .pb{margin-top:.4em}.emb #voice{display:none}
.emb .window{grid-column:2;grid-row:1;min-height:0;overflow:hidden;padding:.6em;display:flex;flex-direction:column}
.emb .story{min-height:0;overflow:hidden}.emb .story h3{font-size:1.1em;margin:.3em 0}.emb .story p{max-height:none;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em}
.emb .board{grid-column:3;grid-row:1;min-height:0;overflow:hidden;padding:.6em;display:flex;flex-direction:column}
.emb .board h2{font-size:1em}.emb .take{font-size:.85em;margin-bottom:.4em}
.emb #chart{grid-template-columns:1fr 1fr;gap:.35em;margin-bottom:.4em}.emb .meter{padding:.35em}.emb .meter b{font-size:.75em}.emb .bar{height:.6em}
.emb #args{flex:1;min-height:0;overflow:hidden}.emb #args>small{display:none}
.emb .arg{display:none;margin:0;padding:.5em .7em;font-size:.85em}.emb .arg.on{display:block;outline:0}
.emb .arg ol{margin:.2em 0 .2em 1.2em}.emb .fal:nth-of-type(n+3){display:none}
.emb .caption{grid-column:1/-1;grid-row:2;position:static;margin:0;min-height:0;background:#000;color:#fff;border-left:4px solid var(--amber);padding:.4em .8em;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb .list{display:none}
.emb.menu-open .list{display:block;position:fixed;top:2.6em;right:.6em;width:min(340px,80vw);max-height:70vh;overflow:auto;z-index:8;box-shadow:0 8px 30px #000}
.emb #q{display:none}
@media (max-aspect-ratio:1/1){ /* portrait / mobile */
  .emb main{grid-template-columns:38% 1fr;grid-template-rows:auto 1fr auto}
  .emb .host{grid-column:1;grid-row:1}.emb .window{grid-column:2;grid-row:1}
  .emb .board{grid-column:1/-1;grid-row:2}.emb .caption{grid-row:3;white-space:normal}
}
body:not(.emb) main{grid-template-rows:auto auto 1fr}body:not(.emb) main>.caption{grid-column:1;grid-row:2;background:var(--pan);border-radius:10px;padding:8px 12px;min-height:0}
body:not(.emb) .board{grid-row:3}body:not(.emb) .list{grid-row:1/4}