/* EasyLearnSpace tutorials: article layout + interactive visuals */
:root{--t-bg:#0d0b3b;--t-card:#16124d;--t-card2:#1c1760;--t-line:#2e2880;--t-text:#eef0ff;--t-muted:#b4b8e6;--t-head:#ffffff;--t-acc:#7ef0d6;--t-acc-t:#7ef0d6;--t-sun:#ffd84d;--t-pink:#ff5c8a;--t-blue:#8fb0ff;--t-violet:#c3a6ff;--t-wire:#8a8fd0;--t-code:#0a0930;--t-chip:#ffffff0d;--t-shadow:0 10px 30px #0006}
html[data-rt="light"]{--t-bg:#f6f7fb;--t-card:#ffffff;--t-card2:#f1f2fa;--t-line:#dfe2ef;--t-text:#23253f;--t-muted:#5d6185;--t-head:#14163a;--t-acc:#12b897;--t-acc-t:#0b8a71;--t-sun:#c58b00;--t-pink:#e2366a;--t-blue:#3d63d8;--t-violet:#7a4fd6;--t-wire:#8d92b8;--t-code:#14163a;--t-chip:#14163a0a;--t-shadow:0 8px 24px #1b1f4a14}
html[data-rt="light"] body{background:var(--t-bg)}
html[data-rt="light"] body:before{display:none}
.tut{max-width:1440px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:270px minmax(0,1fr) 250px;gap:36px;color:var(--t-text)}
.tut a{color:var(--t-acc-t)}
/* progress bar */
.tut-prog{position:fixed;left:0;top:64px;height:3px;width:0;background:linear-gradient(90deg,var(--t-acc),var(--t-blue));z-index:999;transition:width .1s linear}
/* left tree */
.tut-side{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow:auto;padding:22px 6px 40px 0;scrollbar-width:thin}
.tut-side h2{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted);margin:0 0 10px 8px}
.tut-filter{width:100%;background:var(--t-card);border:1px solid var(--t-line);color:var(--t-text);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;margin-bottom:12px}
.tut-filter:focus{outline:2px solid var(--t-acc);outline-offset:1px}
.tree-c{margin-bottom:2px}
.tree-c>button{width:100%;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--t-head);font:inherit;font-weight:700;font-size:14.5px;padding:9px 8px;border-radius:9px;cursor:pointer;text-align:left}
.tree-c>button:hover{background:var(--t-chip)}
.tree-c>button svg{width:12px;height:12px;flex:none;transition:transform .15s;opacity:.6}
.tree-c.open>button svg{transform:rotate(90deg)}
.tree-c>button em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:var(--t-muted);background:var(--t-chip);border-radius:999px;padding:1px 8px}
.tree-c ul{display:none;list-style:none;margin:2px 0 8px 14px;padding:0 0 0 10px;border-left:1px solid var(--t-line)}
.tree-c.open ul{display:block}
.tree-c li{margin:0}
.tree-c li a{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--t-text);line-height:1.35}
.tree-c li a:hover{background:var(--t-chip);text-decoration:none}
.tree-c li a.cur{background:color-mix(in srgb,var(--t-acc) 16%,transparent);color:var(--t-head);font-weight:700;box-shadow:inset 3px 0 0 var(--t-acc)}
.tree-c li a i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--t-acc-t);border:1px solid color-mix(in srgb,var(--t-acc) 45%,transparent);border-radius:5px;padding:0 5px;flex:none}
.tree-c li.sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--t-muted);padding:10px 8px 4px}
/* main */
.tut-main{min-width:0;padding:22px 0 40px;max-width:820px}
.tut-crumb{font-size:13.5px;color:var(--t-muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tut-crumb a{color:var(--t-muted)}
.tut-crumb span{opacity:.6}
.tut-main h1{font-size:clamp(30px,4vw,44px);line-height:1.15;font-weight:900;letter-spacing:-.02em;color:var(--t-head);margin:0 0 14px}
.tut-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13.5px;color:var(--t-muted);padding-bottom:18px;border-bottom:1px solid var(--t-line)}
.tut-meta b{color:var(--t-text);font-weight:700}
.tut-meta .pill{background:color-mix(in srgb,var(--t-acc) 14%,transparent);color:var(--t-acc-t);font-weight:800;border-radius:999px;padding:3px 10px;font-size:12px}
.tut-tools{margin-left:auto;display:flex;gap:6px}
.tut-tools button{appearance:none;border:1px solid var(--t-line);background:var(--t-card);color:var(--t-text);border-radius:999px;height:34px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.tut-tools button:hover{border-color:var(--t-acc)}
.tut-tools svg{width:15px;height:15px}
.tut-lead{font-size:19px;line-height:1.65;color:var(--t-text);margin:20px 0 6px}
.tut-learn{background:var(--t-card);border:1px solid var(--t-line);border-radius:16px;padding:18px 22px;margin:22px 0}
.tut-learn b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-acc-t);margin-bottom:8px}
.tut-learn ul{margin:0;padding-left:20px}
.tut-learn li{margin:4px 0}
.tut-body{font-size:17px;line-height:1.78}
.tut-body>*+*{margin-top:16px}
.tut-body h2{font-size:28px;line-height:1.25;font-weight:850;color:var(--t-head);margin-top:48px;padding-top:6px;letter-spacing:-.01em;scroll-margin-top:90px}
.tut-body h3{font-size:21px;font-weight:800;color:var(--t-head);margin-top:30px;scroll-margin-top:90px}
.tut-body h2 .hn{color:var(--t-acc-t);margin-right:10px;font-size:.8em}
.tut-body p,.tut-body li{color:var(--t-text)}
.tut-body ul,.tut-body ol{padding-left:24px}
.tut-body li{margin:6px 0}
.tut-body strong{color:var(--t-head)}
.tut-body code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--t-chip);border:1px solid var(--t-line);border-radius:6px;padding:1px 6px}
.tut-body table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--t-line);border-radius:14px;overflow:hidden;display:block;overflow-x:auto}
.tut-body thead th{background:var(--t-card2);color:var(--t-head);font-weight:800;text-align:left}
.tut-body th,.tut-body td{padding:11px 14px;border-bottom:1px solid var(--t-line);vertical-align:top}
.tut-body tbody tr:last-child td{border-bottom:0}
.tut-body tbody tr:hover td{background:var(--t-chip)}
.tut-body .formula{font-family:"Cambria Math","STIX Two Math","Times New Roman",serif;font-size:21px;text-align:center;background:var(--t-card);border:1px solid var(--t-line);border-radius:14px;padding:16px;overflow-x:auto;color:var(--t-head)}
/* callouts */
.co{border:1px solid var(--t-line);border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 8%,var(--t-card));border-radius:14px;padding:14px 18px}
.co>.co-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;letter-spacing:.03em;color:var(--c);margin-bottom:4px;text-transform:uppercase}
.co>.co-h svg{width:18px;height:18px}
.co p{margin:6px 0}
.co.note{--c:var(--t-blue)}.co.tip{--c:var(--t-acc-t)}.co.warn{--c:var(--t-sun)}.co.key{--c:var(--t-violet)}.co.eg{--c:var(--t-pink)}
/* code */
.code{border:1px solid var(--t-line);border-radius:14px;overflow:hidden;background:var(--t-code)}
.code-h{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#ffffff08;border-bottom:1px solid #ffffff14;font-size:12.5px;font-weight:700;color:#a9addc;letter-spacing:.04em}
.code-h button{appearance:none;background:none;border:1px solid #ffffff22;color:#d9dcff;border-radius:7px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.code-h button:hover{border-color:#7ef0d6;color:#fff}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.65;color:#e6e8ff;background:none}
.code pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.code+.code.out{margin-top:-8px;border-top-left-radius:0;border-top-right-radius:0}
.code.out{background:#06051c}
.code.out .code-h{color:#7ef0d6}
.code.out pre{color:#c6f7ea}
/* tabs inside article */
.tabs{border:1px solid var(--t-line);border-radius:14px;overflow:hidden}
.tabs-b{display:flex;gap:2px;background:var(--t-card2);padding:6px;overflow-x:auto}
.tabs-b button{appearance:none;border:0;background:none;color:var(--t-muted);font:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tabs-b button.on{background:var(--t-card);color:var(--t-head);box-shadow:var(--t-shadow)}
.tabs-p{padding:4px 18px 16px}
.tabs-p>div{display:none}.tabs-p>div.on{display:block;animation:tutfade .25s}
@keyframes tutfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* compare cards */
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cmp>div{background:var(--t-card);border:1px solid var(--t-line);border-radius:14px;padding:14px 16px}
.cmp>div>b{display:block;color:var(--t-head);font-size:16px;margin-bottom:4px}
.cmp>div p{font-size:15px;margin:4px 0 0}
/* quiz */
.tq{background:var(--t-card);border:1px solid var(--t-line);border-radius:18px;padding:22px;margin-top:40px}
.tq-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.tq-h h2{margin:0!important;padding:0!important;font-size:24px!important}
.tq-score{font-weight:800;color:var(--t-acc-t);font-size:14px}
.tq-q{border-top:1px solid var(--t-line);padding:16px 0 4px}
.tq-q>p{font-weight:700;color:var(--t-head);margin:0 0 10px}
.tq-o{display:grid;gap:8px}
.tq-o button{appearance:none;text-align:left;background:var(--t-bg);border:1px solid var(--t-line);color:var(--t-text);border-radius:12px;padding:11px 14px;font:inherit;font-size:15.5px;cursor:pointer;transition:.15s}
.tq-o button:hover:not(:disabled){border-color:var(--t-acc);transform:translateX(3px)}
.tq-o button.right{border-color:#21c38f;background:color-mix(in srgb,#21c38f 16%,var(--t-bg));color:var(--t-head);font-weight:700}
.tq-o button.wrong{border-color:var(--t-pink);background:color-mix(in srgb,var(--t-pink) 12%,var(--t-bg))}
.tq-o button:disabled{cursor:default}
.tq-x{display:none;margin:10px 0 6px;font-size:15px;color:var(--t-muted);background:var(--t-chip);border-radius:10px;padding:10px 12px}
.tq-q.done .tq-x{display:block}
/* faq */
.tfaq{margin-top:40px}
.tfaq details{background:var(--t-card);border:1px solid var(--t-line);border-radius:14px;margin-top:10px;overflow:hidden}
.tfaq summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--t-head);list-style:none;display:flex;justify-content:space-between;gap:12px}
.tfaq summary::-webkit-details-marker{display:none}
.tfaq summary:after{content:"+";font-size:22px;line-height:1;color:var(--t-acc-t);transition:transform .2s}
.tfaq details[open] summary:after{transform:rotate(45deg)}
.tfaq details>div{padding:0 18px 16px;color:var(--t-text)}
/* prev / next */
.tpn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.tpn a{background:var(--t-card);border:1px solid var(--t-line);border-radius:16px;padding:16px 18px;color:var(--t-text);transition:.15s}
.tpn a:hover{border-color:var(--t-acc);text-decoration:none;transform:translateY(-2px)}
.tpn small{display:block;color:var(--t-muted);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tpn b{display:block;color:var(--t-head);font-size:16.5px;margin-top:4px}
.tpn a.nx{text-align:right;grid-column:2}
.tut-yt{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;background:linear-gradient(120deg,#2a1f8f,#16124d);border:1px solid #3a3490;border-radius:18px;padding:20px 22px;color:#eef0ff}
.tut-yt b{font-size:18px;color:#fff}
.tut-yt p{margin:2px 0 0;color:#b4b8e6;font-size:14.5px}
.tut-yt a{background:#ff2d2d;color:#fff!important;font-weight:800;border-radius:999px;padding:10px 18px}
.tut-yt a:hover{text-decoration:none;background:#e01f1f}
/* right rail */
.tut-rail{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;padding:26px 0 30px;font-size:14px}
.tut-rail h2{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted);margin:0 0 10px}
.ttoc{list-style:none;margin:0 0 26px;padding:0;border-left:2px solid var(--t-line)}
.ttoc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--t-muted);line-height:1.4}
.ttoc a:hover{color:var(--t-head);text-decoration:none}
.ttoc a.on{color:var(--t-acc-t);border-left-color:var(--t-acc);font-weight:700}
.ttoc .l3 a{padding-left:26px;font-size:13px}
.rel{display:grid;gap:8px;margin-bottom:24px}
.rel a{display:block;background:var(--t-card);border:1px solid var(--t-line);border-radius:12px;padding:10px 12px;color:var(--t-text);font-weight:600;line-height:1.35}
.rel a:hover{border-color:var(--t-acc);text-decoration:none}
.rel a small{display:block;color:var(--t-muted);font-weight:500;font-size:12px;margin-top:2px}
/* mobile bar */
.tut-mbar{display:none}
.tut-scrim{display:none}
@media (max-width:1180px){.tut{grid-template-columns:250px minmax(0,1fr)}.tut-rail{display:none}.tut-mtoc{display:block!important}}
@media (max-width:860px){
 .tut{grid-template-columns:minmax(0,1fr);padding:0 16px}
 .tut-mbar{display:flex;gap:8px;position:sticky;top:64px;z-index:50;background:color-mix(in srgb,var(--t-bg) 92%,transparent);backdrop-filter:blur(8px);padding:10px 16px;margin:0 -16px;border-bottom:1px solid var(--t-line)}
 .tut-mbar button{flex:1;appearance:none;border:1px solid var(--t-line);background:var(--t-card);color:var(--t-head);border-radius:10px;height:38px;font:inherit;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
 .tut-mbar svg{width:16px;height:16px}
 .tut-side{position:fixed;top:64px;left:0;bottom:0;width:min(340px,88vw);height:calc(100vh - 64px);align-self:auto;z-index:1500;background:var(--t-bg);padding:18px 16px 40px;transform:translateX(-102%);transition:transform .25s;box-shadow:var(--t-shadow);border-right:1px solid var(--t-line)}
 .tut-side.open{transform:none}
 .tut-scrim.open{display:block;position:fixed;inset:64px 0 0 0;background:#0007;z-index:1400}
 .tut-main{padding-top:0}
 .tut-crumb{margin-top:14px}
 .tut-body{font-size:16.5px}
 .tut-body h2{font-size:24px;margin-top:38px}
 .tpn{grid-template-columns:1fr}.tpn a.nx{grid-column:1}
 .tut-tools{margin-left:0}
}
.tut-mtoc{display:none;background:var(--t-card);border:1px solid var(--t-line);border-radius:14px;margin:18px 0 0}
.tut-mtoc summary{cursor:pointer;padding:12px 16px;font-weight:800;color:var(--t-head)}
.tut-mtoc ol{margin:0;padding:0 18px 14px 38px}
.tut-mtoc li{margin:4px 0}

/* ================= interactive visual widgets ================= */
.viz{background:var(--t-card);border:1px solid var(--t-line);border-radius:20px;padding:18px 18px 16px;margin:30px 0;box-shadow:var(--t-shadow);font-size:15px;line-height:1.55}
.vz-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:12px}
.vz-head b{font-size:17px;color:var(--t-head)}
.vz-head small{flex-basis:100%;color:var(--t-muted);font-size:14px}
.vz-badge{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(90deg,var(--t-acc),var(--t-blue));color:#0d0b3b;border-radius:6px;padding:3px 8px}
.vz-stage{overflow-x:auto;border-radius:14px;background:var(--t-bg);border:1px solid var(--t-line);padding:6px}
.vz-stage svg{display:block;width:100%;height:auto;min-width:560px}
.vt{fill:var(--t-text);font-family:Inter,system-ui,sans-serif;font-size:15px}
.vt.sm{font-size:14px}.vt.xs{font-size:12px}.vt.b{font-weight:700}.vt.lab{font-size:17px;font-style:italic;font-weight:700;fill:var(--t-head)}.vt.op{font-size:22px;font-weight:700}
.vt.mint{fill:var(--t-acc-t);font-weight:700}.vt.muted{fill:var(--t-muted)}.vt.dark{fill:#0d0b3b;font-weight:700}
.vz-box{fill:color-mix(in srgb,var(--t-acc) 5%,transparent);stroke:var(--t-line);stroke-width:1.5}
.vz-wire{fill:none;stroke:var(--t-wire);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,opacity .3s}
.vz-wire.thick{stroke-width:4}
.vz-wire.on{stroke:var(--t-acc)}
.vz-arrowhead{fill:var(--t-wire)}
.vz-node circle{fill:var(--t-card);stroke:var(--t-wire);stroke-width:2}
.vz-node.on circle{stroke:var(--t-acc);stroke-width:3}
.vz-gate rect{stroke:var(--t-wire);stroke-width:1.6;fill:var(--t-card);transition:fill .3s}
.vz-gate.on rect{stroke:var(--t-acc);stroke-width:3}
svg.stepping [data-s]:not(.on){opacity:.22}
svg [data-s]{transition:opacity .35s}
.vz-pulse{fill:var(--t-acc);filter:drop-shadow(0 0 6px var(--t-acc))}
.vz-pulse.pink{fill:var(--t-pink);filter:drop-shadow(0 0 6px var(--t-pink))}
.vz-grid{stroke:var(--t-line);stroke-width:1}
.vz-axis{stroke:var(--t-muted);stroke-width:1.5;stroke-dasharray:5 4}
.vz-bar.pink{fill:var(--t-pink)}.vz-bar.mint{fill:var(--t-acc)}
.pink-t{color:var(--t-pink)}.mint-t{color:var(--t-acc-t)}.muted{color:var(--t-muted)}
.vz-cell{fill:var(--t-card);stroke:var(--t-wire);stroke-width:1.6}
.vz-cellg{transition:opacity .3s}
.vz-cellg.dim{opacity:.25}
.vz-cellg.hot .vz-cell{stroke:var(--t-acc);stroke-width:3}
.vz-gbar{fill:var(--t-pink);transition:all .4s}
.vz-arc{fill:none;stroke:var(--t-acc);stroke-linecap:round}
.vz-tok{cursor:pointer}
.vz-tok rect{fill:var(--t-card);stroke:var(--t-line);stroke-width:1.5;transition:.2s}
.vz-tok:hover rect,.vz-tok:focus rect{stroke:var(--t-acc)}
.vz-tok:focus{outline:none}
.vz-tok.sel rect{fill:var(--t-acc);stroke:var(--t-acc)}
.vz-tok.sel .vt{fill:#0d0b3b}
.vz-wbar{fill:var(--t-acc);transition:width .3s}
.vz-mcell{cursor:pointer;stroke:var(--t-line)}
.vz-mcell.selrow{stroke:var(--t-sun);stroke-width:1.5}
.vz-fnode rect{fill:var(--t-card);stroke:var(--t-wire);stroke-width:1.6;transition:.3s}
.vz-fnode.on rect{stroke:var(--t-acc);stroke-width:3;fill:color-mix(in srgb,var(--t-acc) 14%,var(--t-card))}
.vz-fnode.tool rect{stroke-dasharray:5 4}
svg.stepping .vz-fnode:not(.on){opacity:.4}
svg.stepping .vz-wire:not(.on){opacity:.3}
.vz-lane{fill:var(--t-chip);stroke:var(--t-line);stroke-dasharray:6 5}
.vz-arr rect{fill:var(--t-card);stroke:var(--t-wire);stroke-width:1.6;transition:.3s}
.vz-arr{transition:opacity .35s}
.vz-arr.out{opacity:.22}
.vz-arr.mid rect{stroke:var(--t-sun);stroke-width:3;fill:color-mix(in srgb,var(--t-sun) 18%,var(--t-card))}
.vz-arr.found rect{stroke:var(--t-acc);stroke-width:3;fill:var(--t-acc)}
.vz-arr.found .vt{fill:#0d0b3b}
.vz-ptr{transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.vz-ptr.pL path,.vz-ptr.pL .vt{fill:var(--t-blue)}.vz-ptr.pM path,.vz-ptr.pM .vt{fill:var(--t-sun)}.vz-ptr.pR path,.vz-ptr.pR .vt{fill:var(--t-pink)}
.vz-ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 18px;margin-top:14px}
.vz-sl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;font-size:13.5px;color:var(--t-muted);font-weight:600}
.vz-sl input{grid-column:1/-1;width:100%;accent-color:var(--t-acc);height:22px}
.vz-sl output{font-weight:800;color:var(--t-head);font-variant-numeric:tabular-nums}
.vz-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vz-step{margin-top:14px}
.vz-b{appearance:none;border:1px solid var(--t-line);background:var(--t-bg);color:var(--t-head);border-radius:10px;height:38px;padding:0 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.vz-b:hover:not(:disabled){border-color:var(--t-acc)}
.vz-b.pri{background:var(--t-acc);border-color:var(--t-acc);color:#0d0b3b;min-width:84px}
.vz-b.ghost{background:none;color:var(--t-muted)}
.vz-b:disabled{opacity:.4;cursor:default}
.vz-dots{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.vz-dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--t-wire);background:none;padding:0;cursor:pointer}
.vz-dots button.done{background:var(--t-wire)}
.vz-dots button.on{background:var(--t-acc);border-color:var(--t-acc);transform:scale(1.25)}
.vz-cap{margin-top:12px;background:var(--t-bg);border:1px solid var(--t-line);border-left:4px solid var(--t-acc);border-radius:12px;padding:12px 14px;min-height:64px;color:var(--t-text);font-size:15px}
.vz-cap b{color:var(--t-head)}
.vz-k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0d0b3b;background:var(--t-acc);border-radius:6px;padding:2px 7px;margin-right:8px}
.vz-pre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:13.5px;color:var(--t-muted)}
.vz-chip{appearance:none;border:1px solid var(--t-line);background:var(--t-bg);color:var(--t-text);border-radius:999px;padding:6px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.vz-chip:hover{border-color:var(--t-acc);color:var(--t-head)}
.vz-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.vz-in{flex:1;min-width:200px;background:var(--t-bg);border:1px solid var(--t-line);color:var(--t-head);border-radius:10px;height:40px;padding:0 12px;font:inherit;font-size:15px}
.vz-in.sm{flex:0 0 96px;min-width:0}
.vz-in:focus,.vz-ta:focus{outline:2px solid var(--t-acc);outline-offset:1px}
.vz-ta{width:100%;background:var(--t-bg);border:1px solid var(--t-line);color:var(--t-text);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.vz-seg{display:inline-flex;background:var(--t-bg);border:1px solid var(--t-line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.vz-seg button{appearance:none;border:0;background:none;color:var(--t-muted);font:inherit;font-size:13.5px;font-weight:700;padding:7px 12px;border-radius:8px;cursor:pointer}
.vz-seg button.on{background:var(--t-acc);color:#0d0b3b}
.vz-tog{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--t-muted);font-weight:600;cursor:pointer}
.vz-tog input{accent-color:var(--t-acc);width:16px;height:16px}
.vz-mats{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;background:var(--t-bg);border:1px solid var(--t-line);border-radius:14px;padding:18px;min-height:150px}
.vz-mats.pop>*{animation:tutfade .4s both}
.vz-mats.pop>*:nth-child(2){animation-delay:.12s}.vz-mats.pop>*:nth-child(3){animation-delay:.24s}.vz-mats.pop>*:nth-child(4){animation-delay:.36s}.vz-mats.pop>*:nth-child(5){animation-delay:.48s}
.vz-mat-n{font-size:12.5px;font-weight:800;color:var(--t-muted);text-align:center;margin-bottom:6px}
.vz-mat table{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
.vz-mat td{min-width:44px;text-align:center;padding:6px 8px;border-radius:7px;background:var(--t-card);border:1px solid var(--t-line);font-weight:700;color:var(--t-head);font-size:14px}
.vz-mat th{font-size:12px;color:var(--t-muted);font-weight:700;padding:0 6px}
.vz-mat.q td{border-color:var(--t-blue)}.vz-mat.k td{border-color:var(--t-violet)}.vz-mat.v td{border-color:var(--t-pink)}
.vz-mat.hl td{border-color:var(--t-acc)}
.vz-mat.heat td{background:color-mix(in srgb,var(--t-acc) 22%,var(--t-card))}
.vz-op{font-size:26px;font-weight:800;color:var(--t-muted)}
.vz-formula{font-family:"Cambria Math","Times New Roman",serif;font-size:22px;color:var(--t-head);text-align:center}
.vz-chunks{margin-top:12px;display:grid;gap:12px}
.vz-chunk-text{background:var(--t-bg);border:1px solid var(--t-line);border-radius:12px;padding:12px 14px;font-size:14.5px;line-height:1.9;color:var(--t-head)}
.vz-chunk-text span{border-radius:3px;padding:2px 0}
.vz-chunk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-height:300px;overflow:auto}
.vz-chunk-list>div{border:1px solid;border-radius:12px;padding:10px 12px;background:var(--t-bg);animation:tutfade .3s}
.vz-chunk-list small{color:var(--t-muted)}
.vz-chunk-list p{margin:4px 0 0;font-size:13.5px;color:var(--t-text)}
.vz-rag{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.vz-rag-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted);margin-bottom:8px}
.vz-hit{border:1px solid var(--t-line);border-radius:10px;padding:8px 10px;margin-bottom:6px;background:var(--t-bg);opacity:.6;animation:tutfade .35s both;animation-delay:var(--d)}
.vz-hit.on{opacity:1;border-color:var(--t-acc)}
.vz-hit-t{display:flex;justify-content:space-between;font-size:14px}
.vz-hit-t span{font-variant-numeric:tabular-nums;font-weight:800;color:var(--t-acc-t)}
.vz-hit-bar{height:6px;background:var(--t-chip);border-radius:4px;margin-top:6px;overflow:hidden}
.vz-hit-bar i{display:block;height:100%;background:var(--t-acc);border-radius:4px;transition:width .4s}
.vz-hit p{margin:6px 0 0;font-size:13.5px;color:var(--t-text)}
.vz-prompt{white-space:pre-wrap;background:#0a0930;color:#e6e8ff;border-radius:12px;padding:14px;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.6;margin:0;max-height:430px;overflow:auto}
.vz-prompt .sys{color:#c3a6ff}.vz-prompt .ctx{color:#7ef0d6}.vz-prompt .usr{color:#ffd84d}
.vz-log{margin-top:12px;background:#0a0930;border-radius:12px;padding:12px;max-height:260px;overflow:auto;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55}
.vz-log-e{color:#7d82b8}
.vz-log-r{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:6px 4px;border-bottom:1px dashed #ffffff14;color:#e6e8ff}
.vz-log-r.new{animation:tutfade .4s}
.vz-log-r b{color:#7d82b8;font-weight:800}
.vz-log-r.user b{color:#ffd84d}.vz-log-r.thought b{color:#c3a6ff}.vz-log-r.action b{color:#8fb0ff}.vz-log-r.observation b{color:#7ef0d6}.vz-log-r.finalanswer b,.vz-log-r.answer b{color:#21c38f}.vz-log-r.problem b{color:#ff5c8a}
.vz-grow{display:grid;gap:14px;margin-top:14px}
.vz-grow>div{display:grid;grid-template-columns:200px 1fr 150px;gap:12px;align-items:center;font-size:14px}
.vz-grow b{color:var(--t-head);text-align:right;font-variant-numeric:tabular-nums}
.vz-gbarw{height:16px;background:var(--t-chip);border-radius:8px;overflow:hidden}
.vz-gbarw i{display:block;height:100%;border-radius:8px;transition:width .3s}
.vz-gbarw i.pink{background:var(--t-pink)}.vz-gbarw i.mint{background:var(--t-acc)}
@media (max-width:700px){.vz-rag{grid-template-columns:1fr}.vz-grow>div{grid-template-columns:1fr auto}.vz-grow>div .vz-gbarw{grid-column:1/-1;grid-row:2}.vz-dots{margin-left:0;flex-basis:100%}.viz{padding:14px 12px;margin:24px -4px}.vz-log-r{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* pygments (github-dark-like) */
.code .k,.code .kn,.code .kd,.code .kc,.code .kr,.code .ow{color:#ff7b72}.code .s,.code .s1,.code .s2,.code .sa,.code .sb,.code .se,.code .si,.code .sd{color:#a5d6ff}.code .c,.code .c1,.code .cm,.code .ch{color:#8b949e;font-style:italic}.code .nf,.code .fm{color:#d2a8ff}.code .nc{color:#ffa657}.code .mi,.code .mf,.code .m,.code .il{color:#79c0ff}.code .nb,.code .bp{color:#ffa657}.code .o{color:#ff7b72}.code .nd{color:#d2a8ff}.code .p{color:#e6e8ff}.code .n{color:#e6e8ff}
/* tutorials hub */
.th-hero{padding:40px 0 10px;max-width:900px}
.th-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--t-head)}
.th-hero h1 em{font-style:normal;background:linear-gradient(90deg,#7ef0d6,#8fb0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.th-hero p{font-size:18px;color:var(--t-muted);margin-top:12px;max-width:720px}
.th-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 18px;border-bottom:1px solid var(--t-line)}
.th-tabs button{appearance:none;border:0;background:none;color:var(--t-muted);font:inherit;font-weight:700;font-size:15px;padding:12px 14px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.th-tabs button.on{color:var(--t-head);border-bottom-color:var(--t-acc)}
.th-tabs button em{font-style:normal;font-size:12px;background:var(--t-chip);border-radius:999px;padding:1px 8px;margin-left:6px}
.th-pane{display:none}.th-pane.on{display:block;animation:tutfade .3s}
.th-feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.th-card{display:flex;flex-direction:column;background:var(--t-card);border:1px solid var(--t-line);border-radius:20px;overflow:hidden;color:var(--t-text);transition:.18s}
.th-card:hover{border-color:var(--t-acc);transform:translateY(-4px);text-decoration:none;box-shadow:var(--t-shadow)}
.th-art{height:150px;position:relative;background:var(--g);overflow:hidden}
.th-art svg{position:absolute;inset:0;width:100%;height:100%}
.th-card>div:last-child{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.th-card small{color:var(--t-acc-t);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.th-card b{font-size:19px;color:var(--t-head);line-height:1.3}
.th-card p{color:var(--t-muted);font-size:14.5px;margin:0;flex:1}
.th-card .th-m{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--t-muted);margin-top:6px}
.th-card .th-m span{background:var(--t-chip);border-radius:7px;padding:3px 8px}
.th-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.th-cat{background:var(--t-card);border:1px solid var(--t-line);border-radius:18px;padding:18px}
.th-cat h3{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--t-head);margin:0 0 10px}
.th-cat h3 span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.th-cat h3 svg{width:20px;height:20px}
.th-cat ul{list-style:none;margin:0;padding:0}
.th-cat li.more{display:none}
.th-cat li a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;color:var(--t-text);font-size:14.5px;border-bottom:1px dashed var(--t-line)}
.th-cat li a:hover{color:var(--t-acc-t);text-decoration:none}
.th-cat li a i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--t-acc-t)}
.th-cat .th-all{display:inline-block;margin-top:10px;font-weight:700;font-size:14px}
.th-search{display:flex;gap:10px;align-items:center;max-width:620px;margin-top:22px;background:var(--t-card);border:1px solid var(--t-line);border-radius:14px;padding:4px 6px 4px 14px}
.th-search svg{width:18px;height:18px;color:var(--t-muted);flex:none}
.th-search input{flex:1;background:none;border:0;outline:0;color:var(--t-head);font:inherit;font-size:16px;height:44px}
.th-rm{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.th-rm a{background:var(--t-card);border:1px solid var(--t-line);border-radius:18px;padding:18px;color:var(--t-text)}
.th-rm a:hover{border-color:var(--t-acc);text-decoration:none}
.th-rm b{display:block;font-size:17px;color:var(--t-head)}
.th-rm p{color:var(--t-muted);font-size:14px;margin:4px 0 10px}
.th-rm ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.th-rm li{font-size:12px;background:var(--t-chip);border-radius:7px;padding:3px 8px}
.tut-body .viz table{display:table;width:auto;border:0;border-radius:0;overflow:visible;font-size:14px}
.tut-body .viz th,.tut-body .viz td{border-bottom:0;padding:6px 8px}
.tut-body .viz th{background:none;padding:0 6px}
.tut-body .viz tbody tr:hover td{background:var(--t-card)}
.vz-swipe{font-size:12.5px;font-weight:700;color:var(--t-acc-t);margin:0 0 6px;display:flex;align-items:center;gap:6px}
.vz-swipe:before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:6px 0 0 currentColor}
@media (max-width:700px){.vz-stage svg{min-width:520px}.vt.xs{font-size:13px}.vt.sm{font-size:15px}}