/* r3 shared: theme tokens, brand colours (from aubrey.me), page frame, toggle, footer. */
:root, [data-theme="light"] {
  --bg: #fff; --ink: #121212; --muted: #9a9a9a; --chip: #f1f1f1; --chip-hover: #e8e8e8;
  --surface: #f4f4f4; --surface-stroke: rgb(18 18 18 / 7%); --tile: #fff; color-scheme: light;
  --twilio: #ED2024; --microsoft: #727272; --acorns: #6EC651; --redbull-a: #CC1E4A; --redbull-b: #FFC906;
  --starbucks: #006241; --walmart: #0053E2; --venmo: #008CFF; --paypal-a: #253B80; --paypal-b: #169BD7;
  --canon: #CC0000; --authy: #F21016; --dosh: #683CAF; --newthing: #003449; --science: #333333; --science-inc: #EF3B24;
}
[data-theme="dark"] {
  --bg: #121212; --ink: #fff; --muted: #7a7a7a; --chip: #1f1f1f; --chip-hover: #292929;
  --surface: #1c1c1c; --surface-stroke: rgb(255 255 255 / 7%); --tile: #fff; color-scheme: dark;
  /* Lift brand colours that vanish on #121212. */
  --microsoft: #a3a3a3; --starbucks: #00A862; --walmart: #3D82F5; --paypal-a: #5C7CD6; --dosh: #9A72E0;
  --canon: #F03A3A; --newthing: #30FFC1; --science: #d6d6d6;
}
:root {
  --pad: clamp(20px, 3vw, 44px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { margin: 0; }
/* Tooltip halos and blobs extend past the viewport edge on narrow screens; clip (not hidden, so
   no scroll container is created) to stop sideways scrolling. */
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-trial, "Haffer"), system-ui, sans-serif;
       display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad);
       transition: background-color 200ms ease, color 200ms ease; }

/* Top bar: logo mark (left) and theme toggle (right), same 44px hit area and ~18px glyph so they
   balance. The bolt is the favicon's glyph without its white tile, drawn in the text colour. */
.top { display: flex; justify-content: space-between; align-items: center; }
.mark { width: 44px; height: 44px; margin: -12px 0 0 -12px; display: grid; place-items: center; border-radius: 999px;
        color: var(--ink); transition: background-color 150ms ease, transform 150ms var(--ease-out); }
.mark svg { width: auto; height: 22px; }
@media (hover: hover) and (pointer: fine) { .mark:hover { background: var(--chip); } }
.mark:active { transform: scale(.94); }
.mark:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.theme { justify-self: end; width: 44px; height: 44px; margin: -12px -12px 0 0; display: grid; place-items: center;
         border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer;
         transition: background-color 150ms ease, transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .theme:hover { background: var(--chip); } }
.theme:active { transform: scale(.94); }
.theme:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.theme svg { width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }
[data-theme="dark"] .theme svg { transform: rotate(180deg); }

.id { display: grid; gap: 2px; font-size: 15px; letter-spacing: 0; line-height: 1.4; margin-bottom: 32px; }
.id h1 { font-size: inherit; font-weight: 500; }
.id p { color: var(--muted); }
.bias { margin-top: 28px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }

footer { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
footer nav { display: flex; gap: 24px; }
footer a { color: var(--ink); padding: 12px 0; margin: -12px 0; transition: opacity 150ms ease; }
@media (hover: hover) and (pointer: fine) { footer a:hover { opacity: .55; } }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }