.intro {
  --intro-paper:#f6f4ef;--intro-surface:#fffefa;--intro-ink:#172322;--intro-muted:#52605a;
  --intro-line:#d6dcd5;--intro-tone:#853c33;--intro-sheet:#f1d9d0;--intro-mark:#793b30;
  color:var(--intro-ink);padding-block:26px clamp(42px,7vw,90px);
}
.intro-course{--intro-tone:#2e684a;--intro-sheet:#deebd8;--intro-mark:#3c6948}
.intro-loom{--intro-tone:#3f4e87;--intro-sheet:#e1e5f7;--intro-mark:#424d80}
.intro-ledger{--intro-tone:#235b60;--intro-sheet:#dbebe9;--intro-mark:#245a59}
.intro-voice{--intro-tone:#83395c;--intro-sheet:#f2dce6;--intro-mark:#783654}
.intro .crumb{margin-bottom:20px;flex-wrap:wrap}
.intro-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4.5vw,72px);align-items:center;padding:clamp(22px,5.4vw,72px);background:var(--intro-paper);border:1px solid var(--intro-line);border-radius:20px}
.intro-label{color:var(--intro-tone);font-size:.81rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
.intro h1{font-size:clamp(2.6rem,5vw,4.4rem);letter-spacing:-.063em;text-wrap:balance;overflow-wrap:anywhere}
.intro-lede{font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.55;max-width:43ch;margin-top:18px;color:var(--intro-muted)}
.intro-action{margin-top:23px;display:inline-flex;gap:10px;align-items:center;background:var(--intro-tone);color:var(--intro-surface);font-weight:750;padding:11px 15px;border-radius:8px;min-height:44px}
.intro-action:hover{text-decoration:underline;text-underline-offset:3px}
.intro-sheet{background:var(--intro-sheet);color:var(--intro-mark);min-width:0;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 19%,transparent)}
.intro-sheet>span,.intro-sheet>figcaption{display:block;padding:14px 17px;font-size:.76rem;letter-spacing:.08em;font-weight:750}
.intro-sheet>span{text-transform:uppercase;border-bottom:1px dashed color-mix(in srgb,currentColor 30%,transparent)}
.intro-sheet>figcaption{border-top:1px dashed color-mix(in srgb,currentColor 30%,transparent)}
.intro-sheet svg{display:block;width:100%;height:auto}
.intro-content{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,58px);margin-top:clamp(30px,5vw,58px);align-items:start}
.intro-content h2,.intro-features h2{font-size:clamp(1.7rem,3.2vw,2.5rem);text-wrap:balance}
.intro-examples>p,.intro-notes p,.intro-features>p{margin:9px 0 16px;color:var(--intro-muted);max-width:62ch}
.intro-examples details{background:var(--intro-surface);border:1px solid var(--intro-line);border-radius:8px;margin-top:10px}
.intro-examples summary{cursor:pointer;font-weight:780;padding:12px 15px;min-height:44px;border-radius:8px}
.intro-examples summary span{margin-inline:7px 13px;color:var(--intro-tone);font-variant-numeric:tabular-nums}
.intro-examples details p{padding:0 17px 14px;margin:0;max-width:68ch;color:var(--intro-muted)}
.intro-notes{padding:20px 24px;background:var(--intro-surface);border:1px solid var(--intro-line);border-radius:10px}
.intro-notes h2{font-size:1.28rem}
.intro-notes p:last-child{margin-bottom:0}
.intro-features{border-top:1px solid var(--intro-line);margin-top:clamp(32px,6vw,68px);padding-top:23px}
.intro-features dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.intro-features dl>div{padding:15px;background:var(--intro-surface);border:1px solid var(--intro-line);border-radius:9px}
.intro-features dt{font-weight:800;margin-bottom:6px}
.intro-features dd{color:var(--intro-muted)}
.intro-back{margin-top:24px;white-space:normal}
@media(max-width:850px){.intro-hero,.intro-content{grid-template-columns:1fr}.intro-sheet{max-width:650px}}
@media(max-width:560px){.intro-features dl{grid-template-columns:1fr}.intro-hero{border-radius:13px}}
@media(prefers-color-scheme:dark){
  .intro{--intro-paper:#161e1c;--intro-surface:#202a26;--intro-ink:#edf4ee;--intro-muted:#bac8be;--intro-line:#405048;--intro-tone:#f2b8a9;--intro-sheet:#432e2a;--intro-mark:#f5c5b6;background:var(--intro-paper);border-radius:15px;padding-inline:clamp(12px,3vw,28px)}
  .intro-course{--intro-tone:#a9dfba;--intro-sheet:#263d2f;--intro-mark:#b8e4c5}
  .intro-loom{--intro-tone:#bfc9f4;--intro-sheet:#303751;--intro-mark:#c9d3fc}
  .intro-ledger{--intro-tone:#a5ddd8;--intro-sheet:#263d3e;--intro-mark:#b1e0dc}
  .intro-voice{--intro-tone:#f2bfd8;--intro-sheet:#472d3b;--intro-mark:#f3c4da}
  .intro .crumb,.intro-back{color:var(--intro-tone)}
}

/* The SVG remains complete until the WebGL scene draws its first frame. */
.intro-scene{position:relative;display:grid;place-items:center;isolation:isolate;aspect-ratio:1.69;min-height:200px;background:radial-gradient(ellipse at 48% 28%,color-mix(in srgb,var(--intro-surface) 53%,transparent),transparent 66%),var(--intro-sheet)}
.intro-scene-poster{width:100%;pointer-events:none}
.intro-scene canvas{position:absolute;inset:0;display:block;width:100%;height:100%;visibility:hidden;touch-action:pan-y}
.intro-scene[data-scene-state="ready"] canvas{visibility:visible;cursor:grab}
.intro-scene[data-scene-state="ready"] canvas:active{cursor:grabbing}
.intro-scene[data-scene-state="ready"] .intro-scene-poster{visibility:hidden}
.intro-scene-tools{display:flex;flex-wrap:wrap;gap:7px 11px;align-items:center;padding:0 14px 11px}
.intro-scene-tools:empty{display:none}
.intro-scene-tools>p:empty{display:none}
.intro-scene-tools>p{font-size:.72rem;line-height:1.25}
.intro-scene-buttons{display:flex;gap:5px}
.intro-scene-tools button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;border:1px solid color-mix(in srgb,var(--intro-mark) 36%,transparent);border-radius:7px;background:var(--intro-surface);color:var(--intro-mark);font-size:.8rem;font-weight:750;line-height:1}
.intro-scene-tools button:hover{background:var(--intro-sheet)}
@media(max-width:560px){.intro-scene{aspect-ratio:1.28;min-height:0}}
@media(prefers-reduced-motion:reduce){html:has(.intro){scroll-behavior:auto}}