/* Kolokwa Studio: Monrovia signboard paint.
   Whitewashed walls, flag-blue ink, flat sign paint. Every tool has its own paint colour, used wherever that tool shows up.
   Bungee (signage lettering, with a painted shade) is only for big words; Atkinson Hyperlegible carries everything else. */
@font-face{font-family:"Bungee";src:url(/fonts/bungee.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-next.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --wall:#EEF1EC;     /* whitewash */
  --board:#FFFFFF;    /* a clean painted board */
  --ink:#13204A;      /* flag blue, deep */
  --ink-2:#4A5578;    /* faded ink for quiet text */
  --yellow:#FFC20E;   /* keh-keh yellow */
  --red:#C8102E;      /* flag red */
  --green:#127A4B;    /* palm green */
  --blue:#2B6CD9;     /* lappa blue */
  --f-sign:"Bungee",Impact,"Arial Black",sans-serif;
  --f-body:"Atkinson",system-ui,sans-serif;
  --pad:clamp(16px,4.5vw,28px);--tabs-h:66px;--safe-b:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:17px/1.55 var(--f-body);min-height:100dvh;padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 16px)}
h1,h2,h3{margin:0;line-height:1.15}
h1{font:400 clamp(34px,9vw,60px)/.98 var(--f-sign);letter-spacing:-.01em}
h2{font-size:clamp(21px,5vw,26px);font-weight:800}
h3{font-size:18px;font-weight:800}
p{margin:0}
a{color:var(--blue);text-underline-offset:3px}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--yellow);color:var(--ink);padding:8px 12px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* The signpainter's shade: the one bold thing. Big words get a drop-shade like a hand-painted board. */
.paint{color:var(--ink);text-shadow:.055em .055em 0 var(--yellow)}
.hero .paint{color:var(--board);text-shadow:.06em .06em 0 var(--red)}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad);padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--wall);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:38px;height:38px;flex:none}
.wordmark{font:400 21px/1 var(--f-sign);display:grid}
.wordmark small{font:800 12px/1.2 var(--f-body);letter-spacing:.02em;color:var(--ink-2)}
.install{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);border-radius:99px;padding:7px 14px;font-weight:800;font-size:14px;cursor:pointer}

