:root {
  --background: 36 14% 92%;
  --foreground: 30 10% 12%;
  --paper: 38 22% 96%;
  --stone: 32 10% 86%;
  --stone-2: 30 8% 80%;
  --graphite: 30 8% 16%;
  --graphite-2: 30 6% 28%;
  --ink-soft: 30 6% 38%;
  --amber: 32 88% 52%;
  --amber-soft: 36 70% 88%;
  --line: 30 8% 78%;
  --radius: 1.25rem;
}
* { border-color: hsl(var(--line)); }
html { scroll-behavior: smooth; }
body { overflow-x: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem; border-radius: 999px;
  background: hsl(var(--paper));
  border: 1px solid hsl(var(--line));
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: hsl(var(--ink-soft));
}
.chip .dot { width:6px;height:6px;border-radius:999px;background:hsl(var(--amber)); }
.pill-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.4rem; border-radius:999px;
  font-weight:500; transition:all .25s;
  text-decoration:none;
}
.pill-btn-dark { background: hsl(var(--graphite)); color: hsl(var(--paper)); }
.pill-btn-dark:hover { background: hsl(var(--amber)); color: hsl(var(--graphite)); }
.pill-btn-amber { background: hsl(var(--amber)); color: hsl(var(--graphite)); }
.pill-btn-amber:hover { background: hsl(var(--graphite)); color: hsl(var(--paper)); }
.pill-btn-ghost { border:1px solid hsl(var(--graphite)); color: hsl(var(--graphite)); }
.pill-btn-ghost:hover { background: hsl(var(--graphite)); color: hsl(var(--paper)); }
.bento { background: hsl(var(--paper)); border:1px solid hsl(var(--line)); border-radius: var(--radius); }
.num-huge { font-weight:500; font-feature-settings:"ss01","cv11"; letter-spacing:-0.05em; line-height:.85; }

@keyframes scrollx { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.tape { animation: scrollx 35s linear infinite; }

@keyframes fade-up { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }
.fu { animation: fade-up .8s cubic-bezier(.2,.7,.2,1) both; }

input[type=range].amber { -webkit-appearance:none; appearance:none; height:4px; background:hsl(var(--stone-2)); border-radius:999px; }
input[type=range].amber::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px;height:22px;border-radius:999px;background:hsl(var(--amber)); border:3px solid hsl(var(--graphite)); cursor:pointer; }
input[type=range].amber::-moz-range-thumb { width:22px;height:22px;border-radius:999px;background:hsl(var(--amber)); border:3px solid hsl(var(--graphite)); cursor:pointer; }

.faq-item.open { background: hsl(var(--graphite)); color: hsl(var(--paper)); }
.faq-item.open .faq-q-text { color: hsl(var(--paper)); }
.faq-item.open .faq-a { color: hsl(var(--paper) / .75); }
.faq-toggle { transition: transform .3s, background .3s, color .3s; }
.faq-item.open .faq-toggle { background: hsl(var(--amber)); color: hsl(var(--graphite)); transform: rotate(45deg); border-color: transparent; }
.faq-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s, opacity .4s; }
.faq-item.open .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body > div { overflow: hidden; }