main { max-width:680px; margin:0 auto; padding:20px 16px 56px; }
h1 { margin:0 0 10px; font:800 clamp(2.4rem, 8vw, 3.4rem)/.95 var(--font-display); text-transform:uppercase; overflow-wrap:anywhere; }
h2 { margin:28px 0 8px; font:800 1.5rem/1.05 var(--font-display); text-transform:uppercase; }
p { margin:0 0 12px; color:var(--dim); }
a { color:var(--chalk); }
.label { font:500 .8125rem/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
:focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
.takes { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.take { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-14); padding:var(--space-14) var(--space-16); background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-12); }
.take:not(:has(> .play)) { grid-template-columns:minmax(0,1fr); }
.take.playing { border-color:var(--signal); box-shadow:var(--glow-selected); }
.take .body { display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.take .head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6) var(--space-10); }
.who { margin:0; color:var(--chalk); }
.player { font:700 22px/1 var(--font-display); text-transform:uppercase; text-decoration:none; color:var(--chalk); }
.take.playing .player { color:var(--signal); }
.meta, .k, .clip, .credit, .news { font:500 13px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.take .oa-tag.new, .take .oa-tag.quick, .take .oa-tag.played { border-color:var(--rule); color:var(--chalk); }
.live { display:none; width:8px; height:8px; border-radius:var(--radius-full); background:var(--signal); box-shadow:var(--glow-live); }
.take.playing .live { display:inline-block; }
.summary { margin:0; font-size:15px; line-height:1.45; color:var(--chalk); }
.starts { margin:0; font-size:13px; line-height:1.4; color:var(--dim); }
.starts q { font-style:italic; color:var(--chalk); }
.facts { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-14); }
.facts a { color:var(--dim); text-decoration:none; font:500 13px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:var(--space-4); min-height:44px; }
.facts .credit a { min-height:0; display:inline; }
.actions { display:flex; gap:12px; align-items:center; }
button, .button { font:600 1rem/1 var(--font-sans); border-radius:999px; padding:10px 18px; cursor:pointer; border:1px solid var(--signal); background:transparent; color:var(--signal); text-decoration:none; display:inline-block; }
.button.primary { background:var(--signal); color:var(--night); }
button.play { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; font-size:22px; background:var(--signal); color:var(--night); }
button.play[aria-pressed="true"] { background:transparent; color:var(--signal); }
.empty-card { display:flex; flex-direction:column; gap:var(--space-12); padding:var(--space-24) var(--space-20); margin:var(--space-12) 0; background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-20); min-width:0; }
.empty-card h2 { margin:0; font:800 28px/.95 var(--font-display); text-transform:uppercase; color:var(--chalk); overflow-wrap:anywhere; }
.empty-card p { margin:0; font-size:15px; line-height:1.5; color:var(--dim); }
.empty-card .empty-actions { display:flex; flex-wrap:wrap; gap:var(--space-10); }
.empty-card .empty-actions .oa-btn { text-transform:uppercase; }
.empty-card .empty-fine { font:600 13px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--chalk); }
.empty-more { display:inline-flex; align-items:center; gap:var(--space-6); min-height:44px; font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); text-decoration:none; }
.notice { padding:14px 16px; background:var(--panel); border:1px solid var(--rule); border-radius:10px; color:var(--chalk); }
.legend { margin:0 0 var(--space-16); background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-12); }
.legend summary { display:flex; align-items:center; min-height:44px; padding:0 var(--space-14); cursor:pointer; color:var(--chalk); font:600 13px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.legend dl { margin:0; padding:0 var(--space-14) var(--space-14); display:grid; gap:var(--space-8); font-size:14px; line-height:1.45; color:var(--dim); }
.legend dt { color:var(--chalk); font:600 13px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.legend dd { margin:0 0 var(--space-6); }
@media (max-width:599px) { a.player { display:inline-flex; align-items:center; min-height:44px; } .facts a { min-width:44px; justify-content:center; } }
.err { display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-20) 0 var(--space-24); }
.err p { margin:0; }
.err h1 { margin:0; font:800 clamp(32px, 3.6vw, 44px)/.92 var(--font-display); text-transform:uppercase; color:var(--chalk); }
.err-eyebrow { font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.err-msg { font-size:15px; line-height:1.5; color:var(--dim); }
.err-note { font:600 13px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--chalk); }
.err-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-10) var(--space-16); }
.err-actions .oa-btn { width:fit-content; }
.err-wait { font:600 13px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }

