:root{
  --bg0:#03050d; --bg1:#070b1a; --bg2:#0b1226;
  --ink:#eef2ff; --mut:#8b93b8; --mut2:#5c6489;
  --cyan:#22d3ee; --violet:#a78bfa; --amber:#fbbf24; --emerald:#34d399; --rose:#fb7185;
  --glass:rgba(255,255,255,.045); --line:rgba(255,255,255,.10);
  --soft:rgba(255,255,255,.055); --panel:rgba(8,12,24,.93); --panel2:rgba(5,8,18,.72);
  --veil:rgba(3,5,13,.96); --field:#0b1222; --code-bg:#05070f; --code-ink:#dbe4ec;
  --plot-bg:#05070f; --plot-grid:rgba(139,147,184,.13); --plot-axis:rgba(200,208,235,.5);
  --plot-ink:rgba(139,147,184,.85); --net-link:139,147,184; --net-a:34,211,238; --net-b:167,139,250;
  --on-ac:#06121a; --orb:.15; --piv-ink:#eafff5; --piv-bg:22%; --hot-ink:var(--ink);
  --ac:var(--cyan); --ac2:var(--violet);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
/* ===== الوضع الفاتح — للقاعات المضيئة وأجهزة العرض ===== */
:root[data-theme="light"]{
  --bg0:#f7f9fd; --bg1:#eef2fa; --bg2:#e4ebf7;
  --ink:#0d1526; --mut:#4c5878; --mut2:#8691ad;
  --cyan:#0e7490; --violet:#6d28d9; --amber:#a16207; --emerald:#047857; --rose:#be123c;
  --glass:rgba(13,21,38,.052); --line:rgba(13,21,38,.17);
  --soft:rgba(13,21,38,.05); --panel:rgba(255,255,255,.95); --panel2:rgba(255,255,255,.8);
  --veil:rgba(247,249,253,.97); --field:#ffffff; --code-bg:#0f172a; --code-ink:#e2e8f0;
  --plot-bg:#ffffff; --plot-grid:rgba(13,21,38,.09); --plot-axis:rgba(13,21,38,.45);
  --plot-ink:rgba(13,21,38,.7); --net-link:100,116,139; --net-a:14,116,144; --net-b:109,40,217;
  --on-ac:#ffffff; --orb:.1; --piv-ink:#043d2b; --piv-bg:30%; --hot-ink:#3d2a04;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg0)}
body{font-family:'Cairo','Readex Pro',system-ui,sans-serif;color:var(--ink)}

/* ---------- background ---------- */
#net{position:fixed;inset:0;z-index:0;opacity:.85}
.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:var(--orb);z-index:0;pointer-events:none;animation:drift 26s ease-in-out infinite alternate}
.orb.o1{width:52vmax;height:52vmax;background:radial-gradient(circle,#0ea5e9,transparent 60%);top:-20vmax;right:-14vmax}
.orb.o2{width:44vmax;height:44vmax;background:radial-gradient(circle,#7c3aed,transparent 60%);bottom:-18vmax;left:-12vmax;animation-delay:-9s}
.orb.o3{width:30vmax;height:30vmax;background:radial-gradient(circle,#0d9488,transparent 60%);top:40%;left:38%;opacity:.10;animation-delay:-17s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vmax,-3vmax) scale(1.12)}}
.grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%);mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%)}

/* ---------- deck ---------- */
#deck{position:fixed;inset:0;z-index:1}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(var(--vbh,3.6rem) + 1.6vh) 5vw 8.6vh;visibility:hidden;opacity:0;transform:scale(.985);
  transition:opacity .5s ease,transform .5s ease,visibility .5s;overflow-y:auto;
  scroll-padding-top:var(--vbh,3.6rem)}
.slide.active{visibility:visible;opacity:1;transform:scale(1);z-index:2}
.inner{width:min(1240px,100%);display:flex;flex-direction:column;gap:2.2vh;margin-block:auto}
.a{opacity:0}
.slide.active .a{animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.slide.active .az{animation-name:zoomin}
@keyframes zoomin{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}

/* accent themes per chapter */
.p1{--ac:#22d3ee;--ac2:#38bdf8}
.p2{--ac:#a78bfa;--ac2:#c084fc}
.p3{--ac:#fbbf24;--ac2:#fb923c}
.p4{--ac:#34d399;--ac2:#2dd4bf}
.p5{--ac:#fb7185;--ac2:#f472b6}

/* ---------- shared bits ---------- */
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);background:color-mix(in srgb,var(--ac) 10%,transparent);
  color:var(--ac);font-weight:700;font-size:clamp(.7rem,1.35vmin,.92rem);width:fit-content}
.chip .dot{width:.5em;height:.5em;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
h1.t{font-size:clamp(1.6rem,4.6vmin,3.2rem);font-weight:900;line-height:1.22;letter-spacing:-.01em}
h2.t{font-size:clamp(1.35rem,3.5vmin,2.5rem);font-weight:800;line-height:1.25}
.sub{color:var(--mut);font-size:clamp(.86rem,1.75vmin,1.12rem);font-weight:400;line-height:1.6}
.sub .ltr{white-space:nowrap}
.ltr{direction:ltr;text-align:left;unicode-bidi:isolate;margin-inline:.14em}
.eq{direction:ltr;text-align:center;font-family:var(--mono);letter-spacing:.01em}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
b.hi{color:var(--ac)}
.num{font-family:var(--mono);color:var(--ac);font-weight:700}

/* head block */
.lhead{display:flex;flex-direction:column;gap:.5rem}
.lhead .row{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.lhead .k{font-family:var(--mono);font-size:clamp(1.5rem,4vmin,2.6rem);font-weight:800;
  color:transparent;-webkit-text-stroke:1.3px color-mix(in srgb,var(--ac) 85%,transparent);opacity:.9}

/* cards */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,82vw),1fr))}
.card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--ac),var(--ac2));opacity:.85}
.card .ct{font-family:var(--mono);font-size:clamp(.68rem,1.3vmin,.82rem);font-weight:700;color:var(--ac);letter-spacing:.08em}
.card .cd{color:var(--ink);font-size:clamp(.84rem,1.7vmin,1.04rem);line-height:1.65;opacity:.93}
.card .cn{color:var(--mut);font-size:clamp(.76rem,1.5vmin,.92rem);line-height:1.6}

/* steps chain */
.steps{display:flex;flex-direction:column;gap:.7rem}
.step{display:flex;gap:.9rem;align-items:flex-start;background:var(--glass);border:1px solid var(--line);
  border-radius:14px;padding:.8rem 1rem}
.step .si{flex:0 0 auto;width:2rem;height:2rem;border-radius:10px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:800;background:color-mix(in srgb,var(--ac) 16%,transparent);
  color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)}
.step .sd{line-height:1.6;font-size:clamp(.84rem,1.7vmin,1.04rem)}

/* matrix */
.mx{display:inline-grid;gap:.1rem .55rem;direction:ltr;font-family:var(--mono);
  padding:.55rem .7rem;position:relative;font-size:clamp(.82rem,1.9vmin,1.2rem)}
.mx::before,.mx::after{content:"";position:absolute;top:0;bottom:0;width:.5rem;
  border:1.8px solid color-mix(in srgb,var(--ink) 55%,transparent)}
.mx::before{left:-.1rem;border-right:0;border-radius:4px 0 0 4px}
.mx::after{right:-.1rem;border-left:0;border-radius:0 4px 4px 0}
.mx i{font-style:normal;text-align:center;min-width:2.1em;padding:.14rem .1rem;border-radius:6px}
.mx i.bar{border-inline-start:1.6px dashed color-mix(in srgb,var(--amber) 70%,transparent);min-width:.5em}
.mx i.piv{background:color-mix(in srgb,var(--emerald) var(--piv-bg),transparent);color:var(--piv-ink);font-weight:800;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--emerald) 45%,transparent) inset}
.mx i.zero{color:var(--mut2)}
.mx i.hot{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--hot-ink)}
/* تشغيل العملية: الصفّ المقروء منه، والصفّ المتغيّر، والخانة التي تبدّلت */
.mx i.src{background:color-mix(in srgb,var(--violet) 26%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 55%,transparent) inset}
.mx i.tgt{background:color-mix(in srgb,var(--cyan) 20%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 50%,transparent) inset}
.mx i.chg{background:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--hot-ink);
  font-weight:800;transition:background .35s}
