/* Tokens: near-black and white, one lime accent, red only for danger, full pills and circles. */
:root {
  --accent: #c8f31d; --on-accent: #0a0a0a;
  --red: #ff3b30; --red-light: #ffecea;
  --bg: #f4f4f3; --surface: #ffffff; --surface-2: #f4f4f3; --surface-3: #e9e9e7;
  --text: #0a0a0a; --text-2: #3d3d3d; --muted: #7c7c7c; --muted-2: #b0b0b0;
  --line: rgba(10,10,10,.1); --line-soft: #f0f0ee;
  --cta: #0a0a0a; --cta-text: #ffffff;
  --shadow: 0 18px 50px -20px rgba(10,10,10,.22);
  --shadow-nav: 0 10px 30px -10px rgba(10,10,10,.28);
  --sheet: #ffffff;
  --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --top: 22px;
  --font: "Manrope", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --red: #ff5249; --red-light: rgba(255,82,73,.16);
  --bg: #0b0b0c; --surface: #18181a; --surface-2: #222225; --surface-3: #2c2c30;
  --text: #ffffff; --text-2: #dcdcdc; --muted: #8f8f94; --muted-2: #5f5f64;
  --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07);
  --cta: #ffffff; --cta-text: #0a0a0a;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.8); --shadow-nav: 0 10px 30px -10px rgba(0,0,0,.8);
  --sheet: #141416; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Large, light headings with the closing words muted and underlined. */
.hl { font-style: normal; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 999px; background: var(--cta); color: var(--cta-text); font-weight: 600; font-size: 15px; transition: transform .2s var(--ease), opacity .2s; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .3; cursor: default; }
.btn--soft { background: var(--surface-2); color: var(--text); }
.round { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-nav); transition: transform .25s var(--spring); }
.round:active { transform: scale(.92); }
.round svg { width: 22px; height: 22px; }
.toast { position: absolute; z-index: 60; left: 50%; top: 22px; width: min(420px, calc(100% - 28px)); transform: translate(-50%, -140%); background: #0a0a0a; color: #fff; padding: 15px 20px; border-radius: 999px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.5); opacity: 0; transition: transform .4s var(--ease), opacity .3s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast b { color: var(--accent); font-weight: 600; white-space: nowrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .28; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }