/* =========================================================
   Nirvana Browser v3 — base: tokens, themes, type, chrome
   Warm ivory + clay palette, serif display type, light & dark
   ========================================================= */
:root{
  --bg:#FAF9F5; --bg-alt:#F4F2EA; --paper:#FFFFFF; --paper-2:#F0EEE6; --paper-3:#E9E6DB;
  --line:#E6E3D8; --line-2:#D8D4C7;
  --text:#141413; --text-2:#3D3D3A; --muted:#6B6A64;
  --accent:#B9552F; --accent-hover:#A24A28; --accent-ink:#A44B29; --accent-soft:#F7E7DE; --accent-line:#EBCBBB;
  --on-accent:#FFFFFF;
  --ok:#3F7A4A; --ok-soft:#E5EFE0; --warn:#9A6B12; --warn-soft:#F6ECD3; --info:#3C6A9A; --info-soft:#E3ECF5; --bad:#B03A2E; --bad-soft:#F6E1DD;
  /* illustration palette */
  --i-ink:#141413; --i-paper:#FFFFFF; --i-paper2:#F0EEE6; --i-line:#D8D4C7;
  --i-clay:#D97757; --i-oat:#E3DACC; --i-kraft:#D4A27F; --i-olive:#788C5D; --i-cactus:#BCD1CA; --i-sky:#6A9BCC; --i-heather:#CBCADB; --i-fig:#C46686; --i-manilla:#EBDBBC; --i-coral:#EBCECE;
  --sh-1:0 1px 2px rgba(20,20,19,.05);
  --sh-2:0 1px 2px rgba(20,20,19,.04),0 6px 20px -6px rgba(20,20,19,.10);
  --sh-3:0 2px 6px rgba(20,20,19,.05),0 24px 60px -20px rgba(20,20,19,.22);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:28px;
  --serif:'Source Serif 4','Noto Serif Devanagari',Georgia,'Times New Roman',serif;
  --sans:'Inter','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --head:64px; --ease:cubic-bezier(.22,.8,.24,1); --gut:24px;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#262624; --bg-alt:#1F1E1D; --paper:#30302E; --paper-2:#383835; --paper-3:#42413D;
  --line:#3E3D39; --line-2:#4D4C47;
  --text:#F5F4EE; --text-2:#D9D6CC; --muted:#A8A59B;
  --accent:#E0855F; --accent-hover:#EA9572; --accent-ink:#EE9B78; --accent-soft:#3D2E27; --accent-line:#5A3B2E;
  --on-accent:#1A1817;
  --ok:#8CC28F; --ok-soft:#2C3829; --warn:#E3B95C; --warn-soft:#3B3424; --info:#8DB6E3; --info-soft:#26323F; --bad:#F08A7C; --bad-soft:#40291F;
  --i-ink:#ECE9DF; --i-paper:#3A3936; --i-paper2:#302F2C; --i-line:#5A5852;
  --i-clay:#DD8565; --i-oat:#6E665A; --i-kraft:#B98C6B; --i-olive:#8DA36F; --i-cactus:#6F8A82; --i-sky:#7FA9D6; --i-heather:#77768C; --i-fig:#C97696; --i-manilla:#8C7E62; --i-coral:#8A6464;
  --sh-1:0 1px 2px rgba(0,0,0,.25);
  --sh-2:0 1px 2px rgba(0,0,0,.25),0 8px 24px -8px rgba(0,0,0,.45);
  --sh-3:0 2px 6px rgba(0,0,0,.3),0 30px 70px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background-color .3s,color .3s}
:lang(hi) body,body:lang(hi){font-size:17px;line-height:1.75}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.018em;margin:0 0 .45em;color:var(--text)}
:lang(hi) h1,:lang(hi) h2,:lang(hi) h3{line-height:1.3;letter-spacing:0}
h1{font-size:clamp(2.3rem,5vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.3vw,2.7rem)}
h3{font-size:clamp(1.18rem,1.8vw,1.42rem);letter-spacing:-.01em}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ico{width:20px;height:20px;flex:none}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gut)}
.wrap-n{width:min(780px,100%);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:300;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:8px}
.skip:focus{left:12px}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
:lang(hi) .kicker{letter-spacing:.02em;font-size:.85rem}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-2);max-width:60ch;line-height:1.6}
.small{font-size:.86rem}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:12px;font-weight:550;font-size:.97rem;letter-spacing:-.005em;position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s;-webkit-tap-highlight-color:transparent;white-space:nowrap;border:1px solid transparent}
.btn .ico{width:18px;height:18px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(20,20,19,.12),0 6px 16px -8px var(--accent)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(20,20,19,.12),0 12px 22px -10px var(--accent)}
.btn-dark{background:var(--text);color:var(--bg)}
.btn-dark:hover{transform:translateY(-1px);opacity:.92}
.btn-ghost{background:var(--paper);color:var(--text);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-1px)}
.btn-soft{background:var(--accent-soft);color:var(--accent-ink)}
.btn-soft:hover{background:var(--accent-line)}
.btn-sm{min-height:38px;padding:0 14px;font-size:.9rem;border-radius:10px}
.btn-lg{min-height:54px;padding:0 26px;font-size:1.04rem;border-radius:14px}
.btn .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.link{color:var(--accent-ink);font-weight:550;display:inline-flex;align-items:center;gap:6px;text-underline-offset:3px}
.link:hover{text-decoration:underline}
.link .ico{width:16px;height:16px;transition:transform .2s var(--ease)}
.link:hover .ico{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.82rem;font-weight:500;color:var(--text-2)}
.chip .ico{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:600;background:var(--accent-soft);color:var(--accent-ink)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}.badge.info{background:var(--info-soft);color:var(--info)}.badge.bad{background:var(--bad-soft);color:var(--bad)}.badge.mute{background:var(--paper-2);color:var(--muted)}
kbd{font-family:var(--mono);font-size:.72rem;padding:2px 6px;border-radius:6px;background:var(--paper-2);border:1px solid var(--line);color:var(--muted)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;height:var(--head);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .logo{transition:transform .5s var(--ease)}
.brand:hover .logo{transform:rotate(-10deg) scale(1.06)}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav>a,.nav>.dd>button{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:9px;font-size:.94rem;font-weight:500;color:var(--text-2);transition:background .2s,color .2s}
.nav>a:hover,.nav>.dd>button:hover,.nav>.dd.open>button{background:var(--paper-2);color:var(--text)}
.nav>a[aria-current]{color:var(--text);background:var(--paper-2)}
.nav .dd{position:relative}
.nav .dd>button .ico{width:14px;height:14px;transition:transform .25s}
.nav .dd.open>button .ico{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:min(640px,80vw);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.dd.open .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;transition:background .15s}
.mega a:hover{background:var(--bg-alt)}
.mega .mi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.mega .mi .ico{width:18px;height:18px}
.mega strong{display:block;font-weight:600;font-size:.93rem}
.mega small{display:block;color:var(--muted);font-size:.82rem;line-height:1.4}
.mega .all{grid-column:1/-1;justify-content:center;align-items:center;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;font-weight:600;font-size:.88rem;color:var(--accent-ink)}
.acts{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--text-2);transition:background .2s,color .2s;position:relative}
.iconbtn:hover{background:var(--paper-2);color:var(--text)}
.iconbtn .ico{width:19px;height:19px}
.searchbtn{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:.9rem;transition:border-color .2s}
.searchbtn:hover{border-color:var(--line-2);color:var(--text)}
.searchbtn .ico{width:17px;height:17px}
[data-theme-toggle] .moon{display:none}
:root[data-theme=dark] [data-theme-toggle] .sun{display:none}
:root[data-theme=dark] [data-theme-toggle] .moon{display:block}
.lang-dd{position:relative}
.lang-dd>button{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--text-2)}
.lang-dd>button:hover{background:var(--paper-2)}
.lang-dd>button .ico{width:17px;height:17px}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s var(--ease)}
.lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:.92rem}
.lang-menu a:hover{background:var(--bg-alt)}
.lang-menu a[aria-current]{color:var(--accent-ink);font-weight:600}
.lang-menu a small{color:var(--muted)}
.menu-btn{display:none}
.mnav{position:fixed;left:0;right:0;bottom:0;top:var(--head);z-index:99;background:var(--bg);overflow:auto;padding:14px var(--gut) 40px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav .msearch{width:100%;height:50px;justify-content:flex-start;margin-bottom:12px;font-size:1rem}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary,.mnav>a.ml{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-family:var(--serif);font-size:1.35rem;font-weight:500;list-style:none;cursor:pointer}
.mnav>a.ml{border-bottom:1px solid var(--line)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .ico{transition:transform .25s}
.mnav details[open] summary .ico{transform:rotate(180deg)}
.mnav details a{display:flex;gap:12px;align-items:center;padding:10px 6px;color:var(--text-2)}
.mnav details a .ico{color:var(--accent-ink)}
.mnav details>div{padding-bottom:12px}
.mnav .mrow{display:flex;gap:10px;margin-top:18px}
.mnav .mrow .btn{flex:1}
body.locked{overflow:hidden}

/* ---------- footer ---------- */
.ftr{margin-top:0;background:var(--bg-alt);border-top:1px solid var(--line);padding:56px 0 28px;position:relative;overflow:hidden}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.ftr-brand p{color:var(--muted);font-size:.92rem;max-width:32ch;margin:14px 0 18px}
.socials{display:flex;gap:8px}
.socials a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--text-2);transition:all .2s}
.socials a:hover{color:var(--accent-ink);border-color:var(--accent-line);transform:translateY(-2px)}
.socials .ico{width:18px;height:18px}
.ftr h3{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
:lang(hi) .ftr h3{letter-spacing:.02em}
.ftr-col a{display:block;padding:5px 0;color:var(--text-2);font-size:.93rem;transition:color .2s}
.ftr-col a:hover{color:var(--accent-ink)}
.ftr-team{margin-top:36px;padding:20px 22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font-size:.9rem;color:var(--text-2)}
.ftr-team strong{font-family:var(--serif);font-size:1.05rem;color:var(--text);font-weight:500}
.ftr-team .avs{display:flex}
.ftr-team .avs span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;border:2px solid var(--paper);margin-left:-8px}
.ftr-team .avs span:first-child{margin-left:0}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.ftr-bot .prefs{display:flex;gap:8px;align-items:center}
.ftr-word{font-family:var(--serif);font-weight:500;font-size:clamp(4.5rem,17vw,13rem);line-height:.8;letter-spacing:-.04em;text-align:center;margin:30px 0 -.12em;color:transparent;-webkit-text-stroke:1px var(--line-2);user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden}

/* ---------- reveal ---------- */
.js [data-r]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js [data-r=zoom]{transform:scale(.96)}
.js [data-r=left]{transform:translateX(-26px)}
.js [data-r=right]{transform:translateX(26px)}
.js [data-r].in{opacity:1;transform:none}
main{animation:fadein .5s var(--ease) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- misc chrome ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:120;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
#dots{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.to-top{position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;border-radius:14px;background:var(--text);color:var(--bg);display:grid;place-items:center;box-shadow:var(--sh-2);opacity:0;transform:translateY(12px);pointer-events:none;transition:all .3s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top .ico{width:20px;height:20px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:.9rem;font-weight:500;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:400}
.toast.show{opacity:1;transform:translate(-50%,0)}
.ring{position:fixed;left:0;top:0;z-index:350;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;pointer-events:none;transition:opacity .25s,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s}
.ring.on{opacity:.45}
.ring.hov{width:52px;height:52px;margin:-26px 0 0 -26px;background:color-mix(in srgb,var(--accent) 10%,transparent);opacity:.7}
.lang-hint{position:fixed;left:50%;bottom:18px;z-index:150;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-3);border-radius:16px;padding:10px 10px 10px 16px;font-size:.92rem;max-width:calc(100% - 28px)}
.lang-hint[hidden]{display:none}

