@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)}

*{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:820px;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)}
.ftag{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(28px,4.4vw,46px)/1.1 var(--font-display);
  letter-spacing:var(--display-spacing);max-width:20ch}
.deck{margin:0 0 22px;color:var(--dim);font-size:18px;line-height:1.58;max-width:62ch}
.byline{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font:600 11px/1.7 var(--font-mono);letter-spacing:.06em;color:var(--dimmer);
  text-transform:uppercase;padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.byline b{color:var(--accent);font-weight:700}

.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 bar sits under the byline on its own row -- see story.ts for why it is
   not inline with the credit. */
.byline{margin-bottom:18px;padding-bottom:18px}
.fbody{margin-top:30px}

/* THE MEASURE BELONGS TO THE PROSE, NOT THE COLUMN.
   Constraining .fbody itself capped every figure at 68ch too, which left the
   seven-column ranking table scrolling sideways even on a wide desktop while
   180px of usable column sat empty beside it. Text keeps its reading measure;
   charts, tables and photographs get the full width. */
.fbody{max-width:none}
.fbody p{margin:0 0 20px;font-size:17px;line-height:1.72;max-width:68ch}
/* The opening paragraph carries the piece; give it the weight of a standfirst
   without resorting to a drop cap, which mangles selection and screen readers. */
.fbody p:first-of-type{font-size:19px;line-height:1.62;color:var(--fg)}
.fbody h2{margin:38px 0 14px;font:var(--display-weight) 23px/1.2 var(--font-display);
  letter-spacing:var(--display-spacing);max-width:68ch}

.ocfig{margin:26px 0;padding:0}
.ocfig .ocbar{width:100%;height:auto;display:block;overflow:visible}
/* Text wears TEXT tokens, never the mark's colour: a label tinted like the bar
   reads as another data value and stops being a label. */
.ocbar-lbl{font:600 12px/1 var(--font-mono);fill:var(--fg);letter-spacing:.01em}
.ocbar-val{font:700 12px/1 var(--font-mono);fill:var(--fg)}
.ocbar-note{font:500 11px/1 var(--font-mono);fill:var(--fg-meta)}
.ocbar-unit{font:600 10px/1 var(--font-mono);fill:var(--fg-meta);letter-spacing:.1em;text-transform:uppercase}
/* Grid and axis are recessive by construction — they orient, they do not compete. */
.ocbar-axis{stroke:var(--line-ui);stroke-width:1}
.ocbar-fill{fill:var(--accent)}
.ocfig figcaption{margin-top:10px;font:500 13px/1.5 var(--font-sans);color:var(--fg-meta)}
.ocfig figcaption b{color:var(--fg);font-weight:650}
.ocfig .occredit{display:block;margin-top:5px;font:500 11px/1.5 var(--font-mono);color:var(--fg-meta);opacity:.8}
.ocbar-data{margin-top:12px}
.ocbar-data summary{font:600 11px/1 var(--font-mono);color:var(--fg-meta);cursor:pointer;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 0}
.ocbar-data summary:hover{color:var(--accent)}
.ocbar-data table{width:100%;border-collapse:collapse;margin-top:8px}
.ocbar-data caption{text-align:left;font:600 12px/1.4 var(--font-sans);color:var(--fg-meta);padding-bottom:6px}
.ocbar-data th,.ocbar-data td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line-ui);
  font:500 12px/1.4 var(--font-mono);color:var(--fg)}
.ocbar-data thead th{color:var(--fg-meta);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.ocbar-data tbody th{font-weight:600}
/* A wide figure scrolls inside its own box; the page never scrolls sideways. */
.ocfig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){
  .ocfig .ocbar{min-width:520px}
  .ocfig-scroll{margin-inline:calc(var(--gutter,16px) * -1);padding-inline:var(--gutter,16px)}
}


.ocrank-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0}
.ocrank{width:100%;min-width:720px;border-collapse:collapse;text-align:left}
/* .fit — FOR A TABLE THAT IS MEANT TO SIT INSIDE THE READING COLUMN.
   The 720px floor above was set for the seven-column workstation ranking and is
   right there. Borrowed by a narrower table it overflowed a ~660px reading
   column by exactly 60px however many columns were removed, which is how it was
   found: dropping a column changed nothing, because the floor, not the content,
   was setting the width. On a phone the floor comes back at a smaller value so
   the table scrolls inside its box rather than crushing its cells to one word
   per line. */
