/* v1.52 (jay 2026.10.02): one colour per state. every coloured thing on these pages is the state colour --c (teal #1AADB3 at 1x, the default): text accents, links,
   icons, the daily lines + arrows, the rocket body, the rain, the hint, the cursor, the glows. the one exception is the flame/charge colour --f (orange #FF4D1A at 1x):
   the rocket's flame (+ hot core, sparks, hot smoke), the charge port's LED and the charging cable (fill, flow, the full-charge pulse + its tints; the empty track
   is the input's line, so it's --c). one tap (2x, html[data-mode="fast"], set by mode() in rain.js) is an exact inversion: --c turns orange, --f turns teal, tints
   included. white, gold and the dim colours stay. links are no longer set apart by colour (the arrows etc. stay). not persisted: the speed state isn't either.
   was (v1.51): teal accents + orange tappables, swapped at 2x */
:root{--c:#1AADB3;--c-rgb:26,173,179;--c-lt:#5FD6DA;--c-dk:#0E7C81;--c-pale:#C9F3F4;--c-hot:#d2f6f7;--c-wh:#E6FBFB;--c-lt-rgb:127,218,221;--c-lt2:#74CED2;
  --c-l1-rgb:107,203,207;--c-l2-rgb:118,208,211;--c-l3-rgb:129,212,215;--c-l4-rgb:74,191,196;--c-l5-rgb:226,245,246;
  --f:#FF4D1A;--f-rgb:255,77,26;--f-lt:#FF8A5E;--f-dk:#B8300A;--f-pale:#FFD7C9;--f-wh:#FFE6DC;--f-lt2:#FF9A6E;--f-l4-rgb:255,120,70;--f-l5-rgb:255,236,224}
:root[data-mode="fast"]{--c:#FF4D1A;--c-rgb:255,77,26;--c-lt:#FF8A5E;--c-dk:#B8300A;--c-pale:#FFC2A8;--c-hot:#ffd9cc;--c-wh:#FFE6DC;--c-lt-rgb:255,158,127;--c-lt2:#FF9A6E;
  --c-l1-rgb:255,150,100;--c-l2-rgb:255,160,110;--c-l3-rgb:255,170,120;--c-l4-rgb:255,120,70;--c-l5-rgb:255,236,224;
  --f:#1AADB3;--f-rgb:26,173,179;--f-lt:#5FD6DA;--f-dk:#0E7C81;--f-pale:#C9F3F4;--f-wh:#DDF3F4;--f-lt2:#74CED2;--f-l4-rgb:74,191,196;--f-l5-rgb:226,245,246}
/* v1.52 (jay 2026.10.02): gold (the liftoff / thank-you gold #FFD700, same tints). .gld on an element (the gold pulse, see gold() in rain.js) or on <html> (pulse done)
   turns --c and --f gold for it and everything inside; white, the dims and the layout stay. beats both speed states, so a speed tap while gold keeps it gold */
.gld,:root.gld,:root.gld[data-mode="fast"]{--c:#FFD700;--c-rgb:255,215,0;--c-lt:#FFE066;--c-dk:#C99A00;--c-pale:#FFF6C2;--c-hot:#FFFBE8;--c-wh:#FFFBE8;--c-lt-rgb:255,230,102;--c-lt2:#FFE766;
  --c-l1-rgb:255,224,102;--c-l2-rgb:255,231,120;--c-l3-rgb:255,236,150;--c-l4-rgb:255,190,0;--c-l5-rgb:255,246,194;
  --f:#FFD700;--f-rgb:255,215,0;--f-lt:#FFE066;--f-dk:#C99A00;--f-pale:#FFF6C2;--f-wh:#FFFBE8;--f-lt2:#FFE766;--f-l4-rgb:255,190,0;--f-l5-rgb:255,246,194}
/* while the pulse runs (and while it fades back) colour changes ease (--au-t, set by gold() / goldOff()) instead of snapping */
html.au-wave body *{transition-property:color,background-color,border-color,fill,stroke,stop-color,text-shadow,box-shadow,outline-color,opacity!important;transition-duration:var(--au-t,.3s)!important;transition-delay:0s!important;transition-timing-function:ease!important}
/* v1.55: goldOff({snap}) turns transitions off for two frames, so gold -> teal is instant */
html.au-snap,html.au-snap *,html.au-snap *::before,html.au-snap *::after{transition:none!important}
/* the background glows: a gold twin (made with the orange one in rain.js) shows instead while gold */
.glow-au{opacity:0}.gld .glow:not(.glow-au),.glow.gld:not(.glow-au){opacity:0!important}.gld .glow-au,.glow-au.gld{opacity:.85!important}
/* v1.53 (jay 2026.10.02): light + dark theme, following the system (prefers-color-scheme), on every page. dark (as before, unchanged): pure black #000 background,
   white text. light: pure white #fff background, the white text turns black #000, every state works the same (teal state, orange inverted state, gold skip flash +
   signup gold, flame/charge the opposite colour). neutral colours read these: --bg/--bg-rgb (the background + the dark halos behind text, which turn white), --fg/--fg-rgb
   (white text + white-hot heads), --gk (white-hot glows: 1 dark, .45 light, so black glows on white stay soft), --ink-rgb (placeholders), --au* (the liftoff /
   thank-you gold), --dim-w (the dim wake). light-only deeper shades (contrast on white; dark keeps the exact current colours):
   teal #1AADB3 -> #127F84 (2.74:1 -> 4.78:1; v1.60, jay 2026.10.03: was #13888D, 4.26:1, under wcag aa's 4.5:1 for body text), gold #FFD700 -> #A67C00 (1.40:1 -> 3.82:1; hot gold #FFFBE8 -> #7A5C00, light gold #FFE066 -> #B8860B),
   the near-white "hot" heads (#d2f6f7 / #ffd9cc / #FFFBE8) -> deep teal #0B6569 / deep orange #B8300A / deep gold #7A5C00, dim wake #8fa9aa -> #6E8B8C (2.49 -> 3.66:1).
   orange #FF4D1A -> #E85D0C (v1.58, jay 2026.10.03: a truer orange, 3.50:1 on white, hue 22deg; #D93D11 (4.54:1, hue 13deg) read too red. #F0650A was more orange but only 3.20:1. the tints moved with it: the same hue +9deg; was #D93D11 on the line from #FF4D1A to the brand dark orange #B8300A, its bright core). the rain on white is the state colour itself (see rain.js) */
:root{--fg:#fff;--fg-rgb:255,255,255;--bg-rgb:0,0,0;--gk:1;--ink-rgb:246,239,233;--au:#FFD700;--au-rgb:255,215,0;--au-hot:#FFFBE8;--au-lt:#FFE066;--dim-w:#8fa9aa}
@media (prefers-color-scheme:light){
  :root{--bg:#fff;--bg-rgb:255,255,255;--fg:#000;--fg-rgb:0,0,0;--gk:.45;--ink:#000;--ink-rgb:0,0,0;--ink-2:rgba(0,0,0,.72);--ink-3:rgba(0,0,0,.5);--white:#000;
    --au:#A67C00;--au-rgb:166,124,0;--au-hot:#7A5C00;--au-lt:#B8860B;--dim-w:#6E8B8C;--c:#127F84;--c-rgb:18,127,132;--c-hot:#0B6569;--c-wh:#0B6569;
    --f:#E85D0C;--f-rgb:232,93,12;--f-lt:#FF872F;--f-dk:#8B3808;--f-pale:#FFC39A;--f-wh:#B84A0A;--f-lt2:#FF963F;--f-l4-rgb:255,121,23;--f-l5-rgb:255,219,177}
  :root[data-mode="fast"]{--c:#E85D0C;--c-rgb:232,93,12;--c-lt:#FF872F;--c-dk:#8B3808;--c-pale:#FFB579;--c-hot:#B84A0A;--c-wh:#B84A0A;--c-lt-rgb:255,148,80;--c-lt2:#FF963F;
    --c-l1-rgb:255,148,53;--c-l2-rgb:255,158,63;--c-l3-rgb:255,167,73;--c-l4-rgb:255,121,23;--c-l5-rgb:255,219,177;--f:#127F84;--f-rgb:18,127,132}
  .gld,:root.gld,:root.gld[data-mode="fast"]{--c:#A67C00;--c-rgb:166,124,0;--c-hot:#7A5C00;--c-wh:#7A5C00;--f:#A67C00;--f-rgb:166,124,0}
  .scan{display:none}   /* the scan lines are a screen blend: nothing on white */
  .glows{opacity:.5}   /* the soft background glows at half strength, so the page reads white (not tinted) */
  .rk-sky .smk,.rk-sky .plm,.rk-sky .puff.smoke{filter:brightness(.62)}   /* the white liftoff / crash smoke would vanish on white: grey it */
}
/* v1.78: "tap screen for speed +". no chevrons. the colour is the current speed colour (--c), so a speed tap and the light theme recolour it with everything else. 22ch is the sentence, reserved before the words are written, so the corner does not grow. readable, still small.
   v1.82: phones only. 11px, and 6px under the safe area (was 13px and 11px), so the hint clears the date. the 22ch box stays. desktop is unchanged.
   v1.83: the hint sits above the scan overlay (z-index 30), which fades over the top and bottom 20% of the page. that fade stays on the rain, the glows, and the scan lines. on a phone the hint is solid (was opacity .92 with an 8px text-shadow), so the glyphs are not washed by that shadow. position and size stay at the v1.82 values. */
/* v1.97 (jay 2026.10.09): one content column on every page. --left is the left inset, --edge the right inset, --col the width.
   desktop is the homepage measure (72ch at 18px = 777.6px) and stays inside the viewport. a phone is 24px on each side.
   a page's main column, the habits grids, the footer, and the homepage icon rows all use margin-left:var(--left) and width:var(--col). */
:root{--left:max(64px,calc((100vw - 1312px)/2));--edge:24px;--col:min(777.6px,calc(100vw - var(--left) - var(--edge)))}
@media (max-width:760px){:root{--left:24px;--edge:24px;--col:calc(100vw - var(--left) - var(--edge))}}
/* v2.03 (jay 2026.10.10): the caret that used to stay after the intro is gone. the ninja (first in the row) pulses instead, in the speed colour, on the same 1.05s as the old blink. a page with no intro starts that pulse on load (foot.js). a reduced-motion page keeps a still glow. the transform does not change the row.
   v2.19: the title ninja pulses from the moment the row exists, not after the grids finish. the glow is the speed colour (--c). reduced motion is that same glow, still, from the start. */
/* v2.04 (jay 2026.10.10): the rain canvas is not dimmed in css. every page uses the homepage floor (behind the text, footer left alone) from rain.js, and a tall page keeps the homepage's drop count per screen, so a subpage is as bright and as dense as the homepage.
   v2.28: the canvas is fixed to the large viewport. 100vh is the fallback; 100lvh wins where it exists and does not track iOS Safari's toolbar, so a scroll does not resize the bitmap.
   v2.29: that floor is 50% (was 75%).
   v2.30: that floor is 25% (was 50%).
   v2.50: that 25% is the only floor, on every page, behind the column, the snaps gallery, and the footer. a phone applies it to the whole screen. the canvas stays undimmed in css.
   v2.52: /snaps is full strength, no floor. home, tweets, quotes, and confirmed are 50% behind content, and a phone applies that to the whole screen.
   v2.55: every page, snaps included, is 25% behind content. a phone applies that floor to the whole screen. */
#rain{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none}
@keyframes nj-pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(var(--c-rgb),.45))}50%{transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(var(--c-rgb),.95))}}
.social .nj{transform-origin:50% 50%;animation:nj-pulse 1.05s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.social .nj{animation:none;transform:none;filter:drop-shadow(0 0 8px rgba(var(--c-rgb),.75))}}

.tap-hint{position:fixed;z-index:31;top:11px;right:14px;display:flex;align-items:center;color:var(--c);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;text-shadow:0 0 8px var(--bg);transition:color .25s ease,opacity .7s ease,transform .7s ease}
.tap-hint.ready,.tap-hint.settled{opacity:.92;transform:none}
.speed-label{display:block;min-width:22ch}
@media(prefers-reduced-motion:reduce){.tap-hint{transition:none;transform:none}.tap-hint.ready,.tap-hint.settled{opacity:.92}}
@media (max-width:760px){.tap-hint{top:calc(env(safe-area-inset-top, 0px) + 6px);font-size:11px;text-shadow:none}.tap-hint.ready,.tap-hint.settled{opacity:1}}

.glow{transition:opacity .5s ease}.glow-fast{opacity:0}[data-mode="fast"] .glow{opacity:0}[data-mode="fast"] .glow-fast{opacity:.85}@media(prefers-reduced-motion:reduce){.glow{transition:none}}