/* Interactive format demos. Loaded by /experience and /ingameaudio,
   alongside styles.css. Each demo is scoped to its own wrapper class. */

/* ---------- demo pages ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px)}
.jump a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rule);border-radius:999px;padding:10px 16px;color:var(--gray-2);transition:.15s}
.jump a:hover{color:var(--paper);border-color:var(--rule-bright)}
.jump a i{font-style:normal;color:var(--red);margin-right:7px}
.soundnote{display:flex;align-items:center;gap:11px;margin-top:clamp(24px,3vw,34px);padding:13px 16px;
  border:1px solid var(--rule);border-radius:12px;max-width:62ch;color:var(--gray-2);font-size:14px;line-height:1.5}
.soundnote b{color:var(--paper);font-weight:600}
.soundnote .ic{flex:none;width:34px;height:34px;border:1px solid var(--rule-bright);color:var(--red);
  display:grid;place-items:center;border-radius:50%}
.soundnote .ic svg{width:17px;height:17px;display:block}
section[id]{scroll-margin-top:18px}

/* ---------- ctv ---------- */
/* ---------- CTV demo ---------- */
.ctv{--ad:#F5B731;--good:#4ADE80;--warn:#FBBF24;--panel:var(--ink-2);--panel2:var(--ink-3)}
.ctv .tabs{display:flex;gap:8px;flex-wrap:wrap}
.ctv .tab{font-family:var(--display);font-weight:600;font-size:14px;background:var(--panel);
  color:var(--gray-2);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.2s}
.ctv .tab:hover{color:var(--paper)}
.ctv .tab.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.ctv .modeDesc{color:var(--gray-2);min-height:50px;max-width:700px;margin:14px 0 24px;font-size:15px;line-height:1.6}
.ctv .modeDesc b{color:var(--paper);font-weight:600}
.ctv .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:30px;align-items:start}
@media(max-width:980px){.ctv .grid{grid-template-columns:minmax(0,1fr)}}

/* the set */
.ctv .set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2vw,24px);align-items:start}
@media(max-width:520px){.ctv .set{grid-template-columns:minmax(0,1fr)}.ctv .remote{display:none}}
.ctv .tv{position:relative;border-radius:10px;padding:9px 9px 0;background:#070707;
  border:1px solid var(--rule-bright);box-shadow:0 34px 80px rgba(247,4,4,.12)}
.ctv .panelscreen{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000}
.ctv .panelscreen svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .4s}
.ctv .panelscreen svg.hide{opacity:0}
.ctv .stand{height:16px;display:flex;justify-content:center;align-items:flex-end}
.ctv .stand::after{content:"";width:34%;height:7px;background:#141414;border-radius:0 0 7px 7px}
.ctv .foot{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);text-align:center;margin-top:11px}

.ctv .ovl{position:absolute;inset:0;pointer-events:none;z-index:3}
.ctv .showtag{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:rgba(250,250,250,.78);text-transform:uppercase;transition:.3s}
.ctv .adbadge{position:absolute;right:13px;top:12px;display:flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.72);border:1px solid rgba(245,183,49,.5);border-radius:999px;padding:4px 11px 4px 4px;
  font-family:var(--mono);font-size:10px;color:var(--paper);opacity:0;transition:.3s;white-space:nowrap}
.ctv .adbadge.show{opacity:1}
.ctv .adbadge b{background:var(--ad);color:#000;border-radius:999px;padding:2px 7px;font-weight:500}
.ctv .noskip{position:absolute;right:14px;top:40px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:rgba(250,250,250,.5);opacity:0;transition:.3s}
.ctv .noskip.show{opacity:1}
.ctv .podrow{position:absolute;left:14px;right:14px;bottom:13px;display:flex;gap:4px;opacity:0;transition:.3s}
.ctv .podrow.show{opacity:1}
.ctv .podrow .sl{flex:1;height:4px;border-radius:3px;background:rgba(250,250,250,.22);overflow:hidden}
.ctv .podrow .sl i{display:block;height:100%;width:0;background:rgba(250,250,250,.75)}
.ctv .podrow .sl.mine i{background:linear-gradient(90deg,var(--red),var(--ad))}
.ctv .podrow .sl.mine{outline:1px solid rgba(245,183,49,.55);outline-offset:1px}
.ctv .qr{position:absolute;right:16px;bottom:30px;width:clamp(58px,8vw,84px);opacity:0;transform:translateY(8px);
  transition:.35s;z-index:4;cursor:pointer;pointer-events:none}
.ctv .qr.show{opacity:1;transform:none;pointer-events:auto}
.ctv .qr .box{background:var(--paper);padding:5px;border-radius:5px}
.ctv .qr svg{position:static;width:100%;height:auto;display:block}
.ctv .qr .cap{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,250,250,.85);text-align:center;margin-top:5px}

