@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");
  font-weight:400 800;font-stretch:75% 100%;font-display:swap;font-style:normal}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");
  font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-400.woff2) format("woff2");
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-600.woff2) format("woff2");
  font-weight:600;font-display:swap;font-style:normal}
:root{color-scheme:dark;--bg:#08090b;--surface:#0e1014;--line:#191d24;--line2:#262c36;--fg:#e9edf2;--dim:#7d8794;--dimmer:#5e6570;--accent:#ff4d17;--accent-soft:rgba(255,77,23,.11);--accent-ink:#08090b;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:saturate(.82) contrast(1.12) brightness(.97);--display-transform:none;--display-weight:760;--display-spacing:-.032em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="circuit"]{color-scheme:dark;--bg:#05070a;--surface:#0a1018;--line:#122032;--line2:#1d3a5c;--fg:#e6eef5;--dim:#8296a8;--dimmer:#5b7085;--accent:#2be0c8;--accent-soft:rgba(43,224,200,.10);--accent-ink:#05070a;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:saturate(.86) contrast(1.1) brightness(.96);--display-transform:none;--display-weight:760;--display-spacing:-.032em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="bulletin"]{color-scheme:dark;--bg:#0a0b0d;--surface:#101216;--line:#1a1e24;--line2:#272d36;--fg:#edf1f5;--dim:#9aa5b1;--dimmer:#6c7683;--accent:#46e8ff;--accent-soft:rgba(70,232,255,.11);--accent-ink:#04161c;--font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:2px;--img-filter:saturate(.9) contrast(1.06) brightness(.98);--display-transform:none;--display-weight:700;--display-spacing:-.022em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="instrument"]{color-scheme:dark;--bg:#08090b;--surface:#0e1014;--line:#191d24;--line2:#262c36;--fg:#e9edf2;--dim:#7d8794;--dimmer:#5e6570;--accent:#ff4d17;--accent-soft:rgba(255,77,23,.11);--accent-ink:#08090b;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:saturate(.82) contrast(1.12) brightness(.97);--display-transform:none;--display-weight:760;--display-spacing:-.032em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="thermal"]{color-scheme:dark;--bg:#0a0a0b;--surface:#131315;--line:#1e1e21;--line2:#2c2c31;--fg:#eceae7;--dim:#8e8e97;--dimmer:#65656c;--accent:#ff5a1f;--accent-soft:rgba(255,90,31,.12);--accent-ink:#0a0a0b;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:3px;--img-filter:saturate(.85) contrast(1.06);--display-transform:none;--display-weight:750;--display-spacing:-.028em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="newsprint"]{color-scheme:light;--bg:#f6f3ec;--surface:#fffdf8;--line:#ddd7c9;--line2:#c4bcaa;--fg:#16150f;--dim:#5d5850;--dimmer:#8b857a;--accent:#c02b1d;--accent-soft:rgba(192,43,29,.09);--accent-ink:#fffdf8;--font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:grayscale(.35) contrast(1.1) sepia(.12);--display-transform:none;--display-weight:700;--display-spacing:-.015em;--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="terminal"]{color-scheme:dark;--bg:#000000;--surface:#070b07;--line:#122012;--line2:#1d3a1d;--fg:#c8f5c8;--dim:#5f9a5f;--dimmer:#446b44;--accent:#39ff5e;--accent-soft:rgba(57,255,94,.1);--accent-ink:#000000;--font-display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--font-body:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:grayscale(1) contrast(1.35) brightness(.82) sepia(.5) hue-rotate(60deg) saturate(2.2);--display-transform:uppercase;--display-weight:700;--display-spacing:.01em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="terminal-amber"]{color-scheme:dark;--bg:#0b0700;--surface:#140d02;--line:#2a1c05;--line2:#3f2c09;--fg:#ffcf8a;--dim:#a8763a;--dimmer:#805d30;--accent:#ffa116;--accent-soft:rgba(255,161,22,.12);--accent-ink:#0b0700;--font-display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--font-body:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:grayscale(1) sepia(.85) saturate(2.4) hue-rotate(-14deg) contrast(1.18);--display-transform:uppercase;--display-weight:700;--display-spacing:.012em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="broadsheet"]{color-scheme:light;--bg:#faf7f0;--surface:#ffffff;--line:#e4ded1;--line2:#cbc3b2;--fg:#1a1a18;--dim:#57544c;--dimmer:#8a867c;--accent:#1f4f8f;--accent-soft:rgba(31,79,143,.08);--accent-ink:#ffffff;--font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:2px;--img-filter:saturate(.9);--display-transform:none;--display-weight:700;--display-spacing:-.018em;--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="brutalist"]{color-scheme:light;--bg:#ffffff;--surface:#ffffff;--line:#000000;--line2:#000000;--fg:#000000;--dim:#444444;--dimmer:#777777;--accent:#0033ff;--accent-soft:rgba(0,51,255,.1);--accent-ink:#ffffff;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:grayscale(1) contrast(1.5);--display-transform:uppercase;--display-weight:800;--display-spacing:-.035em;--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="redline"]{color-scheme:dark;--bg:#0c0000;--surface:#160303;--line:#2a0b0b;--line2:#431212;--fg:#f4e9e9;--dim:#a07d7d;--dimmer:#775a5a;--accent:#ff1f3d;--accent-soft:rgba(255,31,61,.13);--accent-ink:#0c0000;--font-display:"Haettenschweiler","Arial Narrow",Impact,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:0;--img-filter:contrast(1.2) saturate(1.15);--display-transform:uppercase;--display-weight:700;--display-spacing:0;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="midnight"]{color-scheme:dark;--bg:#08090f;--surface:#101220;--line:#1b1e30;--line2:#282c42;--fg:#e4e6f2;--dim:#8489a6;--dimmer:#5f647f;--accent:#8b7cff;--accent-soft:rgba(139,124,255,.13);--accent-ink:#08090f;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:8px;--img-filter:saturate(.9) brightness(.96);--display-transform:none;--display-weight:650;--display-spacing:-.022em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="daylight"]{color-scheme:light;--bg:#f4f5f7;--surface:#ffffff;--line:#e2e5ea;--line2:#c9cdd6;--fg:#14171c;--dim:#5b6270;--dimmer:#8a9098;--accent:#0b6bcb;--accent-soft:rgba(11,107,203,.08);--accent-ink:#ffffff;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:6px;--img-filter:none;--display-transform:none;--display-weight:650;--display-spacing:-.02em;--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="acid"]{color-scheme:dark;--bg:#111310;--surface:#191c17;--line:#242821;--line2:#333930;--fg:#eef2e8;--dim:#8d9683;--dimmer:#666d5f;--accent:#c6ff00;--accent-soft:rgba(198,255,0,.11);--accent-ink:#111310;--font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--radius:2px;--img-filter:saturate(1.15) contrast(1.1);--display-transform:uppercase;--display-weight:800;--display-spacing:-.03em;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="cupertino"]{color-scheme:light;--bg:#fbfbfd;--surface:#ffffff;--line:#e3e3e6;--line2:#d2d2d7;--fg:#1d1d1f;--dim:#6e6e73;--dimmer:#86868b;--accent:#0071e3;--accent-soft:rgba(0,113,227,.08);--accent-ink:#ffffff;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--aurora:radial-gradient(58% 42% at 10% 6%, rgba(120,168,255,.20), transparent 70%),
       radial-gradient(52% 38% at 90% 12%, rgba(255,186,164,.18), transparent 72%),
       radial-gradient(66% 50% at 74% 92%, rgba(198,170,255,.17), transparent 74%);--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="fluent"]{color-scheme:dark;--bg:#071426;--surface:#0e2137;--line:#16324f;--line2:#21507c;--fg:#eaf3fb;--dim:#a3bdd4;--dimmer:#7f9cb6;--accent:#50e6ff;--accent-soft:rgba(80,230,255,.10);--accent-ink:#04121f;--font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--font-body:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:8px;--img-filter:saturate(.96) contrast(1.03);--display-transform:none;--display-weight:600;--display-spacing:-.02em;--aurora:radial-gradient(60% 44% at 82% 4%, rgba(80,230,255,.20), transparent 68%),
       radial-gradient(58% 42% at 12% 14%, rgba(0,120,212,.26), transparent 72%),
       radial-gradient(70% 52% at 70% 94%, rgba(30,80,190,.22), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="irvine"]{color-scheme:dark;--bg:#171926;--surface:#1e2335;--line:#272e45;--line2:#34405f;--fg:#ffffff;--dim:#b4bccd;--dimmer:#8a93a8;--accent:#2a9bdc;--accent-soft:rgba(14,134,202,.14);--accent-ink:#0b0d16;--font-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:2px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.02em;--aurora:radial-gradient(60% 44% at 12% 4%, rgba(14,134,202,.26), transparent 70%),
       radial-gradient(56% 40% at 88% 10%, rgba(0,24,69,.70), transparent 72%),
       radial-gradient(70% 50% at 62% 96%, rgba(42,155,220,.12), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-white"]{color-scheme:light;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#f4f4f7;--surface:#ffffff;--line:#e4e4ea;--line2:#d0d0d9;--fg:#16161a;--dim:#5d5d68;--dimmer:#83838f;--accent:#0064d2;--accent-soft:rgba(0,100,210,.10);--accent-ink:#ffffff;--aurora:radial-gradient(60% 45% at 12% 8%, rgba(96,158,255,.46), transparent 70%),
   radial-gradient(55% 40% at 88% 14%, rgba(255,166,132,.42), transparent 72%),
   radial-gradient(70% 55% at 70% 88%, rgba(186,142,255,.40), transparent 74%),
   radial-gradient(50% 40% at 26% 78%, rgba(128,222,214,.34), transparent 70%);--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-silver"]{color-scheme:light;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#f1f1f3;--surface:#ffffff;--line:#e2e2e6;--line2:#cbcbd2;--fg:#141416;--dim:#5a5a62;--dimmer:#84848d;--accent:#4a5568;--accent-soft:rgba(74,85,104,.10);--accent-ink:#ffffff;--aurora:radial-gradient(60% 46% at 12% 10%, rgba(180,195,215,.40), transparent 70%),
   radial-gradient(54% 40% at 88% 16%, rgba(210,215,225,.36), transparent 72%),
   radial-gradient(68% 52% at 72% 88%, rgba(160,175,195,.30), transparent 74%);--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-glacier"]{color-scheme:light;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#eef3f7;--surface:#ffffff;--line:#dde6ed;--line2:#c6d4de;--fg:#101820;--dim:#526271;--dimmer:#7b8b99;--accent:#0070b8;--accent-soft:rgba(0,112,184,.10);--accent-ink:#ffffff;--aurora:radial-gradient(62% 46% at 10% 12%, rgba(120,200,255,.38), transparent 70%),
   radial-gradient(56% 42% at 86% 10%, rgba(178,226,255,.34), transparent 72%),
   radial-gradient(70% 54% at 72% 90%, rgba(150,190,235,.30), transparent 74%);--sev-1:#c4160c;--sev-2:#c25600;--sev-3:#8a6d00;--sev-4:#15619e;--sev-5:#5f6874;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 58%, var(--bg));--atmos-opacity:.35;--stars-display:none;--grain-blend:multiply;--grain-opacity:.1;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-night"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#070a16;--surface:#111629;--line:#1c2440;--line2:#2b3760;--fg:#eceffb;--dim:#a3abcc;--dimmer:#7b83a6;--accent:#6f9dff;--accent-soft:rgba(111,157,255,.13);--accent-ink:#050713;--aurora:radial-gradient(58% 44% at 16% 10%, rgba(70,95,220,.44), transparent 70%),
   radial-gradient(52% 40% at 84% 18%, rgba(140,80,220,.34), transparent 72%),
   radial-gradient(66% 52% at 74% 86%, rgba(40,110,190,.32), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-blue"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#040d1a;--surface:#0c1a2e;--line:#152a46;--line2:#204066;--fg:#e8f1fc;--dim:#9db6d4;--dimmer:#7590ae;--accent:#5cb0ff;--accent-soft:rgba(92,176,255,.13);--accent-ink:#030a15;--aurora:radial-gradient(58% 44% at 14% 10%, rgba(30,95,200,.46), transparent 70%),
   radial-gradient(54% 40% at 86% 16%, rgba(20,140,190,.34), transparent 72%),
   radial-gradient(66% 52% at 74% 88%, rgba(60,70,180,.30), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-burgundy"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#170810;--surface:#26101b;--line:#391a29;--line2:#55273c;--fg:#f9ecf1;--dim:#cfa8b8;--dimmer:#a88293;--accent:#ff8fa8;--accent-soft:rgba(255,143,168,.13);--accent-ink:#16070e;--aurora:radial-gradient(58% 44% at 14% 10%, rgba(170,30,70,.46), transparent 70%),
   radial-gradient(54% 40% at 86% 16%, rgba(120,25,90,.36), transparent 72%),
   radial-gradient(66% 52% at 74% 88%, rgba(200,80,60,.28), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="lg-orange"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#150a04;--surface:#24140a;--line:#3a2110;--line2:#5a331a;--fg:#fdeee2;--dim:#d7ac8c;--dimmer:#ad8467;--accent:#ff9d4d;--accent-soft:rgba(255,157,77,.13);--accent-ink:#150a04;--aurora:radial-gradient(58% 44% at 14% 10%, rgba(235,110,25,.46), transparent 70%),
   radial-gradient(54% 40% at 86% 16%, rgba(200,60,30,.34), transparent 72%),
   radial-gradient(66% 52% at 74% 88%, rgba(255,170,60,.26), transparent 74%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#5d47eb;--accent-soft:rgba(93,71,235,.16);--accent-ink:#fafafa;--aurora:radial-gradient(at 27% 37%, rgba(58,139,253,.10) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(114,254,125,.10) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(254,134,144,.10) 0, transparent 50%),
   radial-gradient(at 10% 29%, rgba(137,95,252,.10) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(228,199,149,.10) 0, transparent 50%),
   radial-gradient(at 33% 50%, rgba(140,168,232,.10) 0, transparent 50%),
   radial-gradient(at 79% 53%, rgba(250,97,143,.10) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(41,127,228,.08), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-blue"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#0091ff;--accent-soft:rgba(0,145,255,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(0,145,255,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(0,145,255,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(0,145,255,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(0,145,255,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(0,145,255,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-indigo"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#6d7cff;--accent-soft:rgba(109,124,255,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(109,124,255,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(109,124,255,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(109,124,255,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(109,124,255,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(109,124,255,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-purple"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#db34f2;--accent-soft:rgba(219,52,242,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(219,52,242,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(219,52,242,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(219,52,242,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(219,52,242,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(219,52,242,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-pink"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#ff375f;--accent-soft:rgba(255,55,95,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(255,55,95,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(255,55,95,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(255,55,95,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(255,55,95,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(255,55,95,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-orange"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#ff9230;--accent-soft:rgba(255,146,48,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(255,146,48,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(255,146,48,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(255,146,48,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(255,146,48,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(255,146,48,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-green"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#30d158;--accent-soft:rgba(48,209,88,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(48,209,88,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(48,209,88,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(48,209,88,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(48,209,88,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(48,209,88,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="aether-teal"]{color-scheme:dark;--bg:#0a0a0a;--surface:#121212;--line:#262626;--line2:#3a3a3a;--fg:#fafafa;--dim:#a3a3a3;--dimmer:#737373;--font-display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:12px;--img-filter:none;--display-transform:none;--display-weight:700;--display-spacing:-.03em;--glass-style:aether;--accent:#00d2e0;--accent-soft:rgba(0,210,224,0.15);--accent-ink:#0a0a0a;--aurora:radial-gradient(at 10% 29%, rgba(0,210,224,0.26) 0, transparent 50%),
   radial-gradient(at 27% 37%, rgba(0,210,224,0.16) 0, transparent 50%),
   radial-gradient(at 97% 21%, rgba(0,210,224,0.12) 0, transparent 50%),
   radial-gradient(at 52% 99%, rgba(0,210,224,0.18) 0, transparent 50%),
   radial-gradient(at 97% 96%, rgba(255,255,255,.04) 0, transparent 50%),
   radial-gradient(80% 60% at 50% 0%, rgba(0,210,224,0.1), transparent 70%);--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-clear"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#14141a;--accent:#0091ff;--accent-soft:rgba(0,145,255,.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(40,120,255,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(255,128,32,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(236,64,196,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(120,72,255,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(40,210,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(40,120,255,0.3) 40deg, transparent 80deg, rgba(255,128,32,0.26) 150deg, transparent 190deg, rgba(236,64,196,0.26) 250deg, transparent 290deg, rgba(120,72,255,0.24) 330deg, transparent 360deg);--glass-tint:off;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-blue"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#11263a;--accent:#0091ff;--accent-soft:rgba(0,145,255,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(0,145,255,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(114.74999999999999,194.5,255,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(0,145,255,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(0,101.5,178.5,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(0,145,255,0.3) 40deg, transparent 80deg, rgba(114.74999999999999,194.5,255,0.26) 150deg, transparent 190deg, rgba(0,145,255,0.26) 250deg, transparent 290deg, rgba(0,101.5,178.5,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-purple"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#301838;--accent:#db34f2;--accent-soft:rgba(219,52,242,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(219,52,242,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(235.2,143.35,247.85000000000002,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(219,52,242,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(153.29999999999998,36.4,169.39999999999998,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(219,52,242,0.3) 40deg, transparent 80deg, rgba(235.2,143.35,247.85000000000002,0.26) 150deg, transparent 190deg, rgba(219,52,242,0.26) 250deg, transparent 290deg, rgba(153.29999999999998,36.4,169.39999999999998,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-pink"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#351924;--accent:#ff375f;--accent-soft:rgba(255,55,95,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(255,55,95,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(255,145,167,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(255,55,95,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(178.5,38.5,66.5,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(255,55,95,0.3) 40deg, transparent 80deg, rgba(255,145,167,0.26) 150deg, transparent 190deg, rgba(255,55,95,0.26) 250deg, transparent 290deg, rgba(178.5,38.5,66.5,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-orange"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#35261d;--accent:#ff9230;--accent-soft:rgba(255,146,48,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(255,146,48,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(255,195.05,141.14999999999998,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(255,146,48,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(178.5,102.19999999999999,33.599999999999994,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(255,146,48,0.3) 40deg, transparent 80deg, rgba(255,195.05,141.14999999999998,0.26) 150deg, transparent 190deg, rgba(255,146,48,0.26) 250deg, transparent 290deg, rgba(178.5,102.19999999999999,33.599999999999994,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-green"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#182e23;--accent:#30d158;--accent-soft:rgba(48,209,88,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(48,209,88,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(141.14999999999998,229.7,163.14999999999998,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(48,209,88,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(33.599999999999994,146.29999999999998,61.599999999999994,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(48,209,88,0.3) 40deg, transparent 80deg, rgba(141.14999999999998,229.7,163.14999999999998,0.26) 150deg, transparent 190deg, rgba(48,209,88,0.26) 250deg, transparent 290deg, rgba(33.599999999999994,146.29999999999998,61.599999999999994,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[data-theme="liquid-teal"]{color-scheme:dark;--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--radius:18px;--img-filter:none;--display-transform:none;--display-weight:600;--display-spacing:-.022em;--bg:#050508;--line:#23232c;--line2:#34343f;--fg:#f7f8fb;--dim:#b4b8c4;--dimmer:#8a8f9c;--accent-ink:#050508;--glass-style:liquid;--surface:#112f36;--accent:#00d2e0;--accent-soft:rgba(0,210,224,0.15);--aurora:radial-gradient(70% 16% at 30% 22%, rgba(0,210,224,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(114.74999999999999,230.25,237.95,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(0,210,224,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(0,147,156.79999999999998,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(255,255,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(0,210,224,0.3) 40deg, transparent 80deg, rgba(114.74999999999999,230.25,237.95,0.26) 150deg, transparent 190deg, rgba(0,210,224,0.26) 250deg, transparent 290deg, rgba(0,147,156.79999999999998,0.24) 330deg, transparent 360deg);--glass-tint:on;--sev-1:#ff3b30;--sev-2:#ff7a1a;--sev-3:#ffc61a;--sev-4:#4da3ff;--sev-5:#8a93a0;--fg-meta:var(--dim);--line-ui:color-mix(in srgb, var(--fg) 52%, var(--bg));--atmos-opacity:1;--stars-display:block;--grain-blend:overlay;--grain-opacity:.16;
  /* THE BOUNDARY OF AN INTERACTIVE CONTROL, WHICH IS NOT THE SAME AS A DIVIDER.
     --line2 was doing both jobs. As a divider it is fine — WCAG exempts purely
     decorative boundaries. As the border of a control it has to clear 3:1
     against what it sits ON, and the control bar has no background of its own,
     so that is --bg rather than the --surface the border was chosen against. It
     failed 3:1 in 21 of 22 themes, as low as 1.30. Derived from the theme's own
     --fg and --bg the way glass.ts derives its values, so every palette gets a
     control edge that belongs to it and none of them need hand-tuning. */
  --sel-bg:color-mix(in srgb, var(--accent) 18%, transparent);
  --sel-bg-hover:color-mix(in srgb, var(--accent) 26%, transparent);
  /* Full strength, not 55%. A selected control was carried by this border alone
     in several places, and at 55% over the page ground it cleared 3:1 in only 10
     of 22 themes — so "which one is selected" was genuinely unreadable in the
     other 12. The fill behind it is deliberately left low: raising THAT is what
     endangers the text sitting on top of it. */
  --sel-line:var(--accent);
  --sel-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 16px -6px var(--accent);
  --sel-glow-strong:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 26px -6px var(--accent);

  /* Tint: the theme's own surface, thinned so the ground shows through. */
  --glass-bg:color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-bg-strong:color-mix(in srgb, var(--surface) 80%, transparent);
  /* The lit top edge that makes a pane read as a physical sheet rather than a
     rectangle of reduced opacity. Apple's own glass leans on this more than on
     the blur itself. */
  --glass-edge:color-mix(in srgb, var(--fg) 12%, transparent);
  --glass-edge-soft:color-mix(in srgb, var(--fg) 7%, transparent);
  --glass-blur:20px;
  /* Saturation lift compensates for the desaturation blurring causes; without it
     glass looks grey and dead over a colourful page. */
  --glass-sat:1.7;
  --glass-shadow:0 8px 30px -14px color-mix(in srgb, var(--bg) 92%, #000);
}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 4. iOS ZOOMS THE WHOLE PAGE when a form control smaller than 16px takes
      focus, and it does NOT zoom back out afterwards — the reader is left on a
      magnified, horizontally-scrolling page and has to pinch their way back.
      Both of this site's text inputs were set at 13.5px and 14px for the
      monospace look, which is exactly the trigger.

      Applied at mobile widths only, so the desktop typography is untouched, and
      with !important because the rule has to beat the class selectors that set
      the size (.qbox and .search both out-specify a bare element selector). A
      platform bug is the one place where overriding design intent is correct —
      no styling choice is worth this outcome. Written against element types
      rather than class names so a control added later is covered by default. */
@media (max-width:640px){input,select,textarea{font-size:16px!important}}
:root[data-theme="cupertino"] body,:root[data-theme="fluent"] body,:root[data-theme="irvine"] body,:root[data-theme="lg-white"] body,:root[data-theme="lg-silver"] body,:root[data-theme="lg-glacier"] body,:root[data-theme="lg-night"] body,:root[data-theme="lg-blue"] body,:root[data-theme="lg-burgundy"] body,:root[data-theme="lg-orange"] body,:root[data-theme="aether"] body,:root[data-theme="aether-blue"] body,:root[data-theme="aether-indigo"] body,:root[data-theme="aether-purple"] body,:root[data-theme="aether-pink"] body,:root[data-theme="aether-orange"] body,:root[data-theme="aether-green"] body,:root[data-theme="aether-teal"] body,:root[data-theme="liquid-clear"] body,:root[data-theme="liquid-blue"] body,:root[data-theme="liquid-purple"] body,:root[data-theme="liquid-pink"] body,:root[data-theme="liquid-orange"] body,:root[data-theme="liquid-green"] body,:root[data-theme="liquid-teal"] body{position:relative}
:root[data-theme="cupertino"] body::after,:root[data-theme="fluent"] body::after,:root[data-theme="irvine"] body::after,:root[data-theme="lg-white"] body::after,:root[data-theme="lg-silver"] body::after,:root[data-theme="lg-glacier"] body::after,:root[data-theme="lg-night"] body::after,:root[data-theme="lg-blue"] body::after,:root[data-theme="lg-burgundy"] body::after,:root[data-theme="lg-orange"] body::after,:root[data-theme="aether"] body::after,:root[data-theme="aether-blue"] body::after,:root[data-theme="aether-indigo"] body::after,:root[data-theme="aether-purple"] body::after,:root[data-theme="aether-pink"] body::after,:root[data-theme="aether-orange"] body::after,:root[data-theme="aether-green"] body::after,:root[data-theme="aether-teal"] body::after,:root[data-theme="liquid-clear"] body::after,:root[data-theme="liquid-blue"] body::after,:root[data-theme="liquid-purple"] body::after,:root[data-theme="liquid-pink"] body::after,:root[data-theme="liquid-orange"] body::after,:root[data-theme="liquid-green"] body::after,:root[data-theme="liquid-teal"] body::after{
  content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background-image:var(--aurora);
  filter:blur(52px) saturate(1.28);
}
@media (prefers-reduced-transparency: reduce){:root[data-theme="cupertino"] body::after,:root[data-theme="fluent"] body::after,:root[data-theme="irvine"] body::after,:root[data-theme="lg-white"] body::after,:root[data-theme="lg-silver"] body::after,:root[data-theme="lg-glacier"] body::after,:root[data-theme="lg-night"] body::after,:root[data-theme="lg-blue"] body::after,:root[data-theme="lg-burgundy"] body::after,:root[data-theme="lg-orange"] body::after,:root[data-theme="aether"] body::after,:root[data-theme="aether-blue"] body::after,:root[data-theme="aether-indigo"] body::after,:root[data-theme="aether-purple"] body::after,:root[data-theme="aether-pink"] body::after,:root[data-theme="aether-orange"] body::after,:root[data-theme="aether-green"] body::after,:root[data-theme="aether-teal"] body::after,:root[data-theme="liquid-clear"] body::after,:root[data-theme="liquid-blue"] body::after,:root[data-theme="liquid-purple"] body::after,:root[data-theme="liquid-pink"] body::after,:root[data-theme="liquid-orange"] body::after,:root[data-theme="liquid-green"] body::after,:root[data-theme="liquid-teal"] body::after{display:none}}

:root[data-theme="cupertino"]{--lg-fill:color-mix(in srgb,var(--surface) 40%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 84%,transparent);--lg-rim-top:rgba(255,255,255,1);--lg-rim-bot:rgba(15,20,30,.10);--lg-inner:rgba(255,255,255,.75);--lg-cast:rgba(30,45,80,.22);--lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.22);--lg-edge-mid:rgba(176,196,225,.78);}
:root[data-theme="fluent"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="irvine"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="lg-white"]{--lg-fill:color-mix(in srgb,var(--surface) 40%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 84%,transparent);--lg-rim-top:rgba(255,255,255,1);--lg-rim-bot:rgba(15,20,30,.10);--lg-inner:rgba(255,255,255,.75);--lg-cast:rgba(30,45,80,.22);--lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.22);--lg-edge-mid:rgba(176,196,225,.78);}
:root[data-theme="lg-silver"]{--lg-fill:color-mix(in srgb,var(--surface) 40%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 84%,transparent);--lg-rim-top:rgba(255,255,255,1);--lg-rim-bot:rgba(15,20,30,.10);--lg-inner:rgba(255,255,255,.75);--lg-cast:rgba(30,45,80,.22);--lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.22);--lg-edge-mid:rgba(176,196,225,.78);}
:root[data-theme="lg-glacier"]{--lg-fill:color-mix(in srgb,var(--surface) 40%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 84%,transparent);--lg-rim-top:rgba(255,255,255,1);--lg-rim-bot:rgba(15,20,30,.10);--lg-inner:rgba(255,255,255,.75);--lg-cast:rgba(30,45,80,.22);--lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.22);--lg-edge-mid:rgba(176,196,225,.78);}
:root[data-theme="lg-night"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="lg-blue"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="lg-burgundy"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="lg-orange"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-blue"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-indigo"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-purple"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-pink"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-orange"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-green"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="aether-teal"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-clear"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-blue"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-purple"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-pink"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-orange"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-green"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}
:root[data-theme="liquid-teal"]{--lg-fill:color-mix(in srgb,var(--surface) 32%,transparent);--lg-fill-solid:color-mix(in srgb,var(--surface) 86%,transparent);--lg-rim-top:rgba(255,255,255,.55);--lg-rim-bot:rgba(255,255,255,.14);--lg-inner:rgba(255,255,255,.16);--lg-cast:rgba(10,12,24,.34);--lg-edge-hi:rgba(255,255,255,.92);--lg-edge-lo:rgba(255,255,255,.10);--lg-edge-mid:rgba(255,255,255,.52);}

/* ---- the title bar ----
   The rim only. The fill and the blur are the site header's own (siteheader.ts)
   and the same on every theme: a 32% fill here made these title bars read as
   missing next to every other page's frosted header. */
:root[data-theme="cupertino"] header,
:root[data-theme="fluent"] header,
:root[data-theme="irvine"] header,
:root[data-theme="lg-white"] header,
:root[data-theme="lg-silver"] header,
:root[data-theme="lg-glacier"] header,
:root[data-theme="lg-night"] header,
:root[data-theme="lg-blue"] header,
:root[data-theme="lg-burgundy"] header,
:root[data-theme="lg-orange"] header,
:root[data-theme="aether"] header,
:root[data-theme="aether-blue"] header,
:root[data-theme="aether-indigo"] header,
:root[data-theme="aether-purple"] header,
:root[data-theme="aether-pink"] header,
:root[data-theme="aether-orange"] header,
:root[data-theme="aether-green"] header,
:root[data-theme="aether-teal"] header,
:root[data-theme="liquid-clear"] header,
:root[data-theme="liquid-blue"] header,
:root[data-theme="liquid-purple"] header,
:root[data-theme="liquid-pink"] header,
:root[data-theme="liquid-orange"] header,
:root[data-theme="liquid-green"] header,
:root[data-theme="liquid-teal"] header{
  /* Transparent, not removed: the rim replaces the hairline visually, and the
     1px it occupied keeps this header the same height as every other page's. */
  border-bottom-color:transparent;
  box-shadow:inset 0 -1px 0 0 var(--lg-rim-bot), 0 10px 30px -22px var(--lg-cast);
}

/* ---- story cards ----
   The card is the lens; the body is the frosted part. Rounding the card and
   clipping it is what makes the artwork share the corner instead of poking a
   square through it. */
:root[data-theme="cupertino"] .card,
:root[data-theme="fluent"] .card,
:root[data-theme="irvine"] .card,
:root[data-theme="lg-white"] .card,
:root[data-theme="lg-silver"] .card,
:root[data-theme="lg-glacier"] .card,
:root[data-theme="lg-night"] .card,
:root[data-theme="lg-blue"] .card,
:root[data-theme="lg-burgundy"] .card,
:root[data-theme="lg-orange"] .card,
:root[data-theme="aether"] .card,
:root[data-theme="aether-blue"] .card,
:root[data-theme="aether-indigo"] .card,
:root[data-theme="aether-purple"] .card,
:root[data-theme="aether-pink"] .card,
:root[data-theme="aether-orange"] .card,
:root[data-theme="aether-green"] .card,
:root[data-theme="aether-teal"] .card,
:root[data-theme="liquid-clear"] .card,
:root[data-theme="liquid-blue"] .card,
:root[data-theme="liquid-purple"] .card,
:root[data-theme="liquid-pink"] .card,
:root[data-theme="liquid-orange"] .card,
:root[data-theme="liquid-green"] .card,
:root[data-theme="liquid-teal"] .card{
  border-radius:var(--lg-r,20px);
  overflow:hidden;
  border:0;
  position:relative;
  box-shadow:inset 0 2px 0 0 var(--lg-rim-top),
    inset 0 -1.5px 0 0 var(--lg-rim-bot),
    inset 0 0 40px -10px var(--lg-inner),
    0 18px 56px -18px var(--lg-cast);
}
:root[data-theme="cupertino"] .card::after,
:root[data-theme="fluent"] .card::after,
:root[data-theme="irvine"] .card::after,
:root[data-theme="lg-white"] .card::after,
:root[data-theme="lg-silver"] .card::after,
:root[data-theme="lg-glacier"] .card::after,
:root[data-theme="lg-night"] .card::after,
:root[data-theme="lg-blue"] .card::after,
:root[data-theme="lg-burgundy"] .card::after,
:root[data-theme="lg-orange"] .card::after,
:root[data-theme="aether"] .card::after,
:root[data-theme="aether-blue"] .card::after,
:root[data-theme="aether-indigo"] .card::after,
:root[data-theme="aether-purple"] .card::after,
:root[data-theme="aether-pink"] .card::after,
:root[data-theme="aether-orange"] .card::after,
:root[data-theme="aether-green"] .card::after,
:root[data-theme="aether-teal"] .card::after,
:root[data-theme="liquid-clear"] .card::after,
:root[data-theme="liquid-blue"] .card::after,
:root[data-theme="liquid-purple"] .card::after,
:root[data-theme="liquid-pink"] .card::after,
:root[data-theme="liquid-orange"] .card::after,
:root[data-theme="liquid-green"] .card::after,
:root[data-theme="liquid-teal"] .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:var(--lg-edge-w,2px);
  background:linear-gradient(135deg,var(--lg-edge-hi) 0%,var(--lg-edge-lo) 34%,
    var(--lg-edge-lo) 62%,var(--lg-edge-mid) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;}
/* THE ARTWORK STOPS BEING ITS OWN PLATE.
   .cardart carries a 12px radius and a 1px hairline of its own, which was right
   when the card was borderless: the art WAS the visible box. Inside a 20px
   rounded pane it becomes a second, tighter box nested in the first — the two
   curves leave a sliver of card showing in each top corner, and the hairline's
   vertical segments stop dead at the art's bottom edge as two short ticks.
   Zeroing both lets the card's own overflow:hidden do the clipping, so the
   artwork shares the pane's corner exactly instead of arguing with it.
   The TRACE RING IS UNTOUCHED: it is ::after with border-radius:inherit, so it
   follows the new shape, and it carries the vertical's colour, which is
   information rather than decoration. Same for the corner tick that anchors it. */
:root[data-theme="cupertino"] .cardart,
:root[data-theme="fluent"] .cardart,
:root[data-theme="irvine"] .cardart,
:root[data-theme="lg-white"] .cardart,
:root[data-theme="lg-silver"] .cardart,
:root[data-theme="lg-glacier"] .cardart,
:root[data-theme="lg-night"] .cardart,
:root[data-theme="lg-blue"] .cardart,
:root[data-theme="lg-burgundy"] .cardart,
:root[data-theme="lg-orange"] .cardart,
:root[data-theme="aether"] .cardart,
:root[data-theme="aether-blue"] .cardart,
:root[data-theme="aether-indigo"] .cardart,
:root[data-theme="aether-purple"] .cardart,
:root[data-theme="aether-pink"] .cardart,
:root[data-theme="aether-orange"] .cardart,
:root[data-theme="aether-green"] .cardart,
:root[data-theme="aether-teal"] .cardart,
:root[data-theme="liquid-clear"] .cardart,
:root[data-theme="liquid-blue"] .cardart,
:root[data-theme="liquid-purple"] .cardart,
:root[data-theme="liquid-pink"] .cardart,
:root[data-theme="liquid-orange"] .cardart,
:root[data-theme="liquid-green"] .cardart,
:root[data-theme="liquid-teal"] .cardart{
  /* !important, because the rule being overridden is itself !important — the
     trace system marks it so no theme can repaint the frame a colour that
     disagrees with the ring inside it. The colour is not being discarded here,
     it is being MOVED to the card below. */
  border:0 !important;
  border-radius:0;
  box-shadow:none;
  margin-bottom:0;
}
/* THE TRACE FRAME MOVES OUT TO THE CARD.
   It was a 1px border on .cardart in the vertical's colour, and it is
   information: the legend at the top of the feed maps those hues to sections,
   and .is-breaking deepens it. Deleting it to tidy the corners would have
   thrown away the signal to fix the shape. On the pane the card IS the object,
   so the frame belongs on its outline — one rounded rectangle carrying the
   colour, concentric with the specular rim rather than nested inside it. */
:root[data-theme="cupertino"] .card,
:root[data-theme="fluent"] .card,
:root[data-theme="irvine"] .card,
:root[data-theme="lg-white"] .card,
:root[data-theme="lg-silver"] .card,
:root[data-theme="lg-glacier"] .card,
:root[data-theme="lg-night"] .card,
:root[data-theme="lg-blue"] .card,
:root[data-theme="lg-burgundy"] .card,
:root[data-theme="lg-orange"] .card,
:root[data-theme="aether"] .card,
:root[data-theme="aether-blue"] .card,
:root[data-theme="aether-indigo"] .card,
:root[data-theme="aether-purple"] .card,
:root[data-theme="aether-pink"] .card,
:root[data-theme="aether-orange"] .card,
:root[data-theme="aether-green"] .card,
:root[data-theme="aether-teal"] .card,
:root[data-theme="liquid-clear"] .card,
:root[data-theme="liquid-blue"] .card,
:root[data-theme="liquid-purple"] .card,
:root[data-theme="liquid-pink"] .card,
:root[data-theme="liquid-orange"] .card,
:root[data-theme="liquid-green"] .card,
:root[data-theme="liquid-teal"] .card{
  border:1px solid color-mix(in srgb, var(--trace, var(--line)) 38%, transparent);
}
:root[data-theme="cupertino"] .card.is-breaking,
:root[data-theme="fluent"] .card.is-breaking,
:root[data-theme="irvine"] .card.is-breaking,
:root[data-theme="lg-white"] .card.is-breaking,
:root[data-theme="lg-silver"] .card.is-breaking,
:root[data-theme="lg-glacier"] .card.is-breaking,
:root[data-theme="lg-night"] .card.is-breaking,
:root[data-theme="lg-blue"] .card.is-breaking,
:root[data-theme="lg-burgundy"] .card.is-breaking,
:root[data-theme="lg-orange"] .card.is-breaking,
:root[data-theme="aether"] .card.is-breaking,
:root[data-theme="aether-blue"] .card.is-breaking,
:root[data-theme="aether-indigo"] .card.is-breaking,
:root[data-theme="aether-purple"] .card.is-breaking,
:root[data-theme="aether-pink"] .card.is-breaking,
:root[data-theme="aether-orange"] .card.is-breaking,
:root[data-theme="aether-green"] .card.is-breaking,
:root[data-theme="aether-teal"] .card.is-breaking,
:root[data-theme="liquid-clear"] .card.is-breaking,
:root[data-theme="liquid-blue"] .card.is-breaking,
:root[data-theme="liquid-purple"] .card.is-breaking,
:root[data-theme="liquid-pink"] .card.is-breaking,
:root[data-theme="liquid-orange"] .card.is-breaking,
:root[data-theme="liquid-green"] .card.is-breaking,
:root[data-theme="liquid-teal"] .card.is-breaking{
  border-color:color-mix(in srgb, var(--trace, var(--line)) 62%, transparent);
}
:root[data-theme="cupertino"] .cardbody,
:root[data-theme="fluent"] .cardbody,
:root[data-theme="irvine"] .cardbody,
:root[data-theme="lg-white"] .cardbody,
:root[data-theme="lg-silver"] .cardbody,
:root[data-theme="lg-glacier"] .cardbody,
:root[data-theme="lg-night"] .cardbody,
:root[data-theme="lg-blue"] .cardbody,
:root[data-theme="lg-burgundy"] .cardbody,
:root[data-theme="lg-orange"] .cardbody,
:root[data-theme="aether"] .cardbody,
:root[data-theme="aether-blue"] .cardbody,
:root[data-theme="aether-indigo"] .cardbody,
:root[data-theme="aether-purple"] .cardbody,
:root[data-theme="aether-pink"] .cardbody,
:root[data-theme="aether-orange"] .cardbody,
:root[data-theme="aether-green"] .cardbody,
:root[data-theme="aether-teal"] .cardbody,
:root[data-theme="liquid-clear"] .cardbody,
:root[data-theme="liquid-blue"] .cardbody,
:root[data-theme="liquid-purple"] .cardbody,
:root[data-theme="liquid-pink"] .cardbody,
:root[data-theme="liquid-orange"] .cardbody,
:root[data-theme="liquid-green"] .cardbody,
:root[data-theme="liquid-teal"] .cardbody{
  background:var(--lg-fill-solid);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);
  backdrop-filter:blur(16px) saturate(1.7);
  /* PADDING IS NOT OPTIONAL ONCE THE CARD HAS AN EDGE.
     The card was borderless, so its text sat flush at inset 0 and looked
     deliberate. Wrapping it in a rounded pane without adding room ran every
     headline and summary into the rim, and clipped them at the corners where
     the radius cuts in. The pane created the constraint; the pane pays for it. */
  padding:14px 17px 16px;
}

/* ---- the story page ---- */
:root[data-theme="cupertino"] .readout,
:root[data-theme="fluent"] .readout,
:root[data-theme="irvine"] .readout,
:root[data-theme="lg-white"] .readout,
:root[data-theme="lg-silver"] .readout,
:root[data-theme="lg-glacier"] .readout,
:root[data-theme="lg-night"] .readout,
:root[data-theme="lg-blue"] .readout,
:root[data-theme="lg-burgundy"] .readout,
:root[data-theme="lg-orange"] .readout,
:root[data-theme="aether"] .readout,
:root[data-theme="aether-blue"] .readout,
:root[data-theme="aether-indigo"] .readout,
:root[data-theme="aether-purple"] .readout,
:root[data-theme="aether-pink"] .readout,
:root[data-theme="aether-orange"] .readout,
:root[data-theme="aether-green"] .readout,
:root[data-theme="aether-teal"] .readout,
:root[data-theme="liquid-clear"] .readout,
:root[data-theme="liquid-blue"] .readout,
:root[data-theme="liquid-purple"] .readout,
:root[data-theme="liquid-pink"] .readout,
:root[data-theme="liquid-orange"] .readout,
:root[data-theme="liquid-green"] .readout,
:root[data-theme="liquid-teal"] .readout,
:root[data-theme="cupertino"] .timeline,
:root[data-theme="fluent"] .timeline,
:root[data-theme="irvine"] .timeline,
:root[data-theme="lg-white"] .timeline,
:root[data-theme="lg-silver"] .timeline,
:root[data-theme="lg-glacier"] .timeline,
:root[data-theme="lg-night"] .timeline,
:root[data-theme="lg-blue"] .timeline,
:root[data-theme="lg-burgundy"] .timeline,
:root[data-theme="lg-orange"] .timeline,
:root[data-theme="aether"] .timeline,
:root[data-theme="aether-blue"] .timeline,
:root[data-theme="aether-indigo"] .timeline,
:root[data-theme="aether-purple"] .timeline,
:root[data-theme="aether-pink"] .timeline,
:root[data-theme="aether-orange"] .timeline,
:root[data-theme="aether-green"] .timeline,
:root[data-theme="aether-teal"] .timeline,
:root[data-theme="liquid-clear"] .timeline,
:root[data-theme="liquid-blue"] .timeline,
:root[data-theme="liquid-purple"] .timeline,
:root[data-theme="liquid-pink"] .timeline,
:root[data-theme="liquid-orange"] .timeline,
:root[data-theme="liquid-green"] .timeline,
:root[data-theme="liquid-teal"] .timeline,
:root[data-theme="cupertino"] .genbody,
:root[data-theme="fluent"] .genbody,
:root[data-theme="irvine"] .genbody,
:root[data-theme="lg-white"] .genbody,
:root[data-theme="lg-silver"] .genbody,
:root[data-theme="lg-glacier"] .genbody,
:root[data-theme="lg-night"] .genbody,
:root[data-theme="lg-blue"] .genbody,
:root[data-theme="lg-burgundy"] .genbody,
:root[data-theme="lg-orange"] .genbody,
:root[data-theme="aether"] .genbody,
:root[data-theme="aether-blue"] .genbody,
:root[data-theme="aether-indigo"] .genbody,
:root[data-theme="aether-purple"] .genbody,
:root[data-theme="aether-pink"] .genbody,
:root[data-theme="aether-orange"] .genbody,
:root[data-theme="aether-green"] .genbody,
:root[data-theme="aether-teal"] .genbody,
:root[data-theme="liquid-clear"] .genbody,
:root[data-theme="liquid-blue"] .genbody,
:root[data-theme="liquid-purple"] .genbody,
:root[data-theme="liquid-pink"] .genbody,
:root[data-theme="liquid-orange"] .genbody,
:root[data-theme="liquid-green"] .genbody,
:root[data-theme="liquid-teal"] .genbody,
:root[data-theme="cupertino"] .gradebox,
:root[data-theme="fluent"] .gradebox,
:root[data-theme="irvine"] .gradebox,
:root[data-theme="lg-white"] .gradebox,
:root[data-theme="lg-silver"] .gradebox,
:root[data-theme="lg-glacier"] .gradebox,
:root[data-theme="lg-night"] .gradebox,
:root[data-theme="lg-blue"] .gradebox,
:root[data-theme="lg-burgundy"] .gradebox,
:root[data-theme="lg-orange"] .gradebox,
:root[data-theme="aether"] .gradebox,
:root[data-theme="aether-blue"] .gradebox,
:root[data-theme="aether-indigo"] .gradebox,
:root[data-theme="aether-purple"] .gradebox,
:root[data-theme="aether-pink"] .gradebox,
:root[data-theme="aether-orange"] .gradebox,
:root[data-theme="aether-green"] .gradebox,
:root[data-theme="aether-teal"] .gradebox,
:root[data-theme="liquid-clear"] .gradebox,
:root[data-theme="liquid-blue"] .gradebox,
:root[data-theme="liquid-purple"] .gradebox,
:root[data-theme="liquid-pink"] .gradebox,
:root[data-theme="liquid-orange"] .gradebox,
:root[data-theme="liquid-green"] .gradebox,
:root[data-theme="liquid-teal"] .gradebox,
:root[data-theme="cupertino"] .disclosure,
:root[data-theme="fluent"] .disclosure,
:root[data-theme="irvine"] .disclosure,
:root[data-theme="lg-white"] .disclosure,
:root[data-theme="lg-silver"] .disclosure,
:root[data-theme="lg-glacier"] .disclosure,
:root[data-theme="lg-night"] .disclosure,
:root[data-theme="lg-blue"] .disclosure,
:root[data-theme="lg-burgundy"] .disclosure,
:root[data-theme="lg-orange"] .disclosure,
:root[data-theme="aether"] .disclosure,
:root[data-theme="aether-blue"] .disclosure,
:root[data-theme="aether-indigo"] .disclosure,
:root[data-theme="aether-purple"] .disclosure,
:root[data-theme="aether-pink"] .disclosure,
:root[data-theme="aether-orange"] .disclosure,
:root[data-theme="aether-green"] .disclosure,
:root[data-theme="aether-teal"] .disclosure,
:root[data-theme="liquid-clear"] .disclosure,
:root[data-theme="liquid-blue"] .disclosure,
:root[data-theme="liquid-purple"] .disclosure,
:root[data-theme="liquid-pink"] .disclosure,
:root[data-theme="liquid-orange"] .disclosure,
:root[data-theme="liquid-green"] .disclosure,
:root[data-theme="liquid-teal"] .disclosure{
  position:relative;
  border-radius:var(--lg-r,22px);
  background:var(--lg-fill-solid);
  -webkit-backdrop-filter:blur(30px) saturate(1.9);
  backdrop-filter:blur(30px) saturate(1.9);
  box-shadow:inset 0 2px 0 0 var(--lg-rim-top),
    inset 0 -1.5px 0 0 var(--lg-rim-bot),
    inset 0 0 40px -10px var(--lg-inner),
    0 18px 56px -18px var(--lg-cast);
  padding:22px 26px;
  border:0;
}
:root[data-theme="cupertino"] .readout::after,
:root[data-theme="fluent"] .readout::after,
:root[data-theme="irvine"] .readout::after,
:root[data-theme="lg-white"] .readout::after,
:root[data-theme="lg-silver"] .readout::after,
:root[data-theme="lg-glacier"] .readout::after,
:root[data-theme="lg-night"] .readout::after,
:root[data-theme="lg-blue"] .readout::after,
:root[data-theme="lg-burgundy"] .readout::after,
:root[data-theme="lg-orange"] .readout::after,
:root[data-theme="aether"] .readout::after,
:root[data-theme="aether-blue"] .readout::after,
:root[data-theme="aether-indigo"] .readout::after,
:root[data-theme="aether-purple"] .readout::after,
:root[data-theme="aether-pink"] .readout::after,
:root[data-theme="aether-orange"] .readout::after,
:root[data-theme="aether-green"] .readout::after,
:root[data-theme="aether-teal"] .readout::after,
:root[data-theme="liquid-clear"] .readout::after,
:root[data-theme="liquid-blue"] .readout::after,
:root[data-theme="liquid-purple"] .readout::after,
:root[data-theme="liquid-pink"] .readout::after,
:root[data-theme="liquid-orange"] .readout::after,
:root[data-theme="liquid-green"] .readout::after,
:root[data-theme="liquid-teal"] .readout::after,
:root[data-theme="cupertino"] .timeline::after,
:root[data-theme="fluent"] .timeline::after,
:root[data-theme="irvine"] .timeline::after,
:root[data-theme="lg-white"] .timeline::after,
:root[data-theme="lg-silver"] .timeline::after,
:root[data-theme="lg-glacier"] .timeline::after,
:root[data-theme="lg-night"] .timeline::after,
:root[data-theme="lg-blue"] .timeline::after,
:root[data-theme="lg-burgundy"] .timeline::after,
:root[data-theme="lg-orange"] .timeline::after,
:root[data-theme="aether"] .timeline::after,
:root[data-theme="aether-blue"] .timeline::after,
:root[data-theme="aether-indigo"] .timeline::after,
:root[data-theme="aether-purple"] .timeline::after,
:root[data-theme="aether-pink"] .timeline::after,
:root[data-theme="aether-orange"] .timeline::after,
:root[data-theme="aether-green"] .timeline::after,
:root[data-theme="aether-teal"] .timeline::after,
:root[data-theme="liquid-clear"] .timeline::after,
:root[data-theme="liquid-blue"] .timeline::after,
:root[data-theme="liquid-purple"] .timeline::after,
:root[data-theme="liquid-pink"] .timeline::after,
:root[data-theme="liquid-orange"] .timeline::after,
:root[data-theme="liquid-green"] .timeline::after,
:root[data-theme="liquid-teal"] .timeline::after,
:root[data-theme="cupertino"] .genbody::after,
:root[data-theme="fluent"] .genbody::after,
:root[data-theme="irvine"] .genbody::after,
:root[data-theme="lg-white"] .genbody::after,
:root[data-theme="lg-silver"] .genbody::after,
:root[data-theme="lg-glacier"] .genbody::after,
:root[data-theme="lg-night"] .genbody::after,
:root[data-theme="lg-blue"] .genbody::after,
:root[data-theme="lg-burgundy"] .genbody::after,
:root[data-theme="lg-orange"] .genbody::after,
:root[data-theme="aether"] .genbody::after,
:root[data-theme="aether-blue"] .genbody::after,
:root[data-theme="aether-indigo"] .genbody::after,
:root[data-theme="aether-purple"] .genbody::after,
:root[data-theme="aether-pink"] .genbody::after,
:root[data-theme="aether-orange"] .genbody::after,
:root[data-theme="aether-green"] .genbody::after,
:root[data-theme="aether-teal"] .genbody::after,
:root[data-theme="liquid-clear"] .genbody::after,
:root[data-theme="liquid-blue"] .genbody::after,
:root[data-theme="liquid-purple"] .genbody::after,
:root[data-theme="liquid-pink"] .genbody::after,
:root[data-theme="liquid-orange"] .genbody::after,
:root[data-theme="liquid-green"] .genbody::after,
:root[data-theme="liquid-teal"] .genbody::after,
:root[data-theme="cupertino"] .gradebox::after,
:root[data-theme="fluent"] .gradebox::after,
:root[data-theme="irvine"] .gradebox::after,
:root[data-theme="lg-white"] .gradebox::after,
:root[data-theme="lg-silver"] .gradebox::after,
:root[data-theme="lg-glacier"] .gradebox::after,
:root[data-theme="lg-night"] .gradebox::after,
:root[data-theme="lg-blue"] .gradebox::after,
:root[data-theme="lg-burgundy"] .gradebox::after,
:root[data-theme="lg-orange"] .gradebox::after,
:root[data-theme="aether"] .gradebox::after,
:root[data-theme="aether-blue"] .gradebox::after,
:root[data-theme="aether-indigo"] .gradebox::after,
:root[data-theme="aether-purple"] .gradebox::after,
:root[data-theme="aether-pink"] .gradebox::after,
:root[data-theme="aether-orange"] .gradebox::after,
:root[data-theme="aether-green"] .gradebox::after,
:root[data-theme="aether-teal"] .gradebox::after,
:root[data-theme="liquid-clear"] .gradebox::after,
:root[data-theme="liquid-blue"] .gradebox::after,
:root[data-theme="liquid-purple"] .gradebox::after,
:root[data-theme="liquid-pink"] .gradebox::after,
:root[data-theme="liquid-orange"] .gradebox::after,
:root[data-theme="liquid-green"] .gradebox::after,
:root[data-theme="liquid-teal"] .gradebox::after,
:root[data-theme="cupertino"] .disclosure::after,
:root[data-theme="fluent"] .disclosure::after,
:root[data-theme="irvine"] .disclosure::after,
:root[data-theme="lg-white"] .disclosure::after,
:root[data-theme="lg-silver"] .disclosure::after,
:root[data-theme="lg-glacier"] .disclosure::after,
:root[data-theme="lg-night"] .disclosure::after,
:root[data-theme="lg-blue"] .disclosure::after,
:root[data-theme="lg-burgundy"] .disclosure::after,
:root[data-theme="lg-orange"] .disclosure::after,
:root[data-theme="aether"] .disclosure::after,
:root[data-theme="aether-blue"] .disclosure::after,
:root[data-theme="aether-indigo"] .disclosure::after,
:root[data-theme="aether-purple"] .disclosure::after,
:root[data-theme="aether-pink"] .disclosure::after,
:root[data-theme="aether-orange"] .disclosure::after,
:root[data-theme="aether-green"] .disclosure::after,
:root[data-theme="aether-teal"] .disclosure::after,
:root[data-theme="liquid-clear"] .disclosure::after,
:root[data-theme="liquid-blue"] .disclosure::after,
:root[data-theme="liquid-purple"] .disclosure::after,
:root[data-theme="liquid-pink"] .disclosure::after,
:root[data-theme="liquid-orange"] .disclosure::after,
:root[data-theme="liquid-green"] .disclosure::after,
:root[data-theme="liquid-teal"] .disclosure::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:var(--lg-edge-w,2px);
  background:linear-gradient(135deg,var(--lg-edge-hi) 0%,var(--lg-edge-lo) 34%,
    var(--lg-edge-lo) 62%,var(--lg-edge-mid) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;}
/* The grade box keeps its severity stripe: it is the one border on the page
   carrying information rather than shape, and the pane must not eat it. */
:root[data-theme="cupertino"] .gradebox,
:root[data-theme="fluent"] .gradebox,
:root[data-theme="irvine"] .gradebox,
:root[data-theme="lg-white"] .gradebox,
:root[data-theme="lg-silver"] .gradebox,
:root[data-theme="lg-glacier"] .gradebox,
:root[data-theme="lg-night"] .gradebox,
:root[data-theme="lg-blue"] .gradebox,
:root[data-theme="lg-burgundy"] .gradebox,
:root[data-theme="lg-orange"] .gradebox,
:root[data-theme="aether"] .gradebox,
:root[data-theme="aether-blue"] .gradebox,
:root[data-theme="aether-indigo"] .gradebox,
:root[data-theme="aether-purple"] .gradebox,
:root[data-theme="aether-pink"] .gradebox,
:root[data-theme="aether-orange"] .gradebox,
:root[data-theme="aether-green"] .gradebox,
:root[data-theme="aether-teal"] .gradebox,
:root[data-theme="liquid-clear"] .gradebox,
:root[data-theme="liquid-blue"] .gradebox,
:root[data-theme="liquid-purple"] .gradebox,
:root[data-theme="liquid-pink"] .gradebox,
:root[data-theme="liquid-orange"] .gradebox,
:root[data-theme="liquid-green"] .gradebox,
:root[data-theme="liquid-teal"] .gradebox{border-left:3px solid var(--sev-3)}

/* ---- the same ways off ---- */
@media (prefers-reduced-transparency: reduce){
  :root[data-theme="cupertino"] header,
:root[data-theme="fluent"] header,
:root[data-theme="irvine"] header,
:root[data-theme="lg-white"] header,
:root[data-theme="lg-silver"] header,
:root[data-theme="lg-glacier"] header,
:root[data-theme="lg-night"] header,
:root[data-theme="lg-blue"] header,
:root[data-theme="lg-burgundy"] header,
:root[data-theme="lg-orange"] header,
:root[data-theme="aether"] header,
:root[data-theme="aether-blue"] header,
:root[data-theme="aether-indigo"] header,
:root[data-theme="aether-purple"] header,
:root[data-theme="aether-pink"] header,
:root[data-theme="aether-orange"] header,
:root[data-theme="aether-green"] header,
:root[data-theme="aether-teal"] header,
:root[data-theme="liquid-clear"] header,
:root[data-theme="liquid-blue"] header,
:root[data-theme="liquid-purple"] header,
:root[data-theme="liquid-pink"] header,
:root[data-theme="liquid-orange"] header,
:root[data-theme="liquid-green"] header,
:root[data-theme="liquid-teal"] header,:root[data-theme="cupertino"] .card,
:root[data-theme="fluent"] .card,
:root[data-theme="irvine"] .card,
:root[data-theme="lg-white"] .card,
:root[data-theme="lg-silver"] .card,
:root[data-theme="lg-glacier"] .card,
:root[data-theme="lg-night"] .card,
:root[data-theme="lg-blue"] .card,
:root[data-theme="lg-burgundy"] .card,
:root[data-theme="lg-orange"] .card,
:root[data-theme="aether"] .card,
:root[data-theme="aether-blue"] .card,
:root[data-theme="aether-indigo"] .card,
:root[data-theme="aether-purple"] .card,
:root[data-theme="aether-pink"] .card,
:root[data-theme="aether-orange"] .card,
:root[data-theme="aether-green"] .card,
:root[data-theme="aether-teal"] .card,
:root[data-theme="liquid-clear"] .card,
:root[data-theme="liquid-blue"] .card,
:root[data-theme="liquid-purple"] .card,
:root[data-theme="liquid-pink"] .card,
:root[data-theme="liquid-orange"] .card,
:root[data-theme="liquid-green"] .card,
:root[data-theme="liquid-teal"] .card,:root[data-theme="cupertino"] .cardbody,
:root[data-theme="fluent"] .cardbody,
:root[data-theme="irvine"] .cardbody,
:root[data-theme="lg-white"] .cardbody,
:root[data-theme="lg-silver"] .cardbody,
:root[data-theme="lg-glacier"] .cardbody,
:root[data-theme="lg-night"] .cardbody,
:root[data-theme="lg-blue"] .cardbody,
:root[data-theme="lg-burgundy"] .cardbody,
:root[data-theme="lg-orange"] .cardbody,
:root[data-theme="aether"] .cardbody,
:root[data-theme="aether-blue"] .cardbody,
:root[data-theme="aether-indigo"] .cardbody,
:root[data-theme="aether-purple"] .cardbody,
:root[data-theme="aether-pink"] .cardbody,
:root[data-theme="aether-orange"] .cardbody,
:root[data-theme="aether-green"] .cardbody,
:root[data-theme="aether-teal"] .cardbody,
:root[data-theme="liquid-clear"] .cardbody,
:root[data-theme="liquid-blue"] .cardbody,
:root[data-theme="liquid-purple"] .cardbody,
:root[data-theme="liquid-pink"] .cardbody,
:root[data-theme="liquid-orange"] .cardbody,
:root[data-theme="liquid-green"] .cardbody,
:root[data-theme="liquid-teal"] .cardbody,:root[data-theme="cupertino"] .readout,
:root[data-theme="fluent"] .readout,
:root[data-theme="irvine"] .readout,
:root[data-theme="lg-white"] .readout,
:root[data-theme="lg-silver"] .readout,
:root[data-theme="lg-glacier"] .readout,
:root[data-theme="lg-night"] .readout,
:root[data-theme="lg-blue"] .readout,
:root[data-theme="lg-burgundy"] .readout,
:root[data-theme="lg-orange"] .readout,
:root[data-theme="aether"] .readout,
:root[data-theme="aether-blue"] .readout,
:root[data-theme="aether-indigo"] .readout,
:root[data-theme="aether-purple"] .readout,
:root[data-theme="aether-pink"] .readout,
:root[data-theme="aether-orange"] .readout,
:root[data-theme="aether-green"] .readout,
:root[data-theme="aether-teal"] .readout,
:root[data-theme="liquid-clear"] .readout,
:root[data-theme="liquid-blue"] .readout,
:root[data-theme="liquid-purple"] .readout,
:root[data-theme="liquid-pink"] .readout,
:root[data-theme="liquid-orange"] .readout,
:root[data-theme="liquid-green"] .readout,
:root[data-theme="liquid-teal"] .readout,
  :root[data-theme="cupertino"] .timeline,
:root[data-theme="fluent"] .timeline,
:root[data-theme="irvine"] .timeline,
:root[data-theme="lg-white"] .timeline,
:root[data-theme="lg-silver"] .timeline,
:root[data-theme="lg-glacier"] .timeline,
:root[data-theme="lg-night"] .timeline,
:root[data-theme="lg-blue"] .timeline,
:root[data-theme="lg-burgundy"] .timeline,
:root[data-theme="lg-orange"] .timeline,
:root[data-theme="aether"] .timeline,
:root[data-theme="aether-blue"] .timeline,
:root[data-theme="aether-indigo"] .timeline,
:root[data-theme="aether-purple"] .timeline,
:root[data-theme="aether-pink"] .timeline,
:root[data-theme="aether-orange"] .timeline,
:root[data-theme="aether-green"] .timeline,
:root[data-theme="aether-teal"] .timeline,
:root[data-theme="liquid-clear"] .timeline,
:root[data-theme="liquid-blue"] .timeline,
:root[data-theme="liquid-purple"] .timeline,
:root[data-theme="liquid-pink"] .timeline,
:root[data-theme="liquid-orange"] .timeline,
:root[data-theme="liquid-green"] .timeline,
:root[data-theme="liquid-teal"] .timeline,:root[data-theme="cupertino"] .genbody,
:root[data-theme="fluent"] .genbody,
:root[data-theme="irvine"] .genbody,
:root[data-theme="lg-white"] .genbody,
:root[data-theme="lg-silver"] .genbody,
:root[data-theme="lg-glacier"] .genbody,
:root[data-theme="lg-night"] .genbody,
:root[data-theme="lg-blue"] .genbody,
:root[data-theme="lg-burgundy"] .genbody,
:root[data-theme="lg-orange"] .genbody,
:root[data-theme="aether"] .genbody,
:root[data-theme="aether-blue"] .genbody,
:root[data-theme="aether-indigo"] .genbody,
:root[data-theme="aether-purple"] .genbody,
:root[data-theme="aether-pink"] .genbody,
:root[data-theme="aether-orange"] .genbody,
:root[data-theme="aether-green"] .genbody,
:root[data-theme="aether-teal"] .genbody,
:root[data-theme="liquid-clear"] .genbody,
:root[data-theme="liquid-blue"] .genbody,
:root[data-theme="liquid-purple"] .genbody,
:root[data-theme="liquid-pink"] .genbody,
:root[data-theme="liquid-orange"] .genbody,
:root[data-theme="liquid-green"] .genbody,
:root[data-theme="liquid-teal"] .genbody,:root[data-theme="cupertino"] .gradebox,
:root[data-theme="fluent"] .gradebox,
:root[data-theme="irvine"] .gradebox,
:root[data-theme="lg-white"] .gradebox,
:root[data-theme="lg-silver"] .gradebox,
:root[data-theme="lg-glacier"] .gradebox,
:root[data-theme="lg-night"] .gradebox,
:root[data-theme="lg-blue"] .gradebox,
:root[data-theme="lg-burgundy"] .gradebox,
:root[data-theme="lg-orange"] .gradebox,
:root[data-theme="aether"] .gradebox,
:root[data-theme="aether-blue"] .gradebox,
:root[data-theme="aether-indigo"] .gradebox,
:root[data-theme="aether-purple"] .gradebox,
:root[data-theme="aether-pink"] .gradebox,
:root[data-theme="aether-orange"] .gradebox,
:root[data-theme="aether-green"] .gradebox,
:root[data-theme="aether-teal"] .gradebox,
:root[data-theme="liquid-clear"] .gradebox,
:root[data-theme="liquid-blue"] .gradebox,
:root[data-theme="liquid-purple"] .gradebox,
:root[data-theme="liquid-pink"] .gradebox,
:root[data-theme="liquid-orange"] .gradebox,
:root[data-theme="liquid-green"] .gradebox,
:root[data-theme="liquid-teal"] .gradebox,:root[data-theme="cupertino"] .disclosure,
:root[data-theme="fluent"] .disclosure,
:root[data-theme="irvine"] .disclosure,
:root[data-theme="lg-white"] .disclosure,
:root[data-theme="lg-silver"] .disclosure,
:root[data-theme="lg-glacier"] .disclosure,
:root[data-theme="lg-night"] .disclosure,
:root[data-theme="lg-blue"] .disclosure,
:root[data-theme="lg-burgundy"] .disclosure,
:root[data-theme="lg-orange"] .disclosure,
:root[data-theme="aether"] .disclosure,
:root[data-theme="aether-blue"] .disclosure,
:root[data-theme="aether-indigo"] .disclosure,
:root[data-theme="aether-purple"] .disclosure,
:root[data-theme="aether-pink"] .disclosure,
:root[data-theme="aether-orange"] .disclosure,
:root[data-theme="aether-green"] .disclosure,
:root[data-theme="aether-teal"] .disclosure,
:root[data-theme="liquid-clear"] .disclosure,
:root[data-theme="liquid-blue"] .disclosure,
:root[data-theme="liquid-purple"] .disclosure,
:root[data-theme="liquid-pink"] .disclosure,
:root[data-theme="liquid-orange"] .disclosure,
:root[data-theme="liquid-green"] .disclosure,
:root[data-theme="liquid-teal"] .disclosure{
    background:var(--surface) !important;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;border:1px solid var(--line2);
  }
  :root[data-theme="cupertino"] .card::after,
:root[data-theme="fluent"] .card::after,
:root[data-theme="irvine"] .card::after,
:root[data-theme="lg-white"] .card::after,
:root[data-theme="lg-silver"] .card::after,
:root[data-theme="lg-glacier"] .card::after,
:root[data-theme="lg-night"] .card::after,
:root[data-theme="lg-blue"] .card::after,
:root[data-theme="lg-burgundy"] .card::after,
:root[data-theme="lg-orange"] .card::after,
:root[data-theme="aether"] .card::after,
:root[data-theme="aether-blue"] .card::after,
:root[data-theme="aether-indigo"] .card::after,
:root[data-theme="aether-purple"] .card::after,
:root[data-theme="aether-pink"] .card::after,
:root[data-theme="aether-orange"] .card::after,
:root[data-theme="aether-green"] .card::after,
:root[data-theme="aether-teal"] .card::after,
:root[data-theme="liquid-clear"] .card::after,
:root[data-theme="liquid-blue"] .card::after,
:root[data-theme="liquid-purple"] .card::after,
:root[data-theme="liquid-pink"] .card::after,
:root[data-theme="liquid-orange"] .card::after,
:root[data-theme="liquid-green"] .card::after,
:root[data-theme="liquid-teal"] .card::after,:root[data-theme="cupertino"] .readout::after,
:root[data-theme="fluent"] .readout::after,
:root[data-theme="irvine"] .readout::after,
:root[data-theme="lg-white"] .readout::after,
:root[data-theme="lg-silver"] .readout::after,
:root[data-theme="lg-glacier"] .readout::after,
:root[data-theme="lg-night"] .readout::after,
:root[data-theme="lg-blue"] .readout::after,
:root[data-theme="lg-burgundy"] .readout::after,
:root[data-theme="lg-orange"] .readout::after,
:root[data-theme="aether"] .readout::after,
:root[data-theme="aether-blue"] .readout::after,
:root[data-theme="aether-indigo"] .readout::after,
:root[data-theme="aether-purple"] .readout::after,
:root[data-theme="aether-pink"] .readout::after,
:root[data-theme="aether-orange"] .readout::after,
:root[data-theme="aether-green"] .readout::after,
:root[data-theme="aether-teal"] .readout::after,
:root[data-theme="liquid-clear"] .readout::after,
:root[data-theme="liquid-blue"] .readout::after,
:root[data-theme="liquid-purple"] .readout::after,
:root[data-theme="liquid-pink"] .readout::after,
:root[data-theme="liquid-orange"] .readout::after,
:root[data-theme="liquid-green"] .readout::after,
:root[data-theme="liquid-teal"] .readout::after,:root[data-theme="cupertino"] .timeline::after,
:root[data-theme="fluent"] .timeline::after,
:root[data-theme="irvine"] .timeline::after,
:root[data-theme="lg-white"] .timeline::after,
:root[data-theme="lg-silver"] .timeline::after,
:root[data-theme="lg-glacier"] .timeline::after,
:root[data-theme="lg-night"] .timeline::after,
:root[data-theme="lg-blue"] .timeline::after,
:root[data-theme="lg-burgundy"] .timeline::after,
:root[data-theme="lg-orange"] .timeline::after,
:root[data-theme="aether"] .timeline::after,
:root[data-theme="aether-blue"] .timeline::after,
:root[data-theme="aether-indigo"] .timeline::after,
:root[data-theme="aether-purple"] .timeline::after,
:root[data-theme="aether-pink"] .timeline::after,
:root[data-theme="aether-orange"] .timeline::after,
:root[data-theme="aether-green"] .timeline::after,
:root[data-theme="aether-teal"] .timeline::after,
:root[data-theme="liquid-clear"] .timeline::after,
:root[data-theme="liquid-blue"] .timeline::after,
:root[data-theme="liquid-purple"] .timeline::after,
:root[data-theme="liquid-pink"] .timeline::after,
:root[data-theme="liquid-orange"] .timeline::after,
:root[data-theme="liquid-green"] .timeline::after,
:root[data-theme="liquid-teal"] .timeline::after,
  :root[data-theme="cupertino"] .genbody::after,
:root[data-theme="fluent"] .genbody::after,
:root[data-theme="irvine"] .genbody::after,
:root[data-theme="lg-white"] .genbody::after,
:root[data-theme="lg-silver"] .genbody::after,
:root[data-theme="lg-glacier"] .genbody::after,
:root[data-theme="lg-night"] .genbody::after,
:root[data-theme="lg-blue"] .genbody::after,
:root[data-theme="lg-burgundy"] .genbody::after,
:root[data-theme="lg-orange"] .genbody::after,
:root[data-theme="aether"] .genbody::after,
:root[data-theme="aether-blue"] .genbody::after,
:root[data-theme="aether-indigo"] .genbody::after,
:root[data-theme="aether-purple"] .genbody::after,
:root[data-theme="aether-pink"] .genbody::after,
:root[data-theme="aether-orange"] .genbody::after,
:root[data-theme="aether-green"] .genbody::after,
:root[data-theme="aether-teal"] .genbody::after,
:root[data-theme="liquid-clear"] .genbody::after,
:root[data-theme="liquid-blue"] .genbody::after,
:root[data-theme="liquid-purple"] .genbody::after,
:root[data-theme="liquid-pink"] .genbody::after,
:root[data-theme="liquid-orange"] .genbody::after,
:root[data-theme="liquid-green"] .genbody::after,
:root[data-theme="liquid-teal"] .genbody::after,:root[data-theme="cupertino"] .gradebox::after,
:root[data-theme="fluent"] .gradebox::after,
:root[data-theme="irvine"] .gradebox::after,
:root[data-theme="lg-white"] .gradebox::after,
:root[data-theme="lg-silver"] .gradebox::after,
:root[data-theme="lg-glacier"] .gradebox::after,
:root[data-theme="lg-night"] .gradebox::after,
:root[data-theme="lg-blue"] .gradebox::after,
:root[data-theme="lg-burgundy"] .gradebox::after,
:root[data-theme="lg-orange"] .gradebox::after,
:root[data-theme="aether"] .gradebox::after,
:root[data-theme="aether-blue"] .gradebox::after,
:root[data-theme="aether-indigo"] .gradebox::after,
:root[data-theme="aether-purple"] .gradebox::after,
:root[data-theme="aether-pink"] .gradebox::after,
:root[data-theme="aether-orange"] .gradebox::after,
:root[data-theme="aether-green"] .gradebox::after,
:root[data-theme="aether-teal"] .gradebox::after,
:root[data-theme="liquid-clear"] .gradebox::after,
:root[data-theme="liquid-blue"] .gradebox::after,
:root[data-theme="liquid-purple"] .gradebox::after,
:root[data-theme="liquid-pink"] .gradebox::after,
:root[data-theme="liquid-orange"] .gradebox::after,
:root[data-theme="liquid-green"] .gradebox::after,
:root[data-theme="liquid-teal"] .gradebox::after,:root[data-theme="cupertino"] .disclosure::after,
:root[data-theme="fluent"] .disclosure::after,
:root[data-theme="irvine"] .disclosure::after,
:root[data-theme="lg-white"] .disclosure::after,
:root[data-theme="lg-silver"] .disclosure::after,
:root[data-theme="lg-glacier"] .disclosure::after,
:root[data-theme="lg-night"] .disclosure::after,
:root[data-theme="lg-blue"] .disclosure::after,
:root[data-theme="lg-burgundy"] .disclosure::after,
:root[data-theme="lg-orange"] .disclosure::after,
:root[data-theme="aether"] .disclosure::after,
:root[data-theme="aether-blue"] .disclosure::after,
:root[data-theme="aether-indigo"] .disclosure::after,
:root[data-theme="aether-purple"] .disclosure::after,
:root[data-theme="aether-pink"] .disclosure::after,
:root[data-theme="aether-orange"] .disclosure::after,
:root[data-theme="aether-green"] .disclosure::after,
:root[data-theme="aether-teal"] .disclosure::after,
:root[data-theme="liquid-clear"] .disclosure::after,
:root[data-theme="liquid-blue"] .disclosure::after,
:root[data-theme="liquid-purple"] .disclosure::after,
:root[data-theme="liquid-pink"] .disclosure::after,
:root[data-theme="liquid-orange"] .disclosure::after,
:root[data-theme="liquid-green"] .disclosure::after,
:root[data-theme="liquid-teal"] .disclosure::after{display:none}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root[data-theme="cupertino"] header,
:root[data-theme="fluent"] header,
:root[data-theme="irvine"] header,
:root[data-theme="lg-white"] header,
:root[data-theme="lg-silver"] header,
:root[data-theme="lg-glacier"] header,
:root[data-theme="lg-night"] header,
:root[data-theme="lg-blue"] header,
:root[data-theme="lg-burgundy"] header,
:root[data-theme="lg-orange"] header,
:root[data-theme="aether"] header,
:root[data-theme="aether-blue"] header,
:root[data-theme="aether-indigo"] header,
:root[data-theme="aether-purple"] header,
:root[data-theme="aether-pink"] header,
:root[data-theme="aether-orange"] header,
:root[data-theme="aether-green"] header,
:root[data-theme="aether-teal"] header,
:root[data-theme="liquid-clear"] header,
:root[data-theme="liquid-blue"] header,
:root[data-theme="liquid-purple"] header,
:root[data-theme="liquid-pink"] header,
:root[data-theme="liquid-orange"] header,
:root[data-theme="liquid-green"] header,
:root[data-theme="liquid-teal"] header,:root[data-theme="cupertino"] .cardbody,
:root[data-theme="fluent"] .cardbody,
:root[data-theme="irvine"] .cardbody,
:root[data-theme="lg-white"] .cardbody,
:root[data-theme="lg-silver"] .cardbody,
:root[data-theme="lg-glacier"] .cardbody,
:root[data-theme="lg-night"] .cardbody,
:root[data-theme="lg-blue"] .cardbody,
:root[data-theme="lg-burgundy"] .cardbody,
:root[data-theme="lg-orange"] .cardbody,
:root[data-theme="aether"] .cardbody,
:root[data-theme="aether-blue"] .cardbody,
:root[data-theme="aether-indigo"] .cardbody,
:root[data-theme="aether-purple"] .cardbody,
:root[data-theme="aether-pink"] .cardbody,
:root[data-theme="aether-orange"] .cardbody,
:root[data-theme="aether-green"] .cardbody,
:root[data-theme="aether-teal"] .cardbody,
:root[data-theme="liquid-clear"] .cardbody,
:root[data-theme="liquid-blue"] .cardbody,
:root[data-theme="liquid-purple"] .cardbody,
:root[data-theme="liquid-pink"] .cardbody,
:root[data-theme="liquid-orange"] .cardbody,
:root[data-theme="liquid-green"] .cardbody,
:root[data-theme="liquid-teal"] .cardbody,:root[data-theme="cupertino"] .readout,
:root[data-theme="fluent"] .readout,
:root[data-theme="irvine"] .readout,
:root[data-theme="lg-white"] .readout,
:root[data-theme="lg-silver"] .readout,
:root[data-theme="lg-glacier"] .readout,
:root[data-theme="lg-night"] .readout,
:root[data-theme="lg-blue"] .readout,
:root[data-theme="lg-burgundy"] .readout,
:root[data-theme="lg-orange"] .readout,
:root[data-theme="aether"] .readout,
:root[data-theme="aether-blue"] .readout,
:root[data-theme="aether-indigo"] .readout,
:root[data-theme="aether-purple"] .readout,
:root[data-theme="aether-pink"] .readout,
:root[data-theme="aether-orange"] .readout,
:root[data-theme="aether-green"] .readout,
:root[data-theme="aether-teal"] .readout,
:root[data-theme="liquid-clear"] .readout,
:root[data-theme="liquid-blue"] .readout,
:root[data-theme="liquid-purple"] .readout,
:root[data-theme="liquid-pink"] .readout,
:root[data-theme="liquid-orange"] .readout,
:root[data-theme="liquid-green"] .readout,
:root[data-theme="liquid-teal"] .readout,:root[data-theme="cupertino"] .timeline,
:root[data-theme="fluent"] .timeline,
:root[data-theme="irvine"] .timeline,
:root[data-theme="lg-white"] .timeline,
:root[data-theme="lg-silver"] .timeline,
:root[data-theme="lg-glacier"] .timeline,
:root[data-theme="lg-night"] .timeline,
:root[data-theme="lg-blue"] .timeline,
:root[data-theme="lg-burgundy"] .timeline,
:root[data-theme="lg-orange"] .timeline,
:root[data-theme="aether"] .timeline,
:root[data-theme="aether-blue"] .timeline,
:root[data-theme="aether-indigo"] .timeline,
:root[data-theme="aether-purple"] .timeline,
:root[data-theme="aether-pink"] .timeline,
:root[data-theme="aether-orange"] .timeline,
:root[data-theme="aether-green"] .timeline,
:root[data-theme="aether-teal"] .timeline,
:root[data-theme="liquid-clear"] .timeline,
:root[data-theme="liquid-blue"] .timeline,
:root[data-theme="liquid-purple"] .timeline,
:root[data-theme="liquid-pink"] .timeline,
:root[data-theme="liquid-orange"] .timeline,
:root[data-theme="liquid-green"] .timeline,
:root[data-theme="liquid-teal"] .timeline,
  :root[data-theme="cupertino"] .genbody,
:root[data-theme="fluent"] .genbody,
:root[data-theme="irvine"] .genbody,
:root[data-theme="lg-white"] .genbody,
:root[data-theme="lg-silver"] .genbody,
:root[data-theme="lg-glacier"] .genbody,
:root[data-theme="lg-night"] .genbody,
:root[data-theme="lg-blue"] .genbody,
:root[data-theme="lg-burgundy"] .genbody,
:root[data-theme="lg-orange"] .genbody,
:root[data-theme="aether"] .genbody,
:root[data-theme="aether-blue"] .genbody,
:root[data-theme="aether-indigo"] .genbody,
:root[data-theme="aether-purple"] .genbody,
:root[data-theme="aether-pink"] .genbody,
:root[data-theme="aether-orange"] .genbody,
:root[data-theme="aether-green"] .genbody,
:root[data-theme="aether-teal"] .genbody,
:root[data-theme="liquid-clear"] .genbody,
:root[data-theme="liquid-blue"] .genbody,
:root[data-theme="liquid-purple"] .genbody,
:root[data-theme="liquid-pink"] .genbody,
:root[data-theme="liquid-orange"] .genbody,
:root[data-theme="liquid-green"] .genbody,
:root[data-theme="liquid-teal"] .genbody,:root[data-theme="cupertino"] .gradebox,
:root[data-theme="fluent"] .gradebox,
:root[data-theme="irvine"] .gradebox,
:root[data-theme="lg-white"] .gradebox,
:root[data-theme="lg-silver"] .gradebox,
:root[data-theme="lg-glacier"] .gradebox,
:root[data-theme="lg-night"] .gradebox,
:root[data-theme="lg-blue"] .gradebox,
:root[data-theme="lg-burgundy"] .gradebox,
:root[data-theme="lg-orange"] .gradebox,
:root[data-theme="aether"] .gradebox,
:root[data-theme="aether-blue"] .gradebox,
:root[data-theme="aether-indigo"] .gradebox,
:root[data-theme="aether-purple"] .gradebox,
:root[data-theme="aether-pink"] .gradebox,
:root[data-theme="aether-orange"] .gradebox,
:root[data-theme="aether-green"] .gradebox,
:root[data-theme="aether-teal"] .gradebox,
:root[data-theme="liquid-clear"] .gradebox,
:root[data-theme="liquid-blue"] .gradebox,
:root[data-theme="liquid-purple"] .gradebox,
:root[data-theme="liquid-pink"] .gradebox,
:root[data-theme="liquid-orange"] .gradebox,
:root[data-theme="liquid-green"] .gradebox,
:root[data-theme="liquid-teal"] .gradebox,:root[data-theme="cupertino"] .disclosure,
:root[data-theme="fluent"] .disclosure,
:root[data-theme="irvine"] .disclosure,
:root[data-theme="lg-white"] .disclosure,
:root[data-theme="lg-silver"] .disclosure,
:root[data-theme="lg-glacier"] .disclosure,
:root[data-theme="lg-night"] .disclosure,
:root[data-theme="lg-blue"] .disclosure,
:root[data-theme="lg-burgundy"] .disclosure,
:root[data-theme="lg-orange"] .disclosure,
:root[data-theme="aether"] .disclosure,
:root[data-theme="aether-blue"] .disclosure,
:root[data-theme="aether-indigo"] .disclosure,
:root[data-theme="aether-purple"] .disclosure,
:root[data-theme="aether-pink"] .disclosure,
:root[data-theme="aether-orange"] .disclosure,
:root[data-theme="aether-green"] .disclosure,
:root[data-theme="aether-teal"] .disclosure,
:root[data-theme="liquid-clear"] .disclosure,
:root[data-theme="liquid-blue"] .disclosure,
:root[data-theme="liquid-purple"] .disclosure,
:root[data-theme="liquid-pink"] .disclosure,
:root[data-theme="liquid-orange"] .disclosure,
:root[data-theme="liquid-green"] .disclosure,
:root[data-theme="liquid-teal"] .disclosure{background:var(--surface)}
}

:root[data-theme="aether"],
:root[data-theme="aether-blue"],
:root[data-theme="aether-indigo"],
:root[data-theme="aether-purple"],
:root[data-theme="aether-pink"],
:root[data-theme="aether-orange"],
:root[data-theme="aether-green"],
:root[data-theme="aether-teal"]{
  --lg-r:12px;
  --lg-edge-w:1px;
  /* Aether's liquid-glass fill is white at 5%; the solid mix stays readable. */
  --lg-fill:rgba(255,255,255,.05);
  --lg-fill-solid:color-mix(in srgb,var(--surface) 80%,transparent);
  /* The edge: Aether's card border is a flat 1px white at 10%. A faint gradient
     around that value keeps the pane shape without the iPhone-glass specular. */
  --lg-edge-hi:rgba(255,255,255,.18);
  --lg-edge-lo:rgba(255,255,255,.07);
  --lg-edge-mid:rgba(255,255,255,.12);
  /* Thickness, much quieter: the inner glow is the liquid-glass signature, at a
     strength that survives on a card rather than on a demo tile. */
  --lg-rim-top:rgba(255,255,255,.10);
  --lg-rim-bot:rgba(255,255,255,.03);
  --lg-inner:rgba(255,255,255,.08);
  --lg-cast:rgba(0,0,0,.55);
  /* The chrome material (glass.ts) at Aether's numbers too. */
  --glass-blur:12px;
  --glass-sat:1.25;
  --glass-edge-soft:rgba(255,255,255,.10);
}
:root[data-theme="aether"] .cardbody,
:root[data-theme="aether-blue"] .cardbody,
:root[data-theme="aether-indigo"] .cardbody,
:root[data-theme="aether-purple"] .cardbody,
:root[data-theme="aether-pink"] .cardbody,
:root[data-theme="aether-orange"] .cardbody,
:root[data-theme="aether-green"] .cardbody,
:root[data-theme="aether-teal"] .cardbody,
:root[data-theme="aether"] .readout,
:root[data-theme="aether-blue"] .readout,
:root[data-theme="aether-indigo"] .readout,
:root[data-theme="aether-purple"] .readout,
:root[data-theme="aether-pink"] .readout,
:root[data-theme="aether-orange"] .readout,
:root[data-theme="aether-green"] .readout,
:root[data-theme="aether-teal"] .readout,
:root[data-theme="aether"] .timeline,
:root[data-theme="aether-blue"] .timeline,
:root[data-theme="aether-indigo"] .timeline,
:root[data-theme="aether-purple"] .timeline,
:root[data-theme="aether-pink"] .timeline,
:root[data-theme="aether-orange"] .timeline,
:root[data-theme="aether-green"] .timeline,
:root[data-theme="aether-teal"] .timeline,
:root[data-theme="aether"] .genbody,
:root[data-theme="aether-blue"] .genbody,
:root[data-theme="aether-indigo"] .genbody,
:root[data-theme="aether-purple"] .genbody,
:root[data-theme="aether-pink"] .genbody,
:root[data-theme="aether-orange"] .genbody,
:root[data-theme="aether-green"] .genbody,
:root[data-theme="aether-teal"] .genbody,
:root[data-theme="aether"] .gradebox,
:root[data-theme="aether-blue"] .gradebox,
:root[data-theme="aether-indigo"] .gradebox,
:root[data-theme="aether-purple"] .gradebox,
:root[data-theme="aether-pink"] .gradebox,
:root[data-theme="aether-orange"] .gradebox,
:root[data-theme="aether-green"] .gradebox,
:root[data-theme="aether-teal"] .gradebox,
:root[data-theme="aether"] .disclosure,
:root[data-theme="aether-blue"] .disclosure,
:root[data-theme="aether-indigo"] .disclosure,
:root[data-theme="aether-purple"] .disclosure,
:root[data-theme="aether-pink"] .disclosure,
:root[data-theme="aether-orange"] .disclosure,
:root[data-theme="aether-green"] .disclosure,
:root[data-theme="aether-teal"] .disclosure{
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  backdrop-filter:blur(12px) saturate(1.25);
}

/* ---- clear: the theme default for Liquid themes ---- */
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]){--lq-chrome:rgba(255,255,255,.05);--lq-card:rgba(6,6,10,.34);--lq-blur:4px;--lq-sat:1.7;
  --lq-tshadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.25);--lq-edge:rgba(255,255,255,.26);
  --lg-r:22px;--lg-edge-w:1.5px;
  --lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.08);--lg-edge-mid:rgba(255,255,255,.6);
  --lg-rim-top:rgba(255,255,255,.7);--lg-rim-bot:rgba(255,255,255,.24);--lg-inner:rgba(255,255,255,.28);--lg-cast:rgba(0,0,0,.55);}
