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

.lf-back{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)}
.lf-back:hover{color:var(--fg);border-color:var(--accent)}
main{max-width:1040px;margin:0 auto;padding:38px 26px 90px}
.lf-tag{display:inline-block;font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:5px 8px;border-radius:var(--radius);margin-bottom:16px}
h1{margin:0 0 16px;font:var(--display-weight) clamp(28px,4.6vw,46px)/1.08 var(--font-display);
  letter-spacing:var(--display-spacing);max-width:19ch}
.deck{margin:0 0 40px;color:var(--dim);font-size:17.5px;line-height:1.6;max-width:60ch}
.lf-h{font:700 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
section+section{margin-top:48px}

.lfgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.lfc a{display:flex;flex-direction:column;height:100%;gap:9px;
  border:1px solid var(--line2);border-radius:var(--radius);padding:20px 22px;background:var(--surface);
  transition:border-color .16s ease,transform .16s ease}
.lfc a:hover{border-color:var(--accent);transform:translateY(-2px)}
.lfc-brand{font:700 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.lfc h2{margin:0;font:var(--display-weight) 21px/1.2 var(--font-display);letter-spacing:var(--display-spacing)}
.lfc p{margin:0;color:var(--dim);font-size:14px;line-height:1.55;flex:1}
.lfc-when{position:absolute;top:18px;right:20px;display:flex;align-items:baseline;gap:5px}
.lfc a{position:relative}
.lfc-when b{font:800 26px/1 var(--font-mono);color:var(--accent);letter-spacing:-.02em}
.lfc-when i{font:700 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-style:normal}
.lfc-new,.lfc-ref,.lfc-tbd{font:700 10px/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--radius);border:1px solid var(--line2);color:var(--dimmer)}
.lfc-new{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.lfc-foot{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid var(--line);margin-top:3px}
.lfc-foot b{font:700 14px/1 var(--font-mono)}
.lfc-foot i{font:600 10.5px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dimmer);font-style:normal}
.lf-empty{color:var(--dim);max-width:50ch}

/* The clock sits top-right, so the title needs room not to run under it. */
.lfc h2{max-width:calc(100% - 78px)}


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

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

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