/* =====================================================================================
   SONAR THEMES: the holiday looks and the Pro looks (Deven, 2026-10-24).

   "for sonar i didnt mean color themes i meant like holiday themes like for halloween and stuff
   ... maybe we can have a "gilded" version for users with the plus version where itll feel like a
   matte black lamborghini with a gold trim and have metallic edges. can we also have a "snowy"
   theme ... make that snowy one a plus plan theme too please."

   WHAT LIVES WHERE. The pre-paint script in sonar.html is the one list of themes (id, name, kind,
   plan, world, particles) and the one place that applies a pick before the first paint. THIS file
   is the one definition of what each complete look LOOKS like: its tokens in light and dark, its
   decoration and its swatch. The particles are drawn by /theme-fx.js, which reads its colours from
   the --fx-* tokens below, so the look of a theme is written once, here.

   NOTHING HERE APPLIES UNTIL A LOOK IS PICKED. Every rule is keyed on :root[data-sonar-theme] or
   :root[data-sonar-look] (both set only by the pre-paint script), except .theme-deco's display:none
   and the swatch pictures, which only the Settings picker shows. Default is exactly what it was.

   THE CASCADE, the same as the colour themes. Tokens go on BODY behind :where(), so a theme beats
   the brand sheet the server bakes in last in <head> (an inherited value always loses to the
   element's own) while weighing no more than a type selector, which is what lets the Vader egg
   (body.vader-sith) still win. Decoration rules carry body:not(.vader-sith), so the egg's red room
   is never decorated over. The rail is dark in every look, so inside .sidebar a look uses its rail
   colour; the account menu opens out of the rail onto a page-coloured card and takes the page's
   accent back.

   PERFORMANCE LAW (pinned in test/perf_budget.test.js): no animated layer carries a filter or a
   backdrop-filter. Every soft edge here is gradient stops. The two animations in this file (the
   Winter Holidays lights, the dew on the Halloween web) animate opacity only, and stop for reduced
   motion and html.fx-off.
   Particles never live here: one canvas, one engine, /theme-fx.js.

   LEGIBILITY. Decoration lives behind the content (z-index -1), on the page's edges (the top bar)
   and in empty states, never over a meeting. Every surface in a complete look is opaque, so a
   falling snowflake can pass behind a card but never show through its text, and every token pair
   a person reads is held to WCAG AA by test/seasonal_themes.test.js.
   ===================================================================================== */

/* ── 0. The layers every complete look shares ─────────────────────────────────────────── */

/* The decoration layer: empty and hidden until a complete look turns it on. It covers the content
   area (the rail is opaque, so nothing is drawn behind it) and sits behind everything. */
.theme-deco { display: none; }
:root[data-sonar-look] > body:not(.vader-sith) > .theme-deco {
  display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 236px;
  z-index: -1; pointer-events: none; overflow: hidden;
}
/* The particle canvas. /theme-fx.js creates it ONLY for a look with particles and removes it when
   the look changes; it never exists on Default or a colour theme. */
.theme-fx-canvas { position: fixed; top: 0; left: 236px; width: calc(100% - 236px); height: 100%;
                   z-index: -1; pointer-events: none; }
body.vader-sith .theme-fx-canvas { display: none; }
@media (max-width: 900px) {
  :root[data-sonar-look] > body:not(.vader-sith) > .theme-deco { left: 0; }
  .theme-fx-canvas { left: 0; width: 100%; }
}

/* Aura's orange still reaches a few shared rules (links, focus rings, field focus, selection, the
   bevel glow under a button). In a complete look they follow the look's own accent. var(--sonar)
   is read on body, so the Vader egg's red reaches them too. */
:where(:root[data-sonar-look]) > body {
  --accent: var(--sonar); --accent-strong: var(--sonar); --accent-soft: var(--sonar-soft);
  --accent-text: var(--sonar-ink); --action: var(--sonar); --action-text: var(--sonar-ink); --info-bg: var(--sonar-soft);
}
/* A look paints its own sky in .theme-deco, so the stock glow layer (the one that drifts), the
   ripple rings and the bottom-right ping all step aside; Gilded keeps the rings as a faint gold line. */
:root[data-sonar-look] > body::before { content: none; }
:root[data-sonar-look] > body::after { content: none; }
:root[data-sonar-look] .content::before { display: none; }
/* The two panels SONAR tints rather than fills sit straight on the page; give them a solid base so
   no decoration ever shows through an answer or a note. */
:root[data-sonar-look] .askout, :root[data-sonar-look] .callout {
  background: linear-gradient(var(--sonar-soft), var(--sonar-soft)), var(--bg-base);
}
:root[data-sonar-look] .runbar { background: var(--surface); }
/* The text that sits straight on the page rather than on a card (a view's subtitle, the board's
   tab line, the Settings rail, a meeting's title, its details and its tabs) carries a halo of the
   page's own ground, so a leaf or a flake passing behind a word, or a word scrolling past the
   Halloween web, never costs it legibility.
   A text-shadow is painted once with the text, and the particles move on their own layer, so it
   costs nothing per frame. It is kept tight (3px): wide enough to clear a stroke of whatever is
   behind it, too tight to show as a pale band where the look's sky is not the page ground. */
:root[data-sonar-look] > body:not(.vader-sith) :is(.masthead p.sub, .listbar, .set-rail, .mdetail h2, .mdetail .meta-row, .mdetail .dtabs) {
  text-shadow: 0 0 1px var(--bg-base), 0 0 3px var(--bg-base);
}

/* ── Halloween ─────────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="halloween"]) > body {
  --bg-base: #fbf5ec; --surface: #fffcf7; --surface-strong: #fff3e3; --surface-input: #ffffff;
  --tile: #f7e8d6; --border: rgba(120,60,20,.15); --border-strong: rgba(120,60,20,.28); --text: #25142f;
  --text-dim: #46344f; --text-muted: #655069; --muted: #655069; --sonar: #a04300;
  --sonar-soft: rgba(160,67,0,.12); --sonar-line: rgba(160,67,0,.35); --sonar-ink: #ffffff; --sb-bg: #241433;
  --sb-item: #d6c6e0; --sb-text: #fbf4ff; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(255,160,70,.20);
  --glow-b: rgba(124,58,237,.07);
  --product-metal: linear-gradient(180deg, #ffc27e 0%, #e8650a 55%, #8f3800 100%);
}
:where(:root[data-sonar-theme="halloween"][data-theme="dark"]) > body {
  --bg-base: #110b1a; --surface: #1b1328; --surface-strong: #251a36; --surface-input: #1d1530;
  --tile: #251a36; --border: rgba(255,148,51,.17); --border-strong: rgba(255,148,51,.32); --text: #f7efe3;
  --text-dim: #dfcfbd; --text-muted: #b9a7c2; --muted: #b9a7c2; --sonar: #ff9433;
  --sonar-soft: rgba(255,148,51,.1); --sonar-line: rgba(255,148,51,.35); --sonar-ink: #2a1102; --sb-bg: #170e23;
  --sb-item: #cdbbd8; --sb-text: #f8f0fc; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(255,196,110,.16);
  --glow-b: rgba(139,92,246,.14);
  --product-metal: linear-gradient(180deg, #ffe2b4 0%, #ff9433 50%, #b84a00 100%);
}
:where(:root[data-sonar-theme="halloween"] > body:not(.vader-sith)) .sidebar {
  --sonar: #ff9a3d; --sonar-soft: rgba(255,154,61,.1); --sonar-line: rgba(255,154,61,.35); --sonar-ink: #2a1102;
  --sonar-rail: #ff9a3d; --sonar-rail-ink: #2a1102; --sonar-rail-soft: rgba(255,154,61,.16); --sonar-rail-soft-hi: rgba(255,154,61,.28);
  --sonar-rail-text: #ffc794; --sonar-rail-text-hi: #ffeddc; --sonar-rail-glow: rgba(255,154,61,.1);
}
:where(:root[data-sonar-theme="halloween"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #a04300; --sonar-soft: rgba(160,67,0,.12); --sonar-line: rgba(160,67,0,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #ff9433; --sonar-soft: rgba(255,148,51,.1); --sonar-line: rgba(255,148,51,.35); --sonar-ink: #2a1102; }

/* Signature: a large spiderweb, faded into the background behind the top right of the page, a warm
   light in that corner, and a low mist. Deven, 2026-10-26, on the first version (a small, crisp web
   wedged into the corner, with a cartoon spider on a thread): "for the spiderweb i meant make it a
   bit larger but fade it into the background. i dont want it to look cheap if that makes sense i still
   want the website to feel professional just have a little holiday pazazz". (Before that the canvas
   flew bats: "floating emojis isnt super halloween theme it feels kinda like a cheap theme".) The
   same web hangs in Aura's Halloween look, so the two products match. The canvas draws nothing.

   - An orb web spun in a corner: the hub sits a little in from the top-right corner, the threads are
     tied to the top bar and to the window's edge, and the web opens down and into the page. Its size
     and the line it hangs from are written once, on body (--web-w, --web-top: the top bar's own
     height on that screen, 42px; 55px once the menu button shows; 51px on a phone). The box has the
     picture's own shape (600 by 420), so the picture is never stretched and the fade lands on the hub.
   - A watermark, not an ornament: hairline threads at low opacity, behind everything, fading out
     toward the page. The colour under the web's mask is a radial gradient, strongest round the hub
     and transparent at the inner edges, so no thread ends in a hard line. Softness is the gradient,
     never a blur. Every surface in a look is opaque, so a card simply covers it.
   - Its colour is a token in each mode: a muted plum grey on the light page, a warm pale silver on
     the dark one, the colour of silk in the corner's warm light.
   - The one gentle effect, dark mode on a desktop: a few beads of dew on the threads catch the
     corner's warm light, which rises and falls very slowly (opacity alone, a breath every nine
     seconds). It stands still for reduced motion and for Moving decorations: Off (the beads stay), and
     pauses with the tab. A bead is a bright point, so it is kept where no words are: in a band just
     below the hub, toward the window's edge, and only from 1366px wide. Narrower, a meeting's long name
     (which runs the full width, and wraps) reaches that band (measured), so the web shows without its
     dew there.
   - A page title and a meeting's name lay out exactly as they do in any other look. The web is faint
     enough to sit behind a word, and the text that sits straight on the page carries the halo every
     look gives it, so nothing keeps room for it (the first version made long titles wrap early). */
