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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


/* [hidden] IS ONLY A DEFAULT — any display rule beats it. Without this
   override the element ignores its own hidden attribute and renders. */
.lvmodal[hidden]{display:none !important}
.lvmposter[hidden]{display:none !important}
.lvmodal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
/* ── THE AUDITORIUM ───────────────────────────────────────────────────────
   Five rooms, generated rather than drawn, selectable and remembered.

   EACH IMAGE HAS ITS OWN OPENING, so a single hard-coded position would fit
   exactly one of them and misalign the other four — the Deco house has a wide
   low arch, the Baroque one a smaller square inset high in the frame. Every
   theatre therefore carries the coordinates of its own screen as custom
   properties, measured off the artwork, and one rule positions the picture
   inside whichever is chosen.

   The picture is CONTAINED, never stretched: it keeps 16:9 and fits inside the
   opening, so a slightly generous box shows a sliver of the artwork's own black
   rather than cropping the stream. Fitting to the opening exactly would mean
   any measurement error crops the video, and that is the one failure a viewer
   would actually notice. */
/* NO backdrop-filter HERE, EVER.
   It used to carry blur(7px) behind a background of #050203 — which is fully
   opaque, so the blur was invisible and had never once been seen. What it did
   do was force the compositor to rasterise everything behind it into a
   snapshot, and the Twitch player is a cross-origin iframe inside that region.
   The consequences were both halves of a bug that looked like two:
     - the picture froze on whatever frame the snapshot caught, and
     - clicks could no longer be attributed to the iframe, so play, volume and
       fullscreen did nothing, with nothing on top of them to explain why.
   The theatre covers the whole window anyway, so there is no backdrop left to
   blur even if the fill were translucent. */