/* ---- clear: chosen in Settings, for any glass theme ---- */
:root[data-glass="clear"]:is([data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]){--lq-chrome:rgba(255,255,255,.05);--lq-card:rgba(6,6,10,.34);--lq-blur:4px;--lq-sat:1.7;
  --lq-tshadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.25);--lq-edge:rgba(255,255,255,.26);
  --lg-r:22px;--lg-edge-w:1.5px;
  --lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.08);--lg-edge-mid:rgba(255,255,255,.6);
  --lg-rim-top:rgba(255,255,255,.7);--lg-rim-bot:rgba(255,255,255,.24);--lg-inner:rgba(255,255,255,.28);--lg-cast:rgba(0,0,0,.55);}
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"]){--lq-chrome:rgba(255,255,255,.26);--lq-card:rgba(255,255,255,.42);--lq-blur:4px;--lq-sat:1.5;
  --lq-tshadow:0 1px 1px rgba(255,255,255,.7);--lq-edge:rgba(255,255,255,.75);
  --lg-r:22px;--lg-edge-w:1.5px;
  --lg-edge-hi:rgba(255,255,255,1);--lg-edge-lo:rgba(255,255,255,.3);--lg-edge-mid:rgba(176,196,225,.85);
  --lg-rim-top:rgba(255,255,255,1);--lg-rim-bot:rgba(15,20,30,.12);--lg-inner:rgba(255,255,255,.8);--lg-cast:rgba(30,45,80,.22);}

