/* ==========================================================================
   MATCH CUT
   Palette from a colour-grading suite: darkened room, cool white, and RGB
   channel colours used only where they carry data. Amber is the tally light,
   reserved exclusively for agent activity.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --room:#0B0E14;         /* the darkened suite */
  --panel:#121824;
  --panel-2:#0E131D;
  --rule:#1E2735;
  --rule-2:#2A3547;
  --paper:#E8EDF5;
  --dim:#7C8BA1;
  --dimmer:#4E5B6E;
  --ch-r:#FF5D5D;         /* channel colours: data only */
  --ch-g:#5BE39A;
  --ch-b:#5AA2FF;
  --tally:#FFB000;        /* agent activity only. nothing else. */
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
/* A class that sets display beats the browser's [hidden] rule, so hidden stops
   hiding. Anything using the attribute needs this or it is silently always on. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--room);color:var(--paper);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--tally);color:var(--room)}

.mono{font-family:var(--mono)}
.lab{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dimmer);
}

/* ---------------------------------------------------------------- shell -- */
.app{display:grid;grid-template-rows:auto 1fr;height:100vh}

.bar{
  display:flex;align-items:center;gap:20px;padding:0 18px;height:52px;
  border-bottom:1px solid var(--rule);background:var(--panel-2);flex:0 0 auto;
}
.mark{display:flex;align-items:baseline;gap:9px}
.mark b{
  font-family:var(--serif);font-size:23px;font-weight:400;letter-spacing:-.01em;line-height:1;
}
.mark i{
  font-family:var(--serif);font-style:italic;font-size:23px;color:var(--dim);line-height:1;
}
.bar .counts{display:flex;gap:18px;margin-left:6px}
.bar .counts span{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.bar .counts b{color:var(--paper);font-weight:500}

/* the tally light. amber means an agent is working. */
.tally{
  margin-left:auto;display:flex;align-items:center;gap:9px;padding:6px 11px;
  border:1px solid var(--rule-2);border-radius:2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);transition:color .2s,border-color .2s,background .2s;
}
.tally i{
  width:7px;height:7px;border-radius:50%;background:var(--rule-2);flex:0 0 auto;
  transition:background .2s,box-shadow .2s;
}
.tally[data-state="ready"]{color:var(--dim);border-color:var(--rule-2)}
.tally[data-state="ready"] i{background:var(--ch-g)}
.tally[data-state="local"]{color:var(--dim);border-color:var(--rule-2)}
.tally[data-state="local"] i{background:var(--ch-b)}
.tally[data-state="live"]{
  color:var(--tally);border-color:var(--tally);background:rgba(255,176,0,.08);
}
.tally[data-state="live"] i{background:var(--tally);box-shadow:0 0 0 4px rgba(255,176,0,.22);animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,176,0,0)}}

/* ---------------------------------------------------------------- body -- */
.main{display:grid;grid-template-columns:minmax(0,1fr) 372px;min-height:0}
@media(max-width:1100px){.main{grid-template-columns:1fr}}

.left{display:flex;flex-direction:column;min-height:0;min-width:0;overflow-y:auto}
.left::-webkit-scrollbar{width:10px}
.left::-webkit-scrollbar-thumb{background:var(--rule)}
.right{border-left:1px solid var(--rule);display:flex;flex-direction:column;min-height:0;background:var(--panel-2)}
@media(max-width:1100px){.right{display:none}}

/* ---------------------------------------------------------------- stage -- */
.stage{
  position:relative;background:#000;flex:0 0 auto;border-bottom:1px solid var(--rule);
  /* 16:9 of the available width, capped so the annotation always has room */
  height:min(42vh, calc((100vw - 372px) * 0.5625));
  display:grid;place-items:center;overflow:hidden;
  position:sticky;top:0;z-index:3;   /* stays visible while the writing scrolls */
}
.stage #screen,.stage iframe{
  position:relative;inset:auto;
  width:min(100%, calc(42vh * 1.7778));aspect-ratio:16/9;height:auto;
}
@media(max-width:1100px){.stage{height:min(40vh, calc(100vw * 0.5625))}}
.stage iframe,.stage #screen{position:absolute;inset:0;width:100%;height:100%;border:0}

.empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;text-align:center;padding:30px;background:var(--panel-2);
}
.empty h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,40px);
  line-height:1.12;margin:0;max-width:19ch;letter-spacing:-.01em;
}
.empty h1 em{font-style:italic;color:var(--dim)}
.starters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}
.starters button{
  border:1px solid var(--rule-2);border-radius:2px;padding:9px 13px;
  font-family:var(--mono);font-size:11px;color:var(--dim);text-align:left;
  transition:border-color .15s,color .15s,background .15s;
}
.starters button:hover{border-color:var(--tally);color:var(--paper);background:rgba(255,176,0,.06)}
.starters button:focus-visible{outline:2px solid var(--tally);outline-offset:2px}

/* ---------------------------------------------------------------- meta --- */
.meta{padding:20px 28px 0;flex:0 0 auto}
.meta .row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.meta h2{
  font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.08;margin:0;
  letter-spacing:-.01em;
}
.meta h2 em{font-style:italic;color:var(--dim)}
.meta .facts{display:flex;gap:16px;margin:9px 0 0;flex-wrap:wrap}
.meta .facts span{font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.meta .facts b{color:var(--paper);font-weight:500}
.agent-note{
  margin:12px 0 0;padding:9px 12px;border-left:2px solid var(--tally);
  background:rgba(255,176,0,.06);font-size:13px;color:#F0DDB8;
}

/* ------------------------------------------------------- FINGERPRINT ----- */
/* The signature. Each channel is plotted against the whole archive, so the
   mark shows where this video sits among 7,139, not an abstract number.      */
.fp{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:16px}
.fp .ch{background:var(--panel-2);padding:11px 13px 13px}
.fp .ch .lab{display:block;margin-bottom:9px}
.fp .ch .val{font-family:var(--mono);font-size:15px;font-weight:500;line-height:1;margin-bottom:9px}
.fp .ch .val u{text-decoration:none;font-size:9.5px;color:var(--dimmer);margin-left:3px}
.scale{position:relative;height:22px}
.scale .axis{position:absolute;left:0;right:0;top:10px;height:1px;background:var(--rule-2)}
.scale .q{position:absolute;top:7px;width:1px;height:7px;background:var(--rule-2)}
.scale .pin{
  position:absolute;top:3px;width:2px;height:15px;background:var(--paper);
  transition:left .45s cubic-bezier(.2,.9,.3,1);
}
.fp .ch[data-c="r"] .pin{background:var(--ch-r)}
.fp .ch[data-c="g"] .pin{background:var(--ch-g)}
.fp .ch[data-c="b"] .pin{background:var(--ch-b)}
.scale .pin::after{
  content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:4px solid currentColor;
}
@media(max-width:820px){.fp{grid-template-columns:repeat(3,1fr)}}

/* --------------------------------------------------------- annotation --- */
.read{flex:0 0 auto;padding:26px 28px 72px}
.read h3{margin:0 0 10px;font-size:11px}
.read p{margin:0 0 26px;font-size:16px;line-height:1.72;color:#CBD5E3;max-width:70ch}
.read p.big{
  font-family:var(--serif);font-size:22px;line-height:1.56;color:var(--paper);max-width:64ch;
}
.read h3 + p{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;max-width:70ch}
.chips b{
  font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dim);
  border:1px solid var(--rule);padding:4px 8px;border-radius:2px;
}

/* --------------------------------------------------------------- rail --- */
.panel{display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--rule)}
.panel:last-child{border-bottom:0;flex:1 1 auto}
.panel > header{
  display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--rule);flex:0 0 auto;
}
.panel > header b{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:500}
.panel > header i{font-family:var(--mono);font-size:9.5px;color:var(--dimmer);font-style:normal}
.scroll{overflow-y:auto;min-height:0}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--rule)}

