@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:#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="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)}


/* 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}}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}


.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}}

.pill{margin-left:auto;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)}
main{max-width:860px;margin:0 auto;padding:34px 26px 90px}

.kickers{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.kicker{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.brk{font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:4px 7px;border-radius:var(--radius)}
h1{margin:0 0 16px;font:var(--display-weight) clamp(27px,4vw,42px)/1.12 var(--font-display);letter-spacing:var(--display-spacing)}
.deck{margin:0 0 20px;color:var(--dim);font-size:17px;line-height:1.6;max-width:66ch}
.byline{font:600 11px/1.7 var(--font-mono);letter-spacing:.06em;color:var(--dimmer);text-transform:uppercase;margin-bottom:26px}
.imgcred{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:6px 10px;font:500 9.5px/1.4 var(--font-mono);letter-spacing:.03em;
  color:color-mix(in srgb,#fff 80%,transparent);
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);margin-bottom:30px;position:relative;background:var(--surface)}
.hero img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--img-filter)}
/* Refusal state. The referrer is now sent (see img.ts), so a publisher who
   blocks hotlinking will decline — and the hero must degrade to a designed
   panel rather than an empty box the height of a 16:9 frame. */
.hero:not(.has-img){display:flex;align-items:center;justify-content:center;background:var(--accent-soft)}
.hero:not(.has-img)::after{
  content:attr(data-label);z-index:2;
  font:700 11px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--trace,var(--accent));opacity:.55}


.ocshare{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:700 11.5px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-meta);background:transparent;border:1px solid var(--line-ui);
  border-radius:var(--radius);padding:8px 11px;
  /* Only the properties that actually change. A blanket transition here would
     animate the icon swap as a cross-fade and make the confirmation feel slow. */
  transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.ocshare:hover{color:var(--accent);border-color:var(--accent)}
.ocshare:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ocs-ico{width:16px;height:16px;flex:none}
/* The button must not resize when it confirms: a control that jumps under the
   cursor invites a second click on whatever moved into that spot. Two things
   are needed for that, and only the first is obvious. The icons share one cell
   so the glyph swap costs no width — but the LABEL also changes, from "Copy
   link" to "Link copied", so the text cell is given a floor wide enough for
   both. Without the second rule the button still grew by about 20px. */
.ocs-tick{display:none}
/* 12.6ch, not 11ch: the ch unit measures the glyph advance and ignores letter-spacing,
   and at .1em across 11 characters that omission is ~15px -- exactly the jump
   this rule exists to remove. Measured, not guessed. */
.ocs-txt{min-width:12.6ch;text-align:left;white-space:nowrap}
.ocshare.is-done .ocs-link{display:none}
.ocshare.is-done .ocs-tick{display:block}
.ocshare.is-done{color:var(--accent-ink,var(--bg));border-color:var(--accent);
  background:var(--accent)}
.ocshare.is-fail{color:var(--sev-2,var(--accent));border-color:var(--sev-2,var(--accent))}
@media (prefers-reduced-motion:reduce){.ocshare{transition:none}}

/* ONE SEGMENTED BAR, IN THE PANEL LANGUAGE THE PAGE ALREADY SPEAKS.
   The first version set the networks as bare 10.5px grey words with no chrome
   until hover. On the page they did not read as controls at all -- they read as
   more byline metadata, which is exactly what they sat next to -- and at 29px
   tall they were under the 44px touch target as well.
   This is the same construction as .readout further down the story page: a
   container tinted with the line colour, cells painted in the page colour, and
   a 1px gap between them so the dividers are the container showing through.
   Reusing it means the share bar looks like part of the instrument rather than
   a widget bolted to it, and it is legible at a glance. */
.ocsrow{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-ui);
  border:1px solid var(--line-ui);border-radius:var(--radius);overflow:hidden;
  width:fit-content;max-width:100%}
.ocsrow .ocshare,.ocsrow .ocsr-t{border:0;border-radius:0;background:var(--bg);
  min-height:40px;padding:0 15px}
/* The separator element is redundant now that the gaps draw the dividers. */
.ocsr-sep{display:none}
.ocsrow .ocshare{color:var(--accent)}
.ocsrow .ocshare:hover{background:var(--accent-soft)}
.ocsrow .ocshare.is-done{background:var(--accent);color:var(--accent-ink,var(--bg))}
.ocsr-t{display:inline-flex;align-items:center;color:var(--fg);
  font:600 11.5px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;
  transition:color .14s ease,background-color .14s ease}
.ocsr-t:hover{color:var(--accent);background:var(--accent-soft)}
.ocsr-t:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:520px){
  /* Wrapping cells keep their hairlines because the gap is the container. */
  .ocsrow{width:100%}
  .ocsrow .ocsr-t{flex:1 1 auto;justify-content:center}
}


.ocquote{position:absolute;z-index:60;display:none;align-items:center;gap:7px;
  padding:8px 12px;border-radius:var(--radius);cursor:pointer;
  font:600 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink,var(--bg));background:var(--accent);border:0;
  box-shadow:0 6px 22px rgba(0,0,0,.34)}