.chainbtn{align-self:center;opacity:.6}
.chainbtn:hover{opacity:1}
.mxrow{display:flex;align-items:center;gap:1rem;justify-content:center;flex-wrap:wrap}
.arrowop{font-family:var(--mono);color:var(--amber);font-size:clamp(.74rem,1.5vmin,.95rem);
  display:flex;flex-direction:column;align-items:center;gap:.15rem;direction:ltr}
.arrowop span.ar{color:var(--mut);font-size:1.3em;line-height:1}

/* code */
.code{background:var(--code-bg);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;
  direction:ltr;text-align:left;font-family:var(--mono);font-size:clamp(.72rem,1.55vmin,.95rem);
  line-height:1.75;overflow:auto;white-space:pre;color:var(--code-ink)}
.code .cm{color:#6b7a90}
.code .kw{color:var(--violet)}
.code .st{color:var(--emerald)}
.code .nu{color:var(--amber)}

/* callout */
.note{display:flex;gap:.7rem;align-items:flex-start;background:color-mix(in srgb,var(--ac) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);border-radius:14px;padding:.85rem 1rem;
  font-size:clamp(.82rem,1.65vmin,1.02rem);line-height:1.65}
.note .ni{font-size:1.15em;line-height:1.3}
.warn{--ac:var(--rose)}

/* ---------- labs ---------- */
.lab{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:1rem 1.1rem;
  backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:.8rem}
.labhead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.labhead .lt{font-weight:800;font-size:clamp(.95rem,2vmin,1.2rem)}
.btn{font:inherit;font-weight:700;font-size:clamp(.74rem,1.5vmin,.92rem);color:var(--on-ac);
  background:linear-gradient(135deg,var(--ac),var(--ac2));border:0;border-radius:11px;padding:.5rem .95rem;
  cursor:pointer;transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ac);color:var(--ac)}