/* ---------- search palette ---------- */
.pal{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:flex-start;padding:min(13vh,110px) 14px 14px;background:rgba(20,20,19,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.pal.open{opacity:1;visibility:visible}
.pal-box{width:min(660px,100%);max-height:min(620px,80vh);background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden;transform:translateY(10px) scale(.98);transition:transform .3s var(--ease)}
.pal.open .pal-box{transform:none}
.pal-top{display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;border-bottom:1px solid var(--line)}
.pal-top .ico{color:var(--accent-ink)}
.pal-top input{flex:1;border:0;outline:0;background:none;font-size:1.05rem;min-width:0}
.pal-top input::-webkit-search-cancel-button{display:none}
.pal-list{overflow:auto;padding:8px;overscroll-behavior:contain}
.pal-list .hd{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 6px}
.pal-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.pal-list a .pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.pal-list a .pi .ico{width:17px;height:17px}
.pal-list a span.t{flex:1;min-width:0;display:flex;flex-direction:column}
.pal-list a strong{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-list a small{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-list a em{font-style:normal;font-size:.72rem;color:var(--muted);background:var(--paper-2);padding:3px 9px;border-radius:999px;flex:none}
.pal-list a.sel{background:var(--bg-alt)}
.pal-list a.sel .pi{background:var(--accent);color:var(--on-accent)}
.pal-list .empty{padding:32px;text-align:center;color:var(--muted)}
.pal-foot{display:flex;gap:14px;padding:10px 18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
mark{background:var(--accent-soft);color:var(--accent-ink);border-radius:3px;padding:0 1px}

@media (max-width:1060px){
  .nav,.acts .searchbtn span,.acts .searchbtn kbd,.acts .dl{display:none}
  .acts .searchbtn{width:40px;padding:0;justify-content:center}
  .menu-btn{display:grid}
  .ftr-top{grid-template-columns:1fr 1fr 1fr}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--gut:18px;--head:60px}
  body{font-size:16px}
  .lang-dd>button span{display:none}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-bot{flex-direction:column}
  .btn-lg{min-height:52px}
}
@media (hover:none){.ring{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-r]{opacity:1;transform:none}
}
@media print{.hdr,.mnav,.ftr,.to-top,.progress,#dots,.ring,.toc,.side-nav{display:none!important}}
.menu-btn .ico:last-child{display:none}
.menu-btn[aria-expanded=true] .ico:first-child{display:none}
.menu-btn[aria-expanded=true] .ico:last-child{display:block}
@media (max-width:380px){.hdr .wrap{gap:8px}.acts{gap:2px}.acts .theme-btn{display:none}.brand b{font-size:1.18rem}.lang-dd>button{padding:0 6px}}

/* =========================================================
   Colour options: accent presets × surface tone × light/dark
   html[data-accent] [data-surface] [data-theme]
   ========================================================= */
:root{--net-rgb:120 112 98;--net-a:.36;--net-l:.17}
:root[data-theme=dark]{--net-rgb:214 208 196;--net-a:.24;--net-l:.11}

/* ---- surfaces ---- */
:root[data-surface=neutral]{--bg:#F8F8F7;--bg-alt:#F1F1EF;--paper-2:#EEEEEC;--paper-3:#E6E6E3;--line:#E4E4E0;--line-2:#D4D4CF;--i-paper2:#EEEEEC;--i-oat:#DCDCD6;--net-rgb:110 112 118}
:root[data-surface=neutral][data-theme=dark]{--bg:#1D1E20;--bg-alt:#17181A;--paper:#26272A;--paper-2:#2E2F33;--paper-3:#38393D;--line:#35363A;--line-2:#45464B;--i-paper:#2E2F33;--i-paper2:#26272A;--i-oat:#4A4B50;--net-rgb:200 204 212}

/* ---- accents (light) ---- */
:root[data-accent=ocean]{--accent:#2F6BB3;--accent-hover:#285C9C;--accent-ink:#2A5FA0;--accent-soft:#E3EDF8;--accent-line:#C3D7EE;--i-clay:#5B8FD0}
:root[data-accent=forest]{--accent:#3E7A4E;--accent-hover:#34683F;--accent-ink:#366B44;--accent-soft:#E3F0E6;--accent-line:#C2DBC9;--i-clay:#6FA37B}
:root[data-accent=plum]{--accent:#7A4FB8;--accent-hover:#6942A0;--accent-ink:#6E46A8;--accent-soft:#EEE6F8;--accent-line:#D9C8EF;--i-clay:#9C78D4}
:root[data-accent=rose]{--accent:#B83E64;--accent-hover:#A13457;--accent-ink:#A9385C;--accent-soft:#F8E3EA;--accent-line:#EEC3D1;--i-clay:#D86A8E}
:root[data-accent=amber]{--accent:#9A6510;--accent-hover:#85570C;--accent-ink:#8A5B0E;--accent-soft:#F7ECD6;--accent-line:#EBD3A6;--i-clay:#D9A441}
:root[data-accent=graphite]{--accent:#3F3E3A;--accent-hover:#2C2B28;--accent-ink:#3F3E3A;--accent-soft:#ECEAE3;--accent-line:#D6D3C9;--i-clay:#8E8B82}
/* ---- accents (dark) ---- */
:root[data-theme=dark][data-accent=ocean]{--accent:#6FA3E6;--accent-hover:#85B3EC;--accent-ink:#8DB9F0;--accent-soft:#22303F;--accent-line:#34506E;--i-clay:#6E9FDD}
:root[data-theme=dark][data-accent=forest]{--accent:#7FC08F;--accent-hover:#93CDA1;--accent-ink:#98D1A6;--accent-soft:#243427;--accent-line:#37513D;--i-clay:#79B588}
:root[data-theme=dark][data-accent=plum]{--accent:#B192EA;--accent-hover:#BFA4EF;--accent-ink:#C3A9F1;--accent-soft:#312A40;--accent-line:#4B3D66;--i-clay:#AA8BE0}
:root[data-theme=dark][data-accent=rose]{--accent:#EC8AA9;--accent-hover:#F09DB7;--accent-ink:#F2A3BC;--accent-soft:#3E2730;--accent-line:#63394A;--i-clay:#E084A3}
:root[data-theme=dark][data-accent=amber]{--accent:#E5B95B;--accent-hover:#EBC573;--accent-ink:#EDC97A;--accent-soft:#3B3221;--accent-line:#5E4B26;--i-clay:#DDB052}
:root[data-theme=dark][data-accent=graphite]{--accent:#D9D6CC;--accent-hover:#E6E3DA;--accent-ink:#E6E3DA;--accent-soft:#3A3936;--accent-line:#55534D;--i-clay:#B9B6AC}

/* ---------- customise panel ---------- */
.cz{position:relative}
.cz-panel{position:fixed;right:max(16px,calc((100vw - 1180px) / 2 + 24px));top:calc(var(--head) + 8px);width:330px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-3);padding:18px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .3s var(--ease),visibility .25s;z-index:120}
body.cz-open .cz-panel{opacity:1;visibility:visible;transform:none}
.cz-panel h2{font-family:var(--serif);font-size:1.25rem;margin:0 0 2px}
.cz-panel>p{font-size:.84rem;color:var(--muted);margin:0 0 14px}
.cz-row{margin-top:14px}
.cz-row>span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
:lang(hi) .cz-row>span{letter-spacing:0;font-size:.8rem}
.cz-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg-alt);border:1px solid var(--line)}
.cz-seg button{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:9px;font-size:.84rem;font-weight:600;color:var(--muted);transition:all .2s}
.cz-seg button .ico{width:15px;height:15px}
.cz-seg button[aria-pressed=true]{background:var(--paper);color:var(--text);box-shadow:var(--sh-1)}
.cz-sw{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cz-sw button{position:relative;aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.15);transition:transform .2s var(--ease)}
.cz-sw button:hover{transform:scale(1.1)}
.cz-sw button[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--c)}
.cz-sw button[aria-pressed=true]::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#fff}
.cz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.cz-foot button{font-size:.84rem;font-weight:600;color:var(--accent-ink)}
.cz-prev{display:flex;gap:6px;align-items:center;font-size:.78rem;color:var(--muted)}
.cz-prev i{width:14px;height:14px;border-radius:4px;background:var(--accent)}.cz-prev i:nth-child(2){background:var(--accent-soft)}.cz-prev i:nth-child(3){background:var(--i-clay)}
.cz-scrim{display:none}
body.cz-open .cz-scrim{display:block;position:fixed;inset:0;z-index:119;background:transparent}
@media (max-width:640px){
  .cz-panel{position:fixed;left:10px;right:10px;top:auto;bottom:10px;width:auto;border-radius:22px;transform:translateY(24px);transform-origin:bottom center;max-height:80vh;overflow:auto}
  body.cz-open .cz-scrim{display:block;position:fixed;inset:0;background:rgba(20,20,19,.3);z-index:119}
  .cz-panel::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:-6px auto 12px}
}

/* =========================================================
   Illustrations (.art) + explanatory visuals (.viz)
   ========================================================= */
.art{width:100%;height:auto;overflow:visible}
.art .o{stroke:var(--i-ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.art .ln{fill:none;stroke:var(--i-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.art .ld{fill:none;stroke:var(--i-line);stroke-width:2.4;stroke-linecap:round}
.art .fp{fill:var(--i-paper)}.art .fp2{fill:var(--i-paper2)}.art .fc{fill:var(--i-clay)}.art .fo{fill:var(--i-oat)}.art .fk{fill:var(--i-kraft)}.art .fl{fill:var(--i-olive)}
.art .fa{fill:var(--i-cactus)}.art .fs{fill:var(--i-sky)}.art .fh{fill:var(--i-heather)}.art .ff{fill:var(--i-fig)}.art .fm{fill:var(--i-manilla)}.art .fi{fill:var(--i-ink)}
.art .blob{opacity:.55}
.art .svgt{font:700 18px var(--sans)}
.art .fl1{animation:flt 6s ease-in-out infinite}
.art .fl2{animation:flt 7s ease-in-out -2s infinite}
.art .fl3{animation:flt 8s ease-in-out -4s infinite}
@keyframes flt{50%{transform:translateY(-9px)}}
.art .tw{animation:tw 3.2s ease-in-out infinite}
@keyframes tw{50%{transform:scale(.7) rotate(25deg)}}
.art .dash{stroke-dasharray:6 9;animation:dsh 2.2s linear infinite}
@keyframes dsh{to{stroke-dashoffset:-60}}
.art .pulse{transform-origin:center;transform-box:fill-box;animation:pls 3.4s ease-out infinite}
@keyframes pls{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.art .blink{animation:blk 1.1s steps(2) infinite}
@keyframes blk{50%{opacity:0}}
.art .wig{transform-box:fill-box;transform-origin:center;animation:wig 4s ease-in-out infinite}
@keyframes wig{50%{transform:rotate(-6deg) translate(-6px,-4px)}}
.art .spin{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art .draw{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.1s var(--ease) .3s}
.in .art .draw,.art.in .draw,.hero .art .draw,.on .art .draw{stroke-dashoffset:0}

/* ---------- visual frame ---------- */
.viz{margin:0;position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.6vw,26px);overflow:hidden;font-family:var(--sans);font-size:.88rem;color:var(--text-2)}
.viz figcaption{margin-top:14px;font-size:.8rem;color:var(--muted);line-height:1.45;display:flex;gap:6px}
.viz figcaption::before{content:"";width:3px;flex:none;border-radius:2px;background:var(--accent-line)}
.viz .ico{width:18px;height:18px}
.viz strong{color:var(--text);font-weight:600}
.viz small{color:var(--muted);font-size:.78rem;line-height:1.35}
.viz .sk{display:block;height:8px;border-radius:5px;background:var(--line-2);opacity:.7}
.sw{display:inline-block;width:38px;height:22px;border-radius:99px;background:var(--line-2);position:relative;flex:none;transition:background .35s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.sw.on{background:var(--ok)}
.sw.on::after{transform:translateX(16px)}
/* staggered entrance for children with --d */
.viz [style*="--d"]{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d)*110ms + 150ms)}
.viz.on [style*="--d"]{opacity:1;transform:none}
.viz .tline li,.viz .ck li{opacity:0}
.viz.on .tline li,.viz.on .ck li{opacity:1}

/* phone walkthrough */
.viz-phone{display:flex;flex-direction:column;align-items:center;background:radial-gradient(70% 60% at 50% 30%,var(--accent-soft),var(--paper-2))}
.phone{width:230px;height:400px;border-radius:34px;background:var(--text);padding:9px;position:relative;box-shadow:var(--sh-3)}
:root[data-theme=dark] .phone{background:#0f0f0e;box-shadow:0 0 0 1px var(--line-2),var(--sh-3)}
.phone .notch{position:absolute;top:15px;left:50%;width:62px;height:16px;border-radius:9px;background:inherit;transform:translateX(-50%);z-index:3}
.phone .ph-scr{position:relative;height:100%;border-radius:26px;background:var(--paper);overflow:hidden}
.phone.android .ph-scr{background:var(--bg-alt)}
.scr{position:absolute;inset:0;padding:42px 12px 12px;display:flex;flex-direction:column;gap:7px;transform:translateX(100%);opacity:0;transition:transform .55s var(--ease),opacity .4s}
.scr.cur{transform:none;opacity:1}
.scr.past{transform:translateX(-30%);opacity:0}
.scr .bar{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.84rem}
.scr .bar strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr .bar .ico{width:16px;height:16px}
.scr .row{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:11px;background:var(--bg);font-size:.8rem}
.phone.android .scr .row{background:var(--paper)}
.scr .row .ico{width:15px;height:15px;color:var(--muted)}
.scr .row.hit{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.scr .row.hit .ico{color:var(--accent-ink)}
.scr .row.hit span{flex:1;min-width:0;line-height:1.25}
.scr .row .sw{transform:scale(.85)}
.scr.cur .row .sw{animation:swon .4s 1.1s var(--ease) forwards}
@keyframes swon{to{background:var(--ok)}}
.scr.cur .row .sw::after{animation:swk .4s 1.1s var(--ease) forwards}
@keyframes swk{to{transform:translateX(16px)}}
.phone .tap{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--accent);opacity:0;left:50%;top:50%;margin:-15px;z-index:4;pointer-events:none}
.phone .tap.go{animation:tap .7s ease-out}
@keyframes tap{0%{opacity:.55;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;margin-top:16px;font-size:.8rem;max-width:100%}
.crumbs span{padding:3px 9px;border-radius:99px;background:var(--paper);border:1px solid var(--line);transition:all .3s}
.crumbs span.lit{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.crumbs .ico{width:13px;height:13px;color:var(--muted)}

/* parties */
.pbox{position:relative;aspect-ratio:16/8.4;min-height:320px;max-width:980px;margin-inline:auto}
.plines{position:absolute;inset:0;width:100%;height:100%}
.plines .pl{fill:none;stroke:var(--line-2);stroke-width:.5;stroke-dasharray:1.5 1.5;vector-effect:non-scaling-stroke;stroke-width:1.6}
.viz.on .plines .pl{animation:dsh 2.6s linear infinite;stroke:var(--accent-line)}
.pme{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent)}
.pme strong{color:inherit;font-size:.8rem}
.pme .ico{width:22px;height:22px}
.pn{position:absolute;width:30%;max-width:170px;padding:10px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:2px}
.pn .ico{width:18px;height:18px;margin-bottom:2px}
.pn strong{font-size:.82rem;line-height:1.25}
.pn small{font-size:.72rem}
.pn.clay .ico{color:var(--i-clay)}.pn.sky .ico{color:var(--i-sky)}.pn.olive .ico{color:var(--i-olive)}.pn.heather .ico{color:#7d7aa3}.pn.fig .ico{color:var(--i-fig)}
@media (max-width:560px){.pbox{aspect-ratio:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.plines{display:none}.pme{position:static;transform:none;grid-column:1/-1;width:auto;height:auto;border-radius:12px;flex-direction:row;padding:10px;box-shadow:none}.pn{position:static;width:auto;max-width:none}}

/* levels */
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--paper);border:1px solid var(--line);margin-bottom:18px;gap:2px}
.seg button{padding:7px 14px;border-radius:9px;font-weight:600;font-size:.86rem;color:var(--muted);transition:all .25s}
.seg button[aria-selected=true]{background:var(--text);color:var(--bg)}
.lv{display:flex;flex-direction:column;gap:14px}
.lvr span{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.84rem;margin-bottom:6px;color:var(--text)}
.lvb{height:14px;border-radius:99px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.lvb i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .8s var(--ease)}
.lvb i.alt{background:var(--i-olive)}
.viz.on .lvb i{width:var(--w)}
.lvn{margin:2px 0 0;font-weight:500;color:var(--text-2)}

/* toggles card */
.tg-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tg-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600;color:var(--text)}
.tg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.tg-row:last-child{border-bottom:0}
.tg-row div{display:flex;flex-direction:column}
.tg-row strong{font-size:.86rem;font-weight:550}
.tg-row em{font-style:normal;font-size:.76rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--paper-2);color:var(--text-2);white-space:nowrap}

/* data flow */
.df{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:center}
.df-dev{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.df-dev .ico{width:30px;height:30px;color:var(--accent-ink)}
.df-list{display:flex;flex-direction:column;gap:8px}
.df-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);position:relative}
.df-i span{display:flex;flex-direction:column;line-height:1.25}
.df-i strong{font-size:.82rem}
.df-l{position:absolute;right:100%;top:50%;width:20px;border-top:2px solid var(--accent-line)}
.df-i.opt{border-style:dashed}.df-i.opt .df-l{border-top-style:dashed}
.df-i.clay .ico{color:var(--i-clay)}.df-i.sky .ico{color:var(--i-sky)}.df-i.olive .ico{color:var(--i-olive)}.df-i.heather .ico{color:#7d7aa3}.df-i.fig .ico{color:var(--i-fig)}.df-i.oat .ico{color:var(--muted)}
@media (max-width:560px){.df{grid-template-columns:1fr}.df-l{display:none}}

/* https */
.addr{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:.84rem;overflow:hidden;white-space:nowrap}
.addr .lk{position:relative;width:18px;height:18px;flex:none}
.addr .lk .ico{position:absolute;inset:0;transition:opacity .4s,transform .4s}
.addr .a1{color:var(--warn)}.addr .a2{color:var(--ok);opacity:0;transform:scale(.4)}
.addr .proto{position:relative;display:inline-block;width:5.4em}
.addr .proto s,.addr .proto b{position:absolute;left:0;top:-.75em;transition:opacity .4s,transform .4s;font-weight:500}
.addr .proto b{opacity:0;transform:translateY(8px);color:var(--ok)}
.viz.on .addr .a1{opacity:0;transform:scale(.4);transition-delay:.9s}
.viz.on .addr .a2{opacity:1;transform:none;transition-delay:.9s}
.viz.on .addr .proto s{opacity:0;transform:translateY(-8px);transition-delay:.9s}
.viz.on .addr .proto b{opacity:1;transform:none;transition-delay:.9s}
.hs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hs{padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.hs.ok .ico{color:var(--ok)}.hs.warn .ico{color:var(--warn)}

/* dns + vpn + cloud pipes */
.dn,.vp,.cd{display:flex;align-items:center;gap:10px}
.dn-n,.vp-n,.cd-d,.cd-c{flex:none;width:110px;padding:14px 10px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.dn-n .ico,.vp-n .ico,.cd-d .ico,.cd-c .ico{width:26px;height:26px;color:var(--accent-ink)}
.dn-n span,.vp-n span,.cd-d span,.cd-c span{font-weight:600;color:var(--text);font-size:.8rem;line-height:1.25}
.dn-pipe,.vp-t,.cd-p{flex:1;position:relative;height:40px;display:flex;align-items:center;justify-content:center}
.dn-pipe .tube,.vp-t i,.cd-p i{position:absolute;inset:14px 0;border-radius:99px;background:repeating-linear-gradient(90deg,var(--accent-line) 0 10px,transparent 10px 18px);opacity:.8}
.viz.on .dn-pipe .tube,.viz.on .vp-t i,.viz.on .cd-p i{animation:pipe 1s linear infinite}
@keyframes pipe{to{background-position:18px 0}}
.dn-pipe .q{position:absolute;top:-14px;font-family:var(--mono);font-size:.72rem;background:var(--paper);border:1px solid var(--line);padding:2px 8px;border-radius:99px}
.dn-pipe em,.vp-t em,.cd-p em{position:absolute;bottom:-18px;font-style:normal;font-size:.72rem;font-weight:600;color:var(--ok);display:flex;gap:4px;align-items:center;white-space:nowrap}
.cd-p em{color:var(--muted);font-weight:500;white-space:normal;text-align:center;bottom:-30px;line-height:1.2}
.dn-pipe em .ico{width:12px;height:12px}
.dn-note{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:30px}
.dn-note span{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:.8rem}
.vp-a{color:var(--muted)}
.vp-x{display:flex;gap:8px;margin:28px 0 0;padding:10px 12px;border-radius:12px;background:var(--info-soft);color:var(--info);font-size:.82rem}
.cd{padding-bottom:26px}
@media (max-width:560px){.vp{flex-wrap:wrap;justify-content:center}.vp-t{flex-basis:100%;order:0}.vp-a{display:none}.dn-n,.cd-d,.cd-c{width:88px}}

/* cookies */
.jars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jar{position:relative;padding:22px 10px 12px;border-radius:14px 14px 18px 18px;background:var(--paper);border:2px solid var(--i-ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.jar .lid{position:absolute;top:-8px;left:18%;right:18%;height:12px;border-radius:6px;border:2px solid var(--i-ink);background:var(--i-oat)}
.jar .ico{width:30px;height:30px}
.jar.clay .ico{color:var(--i-clay)}.jar.sky .ico{color:var(--i-sky)}.jar.olive .ico{color:var(--i-olive)}
.jar small{font-family:var(--mono);font-size:.68rem}
.jar-x{display:flex;align-items:center;gap:10px;margin-top:16px;justify-content:center}
.jar-x .trk{display:flex;gap:6px;align-items:center;padding:6px 12px;border-radius:99px;background:var(--bad-soft);color:var(--bad);font-weight:600}
.jar-x i{width:60px;border-top:2px dashed var(--bad)}
.jar-x .stop{color:var(--bad);width:22px;height:22px}

/* fingerprint */
.fp-box{display:grid;grid-template-columns:1.2fr auto .8fr;gap:14px;align-items:center}
.fp-sig{display:flex;flex-wrap:wrap;gap:6px}
.fp-sig span{padding:6px 10px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-size:.78rem;font-weight:500}
.fp-arrow{color:var(--muted)}
.fp-print{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:var(--i-clay)}
.fp-print svg{width:84px;height:84px}
.viz.on .fp-print path{stroke-dasharray:90;stroke-dashoffset:90;animation:drawp 1.6s .6s var(--ease) forwards}
@keyframes drawp{to{stroke-dashoffset:0}}
.fp-print strong{font-size:.8rem}
@media (max-width:560px){.fp-box{grid-template-columns:1fr}.fp-arrow{transform:rotate(90deg);justify-self:center}}

/* private tab */
.pt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pt-c{padding:14px;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:190px}
.pt-c h4{font-family:var(--sans);font-size:.88rem;font-weight:600;display:flex;gap:8px;align-items:center;margin:0 0 4px}
.pt-c .hrow{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:9px;background:var(--bg);font-size:.76rem;font-family:var(--mono)}
.pt-c .hrow .ico{width:14px;height:14px;color:var(--muted)}
.pt-c small{margin-top:auto}
.pt-c.dark{background:#232221;border-color:#232221;color:#ECE9DF}
.pt-c.dark h4,.pt-c.dark small{color:#ECE9DF}
.vanish{display:flex;flex-direction:column;gap:8px}
.vanish span{height:30px;border-radius:9px;background:rgba(255,255,255,.08)}
.viz.on .vanish span{animation:van 3.4s ease-in-out infinite}
.viz.on .vanish span:nth-child(2){animation-delay:.3s}.viz.on .vanish span:nth-child(3){animation-delay:.6s}
@keyframes van{0%,30%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateX(20px)}}

/* sync */
.sy{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.sy-d{width:84px;padding:14px 8px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:600;color:var(--text);font-size:.78rem;text-align:center}
.sy-d .ico{width:28px;height:28px;color:var(--accent-ink)}
.sy-c{display:flex;flex-direction:column;align-items:center;gap:10px}
.sy-c .cl{display:flex;flex-direction:column;align-items:center;color:var(--i-sky)}
.sy-c .cl .ico{width:40px;height:40px}
.sy-c .pk{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.sy-c .pk span{padding:4px 9px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-size:.72rem;font-weight:550}
.viz.on .sy-c .pk span{animation:hop 2.8s ease-in-out infinite;animation-delay:calc(var(--d)*.25s + 1s)}
@keyframes hop{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* summary + translate */
.sm{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.sm-doc,.sm-out{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:7px}
.sm-doc i{display:block;height:7px;border-radius:4px;background:var(--line-2)}
.sm-doc i.hl{background:var(--i-manilla)}
.sm-mid{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--i-fig);text-align:center}
.sm-mid .ico{width:28px;height:28px}
.viz.on .sm-mid .ico{animation:tw 2.4s ease-in-out infinite}
.sm-out strong{display:flex;gap:6px;align-items:center;font-size:.84rem}
.sm-out ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:7px}
.sm-out em{font-style:normal;display:flex;gap:5px;align-items:center;font-size:.72rem;color:var(--warn);font-weight:600;margin-top:2px}
.sm-out em .ico{width:13px;height:13px}
.trc{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.tr-a,.tr-b{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px}
.tr-a p,.tr-b p{margin:4px 0 0;font-family:var(--serif);font-size:1.15rem;color:var(--text)}
.tr-b{border-color:var(--accent-line);background:var(--accent-soft)}
.tr-m{color:var(--accent-ink)}
.tr-m .ico{width:28px;height:28px}
.viz.on .tr-b{animation:pop .6s .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.9)}}
@media (max-width:560px){.sm,.trc{grid-template-columns:1fr}.sm-mid,.tr-m{transform:rotate(90deg)}}

/* crash */
.cr{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;align-items:center}
.cr-app{position:relative;padding:22px 14px;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden}
.cr-app .ico{width:30px;height:30px;color:var(--bad)}
.cr-crack{position:absolute;inset:0;background:linear-gradient(115deg,transparent 48%,var(--line-2) 49%,var(--line-2) 50%,transparent 51%)}
.cr-opts{display:flex;flex-direction:column;gap:7px}
.cr-opts .opt{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-weight:500;color:var(--text)}
.cr-opts .opt b{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);flex:none}
.cr-opts .opt.sel{border-color:var(--accent-line);background:var(--accent-soft)}
.cr-opts .opt.sel b{border:5px solid var(--accent)}
.cr-opts .opt em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700;color:var(--accent-ink)}

/* add-ons */
.ad-card{max-width:360px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--sh-2)}
.ad-h{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ad-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--i-heather);color:var(--i-ink)}
.ad-h div{display:flex;flex-direction:column}
.ad-p{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:.84rem}
.ad-p .ico{color:var(--warn)}
.ad-b{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.ad-b .btn{pointer-events:none}

/* permissions */
.pm{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:stretch}
.pm-l{padding:14px 10px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.pm-l .ico{width:24px;height:24px;color:var(--accent-ink)}
.pm-l.site .ico{color:var(--text-2)}
.pm-a{display:flex;align-items:center;color:var(--muted)}
.pm-ic{display:flex;gap:4px}
.pm-ic .ico{width:16px;height:16px}
.viz.on .pm .pm-l:nth-child(3) .sw{animation:swon .4s 1.2s forwards}
.viz.on .pm .pm-l:nth-child(3) .sw::after{animation:swk .4s 1.2s var(--ease) forwards}
@media (max-width:560px){.pm{grid-template-columns:1fr}.pm-a{justify-content:center;transform:rotate(90deg)}}

/* bookmarks, tabs */
.bmc{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.bm-star{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;background:var(--i-manilla);color:var(--i-ink);border:2px solid var(--i-ink)}
.bm-star .ico{width:36px;height:36px}
.viz.on .bm-star .ico{animation:tw 2.6s ease-in-out infinite;fill:var(--i-clay)}
.bm-list{display:flex;flex-direction:column;gap:6px}
.bm-f,.bm-r{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:11px;background:var(--paper);border:1px solid var(--line);font-weight:500}
.bm-f .ico{color:var(--i-kraft)}
.bm-r.new{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.bm-r em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700}
.bm-r .sk{flex:1}
.viz.on .bm-r.new{animation:pop .5s .6s var(--ease) both}
.tt{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px}
.tt-h{display:flex;gap:6px;margin-bottom:12px}
.tt-h span{display:flex;gap:6px;align-items:center;padding:6px 11px;border-radius:9px;font-size:.78rem;font-weight:600;color:var(--muted)}
.tt-h span.on{background:var(--text);color:var(--bg)}
.tt-h span b{font-size:.7rem;background:var(--bg);color:var(--text);border-radius:5px;padding:0 5px}
.tt-h .ico{width:14px;height:14px}
.tt-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tt-t{border-radius:11px;background:var(--bg);border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px}
.tt-t i{height:38px;border-radius:7px;background:var(--i-oat)}
.tt-t.act{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.tt-t.act i{background:var(--i-clay)}

/* download, pdf */
.dlc,.pdc{display:flex;flex-direction:column;gap:12px}
.dl-f{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.dl-f>.ico{width:34px;height:34px;color:var(--i-clay)}
.dl-f>div{flex:1;display:flex;flex-direction:column;gap:2px}
.dl-bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:6px}
.dl-bar i{display:block;height:100%;width:0;background:var(--ok);border-radius:9px}
.viz.on .dl-bar i{animation:fill 2.2s .3s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.dl-chk{display:flex;flex-wrap:wrap;gap:6px}
.dl-chk span{display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:99px;background:var(--ok-soft);color:var(--ok);font-size:.78rem;font-weight:600}
.dl-chk span.w{background:var(--warn-soft);color:var(--warn)}
.dl-chk .ico{width:14px;height:14px}
.pdc{flex-direction:row;align-items:center}
.pd-doc{flex:1;padding:16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pd-doc>.ico{width:30px;height:30px;color:var(--bad)}
.pd-ch{flex:1;padding:12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:6px}
.pd-ch div{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:9px;background:var(--bg);font-size:.82rem}
.pd-ch div.hl{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}

/* search + suggestions */
.sb-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--paper);border:1.5px solid var(--accent-line);font-size:.92rem;color:var(--text)}
.sb-in .caret{width:2px;height:18px;background:var(--accent);animation:blk 1s steps(2) infinite}
.sb-in .typed{overflow:hidden;white-space:nowrap;max-width:0;transition:max-width 1.6s steps(20)}
.viz.on .sb-in .typed{max-width:20em}
.sb-to{display:flex;gap:12px;align-items:center;margin-top:16px}
.sb-to>div:first-child{color:var(--muted)}
.sb-p{flex:1;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column}
.sg-l{margin-top:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sg-l>div{display:flex;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font-size:.84rem}
.sg-l>div:first-child{border-top:0}
.sg-l em{margin-left:auto;font-style:normal;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.sg-l .rem em{background:var(--warn-soft);color:var(--warn)}
.sg-l .ico{color:var(--muted)}

/* vault, warning */
.vc{max-width:380px;margin:auto}
.v-addr{display:flex;gap:6px;align-items:center;padding:10px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:.8rem;margin-bottom:12px}
.v-addr .ico{width:15px;height:15px;color:var(--ok)}
.v-addr b{color:var(--text)}
.v-form{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.v-f{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-family:var(--mono);font-size:.8rem}
.v-pop{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--text);color:var(--bg);font-size:.82rem;font-weight:600}
.v-pop em{flex-basis:100%;font-style:normal;font-weight:500;font-size:.72rem;opacity:.75}
.viz.on .v-pop{animation:pop .5s .5s var(--ease) both}
.wc{max-width:400px;margin:auto;text-align:center;padding:24px;border-radius:18px;background:#8E2B21;color:#FBEDE9}
.wc strong{color:#fff;font-family:var(--serif);font-size:1.3rem;font-weight:500;display:block;margin:6px 0}
.wc p{margin:0 0 14px;font-size:.86rem;opacity:.9}
.w-ic{width:56px;height:56px;margin:auto;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center}
.w-ic .ico{width:30px;height:30px;color:#fff}
.viz.on .w-ic{animation:pls2 1.8s ease-in-out infinite}
@keyframes pls2{50%{transform:scale(1.08)}}
.w-b{display:flex;justify-content:center;gap:14px;align-items:center}
.w-b .btn{background:#fff;color:#8E2B21;box-shadow:none;pointer-events:none}
.w-l{font-size:.8rem;text-decoration:underline;opacity:.8}

/* steps / install / timeline / checklist */
.steps-v{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:s}
.steps-v li{position:relative;padding:16px 10px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.steps-v .n{position:absolute;top:-10px;left:-6px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:700;display:grid;place-items:center}
.steps-v .ico{width:28px;height:28px;color:var(--accent-ink)}
.steps-v strong{font-size:.82rem;line-height:1.3}
@media (max-width:560px){.steps-v{grid-template-columns:1fr 1fr}}
.tline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.tline li{display:grid;grid-template-columns:34px 1fr;gap:12px;position:relative;padding-bottom:16px;transition:opacity .5s;transition-delay:calc(var(--d)*150ms)}
.tline li:not(:last-child)::after{content:"";position:absolute;left:16px;top:34px;bottom:0;border-left:2px dashed var(--line-2)}
.tline li span{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700}
.tline li p{margin:6px 0 0;color:var(--text);font-weight:500}
.ck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ck li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);transition:opacity .5s;transition-delay:calc(var(--d)*180ms)}
.ck b{width:26px;height:26px;border-radius:8px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:none}
.ck b .ico{width:15px;height:15px}
.ck span{color:var(--text);font-weight:500}

/* update, license, lineage, engines */
.up{display:flex;align-items:center;gap:12px;justify-content:center}
.up-v{width:120px;padding:16px 10px;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px}
.up-v .ico{width:28px;height:28px;color:var(--muted)}
.up-v.new{border-color:var(--accent-line);background:var(--accent-soft)}
.up-v.new .ico{color:var(--accent-ink)}
.up-v b{font-family:var(--mono);font-size:.8rem}
.up-a{color:var(--accent-ink)}
.viz.on .up-a{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
.up-l{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.up-l span{display:flex;gap:6px;align-items:center;padding:5px 10px;border-radius:99px;background:var(--ok-soft);color:var(--ok);font-weight:600;font-size:.76rem}
.up-l .ico{width:13px;height:13px}
.lc{display:grid;grid-template-columns:1.3fr .7fr;gap:12px;align-items:center}
.lc-doc{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.lc-h{display:flex;gap:8px;align-items:center}
.lc-h .ico{color:var(--accent-ink)}
.lc-code{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:9px;background:var(--bg);font-size:.76rem;font-family:var(--mono)}
.lc-r{display:flex;flex-direction:column;gap:7px}
.lc-r span{display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:11px;background:var(--paper);border:1px solid var(--line);font-weight:600;color:var(--text)}
.lc-r .ico{color:var(--ok)}
.ln-tree{display:flex;flex-direction:column;align-items:center}
.ln-n{display:flex;gap:10px;align-items:center;padding:10px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);min-width:min(300px,100%)}
.ln-n strong{font-size:.9rem}
.ln-n small{margin-left:auto;text-align:right}
.ln-n .ico{color:var(--muted)}
.ln-n.nv{border:2px solid var(--accent);background:var(--accent-soft)}
.ln-n.nv img{border-radius:50%}
.ln-v{display:block;width:2px;height:18px;background:var(--line-2)}
.viz.on .ln-v{animation:grow .4s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}}
.en{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.en-f{padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--c,var(--line-2))}
.en-f.clay{--c:var(--i-clay)}.en-f.sky{--c:var(--i-sky)}.en-f.olive{--c:var(--i-olive)}
.en-f strong{display:block;margin-bottom:10px}
.en-f div{display:flex;flex-wrap:wrap;gap:6px}
.en-f span{padding:4px 10px;border-radius:99px;background:var(--bg);font-size:.78rem;font-weight:550}
.en-f span.hl{background:var(--text);color:var(--bg)}
@media (max-width:560px){.en,.lc{grid-template-columns:1fr}}

/* mail */
.ml{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ml-h{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.8rem}
.ml-h .ico{color:var(--accent-ink)}
.ml-c{display:grid;grid-template-columns:1fr 1fr}
.ml-in,.ml-out{padding:14px;display:flex;flex-direction:column;gap:6px}
.ml-out{border-left:1px solid var(--line);background:var(--bad-soft)}
.ml-in strong,.ml-out strong{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.ml-in strong .ico{color:var(--ok)}.ml-out strong .ico{color:var(--bad)}
.ml-in span,.ml-out span{font-size:.82rem;padding:6px 10px;border-radius:9px;background:var(--bg)}
.ml-out span{text-decoration:line-through;opacity:.8;background:var(--paper)}

/* bars + request chart */
.bars,.rq{display:flex;flex-direction:column;gap:12px}
.bar-r,.rq-r{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.bar-r span,.rq-r span{font-weight:550;color:var(--text);font-size:.82rem}
.bar-t,.rq-b{height:14px;border-radius:99px;background:var(--paper);border:1px solid var(--line);overflow:hidden;position:relative}
.bar-t i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--i-kraft),var(--i-clay));transition:width 1s var(--ease);transition-delay:calc(var(--d)*120ms + .2s)}
.viz.on .bar-t i{width:var(--w)}
.rq-b{height:30px;display:flex;flex-direction:column;gap:3px;padding:3px;border-radius:9px}
.rq-b i{display:block;height:10px;width:0;border-radius:5px;transition:width 1.1s var(--ease)}
.rq-b i.a{background:var(--line-2)}
.rq-b i.b{background:var(--accent);transition-delay:.6s}
.viz.on .rq-b i{width:var(--w)}
.rq-leg{display:flex;gap:16px;font-size:.78rem;font-weight:600;margin-bottom:4px}
.rq-leg span{display:flex;gap:6px;align-items:center}
.rq-leg span::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--line-2)}
.rq-leg .b::before{background:var(--accent)}
@media (max-width:560px){.bar-r,.rq-r{grid-template-columns:1fr;gap:4px}}

/* default browser, pip, customize */
.db{display:grid;grid-template-columns:1fr auto 1.3fr;gap:12px;align-items:center}
.db-app{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-weight:550;color:var(--text)}
.db-app .ico{width:28px;height:28px;color:var(--i-sky)}
.db-a{color:var(--muted)}
.db-pick{padding:12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:6px}
.db-o{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--bg)}
.db-o img{border-radius:50%}
.db-o i{width:22px;height:22px;border-radius:50%;background:var(--line-2)}
.db-o .sk{flex:1}
.db-o b{margin-left:auto;width:16px;height:16px;border-radius:50%;border:5px solid var(--accent)}
.db-o.sel{background:var(--accent-soft);font-weight:600;color:var(--accent-ink)}
@media (max-width:560px){.db{grid-template-columns:1fr}.db-a{justify-self:center;transform:rotate(90deg)}}
.pp{position:relative;height:220px;border-radius:14px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.pp-page{padding:16px;display:flex;flex-direction:column;gap:10px}
.pp-win{position:absolute;right:14px;bottom:14px;width:46%;aspect-ratio:16/9;border-radius:10px;background:#1d1c1b;display:grid;place-items:center;color:#fff;box-shadow:var(--sh-3)}
.pp-win .ico{width:26px;height:26px}
.pp-prog{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.25)}
.pp-prog::after{content:"";position:absolute;inset:0;width:0;background:var(--i-clay);border-radius:3px}
.viz.on .pp-win{animation:pipf 6s ease-in-out infinite}
.viz.on .pp-prog::after{animation:fill 6s linear infinite}
@keyframes pipf{0%,100%{transform:translate(0,0)}40%{transform:translate(-60%,-70%)}70%{transform:translate(-30%,-20%)}}
.cu{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center}
.cu-ph{height:200px;border-radius:22px;border:2px solid var(--i-ink);background:var(--paper);padding:12px 10px;display:flex;flex-direction:column;gap:8px;position:relative}
.cu-ph .tb{height:22px;border-radius:11px;background:var(--i-oat);flex:none}
.cu-ph.bot .tb{margin-top:auto;background:var(--i-clay)}
.cu-ph small{position:absolute;bottom:-22px;left:0;right:0;text-align:center}
.cu-th{display:flex;flex-direction:column;gap:8px}
.cu-th span{width:34px;height:34px;border-radius:50%;border:2px solid var(--i-ink);display:grid;place-items:center}
.cu-th .l{background:#FAF9F5}.cu-th .d{background:#262624}.cu-th .s{background:var(--i-manilla)}
.cu-th .ico{width:16px;height:16px;color:var(--i-ink)}
.cu{padding-bottom:22px}

/* local network, study, relay, sponsored */
.lnw{display:flex;flex-direction:column;gap:12px;align-items:center}
.ln-site{display:flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:.8rem}
.ln-prompt{width:min(340px,100%);padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:550;color:var(--text)}
.ln-prompt>.ico{color:var(--warn)}
.ln-prompt span{flex:1}
.ln-prompt div{flex-basis:100%;display:flex;justify-content:flex-end;gap:8px}
.ln-prompt b{padding:6px 12px;border-radius:9px;background:var(--bg);font-size:.8rem}
.ln-prompt b.y{background:var(--text);color:var(--bg)}
.ln-dev{display:flex;gap:10px}
.ln-dev span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border-radius:12px;background:var(--paper);border:1px dashed var(--line-2);font-size:.76rem}
.ln-dev .ico{width:24px;height:24px;color:var(--muted)}
.st{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.st-f{width:80px;height:80px;border-radius:22px;background:var(--i-cactus);border:2px solid var(--i-ink);display:grid;place-items:center;color:var(--i-ink)}
.st-f .ico{width:40px;height:40px}
.viz.on .st-f .ico{animation:wig 3s ease-in-out infinite}
.st-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-g div{padding:12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.st-sw{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-weight:600;color:var(--text)}
.rl{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.rl-site,.rl-you{padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.rl-site b{font-family:var(--mono);font-size:.72rem;color:var(--accent-ink);word-break:break-all}
.rl-mid{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--i-fig);text-align:center}
.rl-mid .ico{width:30px;height:30px}
@media (max-width:560px){.rl{grid-template-columns:1fr}}
.sp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-t{position:relative;padding:12px 8px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.sp-t i{width:36px;height:36px;border-radius:50%;background:var(--i-oat)}
.sp-t.spn{border-color:var(--warn);background:var(--warn-soft)}
.sp-t.spn i{background:var(--i-kraft)}
.sp-t em{font-style:normal;font-size:.62rem;font-weight:700;color:var(--warn);text-transform:uppercase;letter-spacing:.04em}

/* availability */
.av{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.av-i{padding:16px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.av-i .ico{width:28px;height:28px;color:var(--muted)}
.av-i:first-child{border-color:var(--ok);background:var(--ok-soft)}
.av-i:first-child .ico{color:var(--ok)}
.av-i.focus{box-shadow:0 0 0 3px var(--accent-line)}
.av-i .badge{font-size:.7rem;text-align:center;line-height:1.3}
@media (max-width:560px){.av{grid-template-columns:1fr 1fr}}

/* exceptions, smartblock */
.ex{display:flex;flex-direction:column;gap:8px}
.ex-r{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.ex-r span{flex:1;font-family:var(--mono);font-size:.8rem}
.ex-r em{font-style:normal;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px}
.ex-r em.ok{background:var(--ok-soft);color:var(--ok)}.ex-r em.w{background:var(--warn-soft);color:var(--warn)}
.ex-r>.ico{color:var(--ok)}
.ex-r:first-child>.ico{color:var(--warn)}
.smb{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.sb-b,.sb-s{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sb-b{text-decoration:line-through;opacity:.75}
.sb-b em,.sb-s em{font-style:normal;font-size:.72rem;font-weight:700}
.sb-b em{color:var(--bad)}.sb-s em{color:var(--ok)}
.sb-s{border-color:var(--ok);background:var(--ok-soft)}
.sb-s .ico{color:var(--ok);width:28px;height:28px}
.sb-arr{color:var(--muted)}

/* notes, demo, layers, focus, panel, device, qa, brand */
.nt{max-width:420px;margin:auto;padding:16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.nt-h{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.nt-h img{border-radius:12px}
.nt-h div{display:flex;flex-direction:column}
.nt-b{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--bg)}

.bd{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:stretch}
.bd-win{border-radius:14px;background:var(--paper);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh-2)}
.bd-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg-alt)}
.bd-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.bd-bar span{margin-left:8px;flex:1;display:flex;gap:6px;align-items:center;padding:4px 10px;border-radius:99px;background:var(--paper);font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.bd-bar .ico{width:12px;height:12px;color:var(--ok)}
.bd-body{position:relative;display:grid;grid-template-columns:1fr 110px;gap:12px;padding:14px;min-height:270px}
.bd-main,.bd-side{display:flex;flex-direction:column;gap:9px}
.bd-img{height:70px;border-radius:9px;background:linear-gradient(135deg,var(--i-oat),var(--i-cactus))}
.bd-ad{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--warn);border-radius:9px;background:var(--warn-soft);color:var(--warn);font-size:.7rem;font-weight:700;max-height:200px;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,padding .6s,margin .6s,border-width .6s}
.bd-ad.wide{height:48px}.bd-ad.tall{height:110px}
.bd-ck{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:12px;background:var(--text);color:var(--bg);font-size:.72rem;display:flex;gap:8px;align-items:center;justify-content:space-between;transition:transform .5s var(--ease),opacity .4s}
.bd-ck b{background:var(--bg);color:var(--text);padding:3px 8px;border-radius:7px;white-space:nowrap}
.bd.on .bd-ad{max-height:0;opacity:0;padding:0;margin:-4.5px 0;border-width:0}
.bd.on .bd-ck{transform:translateY(140%);opacity:0}
.bd-ctl{display:flex;flex-direction:column;gap:14px}
.bd-sw{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-weight:600;color:var(--text);box-shadow:var(--sh-1)}
.bd-sw .on{display:none}
.bd.on .bd-sw .on{display:inline}.bd.on .bd-sw .off{display:none}
.bd.on .bd-sw .sw{background:var(--ok)}.bd.on .bd-sw .sw::after{transform:translateX(16px)}
.bd-n strong{display:block;font-family:var(--serif);font-size:3rem;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.bd-log{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.68rem}
.bd-log div{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}
.bd-log span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-log em{font-style:normal;font-weight:700;color:var(--muted)}
.bd-log .b{display:none}
.bd.on .bd-log span{text-decoration:line-through;color:var(--muted)}
.bd.on .bd-log .a{display:none}.bd.on .bd-log .b{display:inline;color:var(--accent-ink)}
@media (max-width:700px){.bd{grid-template-columns:1fr}.bd-body{grid-template-columns:1fr}.bd-side{flex-direction:row}.bd-side .bd-ad{flex:1;height:60px}}

.ly{display:flex;flex-direction:column;gap:7px;perspective:600px}
.ly-i{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--c,var(--i-clay))}
.ly-i:nth-child(2){--c:var(--i-fig)}.ly-i:nth-child(3){--c:var(--i-olive)}.ly-i:nth-child(4){--c:var(--i-sky)}.ly-i:nth-child(5){--c:var(--i-kraft)}
.ly-i .ico{color:var(--c,var(--i-clay))}
.ly-i small{text-align:right}

.fv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fv-a,.fv-b{position:relative;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:190px}
.fv-a .bd-ad{height:34px}
.fv-a .pop{position:absolute;right:10px;top:34px;width:26px;height:26px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font-weight:800}
.viz.on .fv-a .pop{animation:pls2 1s ease-in-out infinite}
.fv-b{border-color:var(--ok)}

.sp-p{max-width:400px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-2)}
.sp-h{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.sp-h>.ico{width:28px;height:28px;color:var(--ok)}
.sp-h div{flex:1;display:flex;flex-direction:column}
.sp-r{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.84rem}
.sp-r:last-child{border-bottom:0}
.sp-r em{font-style:normal;font-weight:600;color:var(--accent-ink);font-size:.78rem}

.dv-ph{display:flex;flex-wrap:wrap;gap:8px;padding:18px;border-radius:22px;border:2px solid var(--i-ink);background:var(--paper)}
.dv-ph span{display:flex;gap:6px;align-items:center;padding:7px 12px;border-radius:99px;background:var(--bg);font-weight:550;color:var(--text)}
.dv-ph .ico{color:var(--accent-ink);width:16px;height:16px}
.dv p{display:flex;gap:8px;margin:14px 0 0;color:var(--text-2)}
.dv p .ico{color:var(--ok)}

.qa{display:flex;flex-direction:column;gap:10px}
.qa .q{align-self:flex-end;max-width:85%;display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--text);color:var(--bg);font-weight:500}
.qa .a{align-self:flex-start;width:70%;display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--paper);border:1px solid var(--line)}
.qa .a img{border-radius:50%}
.bk{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.bk-l img{border-radius:50%;box-shadow:var(--sh-2)}
.bk-s{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-s span{display:flex;gap:8px;align-items:center;padding:8px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-family:var(--mono);font-size:.76rem}
.bk-s i{width:26px;height:26px;border-radius:7px;background:var(--c);border:1px solid var(--line-2)}
@media (max-width:560px){.bk{grid-template-columns:1fr;justify-items:center}}

/* ---------- primitives for part-3 visuals ---------- */
.cxg{display:grid;gap:10px}.cxg.c2{grid-template-columns:1fr 1fr}.cxg.c3{grid-template-columns:repeat(3,1fr)}
.cx{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.cx .ico{width:24px;height:24px;color:var(--accent-ink)}
.cx strong{font-size:.88rem;line-height:1.3}
.cx.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-soft)}.cx.ok .ico{color:var(--ok)}
.cx.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:var(--warn-soft)}.cx.warn .ico{color:var(--warn)}
.cx.bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--line));background:var(--bad-soft)}.cx.bad .ico{color:var(--bad)}
.fx{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;justify-content:center}
.fx-n{flex:1 1 120px;max-width:200px;padding:14px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.fx-n .ico{width:26px;height:26px;color:var(--accent-ink)}
.fx-n strong{font-size:.84rem;line-height:1.25}
.fx-n.ok{border-color:var(--ok);background:var(--ok-soft)}.fx-n.ok .ico{color:var(--ok)}
.fx-n.bad{border-color:var(--bad);background:var(--bad-soft)}.fx-n.bad .ico{color:var(--bad)}
.fx-a{display:flex;align-items:center;color:var(--muted)}
.viz.on .fx-a{animation:nudge 1.6s ease-in-out infinite}
.rx{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rx-h{display:flex;gap:8px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:600;color:var(--text)}
.rx-r{display:flex;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.rx-r:last-child{border-bottom:0}
.rx-r>.ico{color:var(--muted)}
.rx-r span{flex:1;color:var(--text);font-weight:500;line-height:1.3}
.rx-r em{font-style:normal;white-space:nowrap}
.vx-n{display:flex;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:.84rem}
.cal{width:120px;margin:0 auto 14px;border-radius:16px;overflow:hidden;background:var(--paper);border:1px solid var(--line);text-align:center;box-shadow:var(--sh-2)}
.cal-h{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.78rem;padding:6px}
.cal-d{font-family:var(--serif);font-size:2.6rem;line-height:1.2;color:var(--text)}
.cal small{display:block;padding-bottom:8px}
.meter{margin-bottom:12px}
.mt-b{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.mt-b i{display:block;height:100%;width:0;transition:width 1s var(--ease)}
.viz.on .mt-b i{width:var(--w)}
.mt-b .a,.mt-l .a::before{background:var(--i-clay)}.mt-b .b,.mt-l .b::before{background:var(--i-sky)}.mt-b .c,.mt-l .c::before{background:var(--i-olive)}
.mt-l{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.76rem}
.mt-l span{display:flex;gap:6px;align-items:center}
.mt-l span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--line-2)}
.tree{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
.tr-f,.tr-l{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:9px}
.tr-f{font-weight:600;color:var(--text)}.tr-f .ico{color:var(--i-kraft)}
.tr-c{margin-left:18px;border-left:2px dashed var(--line-2);padding-left:10px}
.tr-l .ico{width:15px;height:15px;color:var(--accent-ink)}.tr-l .sk{flex:1}
.sheet{max-width:360px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px 18px 12px 12px;padding:16px;box-shadow:var(--sh-2)}
.sh-h{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:.8rem;margin-bottom:12px}
.sh-h .ico{color:var(--bad)}
.sh-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.sh-apps span{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;background:var(--bg);font-size:.72rem;text-align:center}
.sh-apps span.hl{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.signin{max-width:360px;margin:auto;padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.si-h{display:flex;gap:8px;align-items:center}
.si-svc{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--info-soft);color:var(--info);font-size:.82rem}
.si-svc b{color:var(--text)}
.si-f{padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--bg)}
.signin em{font-style:normal;display:flex;gap:6px;font-size:.76rem;color:var(--muted)}
.swb{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:auto}
.sb-o{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-weight:600;color:var(--text)}
.sb-o img{border-radius:50%}.sb-o i{width:30px;height:30px;border-radius:50%;background:var(--line-2)}
.sb-o span{flex:1}
.viz.on .swb .sb-o.on .sw{animation:swoff .4s 1.4s forwards}.viz.on .swb .sb-o.on .sw::after{animation:swkoff .4s 1.4s var(--ease) forwards}
.viz.on .swb .sb-o:not(.on) .sw{animation:swon .4s 1.4s forwards}.viz.on .swb .sb-o:not(.on) .sw::after{animation:swk .4s 1.4s var(--ease) forwards}
@keyframes swoff{to{background:var(--line-2)}}
@keyframes swkoff{to{transform:translateX(0)}}
.report{max-width:380px;margin:auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rp-h{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.rp-h strong{flex:1}.rp-h>.ico{color:var(--bad)}
.rp-r{display:flex;gap:8px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font-size:.84rem}
.rp-r .ico{width:15px;height:15px;color:var(--ok)}
.rp-r.no .ico{color:var(--bad)}
.report .ad-b{padding:10px 14px;margin:0}
.chips-g{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips-g .chip{padding:8px 12px;font-size:.84rem}
.chips-g .ico{color:var(--accent-ink)}
.wd{display:flex;align-items:center;gap:18px;justify-content:center}
.wd>.ico{width:84px;height:84px;color:var(--i-sky)}
.viz.on .wd>.ico{animation:spin 18s linear infinite}
.wd div{display:flex;flex-direction:column;gap:8px}
.wd span{padding:7px 12px;border-radius:99px;background:var(--paper);border:1px solid var(--line);font-weight:550;font-size:.82rem}
.tlx{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.tlx-a,.tlx-b{padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.tlx-a .ico{color:var(--muted)}.tlx-b{border-color:var(--ok);background:var(--ok-soft)}.tlx-b .ico{color:var(--ok)}
.tlx-m{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.74rem;font-weight:600;text-align:center;max-width:90px}
.lbl{max-width:420px;margin:auto}
.lbl .tg-row{background:var(--paper);border:1px solid var(--line);border-radius:12px}
.lbl-a{display:flex;justify-content:center;color:var(--muted);padding:6px}
.lbl-d{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:.84rem}
.lbl-d b{color:var(--text)}
.form{max-width:380px;margin:auto;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.form label{display:flex;flex-direction:column;gap:4px}
.form label span{padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font-size:.84rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form .btn{align-self:flex-end;pointer-events:none}
.mono{font-family:var(--mono)}
.form b,.tmpl b{color:var(--accent-ink)}
.tmpl{display:flex;flex-direction:column;gap:8px}
.tmpl>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:.8rem}
.tmpl .ok>.ico{color:var(--ok)}.tmpl .bad>.ico{color:var(--bad)}
.tmpl span{flex:1;min-width:0;word-break:break-all}
.box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line-2);display:grid;place-items:center;flex:none}
.box.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.box .ico{width:14px;height:14px}
.shot{max-width:360px;margin:auto}
.shot-b{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.red{height:20px;border-radius:5px;background:var(--bad-soft);color:var(--bad);font-size:.72rem;padding:2px 8px;overflow:hidden;position:relative}
.red::after{content:"";position:absolute;inset:0;background:var(--text);transform-origin:left;transform:scaleX(0)}
.viz.on .red::after{animation:redact .6s 1s var(--ease) forwards}
@keyframes redact{to{transform:scaleX(1)}}
.shot em{font-style:normal;display:flex;gap:6px;margin-top:10px;font-size:.8rem;color:var(--ok);font-weight:600}
.cb{position:relative;height:220px;border-radius:14px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.cb-page{padding:16px;display:flex;flex-direction:column;gap:10px;opacity:.5}
.cb-bar{position:absolute;left:10px;right:10px;bottom:10px;padding:14px;border-radius:12px;background:var(--text);color:var(--bg);display:flex;flex-direction:column;gap:10px;transform:translateY(120%);transition:transform .6s var(--ease) .3s}
.viz.on .cb-bar{transform:none}
.cb-bar strong{display:flex;gap:8px;align-items:center;color:var(--bg)}
.cb-bar div{display:flex;gap:8px;flex-wrap:wrap}
.cb-bar span{padding:6px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--bg) 35%,transparent);font-size:.78rem}
.cb-bar span.y{background:var(--bg);color:var(--text)}
.ladder{display:flex;align-items:flex-end;gap:12px;height:170px;padding:0 10px}
.ld-s{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.ld-s i{display:block;width:100%;height:0;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--i-olive),color-mix(in srgb,var(--i-olive) 50%,var(--paper)));transition:height .9s var(--ease);transition-delay:calc(var(--d)*120ms)}
.viz.on .ld-s i{height:var(--h)}
.ld-s span{font-size:.78rem;font-weight:600;color:var(--text);text-align:center}
.hw{max-width:400px;margin:auto;padding:22px;border-radius:16px;background:var(--paper);border:1px solid var(--warn);text-align:center}
.hw>.ico{width:34px;height:34px;color:var(--warn);margin:0 auto 6px}
.hw strong{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;margin-bottom:6px}
.hw p{font-size:.84rem;margin:0 0 14px}
.hw div{display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}
.hw .btn{pointer-events:none}
.hw-l{font-size:.78rem;text-decoration:underline;color:var(--muted)}
.snd{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.snd-d{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);min-width:0}
.snd-d>.ico{width:30px;height:30px;color:var(--accent-ink)}
.snd-card{display:flex;gap:6px;align-items:center;padding:7px 10px;border-radius:10px;background:var(--bg);font-family:var(--mono);font-size:.7rem;max-width:100%;overflow:hidden;white-space:nowrap}
.snd-card.in{opacity:0}
.viz.on .snd-card.in{animation:pop .5s 1.6s var(--ease) forwards;animation-direction:reverse}
.viz.on .snd-card.in{animation:appear .5s 1.6s var(--ease) forwards}
@keyframes appear{to{opacity:1}}
.snd-p{width:60px;height:10px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--accent-line) 0 8px,transparent 8px 14px)}
.viz.on .snd-p{animation:pipe 1s linear infinite}
.brk{display:flex;flex-direction:column;gap:10px}
.brk-p{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.brk-hole{height:90px;border-radius:10px;border:2px dashed var(--bad);background:var(--bad-soft);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--bad);font-weight:600;font-size:.82rem}
.brk-x{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:.82rem}
.lp{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.lp-s{padding:12px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:120px}
.lp-s strong{display:flex;justify-content:space-between;gap:10px;align-items:center}
.lp>.ico{color:var(--accent-ink)}
.wl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wl-i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 10px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
.wl-i span{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.as{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end}
.as-i{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:14px;background:var(--paper);border:1px solid var(--line);text-align:center}
.as-i img{border-radius:50%}
.as-i strong{font-family:var(--mono);font-size:.76rem}
@media (max-width:560px){.tlx,.snd{grid-template-columns:1fr}.snd-p{justify-self:center;transform:rotate(90deg)}.cxg.c2{grid-template-columns:1fr}.cxg.c3{grid-template-columns:1fr 1fr}}
.phone:not(.run) .scr:last-child{transform:none;opacity:1}

/* =========================================================
   Page templates
   ========================================================= */
.sec{padding:clamp(64px,9vw,120px) 0;position:relative}
.sec.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.sec.tight{padding:clamp(44px,6vw,72px) 0}
.sh{max-width:720px;margin-bottom:clamp(30px,4.5vw,54px)}
.sh.center{margin-inline:auto;text-align:center}
.sh.center .lede{margin-inline:auto}
.sh h2{margin-bottom:14px}

/* ---------- home hero ---------- */
.hero{position:relative;padding:clamp(36px,6vw,80px) 0 clamp(40px,6vw,72px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--i-clay) 18%,transparent),transparent 72%);pointer-events:none}
.hero-g{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,5vw,64px);align-items:center;position:relative}
.hero h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:22px;text-wrap:balance}
:lang(hi) .hero h1{font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.2}
.hero h1 em{font-style:italic;color:var(--accent-ink)}
.hero .lede{margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem;color:var(--text-2)}
.trust span{display:inline-flex;gap:7px;align-items:center}
.trust .ico{width:17px;height:17px;color:var(--ok)}
.hero-art{position:relative}
.hero-art .art{max-width:560px;margin-inline:auto}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.88rem;color:var(--muted)}
.hero-note img{border-radius:50%}

/* ---------- scrollytelling pillars ---------- */
.scrolly{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.sc-steps{display:flex;flex-direction:column}
.sc-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;opacity:.35;transition:opacity .45s}
.sc-step.act{opacity:1}
.sc-step .kicker{margin-bottom:10px}
.sc-step h3{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:14px}
.sc-step p{font-size:1.08rem;color:var(--text-2);max-width:46ch}
.sc-step .mv{display:none}
.sc-stage{position:sticky;top:calc(var(--head) + 4vh);height:84vh;display:flex;align-items:center}
.sc-stage>.sv{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(20px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.sc-stage>.sv.act{opacity:1;transform:none;pointer-events:auto}
.sc-stage .viz{width:100%}
.sc-dots{position:absolute;left:-28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.sc-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:all .3s}
.sc-dots i.act{height:22px;border-radius:4px;background:var(--accent)}

/* ---------- split screens (feature pages + home) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.split.rev>:first-child{order:2}
.split h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.split .lede{margin-bottom:22px}
.screens{display:flex;flex-direction:column;gap:clamp(48px,8vw,104px)}
.screen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.screen:nth-child(even) .screen-v{order:2}
.screen-t .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:.86rem;margin-bottom:14px}
.screen-t h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.screen-t p{font-size:1.06rem;color:var(--text-2);line-height:1.7;font-family:var(--serif)}
:lang(hi) .screen-t p{font-family:var(--sans)}
.screen-t .more{margin-top:6px}

/* ---------- feature grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s;overflow:hidden;min-height:200px}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.fcard .fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--tint,var(--accent-soft));color:var(--tc,var(--accent-ink));transition:transform .4s var(--ease)}
.fcard:hover .fi{transform:rotate(-8deg) scale(1.06)}
.fcard .fi .ico{width:22px;height:22px}
.fcard h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin:4px 0 0}
.fcard p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5}
.fcard .go{margin-top:auto;color:var(--accent-ink);display:flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600}
.fcard .go .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.fcard:hover .go .ico{transform:translateX(4px)}
.fcard.big{grid-column:span 2;flex-direction:row;align-items:center;gap:24px}
.fcard.big>div:first-child{flex:1;display:flex;flex-direction:column;gap:10px}
.fcard.big .art{width:44%;flex:none}
.t1{--tint:#F7E7DE;--tc:#A44B29}.t2{--tint:#E8EEF6;--tc:#3C6A9A}.t3{--tint:#EAF0E2;--tc:#5A6E3F}.t4{--tint:#F1E9F1;--tc:#9A4C6C}.t5{--tint:#F5EEDC;--tc:#8A6512}.t6{--tint:#E7EFEC;--tc:#3F6B5F}
:root[data-theme=dark] .t1{--tint:#3D2E27;--tc:#EE9B78}:root[data-theme=dark] .t2{--tint:#26323F;--tc:#8DB6E3}:root[data-theme=dark] .t3{--tint:#2E3527;--tc:#A9C08C}:root[data-theme=dark] .t4{--tint:#3A2A33;--tc:#E09ABA}:root[data-theme=dark] .t5{--tint:#3B3424;--tc:#E3C277}:root[data-theme=dark] .t6{--tint:#26332F;--tc:#93C1B4}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.member{padding:24px 20px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:transform .35s var(--ease),box-shadow .35s}
.member:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.av{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.9rem;color:#fff;margin-bottom:8px;position:relative}
.av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed var(--line-2);animation:spin 30s linear infinite}
.member strong{font-family:var(--serif);font-size:1.15rem;font-weight:500}
.member small{color:var(--muted);font-size:.86rem}
.member .socials{margin-top:10px}
.member .socials a{width:34px;height:34px}

/* ---------- inner page hero ---------- */
.phero{position:relative;padding:clamp(28px,4.5vw,60px) 0 clamp(28px,4vw,52px);overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg-alt),var(--bg))}
.phero::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;height:150%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hue,var(--i-clay)) 16%,transparent),transparent 72%);pointer-events:none}
.phero-g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);align-items:center;position:relative}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:14px;text-wrap:balance}
:lang(hi) .phero h1{font-size:clamp(1.9rem,4vw,3rem)}
.phero .lede{margin-bottom:0}
.phero .art{max-width:400px;margin-inline:auto}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.84rem;color:var(--muted);margin-bottom:18px}
.crumb a{color:var(--text-2)}
.crumb a:hover{color:var(--accent-ink);text-decoration:underline}
.crumb .ico{width:14px;height:14px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.phero .cta-row{margin:24px 0 0}

/* ---------- help centre ---------- */
.hhero{padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,56px);text-align:center;background:linear-gradient(180deg,var(--bg-alt),var(--bg));border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hhero h1{font-size:clamp(2.3rem,5vw,3.8rem)}
.bigsearch{display:flex;align-items:center;gap:12px;width:min(640px,100%);height:60px;margin:26px auto 16px;padding:0 20px;border-radius:16px;background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-2);color:var(--muted);font-size:1.02rem;text-align:left;transition:box-shadow .2s,border-color .2s}
.bigsearch:hover{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft),var(--sh-2)}
.bigsearch .ico{color:var(--accent-ink)}
.bigsearch kbd{margin-left:auto}
.popular{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:.88rem}
.popular span{color:var(--muted)}
.popular a{padding:5px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--text-2);transition:all .2s}
.popular a:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.topic:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.topic .fi{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--tint);color:var(--tc)}
.topic .fi .ico{width:24px;height:24px}
.topic h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:4px 0 0}
.topic p{font-size:.88rem;color:var(--muted);margin:0}
.topic ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.86rem}
.topic ul a{color:var(--text-2)}
.topic ul a:hover{color:var(--accent-ink)}
.topic .cnt{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--accent-ink)}
.plist{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plist a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line);transition:all .25s}
.plist a:hover{border-color:var(--accent-line);transform:translateX(4px)}
.plist .fi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--tint,var(--accent-soft));color:var(--tc,var(--accent-ink));flex:none}
.plist strong{font-weight:600;font-size:.95rem}
.plist small{display:block;color:var(--muted);font-size:.82rem}
.plist .ico.r{margin-left:auto;color:var(--muted);width:16px;height:16px}
.helpcard{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:26px;border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line)}
.helpcard .art{width:140px}
.helpcard h3{margin-bottom:4px}
.helpcard p{margin:0;color:var(--muted)}

/* ---------- article (support + docs) ---------- */
.alayout{display:grid;grid-template-columns:230px minmax(0,1fr) 220px;gap:clamp(20px,3.5vw,48px);align-items:start;padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,96px)}
.alayout.no-side{grid-template-columns:minmax(0,1fr) 230px}
.side-nav{position:sticky;top:calc(var(--head) + 18px);max-height:calc(100vh - var(--head) - 36px);overflow:auto;scrollbar-width:thin;font-size:.88rem}
.side-nav h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.side-nav .sn-top{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--paper);border:1px solid var(--line);margin-bottom:16px;font-weight:600}
.side-nav .sn-top .fi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--tint);color:var(--tc)}
.side-nav .sn-top .fi .ico{width:16px;height:16px}
.side-nav a{display:block;padding:6px 10px;border-radius:8px;color:var(--text-2);line-height:1.35;border-left:2px solid transparent}
.side-nav a:hover{background:var(--paper-2)}
.side-nav a[aria-current]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;border-left-color:var(--accent)}
.side-nav .sn-more{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.amain{min-width:0}
.applies{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tldr{padding:20px 22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);margin-bottom:30px;position:relative;overflow:hidden}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.tldr h2{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px;display:flex;gap:8px;align-items:center}
.tldr h2 .ico{width:16px;height:16px}
.tldr ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:q}
.tldr li{counter-increment:q;display:flex;gap:10px;align-items:baseline}
.tldr li::before{content:counter(q);flex:none;width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);font-size:.74rem;font-weight:700;display:grid;place-items:center;transform:translateY(-1px)}
.tldr li a{color:var(--text);font-weight:500}
.tldr li a:hover{color:var(--accent-ink)}
.astep{padding:32px 0;border-top:1px solid var(--line)}
.astep:first-of-type{border-top:0;padding-top:4px}
.astep-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.astep-h .num{flex:none;width:36px;height:36px;border-radius:11px;background:var(--text);color:var(--bg);font-weight:700;font-size:.88rem;display:grid;place-items:center;margin-top:2px}
.astep h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:0;position:relative}
.astep h2 .anchor{position:absolute;left:-26px;top:4px;opacity:0;color:var(--muted);transition:opacity .2s}
.astep h2:hover .anchor{opacity:1}
.astep h2 .anchor .ico{width:16px;height:16px}
.astep>p{font-family:var(--serif);font-size:1.12rem;line-height:1.75;color:var(--text-2);margin:0 0 18px 50px}
:lang(hi) .astep>p{font-family:var(--sans);font-size:1.05rem}
.astep .viz{margin-left:50px}
.callout{display:flex;gap:12px;padding:16px 18px;border-radius:14px;margin:26px 0;font-size:.95rem}
.callout .ico{flex:none;margin-top:2px}
.callout strong{display:block;margin-bottom:2px}
.callout p{margin:0}
.callout.note{background:var(--info-soft);color:var(--info)}
.callout.warn{background:var(--warn-soft);color:var(--warn)}
.callout.tip{background:var(--ok-soft);color:var(--ok)}
.callout strong{color:inherit}
.callout p{color:var(--text-2)}
.sources{margin:26px 0;padding:18px 20px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.sources h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin-bottom:8px}
.sources a{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--accent-ink);font-size:.92rem}
.sources a .ico{width:15px;height:15px}
.helpful{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 18px;padding:18px 22px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)}
.helpful strong{font-family:var(--serif);font-size:1.12rem;font-weight:500}
.helpful .hb{display:flex;gap:8px}
.helpful button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font-weight:500;transition:all .2s}
.helpful button:hover{border-color:var(--text)}
.helpful button .ico{width:17px;height:17px}
.helpful.done{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.related{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stillhelp{margin-top:30px;padding:24px;border-radius:var(--r-lg);background:var(--text);color:var(--bg);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.stillhelp h3{color:var(--bg);margin-bottom:4px}
.stillhelp p{margin:0;opacity:.75;font-size:.95rem}
.stillhelp .btn{background:var(--bg);color:var(--text)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pager a{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;gap:2px;transition:border-color .2s}
.pager a:hover{border-color:var(--accent-line)}
.pager small{color:var(--muted);font-size:.78rem}
.pager strong{font-weight:600;font-size:.94rem}
.pager .nx{text-align:right;grid-column:2}
.toc{position:sticky;top:calc(var(--head) + 18px);font-size:.86rem}
.toc h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.toc a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--muted);line-height:1.35;transition:all .2s}
.toc a:hover{color:var(--text)}
.toc a.act{border-left-color:var(--accent);color:var(--accent-ink);font-weight:600}
.toc .share{margin-top:18px;display:flex;flex-direction:column;gap:6px}

/* ---------- compare ---------- */
.vs{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.vs img{width:64px;height:64px;border-radius:18px;object-fit:contain;background:var(--paper);border:1px solid var(--line);padding:10px}
.vs img.me{padding:0;border:0;border-radius:50%;background:none}
.vs b{width:38px;height:38px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.ctable{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);font-size:.95rem}
.ctable th,.ctable td{padding:16px 18px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.ctable thead th{border-top:0;background:var(--bg-alt);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ctable thead th:nth-child(2){color:var(--accent-ink)}
.ctable tbody td:nth-child(2){background:color-mix(in srgb,var(--accent-soft) 45%,transparent);font-weight:550}
.ctable tbody th{font-weight:600;width:26%}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.twrap .ctable{min-width:560px}

/* ---------- directory ---------- */
.dir-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.dsearch{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);min-width:min(100%,380px)}
.dsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.dsearch input{border:0;outline:0;background:none;flex:1;min-width:0}
.dsearch .ico{color:var(--accent-ink)}
.fchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:20px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchips button{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:.88rem;font-weight:500;color:var(--text-2)}
.fchips button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.dgroup{margin-bottom:36px}
.dgroup h2{font-size:1.5rem;display:flex;align-items:center;gap:10px}
.dgroup h2 span{font-family:var(--sans);font-size:.78rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dgrid a[hidden],.dgroup[hidden]{display:none}
.noresults{padding:40px;text-align:center;color:var(--muted)}

/* ---------- cta band ---------- */
.band{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--text);color:var(--bg);padding:clamp(32px,6vw,72px);display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 90% 20%,color-mix(in srgb,var(--i-clay) 45%,transparent),transparent 70%);opacity:.9}
.band>*{position:relative}
.band h2{color:var(--bg);font-size:clamp(2rem,4.4vw,3.4rem)}
.band p{color:color-mix(in srgb,var(--bg) 75%,transparent);font-size:1.1rem;max-width:44ch}
.band .kicker{color:var(--i-kraft)}
.band .btn-ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.band .logo-big{width:min(240px,60%);margin-inline:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-3deg)}}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--sh-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font-family:var(--serif);font-size:1.12rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:8px;background:var(--paper-2);display:grid;place-items:center;transition:transform .3s var(--ease),background .2s}
.faq summary i .ico{width:15px;height:15px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--accent);color:var(--on-accent)}
.faq .ans{padding:0 20px 20px;color:var(--text-2)}
.faq .ans p{margin:0}

/* ---------- availability ---------- */
.instead{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* 404 */
.nf{min-height:66vh;display:grid;place-items:center;text-align:center;padding:40px 0}
.nf .art{max-width:340px;margin:0 auto 6px}
.nf h1{font-size:clamp(4rem,14vw,8rem);line-height:1;margin:0;color:var(--accent-ink)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .alayout{grid-template-columns:220px minmax(0,1fr)}
  .alayout .toc{display:none}
  .alayout.no-side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1060px){
  .fgrid,.topics,.team{grid-template-columns:repeat(2,1fr)}
  .fcard.big{grid-column:span 2}
}
@media (max-width:900px){
  .hero-g,.phero-g,.split,.screen,.band,.scrolly{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:440px;margin-inline:auto}
  .phero .art{max-width:260px;order:-1}
  .phero-g>.art-w{order:-1}
  .split.rev>:first-child,.screen:nth-child(even) .screen-v{order:0}
  .screen-v{order:2}
  .sc-stage{display:none}
  .sc-step{min-height:0;opacity:1;padding:26px 0;border-top:1px solid var(--line)}
  .sc-step .mv{display:block;margin-top:18px}
  .alayout{grid-template-columns:1fr}
  .side-nav{position:static;max-height:none;order:3}
  .side-nav .sn-list{display:none}
  .astep>p,.astep .viz{margin-left:0}
  .instead{grid-template-columns:1fr}
  .band .logo-big{width:150px;order:-1}
  .helpcard{grid-template-columns:1fr;text-align:center}
  .helpcard .art{margin:auto}
}
@media (max-width:640px){
  .fgrid,.topics,.team,.plist,.related,.dgrid,.pager{grid-template-columns:1fr}
  .fcard.big{grid-column:auto;flex-direction:column;align-items:stretch}
  .fcard.big .art{width:100%}
  .team{grid-template-columns:1fr 1fr}
  .member{padding:18px 12px}
  .av{width:68px;height:68px;font-size:1.5rem}
  .cta-row{flex-direction:column;align-items:stretch}
  .stillhelp{grid-template-columns:1fr}
  .pager .nx{grid-column:auto;text-align:left}
}
:lang(hi) .hero h1 em{font-style:normal}
:lang(hi) em,:lang(hi) i{font-style:normal}
.split>*,.screen>*,.phero-g>*,.hero-g>*,.scrolly>*,.help-grid>*{min-width:0}
.viz-phone{overflow:hidden}
.crumbs{flex-wrap:wrap}

/* =========================================================
   Independent voices (/independent-voices/)
   ========================================================= */
.vhero .meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.vhero .cta-row{margin-top:24px}

/* ---- hero: greetings orbiting the logo ---- */
.vo{position:relative;width:min(100%,420px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.vo-ring{position:absolute;inset:var(--in);border-radius:50%;border:1px dashed var(--line-2)}
.vo-ring.r1{--in:9%;animation:vo-spin 80s linear infinite}
.vo-ring.r2{--in:22%;border-style:solid;border-color:var(--line);animation:vo-spin 60s linear infinite reverse}
.vo-ring.r3{--in:33%;border:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}
.vo-core{position:absolute;inset:34%;display:grid;place-items:center;animation:vo-bob 6s ease-in-out infinite}
.vo-core img{width:100%;height:auto;border-radius:50%;box-shadow:0 18px 40px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
.vo-orbit{position:absolute;inset:0;animation:vo-spin 48s linear infinite}
.vo-b{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-41cqw) rotate(calc(var(--a) * -1))}
.vo-b b{position:absolute;left:0;top:0;translate:-50% -50%;display:block;white-space:nowrap;padding:7px 13px;border-radius:16px 16px 16px 4px;background:var(--c);color:#fff;font:600 clamp(.72rem,3.4cqw,.92rem)/1.2 var(--sans);box-shadow:0 8px 20px -10px var(--c);animation:vo-spin 48s linear infinite reverse,vo-pop .7s var(--ease) both;animation-delay:0s,calc(var(--k) * 90ms + .2s)}
@keyframes vo-spin{to{rotate:360deg}}
@keyframes vo-bob{50%{transform:translateY(-6px)}}
@keyframes vo-pop{from{opacity:0;scale:.4}}

/* ---- numbers strip ---- */
.vstats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.vstats>div{padding:22px 20px;display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line)}
.vstats>div:first-child{border-left:0}
.vstats b{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--accent-ink)}
.vstats span{color:var(--text-2);font-size:.92rem;line-height:1.45}

/* ---- engine map ---- */
.vm{margin:0;display:grid;gap:12px}
.vm-l{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;padding:16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);--k:var(--i-sky)}
.vm-l.g{--k:var(--accent);border-color:var(--accent-line);background:linear-gradient(90deg,var(--accent-soft),var(--paper) 70%)}
.vm-l.w{--k:var(--i-olive)}
.vm-h strong{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:500;font-size:1.3rem}
.vm-h strong::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--k)}
.vm-h small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.vm-c{display:flex;flex-wrap:wrap;gap:6px}
.vm-c span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);font-size:.84rem;color:var(--text-2)}
.vm-c span.me{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.vm-c span.me img{border-radius:50%;background:#fff}
.vm figcaption{font-size:.8rem;color:var(--muted);text-align:center}
.js .vm .vm-c span{opacity:0;transform:translateY(8px) scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d,0) * 160ms + var(--j) * 70ms + .2s)}
.js .vm.in .vm-c span{opacity:1;transform:none}
.vm-c span.me{animation:vo-glow 2.8s ease-in-out 1.6s infinite}
@keyframes vo-glow{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}}

