:root {
  color-scheme: light;
  --paper: #f3f4f6;
  --paper-hi: #f6f6f7;
  --paper-lo: #ececef;
  --ink: #0a0a0c;
  --ink-2: rgba(10, 10, 12, 0.72);
  --ink-3: rgba(10, 10, 12, 0.48);
  --ink-4: rgba(10, 10, 12, 0.28);
  --line: rgba(10, 10, 12, 0.10);
  --line-2: rgba(10, 10, 12, 0.06);
  --line-strong: rgba(10, 10, 12, 0.20);
  --bg-soft: rgba(255, 255, 255, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shadow: none;
  --glass-shadow-lg: none;
  --accent: #a4f258;
  --leaf: #5bc97a;
  --honey: #e8b445;
  --sky: #5fb6dc;
  --lavender: #a38ae0;
  --coral: #e87c66;
  --warn: var(--honey);
  --ok: var(--leaf);
  --font-ui: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Host Grotesk", "Noto Sans", "Helvetica Neue", sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", "Segoe Print", cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --surface-elevated: rgba(255, 255, 255, 0.78);
  --on-ink: #ffffff;
  --num-grad: linear-gradient(120deg, #0a0a0c 0%, #1f6a3a 100%);
  --backdrop: linear-gradient(180deg, var(--paper-hi) 0%, var(--paper-lo) 100%);
  --chevron-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230a0a0c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
}

[data-theme="dark"] {
  --paper: #0c0d11;
  --paper-hi: #16181f;
  --paper-lo: #07080b;
  --ink: #f5f6f8;
  --ink-2: rgba(245, 246, 248, 0.74);
  --ink-3: rgba(245, 246, 248, 0.52);
  --ink-4: rgba(245, 246, 248, 0.30);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.22);
  --bg-soft: rgba(255, 255, 255, 0.05);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --glass-thin: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --glass-shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.70);
  --surface-elevated: rgba(28, 30, 36, 0.78);
  --on-ink: #0a0a0c;
  --num-grad: linear-gradient(120deg, #f5f6f8 0%, #a4f258 100%);
  --chevron-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23f5f6f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  color-scheme: dark;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  background: var(--backdrop);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(91, 201, 122, 0.10), transparent 60%),
    radial-gradient(800px 600px at 88% 100%, rgba(164, 242, 88, 0.08), transparent 60%),
    radial-gradient(700px 500px at 50% 40%, rgba(95, 182, 220, 0.06), transparent 70%),
    var(--backdrop);
  background-attachment: fixed;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}