.btn.sm{padding:.34rem .7rem;border-radius:9px;font-size:clamp(.7rem,1.4vmin,.85rem)}
select,input[type=number],input[type=text]{font:inherit;font-size:clamp(.76rem,1.5vmin,.95rem);
  background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.42rem .6rem}
input[type=range]{accent-color:var(--ac)}
.labgrid{display:grid;gap:1rem;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.labgrid{grid-template-columns:1fr}}
.verdict{border-radius:14px;padding:.8rem 1rem;border:1px solid var(--line);line-height:1.7;
  font-size:clamp(.8rem,1.6vmin,1rem);background:var(--glass)}
.verdict.ok{border-color:color-mix(in srgb,var(--emerald) 50%,transparent);background:color-mix(in srgb,var(--emerald) 10%,transparent)}
.verdict.bad{border-color:color-mix(in srgb,var(--rose) 50%,transparent);background:color-mix(in srgb,var(--rose) 10%,transparent)}
.verdict.inf{border-color:color-mix(in srgb,var(--amber) 50%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.kv{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.kv span{font-family:var(--mono);font-size:.82em;background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;direction:ltr}
.log{max-height:24vh;overflow:auto;display:flex;flex-direction:column;gap:.45rem}
.log .li{display:flex;gap:.6rem;align-items:center;font-family:var(--mono);direction:ltr;
  font-size:clamp(.68rem,1.4vmin,.85rem);color:var(--mut);background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:.3rem .5rem}
.log .li b{color:var(--amber);font-weight:700}
/* زرّ الإعادة يركب زاوية اللوحة: المساحة الرأسية في الشريحة ضيّقة */
.figrow{position:relative;width:fit-content;max-width:100%;margin:6px auto}
.figrow .figbtn{position:absolute;inset-block-end:10px;inset-inline-end:12px;opacity:.72}
.figrow .figbtn:hover{opacity:1}
/* لا تمطّط اللوحة: width:100% مع max-height يُلغيان النسبة، فيظهر مربّع
   الشبكة مستطيلاً والمتجه [3,2] بزاوية ١٨° بدل ٣٤°. تُترك أبعادها الطبيعية
   (سمتا width/height) وتُصغَّر بالحدّين الأقصيين معاً فتبقى النسبة سليمة. */
.plot{display:block;width:auto;height:auto;aspect-ratio:auto;max-width:100%;max-height:46vh;margin-inline:auto;background:var(--plot-bg);
  border:1px solid var(--line);border-radius:14px}
.ctrl{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem .6rem;align-items:center;
  font-family:var(--mono);font-size:clamp(.7rem,1.45vmin,.88rem);direction:ltr}
.ctrl label{color:var(--mut)}
.ctrl output{color:var(--ac);min-width:2.6em;text-align:right}
.quiz{display:flex;flex-direction:column;gap:.7rem}
.qitem{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem}
.qq{font-size:clamp(.82rem,1.65vmin,1.02rem);line-height:1.6;margin-bottom:.6rem}
.qopts{display:flex;gap:.5rem;flex-wrap:wrap}
.qopt{font:inherit;font-size:clamp(.74rem,1.45vmin,.9rem);background:var(--soft);
  color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.42rem .8rem;cursor:pointer}
.qopt:hover{border-color:var(--ac)}
.qopt.right{background:color-mix(in srgb,var(--emerald) 22%,transparent);border-color:var(--emerald)}
.qopt.wrong{background:color-mix(in srgb,var(--rose) 20%,transparent);border-color:var(--rose)}
.qwhy{margin-top:.6rem;color:var(--mut);font-size:clamp(.76rem,1.5vmin,.93rem);line-height:1.65;display:none}
.qwhy.show{display:block}

/* chips row (tap to classify) */
.taprow{display:flex;gap:.55rem;flex-wrap:wrap}
.tap{font:inherit;font-family:var(--mono);direction:ltr;font-size:clamp(.74rem,1.5vmin,.95rem);
  background:var(--soft);color:var(--ink);border:1px solid var(--line);
  border-radius:11px;padding:.45rem .8rem;cursor:pointer;transition:all .15s ease}
.tap:hover{border-color:var(--ac)}
.tap.lin{background:color-mix(in srgb,var(--emerald) 20%,transparent);border-color:var(--emerald)}
.tap.non{background:color-mix(in srgb,var(--rose) 20%,transparent);border-color:var(--rose)}

/* 3D planes schematic */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,80vw),1fr));gap:1rem}
.pbox{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:.9rem;
  display:flex;flex-direction:column;gap:.5rem;align-items:center}
