/* «Бичлэг янзлах» — the final edit screen.
 *
 * Three regions and no more: the picture, one settings column, one timeline.
 * CapCut has forty panels; this has the four things a Mongolian dub actually
 * needs after the subtitle work is finished, because the whole promise is
 * «blur → ASHD Kino → хадмал → export in a minute or two».
 *
 * THE OVERLAY LAYER IS PINNED TO THE PICTURE, NOT TO THE BOX. `.fe-layer` is
 * sized in JavaScript to the video's CONTENT rect, so everything inside it can
 * be positioned in percentages and mean the same thing here and in the exported
 * MP4. Nothing in this file may give `.fe-layer` a size of its own.
 */

/* The screen opts into `sw-host`, which makes `.main` a fixed, unscrolling
   viewport-height cell. The editor fills it exactly: the page never scrolls,
   and only the settings column and the timeline scroll inside themselves —
   the picture and the timeline do not move when either does. */
.main.sw-host > #feHost { height: 100%; padding: 10px 14px 12px; }

.fe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.fe-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #14171d;
  border: 1px solid #262b34;
  border-radius: 10px;
}
.fe-head b { font-size: 15px; }
.fe-head .fe-sub { color: #8b94a3; font-size: 12px; }
.fe-grow { flex: 1; }
.fe-warn { color: #f0b352; font-size: 12px; max-width: 460px; }
.fe-back {
  background: #1e232c; color: #d8dee9; border: 1px solid #313846;
  border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.fe-back:hover { background: #262d38; }

.fe-body {
  display: flex;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* ── the picture ─────────────────────────────────────────────────────────── */

.fe-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #05070a;
  border: 1px solid #262b34;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe-stage > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* Sized by JavaScript to the video's content rect. `pointer-events: none` so a
   click lands on the film unless it lands on one of the three objects. */
.fe-layer {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.fe-obj { position: absolute; pointer-events: auto; cursor: move; }
.fe-obj.sel { outline: 1px dashed rgba(120, 190, 255, 0.9); outline-offset: 1px; }
/* «Not on screen at this moment» — the object stays draggable, it just says so.
   Hiding it outright would make the band undraggable exactly when the user is
   trying to change the moment it starts. */
.fe-obj.fe-off { opacity: 0.28; }

.fe-blur {
  /* backdrop-filter, the mask and the opacity are all written by JavaScript
     from the same numbers ffmpeg is given. Nothing here may set them. */
  border: 1px solid rgba(120, 190, 255, 0.28);
}
.fe-blur.sel { border-color: rgba(120, 190, 255, 0.9); }

.fe-h {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: #78beff;
  border: 1px solid #0b1016;
  border-radius: 3px;
  display: none;
  /* Bigger than it looks. A 12px square is a fiddly target with a mouse and an
     impossible one with a finger; the pad extends the hit area without
     extending the mark, so the handle stays a dot and still catches. */
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.001);
}
.fe-obj.sel > .fe-h { display: block; }
.h-nw { left: 0; top: 0; cursor: nwse-resize; }
.h-n  { left: 50%; top: 0; cursor: ns-resize; }
.h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.h-e  { left: 100%; top: 50%; cursor: ew-resize; }
.h-se { left: 100%; top: 100%; cursor: nwse-resize; }
.h-s  { left: 50%; top: 100%; cursor: ns-resize; }
.h-sw { left: 0; top: 100%; cursor: nesw-resize; }
.h-w  { left: 0; top: 50%; cursor: ew-resize; }

.fe-mark {
  white-space: nowrap;
  transform: translate(-50%, -50%);
  user-select: none;
  padding: 2px 6px;
}
.fe-sub {
  white-space: nowrap;
  user-select: none;
  color: #fff;
  /* §2 — A FALLBACK, AND ONLY A FALLBACK. `paintSubtitle` sets this element's
     `fontFamily` to the exact bundled face the ASS `Fontname` will name, every
     frame. What is left here is what the first paint uses before the settings
     have arrived, and it is deliberately a metric-compatible sans rather than
     something that would reflow the moment the real face lands.

     This used to say `Arial` and mean it: Arial is what the browser drew, and
     it is what neither the PROD media worker (Liberation Sans) nor the rented
     GPU pod (DejaVu Sans) had — so the preview and the two exports were three
     different faces with three different line-break widths. */
  font-family: "Noto Sans", Arial, "Liberation Sans", sans-serif;
  max-width: 140%;
}
.fe-subline { display: inline-block; }
/* The written-into node, inside the object that carries the handles. It must
   not shrink the box it is measured by, so no padding of its own. */
.fe-text { display: block; }

/* ── the settings column ─────────────────────────────────────────────────── */

.fe-panel {
  width: 300px;
  flex: none;
  background: #14171d;
  border: 1px solid #262b34;
  border-radius: 10px;
  padding: 10px;
  overflow-y: auto;
}
.fe-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.fe-tab {
  flex: 1; padding: 6px 4px; font-size: 12px; cursor: pointer;
  background: #1a1f27; color: #97a1b0; border: 1px solid #272d37; border-radius: 7px;
}
.fe-tab.on { background: #24405c; color: #dceaff; border-color: #35618c; }
.fe-group { display: flex; flex-direction: column; gap: 9px; }
.fe-ctl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #97a1b0; }
.fe-ctl > span { display: flex; justify-content: space-between; gap: 8px; }
.fe-ctl b { color: #d8dee9; font-weight: 600; }
.fe-ctl input[type="range"] { width: 100%; }
.fe-ctl input[type="text"], .fe-ctl select {
  background: #10141a; color: #e5eaf2; border: 1px solid #2b3240;
  border-radius: 6px; padding: 5px 7px; font-size: 13px;
}
.fe-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #b9c2ce; }
.fe-span { display: flex; gap: 8px; }
.fe-span label { flex: 1; font-size: 11px; color: #8b94a3; display: flex; flex-direction: column; gap: 3px; }
.fe-span input {
  background: #10141a; color: #e5eaf2; border: 1px solid #2b3240;
  border-radius: 6px; padding: 4px 6px; font-size: 12px; width: 100%;
}
.fe-hint { font-size: 11px; color: #78818f; line-height: 1.45; margin: 2px 0 0; }
.fe-presets { display: flex; gap: 6px; }
.fe-preset {
  flex: 1; padding: 7px 4px; font-size: 12px; cursor: pointer;
  background: #1a1f27; color: #97a1b0; border: 1px solid #272d37; border-radius: 7px;
}
.fe-preset.on { background: #2a4a34; color: #d9f2e2; border-color: #3d7050; }
.fe-mini {
  background: none; border: none; color: #78beff; cursor: pointer;
  font-size: 11px; padding: 0; text-decoration: underline;
}
.fe-export {
  margin-top: 4px; padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #2f6ea8; color: #fff; border: none; border-radius: 8px;
}
.fe-export:disabled { background: #33414f; color: #8a94a2; cursor: default; }
.fe-prog { height: 6px; background: #10141a; border-radius: 4px; overflow: hidden; }
.fe-prog > div { height: 100%; width: 0; background: #4b9ae0; transition: width .25s linear; }
.fe-msg { font-size: 12px; color: #b9c2ce; min-height: 16px; }
.fe-dl {
  display: block; text-align: center; padding: 8px; border-radius: 8px;
  background: #2a4a34; color: #d9f2e2; text-decoration: none; font-size: 13px;
}

/* ── transport + timeline ────────────────────────────────────────────────── */

.fe-transport {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 10px; background: #14171d;
  border: 1px solid #262b34; border-radius: 10px;
}
.fe-play {
  background: #1e232c; color: #d8dee9; border: 1px solid #313846;
  border-radius: 7px; padding: 4px 12px; cursor: pointer;
}
.fe-time { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #97a1b0; }
.fe-zoom { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8b94a3; }
.fe-speed { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8b94a3; }
.fe-speed select {
  background: #1e232c; color: #d8dee9; border: 1px solid #313846;
  border-radius: 6px; padding: 3px 6px; font-size: 11px;
}

/* ── the cue under the playhead ──────────────────────────────────────────── */
/* Between the stage and the transport, so the line being checked and the line
   being read are within a few pixels of each other.

   ITS HEIGHT IS FIXED, and that is the requirement rather than a detail.
   Everything below this bar — the transport, the four tracks, the playhead —
   is pushed by whatever it does, so a bar that was one row in a gap and three
   rows on a cue made the whole lower half of the editor jump on every cue
   boundary during ordinary playback. Head plus body, always, with the row
   heights pinned so no state can be taller than another. */
/* IT ENDS WHERE THE PICTURE ENDS, and that is not decoration.
   `#stJobs` is fixed to the bottom-right corner and this screen deliberately
   lifts it, so it hangs over the right end of anything that spans the full
   width. Measured on production: the card covered «Засах» completely —
   `elementFromPoint` at the button's centre returned `.ajc-note`, and the
   button could not be clicked at all. The bar describes what is ON the picture,
   so it is as wide as the picture: 300px of settings column plus the 10px gap
   `.fe-body` puts beside it. */
.fe-cuebar { flex: none; margin-right: 310px; }
.fe-cue {
  display: flex; flex-direction: column; gap: 6px;
  padding: 7px 10px; background: #14171d;
  border: 1px solid #262b34; border-radius: 10px;
  box-sizing: border-box;
}
.fe-cue-editing { border-color: #4b5bd7; }
.fe-cue-head {
  display: flex; align-items: center; gap: 10px;
  height: 17px; font-size: 12px; color: #d8dee9;
}
.fe-cue-no {
  font-family: ui-monospace, Consolas, monospace; color: #97a1b0;
  min-width: 34px;
}
.fe-cue-time {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #7d8695;
  white-space: nowrap;
}
/* The words and the button on ONE row — asked for, and it is also what takes
   the empty third row out of the box. */
.fe-cue-body { display: flex; align-items: stretch; gap: 10px; height: 46px; }
.fe-cue-text {
  flex: 1; min-width: 0; margin: 0;
  font-size: 14px; line-height: 1.45; color: #eef1f6;
  white-space: pre-wrap; overflow: auto;
}
.fe-cue-empty { color: #7d8695; font-size: 12px; line-height: 46px; }
.fe-cue-err {
  font-size: 11px; color: #ef8a8a; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%;
}
.fe-cue-input {
  flex: 1; min-width: 0; height: 46px; resize: none;
  box-sizing: border-box;
  background: #0f1218; color: #eef1f6; border: 1px solid #313846;
  border-radius: 7px; padding: 5px 8px;
  font: inherit; font-size: 14px; line-height: 1.45;
}
/* A narrow column beside the text, so one button or two take the same room. */
.fe-cue-side {
  flex: none; width: 96px; display: flex; flex-direction: column;
  justify-content: center; gap: 4px;
}
.fe-cue-btn {
  background: #1e232c; color: #d8dee9; border: 1px solid #313846;
  border-radius: 7px; padding: 3px 10px; cursor: pointer; font-size: 12px;
  width: 100%; box-sizing: border-box;
}
.fe-cue-btn.ok { background: #3b49b5; border-color: #4b5bd7; color: #fff; }
.fe-cue-btn[disabled] { opacity: .55; cursor: default; }

.fe-tlwrap {
  display: flex;
  background: #14171d;
  border: 1px solid #262b34;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}
.fe-labels {
  width: 108px; flex: none; padding: 6px 0;
  border-right: 1px solid #262b34; background: #11141a;
}
.fe-labels span {
  display: flex; align-items: center; height: 26px; padding: 0 10px;
  font-size: 11px; color: #8b94a3;
}
/* The playhead is an absolutely-positioned child of the SCROLL container, so it
   travels with the tracks when the timeline is zoomed and scrolled. */
.fe-tlscroll { position: relative; flex: 1; min-width: 0; overflow-x: auto; padding: 6px 0; }
.fe-tl { position: relative; height: 104px; }
.fe-track { position: relative; height: 26px; }
.fe-clip {
  position: absolute; top: 3px; height: 20px; border-radius: 4px; display: block;
}
.fe-clip.video { background: #2c3542; }
.fe-clip.blur { background: #35618c; cursor: ew-resize; }
.fe-clip.mark { background: #6a5a2f; }
.fe-clip.cue { background: #3d7050; }
.fe-clip.cue.sel { background: #59a677; outline: 1px solid #a8e6c0; }
.fe-grip {
  position: absolute; top: 0; width: 7px; height: 100%;
  background: rgba(255, 255, 255, 0.35); cursor: ew-resize;
}
.fe-grip.l { left: 0; border-radius: 4px 0 0 4px; }
.fe-grip.r { right: 0; border-radius: 0 4px 4px 0; }
.fe-playhead {
  position: absolute; top: 6px; width: 2px; height: 104px;
  background: #ff5f56; pointer-events: none;
}

@media (max-width: 1100px) {
  .fe-body { flex-direction: column; }
  .fe-panel { width: auto; max-height: 260px; }
}

/* THE JOB CARD MUST NOT SIT ON THE TIMELINE.
   `#stJobs` is fixed to the bottom-right corner of the window, which on every
   other screen is empty page. Here it is the end of the film: a finished-job
   card covered the last quarter of every track, and a track under a card is a
   track that cannot be dragged. Lifted only while this screen is open — the
   class is added and removed by the editor itself — so no other screen's
   layout changes. The offset clears `.fe-tlwrap` (104px of tracks, 12px of
   padding, a border) plus the workspace's own bottom padding. */
/* `!important` because `#stJobs` carries its corner in an INLINE style — it is
   built in JavaScript with `style.cssText`, and an inline declaration outranks
   any selector a stylesheet can write. Without it this rule is correct, loaded,
   and has no effect, which is how the first attempt shipped a card still
   sitting on the tracks. */
body.fe-open #stJobs { bottom: 150px !important; }

/* ── the text objects' own boxes ────────────────────────────────────────────
   A line of text has no width the user set, so its handles do the two things
   that ARE honest on it: a corner scales the type, and the subtitle's sides set
   how far the line may run before it wraps. The box is drawn only when the
   object is selected — see `.fe-playing` below for the other half. */
.fe-mark.sel, .fe-sub.sel {
  outline: 1px dashed rgba(120, 190, 255, 0.9);
  outline-offset: 3px;
}
.fe-label {
  position: absolute;
  left: 0; top: -20px;
  font: 500 10px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .04em;
  color: #9cc9f5;
  background: rgba(10, 14, 20, 0.75);
  border-radius: 3px;
  padding: 3px 5px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}
.fe-obj.sel > .fe-label { display: block; }

/* ── magnetic guides ────────────────────────────────────────────────────────
   Written only while a pointer is down and cleared on release, so there is no
   state to get stuck on. Never interactive: a guide the cursor can catch is a
   guide that steals the drag it exists to help. */
.fe-guides { position: absolute; inset: 0; pointer-events: none; }
.fe-guide { position: absolute; background: #ff5f8f; }
.fe-guide.v { top: -2%; bottom: -2%; width: 1px; margin-left: -0.5px; }
.fe-guide.h { left: -2%; right: -2%; height: 1px; margin-top: -0.5px; }

/* ── PLAY MEANS PREVIEW ─────────────────────────────────────────────────────
   §3 — while the film runs the picture is the whole of it: no bounding box, no
   handle, no guide, no outline. One rule at the root rather than one per
   object, so a layer added later cannot forget: everything the editor draws for
   itself carries `data-chrome`, and this turns all of it off at once.

   `pointer-events: none` is part of the same idea. A box that is invisible but
   still catches the mouse is worse than a visible one — the user clicks the
   film to pause and drags the watermark instead. */
.fe.fe-playing [data-chrome] { display: none !important; }
.fe.fe-playing .fe-obj { outline: none !important; pointer-events: none; }
.fe.fe-playing .fe-blur { border-color: transparent; }

/* ── numeric entry beside every slider ──────────────────────────────────── */
.fe-pair { display: flex; align-items: center; gap: 7px; }
.fe-pair input[type="range"] { flex: 1; min-width: 0; }
.fe-numin {
  width: 66px; flex: none;
  background: #10141a; color: #e5eaf2; border: 1px solid #2b3240;
  border-radius: 6px; padding: 3px 5px; font-size: 12px;
  font-family: ui-monospace, Consolas, monospace;
}
.fe-numin:focus { outline: 1px solid #35618c; border-color: #35618c; }
.fe-unit { color: #6f7886; font-style: normal; font-size: 11px; }
.fe-note {
  font-size: 11px; line-height: 1.5; color: #b9c2ce;
  background: #1a1f27; border: 1px solid #272d37; border-radius: 7px;
  padding: 7px 8px;
}
.fe-note .fe-mini { display: block; margin-top: 5px; }

/* ══ §1 — where the export's time went, and what really ran ═══════════════ */
/*
 * The three blocks below exist because «GPU export · 4 мин» was every word the
 * screen had for an export, and none of them answered «why was it not faster».
 * `.fe-exec` is the executor, `.fe-phases` is the measured breakdown, and the
 * pair is what makes a slow LINK look like a slow link rather than a slow card.
 */
.fe-stagerow {
  font-size: 11px; color: #7d8695; min-height: 14px; letter-spacing: .02em;
}
.fe-exec {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.fe-exec.gpu  { background: #10361f; color: #6ee39a; border: 1px solid #1d5c36; }
.fe-exec.cpu  { background: #3a2a12; color: #f0b866; border: 1px solid #5e441c; }
.fe-exec.copy { background: #12293a; color: #6cc3ef; border: 1px solid #1d4a68; }
.fe-execnote {
  display: block; margin-top: 4px; font-size: 11px; color: #8b94a3;
  font-family: ui-monospace, Consolas, monospace; line-height: 1.5;
}
.fe-execnote.warn { color: #f0b866; font-family: inherit; }

.fe-phases { margin-top: 14px; border-top: 1px solid #1c222c; padding-top: 10px; }
.fe-phases h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; color: #97a1b0;
  text-transform: uppercase; letter-spacing: .06em;
}
.fe-phase {
  display: grid; grid-template-columns: 108px 1fr 62px; align-items: center;
  gap: 8px; font-size: 11px; color: #97a1b0; padding: 2px 0;
}
.fe-phase.top { color: #d8dee7; font-weight: 600; }
.fe-phname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-phbar { height: 5px; background: #10141a; border-radius: 3px; overflow: hidden; }
.fe-phbar > i { display: block; height: 100%; background: #3f5f7f; }
.fe-phase.top .fe-phbar > i { background: #4b9ae0; }
.fe-phsec { text-align: right; font-family: ui-monospace, Consolas, monospace; }

/* §2 — the font picker's own sample line, drawn in the face that is selected.
   Sized so Ө and Ү are unmistakable rather than decorative. */
.fe-sample {
  margin: 6px 0 2px; padding: 8px 10px; border-radius: 6px;
  background: #0d1116; border: 1px solid #1c222c;
  color: #e6ebf2; font-size: 15px; line-height: 1.45;
}
.fe-fontpick option { background: #12171e; color: #e6ebf2; }

/* ══ §3 — the timeline, at any scale ══════════════════════════════════════ */
/*
 * The tracks used to be four coloured bars whose only interaction was a click
 * to seek and a grip on the blur band. Everything below is what turns them into
 * something a subtitle can be timed on: a ruler that follows the scale, cue
 * blocks with edges you can take hold of, and a readout that says what the
 * gesture is doing while it is doing it.
 *
 * The whole thing shares ONE coordinate — `pixelsPerSecond` in the JavaScript —
 * so the ruler, the clips and the playhead are laid out by the same arithmetic
 * and cannot drift apart at high zoom the way a fraction-of-width layout did.
 */

/* The ruler sits above the tracks and inside the scroller, so it moves with
   them. 22px, matched by the spacer in the label column. */
.fe-ruler {
  position: relative; height: 22px; margin-bottom: 2px;
  border-bottom: 1px solid #262b34; cursor: pointer;
}
.fe-rulerlabel {
  height: 24px !important; font-size: 10px !important;
  color: #5f6773 !important; text-transform: uppercase; letter-spacing: .08em;
}
.fe-tick {
  position: absolute; bottom: 0; width: 1px; height: 5px;
  background: #333c48;
}
.fe-tick.major { height: 10px; background: #5a6675; }
.fe-tick > span {
  position: absolute; bottom: 6px; left: 3px; white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: #6f7885;
}
.fe-tick.major > span { bottom: 11px; color: #98a2b0; }
.fe-tl { height: 104px; }

/* §3.C — a cue is a block with two edges. The handles are always in the DOM and
   revealed on hover or selection: rendering them only for the selected cue
   meant every drag needed a click first. 7px is the smallest target that can be
   hit reliably with a mouse, and it stays 7px at every zoom because it is
   chrome, not film. */
.fe-clip.cue {
  overflow: hidden; cursor: grab;
  transition: background .12s ease;
}
.fe-clip.cue:active { cursor: grabbing; }
.fe-clip.cue:hover { background: #4a8862; }
/* A span the user timed by hand. §3.G — marked so it is visible which cues are
   theirs, and so the protection from the automatic passes is not invisible. */
.fe-clip.cue.manual { box-shadow: inset 0 0 0 1px #d8b45c; }
.fe-clabel {
  display: block; padding: 0 9px; line-height: 20px;
  font-size: 10px; color: #d9f0e2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.fe-cgrip {
  position: absolute; top: 0; width: 7px; height: 100%; z-index: 2;
  background: rgba(255, 255, 255, 0.85); cursor: ew-resize;
  opacity: 0; transition: opacity .1s ease;
}
.fe-clip.cue:hover .fe-cgrip, .fe-clip.cue.sel .fe-cgrip { opacity: .9; }
.fe-cgrip.l { left: 0; border-radius: 4px 0 0 4px; }
.fe-cgrip.r { right: 0; border-radius: 0 4px 4px 0; }
/* A cue too narrow to hold a handle on each side still gets one: below about
   16px the two would overlap and neither could be hit. */
.fe-clip.cue { min-width: 3px; }

/* §3.C — the live readout, pinned inside the scroller's viewport so it is
   readable wherever in the film the drag is happening. */
.fe-tltip {
  position: absolute; top: 26px; z-index: 6; pointer-events: none;
  padding: 4px 9px; border-radius: 5px;
  background: #0b0e13ee; border: 1px solid #303845;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #dfe6ee;
  white-space: nowrap;
}
.fe-tltip b {
  color: #7d8695; font-weight: 500; margin-right: 2px; margin-left: 6px;
}
.fe-tltip b:first-child { margin-left: 0; }

/* The playhead spans the ruler as well as the tracks, so a timecode on the
   ruler and the frame under the head are visibly the same instant. */
.fe-playhead { top: 6px; height: 128px; }

.fe-zoom { gap: 4px; }
.fe-zoom input[type="range"] { width: 132px; }
.fe-zoomfit {
  background: #1c2129; border: 1px solid #2c3441; color: #97a1b0;
  border-radius: 4px; width: 22px; height: 20px; cursor: pointer; font-size: 11px;
  line-height: 1; padding: 0;
}
.fe-zoomfit:hover { background: #242b35; color: #d8dee7; }
.fe-zoomnote {
  font-style: normal; font-size: 10px; color: #6b7381; min-width: 88px;
  font-family: ui-monospace, Consolas, monospace;
}

/* §3.G — a cue whose timing the user set by hand, and the way back from it. */
.fe-note.manual {
  border-left: 2px solid #d8b45c;
  background: #211d12;
}