/* SEQUENCE 01 — Edric Ian Palomar. Tokens first, then chrome, slate, clips, index, overlays. */
@font-face{font-family:"Archivo SQ";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Geist Mono SQ";src:url(../fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:104%;ascent-override:90%}
@font-face{font-family:"Mono Fallback";src:local("Consolas")}

:root{
  --bg:#0B0B0C;--bg-2:#121315;--bg-3:#18191C;--line:#232428;--line-2:#34353B;--stroke:#3C3D44;--stroke-g:#5A5B64;
  --text:#ECEBE7;--text-2:#9C9CA3;--text-3:#7C7D84;--key:#2BF08E;--key-ink:#04140B;--key-tint:rgba(43,240,142,.14);
  --burn:rgba(0,0,0,.55);--scrim:rgba(6,6,7,.94);--focus:var(--key);--burn-ink:var(--text);--burn-ink-2:var(--text-2);
  --f-d:"Archivo SQ","Archivo Fallback",Arial,sans-serif;--f-m:"Geist Mono SQ","Mono Fallback",Consolas,monospace;
  --out:cubic-bezier(.16,1,.3,1);--inout:cubic-bezier(.65,0,.35,1);--edit:cubic-bezier(.7,0,.2,1);--snap:cubic-bezier(.2,0,0,1);
  --bar:44px;--m:40px;--g:24px;--cols:12;
  --edge:max(var(--m),calc((100vw - 2240px)/2 + var(--m)));
  --col:calc((min(100vw,2240px) - 2*var(--m) - (var(--cols) - 1)*var(--g)) / var(--cols));
  --track-h:calc((100svh - var(--bar) - 24px - 8px) / 3);
  --cap:.72;--dl-head:clamp(44px,5.6vw,104px);
}
@media (min-width:1600px){:root{--m:56px}}
@media (max-width:1023px){:root{--m:24px;--g:16px;--cols:8}}
@media (max-width:599px){:root{--m:16px;--g:12px;--cols:4;--bar:48px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);color-scheme:dark;-webkit-text-size-adjust:100%;scrollbar-color:var(--line-2) var(--bg)}
body{margin:0;background:var(--bg);font:400 16px/1.55 var(--f-d);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html.locked{overflow:hidden}
/* keyboard focus never lands under the fixed chrome: the bar on top, and on desktop the sequence map + corner
   readouts along the bottom (a focus scroll, like scrollIntoView, keeps this clearance) */
html{scroll-padding-top:calc(var(--bar) + 12px)}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){html{scroll-padding-bottom:96px}}
::selection{background:var(--key);color:var(--key-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;border-radius:0}
h1,h2,h3,h4,p,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- type tokens */
.dl{font:700 var(--dl-head)/.9 var(--f-d);font-stretch:100%;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.dm{font:600 clamp(32px,4.2vw,76px)/.95 var(--f-d);font-stretch:112%;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.hs{font:500 20px/1.2 var(--f-d);letter-spacing:-.01em}
.lede{font:400 clamp(18px,1.9vw,30px)/1.35 var(--f-d);letter-spacing:-.01em;text-wrap:pretty}
.body{font-size:16px;line-height:1.55;text-wrap:pretty}
.meta{font:500 11px/1.3 var(--f-m);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums slashed-zero}
.tc{font:500 13px/1 var(--f-m);letter-spacing:.04em;font-variant-numeric:tabular-nums slashed-zero}
.micro{font:400 9px/1 var(--f-m);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums slashed-zero}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums slashed-zero}
.up{text-transform:uppercase}
.t2{color:var(--text-2)}.t3{color:var(--text-3)}.key{color:var(--key)}
@media (max-width:599px){.hs{font-size:17px}.body{font-size:15px}.meta{font-size:10px}.tc{font-size:11px}
  /* labels you tap stay at 11 px; decorative meta goes to 10 */
  .btn.meta,.sel-w,.socials a,.sheet-soc a,.bar-tracks,.sheet-close,.v-ext,.bio-more{font-size:11px}}
html.touch .micro{font-size:10px}
/* Ian's own strings that the spec marks verbatim keep their letter case inside the caps-set Meta/Micro styles */
.meta.vb,.micro.vb{text-transform:none;letter-spacing:.02em}

/* underline sweep */
.ul,.ul-key{position:relative;display:inline-block}
.ul::after,.ul-key::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--text);transform:scaleX(0);transform-origin:100% 50%;transition:transform .375s var(--inout)}
.ul-key::after{background:var(--key)}
.ul:focus-visible::after,.ul-key:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}@media (hover:hover){.ul:hover::after,.ul-key:hover::after{transform:scaleX(1);transform-origin:0 50%}}

.skip{position:fixed;left:var(--m);top:8px;z-index:120;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;background:var(--key);color:var(--key-ink);font:500 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;transform:translateY(-150%)}
.skip:focus{transform:none}

/* ---------- media primitives */
.m{position:relative;display:block;overflow:hidden;background:var(--bg-2) center/cover no-repeat;width:100%}
.m img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s linear,transform .5s var(--out)}
.m img.ok{opacity:1}
.panel{position:relative;display:block;aspect-ratio:4/3;background:var(--bg-2)}
.panel-in{position:absolute;inset:16px;display:grid;place-items:center;container-type:size}
.m-c{width:min(100cqw,calc(100cqh * var(--r)));height:auto;background-color:transparent}
.m-c img{object-fit:contain}
.card{position:relative;display:block;width:100%;overflow:hidden}
.burn{position:absolute;z-index:2;padding:4px 8px;background:var(--burn);color:var(--burn-ink);pointer-events:none;white-space:nowrap}
.b-tl{left:12px;top:12px}.b-tr{right:12px;top:12px}.b-bc{left:50%;bottom:12px;transform:translateX(-50%)}
.tc-run{opacity:.0;transition:opacity .375s linear}
.tc-run.run{opacity:1;color:var(--key);transition:none}
.tc-run.fade{opacity:0}
html.touch .tc-run,html:not(.motion) .tc-run{opacity:1}
.pbadge{position:absolute;right:10px;bottom:10px;z-index:2;display:none;place-items:center;width:20px;height:20px;background:var(--key);color:var(--key-ink);font:500 10px/1 var(--f-m)}
html.touch .pbadge{display:grid}
.k-esc{margin-left:1ch}
html.touch .k-esc{display:none}
/* in/out L-marks (hover) + crop marks */
.io i,.cm i{position:absolute;width:12px;height:12px;border:0 solid var(--text);pointer-events:none;z-index:2}
.io i{width:14px;height:14px;opacity:0;transition:opacity .25s var(--snap),transform .25s var(--snap)}
.io i:nth-child(1){left:10px;top:10px;border-width:1px 0 0 1px;transform:translate(8px,8px)}
.io i:nth-child(2){right:10px;top:10px;border-width:1px 1px 0 0;transform:translate(-8px,8px)}
.io i:nth-child(3){left:10px;bottom:10px;border-width:0 0 1px 1px;transform:translate(8px,-8px)}
.io i:nth-child(4){right:10px;bottom:10px;border-width:0 1px 1px 0;transform:translate(-8px,-8px)}
.card:focus-visible .io i{opacity:1;transform:none}@media (hover:hover){.card:hover .io i{opacity:1;transform:none}}
.cm{position:absolute;inset:-8px;pointer-events:none;z-index:3;opacity:0}
.cm.static{opacity:1;inset:0}
.cm i{border-color:var(--text-3)}
.cm i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.cm i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.cm i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.cm i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.cm.pulse-on{animation:cmPulse .5s linear 2}
.cm.pulse-on i{border-color:var(--key)}
/* a host that clips (every .card: overflow hidden for the image zoom) would cut marks placed 8 px outside it,
   so there the marks sit 8 px inside, with a hairline shadow to hold them on bright frames (router.js pulse) */
.cm.cm-in{inset:8px;filter:drop-shadow(0 0 1px rgba(0,0,0,.7))}
.cm.cm-in i{width:16px;height:16px}
@keyframes cmPulse{0%,100%{opacity:0}50%{opacity:1}}
.pulse-host{position:relative}
@media (hover:hover) and (pointer:fine){
  .card:hover .m img.ok,.card:focus-visible .m img.ok{transform:scale(1.035)}
  html.has-cur [data-cur]{cursor:none}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);transition:border-color .25s linear,background-color .25s linear,color .25s linear;white-space:nowrap}
.btn:focus-visible{border-color:var(--text-2)}@media (hover:hover){.btn:hover{border-color:var(--text-2)}}
.chip{display:inline-block;padding:2px 6px;border:1px solid var(--line-2)}
.chip-on{position:absolute;left:8px;top:8px;z-index:2;background:var(--burn);border-color:transparent;color:var(--burn-ink)}
.badge-trk{display:inline-grid;place-items:center;width:32px;height:20px;border:1px solid var(--line-2);flex:none;transition:background-color .125s linear,color .125s linear,border-color .125s linear}
.badge-trk.live,.badge-trk.flash{background:var(--key);border-color:var(--key);color:var(--key-ink)}
.abadge{display:inline-block;padding:3px 6px;border:1px solid var(--line-2);justify-self:start}