.pbox svg{width:100%;height:auto;max-height:22vh}
.pbox .pl{font-family:var(--mono);font-size:clamp(.68rem,1.35vmin,.82rem);color:var(--ac);font-weight:700}
.pbox .pd{color:var(--mut);font-size:clamp(.74rem,1.45vmin,.9rem);text-align:center;line-height:1.55}

/* four languages switcher */
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,80vw),1fr));gap:.9rem}
.lcard{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:.9rem 1rem;
  cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:.55rem}
.lcard:hover{border-color:var(--ac)}
.lcard.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);box-shadow:0 0 0 1px var(--ac) inset}
.lcard .lk{font-family:var(--mono);font-size:clamp(.66rem,1.3vmin,.8rem);color:var(--ac);font-weight:700;letter-spacing:.07em}
.lcard .lv{direction:ltr;text-align:center;font-family:var(--mono);font-size:clamp(.78rem,1.6vmin,1rem);line-height:1.7}

/* ---------- لوح الشرح المنبثق ---------- */
#board{position:fixed;z-index:68;top:calc(var(--vbh,3.6rem) + 6px);bottom:3.6rem;left:12px;
  width:min(620px,46vw);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--cyan) 34%,transparent);
  border-radius:20px;box-shadow:0 26px 70px rgba(0,0,0,.66);backdrop-filter:blur(12px);
  transform:translateX(-116%) scale(.97);opacity:0;visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility .42s}
#board.on{transform:translateX(0) scale(1);opacity:1;visibility:visible}
body.boarded .slide{padding-left:calc(min(620px,46vw) + 3.4vw)}
@media (max-width:900px){ body.boarded .slide{padding-left:5vw;padding-bottom:68vh} }
#board.min{bottom:auto;max-height:none}
#board.min .bbody, #board.min .bfoot{display:none}
#board.min .bhead{border-bottom:0;border-radius:19px}
#board .bhead{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);background:rgba(34,211,238,.07);border-radius:19px 19px 0 0}
#board .btitle{font-weight:800;font-size:clamp(.88rem,1.8vmin,1.05rem);flex:1;line-height:1.4}
#board .bbody{flex:1;overflow:auto;padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.9rem}
#board .bfoot{padding:.6rem .9rem;border-top:1px solid var(--line);display:flex;gap:.4rem;align-items:center}
#board .bfoot input{flex:1;min-width:0}
.bq{background:color-mix(in srgb,var(--amber) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);border-radius:12px;
  padding:.5rem .7rem;font-size:clamp(.78rem,1.55vmin,.95rem);line-height:1.6}
.bcard{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:.75rem .85rem;
  display:flex;flex-direction:column;gap:.55rem;animation:bpop .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes bpop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.bcard .bct{font-weight:700;font-size:clamp(.82rem,1.65vmin,1rem);color:var(--cyan)}
.bstep{display:flex;flex-direction:column;gap:.4rem;align-items:center;
  animation:bstep .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--sd,0s)}
@keyframes bstep{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bop{font-family:var(--mono);direction:ltr;color:var(--amber);font-size:clamp(.72rem,1.45vmin,.88rem);
  display:flex;align-items:center;gap:.4rem}
.bop .dn{color:var(--mut);font-size:1.25em;line-height:1;animation:bdn 1.1s ease-in-out infinite}
@keyframes bdn{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(3px);opacity:1}}
.btext{color:var(--mut);font-size:clamp(.76rem,1.5vmin,.92rem);line-height:1.65;text-align:center}
.bnote{background:color-mix(in srgb,var(--emerald) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--emerald) 34%,transparent);border-radius:12px;
  padding:.55rem .75rem;font-size:clamp(.78rem,1.55vmin,.95rem);line-height:1.65}