.ocquote.on{display:inline-flex}
.ocquote svg{width:14px;height:14px;flex:none}
/* The pointer that ties the control to the words it will quote. Without it the
   control reads as a floating toolbar rather than as belonging to the selection. */
.ocquote::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .ocquote.on{animation:ocqin .12s ease-out}
  @keyframes ocqin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}


.ocreads{display:inline-flex;align-items:baseline;gap:5px;
  font:600 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-meta)}
.ocreads b{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.ocr-win{opacity:.7}

/* The byline and the share control share a line, and the control is pushed to
   the far edge rather than sitting against the credit -- they are unrelated,
   and adjacency would read as the byline being clickable. */
/* Stacked, not side by side. Sharing a line with the credit kept the bar
   squeezed to whatever width was left over and, worse, put it in the reading
   position where metadata goes -- so it was read as metadata. On its own row it
   has room to be a control. */
.bylinerow{display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-bottom:28px}
.bylinerow .byline{margin-bottom:0}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:30px}
.rcell{background:var(--bg);padding:13px 15px}
.rcell b{display:block;font:600 19px/1 var(--font-mono);font-variant-numeric:tabular-nums;margin-bottom:5px}
.rcell span{font:500 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}

.gradebox{border-left:3px solid var(--sev-3);padding:16px 0 16px 18px;margin-bottom:30px}
.gradebox.sev1{border-color:var(--sev-1)}.gradebox.sev2{border-color:var(--sev-2)}
.gradebox.sev3{border-color:var(--sev-3)}.gradebox.sev4{border-color:var(--sev-4)}.gradebox.sev5{border-color:var(--sev-5)}
.gradetop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.gradetag{font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;border-radius:var(--radius);color:var(--bg)}
.sev1 .gradetag{background:var(--sev-1)}.sev2 .gradetag{background:var(--sev-2)}.sev3 .gradetag{background:var(--sev-3)}
.sev4 .gradetag{background:var(--sev-4)}.sev5 .gradetag{background:var(--sev-5)}
.cveid{font:600 12px/1 var(--font-mono);letter-spacing:.04em}
.gflag{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border:1px solid currentColor;border-radius:var(--radius);color:var(--sev-2)}
.gflag.ransom{color:var(--sev-1)}.gflag.aged{color:var(--dimmer)}
.gradewhy{margin:0 0 14px;color:var(--dim);font-size:15px;max-width:70ch}
.gradefacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0}
.gradefacts dt{font:600 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:4px}
.gradefacts dd{margin:0;font:500 13px/1.4 var(--font-mono)}
.gradefacts .overdue{color:var(--sev-1)}

.timeline h2,.sources h2{margin:0 0 6px;font:var(--display-weight) 19px/1.2 var(--font-display);letter-spacing:var(--display-spacing)}
.tlnote{margin:0 0 18px;color:var(--dimmer);font-size:13px;max-width:70ch}
.tllist{list-style:none;margin:0 0 34px;padding:0}
.tlrow{display:grid;grid-template-columns:26px 150px 1fr 74px;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.tlnum{font:600 10px/1 var(--font-mono);color:var(--dimmer);font-variant-numeric:tabular-nums}
.tlorg{font:600 12px/1.3 var(--font-body)}
.tlorg .t1{display:block;font:500 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-style:normal;margin-top:3px}
.tlbar{position:relative;height:2px;background:var(--line2)}
.tlbar i{position:absolute;left:var(--x);top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--accent);transform:translateX(-4px)}
.tlwhen{font:500 10px/1 var(--font-mono);color:var(--dimmer);text-align:right;font-variant-numeric:tabular-nums}
.tllink{grid-column:2 / -1;font-size:13.5px;color:var(--dim)}
.tllink:hover{color:var(--accent)}

.cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.ctaalt{font:500 11px/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dimmer)}
.summary{margin-bottom:30px}
.summary h2{margin:0 0 8px;font:var(--display-weight) 17px/1.2 var(--font-display);letter-spacing:var(--display-spacing)}
.summary p{margin:0;font-size:16.5px;line-height:1.68;color:var(--fg);max-width:68ch}

.revisions{margin:22px 0 30px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-left:3px solid var(--accent);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));padding:14px 16px}
.rvhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rvbadge{font:700 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:5px 7px;border-radius:var(--radius)}
.rvcount{font:600 12px/1.4 var(--font-body);color:var(--fg)}
.rvlast{margin-left:auto;font:500 10px/1 var(--font-mono);color:var(--dimmer)}