/* ---- coloured glass: the pane carries the colour ---- */
:root:is([data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]){
  --lq-chrome:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.05));
  --lq-card:color-mix(in srgb,var(--accent) 12%,rgba(6,6,10,.34));
  --lq-edge:color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.3));
  --lg-edge-mid:color-mix(in srgb,var(--accent) 55%,#fff);
  --lg-inner:color-mix(in srgb,var(--accent) 38%,transparent);
}
/* ---- frosted: chosen in Settings ---- */
:root[data-glass="frost"]:is([data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]){--lq-chrome:color-mix(in srgb,var(--surface) 60%,transparent);--lq-card:color-mix(in srgb,var(--surface) 72%,transparent);
  --lq-blur:28px;--lq-sat:1.8;--lq-tshadow:none;--lq-edge:rgba(255,255,255,.16);
  --lg-edge-hi:rgba(255,255,255,.75);--lg-edge-lo:rgba(255,255,255,.1);--lg-edge-mid:rgba(255,255,255,.42);
  --lg-rim-top:rgba(255,255,255,.45);--lg-rim-bot:rgba(255,255,255,.12);--lg-inner:rgba(255,255,255,.14);}
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"]){--lq-chrome:color-mix(in srgb,var(--surface) 62%,transparent);--lq-card:color-mix(in srgb,var(--surface) 78%,transparent);
  --lq-blur:28px;--lq-sat:1.6;--lq-tshadow:none;--lq-edge:rgba(255,255,255,.8);}