.story-group { display:flex; flex-direction:column; gap:var(--space-8); }
.sg-plain { margin:0; padding:var(--space-14) 0 var(--space-4); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); }
button.sg-toggle { display:flex; align-items:center; gap:var(--space-6); width:fit-content; min-height:44px; padding:0; border:0; border-radius:var(--radius-4); background:transparent; color:var(--chalk); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
button.sg-toggle[hidden], .sg-plain[hidden], .sg-more[hidden] { display:none; }
.sg-toggle .oa-icon, .sg-label .oa-icon { font-size:18px; }
.sg-toggle .oa-icon { transition:transform .15s; }
.sg-toggle[aria-expanded="true"] .oa-icon { transform:rotate(180deg); }
.sg-more { gap:0; }
.sg-more .take { background:transparent; border:0; border-top:1px solid var(--rule); border-radius:0; padding:var(--space-12) 0; }
.sg-split { padding:var(--space-16) 0; border-top:1px solid var(--rule); gap:var(--space-12); }
.sg-split-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-10); }
.sg-label { display:inline-flex; align-items:center; gap:var(--space-6); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--chalk); }
button.sg-both { gap:var(--space-8); }
.sg-vs { display:flex; align-items:center; gap:var(--space-12); font:600 13px/1 var(--font-mono); letter-spacing:.12em; color:var(--dim); }
.sg-vs::before, .sg-vs::after { content:""; flex:1; border-top:1px solid var(--rule); }

.pb { position:sticky; bottom:0; z-index:5; background:var(--panel); border-top:1px solid var(--rule); }
.pb.off, .pb .off { display:none; }
.pb-in { max-width:1240px; margin:0 auto; padding:var(--space-12) var(--web-gutter) var(--space-14); box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-12) var(--space-24); }
.pb-resume { flex:1 0 100%; display:flex; gap:var(--space-8); }
.pb-info { flex:1 1 280px; min-width:0; }
.pb-title { font:700 19px/1.05 var(--font-display); text-transform:uppercase; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-sub { margin-top:var(--space-4); font:500 13px/1.3 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-ctl { display:flex; align-items:center; gap:var(--space-8); }
.pb .pb-icon, .pb .pb-playbtn { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; font-size:24px; }
.pb .pb-icon { width:44px; height:44px; border:1px solid var(--rule); border-radius:var(--radius-12); background:transparent; color:var(--chalk); }
.pb .pb-playbtn { width:48px; height:48px; border:1px solid transparent; border-radius:var(--radius-full); background:var(--signal); color:var(--night); box-shadow:var(--glow-play); }
.pb .pb-playbtn.on { background:transparent; border-color:var(--signal); color:var(--signal); box-shadow:none; }
.pb-scrub { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:var(--space-6); }
.pb-range { --p:0; -webkit-appearance:none; appearance:none; width:100%; height:34px; margin:0; padding:0; background:transparent; cursor:pointer; }
.pb-range:disabled { cursor:default; }
.pb-range::-webkit-slider-runnable-track { height:34px; background:linear-gradient(var(--signal), var(--signal)) 0 100%/calc(var(--p) * 1%) 18px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 100%/100% 18px no-repeat; }
.pb-range::-moz-range-track { height:34px; background:linear-gradient(var(--signal), var(--signal)) 0 100%/calc(var(--p) * 1%) 18px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 100%/100% 18px no-repeat; }
.pb-range::-webkit-slider-thumb { -webkit-appearance:none; width:var(--space-6); height:34px; border:0; border-radius:var(--radius-full); background:var(--chalk); }
.pb-range::-moz-range-thumb { width:var(--space-6); height:34px; border:0; border-radius:var(--radius-full); background:var(--chalk); }
.pb-range:disabled::-webkit-slider-thumb { background:var(--dim); }
.pb-range:disabled::-moz-range-thumb { background:var(--dim); }
.pb-times { display:flex; justify-content:space-between; font:600 13px/1 var(--font-mono); color:var(--chalk); }
.pb-times span:last-child { color:var(--dim); }
.pb-chips { display:flex; flex-wrap:wrap; gap:var(--space-8); }
.pb .pb-chip { box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--space-6); min-height:44px; padding:0 var(--space-12); border:1px solid var(--rule); border-radius:var(--radius-10); background:transparent; color:var(--chalk); font:600 13px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; cursor:pointer; }
.pb .pb-chip:disabled, .pb .pb-icon:disabled { color:var(--dim); cursor:default; }
.pb .pb-resume-go { border-color:var(--signal); color:var(--signal); }
.pb :focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
@media (max-width: 599px) {
.pb-in { padding:var(--space-6) var(--web-gutter); gap:0 var(--space-8); justify-content:center; }
.pb-resume { order:0; }
.pb-info { order:1; flex:1 1 calc(100% - 161px); }
.pb-ctl { order:2; flex:0 0 152px; }
.pb-chips { display:contents; }
.pb-back { order:3; } .pb-fwd { order:5; }
.pb .pb-chip { min-width:44px; justify-content:center; }
.pb .pb-back, .pb .pb-fwd { flex:0 0 52px; padding:0; letter-spacing:0; }
.pb-scrub { order:4; flex:1 1 calc(100% - 121px); flex-direction:row; align-items:center; gap:var(--space-8); }
.pb-times { display:contents; }
.pb-el { order:0; } .pb-range { order:1; flex:1; min-width:0; height:44px; } .pb-range::-webkit-slider-runnable-track { height:44px; } .pb-range::-moz-range-track { height:44px; } .pb-range::-webkit-slider-thumb { height:44px; } .pb-range::-moz-range-thumb { height:44px; } .pb-tot { order:2; }
.pb-wrong { order:6; }
}