/* Space Deck v2 — design system (owner: sdd-theme)
   Tokens + utility classes shared by every v2 part. Mobile first (390 wide), dark, glass, neon.
   Animations use transform/opacity (or a tiny @property angle on small rings), all stop for
   prefers-reduced-motion and while the tab is hidden (html.sd-hidden, set by bg.js). */

/* ---------- fonts (self-hosted) ---------- */
@font-face{font-family:'SD UI';src:url(fonts/sd-ui-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'SD UI';src:url(fonts/sd-ui-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'SD UI';src:url(fonts/sd-ui-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'SD UI';src:url(fonts/sd-ui-800.woff2) format('woff2');font-weight:700 900;font-display:swap}
/* SD Dot: dot-matrix LED face (5x7 round dots), digits, Rs, letters, , . % + - − / : ↑ ↓ */
@font-face{font-family:'SD Dot';src:url(fonts/sd-dot.woff2) format('woff2');font-weight:400 900;font-display:block}

@property --sd-ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- tokens ---------- */
:root{
  --bg0:#05060a; --bg1:#0b0d16; --bg2:#121524;
  --glass:rgba(255,255,255,.055); --glass-hi:rgba(255,255,255,.10); --glass-brd:rgba(255,255,255,.11);
  --glass-solid:rgba(14,16,28,.78);
  --txt:#f5f7fc; --txt2:#c3c9da; --dim:#9399ab; --line:rgba(255,255,255,.08);
  --good:#3ee6a0; --bad:#ff5a6e; --warn:#ffb648;
  --c1:#3cdcff; --c2:#8f63ff; --c3:#ff3fbf; --c4:#ffb12e;          /* cyan · violet · magenta · amber */
  --iri:conic-gradient(from var(--sd-ang),#fff 0deg,#ffe28a 28deg,#ff5fae 70deg,#9a6bff 118deg,#3cdcff 165deg,
        rgba(255,255,255,.14) 205deg,rgba(255,255,255,.06) 255deg,#3cdcff 300deg,#b9fff0 332deg,#fff 360deg);
  --neon:linear-gradient(100deg,var(--c1),var(--c2) 40%,var(--c3) 70%,var(--c4));
  --r-card:24px; --r-sm:14px; --r-pill:999px;
  --blur:22px;
  --shadow-card:0 18px 40px -18px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.4);
  --hi-edge:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.035),inset 0 -14px 30px -18px rgba(255,255,255,.07);
  --font-ui:'SD UI',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-num:'SD UI',Inter,-apple-system,system-ui,sans-serif; /* dot font retired (Shaheer 25 Oct) */
  --ease-spring:cubic-bezier(.22,1.28,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* type scale (390 wide → hero 48px, never below 40 or above 56) */
  --fs-hero:clamp(40px,12.4vw,56px); --fs-xl:clamp(30px,8.6vw,38px); --fs-l:22px; --fs-m:17px; --fs-s:14px; --fs-xs:12px;
  --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
  --gap:14px; --pad:18px;
  --grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- base (only for pages that opt in with .v2 on <html> or <body>) ---------- */
.v2{background:var(--bg0);color:var(--txt);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
body.v2{background:var(--bg0)}
html.v2,html.v2>body{overflow-x:clip}
.v2-page{position:relative;z-index:1;padding:calc(var(--sa-t) + 14px) calc(var(--sa-r) + 16px) calc(var(--sa-b) + 32px) calc(var(--sa-l) + 16px)}
.safe-top{padding-top:calc(var(--sa-t) + 12px)}
.safe-bot{padding-bottom:calc(var(--sa-b) + 16px)}

/* type helpers */
.t-hero{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.025em;line-height:1.02}
.t-xl{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.t-l{font-size:var(--fs-l);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.t-m{font-size:var(--fs-m);font-weight:500;line-height:1.35}
.t-s{font-size:var(--fs-s);line-height:1.4;color:var(--txt2)}
.t-xs{font-size:var(--fs-xs);line-height:1.35;color:var(--dim)}
.kicker{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.t-dim{color:var(--dim)} .t-2{color:var(--txt2)}
.up,.t-good{color:var(--good)} .down,.t-bad{color:var(--bad)} .t-warn{color:var(--warn)}
.t-neon{background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-chrome{background:linear-gradient(180deg,#fff 0%,#dfe3ea 36%,#8a919c 52%,#eef0f4 70%,#a3aab4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);border:0}

/* ---------- glass card ---------- */
.glass{position:relative;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03) 60%,rgba(255,255,255,.045));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-brd);box-shadow:var(--hi-edge),var(--shadow-card)}
.glass.solid{background:linear-gradient(180deg,rgba(28,31,48,.86),rgba(12,14,24,.9))}
.glass-tile{border-radius:var(--r-sm);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* tinted glass (i25): add .tint + --tint:<color> on a .glass for a colour wash rising from the bottom */
.glass.tint{background:radial-gradient(120% 75% at 50% 110%,color-mix(in srgb,var(--tint,var(--c2)) 55%,transparent),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}
.pad{padding:var(--pad)}

/* aura = vivid blurred glow blob behind a card (i01). Put .aura on the card; colour with --aura */
.aura{position:relative;isolation:isolate}
.aura::before{content:'';position:absolute;inset:12% -6% -14%;z-index:-1;border-radius:40%;pointer-events:none;
  background:radial-gradient(60% 60% at 30% 60%,var(--aura,var(--c2)),transparent 70%),
             radial-gradient(55% 55% at 75% 45%,var(--aura2,var(--c3)),transparent 70%);
  filter:blur(34px);opacity:.55;transform:translateZ(0)}
.aura.a-cyan{--aura:var(--c1);--aura2:#2a6bff}.aura.a-violet{--aura:var(--c2);--aura2:#3a5bff}
.aura.a-magenta{--aura:var(--c3);--aura2:var(--c2)}.aura.a-amber{--aura:var(--c4);--aura2:#ff4d2e}
.aura.a-good{--aura:var(--good);--aura2:#1fb8ff}.aura.a-bad{--aura:var(--bad);--aura2:#ff2f9a}

/* ---------- grain overlay (static, cheap) ---------- */
.grain{position:relative}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;opacity:.10;mix-blend-mode:overlay;
  background-image:var(--grain-img);background-size:160px 160px}

/* ---------- LED / dotted numbers (i00) ---------- */
.led{font-family:var(--font-num);font-weight:600;letter-spacing:-.01em;line-height:1;color:var(--txt);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 0 10px rgba(255,255,255,.28),0 0 26px color-mix(in srgb,currentColor 30%,transparent)}
.led-xl{font-size:var(--fs-hero)} .led-l{font-size:var(--fs-xl)} .led-m{font-size:24px} .led-s{font-size:17px}
.led .u,.led small{font-size:.48em;letter-spacing:.06em;opacity:.75;margin-left:.15em}   /* unit: "bn", "%"  */
.led .cur{font-size:.5em;opacity:.7;margin-right:.18em;vertical-align:.12em}              /* "Rs" prefix      */
.led.good{color:var(--good)} .led.bad{color:var(--bad)} .led.warn{color:var(--warn)}
.led.c1{color:var(--c1)} .led.c3{color:var(--c3)} .led.c4{color:var(--c4)}
/* .led-dim: unlit dot grid behind digits (dot-matrix panel look), add to a block around the .led */
.led-panel{background-image:radial-gradient(circle,rgba(255,255,255,.06) 1.1px,transparent 1.6px);background-size:7px 7px;
  border-radius:var(--r-sm);padding:10px 12px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-pill);
  font:600 12.5px/1 var(--font-ui);letter-spacing:.01em;color:var(--txt2);white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.chip::before{content:none}
.chip.dot::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.chip.good{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border-color:color-mix(in srgb,var(--good) 28%,transparent)}
.chip.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.chip.live{color:#ff6b7a}.chip.live::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;animation:sd-blink 1.6s ease-in-out infinite}
.chip.on{color:var(--txt);background:rgba(255,255,255,.1)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.chips::-webkit-scrollbar{display:none}

/* ---------- buttons ---------- */
.btn2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.12);cursor:pointer;user-select:none;-webkit-user-select:none;
  font:600 15.5px/1 var(--font-ui);color:var(--txt);text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -12px rgba(0,0,0,.9);
  transition:transform .35s var(--ease-spring),opacity .2s}
.btn2:active{transform:scale(.96)}
.btn2:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.btn2.primary{background:linear-gradient(180deg,#fff,#d9dde6);color:#07080d;border-color:transparent}
.btn2.ghost{background:transparent;box-shadow:none}
.btn2.block{display:flex;width:100%}
.btn2.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn2 svg{width:20px;height:20px;flex:none}
.btn2[disabled]{opacity:.4;pointer-events:none}

/* ---------- rotating iridescent ring (v12 / v5) — on any pill, button or round icon ---------- */
.glow-ring{position:relative;isolation:isolate}
.glow-ring::before,.glow-ring::after{content:'';position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:var(--iri);animation:sd-ang 4.5s linear infinite}
.glow-ring::before{padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:1}
.glow-ring::after{z-index:-1;filter:blur(9px);opacity:.55}
.glow-ring.slow::before,.glow-ring.slow::after{animation-duration:9s}
.glow-ring.quiet::after{opacity:.25}
/* round icon button with the ring (v12 "Home" pill icon) */
.ring-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.16),rgba(255,255,255,.03) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px -8px rgba(0,0,0,.9)}
.ring-icon svg{width:24px;height:24px}
.pill-nav{display:inline-flex;align-items:center;gap:12px;padding:5px 18px 5px 5px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);
  font:600 17px/1 var(--font-ui)}

/* ---------- bottom sheet shell ---------- */
.sheet2-scrim{position:fixed;inset:0;z-index:80;background:rgba(2,3,8,.55);opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .3s}
.sheet2-scrim.open{opacity:1;pointer-events:auto}
.sheet2{position:fixed;left:0;right:0;bottom:0;z-index:81;max-height:min(88vh,860px);margin:0 auto;max-width:560px;
  display:flex;flex-direction:column;border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,rgba(30,33,52,.88),rgba(10,12,22,.94));
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -30px 60px -20px rgba(0,0,0,.9);
  transform:translateY(105%);transition:transform .5s var(--ease-out);will-change:transform}
.sheet2.open{transform:translateY(0)}
.sheet2::before{content:'';flex:none;width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:9px auto 4px}
.sheet2-head{flex:none;padding:6px 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet2-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:4px 20px calc(var(--sa-b) + 24px)}
.sheet2-x{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--txt2);
  background:rgba(255,255,255,.08);font:500 18px/1 var(--font-ui)}
@media (min-width:700px){.sheet2{bottom:24px;border-radius:28px;border-bottom:1px solid rgba(255,255,255,.12)}}

/* ---------- loader ring (v3): glowing ring with a chasing gap + bright core ---------- */
.loader-ring{--sz:44px;position:relative;width:var(--sz);height:var(--sz);border-radius:50%;display:inline-block;flex:none;
  filter:drop-shadow(0 0 6px rgba(140,160,255,.7))}
.loader-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 60deg,rgba(150,170,255,.35) 120deg,#e9edff 300deg,#fff 340deg,transparent 350deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  animation:sd-spin 1.1s linear infinite}
.loader-ring::after{content:'';position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 2px rgba(160,180,255,.9);animation:sd-pulse 1.1s ease-in-out infinite}
.loader-ring.lg{--sz:72px}.loader-ring.sm{--sz:22px}

/* ---------- pulsing orb (v10) ---------- */
.orb{--sz:120px;position:relative;width:var(--sz);height:var(--sz);border-radius:50%;flex:none;isolation:isolate;
  background:radial-gradient(circle at 62% 62%,#eafcff 0%,#9be8ff 22%,#3aa8ff 48%,#1745d8 74%,#0a1a6a 100%);
  box-shadow:inset -8px -10px 30px rgba(10,20,90,.7),inset 6px 8px 24px rgba(255,255,255,.35)}
.orb::before{content:'';position:absolute;inset:-26%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(70,170,255,.0) 42%,rgba(60,170,220,.42) 52%,rgba(20,90,140,.18) 66%,transparent 72%);
  animation:sd-breathe 3.2s ease-in-out infinite}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),transparent 34%),
             radial-gradient(60% 40% at 40% 40%,rgba(20,60,220,.55),transparent 70%);
  animation:sd-swirl 7s ease-in-out infinite}
.orb.sm{--sz:56px}.orb.lg{--sz:180px}
.orb.violet{background:radial-gradient(circle at 62% 62%,#fbefff 0%,#e3a8ff 22%,#9a5cff 48%,#4a1fd0 74%,#1a0a5a 100%)}
.orb.violet::before{background:radial-gradient(circle,transparent 42%,rgba(170,100,255,.42) 52%,rgba(90,40,160,.18) 66%,transparent 72%)}

/* ---------- "Thinking…" glowing frame (i23) ---------- */
.thinking-frame{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);min-height:120px;
  display:grid;place-items:center;padding:24px;color:var(--txt);transform:translateZ(0)}
.thinking-frame::before{content:'';position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;z-index:-2;
  margin:0;translate:-50% -50%;
  background:conic-gradient(from 0deg,#5f6bff,#b07cff 18%,#ff7ad9 32%,#ffd0f0 38%,#ff6fd0 46%,#7a5cff 60%,#4b7bff 72%,#ffffff 78%,#8a6bff 86%,#5f6bff);
  filter:blur(16px);animation:sd-spin 7s linear infinite;will-change:transform}
.thinking-frame::after{content:'';position:absolute;inset:3px;z-index:-1;border-radius:calc(var(--r-card) - 3px);
  background:radial-gradient(120% 90% at 50% 50%,rgba(26,18,52,.96) 30%,rgba(40,24,80,.72) 70%,rgba(70,40,130,.35) 100%);
  box-shadow:inset 0 0 28px 6px rgba(150,110,255,.35)}
.thinking-frame .tf-txt{font:500 16px/1 var(--font-ui);letter-spacing:.01em;color:rgba(255,255,255,.92)}
.thinking-frame .tf-txt::after{content:'…';display:inline-block;animation:sd-blink 1.4s steps(2) infinite}

/* ---------- art mode (v4): neon liquid rainbow edge glow on a card ---------- */
.art{position:relative;isolation:isolate}
.art,.art.glass{background:linear-gradient(160deg,rgba(22,20,40,.94),rgba(8,9,18,.97))}
.art::before{content:'';position:absolute;inset:-2px;z-index:1;border-radius:calc(var(--r-card) + 2px);pointer-events:none;
  padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:var(--iri);animation:sd-ang 6s linear infinite;
  --iri:conic-gradient(from var(--sd-ang),#ffe600,#ff2fb0 22%,#ff3d3d 34%,#ffd400 48%,#39ff6a 62%,#00e0ff 72%,#a64dff 84%,#ffe600)}
.art::after{content:'';position:absolute;inset:-14px;z-index:-2;border-radius:calc(var(--r-card) + 14px);pointer-events:none;
  background:radial-gradient(40% 50% at 8% 30%,#ffe600,transparent 70%),radial-gradient(45% 50% at 95% 25%,#ff2fb0,transparent 70%),
             radial-gradient(45% 55% at 85% 95%,#a64dff,transparent 70%),radial-gradient(45% 55% at 12% 92%,#39ff6a,transparent 70%);
  filter:blur(22px);opacity:.55;animation:sd-liquid 9s ease-in-out infinite;will-change:transform}
.art>*{position:relative}

/* ---------- Siri wave (i11): <div class="wave-siri"><i></i><i></i><i></i><i></i></div> ---------- */
.wave-siri{position:relative;height:64px;width:100%;isolation:isolate;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.wave-siri i{position:absolute;left:8%;right:8%;top:50%;height:80%;border-radius:50%;translate:0 -50%;
  mix-blend-mode:screen;filter:blur(2px);transform-origin:50% 50%;will-change:transform}
.wave-siri i:nth-child(1){background:radial-gradient(60% 55% at 45% 40%,#2f7bff,rgba(47,123,255,.0) 72%);animation:sd-w1 2.6s ease-in-out infinite}
.wave-siri i:nth-child(2){background:radial-gradient(55% 50% at 60% 55%,#ff3fbf,rgba(255,63,191,0) 72%);animation:sd-w2 3.1s ease-in-out infinite}
.wave-siri i:nth-child(3){background:radial-gradient(50% 45% at 50% 62%,#ffcf6a,rgba(255,207,106,0) 72%);animation:sd-w3 2.2s ease-in-out infinite}
.wave-siri i:nth-child(4){background:radial-gradient(50% 30% at 50% 50%,#fff,rgba(160,230,255,.5) 40%,transparent 72%);height:40%;animation:sd-w2 1.8s ease-in-out infinite reverse}
.wave-siri.idle i{animation-duration:6s}
.wave-siri::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(190,220,255,.7),transparent)}

/* ---------- glowing arc gauge (i22): <div class="arc" style="--v:.68"><b>68%</b></div> ---------- */
.arc{--v:.5;--sz:150px;position:relative;width:var(--sz);height:calc(var(--sz) / 2 + 10px);overflow:hidden;display:grid;place-items:end center}
.arc::before{content:'';position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);border-radius:50%;
  background:conic-gradient(from 270deg,var(--c1),var(--c2) calc(var(--v) * 90deg),var(--c3) calc(var(--v) * 180deg),rgba(255,255,255,.07) 0 180deg,transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
  filter:drop-shadow(0 0 8px rgba(143,99,255,.6))}
.arc>*{position:relative;padding-bottom:4px}

/* ---------- neon 3D icon holder (i26/i27) ---------- */
.neon-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--ic,var(--c1));
  background:radial-gradient(80% 80% at 30% 20%,rgba(255,255,255,.14),rgba(255,255,255,.02)),color-mix(in srgb,var(--ic,var(--c1)) 12%,#0b0d16);
  border:1px solid color-mix(in srgb,var(--ic,var(--c1)) 35%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px -4px var(--ic,var(--c1))}
.neon-ic svg{width:24px;height:24px;filter:drop-shadow(0 0 5px currentColor)}

/* ---------- small stat block ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .k{font-size:12.5px;font-weight:500;color:var(--dim)}
.delta{display:inline-flex;align-items:center;gap:4px;font:700 13px/1 var(--font-ui)}
.delta.up::before{content:'▲';font-size:9px}.delta.down::before{content:'▼';font-size:9px}

/* ---------- page background (markup in templates/v2/_bg.html, motion in bg.js) ---------- */
html:has(> body > .sd-bg){background:var(--bg0)}
html:has(> body > .sd-bg) > body{background:transparent}
.sd-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  background:radial-gradient(70% 38% at 18% 16%,rgba(64,45,125,.10),transparent 70%),
             radial-gradient(60% 36% at 90% 56%,rgba(18,58,115,.08),transparent 70%),
             radial-gradient(70% 34% at 40% 100%,rgba(115,40,85,.06),transparent 70%),
             linear-gradient(180deg,var(--bg1),var(--bg0) 60%)}
.sd-bg canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.sd-bg.ready canvas{opacity:.28}
.sd-bg .sd-grain{position:absolute;inset:0;background-image:var(--grain-img);background-size:160px 160px;opacity:.055}
.sd-bg .sd-vig{position:absolute;inset:0;background:radial-gradient(130% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}

/* ---------- keyframes ---------- */
@keyframes sd-ang{to{--sd-ang:360deg}}
@keyframes sd-spin{to{transform:rotate(360deg)}}
@keyframes sd-pulse{0%,100%{transform:scale(.8);opacity:.75}50%{transform:scale(1.15);opacity:1}}
@keyframes sd-breathe{0%,100%{transform:scale(.94);opacity:.65}50%{transform:scale(1.06);opacity:1}}
@keyframes sd-swirl{0%,100%{transform:rotate(0deg)}50%{transform:rotate(160deg)}}
@keyframes sd-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sd-liquid{0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(6px,-4px) scale(1.04) rotate(4deg)}66%{transform:translate(-5px,5px) scale(.98) rotate(-3deg)}}
@keyframes sd-w1{0%,100%{transform:scale(1,.35) translateX(-6%)}50%{transform:scale(1,1) translateX(5%)}}
@keyframes sd-w2{0%,100%{transform:scale(.9,.9) translateX(6%)}50%{transform:scale(1,.3) translateX(-5%)}}
@keyframes sd-w3{0%,100%{transform:scale(.8,.5) translateX(0)}50%{transform:scale(1,.95) translateX(3%)}}
@keyframes sd-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:sd-rise .6s var(--ease-out) both}

/* pause everything while the tab is hidden (bg.js toggles html.sd-hidden) */
html.sd-hidden *,html.sd-hidden *::before,html.sd-hidden *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .glow-ring::before,.glow-ring::after,.art::before,.art::after,.loader-ring::after,.orb::before,.orb::after,
  .thinking-frame::before,.wave-siri i,.chip.live::before,.rise,.thinking-frame .tf-txt::after{animation:none!important}
  .loader-ring::before{animation:none}  /* settled indicator for reduced motion */
  .sheet2,.btn2{transition:none}
}
/* no @property support (old browsers): rings show a static rainbow */
/* sdd-fonts: readability pass (25 Oct) — sizes and contrast only. */
:root{--dim:#aab0c1;--fs-xs:13px}
.kicker{font-size:13px;letter-spacing:.14em}.stat .k{font-size:14px}.delta{font-size:14px}.delta.up::before,.delta.down::before{font-size:12px}.btn2.sm{font-size:14px}