/* Splat Studio's styles, one sheet for the whole page.

   affine/ is this app narrowed for a client rather than a second app, so it
   wears the same clothes -- from its own copy of this sheet, so that folder
   publishes on its own. A rule meant for both pages goes in both copies. */

:root{
  --bg:#0e0e10; --panel:#151518; --panel-2:#1c1c21; --line:#2a2a31;
  --fg:#e9e9ee; --dim:#8d8d99; --accent:#e0e0e6;
  /* the one warm colour in the panel: a value that is no longer the default */
  --mod:#e0913c;
}
*{box-sizing:border-box}
/* several containers set display, which would otherwise outrank [hidden] */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg); overflow:hidden;
  font:12px/1.45 ui-sans-serif,-apple-system,"SF Pro Text",Inter,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{display:grid;grid-template-columns:308px 1fr;grid-template-rows:1fr auto;height:100%}
#panel{grid-row:1;grid-column:1}
#view{grid-row:1;grid-column:2}

/* ---------- collapsible chrome ----------
   The layout is a grid, so collapsing is a class on <body>: the column and
   the row fold on their own and the viewport takes the space. */
body.panel-off #app{grid-template-columns:0 1fr}
body.panel-off #panel{display:none}
body.ui-off #app{grid-template-columns:0 1fr}
body.ui-off #panel, body.ui-off #timeline, body.ui-off #viewtop,
body.ui-off #viewfoot, body.ui-off #views, body.ui-off #panelshow{display:none!important}