.ocrank.fit{min-width:0}
@media (max-width:620px){.ocrank.fit{min-width:540px}}
/* VISUALLY HIDDEN, NOT REMOVED. A caption element inherits the table's
   min-width, so at any narrower viewport it was clipped by the scroll box and
   the sentence simply ran off the edge. The figcaption outside the box carries
   it visually; this stays for screen readers, which announce a table caption
   before the data. */
.ocrank caption{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.ocrank-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ocrank th,.ocrank td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line-ui);vertical-align:top}
.ocrank thead th{font:700 9.5px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-meta);border-bottom:1px solid var(--line2, var(--line-ui))}
.ocrank tbody th{font:650 13px/1.4 var(--font-body);color:var(--fg)}
.ocrank td{font:500 12.5px/1.45 var(--font-mono);color:var(--fg-meta)}
.ocrank td.num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg)}
/* Bandwidth is the column the piece argues on, so it is the one that is not
   recessive. Weight, not colour — a tinted column would read as a status. */
.ocrank td.bw{font-weight:700;color:var(--fg)}
.ocrank td.cmp{font-size:11.5px;line-height:1.4}
.ocrank tbody tr:first-child td,.ocrank tbody tr:first-child th{padding-top:12px}
.ocrank tr.aside th,.ocrank tr.aside td{opacity:.62}


.ocdiag{width:100%;height:auto;display:block}
.ocdiag .dg-panel{fill:none;stroke:var(--line-ui);stroke-width:1}
.ocdiag .dg-box{fill:var(--surface);stroke:var(--line-ui);stroke-width:1}
.ocdiag .dg-pool{fill:var(--accent);opacity:.16;stroke:var(--accent);stroke-width:1.5}
.ocdiag .dg-link{stroke:var(--accent);fill:none;stroke-linecap:round}
.ocdiag .dg-thin{stroke:var(--fg-meta);stroke-width:2;stroke-dasharray:3 3}
.ocdiag .dg-head{font:700 10px/1 var(--font-mono);fill:var(--fg-meta);letter-spacing:.14em;text-transform:uppercase}
.ocdiag .dg-lbl{font:650 12px/1 var(--font-mono);fill:var(--fg)}
.ocdiag .dg-sub{font:500 10.5px/1 var(--font-mono);fill:var(--fg-meta)}
.ocdiag .dg-note{font:600 10px/1 var(--font-mono);fill:var(--accent)}

.ocphoto{border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--line-ui);line-height:0}
.ocphoto img{width:100%;height:auto;display:block}
/* A cut-out product shot arrives on white. On a dark palette that is a hole in
   the page, so it is seated on its own light plate in EVERY theme rather than
   filtered — inverting or dimming a press photo misrepresents the product. */