/* tabs: a navy strip, the active tab painted yellow */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:calc(var(--tabs-h) + var(--safe-b));padding:7px 8px calc(7px + var(--safe-b));background:var(--ink)}
.tabs a{display:grid;place-items:center;align-content:center;gap:1px;text-decoration:none;color:#C8D0EA;font-size:12.5px;font-weight:800;border-radius:12px}
.tabs svg{width:23px;height:23px;fill:currentColor}
.tabs a[data-tab="create"] svg{fill:none;stroke:currentColor;stroke-width:2.6}
.tabs a[aria-current="page"]{background:var(--yellow);color:var(--ink)}
@media (min-width:900px){
  body{padding-bottom:0}
  .tabs{position:sticky;top:61px;bottom:auto;height:auto;z-index:19;padding:6px var(--pad);grid-template-columns:repeat(4,auto);justify-content:start}
  .tabs a{grid-auto-flow:column;gap:8px;padding:8px 16px;font-size:15px}
  .tabs svg{width:19px;height:19px}
}

main{max-width:1100px;margin:0 auto;padding:var(--pad);display:grid;gap:28px;outline:none}
.boot{color:var(--ink-2);padding:40px 0;text-align:center}

/* building blocks: a board is plain white with an ink outline; radius stays small like cut plywood */
.card{background:var(--board);border:2px solid var(--ink);border-radius:6px;padding:var(--pad);display:grid;gap:14px}
.stack{display:grid;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{justify-content:space-between}
.muted{color:var(--ink-2)}.small{font-size:14.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:8px;border:2px solid var(--ink);background:var(--board);color:var(--ink);font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{background:#F6F7FA}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn.go{background:var(--red);color:#fff}
.btn.go:hover{background:#A90D26}
.btn.red{background:var(--board);border-color:var(--red);color:var(--red);box-shadow:0 3px 0 var(--red)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--blue);padding-inline:8px}
.btn.big{min-height:56px;font-size:18px;padding-inline:26px}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default;transform:none}
label{display:grid;gap:6px;font-weight:800;font-size:15px}
.hint{font-weight:400;color:var(--ink-2);font-size:14px}
input,textarea,select{width:100%;background:var(--board);border:2px solid #9AA3B8;border-radius:8px;padding:12px 14px;font-size:16px;min-height:48px}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--ink);outline:3px solid rgba(43,108,217,.25);outline-offset:0}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:22px;height:22px;min-height:0;margin-top:2px;flex:none;accent-color:var(--red)}
.pw{position:relative}.pw input{padding-right:70px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--blue);font-weight:800;font-size:14px;padding:8px;cursor:pointer}
.err{color:var(--red);font-weight:800}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:13px;font-weight:800;background:var(--wall);border:1.5px solid var(--ink);white-space:nowrap}
.pill.ok{background:var(--green);border-color:var(--green);color:#fff}.pill.run{background:var(--yellow);border-color:var(--ink)}.pill.bad{background:var(--board);border-color:var(--red);color:var(--red)}

/* each tool's paint */
.t-ai_video{--paint:var(--yellow);--on:var(--ink)}
.t-text_video{--paint:var(--blue);--on:#fff}
.t-image_video{--paint:var(--green);--on:#fff}
.t-video_dub{--paint:var(--red);--on:#fff}
.t-voiceover{--paint:var(--board);--on:var(--ink)}
.t-edit{--paint:var(--ink);--on:var(--yellow)}

/* welcome: a big navy board, white lettering with the red shade, Kolokwa in speech bubbles */
.hero{position:relative;display:grid;gap:26px;padding:clamp(26px,6vw,56px) var(--pad) clamp(40px,7vw,64px);border-radius:6px;background:var(--ink);color:#fff;overflow:hidden}
.hero-copy{display:grid;gap:18px;max-width:34ch}
.hero h1{font-size:clamp(46px,12vw,92px)}
.hero p{font-size:clamp(17px,2.2vw,20px);color:#D9DEF0;max-width:42ch}
.hero .btn{border-color:#fff;box-shadow:0 3px 0 #000}
.hero .btn:not(.go){background:transparent;color:#fff}
.hero .btn.go{border-color:var(--red)}
.talk{display:grid;gap:12px;justify-items:start;align-content:center}
.hero .bub{max-width:none;position:relative;background:var(--yellow);color:var(--ink);font:400 clamp(18px,3.4vw,26px)/1.1 var(--f-sign);padding:12px 18px 13px;border-radius:18px 18px 18px 4px}
.hero .bub.b2{justify-self:end;background:#fff;border-radius:18px 18px 4px 18px}
.hero .bub.b3{background:var(--green);color:#fff}
.stripes{position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(180deg,var(--red) 0 7px,#fff 7px 14px)}
@media (min-width:860px){.hero{grid-template-columns:1.3fr 1fr;align-items:center}}
@media (prefers-reduced-motion:no-preference){
  .bub{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
  .bub.b1{animation-delay:.25s}.bub.b2{animation-delay:.9s}.bub.b3{animation-delay:1.55s}
  @keyframes pop{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:none}}
}

/* tools: a street of shop signs, each painted its own colour */
.street{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.street{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.sign{position:relative;display:grid;gap:6px;align-content:start;min-height:150px;padding:16px 16px 18px;border-radius:6px;border:2px solid var(--ink);background:var(--paint);color:var(--on);cursor:pointer;text-align:left;overflow:hidden;transition:transform .12s}
.sign:hover{transform:translateY(-3px)}
.sign:active{transform:translateY(1px)}
.sign b{font:400 clamp(17px,4.2vw,22px)/1.05 var(--f-sign)}
.sign span:last-child{font-size:14.5px;line-height:1.4;opacity:.92}
.sign-ic{width:38px;height:38px;margin-bottom:4px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor}
.sign-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.sign,.btn{transition:none}}

/* how it works: a real sequence, so it is numbered */
.steps{display:grid;gap:14px}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
@media (min-width:760px){.steps ol{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;padding:14px 0;border-top:2px solid var(--ink)}
.steps li::before{content:counter(s);grid-row:span 2;font:400 44px/.9 var(--f-sign);color:var(--red)}
.steps b{font-size:18px}.steps span{color:var(--ink-2);font-size:15.5px}

/* lists: each project row carries its tool's paint on the left edge */
.list{display:grid;gap:10px}
.item{display:flex;gap:12px;align-items:center;padding:12px 14px 12px 12px;border-radius:6px;background:var(--board);border:2px solid var(--ink);border-left:10px solid var(--paint,var(--ink));text-decoration:none;color:var(--ink)}
.item.t-voiceover{border-left-color:var(--ink-2)}
.item:hover{background:#F8F9FB}
.item .ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink)}
.item .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1}
.item .t{flex:1;min-width:0}.item .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t span{color:var(--ink-2);font-size:14px}
.empty{padding:24px;border:2px dashed var(--ink-2);border-radius:6px;color:var(--ink-2);text-align:center}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;align-items:start}
.lib .v{display:grid;gap:8px;background:var(--board);border:2px solid var(--ink);border-top:8px solid var(--paint,var(--ink));border-radius:6px;padding:8px}
.lib .v.t-voiceover{border-top-color:var(--ink-2)}
.lib video,.lib audio{width:100%;border-radius:4px;background:#000;max-height:300px}
.lib b{font-size:15px;line-height:1.3}

/* project page */
.ed-head{display:flex;gap:10px;align-items:center}
.ed-head input{font:400 clamp(20px,4.5vw,28px)/1.1 var(--f-sign);background:transparent;border-color:transparent;padding-inline:4px}
.ed-head input:hover,.ed-head input:focus{border-color:var(--ink);background:var(--board)}
.ed-head .pill{background:var(--paint);color:var(--on);border-color:var(--ink)}
@media (max-width:480px){.ed-head .pill{display:none}}
.ed{display:grid;gap:16px}
@media (min-width:900px){.ed{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}.ed .side{position:sticky;top:124px}}
.sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sec-t h2{font-size:20px}
.counter{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;min-height:0}
.chip span{display:block;padding:8px 14px;border-radius:99px;border:2px solid var(--ink);font-weight:800;font-size:14.5px;background:var(--board)}
.chip input:checked+span{background:var(--ink);color:var(--yellow)}
.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.chip-btn{padding:7px 13px;border-radius:99px;border:2px dashed var(--ink-2);background:transparent;color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.chip-btn:hover{border-style:solid;border-color:var(--ink);background:var(--yellow)}
.range{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--ink-2)}
.range input{padding:0;min-height:32px;accent-color:var(--red);background:none;border:0}
.drop{display:grid;place-items:center;gap:4px;padding:22px;border:2px dashed var(--ink-2);border-radius:6px;text-align:center;color:var(--ink-2);cursor:pointer;background:var(--wall)}
.drop:hover,.drop.over{border-color:var(--ink);border-style:solid;color:var(--ink);background:#FFF6D6}
.drop b{color:var(--ink)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.thumb{position:relative;border-radius:4px;overflow:hidden;background:#000;aspect-ratio:1;border:2px solid var(--ink)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);background:var(--board);color:var(--ink);font-size:17px;line-height:1;cursor:pointer}
.thumb .n{position:absolute;left:5px;bottom:4px;font-size:12px;font-weight:800;background:var(--yellow);color:var(--ink);padding:0 7px;border-radius:99px}
.upbar{height:10px;border-radius:99px;background:var(--wall);border:1.5px solid var(--ink);overflow:hidden}.upbar span{display:block;height:100%;width:0;background:var(--green)}
.lines{display:grid;gap:6px;max-height:280px;overflow:auto}
.line{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:6px;background:var(--wall);font-size:15px}
.line button{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);cursor:pointer;font-size:13px}
.line span{flex:1}
.note-box{padding:12px 14px;border-radius:6px;background:#FFF6D6;border:2px solid var(--yellow);font-size:15px}

/* making it */
.job{display:grid;gap:12px}
.prog{height:14px;border-radius:99px;background:var(--wall);border:2px solid var(--ink);overflow:hidden}
.prog span{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,#FFD54F 10px 20px);transition:width .6s}
@media (prefers-reduced-motion:reduce){.prog span{transition:none}}
.out video{width:100%;max-height:70vh;border-radius:4px;background:#000}
.out audio{width:100%}
.versions .item{padding:10px 12px}
.rules li{margin-bottom:8px}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h) + var(--safe-b) + 14px);z-index:60;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:12px 18px;border-radius:8px;font-weight:800;max-width:min(92vw,520px)}
@media (min-width:900px){.toast{bottom:24px}}

/* ---------- video editor (computers): the workshop is dark so the picture reads true; the tracks keep the tool paints ---------- */
body.wide-ed{background:#0E1736;color:#E9ECF7}
body.wide-ed .top{background:#0E1736;border-color:#2A3A73}
body.wide-ed .brand,body.wide-ed .wordmark small{color:#E9ECF7}
body.wide-ed .tabs{background:#0A1129}
body.wide-ed main{max-width:none;padding:12px 16px}
.nle{display:grid;gap:12px;--panel:#17224A;--edge:#2A3A73;--soft:#A8B1D3}
.nle .card{background:var(--panel);border:1.5px solid var(--edge);border-radius:6px;color:#E9ECF7}
.nle .muted{color:var(--soft)}
.nle .btn{background:var(--panel);color:#E9ECF7;border:1.5px solid var(--edge);box-shadow:none}
.nle .btn:hover{border-color:var(--yellow)}
.nle .btn.go{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.nle .btn.ghost{background:transparent;border-color:transparent;color:var(--yellow)}
.nle input,.nle textarea,.nle select{background:#0E1736;border:1.5px solid var(--edge);color:#E9ECF7}
.nle input:focus,.nle textarea:focus,.nle select:focus{border-color:var(--yellow)}
.nle .chip span{background:#0E1736;border:1.5px solid var(--edge);color:#E9ECF7}
.nle .chip input:checked+span{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.nle .drop{background:#0E1736;border-color:var(--edge);color:var(--soft)}
.nle .drop b{color:#E9ECF7}
.nle .drop:hover,.nle .drop.over{background:#1C2A5C;border-color:var(--yellow)}
.nle .note-box{background:#2B2610;color:#FFE7A0;border-color:#6B5A12}
.nle-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nle-top input#title{flex:1;min-width:180px;font:400 22px/1.1 var(--f-sign);background:transparent;border-color:transparent;padding-inline:4px;color:#fff}
.nle-top input#title:hover,.nle-top input#title:focus{border-color:var(--edge)}
.nle-actions select{width:auto;min-height:40px;padding:6px 10px;font-size:14px}
.btn.sm{min-height:40px;padding:6px 12px;font-size:14px;border-radius:7px}
.nle-phone{display:none}
@media (max-width:899px){.nle-phone{display:block}}
.nle-main{display:grid;gap:12px}
@media (min-width:900px){.nle-main{grid-template-columns:260px minmax(0,1fr) 280px;align-items:stretch}}
@media (min-width:1400px){.nle-main{grid-template-columns:320px minmax(0,1fr) 320px}}
.nle-bin,.nle-insp{padding:14px;gap:10px;align-content:start;max-height:min(62vh,640px);overflow:auto}
.bin-tabs{display:flex;flex-wrap:wrap;gap:4px}
.bin-tabs button{border:0;background:#0E1736;color:var(--soft);border-radius:99px;padding:5px 11px;font-size:13px;font-weight:800;cursor:pointer}
.bin-tabs button[aria-selected="true"]{background:var(--yellow);color:var(--ink)}
.drop.sm{padding:12px;gap:2px;font-size:13px}
.bin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bi{position:relative;display:grid;gap:4px;cursor:grab;font-size:12.5px}
.bth{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:#000;display:grid;place-items:center}
.bth img,.bth video{width:100%;height:100%;object-fit:cover}
.bth .aud{font-size:28px;color:var(--yellow)}
.bd{position:absolute;right:4px;bottom:3px;font-size:11px;font-weight:800;background:rgba(0,0,0,.7);padding:0 6px;border-radius:99px}
.bn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}
.bi .add{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);font-weight:900;cursor:pointer;line-height:1}
.vo{display:grid;gap:8px;border-top:1.5px solid var(--edge);padding-top:10px}
.vo summary{cursor:pointer;margin-bottom:6px}
.vo textarea,.vo select{font-size:14px;min-height:40px;padding:8px 10px}
label.mini{display:grid;gap:4px;font-size:13px;font-weight:800;color:var(--soft)}
label.mini input,label.mini textarea{font-size:14px;min-height:38px;padding:6px 10px}
label.mini input[type=range]{padding:0;border:0;background:none;accent-color:var(--yellow)}
.nle-insp .row{flex-wrap:nowrap}.nle-insp .row>*{flex:1}
.nle-insp h3{font-size:16px}
.swatches{display:flex;gap:6px;align-items:center}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--edge);cursor:pointer}
.sw.on{outline:3px solid var(--yellow);outline-offset:1px}
.swatches input[type=color]{width:36px;height:30px;min-height:0;padding:0;border:0;background:none}
.nle-view{display:grid;gap:10px;align-content:start}
.stage-wrap{display:grid;place-items:center;background:#060B1E;border-radius:6px;height:min(56vh,600px);padding:10px}
.stage{position:relative;height:100%;max-width:100%;background:#000;overflow:hidden;container-type:size}
.stage video,.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .wm{position:absolute;top:2.5cqh;right:2.5cqh;font-size:1.9cqh;color:rgba(255,255,255,.8);background:rgba(0,0,0,.35);padding:.2em .5em;border-radius:4px}
.stage-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:var(--soft);font-size:15px}
.ov{position:absolute;inset:0;pointer-events:none}
.ovt{position:absolute;left:5%;right:5%;text-align:center;font-family:"DejaVu Sans",Verdana,sans-serif;line-height:1.25;text-shadow:0 0 3px #000,0 0 3px #000;white-space:pre-wrap}
.ovt.top{top:10%}.ovt.center{top:50%;transform:translateY(-50%)}.ovt.bottom{bottom:14%}
.ovt.s{font-size:3.85cqw}.ovt.m{font-size:5.56cqw}.ovt.l{font-size:8.33cqw}
.ovt.box span{background:rgba(0,0,0,.55);padding:.08em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ovt.box{text-shadow:none}
.transport{display:flex;gap:8px;align-items:center;justify-content:center}
.transport .play{min-width:64px}
.tc{font-variant-numeric:tabular-nums;color:var(--soft);font-size:14px;min-width:140px;text-align:center}
.nle-tl{padding:10px 12px;gap:8px}
.tl-tools .grow{flex:1}
.tl-tools label.mini{grid-auto-flow:column;align-items:center;gap:8px}
.tl-tools label.mini input{width:140px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;border-radius:4px;background:#0E1736}
.tl{position:relative;min-width:100%;user-select:none;touch-action:none}
.ruler{position:relative;height:24px;margin-left:70px;border-bottom:1px solid var(--edge);cursor:pointer}
.ruler span{position:absolute;top:4px;font-size:11px;color:var(--soft);border-left:1px solid var(--edge);padding-left:3px;height:18px}
.track{display:flex;height:52px;border-bottom:1px solid var(--edge)}
.track[data-track="text"],.track[data-track="voice"],.track[data-track="music"]{height:38px}
.tlab{position:sticky;left:0;z-index:3;flex:none;width:70px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--soft);background:#0E1736;border-right:1px solid var(--edge)}
.lane{position:relative;flex:1;cursor:pointer}
.lane.over{background:rgba(255,194,14,.12)}
.blk{position:absolute;top:4px;bottom:4px;border-radius:4px;overflow:hidden;display:flex;align-items:center;cursor:grab;border:2px solid transparent;font-size:12px;color:#fff}
.blk.clip{background:var(--blue)}.blk.text{background:var(--yellow);color:var(--ink)}.blk.voice{background:var(--green)}.blk.music{background:var(--red)}
.blk.on{border-color:#fff;box-shadow:0 0 0 2px var(--yellow)}
.blk.miss{background:repeating-linear-gradient(45deg,#5c1020 0 8px,#3a0a15 8px 16px)}
.blk.dragging{opacity:.75;z-index:5;cursor:grabbing}
.blk .bl{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:0 10px;height:100%;pointer-events:none}
.blk .bl img,.blk .bl video{height:100%;width:auto;max-width:50%;object-fit:cover;margin-left:-10px}
.blk em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.eh{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2}
.eh.l{left:0}.eh.r{right:0}
.blk:hover .eh,.blk.on .eh{background:rgba(255,255,255,.35)}
.ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:4;pointer-events:none;margin-left:-1px}
.ph span{position:absolute;top:0;left:-6px;width:14px;height:14px;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%)}
.tl-help{margin:0}
.nle-job video{max-height:50vh}
.nle .prog{background:#0E1736;border-color:var(--edge)}
.nle .err{color:#FF8FA3}