:root[data-sonar-theme="halloween"] > body:not(.vader-sith) { --web-w: clamp(420px, 46vw, 720px); --web-top: 42px; }
:root[data-sonar-theme="halloween"] > body:not(.vader-sith) > .theme-deco {
  --silk: rgba(88,54,78,.32); --silk-mid: rgba(88,54,78,.12); --mist: rgba(255,160,80,.10);
  background:
    radial-gradient(calc(var(--web-w) * .9) calc(var(--web-w) * .55) at 100% var(--web-top), var(--glow-a), transparent),
    radial-gradient(60% 34% at 10% 104%, var(--glow-b), transparent 72%),
    linear-gradient(to top, var(--mist), transparent 24%);
}
:root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco {
  --silk: rgba(238,228,218,.32); --silk-mid: rgba(238,228,218,.13); --mist: rgba(150,116,210,.12);
}
:root[data-sonar-theme="halloween"] > body:not(.vader-sith) > .theme-deco::before,
:root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after {
  content: ''; position: absolute; top: var(--web-top); right: 0; width: var(--web-w); height: calc(var(--web-w) * .7);
}
/* The threads: the web is a mask over the fading silk. The gradient is centred on the hub (82%, 17.6%
   of the box, where the picture puts it), a touch softer at the very centre where every radial meets,
   and reaches transparent at the box's inner edges. */
:root[data-sonar-theme="halloween"] > body:not(.vader-sith) > .theme-deco::before {
  --web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M495 74l90 3M495 75l91 31M494 76l93 64M493 76l101 136M493 77l103 306M492 77l21 343M491 77l-81 343M491 76l-181 344M490 76l-279 274M489 76l-347 187M489 75l-393 80M490 74l-415-21M489 73l-171-68M489 72l-79-63M490 72l-46-62M491 71l-19-61M492 72l-2-59M492 72l14-63M493 72l37-59M494 72l56-60M494 73l96-48M494 74l91-23' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M600 74l-15 3 15 5M600 105l-14 1 14 10M600 145l-13-5 13 11M600 213l-6-1 6 14M600 391l-4-8 4 17M300 0l18 5-9-5M395 0l15 9-8-9M432 0l12 10-3-10M461 0l11 10 4-10M484 0l6 13 6-13M501 0l5 9 9-9M533 0l-3 13 12-13M557 0l-7 12 15-12M600 16l-10 9 10-1M600 44l-15 7 15 0' stroke-width='0.75' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M495 74l0 2-1 3-3-1-3 0-1-3 2-2 0-4 3 0 2 1 2 2 0 2M499 74l0 2-1 2-2 2-2 0-2 2-1-2-2 0-2-1 0-2-3-1 1-2 0-3 0-2 3 0 2-1 2 0 1-1 3 1 0 1 4 1 0 2-2 2M503 74l-2 3-1 3 0 4-4 3-3 1-3-4-4 2-1-5-5-1 3-4-2-3-1-4 1-4 3-2 5 1 3 1 3-3 3 2 3 0 1 5-1 3 0 2' stroke-width='0.55' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M470 86q-2-3-4-7-1-3-2-6 1-5 2-9 2-4 3-8 3-3 5-6 5-2 9-5 4 0 8-1 4 0 8 0 4 2 10 3 2 2 6 3 2 5 6 10 2 3 4 6 0 5 1 9-1 5-1 10-2 5-3 10-4 4-8 9-5 2-10 5-5 1-10 2-5 0-11-1-4-1-9-2-5-3-10-6-3-5-7-9-2-6-5-11 0-5-1-10 2-6 2-13 4-5 5-12 4-4 7-9 7-2 14-6 6-2 12-4 5 1 11 1 7 3 14 5 4 3 9 5 4 8 10 14 2 5 4 9 1 7 4 14-2 7-3 14-4 6-6 13-6 6-11 13-7 3-14 7-7 2-14 5-8-1-16-1-6-3-12-5-7-5-15-9-4-6-10-12-2-8-5-16 0-7-2-14 2-9 3-18 4-8 7-16 6-5 11-11 9-4 18-10 8 0 16-2 8 0 15-1 10 4 21 7 4 4 9 8 6 10 14 17 3 7 7 13-1 10 1 18-2 10-1 20-5 8-9 16-8 8-15 16-9 5-18 11-9 2-18 4-10-1-20-1-8-3-17-5-9-6-18-12-5-9-12-17-4-10-9-19 0-9-2-19 3-11 5-23 5-10 9-20 8-7 14-15M534 6q6 5 13 9 7 13 17 23 3 9 7 17 1 11 4 22-3 12-3 24-6 10-11 20-10 10-19 21-12 6-23 14-11 1-22 3-12-1-25-1-10-4-21-6-10-9-22-16-7-10-16-19-3-13-8-25-1-11-4-23 4-14 6-29 7-11 12-24M580 30q3 11 7 21 2 14 5 27-4 14-5 28-7 12-12 25-12 12-23 24-14 8-27 17-14 1-27 5-15-3-30-3-12-4-25-7-12-10-27-18-8-13-18-24-3-15-10-30-2-13-5-26 6-17 8-35 9-13 15-28M589 141q-14 14-26 28-18 8-33 18-16 2-31 7-17-2-35-1-14-7-29-10-14-13-31-23-8-14-20-28-6-16-15-33 1-15-1-31M573 184q-20 8-37 20-18 2-36 8-20-4-40-3-16-7-33-11-15-15-34-26-11-16-26-30-5-20-13-40-1-17-4-35 7-22 9-45M584 198q-23 9-43 22-20 4-40 9-22-3-45-3-18-8-38-12-18-15-39-29-12-18-27-35-6-23-17-44 0-20-5-40 8-25 11-51M595 213q-25 10-48 25-23 2-45 8-25-3-50-2-20-10-41-16-20-18-44-31-13-21-30-39-6-25-18-49-1-21-4-44 9-27 11-56M551 250q-24 2-48 9-27-4-54-4-21-10-44-16-22-18-46-34-14-22-31-42-7-26-20-51-1-23-5-47 8-29 11-61M556 266q-26 4-52 11-29-5-59-5-23-9-48-17-24-20-52-36-15-25-36-46-8-29-20-58-1-25-6-51' stroke-width='0.62' stroke-opacity='0.85' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M563 286q-30 2-58 10-32-5-65-5-25-10-53-17-25-24-55-43-17-26-38-50-9-31-24-62-1-27-5-56M569 303q-32 3-63 11-35-4-70-4-27-13-57-22-28-24-62-42-17-29-41-55-8-35-25-68 0-30-4-61M575 320q-35 3-68 12-37-5-75-5-30-13-62-21-31-25-65-48-20-30-44-59-10-37-29-72M581 338q-37 5-72 16-41-5-82-6-32-15-66-24-32-29-70-53-21-32-48-62-11-40-31-78 1-35-6-71M587 358q-39 4-77 17-44-6-88-8-34-14-71-25-35-30-76-55-22-35-53-67-10-43-30-85 0-37-8-76M595 380q-43 5-84 15-47-6-94-5-37-17-76-28-38-33-81-60' stroke-width='0.58' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  background: radial-gradient(ellipse 84% 64% at 82% 17.6%, var(--silk-mid) 0%, var(--silk) 6%, var(--silk) 12%, var(--silk-mid) 34%, transparent 100%);
  -webkit-mask: var(--web) right top / 100% 100% no-repeat; mask: var(--web) right top / 100% 100% no-repeat;
}
/* The dew, dark mode only: soft round glints (each a radial gradient in the picture, never a blur),
   in a band just below the hub. Only its opacity moves. */