/* pause ad */
.ctv .pausead{position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(160deg,#102118,#2c6a4c);
  border-left:1px solid rgba(250,250,250,.2);transform:translateX(102%);transition:transform .45s cubic-bezier(.2,.9,.3,1.15);
  z-index:5;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:clamp(10px,1.8vw,22px);cursor:pointer}
.ctv .pausead.show{transform:none}
.ctv .pausead .lg{width:clamp(28px,4vw,44px);aspect-ratio:1;border-radius:50%;background:#E8F2EA;color:#13301f;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(15px,2.2vw,22px)}
.ctv .pausead .h{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.7vw,20px);line-height:1.15;color:var(--paper)}
.ctv .pausead .s{font-size:clamp(10px,1.2vw,13px);color:#D8EBDF;line-height:1.35}
.ctv .pausead .tagp{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,250,.6)}
.ctv .dim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:.35s;z-index:2}
.ctv .dim.show{opacity:1}
.ctv .pausehint{position:absolute;left:14px;bottom:13px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:rgba(250,250,250,.75);opacity:0;transition:.3s;z-index:6}
.ctv .pausehint.show{opacity:1}
.ctv .toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);background:var(--good);color:#04210f;
  font-weight:600;font-size:12px;border-radius:999px;padding:8px 15px;opacity:0;transition:.3s;pointer-events:none;z-index:9;white-space:nowrap}
.ctv .toast.show{opacity:1;transform:translate(-50%,-50%)}

/* remote */
.ctv .remote{width:76px;border-radius:26px;background:#141414;border:1px solid var(--rule);padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:11px}
.ctv .rbtn{width:46px;height:36px;border-radius:12px;background:var(--ink-3);border:1px solid var(--rule);
  color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.ctv .rbtn:hover{border-color:var(--rule-bright)}
.ctv .rbtn svg{width:17px;height:17px;display:block}
.ctv .rbtn.ok{border-radius:50%;width:46px;height:46px;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.ctv .rbtn:disabled{opacity:.3;cursor:not-allowed}
.ctv .rlbl{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase}

/* panels */
.ctv .panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:20px}
.ctv .panel + .panel{margin-top:16px}
.ctv .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ctv .ph h3{font-size:17px}
.ctv .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.ctv .ctrls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ctv .btn{font-family:var(--display);font-weight:600;font-size:13px;background:var(--red);color:var(--paper);
  border:0;border-radius:10px;padding:9px 14px;cursor:pointer;transition:.15s}
.ctv .btn:hover{filter:brightness(1.12)}
.ctv .btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper)}
.ctv .note{color:var(--gray-2);font-size:13px;line-height:1.6}
.ctv .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ctv .stat{background:var(--panel2);border:1px solid var(--rule);border-radius:12px;padding:12px}
.ctv .stat .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.ctv .stat .v.good{color:var(--good)}
.ctv .stat .v.warn{color:var(--warn)}
.ctv .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2);margin-top:4px}
.ctv .qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:16px}
.ctv .qseg{height:8px;background:var(--ink-3);border-radius:4px;overflow:hidden}
.ctv .qseg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ad))}
.ctv .qlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--gray-2);margin-top:6px}
.ctv .log{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0f0f0f;border:1px solid var(--rule);
  border-radius:12px;padding:10px 12px;height:206px;overflow:auto}
.ctv .log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctv .log .t{color:var(--gray);margin-right:8px}
.ctv .log .good{color:var(--good)}
.ctv .log .warn{color:var(--warn)}
.ctv .log .ev{color:var(--ad)}
.ctv .log .dim2{color:var(--gray)}
.ctv .log .empty{color:var(--gray)}
.ctv-how .card h3{font-size:clamp(19px,1.9vw,24px);margin:10px 0}
.ctv-how .card p{color:var(--gray-2);font-size:15px;line-height:1.6;font-weight:300}
.demo-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:clamp(26px,3vw,38px)}

/* ---------- podcast ---------- */
/* ---------- podcast demo ---------- */
.pcast{--ad:#F5B731;--good:#4ADE80;--warn:#FBBF24;--panel:var(--ink-2);--panel2:var(--ink-3)}
.pcast .tabs{display:flex;gap:8px;flex-wrap:wrap}
.pcast .tab{font-family:var(--display);font-weight:600;font-size:14px;background:var(--panel);
  color:var(--gray-2);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.2s}
.pcast .tab:hover{color:var(--paper)}
.pcast .tab.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.pcast .modeDesc{color:var(--gray-2);min-height:50px;max-width:680px;margin:14px 0 24px;font-size:15px;line-height:1.6}
.pcast .modeDesc b{color:var(--paper);font-weight:600}
.pcast .grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:860px){.pcast .grid{grid-template-columns:1fr}.pcast .phone{margin:0 auto}}

/* phone */
.pcast .phone{position:relative;width:100%;max-width:340px;border-radius:40px;padding:10px;background:#000;
  border:1px solid var(--rule-bright);box-shadow:0 30px 90px rgba(247,4,4,.14),0 0 0 6px var(--ink-2)}