/* ---- the material, driven by the variables above ---- */
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .cardbody,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody{
  background:var(--lq-card);
  -webkit-backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat));
  text-shadow:var(--lq-tshadow);
}
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) header.site,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ocon,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .subtabs,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ticker,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .fresh,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .controlbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .briefbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .gfbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar{
  background:var(--lq-chrome);
  -webkit-backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat));
  backdrop-filter:blur(var(--lq-blur)) saturate(var(--lq-sat));
  text-shadow:var(--lq-tshadow);
}
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ocon,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .subtabs,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ticker,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .fresh,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh{
  border-color:var(--lq-edge);
  box-shadow:inset 0 1px 0 0 var(--lg-rim-top),inset 0 -1px 0 0 var(--lg-rim-bot),0 12px 30px -20px var(--lg-cast);
}
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .card,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .card,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .card{
  box-shadow:inset 0 2px 0 0 var(--lg-rim-top),inset 0 -1.5px 0 0 var(--lg-rim-bot),
    inset 0 0 28px -6px var(--lg-inner),0 18px 44px -20px var(--lg-cast);
}
/* Small controls become small lenses. */
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .octrig,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .pill,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .octrig,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .pill,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .octrig,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .pill{
  background:var(--lq-chrome);border-color:var(--lq-edge);
}

/* ---- off: solid panels, and now the cards and story blocks too ---- */
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .card,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .readout,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .timeline,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .genbody,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gradebox,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .disclosure{
  background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;text-shadow:none;
}
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .card::after,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .readout::after,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .timeline::after,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .genbody::after,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gradebox::after,
:root[data-glass="off"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .disclosure::after{display:none}

/* ---- the ways off still win ---- */
@media (prefers-reduced-transparency: reduce){
  :root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .cardbody,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) header.site,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ocon,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .subtabs,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ticker,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .fresh,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .controlbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .briefbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .gfbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar{
    background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;text-shadow:none!important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .cardbody,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) header.site,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ocon,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .subtabs,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .ticker,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .fresh,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .controlbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .briefbar,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-glass="frost"]):not([data-glass="off"]) .gfbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="clear"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .cardbody,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) header.site,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ocon,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .subtabs,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .ticker,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .fresh,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .controlbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .briefbar,
:root[data-glass="frost"]:is([data-theme="cupertino"],[data-theme="fluent"],[data-theme="irvine"],[data-theme="lg-white"],[data-theme="lg-silver"],[data-theme="lg-glacier"],[data-theme="lg-night"],[data-theme="lg-blue"],[data-theme="lg-burgundy"],[data-theme="lg-orange"],[data-theme="aether"],[data-theme="aether-blue"],[data-theme="aether-indigo"],[data-theme="aether-purple"],[data-theme="aether-pink"],[data-theme="aether-orange"],[data-theme="aether-green"],[data-theme="aether-teal"],[data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]) .gfbar{background:var(--surface)!important;text-shadow:none!important}
}

/* ---- backgrounds ---- */
:root[data-backdrop="neon"]{--aurora:radial-gradient(70% 16% at 30% 22%, rgba(40,120,255,0.55), transparent 70%),
   radial-gradient(60% 12% at 72% 34%, rgba(255,128,32,0.5), transparent 70%),
   radial-gradient(80% 14% at 45% 58%, rgba(236,64,196,0.45), transparent 72%),
   radial-gradient(66% 13% at 60% 78%, rgba(120,72,255,0.48), transparent 72%),
   radial-gradient(40% 10% at 20% 88%, rgba(40,210,255,0.4), transparent 70%),
   conic-gradient(from 210deg at 58% 48%, transparent 0deg, rgba(40,120,255,0.3) 40deg, transparent 80deg, rgba(255,128,32,0.26) 150deg, transparent 190deg, rgba(236,64,196,0.26) 250deg, transparent 290deg, rgba(120,72,255,0.24) 330deg, transparent 360deg)}
:root[data-backdrop="neon"] body::after{filter:blur(14px) saturate(1.35)}
:root[data-backdrop="aurora"]{--aurora:radial-gradient(90% 22% at 40% 20%, rgba(60,230,160,.40), transparent 72%),
   radial-gradient(80% 20% at 62% 36%, rgba(40,200,220,.34), transparent 72%),
   radial-gradient(70% 26% at 30% 70%, rgba(130,80,255,.36), transparent 74%),
   radial-gradient(60% 30% at 80% 85%, rgba(60,120,255,.28), transparent 74%)}
:root[data-backdrop="aurora"] body::after{filter:blur(30px) saturate(1.3)}
:root[data-backdrop="sunset"]{--aurora:radial-gradient(70% 40% at 20% 15%, rgba(255,140,50,.46), transparent 70%),
   radial-gradient(60% 38% at 85% 30%, rgba(255,70,120,.40), transparent 72%),
   radial-gradient(70% 45% at 55% 85%, rgba(150,60,220,.40), transparent 74%)}
:root[data-backdrop="ocean"]{--aurora:radial-gradient(70% 40% at 15% 20%, rgba(20,110,255,.46), transparent 70%),
   radial-gradient(60% 40% at 85% 35%, rgba(0,200,230,.34), transparent 72%),
   radial-gradient(75% 45% at 50% 90%, rgba(60,60,200,.40), transparent 74%)}
:root[data-backdrop="mono"]{--aurora:radial-gradient(60% 40% at 20% 15%, rgba(255,255,255,.18), transparent 70%),
   radial-gradient(55% 38% at 85% 40%, rgba(180,190,210,.16), transparent 72%),
   radial-gradient(70% 45% at 45% 90%, rgba(255,255,255,.12), transparent 74%)}
:root[data-backdrop="none"] body::after{display:none}
/* The Liquid themes' own field is ribbons, and the site's default 52px field
   blur smears ribbons into blobs. Their own field gets the light blur; a
   background chosen in Settings keeps that background's blur. */
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"]):not([data-backdrop]) body::after,
:root:is([data-theme="liquid-clear"],[data-theme="liquid-blue"],[data-theme="liquid-purple"],[data-theme="liquid-pink"],[data-theme="liquid-orange"],[data-theme="liquid-green"],[data-theme="liquid-teal"])[data-backdrop="theme"] body::after{filter:blur(14px) saturate(1.35)}


/* ---- Microsoft: a tiled field of panes, plus the desktop bloom ---- */
body[data-brand="microsoft"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,120,212,.075) 0 108px,transparent 108px 124px),
    repeating-linear-gradient(90deg,rgba(0,120,212,.075) 0 108px,transparent 108px 124px);
  /* Masked to the top of the page so the pattern introduces the section and
     then gets out of the way of the reading column. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 620px);
  mask-image:linear-gradient(180deg,#000 0,transparent 620px);
}
body[data-brand="microsoft"]::after{
  content:"";position:fixed;top:-260px;right:-200px;width:900px;height:900px;
  z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(80,230,255,.14) 0%,rgba(0,120,212,.10) 38%,transparent 68%);
  filter:blur(30px);
}
body[data-brand] > *{position:relative;z-index:1}

/* ---- Blizzard: the deep-navy masthead band, and the blue bloom under it ----
   news.blizzard.com opens on a #001845 band that falls away into the page. This
   is that band as a gradient, and one soft bloom of the button blue. */
body[data-brand="blizzard"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,24,69,.88) 0,rgba(0,24,69,.34) 320px,transparent 620px);
}
body[data-brand="blizzard"]::after{
  content:"";position:fixed;top:-280px;left:-220px;width:880px;height:880px;
  z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(14,134,202,.20) 0%,rgba(14,134,202,.06) 42%,transparent 68%);
  filter:blur(28px);
}

/* ---- Apple: the lift ----
   The entire look is one shadow, and it is two shadows: a tight, nearly opaque
   one that reads as the card's edge, and a wide, very faint one that reads as
   the light in the room. A single shadow gives you a sticker; the pair is what
   makes a card look like it is sitting a millimetre off the page. */
body[data-brand="apple"] .card,
body[data-brand="apple"] .lead,
body[data-brand="apple"] .panel,
/* Launch Files use their own class names and would otherwise sit on this
   ground as flat bordered boxes -- the one Apple surface with no lift on it. */
body[data-brand="apple"] .lfc > a,
body[data-brand="apple"] .lf-fpi{
  box-shadow:0 1px 2px rgba(0,0,0,.045), 0 12px 34px -10px rgba(0,0,0,.09);
  border-color:transparent;
  transition:box-shadow .22s cubic-bezier(.28,.11,.32,1), transform .22s cubic-bezier(.28,.11,.32,1);
}
body[data-brand="apple"] .card:hover,
body[data-brand="apple"] .lead:hover,
body[data-brand="apple"] .lfc > a:hover{
  box-shadow:0 2px 5px rgba(0,0,0,.05), 0 22px 52px -14px rgba(0,0,0,.14);
  transform:translateY(-2px);
}
/* The fine-print cards are a READING surface, not a target -- they do not lift
   on hover, because nothing happens when you click one. */
body[data-brand="apple"] .lf-fpi{transform:none}
/* Apple's own alternating band. Sections of apple.com step between #fbfbfd and
   #f5f5f7, and without it a long light page reads as one undifferentiated
   sheet. */
