/* Demos (/demos, /demos/{library}, /demos/{library}/{demo}). Builds on play.css (.pl-hero, .gm-hero, .pl-crumbs). */
.dm-hub, .dm-page, .dm-player, .dm-hub-hero, .dm-hero { --dm-ink: #0b1533; --dm-deep: #060b1d; --dm-line: #dbe2ee; --dm-muted: #5d6880; --dm-blue: #1463ff; --dm-mint: #6ff0bc; }
.dm-hero .pl-crumbs a, .dm-hub-hero .pl-crumbs a { color: #cfe0ff; }
.dm-hero .pl-eyebrow { color: var(--dm-accent, #6ff0bc); }
.dm-hero-mark { flex: none; display: grid; place-items: center; }
.dm-hero .pl-hero-chips a { color: #fff; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.dm-hero .pl-hero-chips a:hover { text-decoration: underline; }
.dm-hero--demo { padding-bottom: 20px; }
.dm-hero--demo h1 { font-size: clamp(26px, 3.6vw, 38px); }

/* Hub hero with the live showpiece */
.dm-hub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; }
.dm-hub-hero-text { min-width: 0; }
.dm-hero-live { min-width: 0; display: grid; gap: 8px; }
.dm-stage--hero { aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 0 0 1px rgba(111, 240, 188, .22), 0 20px 50px rgba(0, 0, 0, .45); }
.dm-hero-cap { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13.5px; }
.dm-hero-cap a { color: #cfe0ff; font-weight: 600; }
.dm-hero-toggle { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.dm-hero-toggle:hover { background: rgba(255, 255, 255, .16); }

/* Stage (shared by hero, previews and the player) */
.dm-stage { position: relative; overflow: hidden; background: #050914; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dm-stage > canvas, .dm-stage > .dm-own { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.dm-stage:focus-visible { box-shadow: inset 0 0 0 3px #ffc94d; }
.dm-fps { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #6ff0bc; font: 700 12.5px/1.2 ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
.dm-fps[hidden], .dm-msg[hidden], .dm-bigplay[hidden] { display: none; }
.dm-msg { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 9, 20, .82); color: #fff; text-align: center; }
.dm-msg p { max-width: 440px; margin: 0; font-size: 15px; line-height: 1.5; }
.dm-bigplay { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 8px; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--dm-accent, #6ff0bc); color: #0b1533; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.dm-bigplay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Player */
.dm-player { margin: 0 0 20px; padding: 14px; border-radius: 22px; background: var(--dm-deep);
  background-image: radial-gradient(700px 260px at 50% -10%, color-mix(in srgb, var(--dm-accent, #6ff0bc) 22%, transparent), transparent 70%); color: #fff; }
.dm-stage-wrap { display: grid; gap: 10px; }
.dm-stage-wrap:fullscreen { grid-template-rows: 1fr auto; padding: 10px; background: #050914; }
.dm-player .dm-stage { height: clamp(320px, 66vh, 720px); border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .45); }
.dm-stage-wrap:fullscreen .dm-stage { height: auto; border-radius: 8px; }
.dm-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-tb { display: inline-flex; gap: 7px; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.dm-tb:hover { background: rgba(255, 255, 255, .13); }
.dm-tb--main { background: var(--dm-accent, #6ff0bc); border-color: transparent; color: #0b1533; }
.dm-tb--main:hover { background: color-mix(in srgb, var(--dm-accent, #6ff0bc) 85%, #fff); }
.dm-tb[aria-pressed="true"] { border-color: var(--dm-accent, #6ff0bc); color: var(--dm-accent, #6ff0bc); }
.dm-tb:focus-visible, .dm-param input:focus-visible, .dm-param select:focus-visible, .dm-reset:focus-visible { outline: 3px solid #ffc94d; outline-offset: 2px; }
.dm-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; align-items: end; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.dm-params h2 { grid-column: 1 / -1; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.dm-param { display: grid; gap: 6px; min-width: 0; }
.dm-param label { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.dm-param output { font: 600 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--dm-accent, #6ff0bc); }
.dm-param input[type="range"] { width: 100%; accent-color: var(--dm-accent, #6ff0bc); }
.dm-param select { min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: #10183a; color: #fff; font: inherit; font-size: 14px; }
.dm-param--toggle { grid-template-columns: 1fr auto; align-items: center; }
.dm-param--toggle input { width: 20px; height: 20px; accent-color: var(--dm-accent, #6ff0bc); }
.dm-param--color { grid-template-columns: 1fr auto; align-items: center; }
.dm-param input[type="color"] { width: 46px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: none; cursor: pointer; }
.dm-reset { justify-self: start; min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: rgba(255, 255, 255, .8); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dm-reset:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.dm-noparams { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.dm-seed { margin: 10px 2px 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.dm-seed b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #fff; margin-right: 6px; }

/* Write-up, side panel, source */
.dm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.dm-how, .dm-panel, .dm-src, .dm-about, .dm-libinfo { background: #fff; border: 1px solid var(--dm-line); border-radius: 18px; color: #172033; }
.dm-how { padding: 20px 22px; }
.dm-how h2, .dm-src h2, .dm-about h2, .dm-more h2, .dm-libinfo h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--dm-ink); }
.dm-how p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: #2a3550; }
.dm-how code, .dm-about code, .dm-facts code { padding: 1px 5px; border-radius: 5px; background: #eef2fa; color: #0b1533; font: 600 .88em ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.dm-tags li { padding: 4px 10px; border-radius: 99px; background: #f1f4fa; border: 1px solid var(--dm-line); font-size: 12.5px; font-weight: 600; color: #3a465c; }
.dm-side { display: grid; gap: 14px; }
.dm-panel { padding: 16px 18px; }
.dm-panel h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--dm-ink); }
.dm-facts { display: grid; gap: 8px; margin: 0; }
.dm-facts div { display: grid; gap: 2px; }
.dm-facts dt { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--dm-muted); }
.dm-facts dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.dm-side-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.dm-side-links a, .dm-note a { color: var(--dm-blue); display: inline-flex; gap: 4px; align-items: center; }
.dm-note { margin: 0; font-size: 14px; line-height: 1.5; color: #3a465c; }
.dm-src { margin-top: 18px; overflow: hidden; }
.dm-src header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; padding: 16px 18px; }
.dm-src header h2 { margin: 0 0 2px; }
.dm-src header p { margin: 0; font-size: 13px; color: var(--dm-muted); overflow-wrap: anywhere; }
.dm-src header code { font: 600 12.5px ui-monospace, Menlo, Consolas, monospace; color: #0b1533; }
.dm-src-btns { display: flex; gap: 8px; }
.dm-src-btns button { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--dm-line); background: #f3f6fb; color: var(--dm-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dm-src-btns .dm-src-toggle { background: var(--dm-ink); border-color: var(--dm-ink); color: #fff; }
.dm-src-btns button:focus-visible { outline: 3px solid #1463ff; outline-offset: 2px; }
.dm-src-body pre { margin: 0; max-height: 640px; overflow: auto; padding: 16px 18px; background: #0a1024; color: #d7def0; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; tab-size: 2; }
.dm-src-body code { font: inherit; white-space: pre; }
.hl-c { color: #7083a8; font-style: italic; }
.hl-s { color: #9fe870; }
.hl-n { color: #ffb86b; }
.hl-k { color: #c49bff; font-weight: 600; }
.hl-f { color: #6fc8ff; }
.hl-p { color: #8fa0c4; }
.dm-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.dm-pn a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--dm-line); text-decoration: none; color: var(--dm-ink); min-width: 0; }
.dm-pn a[rel="next"] { text-align: right; }
.dm-pn a:hover { border-color: var(--dm-accent); }
.dm-pn small { font-size: 12.5px; font-weight: 700; color: var(--dm-muted); }
.dm-pn b { font-family: var(--display); font-size: 17px; overflow-wrap: anywhere; }

/* Hub and library pages */
.dm-libnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dm-libnav a { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px 5px 6px; border-radius: 99px; background: #0b1533; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; border: 1px solid transparent; }
.dm-libnav a:hover, .dm-libnav a:focus-visible { border-color: var(--dm-accent); }
.dm-libnav b { padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); color: var(--dm-accent); font-size: 12.5px; }
.dm-libsec { margin: 0 0 28px; scroll-margin-top: 16px; }
.dm-libsec-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 0 12px; }
.dm-libsec-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--dm-ink); }
.dm-libsec-head h2 a { color: inherit; text-decoration: none; }
.dm-libsec-head h2 a:hover { text-decoration: underline; }
.dm-libsec-head p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--dm-muted); }
.dm-count { font-family: var(--body, inherit); font-size: 13px; font-weight: 700; color: var(--dm-muted); }
.dm-libsec-all { font-size: 14px; font-weight: 700; color: var(--dm-blue); white-space: nowrap; }
.dm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.dm-filters button { min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--dm-line); background: #fff; color: #2a3550; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dm-filters button span { color: var(--dm-muted); font-weight: 600; }
.dm-filters button[aria-pressed="true"] { background: #0b1533; border-color: #0b1533; color: #fff; }
.dm-filters button[aria-pressed="true"] span { color: var(--dm-mint); }
.dm-filters button:focus-visible { outline: 3px solid #1463ff; outline-offset: 2px; }
.dm-cards { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dm-cards li[hidden] { display: none; }
.dm-card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--dm-ink); background: #fff; border: 1px solid var(--dm-line); transition: transform .14s ease, box-shadow .16s ease, border-color .16s; }
.dm-card:hover, .dm-card:focus-visible { transform: translateY(-2px); border-color: var(--dm-accent); box-shadow: 0 12px 28px rgba(11, 21, 51, .14); }
.dm-card:focus-visible { outline: 3px solid #1463ff; outline-offset: 2px; }
.dm-card-art { position: relative; display: block; aspect-ratio: 16 / 9; background: #070d22; overflow: hidden; }
.dm-poster { display: block; width: 100%; height: 100%; }
.dm-stage--preview { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.dm-card.is-live .dm-stage--preview { opacity: 1; }
.dm-card-body { display: grid; align-content: start; gap: 4px; padding: 12px 14px 14px; }
.dm-card-body small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--dm-accent) 55%, #0b1533); }
.dm-card-body b { font-family: var(--display); font-size: 18px; line-height: 1.15; }
.dm-card-body > span { font-size: 13.5px; line-height: 1.45; color: #3a465c; }
.dm-about { margin: 6px 0 4px; padding: 18px 20px; }
.dm-about ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: #3a465c; }
.dm-about b { color: var(--dm-ink); }
.dm-libinfo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 18px; margin: 0 0 18px; padding: 18px 20px; }
.dm-strengths { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: #3a465c; }
.dm-more { margin-top: 8px; }

@media (max-width: 900px) {
  .dm-hub-hero { grid-template-columns: 1fr; }
  .dm-cols { grid-template-columns: 1fr; }
  .dm-libinfo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dm-player { padding: 8px; border-radius: 16px; margin-left: 0; margin-right: 0; }
  .dm-player .dm-stage { height: clamp(300px, 58vh, 520px); border-radius: 10px; }
  .dm-tb { padding: 0 10px; min-height: 40px; font-size: 13px; }
  .dm-tb span { display: none; }
  .dm-tb--main span { display: inline; }
  .dm-params { padding: 12px; grid-template-columns: 1fr; }
  .dm-how { padding: 16px; }
  .dm-libsec-head { grid-template-columns: auto minmax(0, 1fr); }
  .dm-libsec-all { grid-column: 1 / -1; }
  .dm-pn { grid-template-columns: 1fr; }
  .dm-pn a[rel="next"] { text-align: left; }
  .dm-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-card, .dm-stage--preview { transition: none; }
  .dm-card:hover, .dm-card:focus-visible { transform: none; }
}