.pcast .screen{position:relative;border-radius:31px;overflow:hidden;aspect-ratio:9/19.5;
  background:linear-gradient(180deg,#141414 0%,#101010 60%,#0c0c0c 100%);
  display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
.pcast .sbar{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 0;
  font-family:var(--mono);font-size:11px;color:var(--paper)}
.pcast .sbar .right{display:flex;gap:5px;align-items:center}
.pcast .sbar svg{width:15px;height:11px;display:block}
.pcast .apphead{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 4px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.pcast .apphead .chev{font-size:13px;letter-spacing:0;color:var(--gray-2)}

.pcast .artwrap{position:relative;margin:10px 22px 0;aspect-ratio:1;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
.pcast .art{position:absolute;inset:0;transition:opacity .45s}
.pcast .art.show{z-index:2}
.pcast .art.hide{opacity:0}
.pcast .art svg{width:100%;height:100%;display:block}
.pcast .sponsorchip{position:absolute;left:9px;top:9px;z-index:3;display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.72);border:1px solid rgba(245,183,49,.55);border-radius:999px;padding:4px 10px 4px 4px;
  font-family:var(--mono);font-size:9.5px;color:var(--paper);opacity:0;transition:.3s;white-space:nowrap}
.pcast .sponsorchip.show{opacity:1}
.pcast .sponsorchip b{background:var(--ad);color:#000;border-radius:999px;padding:2px 7px;font-weight:500}

.pcast .meta{padding:16px 22px 0}
.pcast .ep{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25;color:var(--paper)}
.pcast .show{font-size:12px;color:var(--gray-2);margin-top:3px}

.pcast .wave{display:flex;align-items:center;gap:2px;height:20px;padding:12px 22px 0}
.pcast .wave i{flex:1;background:var(--rule-bright);border-radius:1px;height:3px;transition:height .12s linear}
.pcast .wave.ad i{background:var(--ad)}

.pcast .barwrap{padding:10px 22px 0}
.pcast .bar{position:relative;height:4px;border-radius:2px;background:rgba(250,250,250,.16);cursor:pointer}
.pcast .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--paper);width:0}
.pcast .bar.ad .fill{background:var(--ad)}
.pcast .knob2{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);
  transform:translate(-50%,-50%);left:0}
.pcast .bar.ad .knob2{background:var(--ad)}
.pcast .mk{position:absolute;top:-3px;width:2px;height:10px;background:var(--ad);opacity:.75;border-radius:1px}
.pcast .times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  color:var(--gray-2);margin-top:9px}

.pcast .transport{display:flex;align-items:center;justify-content:center;gap:24px;padding:14px 22px 0}
.pcast .tbtn{background:none;border:0;color:var(--paper);cursor:pointer;display:grid;place-items:center;padding:0}
.pcast .tbtn svg{width:27px;height:27px;display:block}
.pcast .tbtn.main{width:58px;height:58px;border-radius:50%;background:var(--paper);color:var(--ink)}
.pcast .tbtn.main svg{width:24px;height:24px}
.pcast .tbtn:disabled{opacity:.35;cursor:default}
.pcast .lowrow{display:flex;align-items:center;justify-content:space-between;padding:16px 26px 0;
  font-family:var(--mono);font-size:10px;color:var(--gray-2)}

.pcast .companion{margin:auto 14px 16px;border-radius:12px;overflow:hidden;cursor:pointer;
  transform:translateY(130%);transition:transform .5s cubic-bezier(.2,.9,.3,1.15)}
.pcast .companion.show{transform:translateY(0)}
.pcast .companion .inner{display:flex;align-items:center;gap:9px;padding:9px 10px;
  background:linear-gradient(95deg,#102118 0%,#1d4733 70%,#2c6a4c 100%);border:1px solid rgba(250,250,250,.16)}
.pcast .companion .lg{flex:none;width:30px;height:30px;border-radius:50%;background:#E8F2EA;color:#13301f;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px}
.pcast .companion .tx{flex:1;min-width:0;line-height:1.2}
.pcast .companion .nm{font-family:var(--display);font-weight:700;font-size:12px;color:var(--paper)}
.pcast .companion .sb{font-size:10px;color:#D8EBDF;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcast .companion .cta{flex:none;font-weight:600;font-size:10px;background:var(--ad);color:#241a03;border-radius:6px;padding:5px 9px}
.pcast .toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);background:var(--good);
  color:#04210f;font-weight:600;font-size:12px;border-radius:999px;padding:7px 14px;opacity:0;transition:.3s;
  pointer-events:none;z-index:8;white-space:nowrap}
.pcast .toast.show{opacity:1;transform:translate(-50%,0)}

/* panels */
.pcast .panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:20px}
.pcast .panel + .panel{margin-top:16px}
.pcast .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pcast .ph h3{font-size:17px}
.pcast .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.pcast .ctrls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pcast .btn{font-family:var(--display);font-weight:600;font-size:13px;background:var(--red);color:var(--paper);
  border:0;border-radius:10px;padding:9px 14px;cursor:pointer;transition:.15s}
.pcast .btn:hover{filter:brightness(1.12)}
.pcast .btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper)}
.pcast .seg{display:flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--panel2)}
.pcast .seg button{background:none;border:0;color:var(--gray-2);font-family:var(--body);font-size:13px;
  padding:9px 13px;cursor:pointer}