body[data-brand="apple"] .grid{
  background:linear-gradient(180deg,transparent 0 40px,#f5f5f7 40px);
  border-radius:18px;padding:26px 22px 30px;margin-top:8px;
}
@media (prefers-reduced-motion:reduce){
  body[data-brand="apple"] .card,
  body[data-brand="apple"] .lead,
  body[data-brand="apple"] .lfc > a{transition:none}
  body[data-brand="apple"] .card:hover,
  body[data-brand="apple"] .lead:hover,
  body[data-brand="apple"] .lfc > a:hover{transform:none}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;
  /* Two of the three webfonts carry an optical-size axis, so small text thickens
     and display text refines on their own. It is a no-op on a face without the
     axis, which is every system stack, so it costs the other themes nothing. */
  font-optical-sizing:auto;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}



.wordmark{display:inline-flex;align-items:center;gap:9px;color:var(--fg)}
.ocmark{flex:0 0 auto;display:block;border:0;outline:0;background:none;overflow:visible}
.ocname{font:var(--display-weight) 25px/1 var(--font-display);letter-spacing:var(--display-spacing);
  text-transform:var(--display-transform)}
.ocname b{color:var(--accent);font-weight:inherit}
/* .news is a suffix, not part of the name — quieter and smaller so OVERCLOCK
   still reads as the brand rather than the whole string competing. */
.ocname i{font-style:normal;font-weight:500;font-size:.52em;color:var(--dimmer);
  letter-spacing:.02em;margin-left:1px;vertical-align:baseline}
.wordmark:hover .ocname i{color:var(--dim)}
@media(max-width:560px){.ocname{font-size:21px}}

/* ONE MATERIAL. The frosted glass the section pages already wore, now on every
   page and every theme: the theme's own surface at 80%, blurred and lifted.
   Liquid Glass and brand skins add their rim on top (panesCss) but no longer
   thin the fill, which is what made their title bars read as missing. */
header.site{position:relative;z-index:2;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}
/* ONE GEOMETRY. The top row is at least 62px on every page (REV's 46px plus the
   16px above him), so a page with fewer controls is not a shorter header. */
header.site .top{max-width:1180px;min-height:62px;margin:0 auto;padding:16px 26px 0;
  display:flex;align-items:center;gap:18px;box-sizing:border-box}
/* The lockup is REV, then the gauge mark, then the name. He is sized to overhang
   the cap height: at 34px he read as an icon rather than a character. */
header.site .wordmark{display:inline-flex;align-items:center}
header.site .revmast{display:block;width:46px;height:46px;margin-right:2px;flex:0 0 auto}
/* He is a status indicator, so the redlining state gets a heat halo. */
header.site .revmast[src$="rev-hot.svg"]{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--sev-1,#ff5a4d) 70%,transparent))}
header.site .htag{font:500 11px/1 var(--font-mono);color:var(--dimmer);letter-spacing:.14em;text-transform:uppercase}
header.site .tools{margin-left:auto;display:flex;align-items:center;gap:10px}

/* THE SECTION NAV WRAPS; IT NEVER SCROLLS. It used to be a sideways scroller
   with a JavaScript edge-fade, because with a tab per launch desk it ran to
   ~1009px. Eleven sections fit on one row at desktop widths, so where they do
   not fit they wrap, the same on every page: every section visible, no hidden
   overflow to signal, no script. */
header.site nav{max-width:1180px;margin:0 auto;padding:12px 26px 0;display:flex;flex-wrap:wrap;
  gap:2px 3px;box-sizing:border-box}
header.site nav a{position:relative;font:600 13px/1 var(--font-body);padding:11px 14px;color:var(--dim);
  border-bottom:2px solid transparent;white-space:nowrap;text-transform:var(--display-transform);letter-spacing:.01em}
/* The active tab wears its section's colour, the same hue the trace legend uses,
   falling back to the accent for "Top", which is every section at once. */
header.site nav a:hover{color:var(--nhue,var(--fg))}
header.site nav a.on{color:var(--fg);border-bottom-color:var(--nhue,var(--accent))}
header.site nav a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:2px;
  background:var(--nhue,var(--accent));filter:blur(3px);opacity:.55;pointer-events:none}

@media(max-width:820px){
  header.site .top,header.site nav{padding-left:20px;padding-right:20px}
  /* The tools wrap rather than push the page sideways: next to the wordmark at
     375px they overflowed and took every page's scroll width to 598px. */
  header.site .top{flex-wrap:wrap;row-gap:10px}
  header.site .tools{flex-wrap:wrap;justify-content:flex-end}
  /* 15px of vertical padding clears the 44px comfortable touch target, which
     matters once the nav has wrapped into rows under a thumb. */
  header.site nav a{padding-top:15px;padding-bottom:15px}
}

/* The ways off, as for every other piece of glass: the OS setting, the site's
   own glass preference, and browsers without backdrop-filter all get a solid
   surface rather than a see-through bar with no blur behind it. */
@media (prefers-reduced-transparency: reduce){
  header.site{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}
:root[data-glass="off"] header.site{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.site{background:var(--surface)}
}


.onair{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font:700 9.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:8px 11px;border-radius:var(--radius);
  border:1px solid transparent;white-space:nowrap;
  transition:color .18s ease,border-color .18s ease}
.onair:hover,.onair:focus-visible{color:#ff6a6a;border-color:rgba(255,60,60,.42)}
.onair:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.onair i{width:7px;height:7px;border-radius:50%;background:#ff2d2d;
  box-shadow:0 0 6px 1px rgba(255,45,45,.7), 0 0 14px 3px rgba(255,30,30,.28);
  animation:onair 2.4s ease-in-out infinite}
@keyframes onair{0%,100%{opacity:.32;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* Still lit, just not breathing — the lamp is the information, the throb is not. */
@media (prefers-reduced-motion:reduce){.onair i{animation:none;opacity:.95;transform:none}}


.ticker{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:0 14px;margin-bottom:20px;border:1px solid var(--line2);border-radius:var(--radius);
  background:var(--surface);overflow:hidden}
.tkhead{display:flex;align-items:center;gap:9px;padding:13px 0}
.tklabel{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.tkidx{font:600 10px/1 var(--font-mono);color:var(--dimmer);font-variant-numeric:tabular-nums}
.tkidx b{color:var(--dim);font-weight:600}

/* Fixed height with one slot visible; the rest are stacked and clipped. */
.tkstage{position:relative;height:46px;overflow:hidden}
.tkitem{position:absolute;inset:0;display:flex;align-items:center;gap:11px;
  opacity:0;transform:translateY(60%);pointer-events:none;
  /* Opacity resolves faster than the travel so the outgoing headline is gone
     before it is halfway out — otherwise two headlines read as overlapping. */
  transition:opacity .2s ease, transform .38s cubic-bezier(.2,.8,.3,1)}
.tkitem.on{opacity:1;transform:translateY(0);pointer-events:auto}
.tkitem.out{opacity:0;transform:translateY(-60%)}
.tkdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--trace,var(--accent));
  box-shadow:0 0 8px 0 var(--trace,var(--accent))}
.tkkick{font:700 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--trace,var(--accent));white-space:nowrap}
.tktitle{font:600 14px/1.35 var(--font-body);color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tkitem:hover .tktitle{color:var(--accent)}
.tkage{margin-left:auto;font:500 10px/1 var(--font-mono);color:var(--dimmer);white-space:nowrap}

.tkctl{display:flex;gap:3px}
.tkbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:transparent;color:var(--dim);border-radius:var(--radius);
  cursor:pointer;font:600 11px/1 var(--font-mono)}
.tkbtn:hover{color:var(--fg);border-color:var(--accent)}

.tkprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.tkprog i{display:block;height:100%;width:0;background:var(--accent);opacity:.75}
.ticker.paused .tkprog i{background:var(--dim)}

@media(max-width:640px){
  .ticker{grid-template-columns:1fr auto;gap:10px;padding:0 12px}
  .tkhead{grid-column:1 / -1;padding:11px 0 0}
  .tkstage{grid-column:1;height:42px}
  .tkkick,.tkage{display:none}
  .tktitle{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .tkitem{transition:none}
}


.livewrap{margin:6px 0 40px}
.lvhead{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;margin-bottom:6px}
.lvhead h2{margin:0 0 5px;font:var(--display-weight) clamp(19px,2.4vw,26px)/1.1 var(--font-display);
  letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.lvsub{margin:0;color:var(--dim);font-size:13.5px;max-width:62ch;line-height:1.5}
.lvsub b{color:var(--accent)}
.lvstamp{flex:0 0 auto;font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dimmer);border:1px solid var(--line2);border-radius:var(--radius);padding:7px 9px}
.lvwarn{margin:12px 0 20px;font:500 11px/1.5 var(--font-mono);color:var(--dimmer)}

.lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
/* .lvgrid sets display:grid, which beats the [hidden] attribute outright — the
   hidden boards would all render stacked without this. The global rule in
   themes.ts covers it, and this is restated locally because the failure is
   silent and this file is where someone would look. */
.lvgrid[hidden]{display:none!important}
.lvfind{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.lvfindq{flex:1 1 300px;min-width:200px;background:var(--surface);border:1px solid var(--line2);
  color:var(--fg);border-radius:var(--radius);padding:11px 13px;font:500 13px/1 var(--font-mono)}
.lvfindq:focus{border-color:var(--accent)}
.lvfindq:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lvfindq::placeholder{color:var(--dim)}
.lvfindgo{font:700 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:12px 16px;cursor:pointer;border:1px solid var(--accent);background:var(--accent);
  color:var(--accent-ink);border-radius:var(--radius)}
.lvfindgo:hover{filter:brightness(1.1)}
.lvfindmsg{font:500 12px/1.4 var(--font-mono);color:var(--dim)}
/* 16px so iOS does not zoom the page when the field takes focus. */
@media(max-width:640px){.lvfindq{font-size:16px}}
.lvlangs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.lvlang{font:600 11px/1 var(--font-mono);letter-spacing:.08em;padding:9px 12px;cursor:pointer;
  border:1px solid var(--line2);background:var(--surface);color:var(--dim);border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:7px;transition:color .16s ease,border-color .16s ease}
.lvlang:hover{color:var(--fg)}
.lvlang.on{color:var(--accent);border-color:var(--sel-line);background:var(--sel-bg);box-shadow:var(--sel-glow)}
.lvlangn{font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}
@media(max-width:640px){.lvlang{padding:11px 12px}}
.lvcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--surface);
  transition:border-color .2s ease, transform .2s ease}
.lvcard:hover{border-color:var(--lv);transform:translateY(-2px)}
.lvrank{position:absolute;top:8px;left:8px;z-index:3;min-width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);
  font:700 11px/1 var(--font-mono);color:var(--lv)}

.lvart{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--accent-soft)}
.lvart img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-filter)}
.lvnoart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
/* A red dot is the universal live affordance; the word alone reads as a label. */
.lvlive{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;
  padding:4px 7px;border-radius:var(--radius);background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(6px);font:700 9px/1 var(--font-mono);letter-spacing:.14em;color:#ff4d4d}
.lvlive::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff4d4d}
/* THE CHANNEL NAME, ON THE PICTURE.
   It was only in the byline under the card, which is the last thing read. On a
   wall of twenty thumbnails the channel is the fastest way to recognise
   something, so it goes on the art itself — same plate and baseline as the
   viewer count so the two read as one row rather than two decorations.
   Capped and ellipsised: a long name must not grow the badge across the frame
   or push into the viewer count. */
/* THE NAME IS THE POINT OF THE CARD, SO IT IS SIZED LIKE IT.
   It ran at 10px in the foreground colour — the same weight as the viewer count
   beside it — which made "who is this" exactly as prominent as "how many people
   are watching", and it is not. At 25px in the theme's accent the board can be
   read by name at a glance instead of by thumbnail, which is how anyone actually
   looks for a streamer they follow.
   The cap rises with the size: at 58% a name this large ellipsised almost every
   time, and a badge that always ends in a full stop identifies nobody. */
.lvwho{position:absolute;bottom:8px;left:8px;max-width:76%;padding:10px 17px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(6px);
  font:700 25px/1 var(--font-mono);letter-spacing:-.02em;color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvviewers{position:absolute;bottom:8px;right:8px;padding:4px 7px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(6px);
  font:700 10px/1 var(--font-mono);color:var(--fg)}

.lvbody{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px}
.lvtags{display:flex;gap:6px;flex-wrap:wrap}
.lvact{font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--lv)}
.lvflag{font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:var(--radius);padding:3px 5px}
.lvcard h3{margin:0;font:600 14px/1.35 var(--font-body);color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lvcard:hover h3{color:var(--lv)}
.lvmeta{font:500 11px/1.4 var(--font-mono);color:var(--dimmer)}
.lvmeta b{color:var(--dim);font-weight:600}
.lvsep{margin:0 5px;opacity:.5}

.lvhow{margin-top:26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:0 15px}
.lvhow summary{cursor:pointer;padding:13px 0;font:700 10px/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lvhow summary:hover{color:var(--accent)}
.lvhow p{margin:0 0 13px;color:var(--dim);font-size:13.5px;line-height:1.6;max-width:76ch}
.lvhow p b{color:var(--fg)}
.lvempty{padding:60px 0;color:var(--dim)}
.lvempty h2{margin:0 0 8px;font:var(--display-weight) 22px/1 var(--font-display);color:var(--fg)}

@media(max-width:640px){
  .lvhead{flex-direction:column;gap:10px}
  .lvgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.lvcard{transition:border-color .2s ease}.lvcard:hover{transform:none}}
:root[data-motion="off"] .lvcard:hover{transform:none}


/* NATIVE SELECT OPTIONS.
   A <select> renders its own control, but the OPEN dropdown is drawn by the
   operating system in a separate layer that does not inherit the page's
   background. Setting only color on the select therefore produced near-white
   text on the OS's white popup — invisible on every dark theme, which is nine
   of the ten reader themes.
   Options need their own explicit pair. Stated as real colours rather than
   transparency, because the popup has no backdrop to blend with. */
select option,
select optgroup{
  background:var(--surface);
  color:var(--fg);
}
/* Light themes get the same treatment for the same reason, inverted: a dark
   --fg on a dark OS popup under a system dark mode is the mirror failure. */
select{color:var(--fg);background-color:var(--surface)}
select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The material. Applied by class so it is opt-in per surface rather than a
   blanket rule that would catch reading surfaces too. */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-edge-soft);
  box-shadow:var(--glass-shadow);
  position:relative;
}
/* A one-pixel specular highlight along the top edge. This is the detail that
   separates "glass" from "semi-transparent box" — it implies a light source and
   therefore a surface with thickness. */
.glass::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--glass-edge),transparent);
}
.glass-strong{background:var(--glass-bg-strong)}

/* Chrome that adopts the material. Cards are deliberately absent. The header's
   own material lives in siteheader.ts, shared by every page on the site. */
.controlbar,.ticker,.fresh,.briefbar,.prefs,.subtabs,.lvhow{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color:var(--glass-edge-soft);
}
/* Small controls get a thinner blur: a heavy blur inside a 26px pill samples so
   little of the background that it only costs paint. */
.pill,.qbox,.tkbtn,.winbtn,.prefbtn,.lvmbtn,.sfil{
  -webkit-backdrop-filter:blur(8px) saturate(var(--glass-sat));
  backdrop-filter:blur(8px) saturate(var(--glass-sat));
}

/* ---- the three ways off ------------------------------------------------ */