.ocphoto.plate{background:#f5f5f7}
/* A figure is allowed to break the measure — a chart constrained to 68ch of
   text width wastes the space that makes it readable. */
.fbody .ocfig{max-width:none;width:100%}

.sources{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}
.sources h2{margin:0 0 6px;font:var(--display-weight) 19px/1.2 var(--font-display);
  letter-spacing:var(--display-spacing)}
.snote{margin:0 0 20px;color:var(--dimmer);font-size:13px;max-width:70ch}
.slist{list-style:none;margin:0;padding:0;counter-reset:src}
.srow{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.srow::before{counter-increment:src;content:counter(src);
  font:600 10px/1.6 var(--font-mono);color:var(--dimmer);font-variant-numeric:tabular-nums}
.sorg{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px;display:block}
.stitle{font:500 14px/1.45 var(--font-body);color:var(--fg);display:block;margin-bottom:4px}
.srow a.stitle:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ssupports{font:500 12px/1.5 var(--font-mono);color:var(--fg-meta)}
.disclosure{margin-top:34px;color:var(--dimmer);font-size:12.5px;line-height:1.6;max-width:74ch}
.back{display:inline-block;margin-top:32px;font:600 11px/1 var(--font-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  padding:11px 15px;border:1px solid var(--line2);border-radius:var(--radius)}
.back:hover{border-color:var(--accent)}

/* ---- the ground ----
   NOT PAINTED HERE. The field moved to themeCss (AURORA_FIELD) so it travels
   with the theme onto every page rather than only onto pages that opt into the
   panes. Painting it in both places stacked two identical gradient layers at
   double intensity — which looked like a bolder design and was a bug, visible
   only by comparing ::before and ::after on <body>. What stays here is the
   stacking context the panes need. */
body[data-liquid]{min-height:100vh}
body[data-liquid] > *{position:relative;z-index:1}

/* ---- the pane ----
   .lg is the CLEAR material: chrome, figures, controls.
   .lg-solid is the same edge treatment at a readable opacity, for prose. */
body[data-liquid] .lg,
body[data-liquid] .lg-solid{
  position:relative;
  border-radius:var(--lg-r,22px);
  border:0;
  -webkit-backdrop-filter:blur(30px) saturate(1.9);
  backdrop-filter:blur(30px) saturate(1.9);
  box-shadow:
    /* THE THICKNESS. A bright rim under the top edge and a soft dark one under
       the bottom: the two inner surfaces of a pane you could pick up. */
    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),
    /* and the pane's own cast shadow, which is what lifts it off the ground */
    0 18px 56px -18px var(--lg-cast);
}
body[data-liquid] .lg{background:var(--lg-fill)}
body[data-liquid] .lg-solid{background:var(--lg-fill-solid)}

/* THE EDGE, and it is the whole effect.
   A gradient painted ONLY in the border band, via two backgrounds masked
   against each other. Bright at the top-left, gone through the middle, bright
   again at the bottom-right — light wrapping a curved edge rather than a
   rectangle with a stroke on it. A flat 1px border cannot do this at any
   colour, which is why the site's existing .glass reads as a sheet. */
body[data-liquid] .lg::after,
body[data-liquid] .lg-solid::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:var(--lg-edge-w,2.5px);
  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;
}

/* FIGURES TAKE THE CLEAR PANE BY SELECTOR, not by a flag threaded through the
   renderer. A figure is a chart or a photograph — there is no body text on it,
   so the clear material is safe, and doing it here means any page that opts into
   the material gets it without its renderer knowing the material exists. */
body[data-liquid] .ocfig{
  padding:18px 20px 14px;
  border-radius:var(--lg-r,22px);
  background:var(--lg-fill);
  -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);
  position:relative;
}
body[data-liquid] .ocfig::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:var(--lg-edge-w,2.5px);
  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 PROSE COLUMN IS A PANE, SO IT NEEDS ROOM INSIDE ITS OWN EDGE.
   Without padding the first line of the article sits on the specular rim, which
   looks like a bug and is one. */
body[data-liquid] .fbody{padding:30px 34px 34px;--lg-r:26px}
@media (max-width:620px){body[data-liquid] .fbody{padding:22px 20px 26px}}

/* A pill is a lens too, just a small one, and it wants the full radius. */
body[data-liquid] .lg-pill{--lg-r:999px}

/* ---- light and dark rim values ----
   Light glass is lit from above and shadowed below. Dark glass is the same
   physics with far less light, so the rim is white at low alpha rather than a
   grey that would read as a border. */
body[data-liquid]{
  --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);
}
body[data-liquid][data-lgmode="light"]{
  --lg-fill:color-mix(in srgb, var(--surface) 40%, transparent);
  /* 84%, NOT 90%. At 90 the reading pane is opaque white on a pale ground and
     the whole material disappears — it reads as an ordinary card. At 84 the
     aurora moves under the text as you scroll, which is the entire point, and
     body text still clears 12:1 against the worst spot in the field. */
  --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);
}

/* ---- the same three ways off that glass.ts documents ---- */
@media (prefers-reduced-transparency: reduce){
  body[data-liquid] .lg,
  body[data-liquid] .lg-solid{
    background:var(--surface);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border:1px solid var(--line2);
    box-shadow:none;
  }
  body[data-liquid] .lg::after,
  body[data-liquid] .lg-solid::after{display:none}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body[data-liquid] .lg,
  body[data-liquid] .lg-solid{background:var(--surface)}
}