/* Label League — /demos · THE GAMEPLAY DEMOS PAGE (spec: CLAUDE-CODE-demos-page.md, render: "18 Demos Page", 9/25/2026).
   One player, four chapters. The page is the video: a 4:5 well on desktop, a fixed 312x390 frame on the phone.
   The play button is THE RECORD from the front page — black vinyl, paper label, ink triangle — and it turns while paused.

   SCOPING (veto: a rename is a grep, not an edit): every selector in this file is prefixed .dm- and every keyframe dm-.
   Nothing here is shared with roulette / wire / games. Verified zero `dm-` matches in site.css and shell.css before writing.

   TOKENS: the page is pinned dark (<html data-theme="dark">) so the identity system's dark tokens resolve to exactly the
   hexes the spec enumerates — no new tokens are minted:
     --paper #0F0F11 page · --card #19191C · --sunk #131316 chrome · --rule #2A2A2E hairline · --rule-strong #3A3A40
     --ink #F2F0EB paper text · --ink2 #C8C6C0 body · --mute/--eyebrow #8B8A86 · --on-ink #111111 · --vinyl #0B0B0D well
   The literals that appear below are the ones the spec writes out inside the record's gradients, masks and shadows. */

/* ── the page ── */
.dm{padding-bottom:calc(66px + 18px + env(safe-area-inset-bottom))}
.dm-wrap{max-width:1280px;margin:0 auto}
.dm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the register: an eyebrow is mono, tracked, muted, with a hairline rule to its left ── */
.dm-eyebrow{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow);display:flex;align-items:center;gap:10px}
.dm-eyebrow .dm-rule{display:block;flex:none;width:22px;height:1px;background:var(--eyebrow)}
.dm-eb-wide{display:none}
.dm-eb-narrow{display:inline}

/* ── header row ── */
.dm-head{padding:18px 18px 0}
/* the phone shows the eyebrow and then the player: the title and the line stay in the document (and in the
   accessibility tree) but are not painted, so the chapter rows clear the thumb bar. Restored at >=1024. */
.dm-title,.dm-line{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dm-now{display:none}
.dm-now-eb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.dm-now-name{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1}
.dm-now-meta{font-family:var(--mono);font-size:10.5px;color:var(--eyebrow)}

/* ── the two columns ── */
.dm-body{padding:0 18px;display:grid;gap:12px}

/* ── the player: a 4:5 well. Fixed 312x390 on the phone so the chapter list clears the thumb bar ── */
.dm-player{position:relative;width:312px;height:390px;margin:12px auto 0;border-radius:14px;overflow:hidden;background:var(--vinyl);border:1px solid var(--rule);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.dm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--vinyl);opacity:0;z-index:0;cursor:pointer}
.dm-video.is-on{opacity:1;z-index:1}

/* the poster state — the record, the chapter name, the cue */
.dm-poster{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;transition:opacity .3s ease;background:var(--vinyl)}
.dm-player.is-playing .dm-poster{opacity:0;pointer-events:none}
.dm-poster-eb{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow)}
.dm-poster-name{font-family:var(--disp);font-weight:700;font-size:40px;line-height:.9;letter-spacing:-.045em;text-wrap:balance;color:var(--ink)}
.dm-poster-cue{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* THE RECORD — black vinyl, paper label, grooves, one glint, the ink triangle. It turns while paused. */
.dm-record{width:84px;height:84px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle,#F2F0EB 0 37%,#1B1B1F 37.5%,#0B0B0D 100%);
  box-shadow:0 0 0 1px rgba(242,240,235,.14),0 30px 50px -26px rgba(0,0,0,.9);
  animation:dm-spin 9s linear infinite}
.dm-grooves{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2px,rgba(242,240,235,.07) 2px 3px);
  -webkit-mask:radial-gradient(circle,transparent 0 38%,#000 39%);mask:radial-gradient(circle,transparent 0 38%,#000 39%)}
.dm-glint{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 200deg,transparent 0 30%,rgba(242,240,235,.14) 36%,transparent 44%,transparent 60%,rgba(242,240,235,.07) 66%,transparent 74%)}
.dm-record svg{position:relative;width:22px;height:22px;margin-left:3px}
@keyframes dm-spin{to{transform:rotate(360deg)}}

/* ── the transport: always on, over the fade ── */
.dm-transport{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 14px 14px;background:linear-gradient(180deg,transparent,rgba(11,11,13,.9) 40%);display:grid;gap:8px}
.dm-scrub{position:relative;height:18px;display:flex;align-items:center;cursor:pointer}
.dm-scrub-track{position:absolute;left:0;right:0;height:2px;background:var(--rule-strong)}
.dm-scrub-fill{position:absolute;left:0;height:2px;background:var(--ink);width:0}
.dm-scrub-tick{position:absolute;width:1px;height:8px;background:var(--mute);margin-top:-1px}
.dm-scrub-thumb{position:absolute;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink);margin-left:-6px;box-shadow:0 0 0 3px rgba(242,240,235,.15);pointer-events:none}
.dm-scrub-input{position:absolute;left:-6px;right:-6px;top:0;width:calc(100% + 12px);height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.dm-scrub-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff}
.dm-scrub-input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff}
.dm-scrub-input:focus-visible~.dm-scrub-thumb{box-shadow:0 0 0 3px rgba(242,240,235,.15),0 0 0 5px var(--ink)}

.dm-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.dm-row-l,.dm-row-r{display:flex;align-items:center;gap:14px}
.dm-note{color:var(--mute)}
.dm-clock{font-variant-numeric:tabular-nums;white-space:nowrap}
/* the transport's own controls are desktop-only: they do not fit across a 312px frame (see the render's phone mock) */
.dm-tbtn,.dm-row .dm-note-long{display:none}

