/* ============================================================
   DFYMD / Teach Your Claude - design system
   Aesthetic: "Editorial intelligence"
   A refined dark technical-editorial look. Warm, crafted, confident.
   The love-child of a beautifully typeset journal and a dev terminal.

   Type:  Fraunces (display serif) + Hanken Grotesk (UI) + JetBrains Mono
   Ink:   warm near-black, layered
   Cream: warm off-white text
   Gold:  product / value / CTAs
   Mint:  Claude / AI / leveled-up / success moments
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Ink (layered, not flat) */
  --ink:        #0e0d0c;
  --ink-1:      #14120f;
  --ink-2:      #1b1813;
  --ink-3:      #221e18;
  --surface:    #14120f;
  --surface-2:  #1b1813;

  /* Hairline warm borders */
  --border:     #2a251d;
  --border-2:   #3a3327;
  --border-hi:  #4a4133;

  /* Cream text */
  --text:       #f3efe6;
  --text-soft:  #e2dccf;
  --muted:      #9b9384;
  --muted-2:    #756f63;

  /* Signature accents */
  --gold:       #e6b24a;       /* product / value / CTAs */
  --gold-soft:  #f0c876;
  --gold-deep:  #c79433;
  --gold-glow:  rgba(230,178,74,.16);
  --gold-faint: rgba(230,178,74,.08);

  --mint:       #74f0c0;       /* Claude / AI / success / leveled-up */
  --mint-soft:  #9af6d4;
  --mint-glow:  rgba(116,240,192,.14);
  --mint-faint: rgba(116,240,192,.07);

  /* States */
  --red:        #e8705c;
  --amber:      #e6b24a;
  --green:      #74f0c0;
  --accent:     #e6b24a;        /* legacy alias = gold */
  --accent-h:   #f0c876;
  --accent-glow: var(--gold-glow);

  /* Spacing scale */
  --sp-xs:  4px;  --sp-s:   8px;  --sp-m:   16px;
  --sp-l:   24px; --sp-xl:  44px; --sp-2xl: 72px; --sp-3xl: 112px;

  /* Radii */
  --r-s: 7px;  --r-m: 12px;  --r-l: 18px;

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,.7);
  --shadow-long: 0 30px 90px -30px rgba(0,0,0,.85);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--ink);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Layered warm ambient depth on the page itself */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(230,178,74,.07), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(116,240,192,.04), transparent 55%),
    linear-gradient(180deg, #100e0b 0%, var(--ink) 30%);
}

/* ── Film grain overlay ───────────────────────────────────── */
.grain { position: absolute; }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  filter: url(#grain-filter);
  background: #fff;
}

main, .nav, .footer { position: relative; z-index: 2; }

a { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-soft); }

img, svg { display: block; }
::selection { background: rgba(230,178,74,.25); color: var(--text); }