/* ---- pull quote ---- */
.vq{margin:0;text-align:center;position:relative;padding:12px 0}
.vq::before{content:"“";display:block;font-family:var(--serif);font-size:6rem;line-height:.6;color:var(--accent);opacity:.5;margin-bottom:6px}
.vq p{font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.25;letter-spacing:-.015em;text-wrap:balance;margin:0 auto;max-width:24ch}
.vq p{background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 92%/0% .35em;transition:background-size 1.4s var(--ease) .3s;display:inline}
.vq.in p{background-size:100% .35em}

/* ---- colour voices ---- */
.vcs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vc{--cc:var(--c);display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
:root[data-theme=dark] .vc{--cc:var(--cd)}
.vc:hover{box-shadow:var(--sh-2)}
.vc.on{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),var(--sh-2)}
.vc-top{position:relative;height:130px;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--cc) 34%,transparent),transparent 70%),color-mix(in srgb,var(--cc) 12%,var(--paper));overflow:hidden}
.vc-no{position:absolute;right:14px;top:10px;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--cc);opacity:.35}
.vc-ui{position:absolute;left:18px;right:44px;bottom:-14px;height:104px;border-radius:12px 12px 0 0;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);padding:10px;display:flex;flex-direction:column;gap:7px;transition:transform .45s var(--ease)}
.vc:hover .vc-ui{transform:translateY(-6px)}
.vc-ui i{display:block;border-radius:6px;background:var(--paper-2)}
.vc-ui .bar{height:14px;display:flex;gap:4px;align-items:center;padding:0 5px;background:color-mix(in srgb,var(--cc) 18%,var(--paper-2))}
.vc-ui .bar i{width:5px;height:5px;border-radius:50%;background:var(--cc)}
.vc-ui .l1{height:8px;width:80%;background:var(--cc);opacity:.85}
.vc-ui .l2{height:6px;width:94%}
.vc-ui .l3{height:6px;width:64%}
.vc-ui b{position:absolute;right:10px;bottom:24px;width:46px;height:16px;border-radius:999px;background:var(--cc)}
.vc-body{padding:18px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.vc-body small{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cc)}
.vc-body h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin:0}
.vc-body p{font-size:.9rem;color:var(--muted);margin:0 0 10px;line-height:1.5}
.vc-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--cc);background:transparent;color:var(--text);font:600 .84rem var(--sans);cursor:pointer;transition:background .25s,color .25s,transform .2s}
.vc-btn:hover{background:color-mix(in srgb,var(--cc) 12%,transparent)}
.vc-btn:active{transform:scale(.96)}
.vc-btn .ico{width:15px;height:15px}
.vc-btn .on,.vc-btn[aria-pressed=true] .off{display:none}
.vc-btn[aria-pressed=true] .on{display:inline-flex;align-items:center;gap:6px}
.vc-btn[aria-pressed=true]{background:var(--cc);color:#fff}
:root[data-theme=dark] .vc-btn[aria-pressed=true]{color:#1A1817}
.vnote{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)}
.vnote>.ico{flex:none;width:20px;height:20px;color:var(--accent-ink)}
.vnote p{margin:0;flex:1;font-size:.92rem;color:var(--text-2)}
.vnote .btn{flex:none}

/* ---- means / doesn't mean ---- */
.vt{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vt-c{padding:clamp(20px,3vw,30px);border-radius:var(--r-xl);border:1px solid var(--line);background:var(--paper)}
.vt-c h3{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 16px}
.vt-c h3 .ico{width:30px;height:30px;padding:6px;border-radius:50%}
.vt-c.yes h3 .ico{background:var(--ok-soft);color:var(--ok)}
.vt-c.no h3 .ico{background:var(--bad-soft);color:var(--bad)}
.vt-c ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vt-c li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;color:var(--text-2)}
.vt-c li>.ico{flex:none;width:18px;height:18px;margin-top:3px}
.vt-c.yes li>.ico{color:var(--ok)}
.vt-c.no li>.ico{color:var(--bad)}
.vt-c li strong{color:var(--text)}
.js .vt-c li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--d) * 90ms + .25s)}
.js .vt-c.in li{opacity:1;transform:none}

