/* Afterlight trace and set pages. One dominant action per state: watch (stage), then send (gold button). Everything else is a tab or a link. */
:root{--ember:#e8913a;--glow:#f3c77c;--stage:#050506}
.tr{max-width:1100px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 120px max(16px,env(safe-area-inset-left,0px));display:grid;gap:16px;min-width:0}
.tr>*{min-width:0}
.tr-stage{position:relative;background:var(--stage);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));}
@media (min-width:760px){.tr-stage{margin:0}}
.tr-stage video,.tr-stage img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--stage)}
.tr-stage .still{display:block;position:relative;color:#fff;text-decoration:none}
.tr-stage .still span{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--glow);color:#0b0d10;padding:10px 16px}
.tr-head{display:grid;gap:8px}
.tr-head h1{margin:0}
.eyebrow b{color:var(--ink)}
.claim{font:italic 400 17px/1.4 var(--body);margin:0;color:var(--ink-2)}
/* buttons */
.share,.sbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share button,.share a.b,.sbar button,a.b{all:unset;cursor:pointer;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border:2px solid var(--ink);color:var(--ink);line-height:1.1}
.share button small,.sbar button small{font-weight:400;opacity:.7;margin-left:4px}
.share button:hover,.share a.b:hover,.sbar button:hover,a.b:hover{background:var(--amber);color:#0b0d10;border-color:#0b0d10}
.share .go,.sbar .go{background:var(--glow);border-color:var(--glow);color:#0b0d10}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.said{font:12px var(--mono);color:var(--ink-2)}
/* tabs */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--ink);overflow-x:auto;position:sticky;top:0;background:var(--paper);z-index:5;scrollbar-width:none}
.tabs button{all:unset;cursor:pointer;font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:12px 10px;color:var(--ink-2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button i{font-style:normal;color:var(--ember);margin-left:3px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ember)}
.panel{display:grid;gap:22px}
.panel[hidden]{display:none}
.block{display:grid;gap:10px}
.block h3{font-size:22px}
.note{margin:0;color:var(--ink-2);font-size:15px;max-width:68ch}
blockquote{margin:0;border-left:3px solid var(--ember);padding:4px 0 4px 14px;font:400 18px/1.5 var(--body);max-width:62ch}
.next blockquote{font-size:16px;border-left-color:var(--rule)}
.did{margin:0;font-size:16px;line-height:1.6;max-width:62ch}
.how{margin:0;font:12.5px/1.7 var(--mono);color:var(--ink-2)}
.how em{font-style:normal;color:var(--ink)}
/* figures */
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.fig{margin:0;display:grid;gap:6px;align-content:start}
.fig a{display:block;background:var(--stage)}
.fig img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
.fig figcaption{font-size:14px;line-height:1.45;color:var(--ink-2)}
.seen{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.fig.sm{flex:0 0 auto;width:170px}
.fig.sm img{height:110px;object-fit:cover}
.fig.sm figcaption{font:11px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* agents */
.agent{display:grid;gap:10px;border-top:2px solid var(--ink);padding-top:12px}
.agent header{display:grid;gap:4px}
.agent h3{font-size:24px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.chip{font:600 11px var(--mono);letter-spacing:.06em;padding:3px 7px;border:1px solid var(--rule)}
.chip.pass{border-color:var(--teal);color:var(--teal)}
.chip.repair,.chip.fail{border-color:var(--ember);color:var(--ember)}
details{border:1px solid var(--rule);padding:0}
details>summary{cursor:pointer;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;list-style:none}
details>summary::before{content:"+ ";color:var(--ember)}
details[open]>summary::before{content:"– "}
.md{padding:2px 14px 14px;font-size:15px;line-height:1.55;max-width:75ch;overflow-wrap:anywhere}
.md p{margin:.6em 0}.md ul,.md ol{margin:.4em 0;padding-left:1.3em}.md li{margin:.2em 0}
.md h4{font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:1em 0 .3em}
.md code,.code{font:12.5px/1.55 var(--mono)}
.md code{background:var(--panel);padding:0 3px}
.brief .md{font-size:14.5px;color:var(--ink-2)}
/* source */
.files{list-style:none;margin:0;padding:0;display:grid;gap:0}
.files li{display:grid;grid-template-columns:minmax(0,auto) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--rule)}
.files a{font:600 14px var(--mono)}
.files span{font:12px var(--mono);color:var(--ink-2);text-align:right}
.files em{grid-column:1/-1;font-style:normal;font-size:14px;color:var(--ink-2)}
.code{display:block;margin:0;max-height:520px;overflow:auto;background:var(--panel);padding:12px 14px;white-space:pre;tab-size:4}
.smap{width:100%;height:auto;background:var(--stage);display:block}
.smap .grid{stroke:#222;stroke-width:1}.smap .tk{fill:#8a8378;font:10px var(--mono, monospace)}.smap .ln{fill:#c8bfb0;font:11px var(--mono, monospace)}.smap .whole{fill:#1a1a1c;stroke:#333}
/* prev / next */
.pn{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;border-top:2px solid var(--ink);padding-top:12px}
.pn a{text-decoration:none;font:600 15px var(--body);display:grid;gap:2px}
.pn a small{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pn a[rel=next]{text-align:right}.pn .set{text-align:center}
.foot2{font:11.5px var(--mono);color:var(--ink-2);margin:0;line-height:1.6}
.crumbs a{text-decoration:none}
/* lightbox */
.alb{max-width:min(96vw,1400px);max-height:94vh;padding:0;border:0;background:#000;color:#ddd}
.alb::backdrop{background:rgba(0,0,0,.85)}
.alb img{display:block;max-width:100%;max-height:84vh;margin:0 auto}
.alb p{margin:0;padding:8px 12px;font:13px var(--mono)}
.alb form{position:absolute;top:6px;right:6px;margin:0}
.alb button{all:unset;cursor:pointer;font:600 12px var(--mono);text-transform:uppercase;background:rgba(0,0,0,.7);color:#fff;padding:8px 10px;border:1px solid #555}
/* set page */
.eranav{display:flex;flex-wrap:wrap;gap:4px 14px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.eranav a{text-decoration:none;color:var(--ink-2);border-bottom:2px solid transparent;padding:2px 0}
.eranav a[aria-current]{color:var(--ink);border-bottom-color:var(--ember)}
.now{position:absolute;left:10px;top:10px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:4px 7px;pointer-events:none}
.now:empty{display:none}
.plist{list-style:none;margin:0;padding:0;display:grid}
.plist li{display:grid;grid-template-columns:auto 112px minmax(0,1fr);gap:10px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.plist li[aria-current="true"]{background:linear-gradient(90deg,rgba(232,145,58,.14),transparent 70%)}
.plist input{width:22px;height:22px;accent-color:var(--ember);margin:0}
.plist .th{all:unset;cursor:pointer;width:112px;aspect-ratio:16/9;background:#111 center/cover no-repeat;position:relative}
.plist .th b{position:absolute;left:4px;bottom:3px;font:600 10px var(--mono);color:#fff;text-shadow:0 0 3px #000}
.plist .tx{display:grid;gap:2px;min-width:0}
.plist .tx strong{font:600 16px var(--body);overflow-wrap:anywhere}
.plist .tx span{font:11.5px var(--mono);color:var(--ink-2);letter-spacing:.03em}
.plist .tx nav{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 11.5px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.plist .tx nav a,.plist .tx nav button{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.plist li.nofilm .th{opacity:.6}
.sbar{position:sticky;bottom:0;z-index:6;background:var(--paper);border-top:2px solid var(--ink);padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.sbar .cnt{font:600 12px var(--mono);margin-right:auto;width:100%}
@media (min-width:760px){.sbar .cnt{width:auto}}
.sbar button[disabled]{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media (max-width:520px){.sbar{gap:6px}.sbar button{padding:8px 9px;font-size:11px}.share button,.share a.b{padding:9px 10px;font-size:11.5px}}
.tr-left,.tr-right{display:grid;gap:16px;min-width:0;align-content:start}
@media (min-width:1000px){
  main.tr{max-width:1480px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:32px;align-items:start}
  main.tr>.crumbs,main.tr>.pn,main.tr>.foot2,main.tr>.eranav,main.tr>.sbar{grid-column:1/-1}
  .tr-left{position:sticky;top:12px}
  .tr-left h1.ft{font-size:clamp(40px,4.6vw,72px)}
  .tabs{top:0}
}
.smap .tk{font-size:15px}.smap .ln{font-size:16px}
.tr .note{font-family:var(--body);font-size:15.5px;line-height:1.5;letter-spacing:0;text-transform:none}
.selall{display:flex;gap:14px;margin:0}.selall button{all:unset;cursor:pointer;font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
/* channel page */
.reel{background:var(--stage);color:#ece4d4;display:grid}
@media (min-width:1000px){.reel{grid-template-columns:minmax(0,1fr) 340px;align-items:end}}
.rstage{position:relative;min-width:0}
.rstage video{display:block;width:100%;aspect-ratio:16/9;max-height:72vh;object-fit:contain;background:var(--stage)}
.snd{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--glow);color:#0b0d10;padding:13px 20px}
.snd:hover{background:#fff}
.rbar{display:flex;gap:3px;padding:0 max(16px,env(safe-area-inset-left,0px)) 0;height:14px;align-items:center}
.rbar button{all:unset;cursor:pointer;flex-basis:0;height:5px;background:#2b2621;position:relative;overflow:hidden}
.rbar button:hover{background:#4a3f33}
.rbar button span{position:absolute;inset:0 auto 0 0;width:0;background:var(--ember)}
.rbar button.on{height:7px}
.rnow{padding:12px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));display:grid;gap:6px}
.rnow .eyebrow{color:#a49a8c}
.rnow h2{color:#fff;font-size:clamp(26px,3.4vw,40px)}
.ra{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.ra a,.ra button{all:unset;cursor:pointer;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 11px;border:2px solid #6b6156;color:#ece4d4}
.ra a.hot{background:var(--glow);border-color:var(--glow);color:#0b0d10}
.ra a:hover,.ra button:hover{border-color:var(--glow)}
.ch .tr.chan{display:grid;grid-template-columns:minmax(0,1fr);max-width:1480px}
.chead{display:grid;gap:8px}.chead h1{margin:0}
.cintro{margin:0;max-width:70ch;font-size:16px;line-height:1.55}
.filt button{all:unset;cursor:pointer;color:var(--ink-2);border-bottom:2px solid transparent;padding:2px 0}
.filt button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ember)}
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:22px 18px}
.cgrid li{display:grid;gap:8px;align-content:start;min-width:0}
.cgrid li[hidden]{display:none}
.cth{position:relative;aspect-ratio:16/9;background:#111 center/cover no-repeat;outline:1px solid var(--rule)}
.cgrid li.playing .cth{outline:3px solid var(--ember)}
.cth>b{position:absolute;left:6px;bottom:4px;font:600 12px var(--mono);color:#fff;text-shadow:0 0 4px #000,0 0 4px #000}
.cth>i{position:absolute;right:6px;top:6px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;background:var(--glow);color:#0b0d10;padding:2px 6px}
.pl{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.pl span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid var(--glow);display:grid;place-items:center;opacity:.9}
.pl span::before{content:"";border-left:16px solid var(--glow);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.pl.open span::before{border:0;width:14px;height:14px;border-top:3px solid var(--glow);border-right:3px solid var(--glow);margin:0 4px 0 0;transform:rotate(45deg)}
.pl:hover span{background:rgba(232,145,58,.4)}
.ctx{display:grid;gap:4px}
.ce,.cp{margin:0;font:11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.cp{color:var(--ember);text-transform:none}
.ctx h3{font-size:24px}.ctx h3 a{text-decoration:none}
.cn{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.ca{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.ca a,.ca button{all:unset;cursor:pointer;font:600 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:7px 9px;border:2px solid var(--ink)}
.ca a.hot{background:var(--glow);border-color:var(--glow);color:#0b0d10}
.ca a:hover,.ca button:hover{background:var(--amber);border-color:#0b0d10;color:#0b0d10}
.toast{position:fixed;left:50%;bottom:16px;transform:translate(-50%,40px);opacity:0;transition:.2s;background:#0b0d10;color:#fff;font:12px var(--mono);padding:10px 14px;margin:0;max-width:90vw;overflow-wrap:anywhere;pointer-events:none;z-index:40}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:759px){
  main.tr:not(.set):not(.chan) .tr-stage{position:sticky;top:0;z-index:7}
  main.tr:not(.set):not(.chan) .tr-stage video{max-height:34vh;max-height:34dvh}
  main.tr:not(.set):not(.chan) .tabs{top:min(34vh,56.25vw)}
  .tr-head h1.ft{font-size:clamp(34px,10vw,52px)}
  .share{gap:6px}
  .ch .top{position:static}
}
@media (max-width:759px){main.tr:not(.set):not(.chan) .tr-left{display:contents}}