/* ── Layout helpers ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-l);
}
.container--narrow { max-width: 580px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-s { gap: var(--sp-s); } .gap-m { gap: var(--sp-m); } .gap-l { gap: var(--sp-l); }
.text-center { text-align: center; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.1; font-weight: 600; letter-spacing: -.01em; color: var(--text); }

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.018em;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.08;
}

h3 { font-family: var(--font-ui); font-size: 1.18rem; font-weight: 600; letter-spacing: -.005em; }

h4 {
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--gold);
}

p { color: var(--muted); }

.text-sm  { font-size: .85rem; } .text-xs { font-size: .75rem; }
.text-lg  { font-size: 1.125rem; }
.text-muted { color: var(--muted); }
.text-accent { color: var(--gold); }
.text-green  { color: var(--mint); } .text-amber { color: var(--gold); }

code, .mono { font-family: var(--font-mono); font-size: .88em; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  border-bottom: 1px solid var(--border);
  background: rgba(14,13,12,.72);
  backdrop-filter: blur(16px) saturate(1.2);
  position: sticky; top: 0; z-index: 100;
}

.nav__inner {
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}

.nav__logo {
  color: var(--text);
  display: flex; align-items: center; gap: var(--sp-s);
}

.nav__logo-mark {
  width: 32px; height: 32px;
  background: var(--gold-faint);
  border: 1px solid var(--gold);
  border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .72rem; color: var(--gold);
  font-weight: 600; flex-shrink: 0;
}
.nav__logo-mark--sm { width: 28px; height: 28px; font-size: .65rem; }

.nav__logo-text {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 1rem; letter-spacing: .02em;
}
.nav__logo-sub {
  font-family: var(--font-ui); font-weight: 500;
  font-size: .62rem; color: var(--muted-2);
  letter-spacing: .04em; margin-top: 3px; text-transform: none;
}

.nav__links { display: flex; align-items: center; gap: var(--sp-l); list-style: none; }
.nav__links a {
  color: var(--muted); font-size: .88rem; font-weight: 500;
  transition: color .2s; position: relative;
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-s); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-s);
  padding: 0 var(--sp-l);
  height: 40px;
  border-radius: var(--r-s);
  font-family: var(--font-ui);
  font-size: .92rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform .18s ease, box-shadow .25s ease, background .2s, color .2s, border-color .2s;
  white-space: nowrap; letter-spacing: -.005em;
}

.btn--primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #2a1c05;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -8px var(--gold-glow);
}
.btn--primary:hover {
  color: #2a1c05;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 32px -8px rgba(230,178,74,.45);
}

.btn--ghost {
  background: transparent; color: var(--text-soft);
  border: 1px solid var(--border-2);
}
.btn--ghost:hover { color: var(--text); border-color: var(--gold); background: var(--gold-faint); }

.btn--lg { height: 52px; padding: 0 var(--sp-xl); font-size: 1.02rem; border-radius: var(--r-m); }
.btn--sm { height: 34px; padding: 0 var(--sp-m); font-size: .82rem; }

.btn--danger { background: transparent; border: 1px solid var(--border-2); color: var(--red); }
.btn--danger:hover { border-color: var(--red); background: rgba(232,112,92,.08); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-l);
}
.card--accent {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--surface) 0%, var(--gold-faint) 100%);
  box-shadow: 0 0 0 1px var(--gold-glow), var(--shadow-soft);
}
.card--warn { border-color: var(--amber); background: rgba(230,178,74,.06); }
.card--success { border-color: var(--mint); background: var(--mint-faint); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  padding: var(--sp-3xl) 0 var(--sp-2xl);
  text-align: center; position: relative;
}

.hero::before {
  content: ''; position: absolute; inset: -10% 0 0 0;
  background:
    radial-gradient(620px 320px at 50% 8%, var(--gold-glow), transparent 70%),
    radial-gradient(500px 300px at 72% 30%, var(--mint-faint), transparent 70%);
  pointer-events: none; z-index: -1;
}

/* a faint document/markdown rule motif under the hero */
.hero::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(680px, 84vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2) 18%, var(--border-2) 82%, transparent);
  opacity: .7;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-s);
  background: var(--ink-2); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 7px var(--sp-m);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: var(--gold); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: var(--sp-xl);
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}

.hero__headline { max-width: 16ch; margin: 0 auto var(--sp-l); }
.hero__headline mark { background: none; color: var(--gold); font-style: italic; }

.hero__sub {
  font-size: 1.18rem; max-width: 640px;
  margin: 0 auto var(--sp-xl); color: var(--text-soft);
  line-height: 1.6;
}

.hero__cta { display: flex; gap: var(--sp-m); justify-content: center; flex-wrap: wrap; }

