@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:#0a0a0b;--surface:#111113;--line:#1e1e21;--line2:#2a2a2f;--fg:#e8e6e3;--dim:#8a8a92;--dimmer:#64646c;--accent:#ff5a1f;--accent-soft:rgba(255,90,31,.1);--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:0;--img-filter:none;--display-transform:none;--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="thermal"]{color-scheme:dark;--bg:#0a0a0b;--surface:#111113;--line:#1e1e21;--line2:#2a2a2f;--fg:#e8e6e3;--dim:#8a8a92;--dimmer:#64646c;--accent:#ff5a1f;--accent-soft:rgba(255,90,31,.1);--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:0;--img-filter:none;--display-transform:none;--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="phosphor"]{color-scheme:dark;--bg:#000400;--surface:#040a04;--line:#0f1f0f;--line2:#1a331a;--fg:#b8f0b8;--dim:#569356;--dimmer:#416b41;--accent:#39ff5e;--accent-soft:rgba(57,255,94,.09);--accent-ink:#000400;--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:none;--display-transform:uppercase;--display-weight:700;--display-spacing:.02em;--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="amber"]{color-scheme:dark;--bg:#0a0600;--surface:#120c02;--line:#271a06;--line2:#3b2909;--fg:#ffcb80;--dim:#a37136;--dimmer:#805c2e;--accent:#ffa116;--accent-soft:rgba(255,161,22,.1);--accent-ink:#0a0600;--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:none;--display-transform:uppercase;--display-weight:700;--display-spacing:.02em;--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="blueprint"]{color-scheme:dark;--bg:#071019;--surface:#0c1a27;--line:#152b3d;--line2:#1f3d55;--fg:#d6ecff;--dim:#6e93b3;--dimmer:#4f6d82;--accent:#4db8ff;--accent-soft:rgba(77,184,255,.11);--accent-ink:#071019;--font-display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--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:none;--display-transform:uppercase;--display-weight:700;--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="ice"]{color-scheme:dark;--bg:#0d1013;--surface:#151a1f;--line:#1f272e;--line2:#2c3740;--fg:#e9eef2;--dim:#8896a1;--dimmer:#5e6b75;--accent:#5ad2e6;--accent-soft:rgba(90,210,230,.1);--accent-ink:#0d1013;--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:none;--display-transform:none;--display-weight:750;--display-spacing:-.025em;--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="signal"]{color-scheme:dark;--bg:#08000a;--surface:#110316;--line:#230a2c;--line2:#361044;--fg:#f3e6f7;--dim:#a077ad;--dimmer:#74567e;--accent:#ff2bd6;--accent-soft:rgba(255,43,214,.12);--accent-ink:#08000a;--font-display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--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:none;--display-transform:uppercase;--display-weight:800;--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="slate"]{color-scheme:dark;--bg:#141516;--surface:#1c1d1f;--line:#282a2c;--line2:#383b3e;--fg:#e6e7e8;--dim:#90939a;--dimmer:#696c72;--accent:#9aa7b4;--accent-soft:rgba(154,167,180,.11);--accent-ink:#141516;--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:none;--display-transform:none;--display-weight:700;--display-spacing:-.025em;--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="solar"]{color-scheme:dark;--bg:#002028;--surface:#052b34;--line:#0d3b46;--line2:#14505d;--fg:#d3e3e3;--dim:#7fa0a2;--dimmer:#5d797c;--accent:#e8a33d;--accent-soft:rgba(232,163,61,.11);--accent-ink:#002028;--font-display:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--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:none;--display-transform:none;--display-weight:700;--display-spacing:-.02em;--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="paperwhite"]{color-scheme:light;--bg:#fbfbfa;--surface:#ffffff;--line:#e6e6e3;--line2:#cfcfcb;--fg:#16181a;--dim:#5c6166;--dimmer:#8b9096;--accent:#d2410f;--accent-soft:rgba(210,65,15,.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:2px;--img-filter:none;--display-transform:none;--display-weight:800;--display-spacing:-.03em;--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="contrast"]{color-scheme:dark;--bg:#000000;--surface:#0a0a0a;--line:#333333;--line2:#4d4d4d;--fg:#ffffff;--dim:#c4c4c4;--dimmer:#9a9a9a;--accent:#ffe500;--accent-soft:rgba(255,229,0,.14);--accent-ink:#000000;--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:none;--display-transform:none;--display-weight:800;--display-spacing:-.02em;--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}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}


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

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

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

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

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

.pill{font:600 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border:1px solid var(--line2);color:var(--dim);border-radius:var(--radius);background:var(--surface);cursor:pointer}
.pill:hover{color:var(--fg);border-color:var(--accent)}
select.pill{appearance:none;padding-right:26px}
main{max-width:1080px;margin:0 auto;padding:0 24px 80px}
.stats{display:flex;gap:34px;flex-wrap:wrap;padding:26px 0 22px;border-bottom:1px solid var(--line);margin-bottom:6px}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats b{font:600 22px/1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats b em{font-style:normal;font-size:12px;color:var(--dimmer);margin-left:1px}
.stats span{font:500 10px/1 var(--font-mono);color:var(--dimmer);letter-spacing:.13em;text-transform:uppercase}
.story{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:19px 0;border-bottom:1px solid var(--line)}
.story:hover .score{color:var(--fg)}
.rail{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding-top:2px}
.score{font:600 17px/1 var(--font-mono);color:var(--dim);font-variant-numeric:tabular-nums;transition:color .15s}
.lane{font:600 9px/1 var(--font-mono);letter-spacing:.1em;padding:3px 5px;border:1px solid var(--line2);color:var(--dimmer);border-radius:var(--radius)}
.lane-breaking .lane{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.lane-breaking .score{color:var(--accent)}
h2{margin:0 0 8px;font:600 17px/1.34 var(--font-body);letter-spacing:-.012em}
h2 a:hover{color:var(--accent)}
.meta{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--font-mono);color:var(--dimmer);margin-bottom:10px;flex-wrap:wrap}
.vert{color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.sub{color:var(--accent);text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.inherit{color:var(--dimmer);text-transform:uppercase;letter-spacing:.08em;opacity:.6}
.dot{opacity:.4}
.bars{display:inline-flex;gap:2px;margin-left:3px}
.bars i{width:16px;height:3px;background:var(--line2);position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;width:calc(var(--v)*100%);background:var(--accent);opacity:.85}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font:500 10px/1 var(--font-mono);padding:4px 7px;border:1px solid var(--line);color:var(--dimmer);border-radius:var(--radius)}
.chip.t1{color:var(--accent);border-color:var(--accent);opacity:.9}
.chip.t2{color:var(--dim)}
.empty{padding:120px 0}
.empty h2{font:var(--display-weight) 30px/1 var(--font-display);letter-spacing:var(--display-spacing);margin:0 0 12px}
.empty p{color:var(--dim);margin:0}
footer{max-width:1080px;margin:0 auto;padding:0 24px 60px;color:var(--dimmer);font:500 11px/1.7 var(--font-mono)}
@media(max-width:640px){.story{grid-template-columns:52px 1fr;gap:13px}.stats{gap:22px}h2{font-size:16px}}