.pcast .seg button.on{background:var(--rule);color:var(--paper)}
.pcast .note{color:var(--gray-2);font-size:13px;line-height:1.6}
.pcast .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.pcast .stats{grid-template-columns:repeat(2,1fr)}}
.pcast .stat{background:var(--panel2);border:1px solid var(--rule);border-radius:12px;padding:12px}
.pcast .stat .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.pcast .stat .v.good{color:var(--good)}
.pcast .stat .v.warn{color:var(--warn)}
.pcast .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-2);margin-top:4px}
.pcast .qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:16px}
.pcast .qseg{height:8px;background:var(--ink-3);border-radius:4px;overflow:hidden}
.pcast .qseg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ad))}
.pcast .qlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--gray-2);margin-top:6px}
.pcast .log{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0f0f0f;border:1px solid var(--rule);
  border-radius:12px;padding:10px 12px;height:238px;overflow:auto}
.pcast .log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcast .log .t{color:var(--gray);margin-right:8px}
.pcast .log .good{color:var(--good)}
.pcast .log .warn{color:var(--warn)}
.pcast .log .ev{color:var(--ad)}
.pcast .log .empty{color:var(--gray)}
.pcast-how .card h3{font-size:clamp(19px,1.9vw,24px);margin:10px 0}
.pcast-how .card p{color:var(--gray-2);font-size:15px;line-height:1.6;font-weight:300}
.demo-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin-top:clamp(26px,3vw,38px)}

/* ---------- radio ---------- */
/* ---------- streaming radio demo ---------- */
.radio{--ad:#F5B731;--good:#4ADE80;--warn:#FBBF24;--panel:var(--ink-2);--panel2:var(--ink-3)}
.radio .tabs{display:flex;gap:8px;flex-wrap:wrap}
.radio .tab{font-family:var(--display);font-weight:600;font-size:14px;background:var(--panel);
  color:var(--gray-2);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.2s}
.radio .tab:hover{color:var(--paper)}
.radio .tab.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.radio .modeDesc{color:var(--gray-2);min-height:50px;max-width:700px;margin:14px 0 24px;font-size:15px;line-height:1.6}
.radio .modeDesc b{color:var(--paper);font-weight:600}
.radio .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:30px;align-items:start}
@media(max-width:980px){.radio .grid{grid-template-columns:minmax(0,1fr)}}

/* car head unit */
.radio .dash{position:relative;border-radius:18px;padding:13px;background:#0b0b0b;
  border:1px solid var(--rule-bright);box-shadow:0 30px 80px rgba(247,4,4,.12),0 0 0 7px #151515}
.radio .unit{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(170deg,#161616,#0d0d0d 70%);
  aspect-ratio:16/10;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
.radio .ubar{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--gray-2);
  border-bottom:1px solid var(--rule);flex-wrap:wrap;gap:4px 12px;min-width:0}
.radio .live{display:flex;align-items:center;gap:6px;color:var(--paper)}
.radio .live .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:rdpulse 1.8s infinite}
@keyframes rdpulse{0%,100%{opacity:1}50%{opacity:.35}}
.radio .unit.break .live .dot{background:var(--ad)}
.radio .uface{flex:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,2vw,22px);padding:clamp(12px,2vw,20px) clamp(14px,2.2vw,22px);align-items:center;min-height:0}
.radio .tile{position:relative;width:clamp(96px,14vw,150px);aspect-ratio:1;border-radius:8px;overflow:hidden;flex:none;
  box-shadow:0 14px 34px rgba(0,0,0,.6)}
.radio .tile svg{width:100%;height:100%;display:block;position:absolute;inset:0;transition:opacity .4s}
.radio .tile svg.hide{opacity:0}
.radio .info{min-width:0}
.radio .nowline{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.2vw,25px);line-height:1.12;
  color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .artist{font-size:clamp(12px,1.3vw,14px);color:var(--gray-2);margin-top:5px}
.radio .wave{display:flex;align-items:center;gap:2px;height:22px;margin-top:clamp(10px,1.6vw,16px)}
.radio .wave i{flex:1;background:var(--rule-bright);border-radius:1px;height:3px;transition:height .12s linear}
.radio .unit.break .wave i{background:var(--ad)}

.radio .pod{display:flex;gap:4px;margin-top:clamp(10px,1.6vw,14px);opacity:0;transition:.3s}
.radio .pod.show{opacity:1}
.radio .pod .slotbar{flex:1;height:7px;border-radius:4px;background:var(--ink-3);overflow:hidden;position:relative}
.radio .pod .slotbar i{display:block;height:100%;width:0;background:var(--rule-bright)}
.radio .pod .slotbar.mine i{background:linear-gradient(90deg,var(--red),var(--ad))}
.radio .pod .slotbar.mine{outline:1px solid rgba(245,183,49,.5);outline-offset:1px}
.radio .podlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;color:var(--gray-2);margin-top:6px;opacity:0;transition:.3s}
.radio .podlbl.show{opacity:1}

.radio .ubot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 clamp(14px,2.2vw,22px) clamp(12px,2vw,18px)}
.radio .presets{display:flex;gap:6px;flex-wrap:wrap}
.radio .preset{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;background:var(--ink-3);
  border:1px solid var(--rule);color:var(--gray-2);border-radius:7px;padding:7px 10px;cursor:pointer;transition:.15s}