/* staggered hero load */
.reveal { opacity: 0; transform: translateY(16px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal.d1 { animation-delay: .05s; }
.reveal.d2 { animation-delay: .16s; }
.reveal.d3 { animation-delay: .28s; }
.reveal.d4 { animation-delay: .42s; }
.reveal.d5 { animation-delay: .56s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Banner ───────────────────────────────────────────────── */
.banner {
  background: linear-gradient(90deg, var(--gold-faint), transparent);
  border: 1px solid var(--border-2);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-m);
  padding: var(--sp-m) var(--sp-l);
  display: flex; align-items: center; gap: var(--sp-m);
  margin: var(--sp-xl) auto 0; max-width: 700px; text-align: left;
}
.banner__icon { font-size: 1.4rem; flex-shrink: 0; }
.banner p { color: var(--text-soft); margin: 0; font-size: .9rem; line-height: 1.55; }
.banner strong { color: var(--gold); font-weight: 600; }

/* ── Section ──────────────────────────────────────────────── */
.section { padding: var(--sp-3xl) 0; position: relative; }
.section--alt {
  background: linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section__header { text-align: center; margin-bottom: var(--sp-2xl); }
.section__header h4 { margin-bottom: var(--sp-m); }
.section__header h2 { max-width: 18ch; margin: 0 auto; }
.section__header p { max-width: 540px; margin: var(--sp-m) auto 0; font-size: 1.05rem; }

/* ── Explain block (problem) ──────────────────────────────── */
.explain-block {
  display: flex; align-items: flex-start; gap: var(--sp-l);
  background: rgba(232,112,92,.05);
  border: 1px solid rgba(232,112,92,.22);
  border-radius: var(--r-l);
  padding: var(--sp-xl);
  margin: 0 auto var(--sp-2xl); max-width: 720px;
}
.explain-block__icon {
  flex-shrink: 0; width: 44px; height: 44px;
  background: rgba(232,112,92,.12); border-radius: var(--r-m);
  display: flex; align-items: center; justify-content: center; color: var(--red);
}
.explain-block h3 { margin-bottom: var(--sp-s); }
.explain-block__text { font-size: 1.02rem; margin: 0; color: var(--text-soft); }

/* ── Explain steps ────────────────────────────────────────── */
.explain-steps {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 auto var(--sp-2xl); max-width: 720px;
}
.explain-step {
  display: flex; align-items: flex-start; gap: var(--sp-l);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-l) var(--sp-xl);
  transition: border-color .2s, transform .2s;
}
.explain-step:hover { border-color: var(--border-hi); transform: translateX(4px); }
.explain-step__connector {
  width: 1px; height: 28px; background: var(--border-2);
  margin-left: calc(var(--sp-xl) + 18px); flex-shrink: 0;
}
.explain-step__num {
  flex-shrink: 0; width: 38px; height: 38px;
  background: var(--gold-faint); border: 1px solid var(--gold);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .95rem; font-weight: 600; color: var(--gold);
}
.explain-step h3 { margin-bottom: var(--sp-xs); }
.explain-step p { font-size: .94rem; }

/* ── Explain cards (why different) ───────────────────────── */
.explain-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-m); margin-bottom: var(--sp-l);
}
.explain-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-xl);
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative; overflow: hidden;
}
.explain-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  opacity: 0; transition: opacity .3s;
}
.explain-card:hover {
  border-color: var(--border-hi); transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.explain-card:hover::before { opacity: .6; }
.explain-card__icon {
  width: 44px; height: 44px; background: var(--mint-faint);
  border: 1px solid rgba(116,240,192,.3);
  border-radius: var(--r-m);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint); margin-bottom: var(--sp-m);
}
.explain-card h3 { margin-bottom: var(--sp-s); font-size: 1.05rem; }
.explain-card p { font-size: .92rem; }
.explain-card em { color: var(--text-soft); font-style: italic; }

.explain-pricing-line {
  font-size: .95rem; color: var(--muted); margin-top: var(--sp-l);
  text-align: center; font-family: var(--font-mono); letter-spacing: -.01em;
}
.explain-pricing-line strong { color: var(--gold); font-weight: 600; }

/* ── Tiers ────────────────────────────────────────────────── */
.tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-l); max-width: 880px; margin: 0 auto;
}
.tier {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-xl);
  position: relative; transition: border-color .2s, transform .2s;
}
.tier:hover { transform: translateY(-3px); }
.tier--vision {
  border-color: var(--gold);
  background: linear-gradient(165deg, var(--surface) 0%, var(--gold-faint) 100%);
  box-shadow: var(--shadow-soft);
}
.tier__badge {
  position: absolute; top: -13px; left: var(--sp-xl);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #2a1c05; font-family: var(--font-mono);
  font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.tier h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-bottom: var(--sp-s); }
.tier__price {
  font-size: 2.4rem; font-weight: 600; font-family: var(--font-display);
  color: var(--text); margin-bottom: var(--sp-m); line-height: 1;
}
.tier__price sup { font-size: 1.1rem; vertical-align: super; color: var(--gold); }
.tier__price span { font-size: 1rem; color: var(--muted); font-weight: 400; font-family: var(--font-ui); }
.tier__desc { font-size: .94rem; margin-bottom: var(--sp-l); }
.tier__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-s); }
.tier__list li {
  font-size: .9rem; color: var(--text-soft);
  display: flex; align-items: flex-start; gap: var(--sp-s);
}
.tier__list li::before {
  content: '✓'; color: var(--mint); font-weight: 700; flex-shrink: 0; margin-top: 1px;
}