/* ---------- top bar */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--bar);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center;padding:0 var(--edge);background:var(--bg);border-bottom:1px solid var(--line)}
.bar-id{grid-column:1/4;display:flex;align-items:center;gap:12px;min-height:44px;min-width:44px;width:max-content}
.bar-id img{height:16px;width:auto}
.bar-tc{grid-column:5/9;justify-self:center;display:flex;align-items:center;gap:12px;white-space:nowrap}
.bar-tc .tc{color:var(--text);transition:color .25s linear}
.bar-tc .tc.live{color:var(--key);transition:none}
.bar-tc .chip{min-width:14ch;text-align:center}
.bar-nav{grid-column:10/13;justify-self:end;display:flex;gap:24px}
.bar-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);transition:color .25s linear}
.bar-nav a[aria-current],.bar-nav a.on{color:var(--text)}@media (hover:hover){.bar-nav a:hover{color:var(--text)}}
.bar-nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--key);transform:scaleX(0);transform-origin:0 50%;transition:transform .375s var(--inout)}
html[data-page=seq] .bar-nav a.on::after,html[data-page=index] .bar-nav a[data-nav=index]::after{transform:scaleX(1)}
.bar-tracks{display:none;grid-column:-2/-1;justify-self:end;min-width:44px;min-height:44px}
.bar-prog{display:none;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--key);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .bar{grid-template-columns:1fr auto 1fr}
  .bar-id{grid-column:1}.bar-id span{display:none}
  .bar-tc{grid-column:2}.bar-tc .meta{display:none}.bar-tc .tc{font-size:11px}
  .bar-nav{display:none}.bar-tracks{display:inline-flex;align-items:center;justify-content:flex-end;grid-column:3}
  .bar-prog{display:block}
}

/* ---------- corner readouts + sequence map */
.corner{position:fixed;bottom:20px;z-index:40;color:var(--text-3);pointer-events:none;white-space:pre;padding:5px 8px 4px;margin:0 -8px;background:var(--bg);border:1px solid transparent;border-bottom:0;transition:border-color .25s linear}
html.map-up .corner{border-color:var(--line)}
html.map-up.on-slate .corner-l{visibility:hidden}
.corner-l{left:var(--edge)}.corner-r{right:var(--edge)}
.map{position:fixed;left:0;right:0;bottom:0;z-index:45;height:56px;transform:translateY(calc(100% + 8px));display:flex;align-items:center;gap:0;padding:0 var(--edge);background:var(--bg);border-top:1px solid var(--line)}
.map-labels{width:56px;flex:none;display:grid;grid-template-rows:repeat(3,8px);row-gap:2px;align-items:center;line-height:8px}
.map-area{position:relative;flex:1;height:28px;touch-action:none;cursor:ew-resize}
.map-rows i{position:absolute;left:0;right:0;height:8px;border-bottom:1px solid var(--line)}
.map-rows i:nth-child(1){top:0}.map-rows i:nth-child(2){top:10px}.map-rows i:nth-child(3){top:20px}
.map-clip{position:absolute;top:calc(var(--row) * 10px);height:8px;min-width:4px;background:var(--bg-3);border:1px solid var(--line-2);cursor:pointer;transition:background-color .125s linear,border-color .125s linear}
.map-clip.on{border-color:var(--key);background:var(--key-tint)}@media (hover:hover){.map-clip:hover{border-color:var(--key);background:var(--key-tint)}}
.map-clip:focus-visible{outline-offset:2px}
.map-ph{position:absolute;left:0;top:-4px;bottom:0;width:1px;background:var(--key);pointer-events:none}
.map-ph::before{content:"";position:absolute;left:-3px;top:-3px;border:3.5px solid transparent;border-top:7px solid var(--key);border-bottom:0}
.map-chip{position:absolute;left:0;top:0;padding:3px 6px;background:var(--bg-3);border:1px solid var(--line-2);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .125s linear}
.map-chip.on{opacity:1}
@media (max-width:1023px),(hover:none),(pointer:coarse){.map,.corner{display:none}}
html[data-page=index] .map{display:none}

/* ---------- slate */
.slate{position:relative;height:100svh;overflow:hidden;background:var(--bg)}
.slate-in{position:absolute;inset:0;padding-top:var(--bar)}
.ruler{position:relative;height:24px;margin:0 var(--edge);border-bottom:1px solid var(--line)}
.tk{position:absolute;bottom:0;width:1px;height:2px;background:var(--line-2)}
.tk-s{height:4px;background:var(--stroke)}
.tk-5{height:8px;background:var(--text-3)}
.tk b{position:absolute;left:5px;bottom:4px;color:var(--text-3);font-weight:400;white-space:nowrap}
.tk:last-child b{left:auto;right:5px}
.tracks{position:relative;pointer-events:none;display:grid;grid-template-rows:repeat(3,var(--track-h));row-gap:4px}
.tracks .bio{pointer-events:auto}
.track{position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--g);padding:0 var(--edge)}
.trule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:0 50%}
.tlabel{position:absolute;left:calc(var(--edge) / 2);top:50%;transform:translate(-50%,-50%);padding:4px 3px 3px;border:1px solid var(--line-2);background:var(--bg);color:var(--text-3);transition:color .125s linear,border-color .125s linear}
/* track header lights while the playhead is inside its clip */
.track:has(.clipcell.in) .tlabel{color:var(--key);border-color:var(--key)}
.clipcell{grid-row:1;display:flex;flex-direction:column;min-width:0;position:relative}
.c-e{grid-column:1/4}.c-i{grid-column:4/6}.c-p{grid-column:6/10}
.clipname{height:24px;flex:none;line-height:24px;white-space:nowrap;overflow:visible;position:relative;z-index:2}
.clip{position:relative;flex:1;margin-bottom:6px;contain:layout paint}
.clip-frame{position:absolute;inset:0;border:1px solid var(--line-2);transform-origin:0 50%}
.rbar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--line-2);z-index:2}
.rbar b{display:block;height:100%;background:var(--key);transform-origin:0 50%;transform:scaleX(0)}
.glyph{position:absolute;left:12px;top:0;font:800 100px/1 var(--f-d);font-variation-settings:"wdth" var(--wdth,125);letter-spacing:-.01em;white-space:nowrap;text-transform:uppercase;will-change:transform}
.gm{position:relative;display:block}
.gm.mir{transform:scaleX(-1)}
.g-out{display:block;color:transparent;-webkit-text-stroke:1.5px var(--stroke-g)}
.g-fill{position:absolute;left:0;top:0;color:var(--key);-webkit-text-stroke:1.5px var(--key);clip-path:inset(0 100% 0 0)}
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.splice{position:absolute;height:max(2px,.012em);transform:translateY(-50%);background:var(--bg)}
.splice::before,.splice::after{content:"";position:absolute;top:50%;width:max(8px,.04em);height:1px;background:var(--text-3)}
.splice::before{right:calc(100% + max(6px,.025em))}.splice::after{left:calc(100% + max(6px,.025em))}
.br{position:absolute;width:10px;height:10px;border:0 solid var(--text-3);z-index:2}
.br-tl{left:6px;top:9px;border-width:1px 0 0 1px}.br-bl{left:6px;bottom:6px;border-width:0 0 1px 1px}
.br-tr{right:6px;top:9px;border-width:1px 1px 0 0}.br-br{right:6px;bottom:6px;border-width:0 1px 1px 0}
/* trim handles: [ at the clip's in point, ] at its out point; each goes key the frame the playhead crosses it */
.trim{position:absolute;top:50%;width:6px;height:min(36px,30%);transform:translateY(-50%);border:1px solid var(--stroke);z-index:2;transition:border-color .125s linear}
.trim-in{left:0;border-right:0;border-left-width:2px}.trim-out{right:0;border-left:0;border-right-width:2px}
.clipcell.in .trim-in,.clipcell.done .trim-out{border-color:var(--key)}
/* calm at rest: ruler numerals and clip in/out times wake up with the scrub; a clip's in/out brackets
   cut on (one frame, like a clip going live) the moment the playhead enters it */