.rvblock{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.rvblock summary{cursor:pointer;display:flex;align-items:center;gap:9px;
  font:600 12px/1 var(--font-body);color:var(--dim);padding:3px 0}
.rvblock summary:hover{color:var(--accent)}
.rvblock summary b{color:var(--fg);font-weight:600}
.rvn{font:600 10px/1 var(--font-mono);color:var(--dimmer)}

.rvlist{list-style:none;margin:12px 0 0;padding:0 0 0 15px;border-left:1px solid var(--line2)}
.rvgap{list-style:none;margin:0 0 16px;padding:0;font:500 11px/1.4 var(--font-mono);color:var(--dimmer)}
.rvrow{position:relative;padding:0 0 16px}
/* A node per version: the history reads as a sequence, not a stack of quotes. */
.rvrow::before{content:"";position:absolute;left:-19px;top:5px;width:7px;height:7px;
  border-radius:50%;background:var(--line2);border:1px solid var(--bg)}
.rvrow.rv-current::before{background:var(--accent);box-shadow:0 0 7px 0 var(--accent)}
.rvmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}
.rvtag{color:var(--dim)}
.rvrow.rv-current .rvtag{color:var(--accent)}
.rvkind{border:1px solid var(--line2);border-radius:var(--radius);padding:3px 5px}
.rvwhat{margin:7px 0 0;font:500 12.5px/1.5 var(--font-body);color:var(--fg)}
.rvtitle{margin:6px 0 0;font:600 13px/1.4 var(--font-body);color:var(--dim)}
.rvsum{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--dimmer)}
.rvsrc{display:inline-block;margin-top:4px;font:600 11px/1 var(--font-mono);color:var(--accent)}
.rvsrc:hover{text-decoration:underline}
.rvlimit{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font:500 10.5px/1.55 var(--font-mono);color:var(--dimmer);max-width:76ch}

@media(max-width:640px){.rvlast{margin-left:0;flex-basis:100%}}


.why{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:26px 0}
.why-sum{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:13px 16px;cursor:pointer;list-style:none}
.why-sum::-webkit-details-marker{display:none}
.why-sum:hover .why-tag{color:var(--accent)}
.why-sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.why-tag{font:700 10px/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--fg)}
.why-short{font:500 12.5px/1.4 var(--font-mono);color:var(--dim)}
.why-chev{margin-left:auto;color:var(--dim);flex:none;transition:transform .18s ease}
.why[open] .why-chev{transform:rotate(180deg)}
.why-body{padding:0 16px 18px;border-top:1px solid var(--line)}
.why-lead{margin:15px 0 0;font-size:15.5px;line-height:1.6;color:var(--fg);max-width:68ch}
.why-qual{margin:11px 0 0;padding-left:12px;border-left:2px solid var(--accent);
  font-size:14px;line-height:1.6;color:var(--dim);max-width:66ch}
.why-lane{margin:15px 0 0;font-size:13.5px;line-height:1.6;color:var(--dim);max-width:68ch}
.why-lanetag{display:inline-block;margin-right:9px;padding:3px 7px;border:1px solid var(--line2);
  border-radius:var(--radius);font:700 9px/1.35 var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);vertical-align:1px}
.why-lanetag.lane-breaking{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.why-lanetag.lane-standard{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.why-scroll{margin-top:17px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.why-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.why-table{border-collapse:collapse;width:100%;min-width:640px;background:var(--bg)}
.why-table caption{caption-side:bottom;padding:9px 12px;text-align:left;
  font:500 11px/1.5 var(--font-mono);color:var(--dim);border-top:1px solid var(--line)}
.why-table th,.why-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.why-table thead th{font:600 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.why-table tbody th{font:600 12.5px/1.4 var(--font-body);color:var(--fg);white-space:nowrap}
.why-domtag{display:block;margin-top:4px;font:700 9px/1 var(--font-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.why-dom{background:var(--accent-soft)}
.why-num{font:600 12.5px/1.5 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.why-barcell{white-space:nowrap;min-width:150px}
.why-bar{display:inline-block;width:54px;height:4px;background:var(--line2);position:relative;
  vertical-align:2px;margin-right:9px;overflow:hidden}
.why-bar::after{content:"";position:absolute;inset:0;width:calc(var(--v) * 100%);background:var(--accent)}
.why-contrib{margin-right:8px}
.why-share{font:500 11px/1.5 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.why-detail{font-size:13px;line-height:1.55;color:var(--dim);min-width:260px}
.why-foot{margin:15px 0 0;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:70ch}
@media(max-width:640px){
  .why-sum{padding:12px 13px;gap:8px}
  .why-short{flex-basis:100%;font-size:12px}
  .why-body{padding:0 13px 15px}
  .why-lead{font-size:14.5px}
  .why-table{min-width:520px}
  .why-table th,.why-table td{padding:9px 10px}
  .why-detail{min-width:200px;font-size:12.5px}
  .why-barcell{min-width:132px}
  .why-bar{width:40px}
}

.genbody{margin:26px 0 30px}
.genhead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.genlabel{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.gennote{font:500 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--dimmer)}
.genbody p{margin:0 0 15px;font-size:16px;line-height:1.68;color:var(--fg);max-width:70ch}
.genbody p:last-child{margin-bottom:0}
.readon{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border:1px solid var(--accent);
  color:var(--accent);border-radius:var(--radius);font:700 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.readon:hover{background:var(--accent);color:var(--accent-ink)}
.disclosure{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--dimmer);font:400 12.5px/1.7 var(--font-body);max-width:70ch}
@media(max-width:640px){.tlrow{grid-template-columns:22px 1fr 60px}.tlbar{display:none}}