/* agent call feed */
.calls{max-height:246px}
.call{padding:10px 14px;border-bottom:1px solid var(--rule);animation:slide .3s ease both}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}}
.call .h{display:flex;align-items:baseline;gap:8px}
.call .h b{font-family:var(--mono);font-size:11.5px;color:var(--tally);font-weight:500}
.call .h i{font-family:var(--mono);font-size:9.5px;color:var(--dimmer);font-style:normal;margin-left:auto}
.call .a{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call .r{font-family:var(--mono);font-size:10.5px;color:var(--ch-g);margin-top:4px}

/* connections */
.edge{display:block;width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);
      border-left:2px solid transparent;transition:background .15s,border-color .15s}
.edge:hover{background:var(--panel);border-left-color:var(--tally)}
.edge:focus-visible{outline:2px solid var(--tally);outline-offset:-2px}
.edge[disabled]{opacity:.4;cursor:default}
.edge .t{font-size:13px;line-height:1.3}
.edge .t u{text-decoration:none;color:var(--dim)}
.edge .why{font-family:var(--mono);font-size:10px;color:var(--tally);margin-top:5px;opacity:.85}
.edge .why::before{content:"↳ "}

.hint{padding:22px 16px;text-align:center;color:var(--dimmer);font-size:12.5px;line-height:1.55}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ------------------------------------------------- connections, in place -- */
.conn{border-top:1px solid var(--rule);margin-top:0}
.conn > header{display:flex;align-items:center;gap:10px;padding:14px 0 10px}
.conn > header i{font-family:var(--mono);font-size:9.5px;color:var(--dimmer);font-style:normal}
.edges{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule)}
.edges .edge{background:var(--panel-2);border:0;border-left:2px solid transparent;padding:11px 13px}

/* ------------------------------------------------------------ the rail --- */
.right{background:var(--panel-2)}
.rail-head{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;
           border-bottom:1px solid var(--rule);flex:0 0 auto}
.rail-head b{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:500}
.rail-head i{font-family:var(--mono);font-size:9.5px;color:var(--dimmer);font-style:normal}
.thread{flex:1 1 auto;padding:14px 0}

.turn{padding:0 15px 16px}
.turn.you .b{background:var(--panel);border:1px solid var(--rule-2);border-radius:2px;padding:9px 12px;
             font-size:13.5px;color:var(--paper)}
.turn.them .b{font-size:14px;line-height:1.6;color:#CBD5E3}
.turn .who{font-family:var(--mono);font-size:9px;letter-spacing:.19em;text-transform:uppercase;
           color:var(--dimmer);margin-bottom:7px}

/* a tool call inside the transcript */
.tc{margin:0 15px 10px;border-left:2px solid var(--tally);background:rgba(255,176,0,.05);padding:8px 11px}
.tc b{font-family:var(--mono);font-size:11px;color:var(--tally);font-weight:500}
.tc .a{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc .r{font-family:var(--mono);font-size:10px;color:var(--ch-g);margin-top:3px}
.tc .ms{font-family:var(--mono);font-size:9px;color:var(--dimmer);float:right}

.composer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--rule);flex:0 0 auto;
          background:var(--panel-2)}