/* ── Pricing grid ─────────────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-m);
}
.price-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-xl);
  display: flex; flex-direction: column; gap: var(--sp-l);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.price-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--gold-glow), var(--shadow-soft);
}
.price-card--highlight {
  border-color: var(--gold);
  background: linear-gradient(165deg, var(--surface-2), var(--gold-faint));
}
.price-card__label { font-weight: 600; font-size: 1rem; color: var(--text); }
.price-card__price {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; color: var(--text);
}
.price-card__value { font-size: .82rem; color: var(--muted); font-family: var(--font-mono); }
.price-card__badge-popular {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #2a1c05; font-family: var(--font-mono);
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  margin-bottom: var(--sp-s);
}

/* ── Forms / auth / dashboard (kept intact for other templates) ── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-2xl) var(--sp-xl);
  width: 100%; max-width: 440px; margin: 0 auto;
  box-shadow: var(--shadow-soft);
}
.form-card h2 { margin-bottom: var(--sp-xs); }
.form-card .sub { font-size: .92rem; margin-bottom: var(--sp-xl); }
.field { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-m); }
.field label { font-size: .85rem; font-weight: 600; color: var(--text); }
.field input {
  height: 44px; background: var(--ink); border: 1px solid var(--border-2);
  border-radius: var(--r-s); padding: 0 var(--sp-m); color: var(--text);
  font-family: var(--font-ui); font-size: .95rem;
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.field input::placeholder { color: var(--muted-2); }
.error-msg {
  background: rgba(232,112,92,.08); border: 1px solid rgba(232,112,92,.35);
  border-radius: var(--r-s); padding: var(--sp-s) var(--sp-m);
  color: var(--red); font-size: .88rem; margin-bottom: var(--sp-m);
}
.form-footer { margin-top: var(--sp-l); text-align: center; font-size: .85rem; color: var(--muted); }

.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-xl) var(--sp-m);
}

.dash-layout {
  display: grid; grid-template-columns: 260px 1fr;
  gap: var(--sp-xl); padding: var(--sp-xl) 0; align-items: start;
}
@media (max-width: 768px) { .dash-layout { grid-template-columns: 1fr; } }
.dash-sidebar .section-title {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-m);
}
.wallet-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: var(--sp-l); margin-bottom: var(--sp-m);
}
.wallet-label {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); margin-bottom: var(--sp-xs);
}
.wallet-balance {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  color: var(--text); line-height: 1; margin-bottom: var(--sp-s);
}
.wallet-free { font-size: .82rem; color: var(--muted); }
.wallet-free strong { color: var(--mint); }
.plan-chip {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  background: var(--gold-faint); border: 1px solid var(--gold);
  border-radius: 999px; padding: 3px 10px;
  font-size: .75rem; font-weight: 600; color: var(--gold); margin-bottom: var(--sp-m);
}

.key-callout {
  background: var(--mint-faint); border: 1px solid var(--mint);
  border-radius: var(--r-l); padding: var(--sp-l); margin-bottom: var(--sp-l);
}
.key-callout h3 { color: var(--mint); margin-bottom: var(--sp-s); }
.key-callout p { font-size: .88rem; margin-bottom: var(--sp-m); color: var(--muted); }
.code-block {
  background: var(--ink); border: 1px solid var(--border-2);
  border-radius: var(--r-s); padding: var(--sp-m);
  font-family: var(--font-mono); font-size: .85rem; color: var(--gold);
  word-break: break-all; position: relative; user-select: all;
}
.copy-hint { font-size: .72rem; color: var(--muted); margin-top: var(--sp-xs); }
.key-usage {
  margin-top: var(--sp-m); background: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-s); padding: var(--sp-m);
}
.key-usage h4 { margin-bottom: var(--sp-s); }
.key-usage pre {
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
  white-space: pre-wrap; word-break: break-all; line-height: 1.7;
}
.key-usage pre .hl { color: var(--gold); }
.key-prefix-row {
  display: flex; align-items: center; gap: var(--sp-m);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: var(--sp-m); margin-bottom: var(--sp-l);
}
.key-prefix-row .label { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.key-prefix-row code { color: var(--text); flex: 1; }

.usage-table-wrap { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.usage-table th {
  text-align: left; padding: var(--sp-s) var(--sp-m);
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border);
}
.usage-table td { padding: var(--sp-m); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.usage-table tr:last-child td { border-bottom: none; }
.usage-table tr:hover td { background: var(--surface-2); }
.status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.status-badge--done    { background: var(--mint-faint);  color: var(--mint); }
.status-badge--pending { background: rgba(230,178,74,.12); color: var(--gold); }
.status-badge--error   { background: rgba(232,112,92,.12);  color: var(--red); }
.status-badge--running { background: rgba(230,178,74,.12); color: var(--gold); }
.tier-badge { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.dash-section-title {
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-m);
  padding-bottom: var(--sp-s); border-bottom: 1px solid var(--border);
}

.error-page {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-xl) var(--sp-m);
}
.error-code {
  font-family: var(--font-display); font-size: 6rem; font-weight: 600;
  color: var(--border-hi); line-height: 1; margin-bottom: var(--sp-m);
}
.error-message { font-size: 1.1rem; color: var(--muted); margin-bottom: var(--sp-xl); max-width: 440px; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-2xl) 0; margin-top: var(--sp-3xl);
  background: linear-gradient(180deg, transparent, var(--ink-1));
}
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-l);
}
.footer__brand { display: flex; align-items: flex-start; gap: var(--sp-m); max-width: 440px; }
.footer__wordmark {
  display: block; font-family: var(--font-mono); font-weight: 600;
  font-size: .95rem; color: var(--text); letter-spacing: .03em; margin-bottom: 4px;
}
.footer__copy { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.footer__links { display: flex; gap: var(--sp-l); list-style: none; flex-wrap: wrap; }
.footer__links a { font-size: .82rem; color: var(--muted); }
.footer__links a:hover { color: var(--text); }

/* ── Divider / utilities ──────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-xl) 0; }
.mt-s { margin-top: var(--sp-s); } .mt-m { margin-top: var(--sp-m); }
.mt-l { margin-top: var(--sp-l); } .mt-xl { margin-top: var(--sp-xl); }
.mb-m { margin-bottom: var(--sp-m); } .mb-l { margin-bottom: var(--sp-l); } .mb-xl { margin-bottom: var(--sp-xl); }
.w-full { width: 100%; }

/* ============================================================
   THE DEMO  -  one honest end-to-end run, scene by scene
   ============================================================ */