.radio .preset:hover{color:var(--paper);border-color:var(--rule-bright)}
.radio .preset.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.radio .knobs{display:flex;align-items:center;gap:14px}
.radio .tbtn{background:none;border:0;color:var(--paper);cursor:pointer;display:grid;place-items:center;padding:0}
.radio .tbtn svg{width:24px;height:24px;display:block}
.radio .tbtn.main{width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink)}
.radio .tbtn.main svg{width:20px;height:20px}
.radio .tbtn:disabled{opacity:.3;cursor:not-allowed}

.radio .adchip{position:absolute;left:50%;top:48px;transform:translate(-50%,-8px);opacity:0;transition:.3s;
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.78);border:1px solid rgba(245,183,49,.55);
  border-radius:999px;padding:4px 12px 4px 4px;font-family:var(--mono);font-size:10.5px;color:var(--paper);
  white-space:nowrap;pointer-events:none;z-index:4}
.radio .adchip.show{opacity:1;transform:translate(-50%,0)}
.radio .adchip b{background:var(--ad);color:#000;border-radius:999px;padding:2px 8px;font-weight:500}
.radio .companion{width:min(100%,430px);margin-top:clamp(11px,1.8vw,16px);opacity:0;transform:translateY(12px);
  transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.3,1.15);cursor:pointer;pointer-events:none}
.radio .companion.show{opacity:1;transform:none;pointer-events:auto}
.radio .companion .inner{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  background:linear-gradient(95deg,#102118 0%,#1d4733 70%,#2c6a4c 100%);border:1px solid rgba(250,250,250,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.55)}
.radio .companion .lg{flex:none;width:28px;height:28px;border-radius:50%;background:#E8F2EA;color:#13301f;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px}
.radio .companion .tx{flex:1;min-width:0;line-height:1.18}
.radio .companion .nm{font-family:var(--display);font-weight:700;font-size:12px;color:var(--paper)}
.radio .companion .sb{font-size:10px;color:#D8EBDF;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .companion .cta{flex:none;font-weight:600;font-size:10px;background:var(--ad);color:#241a03;border-radius:6px;padding:5px 9px}
.radio .toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);background:var(--good);color:#04210f;
  font-weight:600;font-size:12px;border-radius:999px;padding:8px 15px;opacity:0;transition:.3s;pointer-events:none;z-index:8;white-space:nowrap}
.radio .toast.show{opacity:1;transform:translate(-50%,-50%)}
.radio .caption{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);text-align:center;margin-top:13px}

/* panels */
.radio .panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:20px}
.radio .panel + .panel{margin-top:16px}
.radio .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.radio .ph h3{font-size:17px}
.radio .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.radio .ctrls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.radio .btn{font-family:var(--display);font-weight:600;font-size:13px;background:var(--red);color:var(--paper);
  border:0;border-radius:10px;padding:9px 14px;cursor:pointer;transition:.15s}
.radio .btn:hover{filter:brightness(1.12)}
.radio .btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper)}
.radio .seg{display:flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--panel2)}
.radio .seg button{background:none;border:0;color:var(--gray-2);font-family:var(--body);font-size:13px;padding:9px 13px;cursor:pointer}
.radio .seg button.on{background:var(--rule);color:var(--paper)}
.radio .note{color:var(--gray-2);font-size:13px;line-height:1.6}
.radio .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.radio .stat{background:var(--panel2);border:1px solid var(--rule);border-radius:12px;padding:12px}
.radio .stat .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.radio .stat .v.good{color:var(--good)}
.radio .stat .v.warn{color:var(--warn)}
.radio .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2);margin-top:4px}
.radio .qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:16px}
.radio .qseg{height:8px;background:var(--ink-3);border-radius:4px;overflow:hidden}
.radio .qseg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ad))}
.radio .qlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--gray-2);margin-top:6px}
.radio .log{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0f0f0f;border:1px solid var(--rule);
  border-radius:12px;padding:10px 12px;height:210px;overflow:auto}
.radio .log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .log .t{color:var(--gray);margin-right:8px}
.radio .log .good{color:var(--good)}
.radio .log .warn{color:var(--warn)}
.radio .log .ev{color:var(--ad)}
.radio .log .dim{color:var(--gray)}
.radio .log .empty{color:var(--gray)}
.radio-how .card h3{font-size:clamp(19px,1.9vw,24px);margin:10px 0}
.radio-how .card p{color:var(--gray-2);font-size:15px;line-height:1.6;font-weight:300}
.demo-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:clamp(26px,3vw,38px)}
/* below this width the 16:10 box is shorter than its contents, so let it grow */
@media(max-width:660px){
  .radio .unit{aspect-ratio:auto}
  .radio .uface{grid-template-columns:1fr;gap:14px;align-items:start;padding-top:40px}
  .radio .tile{width:86px}
  .radio .ubot{flex-wrap:wrap;gap:12px}
  .radio .ubar{font-size:9.5px;letter-spacing:.06em}
  .radio .companion{width:100%}
}