.composer input{
  flex:1;background:var(--room);border:1px solid var(--rule-2);border-radius:2px;color:var(--paper);
  padding:11px 12px;font-family:var(--sans);font-size:13.5px;min-width:0;
}
.composer input::placeholder{color:var(--dimmer)}
.composer input:focus{outline:none;border-color:var(--tally)}
.composer button{
  width:40px;flex:0 0 auto;border:1px solid var(--rule-2);border-radius:2px;color:var(--dim);
  font-size:15px;transition:.15s;
}
.composer button:hover{border-color:var(--tally);color:var(--tally)}
.composer button:disabled{opacity:.4}
.dots{display:inline-flex;gap:3px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--tally);animation:blink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* contextual follow-ups, only once something is on screen to refer to */
.followups{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;flex:0 0 auto;border-top:1px solid var(--rule);padding-top:12px}
.followups button{
  border:1px solid var(--rule-2);border-radius:2px;padding:6px 10px;
  font-family:var(--mono);font-size:10px;color:var(--dim);transition:.15s;text-align:left;
}
.followups button:hover{border-color:var(--tally);color:var(--paper);background:rgba(255,176,0,.06)}
.followups button:focus-visible{outline:2px solid var(--tally);outline-offset:2px}

/* ==========================================================================
   THE GATE
   The opening is a match cut: real frames from the archive, cut on a hard
   rhythm, resolving into the wordmark. No fades. A cut is a cut.
   ========================================================================== */
.gate{
  position:fixed;inset:0;z-index:100;background:var(--room);
  display:grid;place-items:center;overflow:hidden;
}
.gate.out{animation:gateout .5s ease forwards;pointer-events:none}
@keyframes gateout{to{opacity:0;transform:scale(1.03)}}

.gate-film{position:absolute;inset:0}
.gate-film img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(1) contrast(1.2) brightness(.42);
  /* frames carry their own broadcast watermarks in the corners. push them out. */
  transform:scale(1.34);
}
.gate-film img.on{opacity:1}
.gate-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 52% at 50% 45%,rgba(11,14,20,.5),rgba(11,14,20,.96) 74%),
    linear-gradient(180deg,rgba(11,14,20,.85) 0%,transparent 22%,transparent 74%,rgba(11,14,20,.95) 100%);
}

.gate-body{position:relative;text-align:center;padding:32px;max-width:660px}
.gate-mark{display:flex;align-items:baseline;justify-content:center;gap:14px}
.gate-mark b,.gate-mark i{
  font-family:var(--serif);font-weight:400;font-size:clamp(46px,9vw,104px);line-height:1;
  opacity:0;animation:cutin .01s forwards;
}
.gate-mark b{animation-delay:.85s}
.gate-mark i{font-style:italic;color:var(--dim);animation-delay:1.05s}
@keyframes cutin{to{opacity:1}}

.gate-line{
  font-size:16px;line-height:1.65;color:var(--dim);max-width:46ch;margin:26px auto 0;
  opacity:0;animation:cutin .01s 1.35s forwards;
}

/* six channels sweeping to their real positions: the instrument waking up */
.gate-meter{display:flex;justify-content:center;gap:5px;margin:30px 0 32px;height:26px}
.gate-meter span{
  width:2px;background:var(--paper);align-self:flex-end;height:4px;opacity:.85;
  /* sweep up once as the instrument wakes, then keep moving until you enter */
  animation:
    sweep .9s cubic-bezier(.2,.9,.3,1) var(--in) forwards,
    vibe var(--dur) ease-in-out var(--hold) infinite alternate;
}
.gate-meter span:nth-child(6n+1){background:var(--ch-r)}
.gate-meter span:nth-child(6n+3){background:var(--ch-g)}
.gate-meter span:nth-child(6n+5){background:var(--ch-b)}
@keyframes sweep{to{height:var(--h)}}
@keyframes vibe{from{height:var(--h)}to{height:var(--h2)}}

.gate-enter{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--room);background:var(--paper);padding:14px 40px;border-radius:2px;
  opacity:0;animation:cutin .01s 1.6s forwards;transition:background .15s,transform .15s;
}
.gate-enter:hover{background:var(--tally);transform:translateY(-1px)}
.gate-enter:focus-visible{outline:2px solid var(--tally);outline-offset:4px}
.gate-foot{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dimmer);
  margin:24px 0 0;opacity:0;animation:cutin .01s 1.8s forwards;
}

