/* base.css — tokens, reset, base elements, utilities.
   Everything sized in rem; html's font-size is the single scale knob. */

  *,*::before,*::after{box-sizing:border-box}
  :root{
    --bg:#060a0f;--panel:#0b1119;--panel2:#101a24;--line:#1f2c38;
    --txt:#e4eaf1;--mut:#93a3b4;--faint:#6c7f92;
    --hud:#5eead4;--hud-dim:rgba(94,234,212,.40);--hud-glow:rgba(94,234,212,.6);
    --alert:#fb7185;--alert-dim:rgba(251,113,133,.45);
    /* interaction colour — everything that responds to the pointer.
       teal says "state", rose says "you are touching this". */
    --hover:#fb7185;--hover-dim:rgba(251,113,133,.45);--on-hover:#14080b;
    /* brighter forms of the state colours, used when a card is hovered:
       a card lights up its OWN colour rather than borrowing another one. */
    --alert-hi:#fda4af;--line-hi:#41525f;
    /* form-control boundaries need 3:1 against their own fill (WCAG 1.4.11);
       --line is a decorative divider colour and measures only 1.34:1 there. */
    --field-line:#55677a;
    --hover-glow:rgba(251,113,133,.55);--hover-wash:rgba(251,113,133,.09);
    --scroll:0;--gap:2.4rem;--rail:4.1rem;--n:2.3rem;
    --s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:2.6rem;
  }
  html{scroll-behavior:smooth;
    /* one knob: every rem in this sheet scales from the viewport.
       width and height both contribute, so a short window shrinks too. */
    font-size:clamp(13px, 1.15vh + 0.25vw + 1px, 22px)}
  body{margin:0;height:100vh;height:100dvh;overflow:hidden;color:var(--txt);
    font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.65;
    background:
      radial-gradient(115% 85% at 50% 42%, #0d1a26 0%, transparent 62%),
      linear-gradient(180deg,#060a0f 0%,#04070a 100%)}
  .hidescroll{scrollbar-width:none}
  .hidescroll::-webkit-scrollbar{display:none}

  /* ---------- base elements ---------- */
  img{max-width:100%;height:auto;display:block}
  a{color:var(--hud);text-decoration:none;transition:color .18s}
  a:hover{color:var(--hover);text-decoration:underline;text-underline-offset:3px}
  button,input,textarea{font:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--hud);outline-offset:3px;border-radius:2px}
  ::selection{background:var(--hud);color:var(--bg)}

  /* ---------- utilities ---------- */
  .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .skip-link{position:absolute;top:-100%;left:var(--s4);z-index:99;
    padding:.6rem 1rem;background:var(--hud);color:var(--bg);
    font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em}
  .skip-link:focus{top:var(--s4);text-decoration:none}