:root[data-skin=onyx]{
/* ONYX. Pure black, the way Apple's own dark screens are: the page is #000,
   the panels are the two greys immediately above it, and the only saturated
   thing on screen is the blue you are meant to press.

   There is one face, not two. Chalk had a day face and a night face; Onyx is
   black at every hour, and `_sheet()` below prints it under every one of the
   selectors those two faces used to divide between.

   Contrast was measured on #000, not inherited: every ink below clears 4.5:1
   on the black and on all three panels, and `--accent` is a darker blue than
   `--accent-ink` precisely so that white lettering on the filled button clears
   it too — the brighter blue is for words on the black, where it has the
   contrast to spare. */
--bg:#000000;--dot:#101014;
--panel:#0E0E11;--panel2:#151519;--panel3:#1D1D22;
--line:#212127;--line2:#2E2E36;--line3:#48484F;
--ink:#F5F5F7;--ink2:#A1A1A6;--ink3:#86868B;
/* `--accent` is a fill and `--accent-ink` is a letterform. White on the fill
   clears 4.9:1; the letterform on black clears 8:1. */
--accent:#0A6FE0;--accent-ink:#4DA3FF;--on-accent:#FFFFFF;
--good:#30D158;--warn:#FF9F0A;--bad:#FF453A;
/* `--c1`..`--c4` are wayfinding for the four phases of the run, never data.
   Every one of them appears beside a phase name in words and a step number, so
   nothing in the product is encoded by colour alone. */
--c1:#4DA3FF;--c2:#BF5AF2;--c3:#64D2FF;--c4:#FF9F0A;
/* One face, the system face, at every size. The serif token still exists
   because every rule in the app names it; here it resolves to the grotesque,
   which is what makes the product read as software rather than as print. */
--serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
/* The light falling across the top of the canvas. On black it is a glow rather
   than a wash — strong enough to give the canvas a top, faint enough that no
   figure sitting in it loses contrast. */
--wash:radial-gradient(58% 52% at 72% 26%,rgba(10,132,255,.13),
rgba(10,132,255,.045) 45%,transparent 74%);
--beam-a:rgba(77,163,255,.22);--beam-b:rgba(50,120,210,.09);
--beam-core:rgba(230,242,255,.34);--sheen:rgba(255,255,255,.42);
color-scheme:dark
}:root[data-layout=focus]{
/* FOCUS. Tight corners, tight rows, a narrow rail, so a table of thirty
   competitors is one screen rather than two. This is a product to work in
   rather than to present from, and the density is the difference. */
--rail:200px;--r:9px
}
[data-layout=focus] .top{min-height:50px;padding:0 12px}
[data-layout=focus] .rail{padding:9px 7px 32px}
[data-layout=focus] .r{padding:5px 7px;font-size:12px;border-radius:7px}
[data-layout=focus] .rs{padding:3px 7px;font-size:11.5px}
[data-layout=focus] .rail-h{padding:11px 8px 4px}
[data-layout=focus] .canvas{padding:16px 18px 110px}
[data-layout=focus] .sheet{max-width:1240px}
[data-layout=focus] .sec{padding-top:24px}
[data-layout=focus] .sec-h h2{font-size:19px}
[data-layout=focus] h1{font-size:23px}
[data-layout=focus] .card{padding:13px 15px;margin-bottom:9px}
[data-layout=focus] .tile{padding:8px 10px;border-radius:8px}
[data-layout=focus] .tile b{font-size:18px}
[data-layout=focus] td,[data-layout=focus] th{padding:5px 8px}
[data-layout=focus] table{font-size:12.5px}