/* ------------------------------------------------------------- the sheet -- */
.info{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--rule-2);color:var(--dim);
  font-family:var(--serif);font-size:14px;line-height:1;margin-left:auto;transition:.15s;flex:0 0 auto;
}
.info:hover{border-color:var(--tally);color:var(--tally)}
.info:focus-visible{outline:2px solid var(--tally);outline-offset:3px}
.bar .tally{margin-left:14px}

.sheet{
  position:fixed;inset:0;z-index:90;background:rgba(6,8,12,.72);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px;
  animation:cutin .18s ease forwards;
}
.sheet-card{
  position:relative;background:var(--panel);border:1px solid var(--rule-2);border-radius:3px;
  max-width:660px;width:100%;max-height:86vh;overflow-y:auto;padding:44px 48px 40px;
}
.sheet-card::-webkit-scrollbar{width:10px}
.sheet-card::-webkit-scrollbar-thumb{background:var(--rule)}
.sheet-x{
  position:absolute;right:14px;top:12px;width:30px;height:30px;color:var(--dim);font-size:20px;
}
.sheet-x:hover{color:var(--paper)}
.sheet-card h2{
  font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.15;margin:0 0 18px;
}
.sheet-lede{font-size:17px;line-height:1.6;color:var(--paper);margin:0 0 30px;max-width:56ch}
.sheet-card h3{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tally);margin:0 0 9px;font-weight:500;
}
.sheet-card p{font-size:14.5px;line-height:1.7;color:#C6D0DE;margin:0 0 26px;max-width:62ch}
.sheet-card p b{color:var(--paper);font-family:var(--mono);font-size:13px;font-weight:500}
.sheet-card p em{color:var(--paper);font-style:italic}
.sheet-go{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--room);background:var(--paper);padding:12px 28px;border-radius:2px;transition:.15s;
}
.sheet-go:hover{background:var(--tally)}
.sheet-go:focus-visible{outline:2px solid var(--tally);outline-offset:3px}

@media(max-width:640px){
  .sheet-card{padding:34px 24px 30px}
  .sheet-card h2{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .gate-mark b,.gate-mark i,.gate-line,.gate-enter,.gate-foot{animation:none;opacity:1}
  .gate-meter span{animation:none;height:var(--h)}
  .gate-film img{transition:none}
}
/* confidence, shown rather than claimed */
.meta .facts u{
  text-decoration:none;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tally);border:1px solid rgba(255,176,0,.4);
  padding:2px 5px;border-radius:2px;margin-left:5px;
}
.sheet-card p a{color:var(--tally);text-decoration:none;border-bottom:1px solid rgba(255,176,0,.35)}
.sheet-card p a:hover{border-bottom-color:var(--tally)}
.sheet-card p a b{color:inherit;font-family:var(--sans);font-size:inherit;font-weight:600}
.sheet-note{font-size:12.5px !important;color:var(--dimmer) !important;margin-top:-12px !important}

/* ------------------------------------------------- continuous play ------- */
.radio{
  margin-left:auto;display:flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--rule-2);border-radius:2px;color:var(--dim);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:.15s;flex:0 0 auto;
}
.radio i{width:7px;height:7px;border-radius:50%;background:var(--rule-2);flex:0 0 auto;transition:.15s}
.radio:hover{border-color:var(--dim);color:var(--paper)}
.radio[aria-pressed="true"]{border-color:var(--tally);color:var(--tally);background:rgba(255,176,0,.08)}
.radio[aria-pressed="true"] i{background:var(--tally);box-shadow:0 0 0 3px rgba(255,176,0,.2);animation:pulse 1.8s infinite}
.radio:focus-visible{outline:2px solid var(--tally);outline-offset:3px}
.bar .info{margin-left:12px}
@media(max-width:900px){.radio span{display:none}.radio{padding:6px 9px}}