:root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420'%3E%3Cdefs%3E%3CradialGradient id='d'%3E%3Cstop offset='0' stop-color='%23fffdf7'/%3E%3Cstop offset='.2' stop-color='%23fff3dc' stop-opacity='.95'/%3E%3Cstop offset='.42' stop-color='%23ffd39c' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23ff9a3d' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23d)'%3E%3Ccircle cx='457' cy='116' r='3.9' opacity='.9'/%3E%3Ccircle cx='530' cy='108' r='3.9' opacity='.9'/%3E%3Ccircle cx='590' cy='88' r='3.5' opacity='.8'/%3E%3Ccircle cx='455' cy='88' r='3.7' opacity='.9'/%3E%3Ccircle cx='556' cy='83' r='3.3' opacity='.9'/%3E%3Ccircle cx='564' cy='114' r='3.1' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") right top / 100% 100% no-repeat;
  opacity: .8; animation: sonarWebDew 9s ease-in-out infinite;
}
@keyframes sonarWebDew { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html.fx-suspend[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after { animation-play-state: paused; }
@media (max-width: 1365px) {
  :root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after { content: none; }
}
/* Empty states only (a board with nothing on it, a filter that matched nothing): a small
   jack-o'-lantern. Never on a failure: those keep their plain words. */
:root[data-sonar-theme="halloween"] > body:not(.vader-sith) .is-empty::before {
  content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M31 14 Q31 6 38 4 Q35 9 35 15 Z' fill='%234d7c2a'/%3E%3Cellipse cx='21' cy='38' rx='14' ry='19' fill='%23d9560a'/%3E%3Cellipse cx='43' cy='38' rx='14' ry='19' fill='%23d9560a'/%3E%3Cellipse cx='32' cy='38' rx='14' ry='21' fill='%23f2801c'/%3E%3Cpath d='M20 34 L25 26 L30 34 Z M34 34 L39 26 L44 34 Z' fill='%233b1405'/%3E%3Cpath d='M19 42 Q32 53 45 42 L41 43 L39 46 L36 43 L33 46 L30 43 L27 46 L25 43 Z' fill='%233b1405'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Thanksgiving ──────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="thanksgiving"]) > body {
  --bg-base: #fcf7ef; --surface: #fffdf9; --surface-strong: #fdf3e4; --surface-input: #ffffff;
  --tile: #f6e9d6; --border: rgba(110,60,15,.15); --border-strong: rgba(110,60,15,.28); --text: #2b1c10;
  --text-dim: #4d3a29; --text-muted: #6c5643; --muted: #6c5643; --sonar: #8a5a00;
  --sonar-soft: rgba(138,90,0,.12); --sonar-line: rgba(138,90,0,.35); --sonar-ink: #ffffff; --sb-bg: #2b1b0f;
  --sb-item: #e1cdb9; --sb-text: #fdf6ee; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(242,163,58,.16);
  --glow-b: rgba(190,70,20,.07); --fx-a: #c2410c; --fx-b: #e8800f; --fx-c: #d9a21b;
  --fx-d: #9a3412;
  --product-metal: linear-gradient(180deg, #ffd27a 0%, #c98a12 52%, #7a4a00 100%);
}
:where(:root[data-sonar-theme="thanksgiving"][data-theme="dark"]) > body {
  --bg-base: #19110a; --surface: #22170e; --surface-strong: #2c1f13; --surface-input: #25190f;
  --tile: #2c1f13; --border: rgba(242,179,58,.15); --border-strong: rgba(242,179,58,.30); --text: #f8eee1;
  --text-dim: #e2cfba; --text-muted: #bea891; --muted: #bea891; --sonar: #f2b33a;
  --sonar-soft: rgba(242,179,58,.1); --sonar-line: rgba(242,179,58,.35); --sonar-ink: #2b1603; --sb-bg: #1d130b;
  --sb-item: #dcc6af; --sb-text: #fbf3ea; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(242,140,40,.14);
  --glow-b: rgba(200,70,20,.10); --fx-a: #e8590c; --fx-b: #f59e0b; --fx-c: #fbbf24;
  --fx-d: #c2410c;
  --product-metal: linear-gradient(180deg, #ffe7b0 0%, #f2b33a 50%, #a8620a 100%);
}
:where(:root[data-sonar-theme="thanksgiving"] > body:not(.vader-sith)) .sidebar {
  --sonar: #f2b33a; --sonar-soft: rgba(242,179,58,.1); --sonar-line: rgba(242,179,58,.35); --sonar-ink: #2b1603;
  --sonar-rail: #f2b33a; --sonar-rail-ink: #2b1603; --sonar-rail-soft: rgba(242,179,58,.16); --sonar-rail-soft-hi: rgba(242,179,58,.28);
  --sonar-rail-text: #f8d593; --sonar-rail-text-hi: #fdf1dc; --sonar-rail-glow: rgba(242,179,58,.1);
}
:where(:root[data-sonar-theme="thanksgiving"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #8a5a00; --sonar-soft: rgba(138,90,0,.12); --sonar-line: rgba(138,90,0,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="thanksgiving"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #f2b33a; --sonar-soft: rgba(242,179,58,.1); --sonar-line: rgba(242,179,58,.35); --sonar-ink: #2b1603; }

/* Signature: a few leaves falling (the canvas), over a warm harvest light at the edges. */
:root[data-sonar-theme="thanksgiving"] > body:not(.vader-sith) > .theme-deco {
  background:
    radial-gradient(56% 34% at 14% -6%, var(--glow-a), transparent 72%),
    radial-gradient(64% 40% at 92% 106%, var(--glow-b), transparent 72%),
    linear-gradient(to top, var(--glow-a), transparent 20%);
}

/* ── Winter Holidays ───────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="winter-holidays"]) > body {
  --bg-base: #f7faf7; --surface: #ffffff; --surface-strong: #eef6f0; --surface-input: #ffffff;
  --tile: #e6f0e9; --border: rgba(20,83,45,.14); --border-strong: rgba(20,83,45,.26); --text: #10241a;
  --text-dim: #2e4a3a; --text-muted: #4e665a; --muted: #4e665a; --sonar: #b4161b;
  --sonar-soft: rgba(180,22,27,.12); --sonar-line: rgba(180,22,27,.35); --sonar-ink: #ffffff; --sb-bg: #0f2a1d;
  --sb-item: #c3dccd; --sb-text: #f1faf4; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(250,204,21,.12);
  --glow-b: rgba(22,101,52,.07);
  --product-metal: linear-gradient(180deg, #ff9b9b 0%, #d11a22 52%, #7d0a10 100%);
}
:where(:root[data-sonar-theme="winter-holidays"][data-theme="dark"]) > body {
  --bg-base: #08150f; --surface: #0f2018; --surface-strong: #152a20; --surface-input: #11241b;
  --tile: #152a20; --border: rgba(134,239,172,.13); --border-strong: rgba(134,239,172,.26); --text: #eef7f1;
  --text-dim: #cfe2d6; --text-muted: #a4bdaf; --muted: #a4bdaf; --sonar: #ff7b7b;
  --sonar-soft: rgba(255,123,123,.1); --sonar-line: rgba(255,123,123,.35); --sonar-ink: #2a0505; --sb-bg: #0b1d14;
  --sb-item: #bcd5c6; --sb-text: #f1faf4; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(250,204,21,.10);
  --glow-b: rgba(34,197,94,.08);
  --product-metal: linear-gradient(180deg, #ffd1d1 0%, #ff6b6b 50%, #b3141c 100%);
}
:where(:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith)) .sidebar {
  --sonar: #ff8585; --sonar-soft: rgba(255,133,133,.1); --sonar-line: rgba(255,133,133,.35); --sonar-ink: #2a0505;
  --sonar-rail: #ff8585; --sonar-rail-ink: #2a0505; --sonar-rail-soft: rgba(255,133,133,.16); --sonar-rail-soft-hi: rgba(255,133,133,.28);
  --sonar-rail-text: #ffbcbc; --sonar-rail-text-hi: #ffe9e9; --sonar-rail-glow: rgba(255,133,133,.1);
}
:where(:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #b4161b; --sonar-soft: rgba(180,22,27,.12); --sonar-line: rgba(180,22,27,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="winter-holidays"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #ff7b7b; --sonar-soft: rgba(255,123,123,.1); --sonar-line: rgba(255,123,123,.35); --sonar-ink: #2a0505; }

/* Signature: a string of lights along the top edge. The strand is one picture (wire, bulbs, and a
   soft glow that is gradient stops, never a blur); a second layer of glows on every other bulb
   fades in and out on opacity alone, and holds still for reduced motion and html.fx-off. The top
   bar grows a few pixels so the bulbs never touch its title. */
:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) > .theme-deco {
  background:
    radial-gradient(80% 26% at 50% -6%, var(--glow-a), transparent 72%),
    radial-gradient(48% 40% at 100% 104%, var(--glow-b), transparent 72%);
}
:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head { padding-top: 21px; }
:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head::before,
:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cdefs%3E%3CradialGradient id='g0'%3E%3Cstop offset='0' stop-color='%23ff5a5a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ff5a5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g1'%3E%3Cstop offset='0' stop-color='%23ffd54f' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd54f' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2'%3E%3Cstop offset='0' stop-color='%235ee38f' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%235ee38f' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g3'%3E%3Cstop offset='0' stop-color='%236ab8ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%236ab8ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 3 Q30 13 60 3 Q90 13 120 3' fill='none' stroke='%234a6b58' stroke-width='1.1'/%3E%3Ccircle cx='15' cy='13.8' r='7' fill='url(%23g0)'/%3E%3Crect x='13.6' y='6.2' width='2.8' height='2.8' rx='.6' fill='%232f3a33'/%3E%3Cellipse cx='15' cy='12.3' rx='2.5' ry='3.5' fill='%23ff5a5a'/%3E%3Cellipse cx='14.2' cy='11.2' rx='.7' ry='1.1' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='45' cy='13.8' r='7' fill='url(%23g1)'/%3E%3Crect x='43.6' y='6.2' width='2.8' height='2.8' rx='.6' fill='%232f3a33'/%3E%3Cellipse cx='45' cy='12.3' rx='2.5' ry='3.5' fill='%23ffd54f'/%3E%3Cellipse cx='44.2' cy='11.2' rx='.7' ry='1.1' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='75' cy='13.8' r='7' fill='url(%23g2)'/%3E%3Crect x='73.6' y='6.2' width='2.8' height='2.8' rx='.6' fill='%232f3a33'/%3E%3Cellipse cx='75' cy='12.3' rx='2.5' ry='3.5' fill='%235ee38f'/%3E%3Cellipse cx='74.2' cy='11.2' rx='.7' ry='1.1' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='105' cy='13.8' r='7' fill='url(%23g3)'/%3E%3Crect x='103.6' y='6.2' width='2.8' height='2.8' rx='.6' fill='%232f3a33'/%3E%3Cellipse cx='105' cy='12.3' rx='2.5' ry='3.5' fill='%236ab8ff'/%3E%3Cellipse cx='104.2' cy='11.2' rx='.7' ry='1.1' fill='%23ffffff' opacity='.7'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x;
}
:root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cdefs%3E%3CradialGradient id='g0'%3E%3Cstop offset='0' stop-color='%23ff5a5a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ff5a5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g1'%3E%3Cstop offset='0' stop-color='%23ffd54f' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd54f' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2'%3E%3Cstop offset='0' stop-color='%235ee38f' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%235ee38f' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g3'%3E%3Cstop offset='0' stop-color='%236ab8ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%236ab8ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='15' cy='13.8' r='9' fill='url(%23g0)'/%3E%3Ccircle cx='75' cy='13.8' r='9' fill='url(%23g2)'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x;
  animation: sonarLightsTwinkle 2.6s ease-in-out infinite alternate;
}
@keyframes sonarLightsTwinkle { from { opacity: .15; } to { opacity: 1; } }

/* ── New Year's ────────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="new-years"]) > body {
  --bg-base: #fbf9f3; --surface: #ffffff; --surface-strong: #f5f1e6; --surface-input: #ffffff;
  --tile: #efe9da; --border: rgba(60,50,20,.14); --border-strong: rgba(60,50,20,.26); --text: #161a2c;
  --text-dim: #363b52; --text-muted: #575c73; --muted: #575c73; --sonar: #23232b;
  --sonar-soft: rgba(35,35,43,.12); --sonar-line: rgba(35,35,43,.35); --sonar-ink: #ffffff; --sb-bg: #10142e;
  --sb-item: #c8cbe2; --sb-text: #f6f5fb; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(242,205,107,.20);
  --glow-b: rgba(99,102,241,.06); --fx-a: #c99a2e; --fx-b: #9aa3b8; --fx-c: #3556c8;
  --fx-d: #e0557a;
  --product-metal: linear-gradient(180deg, #f6e3a6 0%, #c99a2e 50%, #6f5210 100%);
}
:where(:root[data-sonar-theme="new-years"][data-theme="dark"]) > body {
  --bg-base: #0a0b17; --surface: #12142a; --surface-strong: #1a1d38; --surface-input: #14172e;
  --tile: #1a1d38; --border: rgba(242,205,107,.15); --border-strong: rgba(242,205,107,.30); --text: #f5f3ec;
  --text-dim: #d8d6ce; --text-muted: #adacb9; --muted: #adacb9; --sonar: #f2cd6b;
  --sonar-soft: rgba(242,205,107,.1); --sonar-line: rgba(242,205,107,.35); --sonar-ink: #241a02; --sb-bg: #0d0f23;
  --sb-item: #c3c4da; --sb-text: #f6f5fb; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(242,205,107,.11);
  --glow-b: rgba(99,102,241,.12); --fx-a: #f2cd6b; --fx-b: #dfe3ee; --fx-c: #7f9bff;
  --fx-d: #ff8aa0;
  --product-metal: linear-gradient(180deg, #fff3c9 0%, #f2cd6b 48%, #a9801e 100%);
}
:where(:root[data-sonar-theme="new-years"] > body:not(.vader-sith)) .sidebar {
  --sonar: #f2cd6b; --sonar-soft: rgba(242,205,107,.1); --sonar-line: rgba(242,205,107,.35); --sonar-ink: #241a02;
  --sonar-rail: #f2cd6b; --sonar-rail-ink: #241a02; --sonar-rail-soft: rgba(242,205,107,.16); --sonar-rail-soft-hi: rgba(242,205,107,.28);
  --sonar-rail-text: #f8e4ae; --sonar-rail-text-hi: #fdf6e4; --sonar-rail-glow: rgba(242,205,107,.1);
}
:where(:root[data-sonar-theme="new-years"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #23232b; --sonar-soft: rgba(35,35,43,.12); --sonar-line: rgba(35,35,43,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="new-years"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #f2cd6b; --sonar-soft: rgba(242,205,107,.1); --sonar-line: rgba(242,205,107,.35); --sonar-ink: #241a02; }

/* Signature: confetti and a few sparkles (the canvas), under soft gold rays from the top. */
:root[data-sonar-theme="new-years"] > body:not(.vader-sith) > .theme-deco {
  --ray: rgba(201,154,46,.07);
  background:
    radial-gradient(70% 38% at 50% -10%, var(--glow-a), transparent 72%),
    radial-gradient(50% 40% at 0% 100%, var(--glow-b), transparent 72%);
}
:root[data-sonar-theme="new-years"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco { --ray: rgba(242,205,107,.06); }
:root[data-sonar-theme="new-years"] > body:not(.vader-sith) > .theme-deco::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: repeating-conic-gradient(from -90deg at 50% -24%, var(--ray) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}

/* ── Valentine's Day ───────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="valentines"]) > body {
  --bg-base: #fff6f8; --surface: #ffffff; --surface-strong: #fff0f3; --surface-input: #ffffff;
  --tile: #fde6ec; --border: rgba(173,29,85,.13); --border-strong: rgba(173,29,85,.25); --text: #2b111c;
  --text-dim: #52303e; --text-muted: #77505f; --muted: #77505f; --sonar: #ad1d55;
  --sonar-soft: rgba(173,29,85,.12); --sonar-line: rgba(173,29,85,.35); --sonar-ink: #ffffff; --sb-bg: #3a0e21;
  --sb-item: #efc6d3; --sb-text: #fff4f7; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(251,113,133,.15);
  --glow-b: rgba(244,114,182,.08); --fx-a: #f43f5e; --fx-b: #e11d48; --fx-c: #fb7185;
  --product-metal: linear-gradient(180deg, #ffb3c8 0%, #e0336f 52%, #860f3c 100%);
}
:where(:root[data-sonar-theme="valentines"][data-theme="dark"]) > body {
  --bg-base: #1a0a11; --surface: #241019; --surface-strong: #2e1521; --surface-input: #27111c;
  --tile: #2e1521; --border: rgba(255,138,160,.15); --border-strong: rgba(255,138,160,.30); --text: #fdeef2;
  --text-dim: #efcdd8; --text-muted: #cba4b2; --muted: #cba4b2; --sonar: #ff8aa0;
  --sonar-soft: rgba(255,138,160,.1); --sonar-line: rgba(255,138,160,.35); --sonar-ink: #3b0716; --sb-bg: #1f0b15;
  --sb-item: #e7bfcd; --sb-text: #fff4f7; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(251,113,133,.13);
  --glow-b: rgba(190,24,93,.10); --fx-a: #fb7185; --fx-b: #f43f5e; --fx-c: #fda4af;
  --product-metal: linear-gradient(180deg, #ffd3dd 0%, #ff8aa0 50%, #c2184b 100%);
}
:where(:root[data-sonar-theme="valentines"] > body:not(.vader-sith)) .sidebar {
  --sonar: #ff8aa0; --sonar-soft: rgba(255,138,160,.1); --sonar-line: rgba(255,138,160,.35); --sonar-ink: #3b0716;
  --sonar-rail: #ff8aa0; --sonar-rail-ink: #3b0716; --sonar-rail-soft: rgba(255,138,160,.16); --sonar-rail-soft-hi: rgba(255,138,160,.28);
  --sonar-rail-text: #ffbfcb; --sonar-rail-text-hi: #ffeaee; --sonar-rail-glow: rgba(255,138,160,.1);
}
:where(:root[data-sonar-theme="valentines"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #ad1d55; --sonar-soft: rgba(173,29,85,.12); --sonar-line: rgba(173,29,85,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="valentines"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #ff8aa0; --sonar-soft: rgba(255,138,160,.1); --sonar-line: rgba(255,138,160,.35); --sonar-ink: #3b0716; }

/* Signature: a few hearts drifting up (the canvas), in a soft rose light. */
:root[data-sonar-theme="valentines"] > body:not(.vader-sith) > .theme-deco {
  background:
    radial-gradient(60% 36% at 88% -8%, var(--glow-a), transparent 72%),
    radial-gradient(60% 40% at 6% 104%, var(--glow-b), transparent 72%);
}

/* ── St. Patrick's Day ─────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="st-patricks"]) > body {
  --bg-base: #f5faf5; --surface: #ffffff; --surface-strong: #edf7ef; --surface-input: #ffffff;
  --tile: #e2f1e6; --border: rgba(16,107,52,.14); --border-strong: rgba(16,107,52,.26); --text: #10261a;
  --text-dim: #2e4b3a; --text-muted: #4c6857; --muted: #4c6857; --sonar: #106b34;
  --sonar-soft: rgba(16,107,52,.12); --sonar-line: rgba(16,107,52,.35); --sonar-ink: #ffffff; --sb-bg: #0b2a1b;
  --sb-item: #c0dfcb; --sb-text: #effaf3; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(227,182,74,.15);
  --glow-b: rgba(34,197,94,.08); --fx-a: #16a34a; --fx-b: #15803d; --fx-c: #4ade80;
  --fx-d: #c99a2e;
  --product-metal: linear-gradient(180deg, #9ff0bc 0%, #16a34a 52%, #0a5a29 100%);
}
:where(:root[data-sonar-theme="st-patricks"][data-theme="dark"]) > body {
  --bg-base: #06150d; --surface: #0d2015; --surface-strong: #132a1c; --surface-input: #0f2418;
  --tile: #132a1c; --border: rgba(87,227,140,.13); --border-strong: rgba(87,227,140,.26); --text: #ecf8ef;
  --text-dim: #cbe5d3; --text-muted: #a0c0aa; --muted: #a0c0aa; --sonar: #57e38c;
  --sonar-soft: rgba(87,227,140,.1); --sonar-line: rgba(87,227,140,.35); --sonar-ink: #032712; --sb-bg: #08190f;
  --sb-item: #b8d8c3; --sb-text: #effaf3; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(227,182,74,.10);
  --glow-b: rgba(34,197,94,.10); --fx-a: #22c55e; --fx-b: #4ade80; --fx-c: #16a34a;
  --fx-d: #e3b64a;
  --product-metal: linear-gradient(180deg, #c9fbd9 0%, #57e38c 50%, #12803e 100%);
}
:where(:root[data-sonar-theme="st-patricks"] > body:not(.vader-sith)) .sidebar {
  --sonar: #57e38c; --sonar-soft: rgba(87,227,140,.1); --sonar-line: rgba(87,227,140,.35); --sonar-ink: #032712;
  --sonar-rail: #57e38c; --sonar-rail-ink: #032712; --sonar-rail-soft: rgba(87,227,140,.16); --sonar-rail-soft-hi: rgba(87,227,140,.28);
  --sonar-rail-text: #a3f0c0; --sonar-rail-text-hi: #e1faea; --sonar-rail-glow: rgba(87,227,140,.1);
}
:where(:root[data-sonar-theme="st-patricks"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #106b34; --sonar-soft: rgba(16,107,52,.12); --sonar-line: rgba(16,107,52,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="st-patricks"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #57e38c; --sonar-soft: rgba(87,227,140,.1); --sonar-line: rgba(87,227,140,.35); --sonar-ink: #032712; }

/* Signature: a few shamrocks drifting down (the canvas), with a touch of gold light. */
:root[data-sonar-theme="st-patricks"] > body:not(.vader-sith) > .theme-deco {
  background:
    radial-gradient(56% 34% at 92% -6%, var(--glow-a), transparent 72%),
    radial-gradient(64% 40% at 4% 106%, var(--glow-b), transparent 72%);
}

/* ── Fourth of July ────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="fourth-of-july"]) > body {
  --bg-base: #f7f9fc; --surface: #ffffff; --surface-strong: #eef2f8; --surface-input: #ffffff;
  --tile: #e6ecf5; --border: rgba(28,47,110,.14); --border-strong: rgba(28,47,110,.26); --text: #0f172a;
  --text-dim: #334155; --text-muted: #526079; --muted: #526079; --sonar: #1c2f6e;
  --sonar-soft: rgba(28,47,110,.12); --sonar-line: rgba(28,47,110,.35); --sonar-ink: #ffffff; --sb-bg: #0b1a3d;
  --sb-item: #c5d0e8; --sb-text: #f3f6fd; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(59,130,246,.10);
  --glow-b: rgba(220,38,38,.06); --fx-a: #dc2626; --fx-b: #94a3b8; --fx-c: #2563eb;
  --product-metal: linear-gradient(180deg, #ff9b9b 0%, #c81e1e 50%, #7a0d0d 100%);
}
:where(:root[data-sonar-theme="fourth-of-july"][data-theme="dark"]) > body {
  --bg-base: #0a1022; --surface: #111a33; --surface-strong: #18223f; --surface-input: #131c37;
  --tile: #18223f; --border: rgba(147,197,253,.15); --border-strong: rgba(147,197,253,.28); --text: #eef3fb;
  --text-dim: #cdd7ea; --text-muted: #a3b0c8; --muted: #a3b0c8; --sonar: #ff7b7b;
  --sonar-soft: rgba(255,123,123,.1); --sonar-line: rgba(255,123,123,.35); --sonar-ink: #2a0505; --sb-bg: #08112a;
  --sb-item: #c0cbe4; --sb-text: #f3f6fd; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(147,197,253,.10);
  --glow-b: rgba(255,107,107,.08); --fx-a: #ff6b6b; --fx-b: #ffffff; --fx-c: #7fb2ff;
  --product-metal: linear-gradient(180deg, #ffd0d0 0%, #ff6b6b 50%, #b3141c 100%);
}
:where(:root[data-sonar-theme="fourth-of-july"] > body:not(.vader-sith)) .sidebar {
  --sonar: #ff8585; --sonar-soft: rgba(255,133,133,.1); --sonar-line: rgba(255,133,133,.35); --sonar-ink: #2a0505;
  --sonar-rail: #ff8585; --sonar-rail-ink: #2a0505; --sonar-rail-soft: rgba(255,133,133,.16); --sonar-rail-soft-hi: rgba(255,133,133,.28);
  --sonar-rail-text: #ffbcbc; --sonar-rail-text-hi: #ffe9e9; --sonar-rail-glow: rgba(255,133,133,.1);
}
:where(:root[data-sonar-theme="fourth-of-july"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #1c2f6e; --sonar-soft: rgba(28,47,110,.12); --sonar-line: rgba(28,47,110,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="fourth-of-july"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #ff7b7b; --sonar-soft: rgba(255,123,123,.1); --sonar-line: rgba(255,123,123,.35); --sonar-ink: #2a0505; }

/* Signature: a gentle firework now and then (the canvas), under a band of stars, with red and
   white stripes along the bottom edge of the top bar. */
:root[data-sonar-theme="fourth-of-july"] > body:not(.vader-sith) > .theme-deco {
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 30'%3E%3Cg fill='%231c2f6e'%3E%3Cpath d='M20.0 9.6 L20.8 11.8 L23.2 11.9 L21.4 13.4 L22.0 15.8 L20.0 14.4 L18.0 15.8 L18.6 13.4 L16.8 11.9 L19.2 11.8 Z'/%3E%3Cpath d='M70.0 17.8 L70.5 19.3 L72.1 19.3 L70.9 20.3 L71.3 21.8 L70.0 20.9 L68.7 21.8 L69.1 20.3 L67.9 19.3 L69.5 19.3 Z'/%3E%3Cpath d='M118.0 7.2 L118.7 9.0 L120.7 9.1 L119.1 10.4 L119.6 12.3 L118.0 11.2 L116.4 12.3 L116.9 10.4 L115.3 9.1 L117.3 9.0 Z'/%3E%3Cpath d='M166.0 16.6 L166.6 18.2 L168.3 18.3 L167.0 19.3 L167.4 20.9 L166.0 20.0 L164.6 20.9 L165.0 19.3 L163.7 18.3 L165.4 18.2 Z'/%3E%3Cpath d='M214.0 7.8 L214.8 9.9 L217.0 10.0 L215.3 11.4 L215.9 13.6 L214.0 12.3 L212.1 13.6 L212.7 11.4 L211.0 10.0 L213.2 9.9 Z'/%3E%3Cpath d='M246.0 20.0 L246.5 21.3 L247.9 21.4 L246.8 22.3 L247.2 23.6 L246.0 22.8 L244.8 23.6 L245.2 22.3 L244.1 21.4 L245.5 21.3 Z'/%3E%3C/g%3E%3C/svg%3E");
  background:
    radial-gradient(70% 36% at 50% -8%, var(--glow-a), transparent 72%),
    radial-gradient(50% 40% at 100% 104%, var(--glow-b), transparent 72%);
}
:root[data-sonar-theme="fourth-of-july"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco { --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 30'%3E%3Cg fill='%23dbe7ff'%3E%3Cpath d='M20.0 9.6 L20.8 11.8 L23.2 11.9 L21.4 13.4 L22.0 15.8 L20.0 14.4 L18.0 15.8 L18.6 13.4 L16.8 11.9 L19.2 11.8 Z'/%3E%3Cpath d='M70.0 17.8 L70.5 19.3 L72.1 19.3 L70.9 20.3 L71.3 21.8 L70.0 20.9 L68.7 21.8 L69.1 20.3 L67.9 19.3 L69.5 19.3 Z'/%3E%3Cpath d='M118.0 7.2 L118.7 9.0 L120.7 9.1 L119.1 10.4 L119.6 12.3 L118.0 11.2 L116.4 12.3 L116.9 10.4 L115.3 9.1 L117.3 9.0 Z'/%3E%3Cpath d='M166.0 16.6 L166.6 18.2 L168.3 18.3 L167.0 19.3 L167.4 20.9 L166.0 20.0 L164.6 20.9 L165.0 19.3 L163.7 18.3 L165.4 18.2 Z'/%3E%3Cpath d='M214.0 7.8 L214.8 9.9 L217.0 10.0 L215.3 11.4 L215.9 13.6 L214.0 12.3 L212.1 13.6 L212.7 11.4 L211.0 10.0 L213.2 9.9 Z'/%3E%3Cpath d='M246.0 20.0 L246.5 21.3 L247.9 21.4 L246.8 22.3 L247.2 23.6 L246.0 22.8 L244.8 23.6 L245.2 22.3 L244.1 21.4 L245.5 21.3 Z'/%3E%3C/g%3E%3C/svg%3E"); }
/* The stars are a narrow band just under the top bar, too short to reach the page title. */
:root[data-sonar-theme="fourth-of-july"] > body:not(.vader-sith) > .theme-deco::before {
  content: ''; position: absolute; left: 0; right: 0; top: 44px; height: 26px; opacity: .75;
  background: var(--stars) 12px 0 / 260px 30px repeat-x;
}
:root[data-sonar-theme="fourth-of-july"] > body:not(.vader-sith) .content-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #dc2626 0 18px, #f8fafc 18px 36px);
}

/* ── Gilded ────────────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="gilded"]) > body {
  --bg-base: #0b0b0b; --surface: #141312; --surface-strong: #1c1a17; --surface-input: #161514;
  --tile: #1c1a17; --border: rgba(220,182,85,.17); --border-strong: rgba(220,182,85,.32); --text: #f3eee4;
  --text-dim: #d6ccb9; --text-muted: #aaa08d; --muted: #aaa08d; --sonar: #dcb655;
  --sonar-soft: rgba(220,182,85,.1); --sonar-line: rgba(220,182,85,.35); --sonar-ink: #1a1306; --sb-bg: #0e0d0c;
  --sb-item: #c9bfac; --sb-text: #f6f1e7; --sb-line: rgba(220,182,85,.22); --glow-a: rgba(220,182,85,.07);
  --glow-b: rgba(255,255,255,.03);
  --product-metal: linear-gradient(180deg, #fff3c8 0%, #e6c463 42%, #a8802a 70%, #f1d98b 100%);
  --gild-edge: linear-gradient(135deg, #6f5418 0%, #e9cf7b 18%, #9c7a2a 36%, #f6e3a1 52%, #a5822e 70%, #e3c56e 86%, #6f5418 100%);
  --gild-fill: linear-gradient(180deg, #f3dc94 0%, #d8b452 48%, #b58d33 100%);
  --gild-fill-hi: linear-gradient(180deg, #f8e6aa 0%, #e2c063 48%, #c09a3d 100%);
}
:where(:root[data-sonar-theme="gilded"] > body:not(.vader-sith)) .sidebar {
  --sonar: #dcb655; --sonar-soft: rgba(220,182,85,.1); --sonar-line: rgba(220,182,85,.35); --sonar-ink: #1a1306;
  --sonar-rail: #dcb655; --sonar-rail-ink: #1a1306; --sonar-rail-soft: rgba(220,182,85,.16); --sonar-rail-soft-hi: rgba(220,182,85,.28);
  --sonar-rail-text: #ecd7a2; --sonar-rail-text-hi: #f9f2e0; --sonar-rail-glow: rgba(220,182,85,.1);
}
:where(:root[data-sonar-theme="gilded"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #dcb655; --sonar-soft: rgba(220,182,85,.1); --sonar-line: rgba(220,182,85,.35); --sonar-ink: #1a1306; }

/* GILDED (Pro): matte black, gold trim, metallic edges. One world: matte black in light AND dark
   mode (the pre-paint script holds the page in dark mode while Gilded is on, so every rule keyed on
   the mode agrees). Restrained on purpose: the gold is a hairline on the edges and a brushed fill
   on the things you press, never a gold page. */
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) > .theme-deco {
  background: radial-gradient(64% 40% at 50% -12%, var(--glow-a), transparent 72%);
}
:root[data-sonar-theme="gilded"] > body::after { content: ''; opacity: .22; }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) :is(.sec, .set-card, .insight-card, .mtable, .scorestrip, .folder-card, .dd-chart-card, .tview-tab,
  .askbig:not(.is-admin), .echo-menu, .kebab-menu, .connect-pop, .mint-card) {
  --gild-under: var(--surface);
  border-color: transparent;
  background: linear-gradient(var(--gild-under), var(--gild-under)) padding-box, var(--gild-edge) border-box;
}
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .askbig:not(.is-admin) { --gild-under: var(--surface-input); }
/* The Ask bar shows keyboard focus with its border (the field inside it draws no ring), and the gold
   edge above makes that border transparent: give it back while the bar has focus. */
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .askbig:not(.is-admin):focus-within { border-color: var(--sonar-focus, var(--sonar)); }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) :is(.echo-menu, .kebab-menu) { --gild-under: var(--bg-base); }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) :is(.connect-pop, .mint-card) { --gild-under: var(--surface-strong); }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .btn:not(.ghost):not(.secondary):not(:disabled),
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .mint-fab {
  background: var(--gild-fill); color: var(--sonar-ink); border-color: #8a6a22;
}
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .btn:not(.ghost):not(.secondary):not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.28), 0 6px 18px -10px rgba(220,182,85,.6);
}
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .btn:not(.ghost):not(.secondary):not(:disabled):hover { background: var(--gild-fill-hi); }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .sidebar {
  background: linear-gradient(165deg, #131210 0%, #0b0a09 58%, #0f0e0c 100%);
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(220,182,85,0) 0%, rgba(233,207,123,.7) 24%, rgba(165,130,46,.45) 62%, rgba(220,182,85,0) 100%) 1;
}
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .sb-item.active, :root[data-sonar-theme="gilded"] > body:not(.vader-sith) .sb-plan .tierchip { background: var(--gild-fill); color: var(--sonar-rail-ink); }
:root[data-sonar-theme="gilded"] > body:not(.vader-sith) .content-head {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(165,130,46,.15), rgba(233,207,123,.75) 34%, rgba(165,130,46,.35) 72%, rgba(220,182,85,.08)) 1;
}

