:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #06111f;
  color: #eff7ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #174d7a 0, transparent 34%), #06111f; }
.stage { width: min(100vw, 56.25vh); min-height: 100vh; margin: 0 auto; padding: 44px 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.hero { text-align: center; padding: 18px 10px 8px; }
.eyebrow { margin: 0 0 10px; color: #8fd4ff; letter-spacing: .18em; font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-size: 48px; line-height: .95; letter-spacing: -0.05em; }
.subtitle { color: #c7e7ff; font-size: 17px; line-height: 1.45; }
.current-card, .syntax-card, .queue-card, .audio-card { border: 1px solid rgba(146, 213, 255, .28); border-radius: 28px; padding: 22px; background: rgba(7, 22, 39, .72); box-shadow: 0 24px 80px rgba(0,0,0,.32); backdrop-filter: blur(18px); }
.audio-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.audio-card button { border: 0; border-radius: 16px; padding: 13px 16px; font-weight: 900; color: #06111f; background: #8fd4ff; cursor: pointer; }
.audio-card span { color: #c7e7ff; line-height: 1.35; }
.label, .meta-grid span { color: #89cfff; text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.viewer { font-size: 34px; font-weight: 900; margin: 8px 0 18px; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.meta-grid div { background: rgba(255,255,255,.06); border-radius: 18px; padding: 12px; }
.meta-grid strong { display: block; margin-top: 4px; font-size: 18px; }
.caption { font-size: 24px; line-height: 1.35; font-weight: 750; color: #fff; }
h2 { margin: 0 0 12px; font-size: 22px; }
pre { margin: 0; white-space: pre-wrap; font-size: 18px; line-height: 1.45; color: #d9f1ff; }
.syntax-card p, footer { color: #a8d7f4; line-height: 1.45; }
ol { margin: 0; padding-left: 24px; font-size: 18px; line-height: 1.65; }
footer { text-align: center; font-size: 15px; margin-top: auto; }