body.mute { --bg:#0c0f10; --ink:#f2f2ed; --muted:#a8aeaf; --panel:#111719; --line:#30383b; --accent:#f4bd14; --soft:#191b12; }
.mute .topline a { text-decoration: none; color: var(--accent); }
.mute .hero { padding: 76px 0 60px; }
.mute .hero > div { max-width: 1120px; }
.mute .eyebrow { margin: 0 0 24px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.mute .hero h1 { color: var(--accent); font-size: clamp(80px, 10vw, 144px); letter-spacing: .06em; }
.mute .hero h1 span { display: block; margin-top: 26px; color: var(--ink); font-size: clamp(30px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; }
.mute .deck { max-width: 850px; font-size: clamp(18px, 1.7vw, 23px); }
.mute .visit { display: inline-flex; align-items: center; gap: 44px; margin-top: 28px; padding: 14px 20px; background: var(--accent); color: #15150e; border-radius: 7px; text-decoration: none; font-size: 15px; font-weight: 750; }
.mute .numbers { margin-bottom: 18px; }
.mute .numbers div { border-radius: 8px; }
.mute .numbers span { text-transform: none; }
.mute .demo-note { max-width: 990px; margin: 0 0 64px; color: var(--muted); font-size: 13px; }
.mute .chapter { padding: 54px 0 64px; }
.mute .chapter h2 { font-size: clamp(32px, 4vw, 54px); }
.mute .chapter .eyebrow { margin-bottom: 16px; }
.mute .step, .mute .card { border-radius: 8px; }
.mute .screen-chapter { margin-top: 46px; }
.mute .screen-heading { display: flex; gap: 20px; align-items: baseline; margin-bottom: 18px; }
.mute .screen-number { color: var(--accent); font: 14px ui-monospace, Consolas, monospace; }
.mute .screen-heading h3 { margin: 0; font-size: clamp(23px, 2.5vw, 34px); letter-spacing: -.025em; line-height: 1.2; }
.mute .screen-heading p { max-width: 970px; margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.mute .screen { padding: 8px; border-radius: 10px; }
.mute .screen img { border-radius: 4px; }
.mute .screen figcaption { padding: 12px 10px 6px; }
.mute .footer { padding-bottom: 42px; }
@media (max-width: 560px) {
  .mute .hero { padding-top: 45px; }
  .mute .hero h1 span br { display: none; }
  .mute .numbers div { padding: 16px 12px; }
  .mute .screen-heading { gap: 12px; }
  .mute .screen-heading p { font-size: 15px; }
  .mute .screen { padding: 4px; }
  .mute .topline a { overflow-wrap: anywhere; }
}