/* 1. The OS accessibility setting. */
@media (prefers-reduced-transparency: reduce){
  .glass,.glass-strong,header,.controlbar,.ticker,.fresh,.briefbar,.prefs,.subtabs,.lvhow{
    background:var(--surface);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .glass::before{display:none}
  .pill,.qbox,.tkbtn,.winbtn,.prefbtn,.lvmbtn,.sfil{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* 2. The site preference. Same rules, driven by an attribute on the root. */
:root[data-glass="off"] .glass,
:root[data-glass="off"] .glass-strong,
:root[data-glass="off"] header,
:root[data-glass="off"] .controlbar,
:root[data-glass="off"] .ticker,
:root[data-glass="off"] .fresh,
:root[data-glass="off"] .briefbar,
:root[data-glass="off"] .prefs,
:root[data-glass="off"] .subtabs,
:root[data-glass="off"] .lvhow{
  background:var(--surface);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
:root[data-glass="off"] .glass::before{display:none}
:root[data-glass="off"] .pill,
:root[data-glass="off"] .qbox,
:root[data-glass="off"] .tkbtn,
:root[data-glass="off"] .winbtn,
:root[data-glass="off"] .prefbtn,
:root[data-glass="off"] .lvmbtn,
:root[data-glass="off"] .sfil{-webkit-backdrop-filter:none;backdrop-filter:none}

/* 3. No backdrop-filter support: fall back to a solid surface. A translucent
      panel with no blur behind it is less readable than either option. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass,.glass-strong,header,.controlbar,.ticker,.fresh,.briefbar,.prefs,.subtabs,.lvhow{
    background:var(--surface);
  }
}

/* Filtered out by the time window. The lead rotator is exempt — hiding a slide
   mid-rotation leaves a blank hero. */
.win-hidden:not(.lrslide):not(.lead){display:none !important}
#winnote{margin-left:10px;font:600 10px/1 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
/* The advisory line is data, not prose — set in mono so it reads as a field
   list, and in the severity colour the card already carries. */
.advline{margin:0;font:600 12px/1.5 var(--font-mono);letter-spacing:.01em;
  color:var(--trace,var(--dim))}

/* Fixed hues rather than theme tokens: this section IS the palette, and
   rendering the Leonida desk in Newsprint cream would defeat the point. */
.fthero{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:24px;
  padding:30px 26px 26px;color:#fff;isolation:isolate;
  background:var(--sky,linear-gradient(170deg,#2b0b45 0%,#7a1c6b 32%,#d8365f 58%,#f2703c 82%,#ffb547 100%))}
.ftsun{position:absolute;left:50%;top:34%;width:min(58vw,430px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:-2;
  background:radial-gradient(circle,color-mix(in srgb,var(--neon,#ffd76e) 55%,#fff) 0%,var(--chr,#ff8a3c) 46%,transparent 70%);
  /* The scanline band across the sun is the most recognisable single piece of
     the eighties-Miami vocabulary, and it is four repeating stops. */
  -webkit-mask-image:repeating-linear-gradient(#000 0 13px,transparent 13px 19px);
  mask-image:repeating-linear-gradient(#000 0 13px,transparent 13px 19px);
  opacity:.85}
.ftpalms{position:absolute;inset:auto 0 0 0;height:190px;z-index:-1;color:var(--ink,#1a0526);opacity:.9}
.ftpalms svg{width:100%;height:100%;display:block}

.fttop{display:flex;align-items:flex-start;gap:24px;justify-content:space-between;flex-wrap:wrap}
.ftkick{margin:0 0 6px;font:700 10px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--neon,#7df9ff);text-shadow:0 0 14px color-mix(in srgb,var(--neon,#7df9ff) 75%,transparent)}
.fttitle{margin:0 0 10px;font:900 clamp(38px,7vw,74px)/.92 var(--font-display);letter-spacing:-.03em;
  /* Chrome: a light-dark-light vertical ramp is what reads as polished metal at
     display sizes; the neon underglow does the rest. */
  background:linear-gradient(180deg,#fff 6%,color-mix(in srgb,var(--chr,#ff6ec4) 35%,#fff) 28%,var(--chr,#b06bd6) 52%,#fff 74%,var(--neon,#ffb547) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--ink,#3d0a52)) drop-shadow(0 0 22px color-mix(in srgb,var(--chr,#ff6ec4) 55%,transparent))}
.ftsub{margin:0;font-size:14px;color:rgba(255,255,255,.86);max-width:56ch}
.ftsub b{color:var(--neon,#7df9ff)}
.ftmeta{display:block;margin-top:7px;font:600 10px/1 var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
/* The other desks in the window. A row of chips rather than a sentence: it is a
   set of destinations, and a sentence made them read as prose to skim past. */
.ftalso{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.ftalso > span{font:700 9px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.ftalso a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--ink,#140422) 45%,transparent);border:1px solid rgba(255,255,255,.22);
  font:700 11px/1 var(--font-body);color:#fff}
.ftalso a:hover{border-color:var(--neon,#7df9ff);background:color-mix(in srgb,var(--ink,#140422) 72%,transparent)}
.ftalso a i{font:700 9px/1 var(--font-mono);letter-spacing:.1em;font-style:normal;color:var(--neon,#7df9ff)}

.ftclock{flex:0 0 auto;text-align:right;padding:13px 15px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--ink,#140422) 55%,transparent);border:1px solid color-mix(in srgb,var(--neon,#7df9ff) 40%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;user-select:none}
.ftclabel{display:block;font:700 9px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--neon,#7df9ff);margin-bottom:8px}
.ftcunits{display:flex;gap:11px}
.ftcunits span{display:flex;flex-direction:column;align-items:center;gap:3px}
.ftcunits b{font:800 26px/1 var(--font-mono);color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px color-mix(in srgb,var(--chr,#ff6ec4) 80%,transparent)}
.ftcunits i{font:600 8px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-style:normal}
/* The date is the fact; the countdown is the drama. It was set at 9px under the
   digits, which made the one piece of information a reader actually needs to
   remember the smallest thing in the block. Now it leads, at size, with a rule
   separating it from the ticking numbers. */
.ftcrow{display:flex;align-items:stretch;gap:15px}
.ftcdate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-right:15px;border-right:1px solid color-mix(in srgb,var(--neon,#7df9ff) 30%,transparent);line-height:1}
.ftcdate b{font:800 34px/1 var(--font-display);color:#fff;letter-spacing:-.02em;
  text-shadow:0 0 18px color-mix(in srgb,var(--chr,#ff6ec4) 85%,transparent)}
.ftcdate span{font:800 13px/1 var(--font-mono);letter-spacing:.2em;color:var(--neon,#7df9ff);margin-top:3px;
  text-shadow:0 0 12px color-mix(in srgb,var(--neon,#7df9ff) 70%,transparent)}
.ftcdate i{font:600 10px/1 var(--font-mono);letter-spacing:.16em;font-style:normal;
  color:rgba(255,255,255,.6);margin-top:4px}
.ftclock.shipped .ftcunits b{color:var(--neon,#7df9ff)}

/* Cards borrow the neon edge and nothing else — a hot pink card is unreadable
   at length, and the feed still has to be a feed. */
.featured .card:hover .cardart,.featured .lead:hover .leadart{border-color:var(--chr,#ff6ec4)}
.featured .kicker{color:var(--chr,#ff6ec4)}

/* [hidden] IS ONLY A DEFAULT. Any display rule overrides it, so this flex
   container ignored its own hidden attribute and rendered as a small empty
   bordered box on every launch desk. Every element in this file that toggles
   via hidden needs the explicit override. */
.ftcheat[hidden]{display:none !important}
.ftcheat{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:13px 22px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--ink,#140422) 92%,transparent);border:1px solid var(--neon,#7df9ff);
  box-shadow:0 0 34px -6px color-mix(in srgb,var(--neon,#7df9ff) 70%,transparent);
  animation:ftpop .34s cubic-bezier(.2,1.4,.4,1)}
.ftcname{font:800 15px/1 var(--font-mono);letter-spacing:.16em;color:var(--neon,#7df9ff);text-transform:uppercase}
.ftcwhat{font:600 10px/1 var(--font-mono);letter-spacing:.1em;color:rgba(255,255,255,.72)}
@keyframes ftpop{from{opacity:0;transform:translate(-50%,14px) scale(.94)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}

@keyframes ftshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
body.ft-shake{animation:ftshake .5s}
body.ft-glow .fthero{box-shadow:0 0 70px -8px var(--neon,#7df9ff)}
@keyframes ftfly{to{transform:translateY(-118vh) rotate(12deg);opacity:0}}
.ft-jet{position:fixed;left:var(--x);bottom:-70px;font-size:26px;z-index:59;pointer-events:none;
  animation:ftfly 2.4s cubic-bezier(.4,0,.7,1) forwards}

@media(max-width:640px){
  .fttop{flex-direction:column;gap:16px}
  .ftclock{text-align:left;align-self:stretch}
  .ftcunits{justify-content:space-between}
}
@media (prefers-reduced-motion: reduce){
  body.ft-shake,.ftcheat{animation:none}
  .ft-jet{animation-duration:6s}
}
:root[data-motion="off"] body.ft-shake,
:root[data-motion="off"] .ftcheat{animation:none}


.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
  opacity:var(--atmos-opacity,1)}

/* NEBULA — four soft clouds in the theme accent and its neighbours, drifting on
   a very long loop. Percent-positioned radial gradients on one element: a single
   composited layer, no repaint. */
.neb{position:absolute;inset:-20%;
  background:
    radial-gradient(38% 32% at 18% 22%, color-mix(in srgb,var(--accent) 22%,transparent) 0%, transparent 68%),
    radial-gradient(30% 26% at 78% 34%, color-mix(in srgb,var(--sev-4,#4a7fd4) 20%,transparent) 0%, transparent 66%),
    radial-gradient(44% 36% at 62% 78%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 70%),
    radial-gradient(26% 22% at 30% 86%, color-mix(in srgb,var(--sev-2,#d4643a) 12%,transparent) 0%, transparent 64%);
  opacity:.5;filter:blur(38px);
  animation:nebdrift 96s ease-in-out infinite alternate;
  will-change:transform}
@keyframes nebdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.6%,0) scale(1.06)}
  100%{transform:translate3d(2%,-1.4%,0) scale(1.02)}
}

/* STARFIELD — three tiled gradient layers at different scales, so the pattern
   does not read as a grid. Static: twinkling costs a repaint per frame and buys
   nothing behind text. */
.stars{position:absolute;inset:0;opacity:.5;display:var(--stars-display,block);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 8%,  #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 43% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 47%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 31%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 8% 55%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 92% 74%, #fff 50%, transparent 51%);
  background-size:340px 340px, 470px 470px, 290px 290px, 520px 520px,
                  380px 380px, 610px 610px, 700px 700px, 550px 550px}

/* EMBERS — rise, sway, fade. transform and opacity only. */
.embers{position:absolute;inset:0}
.em{position:absolute;bottom:-6vh;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px 0 color-mix(in srgb,var(--accent) 70%,transparent);
  opacity:0;
  animation:emrise var(--d) linear var(--dl) infinite;
  will-change:transform,opacity}
@keyframes emrise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:var(--o)}
  80%{opacity:var(--o)}
  100%{transform:translate3d(var(--dx),-112vh,0);opacity:0}
}

/* GRAIN — fractal noise over flat colour. This is what stops a dark ground
   reading as an empty void, and it is the cheapest tactile cue there is. */
.grain{position:absolute;inset:0;opacity:var(--grain-opacity,.16);mix-blend-mode:var(--grain-blend,overlay);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* THE CIRCUIT BOARD — only on the theme named after it.
   Anchored to the top and faded out before the first headline, because
   illustration under body text is a legibility problem no contrast ratio fixes.
   It sits above the nebula and below the grain, so the board reads as the
   physical layer and the nebula as depth behind it. Fixed attachment keeps it
   registered to the viewport rather than sliding away on the first scroll. */
:root[data-theme="circuit"] .neb{opacity:.34}
:root[data-theme="circuit"] .atmos::after{
  content:"";position:absolute;inset:0 0 auto 0;height:min(78vh,780px);
  background:url("/circuit.svg") no-repeat right top;
  background-size:cover;
  /* Raised from .30. At that level the board was technically present and
     effectively invisible — a theme named Circuit has to actually show one.
     .62 reads clearly in the header band while the vertical mask still takes it
     to nothing well above the first headline. */
  opacity:.62;
  /* Two masks: fade to nothing down the page, and ease off the left edge so the
     wordmark never sits on top of dense trace detail. */
  -webkit-mask-image:linear-gradient(#000 0%, #000 46%, transparent 98%),
                     linear-gradient(90deg, transparent 0%, #000 14%);
  mask-image:linear-gradient(#000 0%, #000 46%, transparent 98%),
             linear-gradient(90deg, transparent 0%, #000 14%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  pointer-events:none}
@media(max-width:760px){
  :root[data-theme="circuit"] .atmos::after{height:44vh;opacity:.2}
}

/* Light themes still dial the night sky back rather than inverting it — a
   starfield on cream paper is a different, worse idea — but they no longer do it
   by being REMEMBERED HERE.
   This was four theme ids hardcoded in three selector lists, in a file no theme
   author would think to open. Any light theme added tomorrow inherited a white
   starfield and an overlay grain on cream paper, and nothing in the build would
   have said so. The values now come from tokens themeCss sets from each theme's
   own declared mode, so a theme is correct by DECLARING WHAT IT IS rather than
   by appearing on a list somewhere else. A theme may still override any of them.
   Only the circuit artwork above is keyed to an id, and that is intentional:
   it is that theme's own illustration, not a behaviour every theme needs. */

/* Motion off keeps the picture and stops the movement — the nebula and embers
   still read as depth when static, so there is nothing to gain by hiding them. */
@media (prefers-reduced-motion: reduce){
  .neb,.em{animation:none}
  .em{opacity:var(--o)}
}
:root[data-motion="off"] .neb,
:root[data-motion="off"] .em{animation:none}
:root[data-motion="off"] .em{opacity:var(--o)}

/* Phones: drop the embers and grain. Two dozen animated layers plus a blend mode
   is real battery on a small GPU, for an effect mostly hidden behind the feed. */
@media(max-width:760px){
  .embers,.grain{display:none}
  .neb{filter:blur(46px);animation:none}
}


.ocon{margin-bottom:18px;border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
.oconrow{display:flex;align-items:center;gap:10px;padding:9px 11px;flex-wrap:wrap}
.oconrow .controlbar{flex:1 1 320px;margin:0;border:0;background:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

.octrigs{display:flex;gap:5px;flex:0 0 auto}
.octrig{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 10px;border:1px solid var(--line2);border-radius:var(--radius);
  background:transparent;color:var(--dim);
  font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.octrig:hover{color:var(--fg);border-color:var(--accent)}
.octrig:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Open state is tonal + glow, matching every other selected control on the site
   — the one solid fill on a page is reserved for its single primary action. */
.octrig[aria-expanded="true"]{
  color:var(--accent);border-color:transparent;
  background:var(--sel-bg);box-shadow:var(--sel-glow)}
.octval{color:var(--fg);font-weight:600;letter-spacing:.06em;text-transform:none}
.octrig[aria-expanded="true"] .octval{color:var(--accent)}
.octchev{width:9px;height:6px;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.octrig[aria-expanded="true"] .octchev{transform:rotate(180deg)}

/* Height is animated from a measured pixel value set in JS — 'auto' does not
   transition, and a fixed max-height either clips a tall panel or leaves a slow
   empty tail on a short one. */
.ocdrawer{overflow:hidden;border-top:1px solid var(--line);
  transition:height .26s cubic-bezier(.2,.8,.3,1),opacity .18s ease}
.ocpanel{padding:12px}
/* The nested bars lose their own chrome — inside the drawer they are content. */
.ocpanel .briefbar,.ocpanel .gfbar{margin:0;border:0;background:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.ocviewrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ocvlabel{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}

@media(max-width:640px){
  .oconrow{gap:8px}
  .octrigs{width:100%;overflow-x:auto;scrollbar-width:none}
  .octrigs::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ocdrawer,.octchev,.octrig{transition:none}
}
:root[data-motion="off"] .ocdrawer,
:root[data-motion="off"] .octchev,
:root[data-motion="off"] .octrig{transition:none}


.lrot{position:relative;margin-bottom:26px}
.lrtrack{position:relative}
.lrslide{display:none}
.lrslide.on{display:block;animation:lrin .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes lrin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Hard against the frame, vertically centred on the artwork rather than the
   whole slide — on a tall slide, centring on the block puts the controls level
   with the body copy where they read as unrelated. */
.lrbtn{position:absolute;top:clamp(90px,17vw,190px);z-index:4;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-edge-soft,var(--line2));border-radius:var(--radius);
  background:var(--glass-bg-strong,var(--surface));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  color:var(--dim);cursor:pointer;
  transition:color .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease}
.lrbtn svg{width:12px;height:20px}
.lrbtn:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.lrbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lrprev{left:-13px}
.lrnext{right:-13px}

.lrdots{display:flex;gap:6px;justify-content:center;margin-top:14px}
.lrdot{width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:var(--line2);transition:background .2s ease,width .2s ease}
.lrdot:hover{background:var(--dim)}
.lrdot.on{background:var(--accent);width:38px}
.lrdot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* The controls overlap the artwork below this width, so they move to sit beside
   the dots instead — an arrow on top of the image is worse than an arrow further
   from it. */
@media(max-width:900px){
  .lrbtn{position:static;top:auto}
  .lrot{display:flex;flex-direction:column}
  .lrdots{order:2;align-items:center;gap:10px}
  .lrprev{order:2;align-self:center;margin-top:12px}
  .lrnext{order:2;align-self:center;margin-top:12px}
  .lrdots{order:2;margin-top:12px}
  .lrot > .lrtrack{order:1}
  .lrctl{display:flex;gap:10px;justify-content:center;order:2}
}
@media (prefers-reduced-motion: reduce){
  .lrslide.on{animation:none}
  .lrbtn:hover{transform:none}
}
:root[data-motion="off"] .lrslide.on{animation:none}
:root[data-motion="off"] .lrbtn:hover{transform:none}


.gfbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:10px 13px;margin-bottom:16px;border:1px solid var(--line2);border-radius:var(--radius)}
.gflabel{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.gfsel{font:600 12px/1 var(--font-body);color:var(--fg);background:transparent;
  border:1px solid var(--line2);border-radius:var(--radius);padding:8px 10px;cursor:pointer;
  max-width:min(340px,60vw)}
.gfsel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gfcount{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.gfclear{font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  padding:7px 9px;border:1px solid var(--line2);border-radius:var(--radius);
  background:transparent;color:var(--dim);cursor:pointer;margin-left:auto}
.gfclear:hover{color:var(--fg);border-color:var(--accent)}
/* Hidden by filtering, not removed — the DOM stays crawlable and the reader can
   clear the filter without a round-trip to the server. */
.gf-hidden{display:none !important}
.gfempty{padding:44px 0;color:var(--dim);font-size:13.5px}
.gfempty b{color:var(--fg)}
@media(max-width:640px){.gfclear{margin-left:0}}


.kt{padding-top:4px}
.kt-head{margin-bottom:24px}
.kt-title{margin:0 0 8px;font:var(--display-weight) clamp(23px,3vw,34px)/1.1 var(--font-display);
  letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.kt-lede{margin:0;max-width:76ch;color:var(--dim);font:400 14.5px/1.6 var(--font-body)}

.kt-lab{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* --- clock --- */
.kt-clock{display:grid;grid-template-columns:minmax(190px,240px) 1fr;gap:26px;align-items:start;
  border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);
  padding:22px 24px;margin-bottom:26px}
.kt-next{display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line);padding-right:22px}
.kt-big{font:var(--display-weight) clamp(40px,6vw,64px)/1 var(--font-mono);color:var(--fg);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kt-unit{font:500 12.5px/1.3 var(--font-body);color:var(--dim)}
.kt-when{font:600 12px/1 var(--font-mono);color:var(--fg);letter-spacing:.04em;margin-top:4px}
.kt-prev{display:flex;flex-direction:column;gap:10px;min-width:0}
.kt-prevlede{margin:0;color:var(--dim);font:400 14px/1.6 var(--font-body);max-width:70ch}
.kt-prevlede b{color:var(--fg);font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.kt-prevlede time{color:var(--fg);font-family:var(--font-mono);font-weight:600}
.kt-shipped{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.kt-shipped li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:6px 0;border-top:1px solid var(--line)}
.kt-sc{font:600 12px/1 var(--font-mono);color:var(--fg);letter-spacing:.03em}
.kt-sp{font:400 12.5px/1.35 var(--font-body);color:var(--dim);min-width:0;overflow-wrap:anywhere}
.kt-shipransom{font:700 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sev-1);border:1px solid currentColor;border-radius:var(--radius);padding:3px 5px}
.kt-caveat{margin:2px 0 0;color:var(--dim);font:400 12px/1.65 var(--font-body);max-width:74ch;opacity:.9}
.kt-caveat em{color:var(--fg);font-style:normal;font-weight:600}

/* --- stat strip --- */
.kt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.kt-stat{display:flex;flex-direction:column;gap:5px;padding:16px 17px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.kt-n{font:700 clamp(26px,3.4vw,34px)/1 var(--font-mono);color:var(--fg);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kt-sub{font:500 11.5px/1.4 var(--font-mono);color:var(--dim)}
.kt-alarm{border-color:color-mix(in srgb,var(--sev-1) 45%,var(--line));
  background:color-mix(in srgb,var(--sev-1) 7%,var(--surface))}
.kt-alarm .kt-lab{color:var(--sev-1)}
.kt-alarm .kt-n{color:var(--sev-1)}

/* --- panels --- */
.kt-panel{margin-bottom:30px}
.kt-h3{margin:0 0 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-bottom:10px;border-bottom:1px solid var(--line2)}
.kt-h3n{font:500 10px/1 var(--font-mono);letter-spacing:.1em;color:var(--dim);text-transform:none}

/* --- vendor bars: divs and percentages, no canvas, no library --- */
.kt-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kt-bar{display:grid;grid-template-columns:minmax(110px,180px) 1fr auto;gap:14px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.kt-bv{font:600 12.5px/1.3 var(--font-body);color:var(--fg);overflow-wrap:anywhere}
.kt-btrack{display:block;height:10px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden}
.kt-bfill{display:block;height:100%;background:var(--accent);border-radius:inherit}
.kt-bn{font:700 12.5px/1 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:7px;justify-content:flex-end;min-width:74px}
.kt-bp{font-weight:500;font-size:11px;color:var(--dim)}

/* --- table --- */
.kt-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.kt-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kt-table{width:100%;min-width:720px;border-collapse:collapse}
.kt-table th{text-align:left;font:700 9.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:12px 14px;border-bottom:1px solid var(--line2);white-space:nowrap;
  background:var(--surface);position:sticky;top:0}
.kt-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.kt-table tr:last-child td{border-bottom:none}
.kt-cve{white-space:nowrap;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kt-id{font:600 12.5px/1.2 var(--font-mono);color:var(--fg);letter-spacing:.03em}
/* Its own class rather than !important: .kt-cve span would out-specify a bare
   .kt-ransom and repaint the badge in the CVE id's own type and colour. */
.kt-ransom{display:inline-flex;align-items:center;gap:5px;font:700 9px/1 var(--font-mono);
  letter-spacing:.11em;text-transform:uppercase;color:var(--sev-1);
  border:1px solid currentColor;border-radius:var(--radius);padding:4px 6px;white-space:nowrap}
.kt-vend{min-width:150px}
.kt-v{display:block;font:600 12.5px/1.35 var(--font-body);color:var(--fg);overflow-wrap:anywhere}
.kt-p{display:block;font:500 11.5px/1.4 var(--font-mono);color:var(--dim);margin-top:3px;overflow-wrap:anywhere}
.kt-name{font:400 13px/1.5 var(--font-body);color:var(--dim);min-width:220px;max-width:44ch}
.kt-date{white-space:nowrap;font:500 12px/1.3 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.kt-duec{white-space:nowrap}
.kt-due{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font:500 12px/1.3 var(--font-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.kt-due b{font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kt-due.kt-unknown{color:var(--dim);font-style:italic}
.kt-due.kt-imminent{color:var(--sev-2)}
.kt-due.kt-imminent b{color:var(--sev-2)}
.kt-due.kt-overdue{color:var(--sev-1)}
.kt-due.kt-overdue b{color:var(--sev-1)}
.kt-st-overdue{background:color-mix(in srgb,var(--sev-1) 6%,transparent)}
.kt-ico{flex:none;display:block}

.kt-foot{margin:12px 0 0;color:var(--dim);font:400 12px/1.7 var(--font-body);max-width:76ch}
.kt-empty{margin:0;padding:22px 0;color:var(--dim);font:400 14px/1.65 var(--font-body);max-width:70ch}

/* --- mobile --- *
 * The clock un-columns, the stat strip drops to two across, the bar rows lose
 * the fixed label column, and the table keeps its own horizontal scroll rather
 * than being squeezed into an unreadable width. */
@media(max-width:640px){
  .kt-clock{grid-template-columns:1fr;gap:18px;padding:18px}
  .kt-next{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:16px}
  .kt-stats{grid-template-columns:repeat(2,1fr)}
  .kt-bar{grid-template-columns:1fr auto;gap:6px 12px}
  .kt-btrack{grid-column:1/-1;order:3}
  .kt-bn{justify-content:flex-end}
  .kt-table th{position:static}
  .kt-name{min-width:180px}
}
@media(max-width:420px){
  .kt-stats{grid-template-columns:1fr}
}


.rmsec{--rm-top:96px;margin-bottom:38px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.rmhead{margin-bottom:22px}
.rmsec h2{margin:0 0 8px;font:var(--display-weight) clamp(21px,2.4vw,28px)/1.1 var(--font-display);
  letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.rmlede{margin:0;max-width:78ch;color:var(--dim);font:400 14px/1.6 var(--font-body)}
.rmlede strong{color:var(--fg);font-weight:600}

/* --- facets -------------------------------------------------------- */
.rmfacets{display:flex;flex-direction:column;gap:14px;padding:16px 0 18px;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);margin-bottom:16px}
.rmgroup{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.rmglabel{font:700 11px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  padding-top:7px;display:flex;flex-direction:column;gap:4px}
.rmglabel span{font-weight:500;font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--dim)}
/* The one horizontally scrolling box on the page. It holds no sticky children,
   because overflow-x:auto makes this element the scroll container for them. */
.rmrail{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}

.rmchip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto;
  padding:7px 10px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);
  color:var(--dim);font:600 12px/1 var(--font-body);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
.rmchip:hover{color:var(--fg);border-color:var(--accent)}
.rmchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rmchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rmchipn{font:600 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums}
.rmchip:hover .rmchipn{color:var(--fg)}
.rmchip[aria-pressed="true"] .rmchipn{color:var(--accent-ink);opacity:.85}
/* Still clickable when it would reveal nothing — clicking it is how you find
   that out, and disabling controls mid-interaction moves the target under the cursor. */
.rmchip.rmzero{opacity:.45}
.rmchip.rmzero[aria-pressed="true"]{opacity:1}
.rmreset{border-style:dashed;color:var(--dim)}

.rmcount{margin:0 0 14px;font:500 12px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--dim)}
.rmcount strong{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}

/* --- list ---------------------------------------------------------- */
.rmlist{display:block}
.rmmonth{position:sticky;top:var(--rm-top);z-index:5;display:flex;align-items:baseline;gap:10px;
  margin:0;padding:9px 0 8px;border-bottom:1px solid var(--line2);
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px)}
.rmmonthname{font:700 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.rmmonthn{font:600 11px/1 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.rmmonthmore{font:500 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--dim)}

.rmrow{display:grid;grid-template-columns:74px minmax(0,1fr) 190px;gap:16px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line)}
.rmrow:hover{background:var(--accent-soft)}
/* Explicit class, not [hidden] — see the file header. .rmrow sets display:grid,
   which would override the [hidden] user-agent rule outright. */
.rmrow.rmoff,.rmmonth.rmoff{display:none}
.rmempty{display:none;margin:22px 0 0;color:var(--dim);font:500 13px/1.5 var(--font-body)}
.rmempty.rmshow{display:block}

.rmid{font:600 11px/1.5 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.rmbody{display:flex;flex-direction:column;gap:5px;min-width:0}
.rmtitle{font:600 14px/1.4 var(--font-body);color:var(--fg)}
.rmrow:hover .rmtitle{color:var(--accent)}
.rmdesc{font:400 12.5px/1.55 var(--font-body);color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rmmeta{font:500 10.5px/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.rmtail{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left}
.rmstatus-tag{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:4px 7px;border-radius:var(--radius);border:1px solid var(--line2);color:var(--dim)}
.rmrow.st-rolling .rmstatus-tag{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.rmrow.st-dev .rmstatus-tag{color:var(--fg);border-color:var(--line2)}
.rmrow.st-launched .rmstatus-tag{color:var(--dim)}
.rmrow.st-cancelled .rmstatus-tag{color:var(--dim);text-decoration:line-through}
.rmrow.st-cancelled .rmtitle{text-decoration:line-through;color:var(--dim)}
.rmproduct{font:500 11px/1.45 var(--font-mono);color:var(--dim)}

.rmcap{margin:18px 0 0;max-width:70ch;font:500 11.5px/1.6 var(--font-mono);letter-spacing:.03em;color:var(--dim)}

@media(max-width:640px){
  .rmsec{--rm-top:0px}
  .rmgroup{grid-template-columns:1fr;gap:7px}
  .rmglabel{padding-top:0;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  /* Bleed the rail to the viewport edge so a half-visible chip signals that it scrolls. */
  .rmrail{margin:0 -26px;padding:0 26px 6px}
  .rmrow{grid-template-columns:1fr;gap:7px;padding:15px 0}
  .rmid{order:-1}
  .rmtail{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .rmmonth{position:static}
  .rmdesc{-webkit-line-clamp:3}
}
@media(prefers-reduced-motion:reduce){
  .rmchip{transition:none}
}


.vel{margin:8px 0 44px}
.vel-h{margin:0 0 8px;font:var(--display-weight) 21px/1.15 var(--font-display);letter-spacing:var(--display-spacing)}
.vel-note{margin:0 0 22px;max-width:74ch;font-size:14px;line-height:1.6;color:var(--dim)}
.vel-note b{color:var(--fg);font-weight:600}
.vel-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vel-row{display:grid;grid-template-columns:30px minmax(0,1fr) 96px 118px 106px;gap:16px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.vel-rank{font:600 11px/1 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.vel-main{min-width:0}
.vel-title{display:block;font:600 15px/1.35 var(--font-body);letter-spacing:-.01em;color:var(--fg)}
.vel-title:hover{color:var(--accent)}
.vel-orgs{margin:5px 0 0;font:500 11px/1.5 var(--font-mono);color:var(--dim)}
.vel-vert{display:inline-block;margin-right:9px;padding:2px 6px;border:1px solid var(--line2);
  border-radius:var(--radius);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.vel-spark-wrap{display:block;color:var(--accent);line-height:0}
.state-cresting .vel-spark-wrap{color:var(--dim)}
.vel-spark{display:block;width:96px;height:24px}
.vel-figs{display:flex;flex-direction:column;gap:4px;text-align:right}
.vel-rate{font:600 19px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg)}
.vel-rate em{font-style:normal;font-size:11px;color:var(--dim);margin-left:2px}
.vel-sub{font:500 10px/1.4 var(--font-mono);color:var(--dim)}
.vel-state{justify-self:start;padding:4px 8px;border:1px solid var(--line2);border-radius:var(--radius);
  font:700 9px/1.4 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start}
.state-climbing .vel-state{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.state-cresting .vel-state{color:var(--dim)}
.vel-prov{font-style:normal;font-size:8.5px;letter-spacing:.09em;color:var(--dim)}
.vel-cut{margin:18px 0 0;max-width:74ch;font-size:12.5px;line-height:1.65;color:var(--dim)}
.vel-cut b{color:var(--fg);font-weight:600}
@media(max-width:640px){
  .vel-row{grid-template-columns:24px minmax(0,1fr) 84px;grid-template-areas:
    "rank main figs" ". spark state";gap:10px 12px;padding:15px 0}
  .vel-rank{grid-area:rank;align-self:start;padding-top:3px}
  .vel-main{grid-area:main}
  .vel-figs{grid-area:figs;align-self:start}
  .vel-spark-wrap{grid-area:spark}
  .vel-spark{width:100%;max-width:120px}
  .vel-state{grid-area:state;justify-self:end;flex-direction:row;align-items:center;gap:6px}
  .vel-title{font-size:14.5px}
  .vel-rate{font-size:17px}
}


/* Every hide in this module is explicit. [hidden] alone loses to any display
   rule, and the elements below all have one. */
.ocfp [hidden],.ocnotice [hidden],.ocslot [hidden]{display:none !important}
.ocnotice[hidden],.ocrescue[hidden]{display:none !important}

/* The slot: a positioning context around a card that stays a pure link.
   display:flex + stretch keeps the card filling the grid cell exactly as it
   did when it was the grid item itself. */
.ocslot{position:relative;display:flex;flex-direction:column;min-width:0}
.ocslot>.card{flex:1 1 auto}
.ocslot.oc-muted{display:none !important}
/* The other two client filters hide the CARD, which would leave this wrapper
   behind as an empty grid cell — a hole in the layout with nothing in it.
   Collapse the slot whenever its card is hidden by anyone. */
.ocslot:has(> .gf-hidden),.ocslot:has(> .win-hidden){display:none !important}

/* Revealed-while-muted: legible, not faded. Dimming the text to signal state
   is how a card ends up below 4.5:1, so the signal is a dashed edge and the
   pressed control instead. */
.ocslot.oc-reveal>.card{outline:1px dashed var(--line2);outline-offset:7px}

.ocmute{position:absolute;top:7px;right:7px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;cursor:pointer;
  border:1px solid var(--line2);border-radius:var(--radius);
  background:var(--surface);color:var(--dim);
  opacity:0;transition:opacity .16s ease,color .16s ease,border-color .16s ease}
.ocslot:hover .ocmute,.ocslot:focus-within .ocmute,.ocmute:focus-visible{opacity:1}
.ocmute:hover{color:var(--fg);border-color:var(--accent)}
.ocmute:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}
.ocmute[aria-pressed="true"]{opacity:1;color:var(--accent);border-color:var(--accent);background:var(--sel-bg)}
/* A CONTROL THAT IS SUBTRACTING SHOULD NOT LOOK IDLE.
   The trigger sits in a row of neutral dropdowns, so "3 muted" in the same grey
   as "All time" is easy to read past. Accent-coloured, it is the one thing in
   the bar that has changed, which is what makes the way back findable at a
   glance rather than by opening every menu. */
.octval[data-filtering]{color:var(--accent);font-weight:700}
/* Hover is not available on touch, and an affordance that only appears on
   hover does not exist on a phone. Below 700px and on any coarse pointer it
   is permanently visible and big enough to hit. */
@media (hover:none),(max-width:640px){
  .ocmute{opacity:1;width:34px;height:34px;top:9px;right:9px}
}

/* Pinned by follow. A label, not a badge: it names the reason the card moved. */
.ocslot[data-pin]::before{content:attr(data-pin);position:absolute;top:-9px;left:10px;z-index:2;
  padding:3px 8px;border-radius:var(--radius);
  font:700 9px/1.35 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);background:var(--sel-bg);border:1px solid var(--line2)}

/* The disclosure line. role=status, so a change is announced without stealing
   focus, and it sits directly above the feed it describes. */
.ocnotice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:10px 13px;
  border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface)}
.ocntext{font:600 11.5px/1.5 var(--font-body);color:var(--fg)}
.ocnacts{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.ocnbtn{display:inline-flex;align-items:center;cursor:pointer;
  padding:7px 9px;border:1px solid var(--line2);border-radius:var(--radius);
  background:transparent;color:var(--dim);
  font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase}
.ocnbtn:hover{color:var(--fg);border-color:var(--accent)}
.ocnbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ocnbtn[aria-pressed="true"]{color:var(--accent);border-color:transparent;background:var(--sel-bg);box-shadow:var(--sel-glow)}

/* Why a section that should have been empty is not. Spans the grid so it reads
   as a sentence about the section rather than sitting in a card slot. */
.ocrescue{grid-column:1 / -1;margin:0;
  font:500 12px/1.55 var(--font-body);color:var(--dim)}
.ocrescue b{color:var(--fg);font-weight:700}

.ocfp{display:flex;gap:26px;flex-wrap:wrap}
.ocfpcol{flex:1 1 240px;min-width:0}
.ocfplabel{margin:0 0 9px;font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.ocfpnext{margin:0 0 10px;font:600 11.5px/1.5 var(--font-body);color:var(--accent)}
.ocfpnote{margin:9px 0 0;font:400 11.5px/1.5 var(--font-body);color:var(--dimmer)}
/* A failure to save is a fact the reader needs, so it is stated in body text
   at full contrast rather than whispered on the dim tier. */
.ocfpwarn{margin:9px 0 0;font:600 11.5px/1.5 var(--font-body);color:var(--fg)}
.ocfrlist,.ocmlist{display:flex;flex-direction:column;gap:6px}
.ocfr,.ocmrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:9px 10px;border:1px solid var(--line2);border-radius:var(--radius);
  background:transparent;color:var(--fg);font:600 12px/1.2 var(--font-body)}
.ocfr:hover,.ocmrow:hover{border-color:var(--accent)}
.ocfr:focus-visible,.ocmrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ocfr[aria-pressed="true"]{color:var(--accent);border-color:transparent;background:var(--sel-bg);box-shadow:var(--sel-glow)}
.ocfrname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocfrdays{font:600 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--dim)}
.ocfr[aria-pressed="true"] .ocfrdays{color:var(--accent)}
.ocfrstate{font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ocfr[aria-pressed="true"] .ocfrstate{color:var(--accent)}
.ocmrow{justify-content:space-between}
.ocmname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocmundo{font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.ocmrow:hover .ocmundo{color:var(--fg)}

/* The follow control on a launch desk. The desk owns its own palette, so this
   inherits the hero's colour rather than importing the reader accent into it. */
.ocftfollow{display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;
  padding:9px 13px;border-radius:var(--radius);
  border:1px solid color-mix(in srgb, currentColor 40%, transparent);
  background:color-mix(in srgb, currentColor 12%, transparent);color:inherit;
  font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.ocftfollow:hover{border-color:currentColor}
.ocftfollow:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ocftfollow[aria-pressed="true"]{background:var(--neon,var(--accent));color:var(--ink,var(--accent-ink));border-color:transparent}
/* THE BUTTON SAYS WHAT IT DOES; IT CANNOT SAY WHAT IT MEANS.
   "Follow this launch" is read by most people as "show me only this", which is
   the opposite of what it does — following reorders and never filters. That
   misreading is the single most likely reason someone presses it once, decides
   the site hid everything else, and never presses it again. The explainer is
   plain text, not a glyph, because a lone "?" is itself a thing to decode. */
.ocftrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ocftwhat{background:none;border:0;padding:6px 0;margin-top:14px;cursor:pointer;
  font:600 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.28)}
.ocftwhat:hover{color:#fff;border-bottom-color:currentColor}
.ocftwhat:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ANCHORED TO THE BUTTON, NOT TO THE VIEWPORT.
   Centred, it opened wherever the reader happened to have scrolled to, which
   put the explanation a long way from the thing it explains — and on a scrolled
   page it read as an unrelated interruption. It now opens ON the control, so the
   answer arrives where the question was asked. Position is computed at open time
   rather than declared, because the button is placed by the hero's own layout
   and its coordinates are not knowable in CSS. */
.ocfx{position:fixed;inset:0;z-index:120}
.ocfx[hidden]{display:none!important}
/* Barely there: this is a popover, not a takeover. It still catches the click
   that dismisses it, which is the only job the backdrop actually has. */
.ocfxbd{position:absolute;inset:0;background:rgba(4,2,6,.38)}
.ocfxp{position:fixed;max-width:430px;max-height:calc(100vh - 24px);overflow:auto;padding:24px 26px 22px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
.ocfxp h2{margin:0 0 14px;font:var(--display-weight,700) 19px/1.25 var(--font-display);
  letter-spacing:var(--display-spacing,-.02em);color:var(--fg)}
.ocfxp dl{margin:0;display:grid;gap:13px}
.ocfxp dt{font:700 9.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ocfxp dd{margin:5px 0 0;font:400 13px/1.5 var(--font-body);color:var(--dim)}
.ocfxx{margin-top:20px;width:100%;padding:11px;cursor:pointer;
  font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius)}
.ocfxx:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

@media(max-width:640px){
  .ocnacts{margin-left:0;width:100%}
  .ocnbtn{flex:1 1 auto;justify-content:center;min-height:36px}
  .ocfp{gap:18px}
  .ocfr,.ocmrow{min-height:40px}
}
@media (prefers-reduced-motion: reduce){.ocmute{transition:none}}
:root[data-motion="off"] .ocmute{transition:none}


.fresh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 13px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font:500 11px/1.4 var(--font-mono);color:var(--dim)}
.frdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 8px 0 var(--accent)}
.frmain b{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);font-size:9px}
.frsep{color:var(--dimmer);margin:0 3px}
.frnote{margin-left:auto;color:var(--dimmer);font-size:10px}
/* Overdue is a real state, not a styling flourish — it means the scheduler did
   not fire. Coloured with the severity accent so it reads as a fault. */
.fresh.overdue .frdot{background:var(--sev-1,#ff5a4d);box-shadow:0 0 8px 0 var(--sev-1,#ff5a4d);animation:frpulse 2s ease-in-out infinite}
.fresh.overdue #frnext{color:var(--sev-1,#ff5a4d);font-weight:700}
@keyframes frpulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.fresh.overdue .frdot{animation:none}}
:root[data-motion="off"] .fresh.overdue .frdot{animation:none}
@media(max-width:640px){.frnote{margin-left:0;flex-basis:100%}}

/* REV, dancing behind the landing page.
   Deliberately almost invisible. The test applied: at this opacity the page must
   read the same with it and without it. It is atmosphere, not content, and a
   mascot big enough to notice while reading a headline has stopped being subtle.
   Fixed rather than absolute so it never extends the scroll height. */
.dancer{
  position:fixed; right:-2vw; bottom:-4vh; width:min(42vw,560px); height:auto;
  z-index:0; pointer-events:none; user-select:none;
  opacity:.055; filter:saturate(.55);
  transform-origin:50% 92%;
  animation:revdance 5.6s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
}
/* Two axes offset in phase, so it reads as dancing rather than bobbing: a weight
   shift side to side against a slower rise and fall. */
@keyframes revdance{
  0%   {transform:translate3d(0,0,0)         rotate(-3.2deg) scale(1)}
  25%  {transform:translate3d(-1.1%,-1.6%,0) rotate(1.8deg)  scale(1.012)}
  50%  {transform:translate3d(0,-2.4%,0)     rotate(3.2deg)  scale(1.02)}
  75%  {transform:translate3d(1.1%,-1.1%,0)  rotate(1.4deg)  scale(1.008)}
  100% {transform:translate3d(0,0,0)         rotate(-3.2deg) scale(1)}
}
/* Content sits above it, or cards inherit the same stacking context and the
   artwork washes over their own backgrounds. */
header, main, .prefs{position:relative; z-index:1}
@media(max-width:760px){
  /* On a phone it would fill most of the viewport behind the feed. Subtle does
     not survive that, so it is dropped rather than shrunk. */
  .dancer{display:none}
}
@media (prefers-reduced-motion: reduce){ .dancer{animation:none} }
:root[data-motion="off"] .dancer{animation:none}
/* REV sits in the masthead at the wordmark's cap height, muted so the name
   still leads. He brightens only when the section carries a top-band advisory. */
/* REV, the mascot. TWO FILES, NOT TWO INLINE SVGS: the pair is ~108KB, and
   inlining even one into all 1,216 pages would give back most of the page-weight
   reduction. As static files the browser fetches the one it needs once and
   caches it for the whole site. Which one is emitted is decided at build time
   from the section's top severity, because that is when the severity is known. */
.pill{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border:1px solid var(--line-ui);color:var(--dim);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.pill:hover{color:var(--fg);border-color:var(--accent)}
select.pill{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* The section nav's own rules are in siteheader.ts. These bare ones still style
   every other nav on the page, the sub-tab rows included. */
nav::-webkit-scrollbar{display:none}
nav a{font:600 13px/1 var(--font-body);padding:11px 14px;color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap;text-transform:var(--display-transform);letter-spacing:.01em}
nav a:hover{color:var(--fg)}

main{max-width:1180px;margin:0 auto;padding:30px 26px 90px}

.badges{display:flex;align-items:center;gap:7px;margin-bottom:11px;flex-wrap:wrap}
.kicker{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sub{font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:3px 6px;border:1px solid var(--line2);border-radius:var(--radius)}
/* BREAKING IS OUTLINED; SEVERITY IS FILLED. THE DIFFERENCE IS THE FILL, NOT THE HUE.
   These were both solid pills, same size, same radius, same 10px mono caps — one
   painted --accent and the other painted a severity band. On newsprint the accent
   sits 2.4 dE00 from the critical red, on redline 5.8, on instrument 6.9: at that
   distance, at 10px, "Breaking" and "Critical" are the same badge. They mean
   entirely different things — one is a lane, the other is an alarm — and a reader
   who conflates them either panics at a product launch or ignores an exploited
   zero-day.
   Colour cannot carry this difference, because there is no hue that is safely far
   from the ramp in all 22 themes. Fill can: severity stays solid, breaking becomes
   an outline. That holds no matter how close the two hues land. */
.brk{font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);
  padding:3px 7px;border-radius:var(--radius)}
.sevtag{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:var(--radius);color:var(--bg)}
.sevtag.sev1{background:var(--sev-1)}.sevtag.sev2{background:var(--sev-2)}.sevtag.sev3{background:var(--sev-3)}
.sevtag.sev4{background:var(--sev-4)}.sevtag.sev5{background:var(--sev-5)}

.cvewrap{padding-top:4px}
.cvehead{margin-bottom:22px}
.cvetitle{margin:0 0 8px;font:var(--display-weight) clamp(24px,3vw,36px)/1.1 var(--font-display);letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.cvelede{margin:0;max-width:70ch;color:var(--dim);font:400 15px/1.6 var(--font-body)}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1 1 280px;min-width:220px;background:var(--surface);border:1px solid var(--line2);color:var(--fg);border-radius:var(--radius);padding:11px 13px;font:500 14px/1 var(--font-mono);outline:none}
.search:focus{border-color:var(--accent)}
/* The outline:none above sits at the same specificity as the global
   :focus-visible rule and comes later in the sheet, so it wins — a keyboard
   reader was left with a one-pixel border tint as the only focus cue, and
   Windows high-contrast mode strips even that. Restated explicitly here so the
   ring survives both. */
.search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cvestatus{margin:0 0 14px;font:500 12px/1.4 var(--font-mono);color:var(--dim)}
.search::placeholder{color:var(--dimmer)}
.toggle{display:flex;align-items:center;gap:7px;font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface)}
.toggle input{accent-color:var(--accent);margin:0}

.bands{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.bandbtn{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--line2);background:var(--surface);color:var(--dim);border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:7px}
.bandbtn:hover{color:var(--fg)}
.bandbtn.on{color:var(--fg);border-color:currentColor}
.bandbtn.sev1{color:var(--sev-1)}.bandbtn.sev2{color:var(--sev-2)}.bandbtn.sev3{color:var(--sev-3)}
.bandbtn.sev4{color:var(--sev-4)}.bandbtn.sev5{color:var(--sev-5)}
.bandbtn.on.sev1{background:color-mix(in srgb,var(--sev-1) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sev-1) 40%,transparent),0 0 16px -6px var(--sev-1)}
.bandbtn.on.sev2{background:color-mix(in srgb,var(--sev-2) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sev-2) 40%,transparent),0 0 16px -6px var(--sev-2)}
.bandbtn.on.sev3{background:color-mix(in srgb,var(--sev-3) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sev-3) 40%,transparent),0 0 16px -6px var(--sev-3)}
.bandbtn.on.sev4{background:color-mix(in srgb,var(--sev-4) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sev-4) 40%,transparent),0 0 16px -6px var(--sev-4)}
.bandbtn.on.sev5{background:color-mix(in srgb,var(--sev-5) 14%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sev-5) 40%,transparent),0 0 16px -6px var(--sev-5)}
.cnt{font-size:10px;opacity:.65;font-variant-numeric:tabular-nums}

.scale{display:flex;gap:0;margin-bottom:24px;border-top:1px solid var(--line);padding-top:12px}
.step{flex:1;display:flex;flex-direction:column;gap:6px}
.step i{height:4px;display:block}
.step span{font:600 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.step.sev1 i{background:var(--sev-1)}.step.sev2 i{background:var(--sev-2)}.step.sev3 i{background:var(--sev-3)}
.step.sev4 i{background:var(--sev-4)}.step.sev5 i{background:var(--sev-5)}

.cvelist{display:flex;flex-direction:column;gap:0}
.cve{display:grid;grid-template-columns:250px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line)}
.cve[hidden]{display:none}
.plate{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);position:relative;align-self:start;background:var(--surface);contain:paint}
.plate .gen{position:absolute;inset:0;width:100%;height:100%}

.cvetop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.bandtag{font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:var(--radius);color:var(--bg)}
.bandtag.sev1{background:var(--sev-1)}.bandtag.sev2{background:var(--sev-2)}.bandtag.sev3{background:var(--sev-3)}
.bandtag.sev4{background:var(--sev-4)}.bandtag.sev5{background:var(--sev-5)}
.cveid{font:600 12px/1 var(--font-mono);color:var(--fg);letter-spacing:.04em}
.flag{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:var(--radius);border:1px solid currentColor}
.flag.kev{color:var(--sev-2)}
.flag.ransom{color:var(--sev-1)}
.flag.aged{color:var(--dimmer);opacity:.85}
.when{margin-left:auto;font:500 11px/1 var(--font-mono);color:var(--dimmer)}

.cve h3{margin:0 0 8px;font:var(--display-weight) 17px/1.35 var(--font-display);letter-spacing:calc(var(--display-spacing) * .5)}
.cve h3 a:hover{color:var(--accent)}
.why{margin:0 0 11px;color:var(--dim);font:400 14px/1.55 var(--font-body);max-width:74ch}
.facts{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.facts span{font:500 11px/1.4 var(--font-mono);color:var(--dim)}
.facts b{color:var(--dimmer);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-right:5px;font-size:10px}
.nofacts{font-style:italic;opacity:.75}
.src{font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.cvenone{padding:60px 0;color:var(--dim);font:400 15px/1.5 var(--font-body)}

@media(max-width:760px){.cve{grid-template-columns:1fr;gap:14px}.plate{max-width:100%}}


.aiboard{margin-bottom:38px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.abhead{margin-bottom:20px}
.aiboard h2{margin:0 0 8px;font:var(--display-weight) clamp(21px,2.4vw,28px)/1.1 var(--font-display);letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.ablede{margin:0;max-width:78ch;color:var(--dim);font:400 14px/1.6 var(--font-body)}
.ablede strong{color:var(--fg);font-weight:600}
.abage{display:block;margin-top:6px;font:500 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer)}

.abgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}
.abcol.wide{margin-bottom:30px}
.abtitle{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-bottom:9px;border-bottom:1px solid var(--line2);margin-bottom:4px;display:flex;flex-direction:column;gap:5px}
.abtitle span{font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--dimmer);font-size:10px}

.mrow,.trow{display:grid;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mrow{grid-template-columns:26px 1fr auto 62px 62px}
.trow{grid-template-columns:26px 1fr auto 52px}
.mrow:hover,.trow:hover{background:var(--accent-soft)}
.rank{font:600 11px/1 var(--font-mono);color:var(--dimmer);font-variant-numeric:tabular-nums}
.mname,.tname{font:600 13px/1.3 var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.morg{color:var(--dimmer);font-weight:500}
.tauthor{display:block;font:500 10px/1.3 var(--font-mono);color:var(--dimmer);margin-top:2px}
.mtask,.tsdk{font:500 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.mmetric{font:600 13px/1 var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}
.msub{font:500 10px/1 var(--font-mono);text-align:right;color:var(--dimmer);font-variant-numeric:tabular-nums}
.mrow:hover .mmetric{color:var(--accent)}

.tasks{margin-top:4px}
.taskbars{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.taskbar{display:grid;grid-template-columns:150px 1fr 28px;gap:12px;align-items:center}
.tlabel{font:500 11px/1 var(--font-mono);color:var(--dim);text-transform:capitalize}
.tbar{height:6px;background:var(--line);position:relative;overflow:hidden}
.tbar i{position:absolute;inset:0;width:var(--w);background:var(--accent);opacity:.8}
.tcount{font:600 11px/1 var(--font-mono);color:var(--dimmer);text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:820px){
  .abgrid{grid-template-columns:1fr;gap:26px}
  .mrow{grid-template-columns:24px 1fr 56px}
  .mrow .mtask,.mrow .msub{display:none}
  .taskbar{grid-template-columns:110px 1fr 26px}
}


.briefbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:26px;
  border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface)}
.brieflabel{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.briefdurs{display:flex;gap:4px;flex-wrap:wrap}
.durbtn{font:600 11px/1 var(--font-mono);padding:8px 10px;border:1px solid var(--line2);background:transparent;
  color:var(--dim);border-radius:var(--radius);cursor:pointer;font-variant-numeric:tabular-nums}
.durbtn:hover{color:var(--fg)}
.durbtn.on{background:var(--sel-bg);color:var(--accent);border-color:var(--sel-line);box-shadow:var(--sel-glow)}
/* The ONLY solid accent fill in this bar. One primary action per view is what
   makes it read as primary at all. */
.briefplay{font:700 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);cursor:pointer;
  box-shadow:0 0 20px -8px var(--accent)}
.briefplay[disabled]{opacity:.5;cursor:default}
.briefsec{font:600 11px/1 var(--font-mono);padding:9px 12px;border:1px solid var(--line2);background:transparent;
  color:var(--dim);border-radius:var(--radius);cursor:pointer}
.briefsec:hover{color:var(--fg)}
.briefmeta{font:500 11px/1.5 var(--font-mono);color:var(--dimmer);text-align:right}
/* Scope chip. Deliberately identical to the search scope chip: both answer the
   same question — "what is this control acting on?" — so they must read as the
   same idea rather than two unrelated labels. Previously this was dim grey text
   saying "microsoft only", which nobody registered. */
.scopechip{margin-left:auto;font:700 9px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);background:var(--sel-bg);border:1px solid var(--sel-line);
  padding:5px 9px;border-radius:var(--radius);white-space:nowrap;box-shadow:var(--sel-glow)}
.briefnow{width:100%;display:none;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.briefnow.on{display:block}
.briefnow .nowlabel{font:600 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-bottom:6px}
.briefnow .nowtitle{font:600 14px/1.4 var(--font-body);color:var(--fg)}
.briefnow .nowtitle a:hover{color:var(--accent)}
.briefprog{height:3px;background:var(--line);margin-top:10px;position:relative;overflow:hidden}
.briefprog i{position:absolute;inset:0;width:0;background:var(--accent);transition:width .35s linear}
.briefwarn{width:100%;font:500 11px/1.5 var(--font-mono);color:var(--dimmer);padding-top:8px}
.voicepick{display:flex;gap:4px}
.vbtn{font:600 11px/1 var(--font-mono);padding:8px 11px;border:1px solid var(--line2);background:transparent;color:var(--dim);border-radius:var(--radius);cursor:pointer}
.vbtn:hover{color:var(--fg)}
.vbtn.on{background:var(--sel-bg);border-color:var(--sel-line);color:var(--accent);box-shadow:var(--sel-glow)}

/* Sub-navigation reads as a segmented control, not a footnote. The previous
   version was 12px dim text on a hairline and was routinely missed. */
.subnav{display:flex;gap:4px;margin-bottom:20px;padding:4px;border:1px solid var(--line2);
  border-radius:var(--radius);background:var(--surface);width:fit-content;max-width:100%;overflow-x:auto}
.subtab{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font:700 12px/1 var(--font-body);letter-spacing:.01em;padding:11px 15px;
  color:var(--dim);border-radius:var(--radius)}
.subtab:hover{color:var(--fg);background:var(--accent-soft)}
.subtab.on{background:var(--sel-bg);color:var(--accent);box-shadow:var(--sel-glow)}
.subn{font:600 10px/1 var(--font-mono);padding:3px 6px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--fg) 12%, transparent);font-variant-numeric:tabular-nums}
.subtab.on .subn{background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--accent)}
/* THE LIVE SIGN.
   "Live now" is the only tab whose contents change while you are looking at the
   page, and the only one that is worthless five minutes later. It is lit like a
   studio ON AIR sign so that it reads as a state rather than a destination: a
   hard red rim, a bloom that breathes, and a beam that sweeps the pill.

   The red is fixed rather than themed, for the same reason a real one is: the
   colour IS the message, and a live sign that turns amber in a warm theme is not
   a live sign. It is the one place on the site that ignores the accent token.

   The glow is drawn on ::before, INSET BEHIND the label, so it can bloom well
   past the pill without the animation ever touching layout — box-shadow on the
   anchor itself would repaint the whole nav row on every frame. */
.subtab[data-sub="live"]{position:relative;isolation:isolate;color:#ff5a5a;
  box-shadow:inset 0 0 0 1px rgba(255,60,60,.55)}
.subtab[data-sub="live"]:hover{color:#ff8080;background:rgba(255,45,45,.10)}
.subtab[data-sub="live"].on{background:rgba(255,45,45,.14);color:#ff6a6a;
  box-shadow:inset 0 0 0 1px rgba(255,60,60,.9)}
.subtab[data-sub="live"]::before{
  content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;
  box-shadow:0 0 10px 1px rgba(255,40,40,.55), 0 0 26px 6px rgba(255,30,30,.30);
  animation:livebloom 1.5s ease-in-out infinite}
/* The beam. A narrow bright band travelling across the pill and clipped to it,
   which reads as a sweep rather than as a second border. */
.subtab[data-sub="live"]::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(255,70,70,.05) 45%, rgba(255,120,120,.55) 50%, rgba(255,70,70,.05) 55%,
    transparent 62%, transparent 100%);
  background-size:280% 100%;
  animation:livelaser 2.6s linear infinite}
@keyframes livebloom{
  0%,100%{opacity:.45}
  45%{opacity:1}
  50%{opacity:.7}
  55%{opacity:1}
}
@keyframes livelaser{ from{background-position:120% 0} to{background-position:-160% 0} }
/* A strobe is exactly the pattern vestibular and photosensitive readers are
   protected from, so it stops entirely. The rim and a steady bloom remain, so
   the tab still reads as live — the information survives, only the motion goes. */
@media (prefers-reduced-motion:reduce){
  .subtab[data-sub="live"]::before{animation:none;opacity:.8}
  .subtab[data-sub="live"]::after{animation:none;background:none}
}
@media(max-width:640px){.subnav{width:100%}.subtab{padding:10px 12px;font-size:11.5px}}

/* The laser travels the full perimeter.
 *
 * Technique: a conic-gradient rotated by an animated custom property, masked to
 * the border ring only. @property is what makes the angle animatable at all —
 * without a registered type the browser cannot interpolate it and the gradient
 * just snaps.
 *
 * Registered outside any selector so it is available before first paint. */
@property --laser { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* The frame IS the trace. Deriving the border colour from --trace rather than
   letting each surface pick its own is what stops them diverging — a breaking
   story previously took border-color:var(--accent), which on a green-accent
   theme drew a lime frame around an azure Microsoft trace. One source of truth. */
.leadart,.cardart,.plate{
  position:relative;isolation:isolate;
  border:1px solid color-mix(in srgb, var(--trace, var(--line)) 38%, transparent) !important;
}
/* Breaking and emergency get a brighter frame — still the trace colour, only
   more of it. Urgency is expressed as intensity, never as a different hue. */
.card.is-breaking .cardart,.lead .leadart{
  border-color:color-mix(in srgb, var(--trace, var(--line)) 62%, transparent) !important;
}
.trace-double{
  border-color:color-mix(in srgb, var(--trace, var(--line)) 78%, transparent) !important;
}

/* The travelling head. A short bright arc with a long transparent tail, so the
   eye reads a point of light moving rather than a rotating wheel. */
.leadart::after,.cardart::after,.plate::after{
  content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--laser),
    transparent 0deg 250deg,
    color-mix(in srgb, var(--trace, currentColor) 55%, transparent) 300deg,
    var(--trace, currentColor) 348deg,
    color-mix(in srgb, var(--trace, currentColor) 30%, transparent) 356deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:laser 4.5s linear infinite;
  animation-play-state:paused;      /* resumed by IntersectionObserver */
  pointer-events:none;
}
/* The resting ring — a dim constant outline so the topic colour is readable even
   when the head is on the far side of the card. */
.leadart::before,.cardart::before,.plate::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
  padding:2px;
  background:var(--trace-bg,none);
  /* 55%, not 26%. At 26 the ring cleared 3:1 against its ground on ZERO of 176
     theme x hue combinations (best case 2.11) — it was a decoration nobody could
     resolve. The reduced-motion branch below already used 55, which meant the
     accessibility fallback was more legible than the default it replaced. 55 is
     the lowest value that passes, so it becomes the default and the fallback
     stops being an upgrade. */
  background-color:color-mix(in srgb, var(--trace, currentColor) 55%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
@keyframes laser { to { --laser: 360deg; } }

/* Only animate what is on screen. Sixty simultaneously animating conic gradients
   repaint every frame and will drop frames on a modest machine; the observer
   keeps the count to what is actually visible. */
.trace-live::after{animation-play-state:running}

/* Pattern is the redundant, colour-independent channel.
 *
 * It is painted as a BACKGROUND gradient, never as a mask. Setting mask-image
 * here overrode the mask shorthand that clips these pseudo-elements to the 2px
 * border ring, which dropped the clip entirely and painted the pattern across
 * the whole image — a magenta striped overlay on every streaming card. Touching
 * background leaves the ring mask intact. */
.trace-dashed::before{
  background-color:transparent;
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--trace, currentColor) 55%, transparent) 0 14px,
    transparent 14px 24px);
}
.trace-ticked::before{
  background-color:transparent;
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--trace, currentColor) 55%, transparent) 0 4px,
    transparent 4px 11px);
}
.trace-double::before{
  background-color:color-mix(in srgb, var(--trace, currentColor) 42%, transparent);
  padding:3px;
}
/* Emergency runs hot: a faster sweep is a genuine signal, not decoration. */
.trace-double::after{animation-duration:2.2s}

/* Glow, depth and click feedback.
 *
 * The halo is the trace colour so the card reads as lit from its own signal
 * rather than sitting under a generic drop shadow. Kept low — a bright halo on
 * sixty cards turns a feed into a christmas tree, and the trace has to stay the
 * thing you notice.
 *
 * box-shadow and transform are transitioned rather than animated per-frame:
 * both are cheap here because they change only on hover, not continuously. */
.leadart,.cardart,.plate{
  box-shadow:
    0 0 15px -7px color-mix(in srgb, var(--trace, transparent) 42%, transparent),
    0 5px 16px -10px rgba(0,0,0,.65);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.card:hover .cardart,.lead:hover .leadart,.cve:hover .plate{
  transform:translateY(-3px);
  box-shadow:
    0 0 30px -5px color-mix(in srgb, var(--trace, transparent) 62%, transparent),
    0 16px 34px -12px rgba(0,0,0,.75);
}
/* Hover accelerates the sweep — the card is being "pushed", which is the whole
   metaphor of the name. */
.card:hover .cardart::after,.lead:hover .leadart::after{animation-duration:1.6s}

/* Click surge. Cards open in a new tab, so the original stays on screen and
   would otherwise give no sign the click landed. A brief press-then-flare with
   the laser ripping around once is that acknowledgement. */
@keyframes surge{
  0%   {transform:scale(1) translateY(-3px)}
  16%  {transform:scale(.983) translateY(0)}
  50%  {transform:scale(1.014) translateY(-5px)}
  100% {transform:scale(1) translateY(0)}
}
@keyframes surgeglow{
  0%   {box-shadow:0 0 15px -7px color-mix(in srgb, var(--trace, transparent) 42%, transparent), 0 5px 16px -10px rgba(0,0,0,.65)}
  45%  {box-shadow:0 0 52px 2px color-mix(in srgb, var(--trace, transparent) 85%, transparent), 0 18px 40px -12px rgba(0,0,0,.8)}
  100% {box-shadow:0 0 15px -7px color-mix(in srgb, var(--trace, transparent) 42%, transparent), 0 5px 16px -10px rgba(0,0,0,.65)}
}
.surge .cardart,.surge .leadart,.surge .plate{
  animation:surge .62s cubic-bezier(.2,.8,.2,1), surgeglow .62s ease-out;
}
.surge .cardart::after,.surge .leadart::after,.surge .plate::after{
  animation-duration:.55s;animation-play-state:running;
}

/* The corner tick anchors the ring so it reads as an instrument marking. */
.leadart .tick,.cardart .tick,.plate .tick{
  position:absolute;left:0;bottom:0;width:3px;height:16px;z-index:5;
  background-color:var(--trace,currentColor);pointer-events:none;
}

/* The laser is gated on .trace-live, which JS withholds when motion is off, so
   it needs no rule here. These two are not gated on anything, so they do. */
:root[data-motion="off"] .card:hover .cardart,
:root[data-motion="off"] .lead:hover .leadart,
:root[data-motion="off"] .cve:hover .plate{transform:none}
:root[data-motion="off"] .surge .cardart,
:root[data-motion="off"] .surge .leadart,
:root[data-motion="off"] .surge .plate{animation:surgeglow .5s ease-out}

/* Motion is decoration here; the ring alone carries all the information. */
@media (prefers-reduced-motion: reduce){
  .leadart::after,.cardart::after,.plate::after{animation:none;opacity:0}
  .leadart,.cardart,.plate{transition:box-shadow .3s ease}
  .card:hover .cardart,.lead:hover .leadart,.cve:hover .plate{transform:none}
  .surge .cardart,.surge .leadart,.surge .plate{animation:surgeglow .5s ease-out}
  .leadart::before,.cardart::before,.plate::before{
    background-color:color-mix(in srgb, var(--trace, currentColor) 55%, transparent);
  }
}

.tracelegend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:11px 14px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface)}
.tracelegend .lgtitle{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.lgitem{display:flex;align-items:center;gap:7px;font:600 10px/1 var(--font-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.lgswatch{width:20px;height:3px;display:block;border-radius:1px}
.lgswatch.dashed{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px);mask-image:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 9px)}
.lgswatch.ticked{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px);mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 5px)}
@media(max-width:700px){.tracelegend{gap:11px}.lgitem{font-size:9px}}


.prefbtn{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;
  border:1px solid var(--line2);color:var(--dim);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.prefbtn:hover{color:var(--fg);border-color:var(--accent)}
.prefs{position:fixed;top:70px;right:26px;width:320px;z-index:60;background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--radius);padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.prefs[hidden]{display:none}
.prefhead{display:flex;align-items:center;margin-bottom:8px}
.prefTitle{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.prefclose{margin-left:auto;background:none;border:0;color:var(--dimmer);cursor:pointer;
  font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.prefclose:hover{color:var(--fg)}
.prefnote{margin:0 0 16px;font:400 11.5px/1.5 var(--font-body);color:var(--dimmer)}
/* THE ROW WRAPS RATHER THAN OVERFLOWS.
   This was "flex:0 0 150px" on the select, which reads as "exactly 150px" and
   is not: a flex item's default "min-width:auto" floors it at its min-content
   width, and a select's min-content width is its WIDEST OPTION. So any row
   whose longest option exceeded 150px silently pushed past the panel edge --
   "On — follows your system setting" did it on two rows before the third voice
   was added, and "Anchor — lower, measured, authoritative" made it three.
   "min-width:0" lets the basis mean what it says, and "flex-wrap" gives a long
   control its own full-width line instead of a clipped one. Short rows still
   sit inline, so the compact look survives where it fits. */
.prefrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.prefrow span{font:600 10px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  flex:1 1 auto;min-width:0}
.prefrow select{flex:1 1 168px;min-width:0;max-width:100%;
  background:var(--bg);color:var(--fg);border:1px solid var(--line2);
  border-radius:var(--radius);padding:7px 8px;font:500 11px/1 var(--font-mono);cursor:pointer}
.prefdiv{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
  margin:16px 0 11px;padding-top:12px;border-top:1px solid var(--line)}
.prefactions{display:flex;gap:8px;margin-top:16px}
/* One primary action in the panel; everything else is tonal. */
.prefsave{flex:1;font:700 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:10px;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);cursor:pointer;
  box-shadow:0 0 20px -8px var(--accent)}
.prefreset{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;
  border:1px solid var(--line2);background:transparent;color:var(--dim);border-radius:var(--radius);cursor:pointer}
.prefreset:hover{color:var(--fg)}
/* [hidden] IS ONLY A DEFAULT — any display rule beats it. Without this
   override the element ignores its own hidden attribute and renders. */
.prefsaved[hidden]{display:none !important}
.prefsaved{display:block;margin-top:10px;font:600 10px/1 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.prefsaved[hidden]{display:none}
@media(max-width:560px){.prefs{right:12px;left:12px;width:auto}}


.deals{padding-top:4px}
.dealshead{margin-bottom:26px}
.deals h2{margin:0 0 8px;font:var(--display-weight) clamp(23px,3vw,34px)/1.1 var(--font-display);
  letter-spacing:var(--display-spacing);text-transform:var(--display-transform)}
.dealslede{margin:0;max-width:76ch;color:var(--dim);font:400 14.5px/1.6 var(--font-body)}
.dealslede strong{color:var(--fg);font-weight:600}

.dealgroup{margin-bottom:34px}
.dealtitle{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-bottom:10px;border-bottom:1px solid var(--line2);margin-bottom:18px;display:flex;align-items:center;gap:9px}
.dealtitle span{color:var(--dimmer);font-weight:500}

.offergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.offer{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--surface);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,border-color .25s}
.offer:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.75)}
.offerart{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.offerart img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-filter)}
.offerart .noart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.pct{position:absolute;top:0;left:0;background:var(--accent);color:var(--accent-ink);
  font:700 12px/1 var(--font-mono);letter-spacing:.06em;padding:7px 9px}
.kind-free .pct{background:var(--sev-1)}

.offerbody{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
.offertop{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.kindtag{font:700 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.flagtag{font:700 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:3px 5px;border-radius:var(--radius)}
.urgent{font:700 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--sev-1);color:var(--bg);padding:3px 6px;border-radius:var(--radius);margin-left:auto}
.offer h3{margin:0 0 9px;font:var(--display-weight) 15.5px/1.32 var(--font-display);
  letter-spacing:calc(var(--display-spacing) * .5)}
.offer:hover h3{color:var(--accent)}
.offermeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto;
  font:500 11px/1 var(--font-mono);color:var(--dimmer)}
.price{color:var(--fg);font-weight:600}
.price s{color:var(--dimmer);font-weight:500;margin-left:4px}
.offernote{margin:9px 0 0;font:400 12.5px/1.5 var(--font-body);color:var(--dim)}
.dealsfoot{margin-top:8px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--dimmer);font:400 12px/1.7 var(--font-body);max-width:74ch}
@media(max-width:640px){.offergrid{grid-template-columns:1fr}}

.controlbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
/* The search field is the most useful control on the page and was reading as a
   disabled placeholder bar. It now carries the accent, an icon, the active
   scope and the shortcut hint, plus a resting glow so it is obviously live. */
.qwrap{position:relative;display:flex;align-items:center;flex:1 1 340px;min-width:250px}
.qicon{position:absolute;left:12px;width:15px;height:15px;color:var(--accent);pointer-events:none;opacity:.85}
.qbox{width:100%;background:var(--surface);border:1px solid var(--sel-line);color:var(--fg);
  border-radius:var(--radius);padding:13px 118px 13px 36px;font:500 13.5px/1 var(--font-mono);outline:none;
  box-shadow:var(--sel-glow);
  transition:box-shadow .22s ease, border-color .22s ease}
.qbox:hover{box-shadow:var(--sel-glow-strong)}
.qbox:focus{border-color:var(--accent);box-shadow:var(--sel-glow-strong)}
/* The glow is a box-shadow, which Windows high-contrast mode discards entirely,
   and this element sets outline:none — so in that mode a keyboard reader had no
   focus indicator on the site's primary search field at all. */
.qbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qbox::placeholder{color:var(--dim);opacity:1}
/* Scope chip: says which section the query will actually search. */
/* Positioning only — the chip's look comes from the shared .scopechip class so
   search and the briefing cannot drift apart. */
.qscope{position:absolute;right:44px;margin-left:0;pointer-events:none;box-shadow:none}
.qkbd{position:absolute;right:12px;font:600 10px/1 var(--font-mono);color:var(--dimmer);
  border:1px solid var(--line2);border-radius:var(--radius);padding:4px 6px;pointer-events:none}
@media(max-width:640px){.qscope{display:none}.qbox{padding-right:44px}}
.clearq{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  padding:10px 11px;border:1px solid var(--line-ui);border-radius:var(--radius)}
.clearq:hover{color:var(--fg)}
.wins{display:flex;gap:3px}
.winbtn{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 11px;
  border:1px solid var(--line-ui);color:var(--dim);border-radius:var(--radius)}
.winbtn:hover{color:var(--fg)}
.winbtn.on{background:var(--sel-bg);color:var(--accent);border-color:var(--sel-line);box-shadow:var(--sel-glow)}
.densbtn{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;
  border:1px solid var(--line-ui);background:transparent;color:var(--dim);border-radius:var(--radius);cursor:pointer}
.densbtn:hover{color:var(--fg)}
.resultline{margin:0 0 18px;font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* Compact density: the list view professionals actually scan. Art collapses to a
   thin colour rail so the topic trace survives, which is the point of it. */
body.compact .grid{grid-template-columns:1fr;gap:0}
body.compact .card{display:grid;grid-template-columns:4px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
body.compact .cardart{aspect-ratio:auto;height:100%;min-height:38px;margin:0;border:0 !important;box-shadow:none}
body.compact .cardart img,body.compact .cardart .gen{display:none}
body.compact .cardart::after{animation:none;inset:0;padding:0;background:var(--trace);mask:none;-webkit-mask:none}
body.compact .cardart::before{display:none}
body.compact .cardart .tick{display:none}
body.compact .card h2{font-size:15px;margin-bottom:4px}
body.compact .card .tldr{display:none}
body.compact .lead{grid-template-columns:1fr;gap:10px}
body.compact .leadart{display:none}

/* Focus must be visible — this is a keyboard-first audience. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.kbsel,.lead.kbsel{outline:2px solid var(--accent);outline-offset:3px}
.skiplink{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;font:700 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;z-index:99}
.skiplink:focus{left:0}
.subnav{display:flex;gap:4px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.subnav a{font:600 12px/1 var(--font-body);padding:10px 14px;color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--fg)}
.subnav a.on{color:var(--fg);border-bottom-color:var(--accent)}

.lead{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.leadart{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.lead h2{margin:0 0 14px;font:var(--display-weight) clamp(26px,3.3vw,42px)/1.1 var(--font-display);letter-spacing:var(--display-spacing)}
.lead:hover h2{color:var(--accent)}
/* THE DECK IS NOT SMALLER THAN THE BODY IT INTRODUCES.
   This ran at 15px against a 16px body while being the second-most-read text on
   the page — the reader meets it before anything else and it was the one thing
   set smaller than everything around it. A deck earns AT LEAST body size; the
   hierarchy below the headline is carried by colour and leading, not by shrinking
   the sentence people actually read. It matters more now that a theme may set a
   serif here, where 15px is a genuinely harder read than it was in a sans. */
.tldr{margin:0 0 14px;color:var(--dim);font:400 16px/1.62 var(--font-body)}
.byline{font:600 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--fg-meta);text-transform:uppercase}
.dupe{color:var(--dim)}
.sep{opacity:.5;margin:0 3px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:30px 28px}
/* CARDS ARE UNIFORM, WHICH TAKES TWO RULES AND NOT ONE.
   The grid already stretches every card in a row to the same height, so they
   measured equal and looked wrong: .cardbody defaulted to flex:0 1 auto, stopped
   at its content, and left 24 to 50px of bare card below it. On a frosted or
   dark theme that gap reads as a band of a different colour, and the byline
   floats at a different height on every card because it ends wherever the
   summary happened to end.
   So the body GROWS to fill the card, and the byline is pushed to the foot with
   margin-top:auto. Now every card in a row is the same height AND terminates on
   the same line, which is what uniform means. */
.card{display:flex;flex-direction:column}
.cardbody{display:flex;flex-direction:column;flex:1}
.cardbody .byline{margin-top:auto}
.cardart,.leadart{position:relative}
.imgcred{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:4px 7px;font:500 8.5px/1.35 var(--font-mono);letter-spacing:.03em;
  color:color-mix(in srgb,#fff 78%,transparent);
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cardart{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);margin-bottom:13px}
.card h2{margin:0 0 9px;font:var(--display-weight) 18px/1.32 var(--font-display);letter-spacing:calc(var(--display-spacing) * .6)}
.card:hover h2{color:var(--accent)}
/* THEME-COLOURED HEADLINES, WITH NO WHITE IN THE RAMP.
   Both stops are the theme's accent at different strengths, so the headline is
   coloured end to end instead of starting as plain foreground and turning. The
   earlier version began at --fg and only tinted the tail, which read as white
   text that changed its mind halfway across the line.

   Mixing toward --fg rather than toward white is what keeps it legible: it
   RAISES contrast against the card in both modes, because --fg is near-white on
   a dark theme and near-black on a light one. Measured across all 13 reader
   themes, the darker stop clears 4.5:1 everywhere with a worst case of 5.61 —
   which matters because a card headline at 18px bold is 13.5pt, just under the
   WCAG large-text threshold, so it needs the full 4.5 rather than 3.0.

   This used to ramp into the per-VERTICAL hue instead, which meant seven
   different end colours down a single page of mixed sections. Each headline was
   defensible alone and the page was a patchwork: colour that changes per item
   reads as instability, not as information, because nothing on screen explains
   why this headline is violet and the one under it is green. The section is
   already named in the kicker directly above every headline, so the hue was
   spending the page's coherence on something the reader could already read.

   IT CANNOT FAIL CONTRAST, BY CONSTRUCTION. Both stops are mixes that keep a
   large share of --fg, so the far end of the ramp is never the raw hue — it is
   the hue pulled most of the way back toward the text colour. That is the whole
   trick: a gradient headline normally goes unreadable because someone ramps to a
   saturated colour at full strength, and the last words of the sentence pay for
   it. Mixing against --fg means the worst case here is still a foreground-weighted
   tint, in either theme, on every hue in the palette.

   Cards with no hue resolve --trace to --fg, which makes both stops identical and
   the gradient invisible — so the plain case needs no separate rule. */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .lead h2,.card h2{
    background-image:linear-gradient(104deg,
      color-mix(in oklab, var(--accent) 88%, var(--fg)) 0%,
      color-mix(in oklab, var(--accent) 55%, var(--fg)) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent}
  /* Hover resolves the ramp to its own end colour: the headline settles into the
     accent it was already reaching for, rather than travelling to a third one.
     It has to be done by dropping the gradient, because with the text fill
     transparent the plain color:var(--accent) rules above do nothing. */
  /* HOVER KEEPS THE HUE AND MOVES TOWARD THE FOREGROUND.
     Both stops shift 30% toward --fg, so it is the same colour brightened
     rather than a different colour — a hover that changes hue reads as a
     different element, not the same one under the pointer. Toward --fg is the
     mode-correct version of "lighter": in a dark theme it lifts toward white,
     in a light theme it deepens toward ink, and in both it raises contrast, so
     the emphasised state can never be the less legible one. */
  .lead:hover h2,.card:hover h2{
    background-image:linear-gradient(104deg,
      color-mix(in oklab, var(--accent) 62%, var(--fg)) 0%,
      color-mix(in oklab, var(--accent) 38%, var(--fg)) 100%)}
  /* Transparent fill would make selected text invisible against the highlight. */
  .lead h2::selection,.card h2::selection{-webkit-text-fill-color:var(--fg);color:var(--fg)}
}
/* Readers who have asked for more contrast get the flat foreground, full stop. */
@media (prefers-contrast:more){
  .lead h2,.card h2{background-image:none;color:var(--fg);-webkit-text-fill-color:var(--fg)}
  .lead:hover h2,.card:hover h2{color:var(--accent);-webkit-text-fill-color:var(--accent)}
}
.card .tldr{font-size:13.5px;line-height:1.55;margin-bottom:11px}
/* breaking border now derives from --trace; see TRACE_CSS */

/* Zero-byte placeholder for cards whose image failed to load. Replaces a full
   inline SVG that was rendering under every single card. */
.gen-wrap:not(.has-img):empty::after,
.gen-wrap.has-img:not(:has(img))::before{content:""}
.cardart:not(.has-img):not(:has(svg)),.leadart:not(.has-img):not(:has(svg)){
  display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.cardart:not(.has-img):not(:has(svg))::after,.leadart:not(.has-img):not(:has(svg))::after{
  content:attr(data-label);position:absolute;inset:auto;z-index:2;
  font:700 11px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--trace,var(--accent));opacity:.55;background:none;box-shadow:none;
  padding:0;mask:none;-webkit-mask:none;animation:none}

/* Generated art sits underneath; a real image covers it when one loads. */
.leadart,.cardart{position:relative;contain:paint}
.gen{position:absolute;inset:0;width:100%;height:100%;display:block}
.has-img img{position:relative;z-index:1}

.empty{padding:110px 0}
.empty h2{font:var(--display-weight) 32px/1 var(--font-display);letter-spacing:var(--display-spacing);margin:0 0 10px}
.empty p{color:var(--dim);margin:0}

footer{max-width:1180px;margin:0 auto;padding:0 26px 60px;color:var(--fg-meta);font:500 11px/1.8 var(--font-mono)}
footer a{color:var(--dim);border-bottom:1px solid var(--line2)}

@media(max-width:820px){
  .lead{grid-template-columns:1fr;gap:18px}
  .grid{grid-template-columns:1fr;gap:26px}
  main{padding:22px 20px 70px}
  .top,nav{padding-left:20px;padding-right:20px}
  /* The header's phone layout (tools wrap, nav stacks) is in siteheader.ts. */
}
body[data-desk="gta6"]{--bg:#12030f;--surface:#1d0819;--line:#35102a;--line2:#5c1e46;--fg:#ffe9f4;--dim:#d193b6;--dimmer:#9b6a84;--accent:#ff6ec4;--accent-soft:rgba(255,110,196,.12);--accent-ink:#12030f;--radius:3px;--display-weight:800;--display-spacing:-.038em;--img-filter:saturate(1.14) contrast(1.06) brightness(1.02)}
body[data-desk="gta6"]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,110,196,.030) 0 1px,rgba(125,249,255,.022) 1px 2px,transparent 2px 4px)}
body[data-desk="gta6"] > *{position:relative;z-index:1}
body[data-desk="wolverine"]{--bg:#0b0d10;--surface:#12161b;--line:#1e242c;--line2:#303a47;--fg:#e9edf2;--dim:#909aa7;--dimmer:#6b7683;--accent:#ffd23f;--accent-soft:rgba(255,210,63,.10);--accent-ink:#0b0d10;--radius:0;--display-weight:820;--display-spacing:-.03em;--img-filter:saturate(.70) contrast(1.18) brightness(.90)}
body[data-desk="wolverine"]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.020) 0 1px,transparent 1px 3px),repeating-linear-gradient(74deg,rgba(255,210,63,.016) 0 1px,transparent 1px 9px)}
body[data-desk="wolverine"] > *{position:relative;z-index:1}

.bzstrip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 18px;padding:12px 16px;
  border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--accent-soft),transparent 72%)}
.bzchip{font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 8px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink)}
.bzstrip.live .bzchip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:1px;animation:bzpulse 1.6s ease-in-out infinite}
@keyframes bzpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.bzstrip.live .bzchip::before{animation:none}}
.bzname{font:700 15px/1.2 var(--font-display);letter-spacing:var(--display-spacing);color:var(--fg)}
.bzwhen{font-size:13px;color:var(--dim)}
.bzsrc{margin-left:auto;font:600 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--accent)}
.bzsrc:hover{text-decoration:underline}
@media(max-width:640px){.bzsrc{margin-left:0}}

/* ---- The StarCraft watch ----
   The launch desks' clock (the .ft* classes in FEATURED_CSS) on its own ground:
   deep space, a starfield tiled from a handful of points, and a planet's rim
   along the bottom edge. */
.scwatch{--neon:#8fd6ff;--chr:#2a9bdc;--ink:#03050b;
  position:relative;overflow:hidden;isolation:isolate;margin:0 0 22px;padding:28px 26px 26px;
  border-radius:var(--radius);color:#fff;border:1px solid rgba(143,214,255,.22);
  background:radial-gradient(110% 80% at 82% -10%,rgba(42,155,220,.32),transparent 62%),
    linear-gradient(172deg,#03050b 0%,#07102a 52%,#001845 100%)}
.scfield{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(1.3px 1.3px at 22px 34px,#fff,transparent 70%),
    radial-gradient(1px 1px at 96px 84px,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(1.5px 1.5px at 158px 22px,#bfe6ff,transparent 70%),
    radial-gradient(1px 1px at 64px 138px,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(1.2px 1.2px at 178px 152px,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(1px 1px at 128px 112px,rgba(191,230,255,.6),transparent 70%);
  background-size:200px 180px}
.scwatch::after{content:"";position:absolute;z-index:-1;left:-15%;right:-15%;top:78%;height:160%;
  border-radius:50%;background:#02040a;
  box-shadow:0 -1px 0 rgba(143,214,255,.55),0 -22px 70px -14px rgba(42,155,220,.75)}
/* The desks' clock carries a tap-six-times joke; this one does nothing on click. */
.scwatch .ftclock{cursor:default}
.scnote{margin:14px 0 0;max-width:60ch;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.74)}
.scnote a{color:var(--neon);text-decoration:underline;text-underline-offset:2px}