/* ---- sources ---- */
.vsrc{margin-top:clamp(36px,5vw,56px);padding:22px;border-radius:var(--r-lg);border:1px dashed var(--line-2)}
.vsrc h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:0 0 8px}
.vsrc p{font-size:.92rem;color:var(--text-2);margin:0 0 12px;max-width:80ch}
.vsrc-l{display:flex;flex-wrap:wrap;gap:8px 18px}
.vsrc-l a{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:550;color:var(--accent-ink)}
.vsrc-l a:hover{text-decoration:underline}
.vsrc-l .ico{width:15px;height:15px}

/* ---- responsive ---- */
@media (max-width:1060px){.vcs{grid-template-columns:repeat(2,1fr)}.vstats{grid-template-columns:repeat(2,1fr)}.vstats>div:nth-child(3){border-left:0}.vstats>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:900px){.vt{grid-template-columns:1fr}.vhero .vo{width:min(100%,300px)}}
@media (max-width:640px){
  .vcs{grid-template-columns:1fr}
  .vm-l{grid-template-columns:1fr;gap:10px}
  .vnote{flex-direction:column;align-items:flex-start}
  .vstats>div{padding:16px 14px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){.vo *,.vm-c span{animation:none!important}}
:root[data-motion=reduced] .vo *,:root[data-motion=reduced] .vm-c span{animation:none!important}
:root[data-motion=reduced] .js .vm .vm-c span,:root[data-motion=reduced] .js .vt-c li{opacity:1;transform:none}
:root[data-motion=reduced] .vq p{background-size:100% .35em}

/* ---- 8th card: open the display panel ---- */
.vc-mix{--cc:var(--accent);border-style:dashed}
.vc-dots{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:0 40px}
.vc-dots i{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 6px 14px -8px var(--c);animation:vo-bob 3.2s ease-in-out infinite;animation-delay:calc(var(--k,0) * 1ms)}
.vc-dots i:nth-child(2n){animation-delay:-1.1s}.vc-dots i:nth-child(3n){animation-delay:-2.2s}
:root[data-motion=reduced] .vc-dots i{animation:none}
@media (prefers-reduced-motion:reduce){.vc-dots i{animation:none}}

/* =========================================================
   Motion & effects. Everything animates transform/opacity only,
   so it stays smooth on phones. Respects reduced motion
   (OS setting or the "Reduced" choice in the colour panel).
   ========================================================= */

/* page-to-page transition (Chromium; others simply navigate) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* net canvas */
#net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
#net.on{opacity:1}
:root[data-net=off] #net{display:none}

/* ---------- split headline: words rise in ---------- */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js [data-split] .w>i{display:inline-block;font-style:inherit;transform:translateY(105%) rotate(4deg);opacity:0;transition:transform .9s var(--ease),opacity .6s ease;transition-delay:calc(var(--wi)*55ms + 80ms)}
.js [data-split].in .w>i{transform:none;opacity:1}
.js [data-split].in{opacity:1;transform:none}

/* ---------- reveal variants (extends base [data-r]) ---------- */
.js [data-r=blur]{filter:blur(8px);transform:translateY(16px)}
.js [data-r=blur].in{filter:none}
.js [data-r=card]{transform:perspective(900px) rotateX(14deg) translateY(30px);transform-origin:50% 100%}
.js [data-r=card].in{transform:none}
@media (hover:none){.js [data-r=blur]{filter:none}}

/* ---------- hero aurora ---------- */
.aurora{position:absolute;inset:-10% -10% auto;height:120%;pointer-events:none;z-index:0;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.42;animation:au 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vmax;height:46vmax;left:52%;top:-14%;background:radial-gradient(circle,var(--i-clay),transparent 65%)}
.aurora i:nth-child(2){width:34vmax;height:34vmax;left:-8%;top:20%;background:radial-gradient(circle,var(--i-sky),transparent 65%);opacity:.22;animation-duration:22s}
.aurora i:nth-child(3){width:28vmax;height:28vmax;left:30%;top:50%;background:radial-gradient(circle,var(--i-kraft),transparent 65%);opacity:.22;animation-duration:26s}
:root[data-theme=dark] .aurora i{opacity:.22}
@keyframes au{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.12)}100%{transform:translate(5%,-4%) scale(.95)}}
.hero>.wrap,.phero>.wrap,.hhero>.wrap-n{position:relative;z-index:1}