/* ---------- panel ---------- */
#panel{
  background:var(--panel); border-right:1px solid var(--line); min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
}
#panel::-webkit-scrollbar{width:9px}
#panel::-webkit-scrollbar-thumb{background:#303039;border-radius:9px;border:3px solid var(--panel)}
.brand{
  padding:14px 16px 12px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:8px;
}
.brand b{font-size:12.5px;letter-spacing:.02em;font-weight:600}
.brand .chev{
  margin-left:auto;background:transparent;border:0;color:#5b5b68;cursor:pointer;
  font:inherit;font-size:12px;line-height:1;padding:3px 5px;border-radius:4px;
}
.brand .chev:hover{color:var(--fg);background:#26262e}
.brand span{color:var(--dim);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

details.sec{border-bottom:1px solid var(--line)}
details.sec>summary{
  list-style:none; cursor:pointer; padding:10px 16px; gap:8px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:center; user-select:none;
}
details.sec>summary>span{margin-right:auto}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"+";font-size:13px;color:#5b5b68;width:9px;text-align:center}
details.sec[open]>summary::after{content:"–"}
details.sec>summary:hover{color:var(--fg)}
.body{padding:2px 16px 14px}

/* every section explains itself behind this, rather than in front of it */
.qbtn{
  width:15px;height:15px;flex:0 0 15px;padding:0;display:grid;place-items:center;
  background:transparent;border:1px solid #34343e;border-radius:50%;
  color:#5b5b68;font:inherit;font-size:9px;line-height:1;cursor:pointer;
}
.qbtn:hover{color:var(--fg);border-color:#4a4a58}
.qbtn.on{background:#33333d;border-color:#4a4a58;color:var(--fg)}

/* an effect section can be switched off to see the scene without it */
.eye{
  width:17px;height:15px;flex:0 0 17px;padding:0;display:grid;place-items:center;
  background:transparent;border:0;color:#5b5b68;cursor:pointer;
}
.eye svg{display:block;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.eye:hover{color:var(--fg)}
.eye.off{color:var(--mod)}
.eye .slash{display:none}
.eye.off .slash{display:block}
.eye.off .pupil{display:none}
/* off is shown, not hidden: the rows stay put and stay settable, so you can
   keep grading against the ungraded picture and switch back to see it land */
details.sec.bypassed>summary>span{opacity:.45}
details.sec.bypassed .body{opacity:.42}
.help{
  margin-top:12px;padding:9px 11px;border-radius:6px;
  background:#191920;border:1px solid var(--line);
}
.help .hint{margin:0}
.help .hint + .hint{margin-top:9px}

.row{display:flex;align-items:center;gap:8px;margin:9px 0}
.row>label{flex:0 0 70px;color:var(--dim);font-size:11px;position:relative}
/* A row away from its default says so in its label, and offers the way back
   on hover. The button lives inside the label -- a fixed-width box -- so it
   can appear and vanish without ever moving the slider under your cursor. */
.row.mod>label{color:var(--mod)}
/* a <span>, not a <button>: a labelable element in here would make the whole
   label activate it, and a stray click on "Exposure" must not reset it */
.rev{
  /* out into the row's gap, so even the longest label keeps its last letter */
  position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;display:none;place-items:center;
  background:var(--panel);border:1px solid #3a3a45;border-radius:50%;
  color:var(--mod);font-size:10px;line-height:1;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .1s;
}
.row.mod>label>.rev{display:grid}
.row.mod:hover>label>.rev,
.row.mod>label>.rev:focus-visible{opacity:1;pointer-events:auto}
.rev:hover{border-color:var(--mod);background:#2c2118}
.rev:focus-visible{outline:1px solid var(--mod);outline-offset:1px}
.row.textrow{margin:0 0 6px}

/* keyframe diamond: dim = no track, outlined = track exists, filled = key here */
.kf{
  flex:0 0 15px;width:15px;height:15px;padding:0;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;border-radius:3px;
}
.kf svg{fill:none;stroke:#4a4a56;stroke-width:1.4}
.kf:hover{background:#26262e}
.kf:hover svg{stroke:#9a9aa8}
.kf.has svg{stroke:#8f8fa0}
.kf.on svg{fill:var(--fg);stroke:var(--fg)}
.kf.small{flex:0 0 13px;width:13px;height:13px}
.row>.ctl{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.num{
  /* min-width:auto would floor a form control at its intrinsic ~136px */
  flex:0 0 54px;width:54px;min-width:0;
  text-align:right;font-variant-numeric:tabular-nums;
  color:var(--fg);font-size:11px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:4px;padding:3px 5px;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;width:auto;min-width:0;
  height:16px;background:transparent;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#34343e;border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--accent);margin-top:-4.5px;border:0;cursor:pointer;
}
input[type=range]:active::-webkit-slider-thumb{background:#fff}

textarea,select,input[type=text],input[type=number]{
  width:100%;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:5px;padding:7px 8px;
  font:inherit;outline:none;
}
textarea{resize:vertical;min-height:56px;line-height:1.35;letter-spacing:.01em}
textarea:focus,select:focus,input:focus{border-color:#4a4a58}
select{cursor:pointer;appearance:none;background-image:none;padding-right:8px}

.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:2px;gap:2px;width:100%}
.seg button{
  flex:1;background:transparent;border:0;border-radius:3px;color:var(--dim);
  font:inherit;font-size:10.5px;padding:4px 2px;cursor:pointer;white-space:nowrap;
}
.seg button[aria-pressed=true]{background:#33333d;color:var(--fg)}
.seg button:hover{color:var(--fg)}
/* a seg whose buttons are independent switches rather than one choice: on
   reads as an action you have taken, not as the option you picked */
.seg[data-multi] button[aria-pressed=true]{background:rgba(255,115,30,.22);color:#ffc79a}

/* the colour-mixer picker: the same segmented control, reading as swatches */
.seg.swatch button{position:relative;padding:3px 0;display:grid;place-items:center}
.seg.swatch i{
  display:block;width:100%;height:12px;border-radius:2px;background:var(--sw);
  opacity:.5;transition:opacity .12s;
}
.seg.swatch button:hover i{opacity:.8}
.seg.swatch button[aria-pressed=true] i{opacity:1;box-shadow:0 0 0 1px #0e0e10,0 0 0 2px var(--fg)}
/* a band holding a non-default setting keeps a mark even while unselected */
.seg.swatch button.mod i{opacity:1}
.seg.swatch button.mod::after{
  content:"";position:absolute;top:50%;left:50%;width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#0e0e10;
}

input[type=color]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:5px;cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}

.btn{
  width:100%;background:var(--panel-2);color:var(--fg);border:1px solid var(--line);
  border-radius:5px;padding:8px;font:inherit;cursor:pointer;
}
.btn:hover{background:#26262e;border-color:#3b3b46}
.btn.primary{background:var(--fg);color:#0e0e10;border-color:var(--fg);font-weight:600}
.btn.primary:hover{background:#fff}
.btns{display:flex;gap:8px;margin-top:10px}

.hint{color:#6a6a76;font-size:10.5px;margin:8px 0 0;line-height:1.4}
.hint b{color:#8d8d99;font-weight:600}

/* direction presets: nudge the heading/pitch sliders to a cardinal axis */
.dirbtns{display:flex;gap:3px;flex:1;min-width:0}
.dirbtns button{
  flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  color:var(--dim);font:inherit;font-size:12px;line-height:1;padding:4px 0;cursor:pointer;
}
.dirbtns button:hover{color:var(--fg);background:#26262e;border-color:#3b3b46}
.subhead{
  margin:16px 0 2px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.drop{
  border:1px dashed #3a3a45;border-radius:6px;padding:10px;text-align:center;
  color:var(--dim);font-size:10.5px;cursor:pointer;
}
.drop.over{border-color:var(--fg);color:var(--fg);background:#20202a}
.drop.sub{margin-top:8px;padding:7px 10px}

.imgprev{display:flex;align-items:center;gap:10px;margin-top:10px}
.imgprev img{
  width:52px;height:52px;object-fit:contain;border-radius:5px;border:1px solid var(--line);
  /* checkerboard so transparent icons read as transparent */
  background-color:#1c1c21;
  background-image:linear-gradient(45deg,#26262e 25%,transparent 25%,transparent 75%,#26262e 75%),
                   linear-gradient(45deg,#26262e 25%,transparent 25%,transparent 75%,#26262e 75%);
  background-size:10px 10px;background-position:0 0,5px 5px;
}
.imgmeta{min-width:0;display:flex;flex-direction:column;gap:2px}
.imgmeta b{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgmeta span{color:#6a6a76;font-size:10.5px;font-variant-numeric:tabular-nums}

/* a row whose effect is switched off elsewhere -- still settable, just quiet */
.row.dimmed{opacity:.42}

/* ---------- edit mode ---------- */
#viewtop .modebar .vseg button{padding:4px 14px;letter-spacing:.03em}
body.edit-on #viewtop .modebar .vseg button[aria-pressed=true]{background:#5a3312;color:#ffc79a}

#editovl{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;
}
/* floating tool strip, so the tools are under the cursor rather than
   across the window in the panel */
#edittools{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:3px;padding:4px;
  background:rgba(20,20,24,.74);border:1px solid rgba(255,255,255,.14);
  border-radius:8px;backdrop-filter:blur(8px);
}
#edittools button{
  width:30px;height:30px;display:grid;place-items:center;padding:0;
  background:transparent;border:0;border-radius:5px;color:#9a9aa8;cursor:pointer;
}
#edittools button svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
#edittools button:hover{background:rgba(255,255,255,.08);color:#e9e9ee}
#edittools button.on{background:rgba(255,115,30,.22);color:#ffc79a}
#edittools button:disabled{opacity:.32;cursor:default;background:transparent}
#edittools .edsep{height:1px;background:rgba(255,255,255,.12);margin:2px 3px}
#edittools #edtdel:hover:not(:disabled){background:rgba(255,90,90,.2);color:#ff9a9a}
#editnote{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;
  background:rgba(20,20,24,.86);border:1px solid rgba(255,255,255,.16);
  color:#ffc79a;border-radius:6px;padding:6px 11px;font-size:10.5px;
  backdrop-filter:blur(8px);pointer-events:none;
}
body.ui-off #edittools, body.ui-off #editnote{display:none!important}

#sec-edit .btns{margin-top:8px}
#sec-edit .btn:disabled{opacity:.35;cursor:default}
#sec-edit .btn:disabled:hover{background:var(--panel-2);border-color:var(--line)}
#sec-edit .btn.warn:hover:not(:disabled){background:#3a1d20;border-color:#6b2a2e;color:#ff9a9a}
#sec-edit .btn.mini[aria-pressed=true]{background:rgba(255,115,30,.22);border-color:#7a4418;color:#ffc79a}
#editstat{
  color:#8f8fa0;font-variant-numeric:tabular-nums;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);
}

/* ---------- viewport ---------- */
#view{position:relative;min-width:0;min-height:0}
#gl{display:block;width:100%;height:100%}
/* ---------- the bottom-left instrument stack ----------
   What is on screen, how fast it is drawing, and how to fly it -- one column
   in one corner, so the small print reads as small print instead of as two
   opposite corners of chrome. The bottom right is left free for the views. */
#viewfoot{
  position:absolute;left:14px;bottom:12px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  pointer-events:none;
}
#hudline{display:flex;align-items:baseline;gap:9px}
#hud{
  color:#9a9aa6;font-size:10.5px;font-variant-numeric:tabular-nums;
  letter-spacing:.03em;text-shadow:0 1px 2px rgba(0,0,0,.25);
}
/* The frame rate is a separate instrument from the splat count, so it is
   coloured on its own scale rather than inheriting the line's. */
#fps{
  font-size:10.5px;font-variant-numeric:tabular-nums;letter-spacing:.03em;
  color:#7e7e8c;text-shadow:0 1px 2px rgba(0,0,0,.25);
}
#fps.warn{color:#d59a44}
#fps.bad{color:#e0665f}
#fps.idle{opacity:.45}                 /* nothing has drawn lately: a stale reading */
#fps:empty{display:none}
#keys{
  color:#9a9aa6;font-size:10px;letter-spacing:.04em;opacity:.62;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
#keys b{font-weight:600;color:inherit}
#viewfoot.dark #hud, #viewfoot.dark #keys{color:#5c5c68;text-shadow:none}
#viewfoot.dark #fps{color:#6d6d7a;text-shadow:none}

/* ---------- saved views ----------
   A view is not a setting, it is a place you keep coming back to, so it
   lives over the scene it frames rather than as another row in the panel.
   Collapsed it is one word; opened it is the list, and nothing else moves. */
#views{
  position:absolute;right:14px;bottom:12px;z-index:4;width:176px;
  background:rgba(20,20,24,.72);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;backdrop-filter:blur(8px);overflow:hidden;
  font-size:10.5px;color:#d8d8e0;
}
#views .vhead{display:flex;align-items:stretch}
#views .vhead button{
  background:transparent;border:0;color:#9a9aa8;font:inherit;font-size:10.5px;
  cursor:pointer;padding:6px 9px;display:flex;align-items:center;gap:6px;
}
#views .vhead button:hover{background:rgba(255,255,255,.07);color:#e9e9ee}
#viewstog{flex:1;text-align:left}
#viewstog .chevron{
  width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .12s;
}
#views.open #viewstog .chevron{transform:rotate(-135deg) translate(-1px,-1px)}
#viewsn{font-style:normal;color:#6f6f7c;font-variant-numeric:tabular-nums}
#viewsn:empty{display:none}
#viewsadd{font-size:14px!important;line-height:1;padding:6px 10px!important;color:#b9b9c6!important}
#viewsadd:hover{color:#ffc79a!important;background:rgba(255,115,30,.18)!important}
#viewslist{display:none;border-top:1px solid rgba(255,255,255,.1);max-height:min(46vh,300px);overflow-y:auto}
#views.open #viewslist{display:block}
/* no views: the card is its header and nothing else, not an empty box with a
   rule across the top of it. Two ids, so it outranks the .open rule above. */
#views.open #viewslist:empty{display:none}
#views .vrow{display:flex;align-items:stretch}
#views .vrow:hover{background:rgba(255,255,255,.06)}
#views .vname{
  flex:1;min-width:0;background:transparent;border:0;color:#d2d2dc;font:inherit;font-size:10.5px;
  text-align:left;padding:5px 9px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#views .vname:hover{color:#fff}
#views .vedit{
  flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,140,60,.5);
  color:#fff;font:inherit;font-size:10.5px;padding:4px 8px;margin:1px 2px;border-radius:4px;outline:none;
}
#views .vact{
  background:transparent;border:0;color:#6a6a78;font:inherit;font-size:10.5px;
  cursor:pointer;padding:0 7px;opacity:0;
}
#views .vrow:hover .vact{opacity:1}
#views .vact:hover{color:#e9e9ee}
#views .vdel:hover{color:#ff9a9a}
#panelshow{
  position:absolute;left:12px;top:12px;display:none;
  background:rgba(20,20,24,.72);color:#d8d8e0;border:1px solid rgba(255,255,255,.14);
  border-radius:5px;padding:5px 9px;font:inherit;font-size:10.5px;cursor:pointer;backdrop-filter:blur(8px);
}
#panelshow:hover{background:rgba(40,40,48,.86)}
body.panel-off #panelshow{display:block}
/* top-right viewport chrome: the view buttons, with the app-mode switch under them */
#viewtop{position:absolute;right:12px;top:12px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#viewbtns{display:flex;gap:6px}
#viewbtns button{
  background:rgba(20,20,24,.72);color:#d8d8e0;border:1px solid rgba(255,255,255,.14);
  border-radius:5px;padding:5px 9px;font:inherit;font-size:10.5px;cursor:pointer;backdrop-filter:blur(8px);
}
#viewbtns button:hover{background:rgba(40,40,48,.86)}
#viewbtns button.on{background:rgba(255,115,30,.20);border-color:rgba(255,140,60,.55);color:#ffc79a}
/* segmented control that sits over the viewport rather than in the panel */
#viewtop .vseg{
  display:flex;gap:2px;padding:2px;width:auto;
  background:rgba(20,20,24,.72);border:1px solid rgba(255,255,255,.14);
  border-radius:5px;backdrop-filter:blur(8px);
}
#viewtop .vseg button{
  background:transparent;border:0;border-radius:3px;color:#9a9aa8;
  padding:3px 9px;font-size:10.5px;backdrop-filter:none;
}
#viewtop .vseg button:hover{background:rgba(255,255,255,.07);color:#e9e9ee}
#viewtop .vseg button[aria-pressed=true]{background:#3a3a46;color:#fff}
/* ---------- view navigator ----------
   Six balls on the world axes, turning with the camera: click one to look
   down it, drag the widget to orbit. Plain SVG rather than a corner of the
   canvas -- the labels have to stay crisp, and the balls want a cursor. */
#navgiz{margin-top:2px;cursor:grab;touch-action:none;border-radius:50%;transition:background .12s}
#navgiz:hover{background:rgba(20,20,24,.34)}
#navgiz.drag{cursor:grabbing;background:rgba(20,20,24,.34)}
#navgiz .ball{cursor:pointer}
#navgiz text{
  font:600 11px ui-sans-serif,-apple-system,"SF Pro Text",Inter,sans-serif;
  fill:#101014;text-anchor:middle;dominant-baseline:central;pointer-events:none;
  user-select:none;
}
#pivotbtn{padding:4px 7px;display:grid;place-items:center}
#pivotbtn svg{display:block}

/* the camera-path aid's own status line / empty state */
#pathnote{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;
  background:rgba(20,20,24,.86);border:1px solid rgba(255,255,255,.16);
  color:#a8cdf0;border-radius:6px;padding:6px 11px;font-size:10.5px;
  letter-spacing:.02em;backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap;
}
body.ui-off #pathnote{display:none!important}

/* ---------- frame guide ----------
   A pure-DOM overlay: the box is the render frame, and a huge spread
   box-shadow dims everything outside it without a second element. */
#frameguide{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#frameguide .fgbox{
  position:absolute;box-shadow:0 0 0 9999px rgba(10,10,12,.42);
  outline:1px solid rgba(255,255,255,.34);
}
#frameguide .fgv,#frameguide .fgh{position:absolute;background:rgba(255,255,255,.16);display:none}
#frameguide .fgv{top:0;bottom:0;width:1px}
#frameguide .fgh{left:0;right:0;height:1px}
#frameguide.thirds .fgv,#frameguide.thirds .fgh{display:block}
#frameguide .fglbl{
  position:absolute;left:0;top:-17px;color:#c8c8d4;font-size:9.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
body.ui-off #frameguide{display:none!important}
/* the website mockup draws its own black around the frame, so the guide
   keeps only its outline and thirds there */
#frameguide.solid .fgbox{box-shadow:none}

/* ---------- website mockup ----------
   A page design over the frame, and solid black around it. It never takes
   the pointer: everything goes through to the scene behind. */
#webmock{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#webmock .wmbox{position:absolute;overflow:hidden;box-shadow:0 0 0 9999px #000}
#webmock img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;user-select:none}
.imgprev .btn.mini{margin-left:auto}
body.ui-off #webmock{display:none!important}

#busy{
  position:absolute;inset:0;display:none;place-items:center;
  background:rgba(14,14,16,.45);color:#e9e9ee;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
#busy.on{display:grid}

/* ---------- timeline ---------- */
#timeline{
  grid-column:1/-1;grid-row:2;height:214px;position:relative;
  background:var(--panel);border-top:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;user-select:none;
}
/* collapsed: the transport bar stays, the lanes and the resize grip go.
   !important because the grip writes an inline height. */
#timeline.tl-collapsed{height:auto!important}
#timeline.tl-collapsed .tl-body, #timeline.tl-collapsed .tl-resize{display:none}
#timeline.tl-collapsed .tl-bar{border-bottom:0}
.tl-resize{position:absolute;top:-3px;left:0;right:0;height:7px;cursor:ns-resize;z-index:5}
.tl-resize:hover{background:linear-gradient(180deg,transparent,rgba(255,255,255,.10))}

.tl-bar{
  flex:0 0 36px;display:flex;align-items:center;gap:6px;padding:0 10px;
  border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
}
.tlbtn{
  flex:none;background:var(--panel-2);color:var(--dim);border:1px solid var(--line);
  border-radius:5px;height:23px;min-width:26px;padding:0 7px;font:inherit;font-size:11px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;
}
.tlbtn:hover{background:#26262e;color:var(--fg)}
.tlbtn.wide{min-width:36px}
.tlbtn.text{font-size:10px;letter-spacing:.07em}
.tlbtn.on{background:#33333d;color:var(--fg);border-color:#43434f}
.tlbtn.has{color:#8f8fa0}
.tlbtn.rec{background:#4a1d20;color:#ff8a8a;border-color:#6b2a2e}
.tlbtn.primary{background:var(--fg);color:#0e0e10;border-color:var(--fg);font-weight:600}
.tlbtn.primary:hover{background:#fff;color:#0e0e10}
.tl-time{
  flex:none;font-variant-numeric:tabular-nums;color:var(--fg);font-size:11px;
  padding:0 4px;min-width:112px;
}
.tl-lbl{flex:none;color:var(--dim);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
#timeline .tl-num{
  flex:none;width:50px;min-width:0;height:23px;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:5px;padding:0 5px;font:inherit;font-size:11px;
}
#timeline .tl-sel{
  flex:none;width:auto;height:23px;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:5px;padding:0 5px;font:inherit;font-size:11px;
}
#timeline .tl-sel:disabled{opacity:.4}
.tl-sep{flex:none;width:1px;height:18px;background:var(--line);margin:0 3px}
.tl-grow{flex:1 1 auto}

.tl-body{flex:1 1 auto;display:flex;min-height:0}
.tl-names{
  flex:0 0 152px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);min-height:0;background:var(--panel);
}
.tl-namehead{
  flex:0 0 23px;display:flex;align-items:center;padding:0 10px;
  color:#5f5f6c;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.tl-namelist{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.tl-namelist::-webkit-scrollbar{display:none}
.tl-name{
  height:22px;display:flex;align-items:center;gap:6px;padding:0 8px;
  border-bottom:1px solid #1e1e24;
}
.tl-nametxt{
  flex:1 1 auto;color:var(--dim);font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.tl-x{
  flex:none;background:transparent;border:0;color:#4a4a56;cursor:pointer;
  font-size:10px;padding:2px 3px;border-radius:3px;
}
.tl-x:hover{color:#ff8a8a;background:#2a1a1c}

.tl-lanes{flex:1 1 auto;position:relative;min-width:0;background:#101013;overflow:hidden}
.tl-ruler{
  position:absolute;top:0;left:0;right:0;height:23px;
  border-bottom:1px solid var(--line);cursor:ew-resize;
}
.tl-tick{position:absolute;top:0;bottom:0;width:1px;background:#26262e}
.tl-tick span{
  position:absolute;left:5px;top:5px;color:#5f5f6c;font-size:9.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tl-lanewrap{
  position:absolute;top:23px;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
}
.tl-lanewrap::-webkit-scrollbar{display:none}
.tl-lane{position:relative;height:22px;border-bottom:1px solid #17171c}
.tl-lane:nth-child(even){background:#131317}
.tl-hint{padding:16px 18px;color:#55555f;font-size:11px;line-height:1.6;max-width:560px}

.kseg{position:absolute;top:10px;height:2px;background:#3a3a46;border-radius:2px}
.kseg.hold{background:repeating-linear-gradient(90deg,#3a3a46 0 3px,transparent 3px 6px)}
.kfd{
  position:absolute;top:5px;width:11px;height:11px;margin-left:-5.5px;
  background:#b9b9c6;border:1px solid #16161a;cursor:grab;z-index:2;
  transform:rotate(45deg);border-radius:2px;
}
.kfd:hover{background:#fff}
.kfd.sel{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.28)}
.kfd.hold{background:#8d8d99;border-radius:0}
/* where each swing of the playhead comes to rest -- draggable, with a hit
   area well past the dot itself, since the dot is small on purpose */
.tl-stop{
  position:absolute;bottom:1px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:#e8a04a;box-shadow:0 0 0 2px #101013;z-index:3;
  cursor:ew-resize;
}
.tl-stop::before{content:"";position:absolute;inset:-7px -6px -2px}
.tl-stop:hover,.tl-stop.drag{background:#ffc27a;transform:scale(1.2)}
.tl-stop.sel{background:#fff;box-shadow:0 0 0 2px #e8a04a}
.tl-stop.drag::after{
  content:attr(data-t);position:absolute;bottom:-3px;left:15px;
  background:#e8a04a;color:#16161a;font-size:9.5px;font-weight:600;padding:1px 5px;
  border-radius:3px;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;
}

/* ---------- swing card ----------
   Opens above the transport bar, over the bottom of the viewport. */
.tl-pop{
  position:absolute;bottom:calc(100% + 8px);width:268px;z-index:20;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:11px 12px 10px;box-shadow:0 14px 40px rgba(0,0,0,.5);user-select:none;
}
.tl-pophead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tl-pophead b{flex:1 1 auto;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.tl-pophead .seg{width:96px;flex:none}
.tl-poprow{display:grid;grid-template-columns:70px 1fr 38px;align-items:center;gap:8px;height:24px}
.tl-poprow label{color:var(--dim);font-size:11px}
.tl-popval{text-align:right;font-variant-numeric:tabular-nums;font-size:11px;color:var(--fg)}
.tl-pop.off .tl-poprow{opacity:.45}
.tl-pophand{display:flex;align-items:center;gap:8px;margin-top:6px;color:#e8a04a;font-size:10.5px}
.tl-pophand span{flex:1 1 auto}
.tl-popfoot{display:flex;align-items:flex-end;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.tl-popfoot span{flex:1 1 auto;color:#6c6c78;font-size:10px;line-height:1.45}

.tl-playhead{
  position:absolute;top:0;bottom:0;width:1px;background:#ff5a5a;
  pointer-events:none;z-index:4;margin-left:-0.5px;
}
.tl-playhead::before{
  content:"";position:absolute;top:0;left:-4px;border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;border-top:6px solid #ff5a5a;
}

/* ---------- export dialog ---------- */
.modal{
  position:fixed;inset:0;background:rgba(8,8,10,.62);z-index:50;
  display:grid;place-items:center;backdrop-filter:blur(3px);
}
.modal .card{
  width:330px;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:16px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.modal h3{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.modal .mrow{display:flex;align-items:center;gap:10px;margin:9px 0}
.modal .mrow label{flex:0 0 104px;color:var(--dim);font-size:11px}
.modal .mrow select,.modal .mrow input{
  flex:1;min-width:0;background:var(--panel-2);color:var(--fg);
  border:1px solid var(--line);border-radius:5px;padding:5px 7px;font:inherit;font-size:11px;
}
.minfo{color:#6a6a76;font-size:10.5px;margin:12px 0 8px;font-variant-numeric:tabular-nums}
.mprog{height:3px;background:#26262e;border-radius:3px;overflow:hidden;margin-bottom:8px}
.mprog i{display:block;height:100%;width:0;background:var(--fg);transition:width .12s linear}
.mstatus{color:var(--dim);font-size:10.5px;min-height:14px;font-variant-numeric:tabular-nums}
.mbtns{display:flex;gap:8px;margin-top:14px}

/* ---------- source bar (left panel) ---------- */
.srcbar{
  display:flex;align-items:center;gap:8px;padding:9px 12px 9px 16px;
  border-bottom:1px solid var(--line);background:var(--panel);
}
.srcnow{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.srcnow svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--dim);stroke-width:1.4}
.srcnow b{font-size:11.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcnow i{
  color:#6a6a76;font-style:normal;font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.btn.mini{
  width:auto;flex:none;padding:4px 9px;font-size:10.5px;letter-spacing:.03em;color:var(--dim);
}
.btn.mini:hover{color:var(--fg)}

/* ---------- project bar (left panel) ---------- */
.projbar{background:var(--panel-2)}
.projbar .srcnow b{color:var(--fg)}
.projbar .srcnow i{font-size:10px}
/* a checkbox must not take the flex:1 the dialog gives its other inputs */
.mchk{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:11px;cursor:pointer}
.mchk input{flex:none;width:13px;height:13px;accent-color:var(--fg);margin:0}
#projnote{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;max-width:70%;
  background:rgba(20,20,24,.9);border:1px solid rgba(255,255,255,.16);
  color:#bfe3c4;border-radius:6px;padding:6px 11px;font-size:10.5px;
  backdrop-filter:blur(8px);pointer-events:none;text-align:center;line-height:1.5;
}
body.ui-off #projnote{display:none!important}

/* ---------- source picker modal ---------- */
.modal[hidden]{display:none}
.modal .card.src{width:452px;padding:18px 20px 16px}
.srchead{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.srchead h3{margin:0;flex:1 1 auto}
.xbtn{
  flex:none;background:transparent;border:0;color:#5b5b68;cursor:pointer;
  font-size:12px;line-height:1;padding:2px 4px;border-radius:4px;
}
.xbtn:hover{color:var(--fg);background:#26262e}
.srcsub{margin:0 0 14px;color:#6a6a76;font-size:10.5px}
.srcgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.srctile{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  padding:12px 12px 11px;color:var(--fg);font:inherit;cursor:pointer;
}
.srctile:hover{background:#26262e;border-color:#43434f}
.srctile.over{border-color:var(--fg);background:#20202a}
.srctile svg{width:20px;height:20px;fill:none;stroke:#9a9aa8;stroke-width:1.3}
.srctile:hover svg{stroke:var(--fg)}
.srctile b{font-size:11.5px;font-weight:600;letter-spacing:.01em}
.srctile span{color:#6a6a76;font-size:10.5px;line-height:1.4}
.srctile em{
  font-style:normal;color:#8f8fa0;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
}
.drop.big{padding:34px 16px;font-size:11px}
.srcstep{margin-top:2px}

/* ---------- render modal ---------- */
.modal .card.rnd{width:392px;padding:18px 20px 16px}
.rtabs{display:flex;gap:2px;padding:2px;margin:0 0 14px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px}
.rtabs button{
  flex:1;background:transparent;border:0;border-radius:4px;color:var(--dim);
  font:inherit;font-size:11px;padding:6px 2px;cursor:pointer;
}
.rtabs button:hover{color:var(--fg)}
.rtabs button[aria-pressed=true]{background:#33333d;color:var(--fg)}
.rpane[hidden]{display:none}
.modal .mrow .seg{flex:1;min-width:0}
.modal .mrow .seg button{padding:4px 2px}
.mnote{color:#6a6a76;font-size:10.5px;margin:12px 0 0;line-height:1.45}
.mnote b{color:#8d8d99;font-weight:600}
.mdim{color:#5b5b68;font-size:10.5px;margin:10px 0 0;font-variant-numeric:tabular-nums}