/* design tokens + the one control that appears on every page. loaded by every page, including the terminal. */ :root{ --bg:#0f0f0f; --text:#d6d6d6; --bright:#ffffff; --muted:#8a8a8a; --link:#87d7ff; --link-edge:#274652; --hover-bg:#1c2b33; --rule:#2a2a2a; --chip:#1a1a1a; --inv-bg:#e0e0e0; --inv-text:#0f0f0f; } [data-theme="light"]{ --bg:#ececea; --text:#2a2a2a; --bright:#000000; --muted:#6d6d6d; --link:#00658c; --link-edge:#b5cdd8; --hover-bg:#dbe7ec; --rule:#d2d2cf; --chip:#e0e0dd; --inv-bg:#0f0f0f; --inv-text:#e0e0e0; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* day/night toggle. fixed square, so swapping the icon can never shift the layout. both icons ship in the markup and CSS picks one — the theme is already set on before first paint, so the right icon is there immediately and no JS is needed to draw it. */ .theme{ flex:0 0 auto; width:30px;height:30px;padding:0; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:0;border-radius:6px; color:var(--muted);cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .2s ease; } .theme svg{ width:16px;height:16px;display:block; fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } .theme .i-sun{display:none} [data-theme="light"] .theme .i-moon{display:none} [data-theme="light"] .theme .i-sun{display:block} .theme:hover{color:var(--bright)} .theme:focus-visible{outline:1px solid var(--link);outline-offset:2px} @media (pointer:coarse){ .theme{width:34px;height:34px} } ::selection{background:var(--inv-bg);color:var(--inv-text)} /* the circular theme wipe. app.js snapshots the page and animates a clip-path circle outward from the button, so the new theme washes over the old one instead of cross-fading. the default fade is switched off here; the script drives the whole thing. */ ::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal; } ::view-transition-old(root){z-index:1} ::view-transition-new(root){z-index:2} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important} }