/* ---------- ingame ---------- */
/* ---------- in-game audio demo ---------- */
.igad{--ad:#F5B731;--good:#4ADE80;--warn:#FBBF24;--panel:var(--ink-2);--panel2:var(--ink-3)}
.igad .tabs{display:flex;gap:8px;flex-wrap:wrap}
.igad .tab{font-family:var(--display);font-weight:600;font-size:14px;background:var(--panel);
  color:var(--gray-2);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;
  cursor:pointer;transition:.2s}
.igad .tab:hover{color:var(--paper)}
.igad .tab.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.igad .modeDesc{color:var(--gray-2);min-height:50px;max-width:660px;margin:14px 0 24px;
  font-size:15px;line-height:1.6}
.igad .modeDesc b{color:var(--paper);font-weight:600}

.igad .grid{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:32px;align-items:start}
@media(max-width:860px){.igad .grid{grid-template-columns:1fr}.igad .phone{margin:0 auto}}

/* phone + game */
.igad .phone{position:relative;width:100%;max-width:370px;border-radius:38px;padding:10px;
  background:#000;border:1px solid var(--rule-bright);
  box-shadow:0 30px 90px rgba(247,4,4,.14),0 0 0 6px var(--ink-2)}
.igad .screen{position:relative;border-radius:29px;overflow:hidden;aspect-ratio:9/16;
  background:var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer}
.igad canvas{display:block;width:100%;height:100%}
.igad .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:rgba(10,10,10,.82);text-align:center;padding:28px;
  cursor:default;z-index:5}
.igad .overlay h2{font-size:30px;line-height:1.1}
.igad .overlay p{color:var(--gray-2);font-size:14px;max-width:250px;line-height:1.5}
.igad .overlay .note{font-family:var(--mono);font-size:11px;color:var(--ad);letter-spacing:.14em}
.igad .hidden{display:none!important}
.igad .btn{font-family:var(--display);font-weight:600;font-size:15px;background:var(--red);
  color:var(--paper);border:0;border-radius:12px;padding:12px 22px;cursor:pointer;transition:.15s}
.igad .btn:hover{filter:brightness(1.12)}
.igad .btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper)}
.igad .btn.sm{font-size:13px;padding:9px 14px;border-radius:10px}

.igad .adpill{position:absolute;top:46px;left:50%;transform:translate(-50%,-10px);opacity:0;
  transition:.35s;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.78);
  border:1px solid rgba(245,183,49,.55);border-radius:999px;padding:5px 12px 5px 5px;
  font-family:var(--mono);font-size:11px;white-space:nowrap;pointer-events:none;z-index:3}
.igad .adpill.show{opacity:1;transform:translate(-50%,0)}
.igad .adtag{background:var(--ad);color:#000;font-weight:500;border-radius:999px;padding:2px 8px}
.igad .eq{display:flex;gap:2px;align-items:flex-end;height:12px}
.igad .eq i{display:block;width:3px;height:4px;background:var(--ad);border-radius:1px;
  animation:igad-eq .8s infinite ease-in-out}
.igad .eq i:nth-child(2){animation-delay:.2s}
.igad .eq i:nth-child(3){animation-delay:.45s}
.igad .eq i:nth-child(4){animation-delay:.1s}
@keyframes igad-eq{0%,100%{height:3px}50%{height:12px}}
.igad .adpill.paused .eq i{animation-play-state:paused;opacity:.4}
.igad .gameon{position:absolute;top:80px;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;color:var(--good);letter-spacing:.1em;opacity:0;transition:.35s;pointer-events:none;
  z-index:3;white-space:nowrap}
.igad .gameon.show{opacity:.9}

.igad .banner{position:absolute;left:50%;bottom:14px;width:88.9%;aspect-ratio:320/50;
  transform:translate(-50%,160%);transition:transform .5s cubic-bezier(.2,.9,.3,1.15);z-index:6;cursor:pointer}
.igad .banner.show{transform:translate(-50%,0)}
.igad .banner .inner{height:100%;display:flex;align-items:center;gap:8px;padding:0 7px;border-radius:7px;
  background:linear-gradient(95deg,#102118 0%,#1d4733 70%,#2c6a4c 100%);
  border:1px solid rgba(250,250,250,.16);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.igad .banner .logo{flex:none;width:28px;height:28px;border-radius:50%;background:#E8F2EA;color:#13301f;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px}
.igad .banner .txt{flex:1;min-width:0;line-height:1.15}
.igad .banner .nm{font-family:var(--display);font-weight:700;font-size:12px;color:var(--paper)}
.igad .banner .sb{font-size:10px;color:#D8EBDF;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igad .banner .cta{flex:none;font-weight:600;font-size:10px;background:var(--ad);color:#241a03;
  border-radius:6px;padding:5px 8px}
.igad .banner .size{position:absolute;right:2px;top:-15px;font-family:var(--mono);font-size:9px;
  color:rgba(250,250,250,.55)}

.igad .volprompt{position:absolute;top:100px;left:50%;transform:translateX(-50%);background:var(--paper);
  color:var(--ink);border-radius:12px;padding:9px 13px;font-weight:600;font-size:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:4;white-space:nowrap;display:flex;gap:7px;
  align-items:center;pointer-events:none}
.igad .rewardBtn{position:absolute;top:13px;right:12px;font-family:var(--display);font-weight:600;
  font-size:12px;background:var(--ad);color:#140d02;border:0;border-radius:999px;padding:7px 12px;
  cursor:pointer;z-index:3;box-shadow:0 4px 14px rgba(245,183,49,.35);animation:igad-pulse 1.6s infinite}
@keyframes igad-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.igad .toast{position:absolute;bottom:84px;left:50%;transform:translate(-50%,10px);background:var(--good);
  color:#04210f;font-weight:600;font-size:12px;border-radius:999px;padding:7px 14px;opacity:0;
  transition:.3s;pointer-events:none;z-index:7;white-space:nowrap}
.igad .toast.show{opacity:1;transform:translate(-50%,0)}

/* measurement panels */
.igad .panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:20px}
.igad .panel + .panel{margin-top:16px}
.igad .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.igad .ph h3{font-size:17px}
.igad .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.igad .ctrls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.igad .switch{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--rule);
  border-radius:10px;padding:7px 12px;cursor:pointer;font-size:13px}
.igad .switch .knob{width:34px;height:20px;border-radius:999px;background:var(--good);position:relative;transition:.2s}
.igad .switch .knob::after{content:"";position:absolute;top:2px;left:16px;width:16px;height:16px;
  border-radius:50%;background:var(--paper);transition:.2s}
.igad .switch.off .knob{background:#444}
.igad .switch.off .knob::after{left:2px}
.igad .note{color:var(--gray-2);font-size:13px;line-height:1.6}
.igad .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:560px){.igad .stats{grid-template-columns:repeat(2,1fr)}}
.igad .stat{background:var(--panel2);border:1px solid var(--rule);border-radius:12px;padding:12px}
.igad .stat .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.igad .stat .v.good{color:var(--good)}
.igad .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-2);margin-top:4px}
.igad .qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:16px}
.igad .qseg{height:8px;background:var(--ink-3);border-radius:4px;overflow:hidden}
.igad .qseg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ad))}
.igad .qlbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  color:var(--gray-2);margin-top:6px}
.igad .log{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0f0f0f;
  border:1px solid var(--rule);border-radius:12px;padding:10px 12px;height:230px;overflow:auto}