/* ── Snowy ─────────────────────────────────────────────────────────────────────────────── */
:where(:root[data-sonar-theme="snowy"]) > body {
  --bg-base: #f7fbff; --surface: #ffffff; --surface-strong: #eef5fc; --surface-input: #ffffff;
  --tile: #e5f0fa; --border: rgba(27,102,173,.16); --border-strong: rgba(27,102,173,.30); --text: #0f2235;
  --text-dim: #2f4459; --text-muted: #4d6379; --muted: #4d6379; --sonar: #1b66ad;
  --sonar-soft: rgba(27,102,173,.12); --sonar-line: rgba(27,102,173,.35); --sonar-ink: #ffffff; --sb-bg: #0f2c4c;
  --sb-item: #c4d8ee; --sb-text: #f2f8ff; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(186,220,250,.70);
  --glow-b: rgba(140,200,255,.18); --fx-a: #b5d1ef; --fx-b: #7fb0e0;
  --product-metal: linear-gradient(180deg, #e6f4ff 0%, #4a9be0 50%, #1b5a99 100%);
}
:where(:root[data-sonar-theme="snowy"][data-theme="dark"]) > body {
  --bg-base: #0b1630; --surface: #10203f; --surface-strong: #162a4f; --surface-input: #12234a;
  --tile: #162a4f; --border: rgba(140,200,255,.16); --border-strong: rgba(140,200,255,.30); --text: #e9f2ff;
  --text-dim: #c9d8ee; --text-muted: #9fb3cf; --muted: #9fb3cf; --sonar: #8cc8ff;
  --sonar-soft: rgba(140,200,255,.1); --sonar-line: rgba(140,200,255,.35); --sonar-ink: #062240; --sb-bg: #081226;
  --sb-item: #bccde6; --sb-text: #f2f8ff; --sb-line: rgba(255,255,255,.09); --glow-a: rgba(160,190,255,.16);
  --glow-b: rgba(220,235,255,.07); --fx-a: #ffffff; --fx-b: #cfe6ff;
  --product-metal: linear-gradient(180deg, #ffffff 0%, #9cd2ff 50%, #3f86c9 100%);
}
:where(:root[data-sonar-theme="snowy"] > body:not(.vader-sith)) .sidebar {
  --sonar: #8cc8ff; --sonar-soft: rgba(140,200,255,.1); --sonar-line: rgba(140,200,255,.35); --sonar-ink: #062240;
  --sonar-rail: #8cc8ff; --sonar-rail-ink: #062240; --sonar-rail-soft: rgba(140,200,255,.16); --sonar-rail-soft-hi: rgba(140,200,255,.28);
  --sonar-rail-text: #c0e1ff; --sonar-rail-text-hi: #eaf5ff; --sonar-rail-glow: rgba(140,200,255,.1);
}
:where(:root[data-sonar-theme="snowy"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #1b66ad; --sonar-soft: rgba(27,102,173,.12); --sonar-line: rgba(27,102,173,.35); --sonar-ink: #ffffff; }
:where(:root[data-sonar-theme="snowy"][data-theme="dark"] > body:not(.vader-sith)) .sidebar .echo-menu { --sonar: #8cc8ff; --sonar-soft: rgba(140,200,255,.1); --sonar-line: rgba(140,200,255,.35); --sonar-ink: #062240; }

/* SNOWY (Pro). Light: white with blue trim, a pale sky-blue wash toward the top. Dark: a deep
   winter-night blue under a moonlit glow. Snow falls on both (the canvas); a device set to reduce
   motion, or Moving decorations set to Off, gets the same snow standing still. */
:root[data-sonar-theme="snowy"] > body:not(.vader-sith) > .theme-deco {
  background:
    linear-gradient(180deg, var(--glow-a) 0%, transparent 46%),
    radial-gradient(52% 30% at 92% -4%, var(--glow-b), transparent 72%);
}
:root[data-sonar-theme="snowy"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco {
  background:
    radial-gradient(72% 44% at 50% -10%, var(--glow-a), transparent 72%),
    linear-gradient(to top, var(--glow-b), transparent 16%);
}
:root[data-sonar-theme="snowy"] > body:not(.vader-sith) :is(.sec, .set-card, .insight-card, .mtable, .scorestrip, .folder-card, .dd-chart-card, .tview-tab) {
  box-shadow: inset 0 2px 0 var(--snow-trim, rgba(27,102,173,.5));
}
:root[data-sonar-theme="snowy"][data-theme="dark"] > body:not(.vader-sith) { --snow-trim: rgba(140,200,255,.42); }

/* ── Narrower screens and phones ─────────────────────────────────────────────────────── */
/* The Halloween web: without the rail (900px) the page is narrower and the top bar is taller (it
   carries the menu button), so the web is smaller and hangs from the taller bar; on a phone, smaller
   again, from the phone's bar. */
@media (max-width: 900px) {
  :root[data-sonar-theme="halloween"] > body:not(.vader-sith) { --web-w: clamp(320px, 50vw, 500px); --web-top: 55px; }
}
@media (max-width: 640px) {
  :root[data-sonar-theme="halloween"] > body:not(.vader-sith) { --web-w: clamp(210px, 70vw, 320px); --web-top: 51px; }
  :root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head { padding-top: 19px; }
}

/* ── Motion: the two animations in this file stand still when asked ──────────────────── */
/* The Winter Holidays lights dim to a still glow; the dew on the Halloween web keeps its beads, still. */
@media (prefers-reduced-motion: reduce) {
  :root[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head::after { animation: none; opacity: .6; }
  :root[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after { animation: none; }
}
html.fx-off[data-sonar-theme="winter-holidays"] > body:not(.vader-sith) .content-head::after { animation: none; opacity: .6; }
html.fx-off[data-sonar-theme="halloween"][data-theme="dark"] > body:not(.vader-sith) > .theme-deco::after { animation: none; }

/* ── The Settings picker's swatches: each look's own small picture ───────────────────── */
.theme-swatch[data-sonar-theme-pick="halloween"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='l' cx='.78' cy='.22' r='.62'%3E%3Cstop offset='0' stop-color='%23ff9a3d' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ff9a3d' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='%231b1129'/%3E%3Ccircle cx='12' cy='12' r='11' fill='url(%23l)'/%3E%3Cg fill='none' stroke='%23efe6f8' stroke-linecap='round'%3E%3Cpath d='M18.6 5.4L4.6 4.4M18.6 5.4L5.4 10M18.6 5.4L8.4 14.9M18.6 5.4L13.1 18.3M18.6 5.4L18.1 19.4' stroke-width='.75' stroke-opacity='.95'/%3E%3Cpath d='M15.3 5.2Q16 5.7 15.5 6.5 16.3 6.8 16.2 7.7 17.1 7.6 17.3 8.4 18 8 18.5 8.7M12.4 5Q13.7 6 12.7 7.4 14.3 8 14.1 9.6 15.8 9.5 16.2 11.1 17.5 10.2 18.4 11.6M9.3 4.8Q11.2 6.4 9.8 8.4 12.2 9.2 11.8 11.7 14.3 11.5 15 14 17 12.7 18.3 14.7M6 4.5Q8.6 6.7 6.7 9.5 10 10.6 9.4 14 12.8 13.7 13.7 17 16.4 15.2 18.2 18' stroke-width='.6' stroke-opacity='.8'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="thanksgiving"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fdecd2'/%3E%3Cpath fill='%23d9620e' d='M12 4 L13.6 7.8 L16.4 6.4 L15.6 10.2 L19 10 L16.6 12.8 L18.6 14.6 L13.4 14.6 L12.6 19 L11.4 19 L10.6 14.6 L5.4 14.6 L7.4 12.8 L5 10 L8.4 10.2 L7.6 6.4 L10.4 7.8 Z'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="winter-holidays"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230f2a1d'/%3E%3Crect x='10.6' y='4.6' width='2.8' height='2.6' rx='.5' fill='%23e3b64a'/%3E%3Ccircle cx='12' cy='13' r='5.8' fill='%23d11a22'/%3E%3Cellipse cx='10' cy='11' rx='1.4' ry='1' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="new-years"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2310142e'/%3E%3Cpath fill='%23f2cd6b' d='M12 4 L13.3 10.7 L20 12 L13.3 13.3 L12 20 L10.7 13.3 L4 12 L10.7 10.7 Z'/%3E%3Ccircle cx='17.5' cy='6.5' r='.9' fill='%23dfe3ee'/%3E%3Ccircle cx='6.5' cy='17' r='.8' fill='%23ff8aa0'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="valentines"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffe4ea'/%3E%3Cpath transform='translate(6 7) scale(1)' fill='%23e11d48' d='M0 3 C0 -1 5 -1.5 6 2 C7 -1.5 12 -1 12 3 C12 7 6 10.5 6 11 C6 10.5 0 7 0 3 Z'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="st-patricks"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e6f5ea'/%3E%3Cg fill='%2316a34a'%3E%3Cpath transform='translate(12 11.4) rotate(0) translate(-3.84 -7.1) scale(.64)' d='M0 3 C0 -1 5 -1.5 6 2 C7 -1.5 12 -1 12 3 C12 7 6 10.5 6 11 C6 10.5 0 7 0 3 Z'/%3E%3Cpath transform='translate(12 11.4) rotate(120) translate(-3.84 -7.1) scale(.64)' d='M0 3 C0 -1 5 -1.5 6 2 C7 -1.5 12 -1 12 3 C12 7 6 10.5 6 11 C6 10.5 0 7 0 3 Z'/%3E%3Cpath transform='translate(12 11.4) rotate(240) translate(-3.84 -7.1) scale(.64)' d='M0 3 C0 -1 5 -1.5 6 2 C7 -1.5 12 -1 12 3 C12 7 6 10.5 6 11 C6 10.5 0 7 0 3 Z'/%3E%3C/g%3E%3Cpath d='M12 12.4 Q12.8 16.6 14.8 19' stroke='%2316a34a' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="fourth-of-july"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23dc2626'/%3E%3Ccircle cx='12' cy='12' r='11' fill='%230b1a3d'/%3E%3Cpath fill='%23ffffff' d='M12.0 6.4 L13.5 10.5 L17.9 10.7 L14.5 13.4 L15.6 17.6 L12.0 15.2 L8.4 17.6 L9.5 13.4 L6.1 10.7 L10.5 10.5 Z'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="gilded"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='gd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e3a1'/%3E%3Cstop offset='.5' stop-color='%23a5822e'/%3E%3Cstop offset='1' stop-color='%23e3c56e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11' fill='%230b0b0b'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='url(%23gd)' stroke-width='2.2'/%3E%3C/svg%3E") center / cover no-repeat; }
.theme-swatch[data-sonar-theme-pick="snowy"] .sw { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e3f1ff'/%3E%3Cg stroke='%231b66ad' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 5 V19 M5.9 8.5 L18.1 15.5 M5.9 15.5 L18.1 8.5'/%3E%3Cpath d='M10 6.6 L12 8.2 L14 6.6 M10 17.4 L12 15.8 L14 17.4' fill='none'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; }