.tk b,.cn-io{transition:opacity .375s var(--out),visibility 0s}
.slate.idle .tk b,.slate.idle .cn-io{opacity:0;visibility:hidden;transition:opacity .375s var(--out),visibility 0s .375s}
.clipcell:not(.in) .br{visibility:hidden}
@media (min-width:600px){.clipcell{padding-top:12px}.clip{margin-bottom:18px}}
.bio{grid-column:1/5;grid-row:1;align-self:end;margin-bottom:48px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:5;background:var(--bg);padding:12px 16px 0 0;margin-right:-16px;justify-self:start}
.bio .bio-t{max-width:38ch;margin-top:4px}
.bio .bio-t.clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.bio .hint{margin-top:8px}
.bio-more{position:absolute;right:16px;bottom:0;display:inline-flex;align-items:flex-end;min-height:44px;color:var(--text-2)}
.bio-more:focus-visible{color:var(--key)}@media (hover:hover){.bio-more:hover{color:var(--key)}}
.monitor{position:absolute;top:calc(var(--bar) + 24px);left:calc(var(--edge) + 6 * (var(--col) + var(--g)));right:0;height:calc(2 * var(--track-h) + 4px);z-index:1}
.monitor>.cm{inset:24px;right:calc(var(--edge) - 12px)}
.ring{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hud{position:absolute;right:var(--edge);bottom:10px;display:flex;gap:16px;padding:4px 8px;background:var(--burn);color:var(--burn-ink);white-space:nowrap;z-index:2;max-width:calc(100% - var(--edge) - 24px)}
#hud-t{display:block;flex:0 1 auto;width:calc(var(--hud-ch,24) * (1ch + .06em));min-width:0;overflow:hidden;text-overflow:ellipsis}
.playhead{position:absolute;left:0;top:var(--bar);height:calc(24px + 3 * var(--track-h) + 8px);width:1px;background:var(--key);pointer-events:none;z-index:4}
.playhead i{position:absolute;left:-4px;top:0;border:4.5px solid transparent;border-top:9px solid var(--key);border-bottom:0}
.playhead.thru-hud{-webkit-mask-image:linear-gradient(#000 var(--ph-a),transparent var(--ph-a),transparent var(--ph-b),#000 var(--ph-b));mask-image:linear-gradient(#000 var(--ph-a),transparent var(--ph-a),transparent var(--ph-b),#000 var(--ph-b))}
.slate-notes{display:none}
.hint-m{display:none;grid-row:1;grid-column:2/4;align-self:center;justify-self:end;padding-top:24px;text-align:right}
html.hold #seq>.sec,html.hold #endslate{display:none}
#main:focus{outline:none}
/* focus fallback after an overlay closes with no on-screen opener: the whole program monitor is the focused panel, so frame the viewport (like an NLE's active-panel highlight) */
#main[data-kbf]:focus::before{content:"";position:fixed;left:0;right:0;top:var(--bar);bottom:0;z-index:49;border:2px solid var(--focus);pointer-events:none}
/* tier B strip: a short length of film stock (sprockets, frame lines, edge numbers), fading at both ends */
.strip{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 64px),transparent)}
.strip-band{position:relative;width:100%;background:var(--bg-2);border-block:1px solid var(--line)}
.strip-row::before,.strip-row::after{content:"";position:absolute;left:0;right:0;height:18px;background:var(--stroke);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect x='6' y='6' width='10' height='6' rx='1.5'/%3E%3C/svg%3E") 0 0/22px 18px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='18'%3E%3Crect x='6' y='6' width='10' height='6' rx='1.5'/%3E%3C/svg%3E") 0 0/22px 18px repeat-x}
.strip-row::before{top:0}.strip-row::after{bottom:0}
.strip-row{position:relative;display:flex;gap:4px;width:max-content;padding:18px 64px 18px 24px;will-change:transform}
.strip-f{width:clamp(96px,10vw,168px);flex:none;display:flex;flex-direction:column;gap:5px}
.strip-f .m{opacity:.55;transition:opacity .25s linear;outline:1px solid transparent;outline-offset:-1px}
.strip-f .ec{display:flex;gap:6px;color:var(--text-3);transition:color .25s linear}
.strip-f.on .m{opacity:1;outline-color:var(--key)}
.strip-f.on .ec{color:var(--key)}
@media (hover:hover){.strip-f:hover .m{opacity:1}}
@media (min-width:600px) and (max-width:1023px){.monitor>.cm{bottom:40px}}
@media (max-width:1023px){
  /* clips never overlap in time (as on desktop): V3 + V2 share the half left of the monitor, E and I sized
     1 : .525 to their glyph advances, so a playhead parked at the end of E has not reached I yet */
  .track{grid-template-columns:calc((50% - 24px) * .656) calc((50% - 24px) * .344) minmax(0,1fr)}
  .c-e{grid-column:1/2}.c-i{grid-column:2/3}.c-p{grid-column:3/4}
  .bio{grid-column:1/3}
  .monitor{left:calc(var(--edge) + 4 * (var(--col) + var(--g)))}
  .bio .bio-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:599px){
  :root{--track-h:calc((100svh - var(--bar) - 20px - 38svh - 16px) / 3)}
  .ruler{height:20px}
  .tk-q,.tk-odd{display:none}
  .tk-r b{display:none}
  .monitor{top:calc(var(--bar) + 20px);left:0;height:38svh}
  .monitor>.cm{inset:12px var(--m)}
  .hud{right:50%;transform:translateX(50%);bottom:4px;gap:10px;max-width:calc(100% - 2 * (var(--m) + 24px));overflow:hidden}
  #hud-t{flex:0 1 auto}
  .mg .b-tr{display:none}
  .tracks{padding-top:8px}
  .slate-in .tracks{position:absolute;left:0;right:0;top:calc(var(--bar) + 20px + 38svh)}
  .track{grid-template-columns:minmax(0,1fr) minmax(0,.525fr) minmax(0,1fr)}
  .c-e{grid-column:1/2}.c-i{grid-column:2/3}.c-p{grid-column:3/4}
  /* phones: the track code sits at the end of the clip's name row, lit while the playhead is in the clip */
  .tlabel{display:none}.clipcell::after{content:attr(data-trk);position:absolute;right:0;top:0;height:24px;display:flex;align-items:center;font:400 10px/1 var(--f-m);letter-spacing:.04em;color:var(--text-3);transition:color .125s linear}
  .clipcell.in::after{color:var(--key)}
  .cn-io{display:none}
  .bio{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hint-m{display:block}
  .playhead{height:calc(20px + 38svh + 8px + 3 * var(--track-h) + 8px)}
  .slate-notes{display:flex;flex-direction:column;gap:8px;padding:48px var(--m)}
}
@media (max-height:559px) and (min-width:600px){
  :root{--track-h:140px}
  .slate{height:calc(var(--bar) + 24px + 3 * 140px + 8px)}
  .bio{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .slate-notes{display:flex;flex-direction:column;gap:8px;padding:48px var(--edge) 0}
  .slate-notes .body{max-width:62ch}
}

/* ---------- sections */
.sec{position:relative;padding:160px 0 120px}
.cut{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:10px var(--edge) 0;border-top:1px solid var(--line);color:var(--text-3)}
.sec-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--g);padding:0 var(--edge)}
.sec-head{grid-column:1/4;position:sticky;top:68px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-height:calc(100svh - 124px);padding-bottom:8px}
.sec-head-row{display:flex;align-items:center;gap:12px}
.sec-head .ttl{margin-top:4px}
.sec-head .ttl{font-size:var(--fit,var(--dl-head))}
.sec-head .ttl .ln{padding-bottom:.04em}
.tag{color:var(--text-2);font-size:16px;line-height:1.4}
.sec-thumb{display:block;width:100%;max-width:280px;margin-top:8px;border:1px solid var(--line)}
@media (max-height:759px){.sec-thumb{display:none}}
.sec-body{grid-column:4/13;min-width:0}
.motion .sec-head:not(.is-in) .ttl,.motion .sec-head:not(.is-in) .tp,.motion .sec-head:not(.is-in) .tag,.motion .sec-head:not(.is-in) .sec-thumb{visibility:hidden}
.motion .fi:not(.is-in){opacity:0}
.lede{max-width:34ch;color:var(--text)}
.sec-body>.lede{margin-bottom:72px}
.subsec+.subsec{margin-top:120px}
.sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:24px;border-bottom:1px solid var(--line);scroll-margin-top:76px}
.sub-head .hs{letter-spacing:.02em}
@media (max-width:1023px){
  .sec{padding:120px 0 96px}
  .sec-head{grid-column:1/-1;position:static;max-height:none;margin-bottom:48px;gap:12px}
  .sec-thumb{display:none}
  .sec-body{grid-column:1/-1}
}
@media (max-width:599px){.sec{padding:96px 0 72px}.subsec+.subsec{margin-top:88px}.sec-body>.lede{margin-bottom:48px}}

/* 01 selects */
.sel-list{display:flex;flex-direction:column;gap:96px}
.sel-poster .m{background-color:var(--bg-2)}
.sel-meta{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:center;min-height:48px;padding-top:14px}
.sel-meta>:nth-child(1){grid-column:1}.sel-t{grid-column:2/7;font-size:28px}.sel-r{grid-column:7/10}
.sel-meta .abadge{grid-column:10}.sel-w{grid-column:11/13;justify-self:end}
.sel-w{min-height:44px;display:inline-flex;align-items:center}
/* landscape phones: a poster (and its WATCH row) fits under the bar in one view */
@media (max-width:1023px) and (max-height:500px) and (orientation:landscape){.sel{max-width:calc((100svh - 104px) * 16 / 9)}}
.sel:has(.sel-poster:focus-visible) .sel-w{text-decoration:underline;text-underline-offset:4px}@media (hover:hover){.sel:hover .sel-w{text-decoration:underline;text-underline-offset:4px}}
@media (max-width:1023px){
  .sel-list{gap:64px}
  .sel-meta{grid-template-columns:auto 1fr auto auto;column-gap:12px;row-gap:6px}
  .sel-meta>:nth-child(1){grid-column:1}.sel-t{grid-column:2/5;font-size:22px}
  .sel-r{grid-column:1/3;grid-row:2;font-size:15px}.sel-meta .abadge{grid-column:3;grid-row:2}.sel-w{grid-column:4;grid-row:2}
}