.demo-shell {
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--border-2);
  border-radius: var(--r-l);
  overflow: hidden;
  max-width: 980px; margin: 0 auto;
  box-shadow: var(--shadow-long), 0 0 0 1px rgba(230,178,74,.05);
  position: relative;
}
.demo-shell::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 6;
  background: linear-gradient(90deg, transparent, var(--gold), var(--mint), transparent);
  opacity: .4;
}

/* ── Window chrome bar ────────────────────────────────────── */
.demo-chrome {
  display: flex; align-items: center; gap: var(--sp-s);
  padding: var(--sp-s) var(--sp-m);
  background: var(--ink-1); border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
.demo-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.demo-dot--red   { background: #e8705c; }
.demo-dot--amber { background: #e6b24a; }
.demo-dot--green { background: #74f0c0; }

.demo-chrome__addr {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: var(--sp-s);
  background: var(--ink); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 13px;
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted);
  min-width: 0; max-width: 60%;
  transition: color .35s ease;
}
.demo-chrome__addr-text--mint { color: var(--mint); }
.demo-chrome__glyph { flex-shrink: 0; opacity: .8; }
#demo-chrome-addr-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.demo-meter {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: .72rem; color: var(--gold);
  background: var(--gold-faint); padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(230,178,74,.25);
}
.demo-meter[hidden] { display: none; }
.demo-meter__clock { color: var(--mint); margin-left: var(--sp-s); }

/* ── Viewport that the scenes cross-fade inside ───────────── */
.demo-viewport {
  position: relative;
  min-height: 432px;
  overflow: hidden;
}

.demo-scene {
  position: absolute; inset: 0;
  padding: var(--sp-l);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
  overflow-y: auto;
}
.demo-scene--active {
  opacity: 1; visibility: visible; transform: none;
}

/* ── Simulated cursor ─────────────────────────────────────── */
.demo-cursor {
  position: absolute; top: 50%; left: 50%; z-index: 8;
  width: 20px; height: 20px; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
  transition: transform 1s cubic-bezier(.5,.05,.3,1);
  opacity: 0;
}
.demo-cursor--show { opacity: 1; }
.demo-cursor--click { transform: scale(.78); transition: transform .12s ease; }

/* ── Scene 1: stylized X page ─────────────────────────────── */
.demo-x { display: flex; gap: var(--sp-m); height: 100%; }
.demo-x__rail {
  width: 48px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 4px;
  border-right: 1px solid var(--border);
}
.demo-x__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text);
}
.demo-x__main { flex: 1; min-width: 0; max-width: 560px; }
.demo-x__search {
  display: flex; align-items: center; gap: var(--sp-s);
  background: var(--ink); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 9px var(--sp-m); color: var(--muted);
  font-family: var(--font-ui); font-size: .86rem; margin-bottom: var(--sp-l);
}
.demo-x__query { color: var(--text); }
.demo-x__caret {
  display: inline-block; width: 2px; height: 1em; background: var(--gold);
  margin-left: 1px; opacity: 0; vertical-align: -2px;
}
.demo-x__caret--on { opacity: 1; animation: demo-blink 1s steps(1) infinite; }
@keyframes demo-blink { 50% { opacity: 0; } }