/* scroll cue */
.cue{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-size:.82rem;color:var(--muted)}
.cue i{width:22px;height:34px;border-radius:12px;border:1.5px solid var(--line-2);position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:3px;background:var(--accent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ---------- interactive cards: tilt + spotlight ---------- */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .35s,border-color .3s;will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%)}
.tilt:hover::after{opacity:1}
.tilt.tilting{transition:transform .08s linear,box-shadow .35s}
@media (hover:none){.tilt:active{transform:scale(.98)}}

/* magnetic + shine on primary buttons */
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);transform:translateX(-120%);z-index:-1}
.btn-primary:hover::before{animation:shine .9s var(--ease)}
@keyframes shine{to{transform:translateX(120%)}}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--paper) 70%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-t{display:flex;width:max-content;gap:12px;padding:14px 0;animation:tick 42s linear infinite}
.ticker:hover .ticker-t{animation-play-state:paused}
.ticker-t span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.9rem;font-weight:500;color:var(--text-2);white-space:nowrap}
.ticker-t .ico{width:16px;height:16px;color:var(--accent-ink)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- swipe carousel ---------- */
.car{position:relative}
.car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{display:none}
.car-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car-track.drag *{pointer-events:none}
.slide{flex:0 0 min(340px,82%);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;border-radius:24px;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--ease),box-shadow .4s,opacity .4s}
.slide:hover{box-shadow:var(--sh-2)}
.slide .s-art{background:linear-gradient(160deg,var(--bg-alt),var(--accent-soft));padding:18px 22px 6px;border-bottom:1px solid var(--line)}
.slide .s-art .art{max-height:190px}
.slide .s-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.slide .s-body small{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.slide h3{font-family:var(--sans);font-size:1.12rem;font-weight:600;margin:0}
.slide p{color:var(--muted);font-size:.92rem;margin:0}
.slide .go{margin-top:auto;padding-top:10px;color:var(--accent-ink);font-weight:600;font-size:.88rem;display:flex;gap:6px;align-items:center}
.car-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.car-dots{display:flex;gap:6px}
.car-dots i{width:8px;height:8px;border-radius:8px;background:var(--line-2);transition:all .35s var(--ease)}
.car-dots i.act{width:26px;background:var(--accent)}
.car-btns{display:flex;gap:8px}
.car-btns button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;transition:all .2s}
.car-btns button:hover{border-color:var(--text)}
.car-btns button:disabled{opacity:.35;pointer-events:none}
.car-btns .ico{width:18px;height:18px}