/* 02 edit bin */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.client .hs{margin:16px 0 8px}
.recents{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:end}
.recent-a{display:block}
.recent .chip{margin-top:14px}
.recent-t{font-size:17px;margin-top:8px}
.multicam{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 8px}
.cam,.mg{align-self:start} /* a stretched <button> centres its content: keep tiles top-aligned when a clip name wraps */
.cam-m,.mg-m{position:relative;display:block;overflow:hidden}
.cam-m::after,.mg-m::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--key);opacity:0;transition:opacity .125s linear;z-index:3;pointer-events:none}
.cam:focus-visible .cam-m::after,.mg:focus-visible .mg-m::after{opacity:1}@media (hover:hover){.cam:hover .cam-m::after,.mg:hover .mg-m::after{opacity:1}}
/* clip name under each tile: Ian's platform title, as a bin shows a clip's name under its thumbnail */
.clip-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:10px;padding-left:10px;border-left:1px solid var(--line-2);color:var(--text-2);transition:color .25s linear,border-color .25s linear}
.cam:focus-visible .clip-n,.mg:focus-visible .clip-n{color:var(--text);border-color:var(--key)}@media (hover:hover){.cam:hover .clip-n,.mg:hover .clip-n{color:var(--text);border-color:var(--key)}}
.mgs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 8px}
/* a client is a bin (its playlist): two clip edges stacked behind the card, the count + total running time burnt
   in, and under the description a strip of the playlist's frames (pointer / touch shortcut; bottoms line up) */
.client-bin{display:flex;flex-direction:column;min-width:0}
.cstack{position:relative;padding-top:8px}
.cstack::before,.cstack::after{content:"";position:absolute;height:4px;border:1px solid var(--line-2);border-bottom:0;pointer-events:none;transition:border-color .25s linear}
.cstack::before{left:16px;right:16px;top:0}.cstack::after{left:8px;right:8px;top:4px}
.cstack:focus-within::before,.cstack:focus-within::after{border-color:var(--text-3)}@media (hover:hover){.cstack:hover::before,.cstack:hover::after{border-color:var(--text-3)}}
.cbin.rail{position:relative;display:flex;gap:6px;margin-top:auto;padding-top:20px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.cbin::-webkit-scrollbar{display:none}
.cbin-b{position:relative;flex:0 0 88px;display:block}
.cbin-b::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--key);opacity:0;transition:opacity .125s linear;z-index:3;pointer-events:none}
@media (hover:hover){.cbin-b:hover::after{opacity:1}}
.cbin-d{position:absolute;right:2px;bottom:2px;z-index:2;padding:2px 3px;background:var(--burn);color:var(--burn-ink);pointer-events:none}
.cbin.dragging .cbin-b{pointer-events:none}
@media (max-width:1023px){.clients{grid-template-columns:1fr 1fr}}
@media (max-width:599px){
  .clients{grid-template-columns:1fr;gap:40px}
  .cbin-b{flex-basis:96px}.cbin.rail{padding-top:16px}
  .recents{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:16px;margin:0 calc(-1 * var(--m));padding:0 var(--m);gap:12px;scrollbar-width:none;align-items:flex-end}
  .recents::-webkit-scrollbar{display:none}
  .recent{flex:0 0 72vw;scroll-snap-align:start}
  .multicam .burn{font-size:10px;padding:2px 4px;left:4px;top:4px}
  .multicam,.mgs{row-gap:18px}
  .clip-n{margin-top:8px;padding-left:6px;letter-spacing:.03em}
  .mgs{grid-template-columns:1fr 1fr}
}

/* 04 dkt */
.dkt-intro{margin-bottom:120px}
/* the client name is a second voice beside the sticky section title, not a continuation of it */
.dkt-intro .dkt-role{margin-bottom:14px}
.dkt-intro .dm{margin-bottom:32px;font-size:clamp(28px,2.9vw,52px);font-weight:500}
.lede-p{display:flex;flex-direction:column;gap:1em;font:400 clamp(18px,1.9vw,30px)/1.35 var(--f-d);letter-spacing:-.01em;max-width:52ch;color:var(--text-2)}
.lede-p p:first-child{color:var(--text)}
.brands{display:grid;grid-template-columns:2fr repeat(5,1fr);gap:8px;align-items:start}
.brand .panel{aspect-ratio:1}
.brand .panel-in{inset:24px}
.brand-strip .panel{aspect-ratio:1.38}
.brand:focus-visible .panel{background:var(--bg-3)}@media (hover:hover){.brand:hover .panel{background:var(--bg-3)}}
.note{margin-bottom:16px}
.slatecards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.slatecard{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg-2);border:1px solid var(--line-2);transition:background-color .25s linear,border-color .25s linear}
.slatecard:focus-visible{background:var(--bg-3);border-color:var(--text-3)}@media (hover:hover){.slatecard:hover{background:var(--bg-3);border-color:var(--text-3)}}
.slatecard{position:relative;overflow:hidden}
.sc-bg{position:absolute;inset:0;z-index:0;display:block}
.sc-bg .m{position:absolute;inset:0;height:100%}.sc-bg img{width:100%;height:100%;object-fit:cover}
.sc-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,7,.62) 0%,rgba(6,6,7,.5) 40%,rgba(6,6,7,.86) 100%),radial-gradient(ellipse at 50% 50%,rgba(6,6,7,.5),transparent 75%)}
.slatecard.has-poster{--text:#ECEBE7;--text-2:#C9C9CE;--text-3:#A9AAB0;--key:#2BF08E;--line-2:rgba(236,235,231,.35);color:#ECEBE7;border-color:var(--line-2)}
.slatecard.has-poster>.sc-t,.slatecard.has-poster>.t2{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.sc-ruler{position:absolute;left:16px;right:16px;bottom:44px;height:8px;border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 24px) bottom/100% 4px no-repeat}
.sc-ruler::before{content:"";position:absolute;left:0;bottom:-6px;width:1px;height:18px;background:var(--key)}
.sc-play{position:absolute;right:16px;bottom:16px}
.sc-no{position:absolute;left:16px;top:16px}
.sc-t{max-width:min(86%,24ch);font:600 clamp(20px,2.1vw,38px)/1.02 var(--f-d);font-stretch:112%;letter-spacing:-.012em;text-transform:uppercase;text-align:center;text-wrap:balance}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-padding-right:64px;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
.rail::-webkit-scrollbar{display:none}
.lenis .rail[data-lenis-prevent-horizontal]{overscroll-behavior:contain auto}
.rail.dragging{scroll-snap-type:none;cursor:grabbing}
.rail.dragging *{pointer-events:none}
.posts{padding-right:64px}
.post{flex:none;width:auto;scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line-2);transition:border-color .25s linear}
.post-h{display:flex;justify-content:space-between;align-items:center;gap:8px;height:32px;padding:0 10px;border-bottom:1px solid var(--line-2);color:var(--text);white-space:nowrap}
.post-m{position:relative;display:block;height:360px;overflow:hidden}
.post .m{height:100%;width:auto}
.post-m::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 78%,var(--bg-2))}
@media (hover:hover){.post:hover{border-color:var(--text-3)}}
.concepts-h{margin:0 0 48px;display:flex;flex-direction:column;gap:16px}
.concepts-h .dl{font-size:clamp(40px,4.6vw,88px)}
.ctracks{display:flex;flex-direction:column;gap:24px}
.ctrack-rail{position:relative;align-items:flex-start;padding-right:64px;scroll-padding-left:133px}
.chead{position:sticky;left:0;z-index:3;flex:none;width:120px;display:flex;flex-direction:column;gap:6px;background:var(--bg);padding-right:12px;box-sizing:content-box}
.chead-b .panel{aspect-ratio:1}
.chead-b .panel-in{inset:10px}
.chead .ccap{max-width:120px}
.cph{position:sticky;left:132px;z-index:2;flex:none;width:1px;align-self:stretch;background:var(--key);margin:0 -1px 0 0}
.cclip{flex:none;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start}
.cclip-a{height:240px;width:auto}
.cclip-a .m{height:100%;width:auto}
.ccap{white-space:normal;text-transform:none;letter-spacing:.02em}
.note{text-transform:none;letter-spacing:.02em}
.nocase{text-transform:none}
@media (max-width:599px){
  .brands{grid-template-columns:repeat(6,1fr)}
  .brand-strip{grid-column:1/-1}.brand:not(.brand-strip){grid-column:span 2}
  .brand:nth-child(5),.brand:nth-child(6){grid-column:span 3}
  .slatecards{grid-template-columns:1fr}
  .post-m{height:280px}
  .chead{width:96px}.cph{left:108px}.ctrack-rail{scroll-padding-left:109px}
  .cclip-a{height:160px}
  .posts,.ctrack-rail{margin-right:calc(-1 * var(--m))}
}