.demo-x__result {
  display: flex; gap: var(--sp-m);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: var(--sp-m);
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
  position: relative;
}
.demo-x__result--show { opacity: 1; transform: none; }
.demo-x__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2a2018, var(--gold-deep));
  color: #1a1206; font-weight: 700; font-family: var(--font-ui); font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.demo-x__post { flex: 1; min-width: 0; }
.demo-x__author { font-size: .9rem; font-weight: 600; color: var(--text); }
.demo-x__handle { color: var(--muted); font-weight: 400; }
.demo-x__copy { font-size: .86rem; color: var(--text-soft); margin: 5px 0 var(--sp-s); line-height: 1.5; }

.demo-x__card {
  border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden;
  margin-bottom: var(--sp-s);
}
.demo-x__thumb {
  height: 132px; position: relative;
  background:
    radial-gradient(160px 90px at 65% 38%, rgba(230,178,74,.32), transparent 70%),
    linear-gradient(135deg, #2a2018, #14110d);
  display: flex; align-items: center; justify-content: center;
}
.demo-video-play {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  color: #2a1c05;
}
.demo-x__dur {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.72); color: #fff; font-family: var(--font-mono);
  font-size: .64rem; padding: 2px 6px; border-radius: 4px;
}
.demo-x__cardtitle {
  padding: 9px var(--sp-m); font-size: .82rem; font-weight: 600; color: var(--text);
  background: var(--ink-1); border-top: 1px solid var(--border);
}
.demo-x__actions { display: flex; gap: var(--sp-xl); color: var(--muted); margin-top: 6px; }
.demo-x__act { display: inline-flex; transition: color .2s; }
.demo-x__act--share { cursor: pointer; }
.demo-x__act--hot { color: var(--gold); }