.mx i.chg{animation:bchg 1.5s ease-out 1;background:color-mix(in srgb,var(--amber) 26%,transparent)}
@keyframes bchg{0%{background:color-mix(in srgb,var(--amber) 62%,transparent);transform:scale(1.22)}
  100%{background:color-mix(in srgb,var(--amber) 26%,transparent);transform:scale(1)}}
#bBoard.has{background:linear-gradient(135deg,var(--amber),color-mix(in srgb,var(--amber) 70%,#f97316));color:var(--on-ac)}
@media (max-width:900px){
  #board{left:8px;right:8px;width:auto;top:auto;bottom:3.4rem;max-height:64vh;
    transform:translateY(116%) scale(.98)}
  #board.on{transform:translateY(0) scale(1)}
}

/* ---------- chrome ---------- */
#chrome{position:fixed;z-index:50;inset:auto 0 0 0;display:flex;align-items:center;gap:.5rem;
  padding:.55rem .8rem;background:linear-gradient(0deg,var(--bg0),color-mix(in srgb,var(--bg0) 60%,transparent),transparent);
  pointer-events:none}
#chrome > *{pointer-events:auto}
.cbtn{font:inherit;font-size:.95rem;width:2.3rem;height:2.3rem;border-radius:11px;cursor:pointer;
  background:var(--soft);color:var(--ink);border:1px solid var(--line);display:grid;place-items:center}
.cbtn:hover{border-color:var(--cyan);color:var(--cyan)}
#counter{font-family:var(--mono);font-size:.8rem;color:var(--mut);min-width:4.6em;text-align:center}
#track{flex:1;height:3px;background:var(--soft);border-radius:999px;overflow:hidden}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .35s ease}
#title{font-size:.8rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}

#menu{position:fixed;inset:0;z-index:60;background:var(--veil);backdrop-filter:blur(8px);
  padding:6vh 5vw;overflow:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
#menu.open{opacity:1;visibility:visible}
#mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,88vw),1fr));gap:.6rem;max-width:1200px;margin:0 auto}
.mitem{display:flex;flex-direction:column;gap:.15rem;background:var(--glass);border:1px solid var(--line);
  border-radius:12px;padding:.6rem .8rem;cursor:pointer;transition:all .15s ease}
.mitem:hover{border-color:var(--cyan)}
.mitem.cur{border-color:var(--cyan);background:rgba(34,211,238,.12)}
.mitem span{font-size:.86rem;font-weight:700}
.mitem span.s{font-size:.74rem;color:var(--mut);font-weight:400}
.mclose{position:fixed;top:2.2vh;left:2.4vw;z-index:61}

/* voice bar */
#voicebar{position:fixed;top:12px;right:12px;z-index:70;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.45rem .6rem;
  box-shadow:0 10px 34px rgba(0,0,0,.5);backdrop-filter:blur(8px);max-width:min(94vw,560px);
  pointer-events:none}
#voicebar > *{pointer-events:auto}
#voicebar b{font-size:.82rem}
#vstatus{font-size:.76rem;color:var(--mut);max-width:16rem;line-height:1.4}
#meter{display:none;border:1px solid var(--line);border-radius:6px;vertical-align:middle}
.vpill{width:.55rem;height:.55rem;border-radius:50%;background:var(--mut2);flex:0 0 auto}
.vpill.live{background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:pulse 1.6s infinite}
.vpill.hear{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.vpill.talk{background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse .9s infinite}

#gate{position:fixed;inset:0;z-index:100;background:var(--veil);display:none;align-items:center;justify-content:center;padding:4vh 5vw}
#gate.on{display:flex}
.gbox{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.5rem;width:min(460px,94vw);
  display:flex;flex-direction:column;gap:.7rem;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.gbox h3{font-size:1.1rem}
.gbox p{color:var(--mut);font-size:.84rem;line-height:1.6}
.gbox input{width:100%}
.gerr{color:var(--rose);font-size:.8rem;min-height:1.1rem}
.transcript{position:fixed;bottom:4.2rem;right:12px;z-index:65;width:min(420px,92vw);max-height:30vh;overflow:auto;
  display:flex;flex-direction:column;gap:.4rem;pointer-events:none}
.tline{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.5rem .7rem;
  font-size:.8rem;line-height:1.55;color:var(--ink);opacity:.95}
.tline.me{border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}