.igad .log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igad .log .t{color:var(--gray);margin-right:8px}
.igad .log .good{color:var(--good)}
.igad .log .warn{color:var(--warn)}
.igad .log .ev{color:var(--ad)}
.igad .log .empty{color:var(--gray)}

/* the three explainer cards */
.igad-how .card h3{font-size:clamp(19px,1.9vw,24px);margin:10px 0}
.igad-how .card p{color:var(--gray-2);font-size:15px;line-height:1.6;font-weight:300}
.demo-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin-top:clamp(26px,3vw,38px)}

/* ---------- tts ---------- */
/* ---------- text-to-speech demo ---------- */
.tts{--ad:#F5B731;--good:#4ADE80;--warn:#FBBF24;--panel:var(--ink-2);--panel2:var(--ink-3)}
.tts .tabs{display:flex;gap:8px;flex-wrap:wrap}
.tts .tab{font-family:var(--display);font-weight:600;font-size:14px;background:var(--panel);
  color:var(--gray-2);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.2s}
.tts .tab:hover{color:var(--paper)}
.tts .tab.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.tts .modeDesc{color:var(--gray-2);min-height:50px;max-width:700px;margin:14px 0 24px;font-size:15px;line-height:1.6}
.tts .modeDesc b{color:var(--paper);font-weight:600}
.tts .grid{display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:30px;align-items:start}
@media(max-width:900px){.tts .grid{grid-template-columns:minmax(0,1fr)}.tts .phone{margin:0 auto}}

.tts .phone{position:relative;width:100%;max-width:350px;border-radius:40px;padding:10px;background:#000;
  border:1px solid var(--rule-bright);box-shadow:0 30px 90px rgba(247,4,4,.14),0 0 0 6px var(--ink-2)}
.tts .screen{position:relative;border-radius:31px;overflow:hidden;aspect-ratio:9/18;background:#101010;
  display:flex;flex-direction:column}
.tts .sbar{display:flex;justify-content:space-between;padding:12px 20px 0;font-family:var(--mono);font-size:10.5px;color:var(--paper)}
.tts .brand{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 10px;
  border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em}
.tts .brand span{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.16em;color:var(--gray)}

.tts .listen{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:9px 11px;border-radius:10px;
  background:var(--ink-3);border:1px solid var(--rule);cursor:pointer;transition:.15s}
.tts .listen:hover{border-color:var(--rule-bright)}
.tts .listen .pbtn{width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;flex:none}
.tts .listen .pbtn svg{width:13px;height:13px;display:block}
.tts .listen .lt{flex:1;min-width:0}
.tts .listen .l1{font-size:12px;font-weight:600;color:var(--paper)}
.tts .listen .l2{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--gray-2);margin-top:2px}
.tts .listen.ad{background:linear-gradient(95deg,#102118,#2c6a4c);border-color:rgba(245,183,49,.45)}
.tts .listen.ad .l2{color:#D8EBDF}

.tts .article{flex:1;overflow:hidden;padding:14px 18px 0;position:relative;mask-image:linear-gradient(180deg,#000 82%,transparent)}
.tts .article h4{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;color:var(--paper)}
.tts .byline{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--gray);margin:7px 0 12px;text-transform:uppercase}
.tts .article p{font-size:12.5px;line-height:1.62;color:var(--gray-2);margin-bottom:10px;transition:color .3s,background .3s;
  border-radius:4px;padding:2px 4px;margin-left:-4px}
.tts .article p.read{color:var(--paper);background:rgba(247,4,4,.1)}
.tts .article p mark{background:none;color:inherit;border-bottom:1px solid rgba(245,183,49,.75);padding-bottom:1px}

.tts .adcard{position:absolute;left:14px;right:14px;bottom:14px;border-radius:11px;overflow:hidden;z-index:4;
  transform:translateY(135%);transition:transform .5s cubic-bezier(.2,.9,.3,1.15);cursor:pointer}
.tts .adcard.show{transform:none}
.tts .adcard .inner{display:flex;align-items:center;gap:9px;padding:9px 10px;
  background:linear-gradient(95deg,#102118 0%,#1d4733 70%,#2c6a4c 100%);border:1px solid rgba(250,250,250,.16)}
.tts .adcard .lg{flex:none;width:30px;height:30px;border-radius:50%;background:#E8F2EA;color:#13301f;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px}
.tts .adcard .tx{flex:1;min-width:0;line-height:1.2}
.tts .adcard .nm{font-family:var(--display);font-weight:700;font-size:12px;color:var(--paper)}
.tts .adcard .sb{font-size:10px;color:#D8EBDF;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts .adcard .cta{flex:none;font-weight:600;font-size:10px;background:var(--ad);color:#241a03;border-radius:6px;padding:5px 9px}
.tts .toast{position:absolute;left:50%;bottom:92px;transform:translate(-50%,10px);background:var(--good);color:#04210f;
  font-weight:600;font-size:12px;border-radius:999px;padding:7px 14px;opacity:0;transition:.3s;pointer-events:none;z-index:7;white-space:nowrap}
.tts .toast.show{opacity:1;transform:translate(-50%,0)}
.tts .blocked{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;border-radius:11px;padding:11px 12px;
  background:var(--ink-3);border:1px dashed rgba(251,191,36,.6);transform:translateY(135%);transition:transform .5s cubic-bezier(.2,.9,.3,1.15)}
.tts .blocked.show{transform:none}
.tts .blocked .b1{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--warn)}
.tts .blocked .b2{font-size:11.5px;color:var(--gray-2);line-height:1.45;margin-top:5px}

/* panels */
.tts .panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:20px}
.tts .panel + .panel{margin-top:16px}
.tts .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tts .ph h3{font-size:17px}
.tts .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.tts .btn{font-family:var(--display);font-weight:600;font-size:13px;background:var(--red);color:var(--paper);
  border:0;border-radius:10px;padding:9px 14px;cursor:pointer;transition:.15s}
.tts .btn:hover{filter:brightness(1.12)}
.tts .btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--paper)}
.tts .sig{display:flex;flex-wrap:wrap;gap:7px;min-height:34px}
.tts .sig span{border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--gray-2);
  opacity:0;transform:translateY(5px);transition:.3s}
.tts .sig span.on{opacity:1;transform:none;color:var(--paper);border-color:var(--rule-bright)}
.tts .sig span.hit{border-color:var(--ad);color:var(--ad)}
.tts .sig span.block{border-color:var(--warn);color:var(--warn)}
.tts .verdict{margin-top:16px;padding:13px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--rule);
  font-size:13.5px;line-height:1.55;color:var(--gray-2)}
.tts .verdict b{color:var(--paper);font-weight:600}
.tts .verdict.ok{border-color:rgba(74,222,128,.45)}
.tts .verdict.no{border-color:rgba(251,191,36,.5)}
.tts .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tts .stat{background:var(--panel2);border:1px solid var(--rule);border-radius:12px;padding:12px}
.tts .stat .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1}
.tts .stat .v.good{color:var(--good)}
.tts .stat .v.warn{color:var(--warn)}
.tts .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2);margin-top:4px}
.tts .log{font-family:var(--mono);font-size:12px;line-height:1.6;background:#0f0f0f;border:1px solid var(--rule);
  border-radius:12px;padding:10px 12px;height:180px;overflow:auto}
.tts .log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tts .log .t{color:var(--gray);margin-right:8px}
.tts .log .good{color:var(--good)}
.tts .log .warn{color:var(--warn)}
.tts .log .ev{color:var(--ad)}
.tts .log .empty{color:var(--gray)}
.tts-how .card h3{font-size:clamp(19px,1.9vw,24px);margin:10px 0}
.tts-how .card p{color:var(--gray-2);font-size:15px;line-height:1.6;font-weight:300}
.demo-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-top:clamp(26px,3vw,38px)}