:root {
  --fg-rgb: 255 255 255;
  --accent: #ffffff;
  --black: #000000;
  --bg-0: #050505;
  --bg-1: #0a0a0a;
  --bg-2: #111111;
  --white: #ffffff;
  --white-2: #d9d9d9;

  --line: rgb(var(--fg-rgb) / 0.08);
  --line-strong: rgb(var(--fg-rgb) / 0.16);
  --muted: rgb(217 217 217 / 0.6);
  --shadow-float: 0 12px 40px rgb(0 0 0 / 0.55);
  --shadow-lift: 0 24px 64px rgb(0 0 0 / 0.7);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-pill: 999px;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-8: 4rem;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --content: min(100% - 2rem, 72rem);

}

*, *::before, *::after { box-sizing: border-box; }

/* Scrolling still works; the bars are hidden everywhere */
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

html {
  color-scheme: dark;
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  color: var(--white-2);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--white);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--black);
}
.skip-link:focus { top: var(--s-4); }

.view {
  flex: 1;
  width: var(--content);
  margin-inline: auto;
  padding-block: 4rem var(--s-8);
  outline: none;
}

/* A page that fills the screen and scrolls inside itself, so the window never scrolls (Chat) */
.view.is-fill { display: flex; flex-direction: column; flex: none; height: 100svh; min-height: 0; padding-block: var(--s-4) 0; overflow: hidden; } /* .page already leaves room for the menu */
.view.is-fill > * { flex: 1; min-height: 0; }

/* Legal links stay out of the way: tiny, dim, pinned to the bottom of the screen beside the menu */
.footer {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-3);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  color: rgb(var(--fg-rgb) / 0.3);
  font-size: 0.6875rem;
}
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* The notice about embedded content sits in the opposite corner, clear of the menu, and reads quietly */
.footer-note { position: fixed; right: var(--s-4); bottom: var(--s-3); max-width: 19rem; font-size: inherit; line-height: 1.4; text-align: right; }
.footer nav a { transition: color var(--dur-fast); }
.footer nav a:hover, .footer nav a:focus-visible { color: var(--white-2); }
@media (max-width: 56rem) { .footer { position: static; padding: var(--s-4) var(--s-4) 8rem; } .footer-note { position: static; flex-basis: 100%; max-width: none; text-align: left; } } /* the menu would cover it */

/* Text is not selectable, so highlights never break the look. Inputs stay editable. */
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
img { -webkit-user-drag: none; }