.demos-page { min-height: 100svh; }
.demos-page .masthead { position: relative; text-align: center; padding-bottom: 0; }
.demos-shell { width: min(100% - 40px, 980px); margin: 0 auto; padding: clamp(54px, 8vw, 108px) 0 96px; }
.demos-intro { text-align: center; margin: 0 auto 52px; max-width: 700px; }
.demos-intro h1 { margin-bottom: 20px; }
.demos-page[data-demo-view="catalog"] .demos-intro h1 { margin-bottom: 0; }
.demos-intro p { margin: 0; font-size: clamp(16px, 2vw, 21px); line-height: 1.5; }
.demos-intro .demos-eyebrow { margin-bottom: 16px; font-size: 12px; font-weight: bold; letter-spacing: .15em; text-transform: uppercase; }
.demos-status { margin: 0 0 24px; text-align: center; line-height: 1.5; }
.demos-status:empty { display: none; }
.gate-shell { display: grid; align-items: center; min-height: calc(100svh - 100px); }
.gate-panel { display: grid; gap: 14px; width: min(100%, 440px); margin: 0 auto; padding: clamp(24px, 5vw, 42px); background: var(--paper); border: var(--edge); border-radius: 3px; box-shadow: 5px 5px 0 var(--ink); }
.gate-panel h1 { margin: 0 0 12px; text-align: center; }
.gate-panel label { font-weight: bold; }
.gate-panel input { width: 100%; min-height: 48px; padding: 9px 12px; border: var(--edge); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; }
.gate-panel input:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.gate-panel .download-button { width: 100%; margin-top: 8px; cursor: pointer; }
.gate-error { margin: 0; text-align: center; }
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.bundle-card { display: flex; min-height: 180px; flex-direction: column; justify-content: space-between; gap: 28px; padding: 28px; background: var(--paper); border: var(--edge); border-radius: 3px; box-shadow: 5px 5px 0 var(--ink); text-decoration: none; transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.bundle-card strong { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; line-height: 1.15; overflow-wrap: anywhere; text-shadow: var(--digital-shadow); }
.bundle-card span { font-size: 16px; line-height: 1.4; }
.playlist[hidden] { display: none; }
.playlist { width: min(100%, 760px); margin: 0 auto; }
.all-download { display: flex; width: fit-content; margin: 0 auto 30px; }
.playlist-panel { overflow: hidden; background: var(--paper); border: var(--edge); border-radius: 3px; box-shadow: 5px 5px 0 var(--ink); }
.playlist-player { padding: 22px 24px 20px; border-bottom: var(--edge); }
.playlist-label { margin: 0 0 5px; font-size: 12px; font-weight: bold; letter-spacing: .13em; text-transform: uppercase; }
.playlist-current { margin: 0 0 15px; font-size: clamp(19px, 3vw, 24px); font-weight: bold; line-height: 1.25; overflow-wrap: anywhere; }
.playlist-player audio { display: block; width: 100%; }
.track-list { list-style: none; margin: 0; padding: 0; }
.track-row { display: flex; align-items: stretch; min-height: 58px; border-top: 1px solid var(--ink); }
.track-row:first-child { border-top: 0; }
.track-row.is-current { background: color-mix(in srgb, var(--accent) 35%, var(--paper)); }
.track-select { display: flex; flex: 1; align-items: center; gap: 18px; min-width: 0; padding: 10px 20px; border: 0; background: transparent; color: var(--ink); font: bold 16px/1.35 "Courier New", Courier, monospace; text-align: left; cursor: pointer; }
.track-number { flex: none; font-size: 13px; opacity: .6; }
.track-title { min-width: 0; overflow-wrap: anywhere; }
.track-format { display: flex; flex: none; align-items: center; padding: 10px 14px; border: 0; border-left: 1px solid var(--ink); background: transparent; color: var(--ink); font: bold 13px/1.3 "Courier New", Courier, monospace; cursor: pointer; }
.track-download { display: flex; flex: none; align-items: center; padding: 10px 20px; border-left: 1px solid var(--ink); color: var(--ink); font: bold 13px/1.3 "Courier New", Courier, monospace; text-align: center; text-decoration: none; }
.track-select:focus-visible, .track-format:focus-visible, .track-download:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .bundle-card:hover { background: var(--accent); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); } }
@media (hover: hover) and (pointer: fine) { .track-select:hover, .track-format:hover, .track-download:hover { background: var(--accent); } }
@media (max-width: 650px) { .playlist-player { padding: 18px 16px; } .track-select { gap: 12px; padding: 10px 12px; font-size: 14px; } .track-format { padding: 10px 8px; font-size: 12px; } .track-download { padding: 10px 12px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .bundle-card { transition: none; } .bundle-card:hover { transform: none; } }