.demo-x__menu {
  position: absolute; right: var(--sp-m); bottom: 8px; z-index: 4;
  background: var(--ink-2); border: 1px solid var(--border-2);
  border-radius: var(--r-s); padding: 5px; box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.demo-x__menu--show { opacity: 1; transform: none; }
.demo-x__menuitem {
  display: flex; align-items: center; gap: var(--sp-s);
  padding: 7px 12px; border-radius: 5px;
  font-size: .82rem; color: var(--text-soft); white-space: nowrap;
}
.demo-x__menuitem--hot { background: var(--gold-faint); color: var(--gold); }

.demo-toast {
  position: absolute; left: 50%; bottom: var(--sp-l); transform: translateX(-50%) translateY(14px);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mint); color: #06231a;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 8px 24px var(--mint-glow);
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.demo-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Scene 2 + 3: terminal / Claude Code pane ─────────────── */
.demo-term {
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.7;
  color: var(--text-soft); max-width: 720px;
}
.demo-term__line { margin-bottom: var(--sp-m); }
.demo-term__line--ctx { color: var(--muted-2); font-size: .76rem; margin-bottom: var(--sp-l); }
.demo-term__line--user { color: var(--text); margin-bottom: var(--sp-l); }
.demo-term__caratmark { color: var(--mint); margin-right: 7px; }
.demo-term__prompt { display: flex; align-items: baseline; flex-wrap: wrap; }
.demo-term__type { color: var(--text); word-break: break-all; }
.demo-term__caret {
  display: inline-block; width: 8px; height: 1.05em; background: var(--gold);
  margin-left: 2px; vertical-align: -2px; animation: demo-blink 1s steps(1) infinite;
}

.demo-skill-line {
  display: flex; align-items: baseline; gap: var(--sp-s); flex-wrap: wrap;
  margin-bottom: var(--sp-m);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.demo-skill-line--show { opacity: 1; transform: none; }
.demo-skill-badge {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  background: var(--mint-faint); color: var(--mint); border: 1px solid rgba(116,240,192,.3);
  padding: 2px 8px; border-radius: 5px; flex-shrink: 0;
}
.demo-key { color: var(--gold); }
.demo-byok { color: var(--muted); }
.demo-note {
  margin-top: var(--sp-l); padding: var(--sp-m);
  background: var(--ink); border: 1px solid var(--border); border-left: 2px solid var(--mint);
  border-radius: var(--r-s);
  font-family: var(--font-ui); font-size: .84rem; line-height: 1.55; color: var(--text-soft);
  max-width: 560px;
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.demo-note--show { opacity: 1; transform: none; }

/* ── Scene 4: the run ─────────────────────────────────────── */
.demo-term--run { max-width: 760px; }
.demo-run-steps { display: flex; flex-direction: column; gap: 11px; }

.demo-step {
  display: flex; align-items: flex-start; gap: var(--sp-s);
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.5; color: var(--muted);
  opacity: 0; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease;
}
.demo-step--show { opacity: 1; transform: none; }
.demo-step--done { color: var(--text-soft); }
.demo-step__icon {
  flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%;
  border: 1.5px solid var(--border-hi); position: relative;
  transition: border-color .25s, background .25s;
}
.demo-step--running .demo-step__icon {
  border-color: var(--gold); border-top-color: transparent; animation: demo-spin .8s linear infinite;
}
.demo-step--done .demo-step__icon {
  border-color: var(--mint); background: var(--mint-faint);
}
.demo-step--done .demo-step__icon::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--mint); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-step__text b { color: var(--gold); font-weight: 600; }
.demo-free { color: var(--mint); }

/* keyframe tiles (reused look) */
.demo-keyframes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-s);
  margin: 4px 0 4px 23px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.demo-keyframes--visible { max-height: 130px; opacity: 1; }
.demo-kf {
  background: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r-s); overflow: hidden;
  opacity: 0; transform: scale(.92); transition: opacity .35s, transform .35s;
}
.demo-kf--visible { opacity: 1; transform: none; }
.demo-kf__thumb {
  height: 50px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); position: relative;
  background:
    radial-gradient(60px 40px at 50% 40%, rgba(230,178,74,.2), transparent 70%),
    linear-gradient(135deg, #221c14, #15120d);
  border-bottom: 1px solid var(--border);
  padding: 4px; text-align: center;
}
.demo-kf__board { font-family: var(--font-mono); font-size: .54rem; color: var(--mint); line-height: 1.3; letter-spacing: -.02em; }
.demo-kf__thumb--slide { color: var(--gold); }
.demo-kf__thumb--slide .demo-kf__board { color: var(--gold-soft); }
.demo-kf__thumb--face {
  background:
    radial-gradient(40px 50px at 50% 38%, rgba(230,178,74,.4), transparent 70%),
    linear-gradient(135deg, #2a2018, #14110d);
}
.demo-kf__info { padding: 4px 6px; }
.demo-kf__label {
  font-family: var(--font-mono); font-size: .52rem; font-weight: 600;
  letter-spacing: .1em; color: var(--gold); text-transform: uppercase; display: block;
}
.demo-kf__ocr { font-family: var(--font-mono); font-size: .58rem; color: var(--muted); display: block; margin-top: 1px; }

/* distilled markdown block */
.demo-mdwrap {
  margin-top: var(--sp-m);
  background: var(--ink); border: 1px solid var(--border); border-radius: var(--r-s);
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.demo-mdwrap--show { max-height: 340px; opacity: 1; }
.demo-mdwrap__bar {
  padding: 6px var(--sp-m); background: var(--ink-1); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted); letter-spacing: .04em;
}
.demo-md-output {
  white-space: pre-wrap; word-break: break-word; color: var(--text-soft);
  margin: 0; padding: var(--sp-m); font-family: var(--font-mono);
  font-size: .72rem; line-height: 1.7;
}
.demo-md-caret {
  display: inline-block; width: 7px; height: 1em; background: var(--gold);
  vertical-align: -2px; animation: demo-blink 1s steps(1) infinite;
}

/* the teaching: Claude tool calls on the user's files */
.demo-teach {
  margin-top: var(--sp-m); padding: var(--sp-m);
  border: 1px solid var(--mint); border-radius: var(--r-m);
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--mint-faint) 100%);
  box-shadow: 0 0 0 1px var(--mint-glow);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s ease, opacity .4s ease, margin .4s ease, padding .4s ease;
}
.demo-teach--show { max-height: 420px; opacity: 1; }
.demo-teach__head {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mint);
  margin-bottom: var(--sp-s);
}
.demo-tool {
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-soft);
  margin-bottom: 5px;
  opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease;
}
.demo-tool--show { opacity: 1; transform: none; }
.demo-tool__bullet { color: var(--mint); }
.demo-tool__verb { color: var(--gold); font-weight: 600; }
.demo-tool__diff { color: var(--muted); }
.demo-claude-bubble {
  background: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r-s);
  padding: var(--sp-m); margin-top: var(--sp-s);
  font-family: var(--font-ui); font-size: .86rem; line-height: 1.6; color: var(--text-soft);
}
.demo-claude-bubble:empty { display: none; }
.demo-context-badge {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  background: var(--mint-faint); border: 1px solid var(--mint);
  border-radius: 999px; padding: 6px 14px; margin-top: var(--sp-m);
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--mint);
}
.demo-context-badge[hidden] { display: none; }