/* 04 gfx */
.gfx{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gx figcaption{display:flex;justify-content:space-between;padding-top:8px}
.gx-b:focus-visible .panel{background:var(--bg-3)}@media (hover:hover){.gx-b:hover .panel{background:var(--bg-3)}}
@media (min-width:2200px){.gfx{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1023px){.gfx{grid-template-columns:repeat(3,1fr)}}
@media (max-width:599px){.gfx{grid-template-columns:repeat(2,1fr);gap:12px}}

/* 05 contact (about + get in touch) */
.sec-contact .sec-grid{row-gap:0}
.about{display:grid;grid-template-columns:repeat(9,1fr);column-gap:var(--g);align-items:start}
.about-t{grid-column:1/10;display:grid;grid-template-columns:repeat(9,1fr);column-gap:var(--g);align-items:start}
.about-l{grid-column:1/6;display:flex;flex-direction:column;gap:24px}
.about-t .discs{grid-column:7/10;margin-top:0}
.about-bio{font:400 clamp(22px,2.1vw,34px)/1.3 var(--f-d);letter-spacing:-.015em;text-wrap:pretty}
.discs{border-top:1px solid var(--line);margin-top:16px}
.disc-a{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--line);transition:background-color .083s linear}
.disc-a:focus-visible{background:var(--bg-3)}@media (hover:hover){.disc-a:hover{background:var(--bg-3)}}
.disc-a .t3{font-size:14px;transition:color .083s linear}
/* the raised hover row lifts its tagline one step: text-3 on bg-3 is under 4.5:1 */
.disc-a:focus-visible .t3{color:var(--text-2)}@media (hover:hover){.disc-a:hover .t3{color:var(--text-2)}}
.contact{margin-top:160px;display:flex;flex-direction:column;gap:24px}
.mail-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;container-type:inline-size}
.mail{display:inline-flex;align-items:center;min-height:44px;max-width:100%;font:600 clamp(28px,4.6vw,80px)/1 var(--f-d);font-stretch:112%;letter-spacing:-.02em;overflow-wrap:break-word}
.mail::after{height:2px;bottom:-8px}
/* the address sets the size: as large as the row allows with the [ COPY ] button beside it (--n = its length in characters, --n2 = its longer half) */
@supports (width:1cqi){.mail{font-size:clamp(28px,min(4.6vw,calc((100cqi - 128px) / (var(--n,24) * .6))),80px)}}
.copy{min-width:12ch}
.socials{display:flex;gap:32px}
.socials a{min-height:44px;display:inline-flex;align-items:center}
.legend{margin-top:24px}
@media (max-width:1023px){
  .about{grid-template-columns:1fr;row-gap:40px}
  .about-t{grid-column:1;display:flex;flex-direction:column;gap:32px}
  .about-l{gap:20px}
  .legend{display:none}
}
@media (max-width:599px){
  .mail{font-size:9vw;font-stretch:100%;padding:4px 0}
  @supports (width:1cqi){.mail{font-size:min(9vw,calc(100cqi / (var(--n2,20) * .55)))}}
  .contact{margin-top:112px}
}

/* end slate */
.endslate{position:relative;height:40svh;min-height:280px;display:grid;place-items:center;overflow:hidden;border-top:1px solid var(--line);margin-bottom:0}
.es-plate{position:absolute;inset:0;opacity:.12;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.es-plate .m{height:100%;background-color:transparent}
.es-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.es-logo{width:120px;height:auto;margin-bottom:10px}
.es-in .btn{margin-top:10px}

/* ---------- index */
.page-idx{min-height:100svh}
.idx{padding:calc(var(--bar) + 56px) var(--edge) 120px}
.idx-head{display:flex;flex-direction:column;gap:28px;margin-bottom:40px}
.idx-title{display:flex;align-items:flex-end;gap:24px}
.idx-title .dl{font-size:clamp(44px,5.6vw,104px)}
.idx-title .meta{padding-bottom:.6em}
.idx-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.chips,.seg{display:flex;flex-wrap:wrap;gap:6px}
.chip-b{min-height:32px;padding:0 10px;border:1px solid var(--line-2);color:var(--text-2);transition:border-color .25s linear,color .25s linear}
@media (hover:hover){.chip-b:hover{border-color:var(--text-2);color:var(--text)}}
.chip-b[aria-pressed=true]{border-color:var(--key);color:var(--key)}
.chip-b[aria-pressed=true] .t3{color:var(--key)}
.seg-fit{display:none}.v-bin .seg-fit{display:flex}
.msort{display:none}
.idx-body{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--g);align-items:start}
.edl-wrap{grid-column:1/10}
.edl{width:100%;border-collapse:collapse;table-layout:fixed}
.edl thead th{position:sticky;top:var(--bar);z-index:2;background:var(--bg);text-align:left;height:36px;border-bottom:1px solid var(--line-2);font-weight:inherit;padding:0 8px 0 0}
.edl th>span{color:var(--text-2)}
.edl th button{display:inline-flex;gap:6px;align-items:center;min-height:36px;color:var(--text-2)}
@media (hover:hover){.edl th button:hover{color:var(--text)}}
.sort-i{color:var(--key);font-style:normal}
.h-0{width:0}.h-1{width:56px}.h-2{width:64px}.h-4{width:22%}.h-5{width:96px}.h-6{width:72px}.h-7{width:112px}.h-8{width:40px}
/* small desktops: the clip name is the identifier, so the note column gives way first (the monitor shows it in full) */
@media (min-width:1024px) and (max-width:1279px){.h-4{width:12%}.h-7{width:96px}}
.edl td{height:36px;padding:0 8px 0 0;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.edl .mono{font-size:12px;color:var(--text-2)}
.c-th{width:0;padding:0!important;overflow:hidden}.c-th .th{display:none}
.c-clip{font-weight:500}
.c-note{color:var(--text-2)}
.edl tbody tr{cursor:pointer;transition:background-color .083s linear;box-shadow:inset 0 0 0 0 var(--key)}
.edl tbody tr:focus-visible{background:var(--bg-3);box-shadow:inset 2px 0 0 0 var(--key);outline:none}@media (hover:hover){.edl tbody tr:hover{background:var(--bg-3);box-shadow:inset 2px 0 0 0 var(--key);outline:none}}
.edl tbody tr:focus-visible .c-clip{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--key)}
.c-rec a{color:var(--text-2);min-height:36px;display:inline-flex;align-items:center}
@media (hover:hover){.c-rec a:hover{color:var(--key)}}
.c-act button{width:32px;height:32px;display:grid;place-items:center;color:var(--key)}
@media (max-width:1023px),(pointer:coarse){.c-act button{width:44px;height:44px}.chip-b{min-height:44px;min-width:44px}}
.imon{grid-column:10/13;position:sticky;top:92px;display:flex;flex-direction:column;gap:12px}
.imon-box{position:relative;aspect-ratio:16/9;background:var(--bg-2)}
.imon-box .cm{inset:0}
.imon-img{position:absolute;inset:0}
.imon-img .panel-in{inset:12px}
.imon-img .th-slate{position:absolute;inset:0;display:grid;place-items:center}
.imon-t{margin-top:4px}
.bin{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.bcell{display:flex;flex-direction:column;gap:6px}
.bcell .panel-in{inset:8px}
.fill .bcell .panel-in{inset:0}
.fill .bcell .m-c{width:100%;height:100%;aspect-ratio:auto}
.fill .bcell .m-c img{object-fit:cover}
.bcell-b:focus-visible .panel{background:var(--bg-3)}@media (hover:hover){.bcell-b:hover .panel{background:var(--bg-3)}}
.th-slate{display:grid;place-items:center;height:100%;color:var(--text-2);background:var(--bg-2);border:1px solid var(--line-2)}
.bcell .th-slate{position:absolute;inset:0}
@media (min-width:2200px){.bin{grid-template-columns:repeat(10,1fr)}}
@media (max-width:1023px){
  .idx{padding-top:calc(var(--bar) + 40px)}
  .bin{grid-template-columns:repeat(5,1fr)}
  .edl-wrap{grid-column:1/-1}.imon{display:none}
  .msort{display:flex;gap:6px}.msort select{min-height:44px;background:var(--bg);color:var(--text);border:1px solid var(--line-2);padding:0 8px}
  html.touch .msort select{font-size:16px;letter-spacing:0}
  .edl thead{display:none}
  .edl,.edl tbody{display:block}
  .edl tbody tr{display:grid;grid-template-columns:48px 44px auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line)}
  .edl td{height:auto;border:0;padding:0}
  .c-th{grid-row:1/3;width:48px!important}.c-th .th{display:block;width:48px;height:48px;background:var(--bg-2) center/cover;overflow:hidden}
  .c-th .th img{width:100%;height:100%;object-fit:cover}.c-th .th-slate{display:grid;font-size:7px}
  .c-evt{grid-row:1;grid-column:2}.c-clip{grid-row:1;grid-column:3/5}
  /* line 2: TRK · SRC · FMT (TRK stays aligned under EVT, SRC under CLIP; the dots hang in the gaps) */
  .c-trk,.c-src,.c-fmt{grid-row:2;font-size:10px!important;overflow:visible!important}
  .c-trk{grid-column:2}.c-src{grid-column:3;position:relative}.c-fmt{grid-column:4;position:relative}
  .c-src::before,.c-fmt::before{content:"·";position:absolute;left:-8px;color:var(--text-3)}
  .c-note,.c-rec{display:none}
  .c-act{grid-row:1/3;grid-column:5}
}
@media (max-width:599px){.bin{grid-template-columns:repeat(3,1fr)}.idx-ctrl{gap:12px}}

/* ---------- wipe */
#wipe{position:fixed;inset:0;z-index:90;display:none;background:var(--bg-2);clip-path:inset(0 100% 0 0)}
.wipe-line{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--key)}
.wipe-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:16px;white-space:nowrap}