/* buttons — 34px, radius 9. Primary = paper on ink text; secondary = a hairline-2 outline. */
.dm-btn{height:34px;padding:0 14px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border:1px solid var(--rule-strong);background:transparent;color:var(--ink)}
.dm-btn.is-primary{border-color:transparent;background:var(--ink);color:var(--on-ink)}
.dm-tbtn{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--rule-strong);background:transparent;color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;align-items:center;gap:8px}
.dm-tbtn svg{width:12px;height:12px;fill:var(--ink)}
.dm-bars{display:inline-flex;gap:3px}
.dm-bars i{display:block;width:3px;height:11px;background:var(--ink)}

/* ── the chapter cards under the player: number · length · state, and the name. Nothing else. ── */
.dm-cards{display:none;margin-top:22px;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dm-card{width:100%;text-align:left;font-family:var(--disp);cursor:pointer;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;display:grid;gap:8px}
.dm-card.is-cur{border-color:var(--ink)}
.dm-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dm-card.is-cur .dm-card-state{color:var(--ink)}
.dm-card-name{display:block;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}

/* ── the chapter rail. On the phone these same rows are the list under the player. ── */
.dm-rail{display:flex;flex-direction:column;gap:22px}
.dm-rail .dm-eyebrow,.dm-try{display:none}
.dm-chapters{display:grid;gap:5px}
.dm-chap{width:100%;text-align:left;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--disp)}
.dm-chap.is-cur{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.dm-chap-num{font-family:var(--mono);font-size:13px;letter-spacing:.06em;opacity:.7}
.dm-chap-name{font-weight:700;font-size:14px;letter-spacing:-.01em}
.dm-chap-len{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

/* the level meter rides the row that is up */
.dm-meter{display:none;align-items:flex-end;gap:2px;height:12px}
.dm-chap.is-cur .dm-meter{display:inline-flex}
.dm-meter i{display:block;width:3px;background:currentColor;transform-origin:bottom;animation:dm-meter .9s ease-in-out infinite}
.dm-meter i:nth-child(1){height:12px;opacity:.9;animation-delay:0s}
.dm-meter i:nth-child(2){height:7px;opacity:.7;animation-delay:.18s}
.dm-meter i:nth-child(3){height:10px;opacity:.8;animation-delay:.36s}
@keyframes dm-meter{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}

/* ── try the real thing ── */
.dm-try{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:4px 16px}
.dm-try-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.dm-try-row:last-child{border-bottom:0}
.dm-try-name{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink)}

/* ── the phone thumb bar ── */
.dm-thumb{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(66px + env(safe-area-inset-bottom));padding:12px 18px env(safe-area-inset-bottom);background:rgba(15,15,17,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule);display:flex;align-items:center;gap:10px}
.dm-thumb-label{flex:1;min-width:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mute)}
.dm-thumb .dm-btn{height:40px;border-radius:10px;font-size:11px;letter-spacing:.1em}

/* ══ desktop ≥1024 (the spec's breakpoint, not the site's 900) ══ */
@media (min-width:1024px){
  .dm{padding-bottom:0}
  .dm-eb-wide{display:inline}
  .dm-eb-narrow{display:none}

  .dm-head{padding:40px 40px 0;display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
  .dm-title,.dm-line{position:static;width:auto;height:auto;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;border:0}
  .dm-title{font-family:var(--disp);font-weight:700;font-size:64px;line-height:.9;letter-spacing:-.05em;margin:14px 0 0}
  .dm-line{font-size:16px;line-height:1.55;color:var(--ink2);margin:18px 0 0;max-width:56ch}
  .dm-eyebrow{font-size:11px;letter-spacing:.18em}
  .dm-eyebrow .dm-rule{width:26px}
  .dm-now{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;padding-top:8px}

  .dm-body{padding:30px 40px 48px;grid-template-columns:1fr 380px;gap:40px;align-items:start}

  .dm-player{width:100%;height:auto;aspect-ratio:4 / 5;max-height:1000px;margin:0}
  .dm-poster{gap:30px;padding:60px}
  .dm-poster-eb{font-size:12px;letter-spacing:.22em}
  .dm-poster-name{font-size:84px;letter-spacing:-.05em;max-width:12ch}
  .dm-poster-cue{font-size:11px;letter-spacing:.18em}
  .dm-record{width:132px;height:132px;box-shadow:0 0 0 1px rgba(242,240,235,.14),0 40px 60px -30px rgba(0,0,0,.9)}
  .dm-record svg{width:30px;height:30px;margin-left:4px}

  .dm-transport{padding:18px 24px 20px;gap:12px}
  .dm-row{font-size:10.5px}
  .dm-tbtn{display:inline-flex}
  .dm-row .dm-note-long{display:inline}
  .dm-row .dm-note-short{display:none}

  .dm-cards{display:grid}

  .dm-rail .dm-eyebrow{display:flex;font-size:10.5px;letter-spacing:.16em}
  .dm-rail .dm-eyebrow .dm-rule{width:22px}
  .dm-rail .dm-eyebrow.dm-eyebrow-gap{margin-top:6px}
  .dm-chapters{gap:0;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:6px}
  .dm-chap{grid-template-columns:34px 1fr auto;gap:14px;padding:14px 12px;border:0;border-radius:9px}
  .dm-chap:hover:not(.is-cur){background:#222226}
  .dm-chap-num{font-size:14px}
  .dm-chap-name{font-size:16px}
  .dm-chap-len{font-size:10px;opacity:.8}
  .dm-try{display:block}
  .dm-thumb{display:none}
}

/* reduced motion: the record stops turning, the meter holds still */
@media (prefers-reduced-motion:reduce){
  .dm-record,.dm-meter i{animation:none}
  .dm-poster{transition:none}
}