/* ── Scene 5: the finish ──────────────────────────────────── */
.demo-finish {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--sp-xl) var(--sp-l);
}
.demo-finish__lines {
  display: flex; flex-direction: column; gap: var(--sp-m);
  max-width: 680px; margin: 0 auto var(--sp-xl);
}
.demo-finish__line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 3.2vw, 2.05rem); line-height: 1.16;
  color: var(--text); letter-spacing: -.015em;
  opacity: 0; transform: translateY(14px);
}
.demo-finish__line--in { animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.demo-finish__line .saved { color: var(--gold); font-style: italic; }
.demo-finish__line .win { color: var(--mint); font-style: italic; }
.demo-finish__line--small { font-family: var(--font-ui); font-size: 1rem; color: var(--muted); font-weight: 500; }

.demo-cta-row {
  display: flex; align-items: center; gap: var(--sp-l);
  justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
}
.demo-cta-row--in { animation: rise .7s cubic-bezier(.2,.7,.2,1) .1s forwards; }
.demo-replay-btn {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  background: none; border: none; color: var(--muted); font-size: .86rem;
  cursor: pointer; font-family: var(--font-ui); transition: color .2s;
}
.demo-replay-btn:hover { color: var(--text); }

/* ── Narrator + controls strip ────────────────────────────── */
.demo-narrator {
  display: flex; align-items: center; gap: var(--sp-m);
  padding: var(--sp-m) var(--sp-l);
  background: var(--ink-1); border-top: 1px solid var(--border);
}
.demo-narrator__left { display: flex; align-items: center; gap: var(--sp-m); flex: 1; min-width: 0; }
.demo-step-counter {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  background: var(--gold-faint); border: 1px solid rgba(230,178,74,.25);
  padding: 4px 10px; border-radius: 999px;
}
.demo-narrator__text {
  font-family: var(--font-ui); font-size: .9rem; color: var(--text-soft); line-height: 1.4;
  animation: demo-fade-in .45s ease;
}
@keyframes demo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.demo-narrator__controls { display: flex; align-items: center; gap: var(--sp-m); flex-shrink: 0; }
.demo-ctrl {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
  transition: color .2s;
}
.demo-ctrl:hover { color: var(--gold); }
.demo-ctrl[hidden] { display: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .nav__links { display: none; }
  .hero { padding: var(--sp-2xl) 0 var(--sp-xl); }
  .section { padding: var(--sp-2xl) 0; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .demo-keyframes { grid-template-columns: repeat(2, 1fr); margin-left: 0; }
  .demo-keyframes--visible { max-height: 280px; }
  .demo-viewport { min-height: 470px; }
  .demo-x__rail { display: none; }
  .demo-x__actions { gap: var(--sp-l); }
  .demo-narrator { flex-direction: column; align-items: flex-start; gap: var(--sp-s); }
  .demo-narrator__controls { width: 100%; justify-content: flex-end; }
  .demo-cursor { display: none; }
  .explain-step { padding: var(--sp-l); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal, .demo-finish__line, .demo-cta-row { opacity: 1 !important; transform: none !important; animation: none !important; }
  .demo-scene { transition: none; }
  .demo-kf, .demo-keyframes, .demo-mdwrap, .demo-teach,
  .demo-step, .demo-tool, .demo-x__result, .demo-skill-line, .demo-note { transition: none; animation: none; }
  .demo-cursor { display: none; }
  .demo-step--running .demo-step__icon { animation: none; }
  .demo-x__caret, .demo-term__caret, .demo-md-caret, .demo-narrator__text { animation: none; }
}