/* ---------- overlays */
.ov{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column}
.viewer{background:var(--scrim)}
.lbx{background:var(--bg)}
.ov-top{flex:none;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--edge);border-bottom:1px solid var(--line);background:var(--bg)}
/* image lightbox: the frame counter is never the thing that truncates; a long caption gives way instead */
.lbx .ov-top{grid-template-columns:auto minmax(0,1fr) auto}
.lbx .ov-top h2{overflow:visible}
.s-cap{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ov-top h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-top .ov-close{justify-self:end}
.v-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:32px var(--edge) 20px;min-height:0}
.v-box{position:relative;width:min(88vw,calc((100svh - 216px) * 16 / 9));aspect-ratio:16/9;background:#000}
.v-frame{position:absolute;inset:0}
.v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000 center/cover}
.v-slate{display:grid;place-items:center;background:var(--bg-2)}
.lm{position:absolute;width:14px;height:14px;border:0 solid var(--key)}
.lm-tl{left:-22px;top:-22px;border-width:1px 0 0 1px}.lm-tr{right:-22px;top:-22px;border-width:1px 1px 0 0}
.lm-bl{left:-22px;bottom:-22px;border-width:0 0 1px 1px}.lm-br{right:-22px;bottom:-22px;border-width:0 1px 1px 0}
.v-off{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 10px;background:var(--burn);color:var(--burn-ink);z-index:3}
/* linked clip: a Vimeo clip on a host Vimeo will not embed on (see README). No iframe, no error: the box shows the
   clip itself (poster, title) with a direct line out, set like a source card in a bin */
.v-live .v-lnk{display:none}
#viewer.is-linked .v-play{display:none}#viewer.is-linked .v-lnk{display:inline}
.v-link{position:absolute;inset:0;display:flex;overflow:hidden;background:var(--bg-2);isolation:isolate}
.v-link::before{content:"";position:absolute;inset:-64px;z-index:-1;background:var(--lq,none) center/cover no-repeat;filter:blur(36px) saturate(.85) brightness(.3)}
.v-link-c{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(20px,2.4vw,44px)}
.v-link-src{display:flex;flex-wrap:wrap;gap:6px 20px}
.v-link-mid{display:flex;flex-direction:column;gap:14px}
.v-link-t{font:600 clamp(26px,2.9vw,56px)/.95 var(--f-d);font-stretch:112%;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.v-link-bot{display:flex;flex-direction:column;gap:20px}
.v-link-a{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 22px;background:var(--key);border:1px solid var(--key);color:var(--key-ink);font-size:12px;font-weight:600;transition:background-color .25s linear,color .25s linear}
.v-link-a:focus-visible{background:transparent;color:var(--key)}@media (hover:hover){.v-link-a:hover{background:transparent;color:var(--key)}}
.v-link-ruler{position:relative;display:block;height:8px;border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 24px) bottom/100% 4px no-repeat}
.v-link-ruler::before{content:"";position:absolute;left:0;bottom:-6px;width:1px;height:18px;background:var(--key)}
.v-link-m{position:relative;flex:none;height:100%;aspect-ratio:var(--pr,1);max-width:56%;background:var(--bg-3) center/cover no-repeat;border-left:1px solid var(--line-2)}
.v-link-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-below{width:min(88vw,calc((100svh - 216px) * 16 / 9));display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.v-desc{max-width:70ch}
.v-ext{flex:none;display:inline-flex;align-items:center;min-height:44px;margin-top:-10px}
.v-nav{flex:none;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--edge);border-top:1px solid var(--line)}
/* a client playlist's bin: a tray of its clips above the transport (thumbnail, number, title, running time); the
   current clip is keyed. The box gives up the tray's height so nothing is pushed off screen */
