/* Shared tokens */
/* Exact reference values. App and landing intentionally use different typography. */
:root {
  --font-app: Arial, Helvetica, sans-serif;
  --font-landing: KnowableManrope, Arial, sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;
  --font-editorial-short: Georgia, serif;
  --font-sans: Arial, sans-serif;
  --font-size-base: 13px;
  --color-canvas: #000;
  --color-sidebar: #0b0b0b;
  --color-surface: #fff;
  --color-text: #252525;
  --color-action: #292929;
  --color-action-hover: #383838;
  --shadow-button-primary:
    inset 0 2px 2px #ffffff27, inset 0 -2px 1px #00000060, 0 1px 2px #00000040,
    0 0 0 1px #00000013;
  --shadow-button-primary-hover:
    inset 0 2px 2px #ffffff30, inset 0 -2px 1px #00000060, 0 2px 3px #00000030;
  --shadow-button-primary-active:
    inset 0 2px 3px #00000070, 0 0 0 1px #00000013;
  --shadow-button-secondary:
    inset 0 2px 2px #ffffffcc, inset 0 -2px 1px #0000000d, 0 1px 2px #00000018,
    0 0 0 1px #0000000d;
  --shadow-button-secondary-hover:
    inset 0 2px 2px #fff, inset 0 -2px 1px #00000012, 0 2px 3px #00000020,
    0 0 0 1px #00000012;
  --shadow-button-secondary-active:
    inset 0 2px 3px #0000001a, 0 0 0 1px #00000013;
  --color-surface-soft: #f5f5f5;
  --color-line: #ededed;
  --color-muted: #777;
  --color-focus: #126fc4;
  --color-lime: #c9f431;
  --app-inset: 14px;
  --sidebar-width: 218px;
  --sidebar-width-collapsed: 54px;
  --nova-width: 340px;
  --motion-press: 0.12s;
  --motion-ui: 0.15s;
  /* Landing reveal, hover, and ambient motion retain their reference timings. */
  --duration-200: 0.2s;
  --duration-1400: 1.4s;
  --duration-120: 120ms;
  --duration-180: 180ms;
  --duration-220: 220ms;
  --duration-240: 240ms;
  --duration-260: 260ms;
  --duration-300: 300ms;
  --duration-360: 360ms;
  --duration-420: 420ms;
  --duration-450: 450ms;
  --duration-550: 550ms;
  --duration-600: 600ms;
  --duration-60: 60ms;
  /* Existing lesson markup uses these aliases. */
  --line: var(--color-line);
  --muted: var(--color-muted);
  --blue: var(--color-focus);
}

/* Shared defaults */
/* Shared reset and defaults. Load before the surface stylesheet. */
@font-face {
  font-family: KnowableManrope;
  src: url("/assets/manrope-400-600-2ed179d1.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: KnowableManrope;
  src: url("/assets/manrope-650-900-6de3e350.woff2") format("woff2");
  font-weight: 650 900;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
:root {
  font-family: var(--font-app);
  color: var(--color-text);
  font-size: var(--font-size-base);
}
body {
  margin: 0;
  background: var(--color-canvas);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -0.7px;
}
h2 {
  font-size: 15px;
  font-weight: 600;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
small {
  font-size: 11px;
  color: var(--muted);
}