/* ---------- stacking cards on scroll ---------- */
.stack{display:flex;flex-direction:column;gap:22px;padding-bottom:6vh}
.stack-c{position:sticky;top:calc(var(--head) + 24px + var(--i) * 14px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,48px);align-items:center;padding:clamp(22px,4vw,44px);border-radius:28px;background:var(--paper);border:1px solid var(--line);box-shadow:0 -8px 30px -18px rgba(20,20,19,.25);transform-origin:50% 0;transform:scale(var(--s,1));filter:brightness(var(--b,1));transition:transform .15s linear}
.stack-c .num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--accent);color:var(--on-accent);font-weight:700;margin-bottom:14px}
.stack-c h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.stack-c p{color:var(--text-2);font-size:1.02rem}
@media (max-width:760px){.stack-c{grid-template-columns:1fr;top:calc(var(--head) + 12px + var(--i) * 10px)}.stack-c .viz{order:2}}

/* ---------- illustrations: build in when seen ---------- */
.art>g{transform-box:fill-box;transform-origin:center}
.js .art:not(.in)>g{opacity:0;transform:translateY(14px) scale(.94)}
.art.in>g{opacity:1;transition:opacity .7s var(--ease),transform .9s var(--ease)}
.art.in>g:nth-of-type(2){transition-delay:.08s}.art.in>g:nth-of-type(3){transition-delay:.16s}.art.in>g:nth-of-type(4){transition-delay:.24s}.art.in>g:nth-of-type(5){transition-delay:.32s}.art.in>g:nth-of-type(6){transition-delay:.4s}
.art .ln[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.art.in .ln[pathLength]{animation:drawln 1.3s var(--ease) .35s forwards}
@keyframes drawln{to{stroke-dashoffset:0}}
.art-w{transition:transform .6s var(--ease);transform-style:preserve-3d}
.art .blob{transform-origin:center;transform-box:fill-box;animation:blob 14s ease-in-out infinite alternate}
@keyframes blob{50%{transform:scale(1.06) rotate(6deg)}100%{transform:scale(.97) rotate(-4deg)}}

/* visual frames gain a soft lift when they enter */
.viz{transition:box-shadow .4s,transform .4s var(--ease)}
.viz.on{box-shadow:0 18px 40px -28px rgba(20,20,19,.35)}

/* ---------- section heading accent bar ---------- */
.sh .kicker .dot{animation:pls 2.4s ease-out infinite}
@keyframes pls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* ---------- reduced motion (OS or user choice) ---------- */
:root[data-motion=reduced] *,:root[data-motion=reduced] *::before,:root[data-motion=reduced] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
:root[data-motion=reduced] .js [data-r],:root[data-motion=reduced] .js [data-split] .w>i,:root[data-motion=reduced] .js .art:not(.in)>g{opacity:1!important;transform:none!important;filter:none!important}
:root[data-motion=reduced] .art .ln[pathLength]{stroke-dashoffset:0}
:root[data-motion=reduced] #net{display:none}
@media (prefers-reduced-motion:reduce){.js [data-split] .w>i,.js .art:not(.in)>g{opacity:1;transform:none}.art .ln[pathLength]{stroke-dashoffset:0}.ticker-t{animation:none}}

/* let the net show through tinted sections (cards keep solid backgrounds for legibility) */
.sec.alt{background:color-mix(in srgb,var(--bg-alt) 76%,transparent)}
.phero,.hhero{background:linear-gradient(180deg,color-mix(in srgb,var(--bg-alt) 85%,transparent),transparent)}
.ftr{background:color-mix(in srgb,var(--bg-alt) 88%,transparent)}
img{height:auto}
.band .logo-big{aspect-ratio:1;object-fit:contain;height:auto}
/* brand marks are black monochrome SVGs: flip them to white on dark surfaces */
:root[data-theme=dark] img[src*="/assets/brands/"]{filter:invert(1) brightness(1.05)}
.fgrid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.fgrid.three{grid-template-columns:1fr}}
.astep-h h2{flex:1;min-width:0}