.vw-bin{flex:none;padding:10px 0 12px;border-top:1px solid var(--line);background:var(--bg)}
.vw-bin-h{margin:0 0 10px;padding:0 var(--edge);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-bin-k{color:var(--text)}
.vw-bin-l{position:relative;display:flex;gap:8px;padding:0 var(--edge) 2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.vw-bin-l li{flex:none}
.vw-bin-b{display:flex;align-items:flex-start;gap:10px;width:252px;padding:6px;border:1px solid var(--line);background:var(--bg-2);transition:border-color .25s linear,background-color .25s linear}
.vw-bin-b:focus-visible{outline-offset:-2px}
@media (hover:hover){.vw-bin-b:hover{border-color:var(--text-3)}}
.vw-bin-b[aria-current]{border-color:var(--key);background:var(--key-tint)}
.vw-bin-m{position:relative;flex:none;width:96px;aspect-ratio:16/9;overflow:hidden;background:#000 center/cover no-repeat}
.vw-bin-m img{width:100%;height:100%;object-fit:cover}
.vw-bin-d{position:absolute;right:3px;bottom:3px;padding:2px 4px;background:var(--burn);color:var(--burn-ink)}
.vw-bin-t{min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:1px}
.vw-bin-b[aria-current] .vw-bin-t .micro::before{content:"▶ ";color:var(--key)}
.vw-bin-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 13px/1.25 var(--f-d);color:var(--text-2);text-wrap:pretty}
.vw-bin-b[aria-current] .vw-bin-n{color:var(--text)}
@media (min-width:600px) and (min-height:560px){#viewer.has-bin .v-box,#viewer.has-bin .v-below{width:min(88vw,calc((100svh - 392px) * 16 / 9))}}
@media (max-width:599px){.vw-bin-b{width:220px}.vw-bin-n{font-size:12px}}
/* with the bin docked the stage has less room: it never spills up under the top bar or down into the bin; when the
   clip + notes are taller than the space left, the stage scrolls between the two (top bar and bin stay put) */
#viewer.has-bin .v-stage{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain}
@media (min-width:600px) and (max-height:659px){#viewer.has-bin .v-stage{gap:20px}#viewer.has-bin .v-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
/* phones: the Watch-on-Vimeo card gives up its poster panel (the blurred poster behind it stays) so it fits with the bin */
@media (max-width:599px) and (max-height:799px){#viewer.has-bin.is-linked .v-link-m{display:none}#viewer.has-bin .v-stage{gap:20px;padding-top:20px}}
@media (max-width:599px){.lm-tl{left:-10px;top:-10px}.lm-tr{right:-10px;top:-10px}.lm-bl{left:-10px;bottom:-10px}.lm-br{right:-10px;bottom:-10px}#viewer.is-linked .v-box{aspect-ratio:auto}#viewer.is-linked .v-frame{position:relative}.v-link{position:relative;flex-direction:column-reverse}.v-link-m{width:100%;height:auto;min-height:0;max-width:none;aspect-ratio:16/9;border:0;border-bottom:1px solid var(--line-2)}.v-link-m img{object-position:50% 30%}.v-link-c{padding:16px;gap:16px}.v-link-t{font-size:26px}.v-link-a{min-height:48px}.v-link-ruler{display:none}.ov-top{grid-template-columns:1fr auto}.v-live{display:none}.v-below{flex-direction:column;gap:12px}.v-box,.v-below{width:100%}}

/* tiny landscape phones (568x320): the stacked viewer is taller than the screen, so the overlay itself scrolls */
@media (max-height:559px) and (max-width:599px){#viewer{overflow-y:auto;overscroll-behavior:contain}#viewer .v-stage{flex:1 0 auto}}
@media (max-height:559px) and (min-width:600px){
  #viewer .v-stage{flex-direction:row;align-items:center;justify-content:center;gap:28px;padding:16px var(--edge)}
  #viewer .v-box{flex:none;width:min(calc((100svh - 152px) * 16 / 9),calc(100vw - 2 * var(--edge) - 240px))}
  #viewer .v-below{flex:1 1 0;min-width:0;max-width:46ch;max-height:100%;overflow-y:auto;flex-direction:column;justify-content:flex-start;gap:12px;width:auto}
  #viewer .v-ext{margin-top:0}
  #viewer .v-nav{background:var(--bg)}
  #viewer.has-bin .v-box{width:min(calc((100svh - 240px) * 16 / 9),calc(100vw - 2 * var(--edge) - 240px))}
  .vw-bin{padding:8px 0}.vw-bin-h{display:none}
  .lm-tl{left:-10px;top:-10px}.lm-tr{right:-10px;top:-10px}.lm-bl{left:-10px;bottom:-10px}.lm-br{right:-10px;bottom:-10px}
  .v-link-c{padding:14px 16px;gap:10px}.v-link-t{font-size:22px}.v-link-a{min-height:44px}.v-link-ruler{display:none}
}
.s-stage{position:relative;flex:1;display:grid;place-items:center;min-height:0}
.s-img{position:relative;overflow:hidden;background:transparent}
.s-lq{position:absolute;inset:0;background:center/cover no-repeat}
.s-img img{position:relative;width:100%;height:100%;object-fit:contain;opacity:0;transform-origin:50% 50%}
.s-img img.ok{opacity:1;transition:opacity .25s linear}
.s-hit{position:absolute;top:0;bottom:0;width:15vw;z-index:2}
.s-hit-l{left:0;cursor:w-resize}.s-hit-r{right:0;cursor:e-resize}
.s-img{z-index:3}
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;padding:0}
.s-prev{left:var(--edge)}.s-next{right:var(--edge)}
.s-strip{flex:none;height:72px;display:flex;align-items:center;gap:4px;padding:0 var(--edge);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}
.s-strip::-webkit-scrollbar{display:none}
.s-strip button{flex:none;height:48px;background:var(--bg-2) center/cover;opacity:.55;transition:opacity .125s linear}
.s-strip button img{height:100%;width:100%;object-fit:cover}
.s-strip button.on{opacity:1}@media (hover:hover){.s-strip button:hover{opacity:1}}
.s-strip button.on{outline:2px solid var(--key);outline-offset:-2px}
.s-count{display:none;flex:none;height:48px;align-items:center;justify-content:center}
.zoomed .s-hit{pointer-events:none}
@media (max-width:1023px){
  .s-strip{display:none}.s-count{display:flex}.s-hit{width:20vw}
  .s-arrow{top:calc(100% + 2px);transform:none;height:44px;min-height:44px}
  .s-prev{left:var(--m)}.s-next{right:var(--m)}
  .lbx .s-cap{display:none}.lbx .ov-top{grid-template-columns:minmax(0,1fr) auto}
}
@media (min-width:600px) and (max-width:1023px){#viewer .ov-top{grid-template-columns:minmax(0,1fr) auto auto}}
/* landscape phones: the lightbox keeps its height for the photo (arrows at the sides, the count is in the title) */
@media (max-width:1023px) and (max-height:500px) and (orientation:landscape){.s-count{display:none}.s-arrow{top:50%;transform:translateY(-50%)}}

/* ---------- tracks sheet */
.sheet{position:fixed;inset:0;z-index:85;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.sheet-top{flex:none;height:var(--bar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);border-bottom:1px solid var(--line)}
.sheet-close{min-width:44px;min-height:44px;text-align:right}
.sheet-rows{flex:1}
.sheet-a{display:grid;grid-template-columns:32px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:64px;padding:10px var(--m);border-bottom:1px solid var(--line)}
.sheet-a .badge-trk{grid-column:1;grid-row:1/3}
.sheet-n{font-size:clamp(22px,6.8vw,32px);white-space:nowrap;grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet-a>.meta:not(.badge-trk){grid-column:3;grid-row:1/3}
.sheet-in{grid-column:2;grid-row:2;margin-top:6px}
.sheet-foot{padding:32px var(--m) 40px;display:flex;flex-direction:column;gap:16px}
.sheet-foot .lede{font-size:22px;word-break:break-all;min-height:44px;display:flex;align-items:center}
.sheet-soc{display:flex;gap:24px}.sheet-soc a{min-height:44px;display:inline-flex;align-items:center}
.sheet-tc{color:var(--text-3)}

/* ---------- cursor, toast, guides */
#cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
html.has-cur #cursor{display:block}
#cursor i{position:absolute;left:0;top:-12px;width:1px;height:24px;background:var(--key)}
#cursor span{position:absolute;left:8px;top:-9px;padding:3px 6px;background:var(--key);color:var(--key-ink);white-space:nowrap;transform-origin:0 50%}
#toast{position:fixed;left:50%;bottom:24px;z-index:110;transform:translate(-50%,16px);padding:8px 12px;background:var(--bg-3);border:1px solid var(--line-2);opacity:0;pointer-events:none;transition:opacity .25s linear,transform .25s var(--out)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#guides{position:fixed;inset:0;z-index:60;pointer-events:none}
#guides .gd{height:100%;display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--g);padding:0 var(--edge)}
#guides i{background:rgba(43,240,142,.06);border-left:1px solid rgba(43,240,142,.12);border-right:1px solid rgba(43,240,142,.12)}
.nojs{padding:120px var(--m);font:500 12px/1.4 var(--f-m);text-transform:uppercase;letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){
  /* keep authored durations (the initial transition-property is `all`, so a blanket duration would animate every layout write); drop transform travel */
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,outline-color!important;animation-duration:.15s!important;scroll-behavior:auto!important}
  .cm.pulse-on{animation:none;opacity:1}
}
/* reel keyboard mirror: its focus shows on the monitor itself */
.monitor:focus-within .hud{outline:2px solid var(--focus);outline-offset:2px}
.monitor:focus-within>.cm i{border-color:var(--key)}

/* ================================================================ final pass: white mode, bar tools, transport,
   live footage, micro-cues. Additive only: the dark look above is the approved one. */
/* ---------- white mode: a paper-and-graphite suite, not an inversion. Same accent family, deepened for 4.5:1 on paper */
html[data-theme=light]{
  --bg:#F3F2EE;--bg-2:#E9E8E3;--bg-3:#E0DFD9;--line:#D9D8D1;--line-2:#C2C1BA;--stroke:#B3B2AB;--stroke-g:#8F8E88;
  --text:#0E0E10;--text-2:#47474D;--text-3:#5E5E64;--key:#00723C;--key-ink:#FFFFFF;--key-tint:rgba(0,114,60,.1);
  --burn:rgba(243,242,238,.88);--burn-ink:#0E0E10;--burn-ink-2:#47474D;--scrim:rgba(243,242,238,.965);color-scheme:light}
html[data-theme=light] .cm.cm-in{filter:drop-shadow(0 0 1px rgba(255,255,255,.85))}
html[data-theme=light] .v-link::before{filter:blur(36px) saturate(.7) brightness(1.5);opacity:.55}
html[data-theme=light] #guides i{background:rgba(0,114,60,.05);border-color:rgba(0,114,60,.14)}
/* the switch: the new look wipes open from the toggle like a cut (View Transitions; a straight cut without) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){animation:thmWipe .5s cubic-bezier(.7,0,.2,1) both}
@keyframes thmWipe{from{clip-path:inset(0 calc(100% - var(--vt-x,0px)) 0 var(--vt-x,0px))}to{clip-path:inset(0 0 0 0)}}

/* ---------- top bar tools: SOUND (with a live level meter), white mode, keyboard sheet */
.bar-r{grid-column:9/13;justify-self:end;display:flex;align-items:center;gap:16px}
.bar-tools{display:flex;align-items:center}
.tool{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 8px;color:var(--text-2);transition:color .25s linear}
.tool:focus-visible,.tool[aria-pressed=true]{color:var(--text)}@media (hover:hover){.tool:hover{color:var(--text)}}
.tool:focus-visible{outline-offset:-6px}
.thm{width:14px;height:14px;border:1px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .5s var(--edit)}
html[data-theme=light] .thm{transform:rotate(180deg)}
@media (min-width:1024px) and (max-width:1279px){.bar-nav{gap:16px}.bar-r{gap:8px}}
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .bar-r{grid-column:3;justify-self:end;gap:0}
  .bar-tracks{padding-left:4px}
}
/* the Tracks sheet carries both switches on phones */
.sheet-tools{display:flex;flex-wrap:wrap;gap:0 16px;margin-left:-8px}
.sheet-tools .tool{justify-content:flex-start;font-size:11px}

/* ---------- keyboard sheet */
.keys{position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:24px var(--m);background:var(--scrim)}
.keys-in{width:min(600px,100%);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;padding:20px 24px 24px;background:var(--bg-2);border:1px solid var(--line-2)}
.keys-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:4px}
.keys-x{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);transition:color .25s linear}.keys-x:focus-visible{color:var(--text)}@media (hover:hover){.keys-x:hover{color:var(--text)}}
.keys-l>div{display:grid;grid-template-columns:136px 1fr;gap:16px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.keys-l dt{display:flex;flex-wrap:wrap;gap:4px}.keys-l dd{margin:0;font-size:14px;line-height:1.35}
kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--bg);color:var(--text);font:500 11px/1 var(--f-m);letter-spacing:.02em}
.keys-f{margin-top:14px}
@media (max-width:599px){.keys-l>div{grid-template-columns:1fr;gap:6px}}

/* ---------- sequence map: work area (In -> Out) + section keyframes that light as the playhead passes */
html.has-cur .map-area[data-cur],html.has-cur #slate .ruler[data-cur]{cursor:none}
.map-area.drag{cursor:grabbing}
.map-wa{position:absolute;top:-6px;height:3px;left:0;width:100%;background:var(--key-tint);pointer-events:none;transition:background-color .25s linear}
.map-wa::before,.map-wa::after{content:"";position:absolute;top:-2px;width:4px;height:7px;border:1px solid var(--key);opacity:0;transition:opacity .25s linear}
.map-wa.set::before,.map-wa.set::after{opacity:1}
.map-wa::before{left:0;border-right:0}.map-wa::after{right:0;border-left:0}
.map-wa.set{background:color-mix(in srgb,var(--key) 45%,transparent)}
.map-kf{position:absolute;top:-8px;width:7px;height:7px;margin-left:-3px;background:var(--bg);border:1px solid var(--stroke-g);transform:rotate(45deg);pointer-events:none;transition:background-color .125s linear,border-color .125s linear}
.map-kf.on{background:var(--key);border-color:var(--key)}
#slate .ruler{cursor:ew-resize}
#slate .ruler.drag{cursor:grabbing}

/* ---------- live footage */
.lv{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .458s var(--out),visibility 0s .458s;background:var(--bg-3)}
/* (a pre-rolling player is visibility:hidden, not just transparent: the browser throttles a hidden cross-origin frame's rendering) */
.lv.warm{visibility:visible;transition:opacity .458s var(--out),visibility 0s}
.lv.on{opacity:1;visibility:visible;transition:opacity .458s var(--out),visibility 0s}
.lv video{width:100%;height:100%;object-fit:cover;display:block}
.lv-col{position:absolute;left:50%;top:0;bottom:0;width:100%;transform:translateX(-50%);overflow:hidden}
.lv iframe{position:absolute;left:50%;top:50%;border:0;transform:translate(-50%,-50%);pointer-events:none}
/* a vertical film in a wide box: its sharp column over a blurred, dimmed copy of its own poster */
.lv-bg{position:absolute;inset:-10%;background:#000 center/cover no-repeat;filter:blur(24px) brightness(.6)}
.lv-pb{background:#000}
.lv-tag{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--burn);color:var(--burn-ink);pointer-events:none;opacity:0;transition:opacity .25s linear;white-space:nowrap}
.lv-tag b{font-weight:400;color:var(--burn-ink-2)}
/* over bright footage the dark burn-in needs more body to stay legible */
html:not([data-theme=light]) .lv-tag{background:rgba(0,0,0,.78)}html:not([data-theme=light]) .lv-tag b{color:var(--text)}
.lv-tag i{width:6px;height:6px;border-radius:50%;background:var(--key)}
.lv-tag.on{opacity:1}
html.motion .lv-tag.on i{animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:.25}}
/* no motion to show (touch, Save-Data, offline...): the poster takes a slow push-in while it is on screen */
html.motion .m img{transition:opacity .25s linear,transform .5s var(--out),scale 1.208s var(--out)}
html.motion .lv-push img.ok{scale:1.08;transition:opacity .25s linear,transform .5s var(--out),scale 8s var(--out)}
/* DKT's type-only panels: footage under the slate type, scrimmed, the type switching to its on-picture colours */
.slatecard>.lv{z-index:0}
.slatecard>.lv::after{content:"";position:absolute;inset:0;background:rgba(6,6,7,.64)}
.slatecard>.sc-t,.slatecard>.t2{position:relative;z-index:3}
.slatecard>.sc-ruler,.slatecard>.sc-play,.slatecard>.sc-no,.slatecard>.lv-tag{z-index:3}
.slatecard.is-live{--text:#ECEBE7;--text-2:#C9C9CE;--key:#2BF08E;--line-2:rgba(236,235,231,.35);color:#ECEBE7}
.slatecard>.lv-tag{left:auto;right:16px;top:16px;bottom:auto}

/* ---------- micro-cues: presses nudge, scrubbable things say so */
.btn:active,.tool:active,.bar-nav a:active,.bar-tracks:active,.sheet-a:active,.keys-x:active,.map-clip:active,.chip-b:active{translate:0 1px}
.card:active{scale:.992}
.ring{cursor:grab}.ring:active{cursor:grabbing}
html.shuttling #tc{color:var(--key)}

/* ---------- live footage on the reel: a page layer mapped onto the front frame (see ring.js) */
.ring-live{position:absolute;left:0;top:0;width:640px;height:360px;transform-origin:0 0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .208s linear;z-index:1}
.ring-live.is-set{opacity:1}
.ring-live .lv{background:#000}

/* ---------- the end slate's reel: the sequence runs out as a strip of film drifting past */
/* (the room for the sequence map is always kept: it is always up by the time the end slate is on screen, and a
   document that grew 56 px when the map came up left End / the map's end 56 px short of the real bottom) */
.endslate{height:auto;min-height:40svh;grid-template-rows:auto 1fr;row-gap:clamp(24px,4svh,40px);padding-bottom:calc(56px + clamp(32px,5svh,48px))}
.es-strip{position:relative;z-index:1;justify-self:stretch;align-self:start;overflow:hidden;padding:18px 0;background:#2A2B2F}
html[data-theme=light] .es-strip{background:#36373C}
.es-strip::before,.es-strip::after{content:"";position:absolute;left:0;right:0;z-index:2;height:6px;background:repeating-linear-gradient(90deg,transparent 0 12px,var(--bg) 12px 22px);pointer-events:none}
.es-strip::before{top:6px}.es-strip::after{bottom:6px}
.es-row{display:flex;gap:6px;width:max-content;will-change:transform}
.es-f{position:relative;flex:none;width:clamp(200px,24vw,420px);overflow:hidden;background:#000}
.es-f .m{display:block;transition:filter .458s var(--out)}
.es-f:not(.is-live) .m{filter:saturate(.7) brightness(.82)}
.es-f .lv-tag{left:8px;bottom:8px}
@media (max-width:599px){.es-f{width:56vw}.es-strip{padding:14px 0}.es-strip::before{top:4px}.es-strip::after{bottom:4px}}

/* ---------- the LIVE switch */
/* (the narrow toolbar is for a mouse: an iPad in landscape keeps 44 px targets) */
@media (min-width:1024px) and (max-width:1279px) and (hover:hover) and (pointer:fine){.bar-tools .tool{min-width:34px;padding:0 4px}}
/* the sheet's switches say their state in words on touch; in a short landscape sheet they stay in reach */
.sheet-tools .tool::after{content:"OFF";margin-left:2px;font:500 10px/1 var(--f-m);letter-spacing:.06em;color:var(--text-3)}
.sheet-tools .tool[aria-pressed=true]::after{content:"ON";color:var(--key)}
@media (max-height:500px){.sheet-tools{position:sticky;bottom:0;z-index:1;background:var(--bg);border-top:1px solid var(--line);margin-inline:-8px;padding-inline:0}}
/* keyboard sheet: the single-key switch */
.keys-sw{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;margin:10px 0 0 -8px}
.keys-sw .tool::after{content:"ON";margin-left:4px;color:var(--key)}
.keys-sw .tool[aria-pressed=false]::after{content:"OFF";color:var(--text-3)}

/* ---------- viewer: the way into the player for a keyboard (a skip link: shown on focus only) */
.v-pc{position:absolute;left:12px;top:12px;z-index:3;background:var(--bg)}
.v-pc[hidden]{display:none}
.v-pc:not(:focus){width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Slate ruler: In / Out marks made on the Slate */
.rl-wa{position:absolute;bottom:0;height:5px;background:color-mix(in srgb,var(--key) 45%,transparent);pointer-events:none;opacity:0;transition:opacity .25s linear}
.rl-m{position:absolute;bottom:0;width:5px;height:10px;margin-left:-1px;border:1px solid var(--key);border-right:0;pointer-events:none;opacity:0;transition:opacity .25s linear}
.rl-o{margin-left:-4px;border-left:0;border-right:1px solid var(--key)}
.rl-wa.set,.rl-m.set{opacity:1}
/* the map's work area reads at a glance */
.map-wa{top:-7px;height:5px}
.map-wa::before,.map-wa::after{top:-2px;height:9px}
.map-wa.set{background:color-mix(in srgb,var(--key) 55%,transparent)}
/* sequence-map clips: a 24 px hit area around the painted 8 px bar */
.map-clip::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
/* toasts clear the sequence map and the docked readouts while the map is up */
html.map-up #toast{bottom:100px}

/* ---------- touch: no grey tap flash; pressed states instead of sticky hovers */
html{-webkit-tap-highlight-color:transparent}
.sheet-a:active,.chip-b:active,.edl tbody tr:active{background:var(--bg-3)}
/* the home indicator never sits on a bottom row (standalone / cover contexts; 0 elsewhere) */
#toast{margin-bottom:env(safe-area-inset-bottom)}
.v-nav{padding-bottom:env(safe-area-inset-bottom);height:calc(64px + env(safe-area-inset-bottom))}
/* phones: the page behind an overlay never ghosts through the viewer's text */
@media (max-width:1023px){:root{--scrim:rgba(6,6,7,.985)}html[data-theme=light]{--scrim:rgba(243,242,238,.985)}}
/* the flat contact strip on touch (low-power Tier B): two frames across, the first one in front at rest */
@media (hover:none),(pointer:coarse){.strip-f{width:min(56vw,300px)}}
.s-img{touch-action:manipulation}
.lbx.zoomed .s-img{touch-action:none}

/* ---------- QA round 2 refinements */
/* a card showing live footage carries one running timecode: the LIVE burn-in. Its static centre chip steps aside
   (on phones the two overlapped) */
html .is-live .tc-run.b-bc{opacity:0;transition:none}
/* the reel's front frame: while footage plays on it, the HUD's timecode runs from the player with a LIVE cue */
#monitor .hud.lv-on #hud-tc{color:var(--burn-ink)}
#monitor .hud.lv-on #hud-tc::before{content:"LIVE ";padding-left:12px;background:radial-gradient(circle at 3px 55%,var(--key) 3px,transparent 3.5px) no-repeat}
html.motion #monitor .hud.lv-on #hud-tc::before{animation:rec 1s steps(1) infinite}
/* Index controls: FIT / FILL (BIN view only) comes in after the sort control, so switching EDL <-> BIN never
   moves the sort control sideways (tablets, landscape phones) */
.idx-ctrl>.msort{order:1}.idx-ctrl>.seg-fit{order:2}