@font-face{font-family:"Thmanyah";src:url(/assets/fonts/ths-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah";src:url(/assets/fonts/ths-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah";src:url(/assets/fonts/ths-Black.woff2) format("woff2");font-weight:900;font-display:swap}
:root{
  --bg:#050D15;--bg2:#0A1723;--card:#0E1F2E;--card2:#13293C;--line:#1E3A52;--ink:#E9F2F9;--muted:#8DA5B9;--faint:#5C778C;
  --amber:#F5A524;--amber-ink:#1A1206;--cyan:#33B6E8;--red:#F0605A;--green:#3FD08A;--violet:#A98BFF;--teal:#2ED3B7;--blue:#7DA8FF;--pink:#FF7EB3;
  --ok-bg:rgba(63,208,138,.12);--bad-bg:rgba(240,96,90,.12);
  --f-ui:"Thmanyah","Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;--f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3{line-height:1.3;margin:0;text-wrap:balance}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.fx{unicode-bidi:isolate;direction:ltr}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.c-teal{--tc:var(--teal)}.c-blue{--tc:var(--blue)}.c-pink{--tc:var(--pink)}.c-red{--tc:var(--red)}.c-cyan{--tc:var(--cyan)}.c-amber{--tc:var(--amber)}.c-green{--tc:var(--green)}.c-violet{--tc:var(--violet)}
.skip{position:absolute;top:-60px;right:12px;background:var(--amber);color:var(--amber-ink);padding:8px 14px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{top:12px}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top .wrap{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;line-height:1.1}
.brand svg{flex:none}
.brand small{display:block;font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.04em;direction:ltr;text-align:right}
.nav{display:flex;gap:2px;margin-inline-start:auto}
.nav a{padding:7px 14px;border-radius:999px;color:var(--muted);font-weight:700;font-size:15px;transition:color .2s,background .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--card2)}
.yt{display:inline-flex;align-items:center;gap:6px;background:#E62117;color:#fff;font-weight:700;font-size:14px;padding:7px 14px;border-radius:999px}
@media (max-width:860px){
  .nav{display:none}
  .top .yt{margin-inline-start:auto}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .tabs{display:grid!important}
}
.tabs{display:none;grid-template-columns:repeat(5,1fr);position:fixed;inset:auto 0 0;z-index:60;background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted);font-weight:700;padding:3px 0}
.tabs a[aria-current="page"]{color:var(--amber)}

/* buttons, pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);padding:11px 20px;border-radius:12px;font-weight:700;transition:transform .15s,border-color .2s}
.btn:hover{border-color:var(--amber)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--amber);color:var(--amber-ink);border-color:transparent}
.btn.ghost{background:transparent}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.pill.t{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 45%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent)}
.eyebrow{font-size:13px;font-weight:700;color:var(--amber);letter-spacing:.02em}

/* generic page head */
.phead{padding:44px 0 26px;position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;background:radial-gradient(closest-side,color-mix(in srgb,var(--tc,var(--amber)) 22%,transparent),transparent);pointer-events:none}
.phead h1{font-size:clamp(28px,5vw,44px);font-weight:900;position:relative}
.phead p{color:var(--muted);max-width:40em;margin:10px 0 0;position:relative}
.crumbs{font-size:13.5px;color:var(--faint);margin-bottom:10px;position:relative}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
section.blk{padding:28px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-h h2{font-size:24px;font-weight:900}
.sec-h a{color:var(--cyan);font-weight:700;font-size:14.5px}

/* cards */
.grid{display:grid;gap:14px}
.g-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}
.lcard:hover{transform:translateY(-3px);border-color:var(--tc,var(--amber))}
.lcard .b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lcard h3{font-size:16.5px;font-weight:700}
.lcard .sub{font-size:13px;color:var(--muted)}
.lcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.cover{position:relative;aspect-ratio:16/9;background:var(--bg2) center/cover no-repeat;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.cover .dur{position:absolute;bottom:8px;left:8px;background:rgba(4,10,16,.85);color:#fff;font-family:var(--f-mono);font-size:12px;padding:2px 7px;border-radius:6px}
.cover .done{position:absolute;top:8px;right:8px;background:var(--green);color:#04130B;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;display:none}
.is-done .cover .done{display:block}
.cover.v{aspect-ratio:9/12}
.play{position:absolute;inset:auto auto 10px 50%;transform:translateX(-50%)}
.scard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:start;display:flex;flex-direction:column;transition:border-color .2s}
.scard:hover{border-color:var(--tc,var(--amber))}
.scard .b{padding:10px 12px 12px}
.scard h3{font-size:14.5px;font-weight:700;line-height:1.45}
.scard .k{font-size:11.5px;font-weight:700;color:var(--tc)}
.g-shorts{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (max-width:480px){.g-shorts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* track tiles */
.track{display:grid;grid-template-columns:46px 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;transition:border-color .2s,transform .25s}
.track:hover{border-color:var(--tc);transform:translateY(-2px)}
.track h3{font-size:18px;font-weight:900}
.track .en{font-family:var(--f-mono);font-size:11.5px;color:var(--tc)}
.track p{color:var(--muted);font-size:14.5px;margin:6px 0 8px;line-height:1.6}
.track .meta{font-size:12.5px;color:var(--faint)}
.depth{position:relative;width:46px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;min-height:110px}
.depth i{position:absolute;inset:auto 0 0;background:linear-gradient(to top,var(--tc),color-mix(in srgb,var(--tc) 30%,transparent));height:0;transition:height .8s}
.depth span{position:absolute;inset:auto 0 4px;text-align:center;font-family:var(--f-mono);font-size:11px;font-weight:600}

/* filters */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.chip{border:1px solid var(--line);background:var(--card);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 12px;flex:1;min-width:220px}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:10px 0;outline:none}
.empty{color:var(--muted);padding:30px;text-align:center;border:1px dashed var(--line);border-radius:14px}

/* lesson page */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;padding-bottom:30px}
@media (max-width:960px){.lesson{grid-template-columns:minmax(0,1fr)}}
.player{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000 center/cover no-repeat;border:1px solid var(--line)}
.player img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s}
.player:hover img{opacity:1}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .pbtn{position:absolute;inset:0;display:grid;place-items:center}
.player .pbtn span{width:78px;height:78px;border-radius:50%;background:var(--amber);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(245,165,36,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(245,165,36,0)}100%{box-shadow:0 0 0 0 rgba(245,165,36,0)}}
.ltitle{margin:20px 0 6px;font-size:clamp(24px,4vw,34px);font-weight:900}
.lmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.article{font-size:17.5px;line-height:1.95;max-width:46em}
.article h2{font-size:22px;font-weight:900;margin:34px 0 10px;display:flex;align-items:center;gap:10px}
.article h2::before{content:"";width:6px;height:22px;border-radius:3px;background:var(--tc,var(--amber))}
.article p{margin:0 0 14px;color:color-mix(in srgb,var(--ink) 90%,var(--muted))}
.kp{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.kp li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.kp li b{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--tc);font-family:var(--f-mono);font-size:13px}
.side{display:flex;flex-direction:column;gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.panel h3{font-size:16px;font-weight:900;margin-bottom:10px}
.nl{display:flex;flex-direction:column;gap:2px}
.nl a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:8px;border-radius:10px;font-size:14.5px;align-items:start}
.nl a:hover{background:var(--card2)}
.nl a[aria-current="page"]{background:color-mix(in srgb,var(--tc) 14%,transparent);color:var(--ink)}
.nl a span.n{font-family:var(--f-mono);font-size:12px;color:var(--faint);padding-top:3px}
.nl a.d span.n{color:var(--green)}
.donebtn[aria-pressed="true"]{background:var(--ok-bg);border-color:var(--green);color:var(--green)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.pn a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14.5px}
.pn a small{display:block;color:var(--faint);font-size:12px}
.pn a:hover{border-color:var(--tc)}
.pn .nx{text-align:left}
.terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

/* quiz */
.quiz{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:10px}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.qhead .score{font-family:var(--f-mono);font-size:14px;color:var(--muted)}
.qitem{border-top:1px dashed var(--line);padding:14px 0}
.qitem:first-of-type{border-top:0}
.qitem .q{font-weight:700;margin-bottom:10px}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;text-align:start;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;transition:border-color .2s,background .2s}
.opt .k{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:13px;background:var(--card);border:1px solid var(--line)}
.opt:hover:not([disabled]){border-color:var(--cyan)}
.opt[disabled]{cursor:default}
.opt.right{background:var(--ok-bg);border-color:var(--green)}
.opt.right .k{background:var(--green);color:#04130B;border-color:transparent}
.opt.wrong{background:var(--bad-bg);border-color:var(--red)}
.opt.wrong .k{background:var(--red);color:#fff;border-color:transparent}
.why{margin-top:10px;font-size:15px;color:var(--muted);background:var(--bg2);border-radius:10px;padding:10px 12px;display:none}
.answered .why{display:block}

/* tools, glossary */
.tools{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@media (max-width:480px){.tools{grid-template-columns:minmax(0,1fr)}}
.tool{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tool h3{font-size:17px;font-weight:900}
.tool .f{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);direction:ltr;text-align:left;background:var(--bg2);border-radius:8px;padding:6px 10px;overflow-x:auto}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field{min-width:0}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.field .in{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:15px;padding:9px 10px;direction:ltr;text-align:left;outline:none}
.field .u{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);padding-inline:8px}
.out{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);padding-top:12px;flex-wrap:wrap}
.out span{font-size:13px;color:var(--muted)}
.out b{font-family:var(--f-mono);font-size:24px;font-weight:600;color:var(--amber);direction:ltr}
.out b small{font-size:13px;color:var(--muted);font-weight:500}
.note{font-size:13px;color:var(--faint)}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
@media (max-width:480px){.gloss{grid-template-columns:minmax(0,1fr)}}
.term{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.term .t-en{font-family:var(--f-mono);font-size:13px;color:var(--cyan);direction:ltr;text-align:right}
.term .t-ar{font-weight:900;font-size:17px}
.term p{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.65}

/* prose pages */
.prose{max-width:46em;font-size:17px;line-height:1.95;padding-bottom:40px}
.prose h2{font-size:22px;font-weight:900;margin:30px 0 8px}
.prose p,.prose li{color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
.prose a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}

/* ad slots: hidden until ads are enabled in /assets/config.js */
.ad{display:none;margin:22px 0;min-height:120px;border-radius:14px;overflow:hidden}
.ads-on .ad{display:block}
.ad::before{content:"إعلان";display:block;font-size:11px;color:var(--faint);margin-bottom:4px}

/* modal player */
.modal{position:fixed;inset:0;z-index:90;background:rgba(2,6,10,.86);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .box{position:relative;width:min(420px,100%);aspect-ratio:9/16;max-height:86vh;border-radius:18px;overflow:hidden;background:#000}
.modal .box.w{width:min(960px,100%);aspect-ratio:16/9}
.modal iframe{width:100%;height:100%;border:0}
.modal .x{position:absolute;top:-46px;left:0;width:38px;height:38px;border-radius:50%;background:var(--card2);display:grid;place-items:center}
.modal .mt{position:absolute;inset:auto 0 calc(100% + 8px) 50px;color:var(--ink);font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* consent */
.consent{position:fixed;inset:auto 8px calc(70px + env(safe-area-inset-bottom,0px)) 8px;z-index:80;max-width:620px;margin-inline:auto;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:9px 12px;box-shadow:0 14px 40px rgba(0,0,0,.5);display:none;grid-template-columns:1fr auto;align-items:center;gap:10px;font-size:13px;line-height:1.5}
.consent .btn{padding:6px 12px;font-size:13px;border-radius:9px}
.consent.show{display:grid}
.consent .acts{display:flex;gap:6px}
.consent a{color:var(--cyan);text-decoration:underline}
@media (min-width:861px){.consent{bottom:16px}}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 26px;color:var(--muted);font-size:14.5px;background:linear-gradient(to bottom,transparent,var(--bg2))}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media (max-width:700px){.foot .cols{grid-template-columns:1fr 1fr}.foot .cols>div:first-child{grid-column:1/-1}}
.foot h4{color:var(--ink);font-size:15px;margin:0 0 8px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot a:hover{color:var(--ink)}
.foot .legal{margin-top:24px;font-size:13px;color:var(--faint);border-top:1px solid var(--line);padding-top:14px}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== liveliness layer ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
.top{view-transition-name:top}.tabs{view-transition-name:tabs}
main{animation:pagein .5s cubic-bezier(0,0,.2,1)}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}}
button,a,.chip,.opt{cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip{min-height:40px;padding:8px 16px}
.lcard,.track,.scard,.panel{position:relative;transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .25s;will-change:transform}
.lcard::after,.track::after,.scard::after,a.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tc,var(--amber)) 18%,transparent),transparent 70%)}
.lcard:hover::after,.track:hover::after,.scard:hover::after,a.panel:hover::after{opacity:1}
.lcard:active,.scard:active,.track:active{transform:scale(.98)}
.lcard .cover img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lcard:hover .cover img{transform:scale(1.06)}
.phead h1{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.phead p{animation:rise .7s .1s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.phead::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--tc,var(--amber)),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:scan 3.6s linear infinite}
@keyframes scan{from{background-position:-60% 0}to{background-position:160% 0}}
/* quiz */
.qg{display:flex;align-items:center;gap:8px}
.qg svg{width:76px;height:44px}
.qg path{fill:none;stroke-width:10;stroke-linecap:round}
.qg .qg-bg{stroke:var(--bg2)}
.qg .qg-v{stroke:var(--green);stroke-dasharray:0 100;transition:stroke-dasharray .7s cubic-bezier(.2,.7,.3,1)}
.quiz.fin{animation:glow 1.4s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(63,208,138,.5)}100%{box-shadow:0 0 0 18px rgba(63,208,138,0)}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.opt.right{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.03)}}
.splash{position:fixed;width:0;height:0;z-index:120;pointer-events:none}
.splash i{position:absolute;left:0;top:0;border-radius:50% 50% 50% 0;background:radial-gradient(circle at 35% 35%,#FFD27A,#F5A524 55%,#9A5A00);animation:spl .85s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spl{to{transform:translate(var(--x),var(--y)) rotate(200deg) scale(.4);opacity:0}}
/* visitors */
.visitors{background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:18px}
.visitors .vnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.visitors .vnums div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.visitors .vnums b{display:block;font-family:var(--f-mono);font-size:22px;color:var(--amber);direction:ltr;text-align:right}
.visitors .vnums span{font-size:12px;color:var(--muted)}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vlist li{display:grid;grid-template-columns:28px 110px 1fr auto;gap:8px;align-items:center;font-size:14px}
.vlist .fl{font-size:20px;line-height:1}
.vlist .br{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.vlist .br i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--amber));border-radius:4px;animation:grow 1s cubic-bezier(.2,.7,.3,1)}
@keyframes grow{from{width:0!important}}
.vlist b{font-size:13px;color:var(--muted)}
.vline{font-size:13px;color:var(--faint)}
/* progress well */
.pwell{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.pwell svg{width:120px;height:auto}
#pw-tool{transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
#pw-fill{transform-origin:50% 0;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.pwell .big{font-family:var(--f-mono);font-size:34px;font-weight:600;color:var(--amber);direction:ltr;text-align:right}
@media (prefers-reduced-motion:reduce){main{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

.phead .mini-anim{position:absolute;inset-inline-end:16px;top:26px;width:min(260px,38vw);height:auto;opacity:.95;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
@media (max-width:700px){.phead .mini-anim{position:relative;inset:auto;display:block;width:200px;margin:0 0 10px}}
.mini-anim{direction:ltr}
.mini-anim .m-t{font-family:var(--f-mono);font-size:10px;fill:#8DA5B9;letter-spacing:.08em}
.m-raml{animation:raml 4s cubic-bezier(.6,0,.2,1) infinite}.m-ramr{animation:ramr 4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes raml{0%,15%{transform:translateX(-24px)}40%,80%{transform:none}100%{transform:translateX(-24px)}}
@keyframes ramr{0%,15%{transform:translateX(24px)}40%,80%{transform:none}100%{transform:translateX(24px)}}
.m-bub circle{animation:mbub 2.1s linear infinite}@keyframes mbub{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(-40px);opacity:0}}
.m-led{animation:mled 1s steps(2) infinite}@keyframes mled{50%{opacity:.2}}
.m-spin{animation:mspin 3s linear infinite}@keyframes mspin{to{transform:rotate(360deg)}}
.m-run{animation:mrun .8s linear infinite}@keyframes mrun{to{stroke-dashoffset:-14}}
.m-drill{animation:mdrill 6s ease-in-out infinite}@keyframes mdrill{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
.m-teeth{animation:mteeth .4s linear infinite}@keyframes mteeth{50%{transform:translateX(3px)}}
.m-cut{animation:mcut 1.6s linear infinite}@keyframes mcut{from{transform:translateY(0);opacity:1}to{transform:translateY(-120px);opacity:0}}
.m-beam{animation:mbeam 2.6s ease-in-out infinite}@keyframes mbeam{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.m-crank{animation:mspin 2.6s linear infinite reverse}
.m-drop{animation:mdrop 2.6s ease-in infinite}@keyframes mdrop{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-50px);opacity:0}}
.m-wave{animation:mwave 3s linear infinite}.m-wave2{animation:mwave 4.4s linear infinite reverse}@keyframes mwave{to{transform:translateX(-80px)}}
.m-gas{animation:mgas 2.4s linear infinite}@keyframes mgas{from{transform:translateY(0);opacity:0}20%{opacity:1}to{transform:translateY(-30px);opacity:0}}
.m-log{stroke-dasharray:420;animation:mlog 4s ease-in-out infinite}@keyframes mlog{0%{stroke-dashoffset:420}60%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
.m-needle{animation:mneedle 3.2s cubic-bezier(.5,0,.3,1) infinite}@keyframes mneedle{0%,100%{transform:rotate(-110deg)}45%{transform:rotate(70deg)}55%{transform:rotate(62deg)}60%{transform:rotate(68deg)}}
.m-halo{animation:mhalo 1.6s ease-in-out infinite;transform-origin:120px 74px}@keyframes mhalo{50%{transform:scale(1.25);opacity:.05}}
.m-spark{stroke-dasharray:300;animation:mlog 3s ease-in-out infinite}