.lvbackdrop{position:absolute;inset:0;background:#050203}
/* THE VIDEO IS THE ANCHOR; THE ROOM IS HUNG OFF IT.
   Previously the plate was the fixed element and the picture was placed inside
   it, which meant the picture could only ever be a fraction of the window. It
   is the other way round now: the panel IS the picture, sized to the largest
   16:9 that fits the viewport, and the room is drawn behind it scaled so its
   opening lands exactly on the picture edges.

   Because the plate is sized as a multiple of the picture, the curtains above
   and the seats below move with it automatically — a wide short window reveals
   more room top and bottom, a tall one more at the sides, and the viewport
   clips the rest. No measuring, no resize handler; percentages do it before
   paint.

   The opening fractions are UNITLESS on purpose. CSS can divide a percentage
   by a number but not by a percentage, and calc(100% / 47%) is invalid. */
/* THE DIAL. Larger numbers mean a bigger picture and a narrower band of room;
   smaller means more theatre and less stream. At 82/76 a 1440x900 window gets
   a 1181x664 picture with about 130px of curtain either side and 118px above,
   which is enough for the gilding and the velvet to read as a room rather than
   a border. This is the one number to change if the balance feels wrong. */
.lvpanel{--lap:12px;position:relative;width:min(82vw,calc(76vh * 16 / 9));aspect-ratio:16/9;
  background:#000;box-shadow:0 0 90px -10px rgba(0,0,0,.9)}
/* FOUR STRIPS, ANCHORED TO THE PICTURE, TILED TO THE WINDOW.
   One plate pinned to the video can never cover an arbitrary window: at
   3440x1440 it fell ~750px short at each side, and on a portrait window it fell
   short top and bottom. No amount of scaling fixes that without pulling the
   opening off the picture.
   So the room is four separate pieces instead. Each is anchored to one edge of
   the picture and runs the full width or height of the WINDOW, repeating along
   its long axis — the valance and seats tile horizontally, the curtains
   vertically. Their thickness is a percentage of the picture, so the room grows
   and shrinks with it, and their length is viewport units, so there is no window
   shape that can outrun them. */
.rmsvg{position:fixed;inset:0;z-index:0;pointer-events:none}
.rmsvg[hidden]{display:none!important}
/* When a drawn room is showing, the photographic strips stand down entirely —
   they are two answers to the same question and must never be on screen at once. */
.lvpanel[data-theatre^="drawn-"] .rm{display:none}
.rm{position:absolute;pointer-events:none;z-index:0;background-repeat:repeat}
.rm-t{bottom:100%;left:50%;width:100vw;
  /* The +12px is the lap. The strip is translated DOWN by that much to hang in
     front of the picture, so without adding it back to the height the top of
     the strip pulls away from the top of the window and leaves a 12px sliver of
     bare backdrop — visible on any window tall enough that this strip is what
     reaches the top edge, i.e. every portrait window. */
  height:calc(max(calc(100% * var(--topR)), calc((100vh - 100%) / 2)) + var(--lap));
  background-image:var(--top);background-repeat:repeat-x;background-position:center bottom;background-size:auto 100%;background-color:var(--room)}
.rm-b{top:100%;left:50%;width:100vw;
  height:max(calc(100% * var(--botR)), calc((100vh - 100%) / 2));
  background-image:var(--bot);background-repeat:repeat-x;background-position:center top;background-size:auto 100%;background-color:var(--room)}
/* THE SIDES CARRY NO ORNAMENT, SO THERE IS NOTHING TO REGISTER.
   Every earlier attempt cut the sides from the same ornate plate as the top and
   bottom, which meant each side ended in tracery, a column or a moulding whose
   run had to line up with the valance above and the seats below. It never could:
   the top and bottom overlay the sides at the corners, so wherever they crossed,
   one piece of ornament was cut mid-stroke by another. The joins measured 0px
   and still looked wrong, because the defect was registration, not geometry.
   These sides are a single uniform run of vertical velvet fold — no moulding, no
   tassel, no horizontal feature anywhere — so there is no ornament to cut and
   nothing that can fail to line up. That also frees the geometry: with no
   detail to preserve, the strip simply stretches to fill its band, which makes
   a gap impossible at any window size rather than merely unlikely.
   The +2px overshoots outward, off-screen, to absorb sub-pixel rounding. */
.rm-l{right:100%;top:0;height:100%;
  width:calc((100vw - 100%) / 2 + 2px);
  background-image:var(--side);background-repeat:no-repeat;background-size:100% 100%;background-color:var(--room)}
.rm-r{left:100%;top:0;height:100%;transform:scaleX(-1);
  width:calc((100vw - 100%) / 2 + 2px);
  background-image:var(--side);background-repeat:no-repeat;background-size:100% 100%;background-color:var(--room)}
/* WHY CENTRING NOW ALIGNS: the top and bottom pieces are cropped SYMMETRICALLY
   about the opening, so centring the image centres the opening. Before, they
   were the full plate width and the opening sat off-centre within it, so
   centring the image put the ornament a few percent to one side of the video
   edges — the mismatch that showed as a seam where the curtain met the gold.
   Their scale never needed adjusting: height is a fixed fraction of the picture
   and background-size keeps the aspect, so the horizontal scale follows.

   THE CORNERS BELONG TO THE TOP AND BOTTOM PIECES, AND ONLY THEM.
   The side strips used to run the full window height, so above and below the
   picture they sat alongside the valance and the seats — two different pieces
   of gold moulding meeting at each corner of the frame at slightly different
   scales, which is exactly the seam that showed. The sides are now exactly as
   tall as the picture, the top and bottom run the full window width, and they
   are stacked above; every corner is therefore drawn by one image instead of
   two, and there is nothing left to misalign.
   The overlap is deliberate: the top and bottom pieces reach a whisker into the
   picture's edge so a sub-pixel rounding gap cannot open a hairline. */
.rm-t,.rm-b{z-index:2}
/* THE CURTAIN HANGS IN FRONT OF THE SCREEN, AND THE SEATS ARE IN FRONT OF BOTH.
   Butted exactly to the picture's edge they read as a border drawn around a
   rectangle. Lapped over it they read as a room the picture sits inside, which
   is the whole point — and it also means a sub-pixel rounding gap can never
   open a hairline at the join.
   Percentages of each strip's own height, so the overlap scales with the room.
   THE LAP IS SMALL BECAUSE THE PLAYER OWNS BOTH EDGES. Twitch puts its channel
   header along the top of the embed and play, volume, settings and fullscreen
   along the bottom, and the strips span the full width, so any generous lap
   buries a control somewhere. The valance hangs a token 5% — enough to sit in
   front of the picture rather than beside it — and the seats do not lap at all,
   because the bottom is where every button lives. A prettier overlap is not
   worth a mute button nobody can reach. */
.rm-t{transform:translateX(-50%) translateY(var(--lap))}
.rm-b{transform:translateX(-50%) translateY(calc(-1 * var(--lapB,0%)))}
.rm-l,.rm-r{z-index:1}

/* Where each plate opening sits, as a fraction of that plate. */
.lvpanel[data-theatre="opera"]{--top:url(/rm-opera-top.webp);--bot:url(/rm-opera-bot.webp);--side:url(/rm-opera-side.webp);--topR:0.398;--botR:0.358;--drape:#572013;--room:#2b1b0c}
.lvpanel[data-theatre="deco"]{--top:url(/rm-deco-top.webp);--bot:url(/rm-deco-bot.webp);--side:url(/rm-deco-side.webp);--topR:0.374;--botR:0.504;--drape:#48593c;--room:#181810}
.lvpanel[data-theatre="baroque"]{--top:url(/rm-baroque-top.webp);--bot:url(/rm-baroque-bot.webp);--side:url(/rm-baroque-side.webp);--topR:0.694;--botR:0.578;--drape:#2a2930;--room:#301f0a}
.lvpanel[data-theatre="moorish"]{--top:url(/rm-moorish-top.webp);--bot:url(/rm-moorish-bot.webp);--side:url(/rm-moorish-side.webp);--topR:0.397;--botR:0.39;--drape:#21252d;--room:#0f1113}
.lvpanel[data-theatre="edwardian"]{--top:url(/rm-edwardian-top.webp);--bot:url(/rm-edwardian-bot.webp);--side:url(/rm-edwardian-side.webp);--topR:0.351;--botR:0.45;--drape:#37281d;--room:#160f0a}
.lvpanel[data-theatre="elven"]{--top:url(/rm-elven-top.webp);--bot:url(/rm-elven-bot.webp);--side:url(/rm-elven-side.webp);--topR:0.605;--botR:0.47;--drape:#37381a;--room:#070703}
.lvpanel[data-theatre="dwarven"]{--top:url(/rm-dwarven-top.webp);--bot:url(/rm-dwarven-bot.webp);--side:url(/rm-dwarven-side.webp);--topR:0.544;--botR:0.555;--drape:#271911;--room:#1c1008}
.lvpanel[data-theatre="celestial"]{--top:url(/rm-celestial-top.webp);--bot:url(/rm-celestial-bot.webp);--side:url(/rm-celestial-side.webp);--topR:0.586;--botR:0.489;--drape:#2b3954;--room:#2b2e31}
.lvpanel[data-theatre="coral"]{--top:url(/rm-coral-top.webp);--bot:url(/rm-coral-bot.webp);--side:url(/rm-coral-side.webp);--topR:0.802;--botR:0.708;--drape:#264c51;--room:#0a191b}
.lvpanel[data-theatre="gothic"]{--top:url(/rm-gothic-top.webp);--bot:url(/rm-gothic-bot.webp);--side:url(/rm-gothic-side.webp);--topR:0.465;--botR:0.396;--drape:#1d0b0b;--room:#090202}

/* The picture fills the panel exactly — the panel is already 16:9. */
/* THE PICTURE STARTS WHERE THE CURTAIN ENDS. NOTHING MAY PAINT OVER IT.
   The top strip hangs --lap in front of the picture, which is the crop effect
   that makes the curtain read as being in the room rather than framing a
   rectangle. It used to do that by covering the top of the player, and a
   cross-origin iframe with anything painted over it is pushed off the
   compositor's fast path: the video froze on one rasterised frame and clicks
   stopped being attributable to the frame, so play, volume and fullscreen all
   went dead with nothing visible on top of them. Hiding this one strip was
   enough to bring the player fully back, which is how it was found.
   Insetting the stage by the same --lap keeps the look exactly — the curtain
   still ends over where the picture begins — while the strip's lower edge now
   meets the iframe instead of covering it. The player letterboxes itself, so
   losing 12px of height costs nothing visible. */
.lvmstage{position:absolute;inset:var(--lap) 0 0 0;z-index:1;background:#000;border:0}
.lvmstage iframe,.lvmslot{width:100%;height:100%;border:0;display:block}

.lvmclose{position:absolute;top:calc(100% + 10px);left:0;opacity:.42;transition:opacity .2s ease,color .18s ease,background .18s ease;z-index:6;width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(240,205,119,.55);border-radius:50%;color:#f0cd77;
  background:rgba(8,4,5,.72);backdrop-filter:blur(4px);
  transition:color .18s ease,background .18s ease}
.lvmodal:hover .lvhouses,.lvmodal:hover .lvmclose,
.lvhouses:focus-within,.lvmclose:focus-visible{opacity:1}
.lvmclose:hover{color:#0d0508;background:#f0cd77;opacity:1}
.lvmclose:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* SMALLER VIEWPORT, SMALLER PLATE. Below 1100px the panel is never wider than
   about 1050 CSS pixels, so a 1920px backdrop is downscaled on arrival and the
   extra bytes buy nothing. The 1280px cut is the same artwork at half the
   weight — 63-98KB against 126-198KB — and the screen coordinates are
   unchanged because both are cropped to the same 16:9 frame.
   No polling and no resize listener: the browser already re-evaluates this at
   every reflow, before paint, which a JS handler cannot beat. */

/* The house picker. Bottom-left, quiet, out of the way of the picture. */
/* OFF THE PICTURE ENTIRELY, ONTO THE SEATS.
   These have now covered the player's volume slider (bottom left) and its LIVE
   badge and settings (top right) in turn, because every corner of a Twitch
   embed is already spoken for. The answer is not another corner — it is to stop
   putting them on the video at all. They sit just below the frame, on the seat
   rows, where the embed has no controls and the eye is not looking.
   Held at low opacity so they read as part of the room, and brought to full on
   hover or keyboard focus so they are still obviously operable. */
.lvhouses{position:absolute;top:calc(100% + 10px);right:0;z-index:6;display:flex;gap:6px;
  padding:5px 7px;border-radius:20px;background:rgba(8,4,5,.55);backdrop-filter:blur(4px);
  opacity:.42;transition:opacity .2s ease}
.lvhouse{width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.25);transition:transform .16s ease,border-color .16s ease}
.lvhouse:hover{transform:scale(1.15)}
.lvhouse.on{border-color:#f0cd77;box-shadow:0 0 0 2px rgba(240,205,119,.35)}
.lvhouse:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lvhouse[data-house="opera"]{background:linear-gradient(135deg,#8c1a2b,#c9a24a)}
.lvhouse[data-house="deco"]{background:linear-gradient(135deg,#1f6b5c,#c9a24a)}
.lvhouse[data-house="baroque"]{background:linear-gradient(135deg,#17325e,#d9b45e)}
.lvhouse[data-house="moorish"]{background:linear-gradient(135deg,#3d2450,#9fb6c4)}
.lvhouse[data-house="edwardian"]{background:linear-gradient(135deg,#2c4630,#b5714a)}
.lvhouse[data-house="elven"]{background:linear-gradient(135deg,#2f6b3a,#c9a24a)}
.lvhouse[data-house="dwarven"]{background:linear-gradient(135deg,#7a3a1c,#c07a2a)}
.lvhouse[data-house="celestial"]{background:linear-gradient(135deg,#1b2a6b,#c9c9e8)}
.lvhouse[data-house="coral"]{background:linear-gradient(135deg,#0f6b70,#e8907a)}
.lvhouse[data-house="gothic"]{background:linear-gradient(135deg,#5e0d16,#9aa0a6)}
.lvhouse[data-house="drawn-opera"]{background:linear-gradient(135deg,#a8203a,#ffe9a8);border-style:dashed}

/* A phone has no room for a proscenium, and a 184KB backdrop to look at a
   sliver of gold is a poor trade on cellular. The room comes off entirely and
   the picture takes the width — the point was always the film, not the room. */
@media(max-width:760px){
  .lvpanel{width:100vw}
  .rm{display:none}
  .lvhouses{display:none}
  .lvmclose{top:8px;right:8px}
}
.lvmhead{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;padding:14px 16px 12px}
.lvmmeta{min-width:0}
.lvmhead h3{margin:0 0 4px;font:600 15px/1.35 var(--font-body);color:var(--fg)}
.lvmhead p{margin:0;font:500 11px/1.4 var(--font-mono);color:var(--dimmer)}
.lvmacts{display:flex;gap:6px;flex:0 0 auto}
.lvmbtn{font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:9px 11px;border:1px solid var(--line2);border-radius:var(--radius);
  background:transparent;color:var(--dim);cursor:pointer;white-space:nowrap}
.lvmbtn:hover{color:var(--fg);border-color:var(--accent)}
.lvmslot,.lvmslot iframe{width:100%;height:100%;border:0;display:block}
.lvmnote{margin:0;padding:11px 16px;font:500 10.5px/1.5 var(--font-mono);color:var(--dimmer)}
/* Follow is the low-commitment action and reads as the primary one here.
   Subscribe is money, so it is deliberately quieter — an upsell styled louder
   than the free action is the oldest dark pattern in streaming. */

.lvmposter{position:absolute;inset:0;z-index:2;background:#000;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.lvmposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;filter:saturate(.7) blur(1px)}
.lvmspin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;
  font:600 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#e8eef5;
  text-shadow:0 1px 12px #000}
.lvmspin i{width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);
  animation:lvspin .8s linear infinite}
@keyframes lvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.lvmspin i{animation-duration:2.4s}}
@media(max-width:640px){
  .lvmodal{padding:0}
  /* 100vh on iOS Safari means the viewport WITHOUT the browser chrome, so a
     full-height panel is taller than the space actually visible and its bottom
     — which is where the Follow and Subscribe buttons live — sits under the
     toolbar. 100dvh tracks the chrome as it collapses. The 100vh line stays
     first as the fallback for anything that does not know dvh. */
  .lvpanel{max-height:100vh;max-height:100dvh;border-radius:0;border:0}
  .lvmhead{flex-direction:column;gap:10px}
}


/* THE PANEL SITS ON THE CURTAIN AND LEANS IN.
   Its width is the side band plus a fixed lap, capped: on a wide window the
   band alone is wider than chat needs, so the cap keeps it entirely on the
   curtain and off the picture. Only when the band is narrow does the lap eat
   into the frame, which is the trade the narrow window forces anyway.

   It stops short of the bottom on purpose. The player draws its own control bar
   across the full width of the picture, so a panel running to the floor would
   cover the settings and fullscreen controls at the right-hand end of it. The
   floor here clears that bar at every size rather than at most of them. */
.lvchat{position:absolute;z-index:3;
  top:5%;bottom:auto;
  height:var(--chatH, calc(95% - max(58px, 11%)));
  right:calc((100vw - 100%) / -2 + 10px);
  width:var(--chatW, min(340px, calc((100vw - 100%) / 2 + 96px)));
  display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  /* The drape colour is the theatre's own, measured from its plates. */
  /* NO backdrop-filter, even though this is exactly the element that wants one.
     It laps over the player, and a backdrop-filter forces the compositor to
     rasterise what is behind it — which here is a cross-origin iframe. That
     froze the picture and stopped clicks reaching the player's own controls.
     The same mistake, in the same modal, already cost the backdrop its blur.
     A two-stop tint gives the panel depth without compositing the video. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)),
    color-mix(in oklab, var(--drape,#1d1512) calc(var(--chatA,.72) * 100%), transparent);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.08);
  color:#f2ece6}
/* [hidden] is only a UA default: the display rule above would beat it. */
.lvchat[hidden]{display:none!important}

.lvchathead{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.10)}
.lvchatname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.lvchatstate{flex:0 0 auto;font:500 9.5px/1 var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}

/* The slider has a floor. Below roughly a quarter opacity, text over a lit
   velvet fold fails contrast no matter what colour it is, so the range simply
   does not go there rather than offering a setting that cannot be read. */
.lvchatop{flex:0 0 auto;width:62px;height:14px;cursor:pointer;accent-color:#f0cd77;background:none}
.lvchatx{flex:0 0 auto;width:20px;height:20px;padding:0;display:grid;place-items:center;
  border:0;border-radius:4px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);cursor:pointer}
.lvchatx:hover{background:rgba(255,255,255,.16);color:#fff}
.lvchatx:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.lvchatlog{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 9px 10px;display:flex;flex-direction:column;gap:5px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.lvchatlog::-webkit-scrollbar{width:7px}
.lvchatlog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}

/* THE MESSAGE IS ONE FLOWING PARAGRAPH, WHICH IS WHAT EVERY CHAT DOES.
   The name, the colon and the message body are inline, so an emote sits directly
   beside the name when there is room and wraps to the next line only when the row
   genuinely runs out — the same behaviour as Twitch, Discord and 7TV, and the
   reason it feels familiar rather than merely functional.

   The shadow is what makes 12.5px text survive a bright velvet fold behind it. */
.lvmsg{font:400 12.5px/1.5 var(--font-body);
  /* break-word, NOT anywhere. "anywhere" breaks inside a word at the exact
     character the line ends on, which no chat client does and which reads as a
     rendering fault. This keeps whole words together and only breaks a token
     that genuinely cannot fit — a long unspaced URL or a wall of one word. */
  overflow-wrap:break-word;word-break:normal;
  text-shadow:0 1px 2px rgba(0,0,0,.9)}
.lvmsg b{font-weight:700}
/* The name and its colon must never be split across a line break: a colon
   orphaned at the start of a row reads as punctuation nobody typed. */
.lvmsg b,.lvmsg .lvsep{white-space:nowrap}
.lvmsg .lvsep{color:rgba(255,255,255,.35)}
/* vertical-align:middle centres the emote on the text's own midline, which is
   what makes it sit BESIDE the name rather than hanging off the baseline. The
   previous -.35em was a guess that only looked right at one font size. 1.75em is
   ~22px here, close to the 28px every chat renders emotes at, scaled to a panel
   this narrow. Rows containing emotes get taller; that is correct and familiar. */
.lvmsg img{height:1.75em;width:auto;display:inline-block;vertical-align:middle;
  margin:0 2px;object-fit:contain}
/* A reply quotes its parent in one dim line so the thread is legible without
   the panel turning into a tree it has no room to draw. */
.lvre{display:block;font:400 10.5px/1.35 var(--font-body);color:rgba(255,255,255,.44);
  margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvchatnote{font:500 10.5px/1.5 var(--font-mono);color:rgba(255,255,255,.4);text-align:center;padding:6px 0}

/* RESIZE FROM THE INSIDE CORNER, AND ONLY INWARD.
   The panel is pinned to the window's right edge, so the only free corner is
   the bottom-left one — dragging it left widens the panel and dragging it down
   lengthens it. The drag is clamped in JS rather than CSS because the lower
   bound is not a constant: it is wherever the player's control bar starts, and
   the reader must not be able to size the panel over their own volume slider. */
.lvchatgrip{position:absolute;left:0;bottom:0;width:16px;height:16px;padding:0;
  border:0;background:none;cursor:nesw-resize;touch-action:none;color:rgba(255,255,255,.5)}
.lvchatgrip:hover,.lvchatgrip:focus-visible{color:#f0cd77}
.lvchatgrip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lvchatgrip svg{display:block;width:16px;height:16px}

/* Below the width where a 340px panel would swallow the picture, chat is a
   sheet over the whole frame rather than a column beside it. */
@media (max-width:820px){
  .lvchat{top:auto;bottom:0;right:0;left:0;width:auto;height:52%;border-radius:10px 10px 0 0}
}
@media (prefers-reduced-transparency:reduce){
  .lvchat{background:var(--drape,#1d1512)}
}

/* The toggle joins the theatre picker's row, so the chrome stays one cluster in
   one place instead of sprouting a second control somewhere else on the frame. */
/* left:44px, not 0: the close button is a 34px circle at left:0 in this same
   row, and a toggle at 0 covered it completely and made it unclickable. */
.lvchattoggle{position:absolute;top:calc(100% + 10px);left:44px;z-index:6;
  opacity:0;transition:opacity .18s ease,color .18s ease,border-color .18s ease;
  height:22px;padding:0 9px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.42);color:rgba(255,255,255,.8);
  font:700 9px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.lvchattoggle:hover{color:#fff;border-color:#f0cd77}
.lvchattoggle[aria-pressed="true"]{border-color:#f0cd77;color:#f0cd77}
.lvchattoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Same reveal as the rest of the frame's chrome: invisible until the reader
   goes looking for it, so it never sits on top of the room. */
.lvmodal:hover .lvchattoggle,.lvchattoggle:focus-visible,
.lvchattoggle[aria-pressed="true"]{opacity:1}

/* The page IS the theatre, so there is no page behind it to scroll and the
   modal is open from the first paint rather than revealed. */
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
.lvmodal{position:fixed;inset:0}
.thnote{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:8;
  margin:0;padding:8px 14px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line-ui);
  font:600 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--fg-meta)}
.thnote:empty{display:none}