/* ==========================================================================
   The video room -- the long valley, from a moving train.

   Only what this room has. The theme (palette, material, motion, reaction)
   is in themes.css under [data-room="video"]; the shared components are in
   styles.css and are not restyled here -- every selector below is a `.ve-`
   name of this room's own, or is scoped to one of its faces.

   The editor is one screen: an app bar, then media / picture / settings in
   three columns, then the tools, then the timeline. Corners are knocked off
   rather than rounded -- a chamfer, the island's own cut -- and whatever
   moves trails its light backwards, six pixels to the left.
   ========================================================================== */

/* --- the island while editing --------------------------------------------- */

.stage[data-state="video-edit"] .shell {
  width: min(100%, 1680px);
  border-radius: 0;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
/* No lean towards the pointer while editing. The building's tilt reads as
   weight on a resting island; on a surface where clips are placed to the
   frame it is the ground moving under your hand. */
.stage[data-state="video-edit"] .shell[data-tilt] { transform: none; }
main:has(.stage[data-state="video-edit"]) { padding-top: var(--s3); padding-bottom: var(--s5); }
/* The editor is sized to the window, so the site's foot under it made the
   page itself scroll by the foot's height (65px at 1440x900). It steps
   aside while editing, as it does for the docs room's editors. */
body:has(.stage[data-state="video-edit"]) .footer { display: none; }
#face-video-edit { padding: 0; }

html[data-ve-full] .stage[data-state="video-edit"] .shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto !important;
  height: auto !important;
  max-width: none;
  clip-path: none;
  border: 0;
  transform: none !important;
  background: var(--film-shell-solid);
}
html[data-ve-full] body { overflow: hidden; }

/* The window light every trail is drawn in: the signal's own colour as
   channels, so a shadow can take it at any strength. */
#face-video-idle, .ve { --ve-trail: 205 174 114; }

/* --- the resting face: recent films ------------------------------------------ */

.ve-shelf { margin-top: var(--s3); padding: var(--s3) var(--s2) var(--s1); border-top: var(--hairline) solid var(--film-rule); }
.ve-shelf__head { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--film-ink-3); }
.ve-shelf__head .mono { margin-left: var(--s1); letter-spacing: 0; }
.ve-shelf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ve-shelf__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.ve-shelf__open {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s3); align-items: center;
  min-height: 48px; padding: var(--s2); border: 0; border-radius: 6px; background: none; color: var(--film-ink); text-align: left; font: inherit; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ve-shelf__open:hover { background: var(--film-raise); box-shadow: -6px 0 12px -8px rgb(var(--ve-trail) / 0.5); }
.ve-shelf__open:focus-visible, .ve-shelf__del:focus-visible, .ve-shelf__new:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ve-shelf__frame {
  grid-row: span 2; justify-self: center; overflow: hidden;
  width: calc(36px * min(1, var(--fw) / var(--fh))); height: calc(36px * min(1, var(--fh) / var(--fw)));
  border: 1.5px solid var(--film-ink-3); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.ve-shelf__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ve-shelf__name { font-weight: 600; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-shelf__meta { font-size: var(--t-xs); color: var(--film-ink-3); }
.ve-shelf__del, .ve-shelf__new {
  min-height: 36px; padding: 0 var(--s3); border: var(--hairline) solid transparent; border-radius: 6px; background: none;
  color: var(--film-ink-3); font: inherit; font-size: var(--t-xs); cursor: pointer;
  transition: color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.ve-shelf__del:hover { color: var(--film-ink); background: var(--film-raise); }
.ve-shelf__del[data-armed] { color: var(--film-bad); border-color: currentColor; }
.ve-shelf__new { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--film-ink-2); }
.ve-shelf__new:hover { color: var(--film-ink); background: var(--film-raise); }
.ve-shelf__new .ve-ic { width: 16px; height: 16px; }

/* --- icons ------------------------------------------------------------------ */

.ve-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }

/* --- the editor frame ---------------------------------------------------------- */

.ve {
  --ve-bg: var(--film-shell-solid);
  --ve-desk: rgb(10 8 6);
  --ve-panel: rgb(255 240 222 / 0.035);
  --ve-line: var(--film-rule);
  --ve-video: rgb(104 128 168);
  --ve-audio: rgb(92 140 120);
  --ve-text: rgb(176 140 104);
  --wave: rgb(214 236 224 / 0.72);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 0 auto minmax(120px, var(--ve-tl-h, 36%));
  height: clamp(560px, calc(100dvh - 132px), 1700px);
  color: var(--film-ink);
  background: var(--ve-bg);
  font-size: var(--t-sm);
  overflow: hidden;
}
html[data-ve-full] .ve { height: 100dvh; }

.ve-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 34px; padding: 0 var(--s3);
  border: var(--hairline) solid var(--ve-line); border-radius: 6px;
  background: var(--film-raise); color: var(--film-ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ve-btn:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); box-shadow: var(--react-lift); }
.ve-btn:active:not(:disabled) { transform: scale(var(--react-press)); }
.ve-btn:disabled { opacity: 0.4; cursor: default; }
.ve-btn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ve-btn--icon { width: 36px; padding: 0; border-color: transparent; background: none; }
.ve-btn--small { min-height: 30px; padding: 0 var(--s2); }
.ve-btn--small .ve-ic { width: 15px; height: 15px; }
.ve-btn--quiet { background: none; border-color: transparent; }

/* --- app bar --------------------------------------------------------------------- */

.ve-bar {
  display: flex; align-items: center; gap: var(--s2) var(--s3);
  min-height: 52px; padding: var(--s2) calc(var(--s3) + 26px) var(--s2) var(--s2);
  border-bottom: var(--hairline) solid var(--ve-line);
}
.ve-title { display: flex; flex-direction: column; min-width: 0; flex: 0 1 260px; }
.ve-name {
  min-width: 0; width: 100%; padding: 2px var(--s1); margin-left: calc(var(--s1) * -1);
  border: var(--hairline) solid transparent; border-radius: 4px; background: none;
  color: var(--film-ink); font: inherit; font-family: var(--font-display); font-weight: 800; font-size: var(--t-base);
  text-transform: uppercase; letter-spacing: -0.03em; text-overflow: ellipsis;
  transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.ve-name:hover { border-color: var(--ve-line); }
.ve-name:focus { outline: none; border-color: var(--signal); background: var(--film-raise); text-transform: none; letter-spacing: 0; }
.ve-saved { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-saved[data-bad] { color: var(--film-bad); }
.ve-menus { display: flex; gap: 0; flex: 0 0 auto; }
.ve-menubtn {
  min-height: 32px; padding: 0 var(--s2); border: 0; border-radius: 4px; background: none;
  color: var(--film-ink-2); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ve-menubtn:hover, .ve-menubtn[aria-expanded="true"] { background: var(--film-raise-hi); color: var(--film-ink); }
.ve-menubtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-chip__frame, .ve-film__frame, .ve-pill__frame { display: block; flex: none; width: calc(14px * min(1, var(--fw, 16) / var(--fh, 9))); height: calc(14px * min(1, var(--fh, 9) / var(--fw, 16))); border: 1.5px solid currentColor; }
/* The film's own settings: one button, reading what the film is. */
.ve-film {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; margin-left: auto; padding: 0 var(--s3);
  border: var(--hairline) solid var(--ve-line); border-radius: 6px; background: var(--film-well); color: var(--film-ink-2);
  font: inherit; font-size: var(--t-xs); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ve-film__word { font-weight: 600; color: var(--film-ink); }
.ve-film__line { color: var(--film-ink-3); letter-spacing: 0.01em; }
.ve-film:hover { background: var(--film-raise-hi); color: var(--film-ink); box-shadow: -6px 0 10px -8px rgb(var(--ve-trail) / 0.7); }
.ve-film[aria-expanded="true"] { background: var(--film-raise-hi); box-shadow: inset 0 -2px 0 var(--signal); }
.ve-film[aria-expanded="true"]:hover { box-shadow: inset 0 -2px 0 var(--signal), -6px 0 10px -8px rgb(var(--ve-trail) / 0.7); }
.ve-film[aria-expanded="true"] .ve-film__line { color: var(--film-ink-2); }
.ve-film:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ve-export {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4);
  border: 0; background: var(--signal-fill); color: var(--signal-ink);
  font: inherit; font-weight: 700; font-size: var(--t-sm); cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background-color var(--dur-state) var(--ease), filter var(--dur-state) var(--ease);
}
.ve-export:hover:not(:disabled) { background: var(--signal-fill-hover); filter: drop-shadow(-6px 0 6px rgb(var(--ve-trail) / 0.45)); }
.ve-export:disabled { opacity: 0.45; cursor: default; }
.ve-export:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.ve-export .ve-ic { width: 16px; height: 16px; stroke-width: 2.2; }

/* The cut corner is the way into full screen: the island's own knocked-off
   corner, lit when the pointer comes near. */
.ve-corner {
  position: absolute; top: 0; right: 0; z-index: 3;
  width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
}
.ve-corner__cut {
  position: absolute; inset: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px));
  background: linear-gradient(225deg, var(--film-ink-3), transparent 70%);
  transition: background var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.ve-corner:hover .ve-corner__cut, .ve-corner:focus-visible .ve-corner__cut { background: linear-gradient(225deg, var(--signal), transparent 75%); }
.ve-corner[aria-pressed="true"] .ve-corner__cut { clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(225deg, var(--signal), transparent 60%); }
.ve-corner:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -4px; }

/* --- menus and pop-ups ----------------------------------------------------------- */

.ve-menu {
  position: absolute; z-index: 40; min-width: 240px; max-width: min(340px, calc(100% - 8px)); max-height: 70%; overflow: auto;
  padding: var(--s1); background: rgb(27 22 16); border: var(--hairline) solid var(--ve-line);
  box-shadow: -6px 10px 28px -10px rgb(0 0 0 / 0.7), -2px 0 0 0 rgb(var(--ve-trail) / 0.18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  animation: ve-menu-in var(--dur-state) var(--ease) both;
}
@keyframes ve-menu-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
/* The Film button's panel: a menu's dress, the four shapes two by two. */
.ve-filmpop { width: min(320px, calc(100% - 16px)); max-width: none; max-height: calc(100% - 72px); padding: 0; }
.ve-filmpop__name { margin: 0; padding: var(--s3) var(--s3) 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--film-ink-2); }
.ve-menu__item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
  width: 100%; min-height: 32px; padding: 0 var(--s2); border: 0; border-radius: 3px; background: none;
  color: var(--film-ink); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer;
}
.ve-menu__item:hover, .ve-menu__item:focus { outline: none; background: var(--film-raise-hi); }
.ve-menu__item[aria-disabled] { color: var(--film-ink-3); opacity: 0.6; cursor: default; }
.ve-menu__tick .ve-ic { width: 14px; height: 14px; color: var(--signal); }
.ve-menu__keys { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); }
.ve-menu__sep { height: 1px; margin: var(--s1) var(--s2); background: var(--ve-line); }
.ve-menu__head { padding: var(--s2) var(--s2) var(--s1); font-size: var(--t-xs); color: var(--film-ink-3); }

/* --- the three columns -------------------------------------------------------------- */

.ve-main { display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; min-height: 0; }
.ve-bin, .ve-inspect { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--film-rule) transparent; }
.ve-bin { border-right: var(--hairline) solid var(--ve-line); padding: 0 0 var(--s3); }
/* The panes' heads stay put while the list runs under them: the scroll cue's
   fade starts below a head, not on it (js/ui/scroll-cue.js). */
.ve-bin, .ve-inspect { --cue-inset-top: 44px; }
.ve-inspect { border-left: var(--hairline) solid var(--ve-line); padding: 0 0 var(--s5); }
.ve-panehead {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3); background: var(--ve-bg);
  border-bottom: var(--hairline) solid var(--ve-line);
}
.ve-panehead__name { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--film-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-panehead__sub { font-size: var(--t-xs); color: var(--film-ink-3); white-space: nowrap; }
.ve-count { margin-left: var(--s1); font-family: var(--font-mono); letter-spacing: 0; color: var(--film-ink-3); }

.ve-bin__list { list-style: none; margin: 0; padding: var(--s2); display: grid; gap: var(--s1); }
.ve-bin__empty { margin: var(--s3); color: var(--film-ink-3); font-size: var(--t-xs); line-height: var(--lh-prose); }
.ve-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; border-radius: 4px; transition: background-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease); }
.ve-item:hover { background: var(--film-raise); box-shadow: -6px 0 12px -9px rgb(var(--ve-trail) / 0.6); }
.ve-item__grab {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s2); align-items: center;
  min-height: 48px; padding: var(--s1); border: 0; background: none; color: var(--film-ink); font: inherit; text-align: left; cursor: grab; touch-action: none;
}
.ve-item__grab:focus-visible, .ve-item__add:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-item__thumb { position: relative; grid-row: span 2; display: grid; place-items: center; width: 64px; height: 36px; overflow: hidden; background: var(--ve-desk); color: var(--film-ink-3); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ve-item__thumb canvas { width: 64px; height: 36px; display: block; }
.ve-item[data-kind="audio"] .ve-item__thumb { color: var(--ve-audio); background: rgb(92 140 120 / 0.14); }
.ve-item__name { min-width: 0; font-size: var(--t-xs); font-weight: 600; line-height: var(--lh-tight); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* On the timeline already: a mark in the thumbnail's corner. */
.ve-item__used { position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; background: var(--signal); box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.6); transform: rotate(45deg); }
.ve-lenrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0 var(--s3) var(--s3); }
.ve-stepper { display: inline-flex; align-items: stretch; height: 30px; border: var(--hairline) solid var(--ve-line); background: var(--film-well); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.ve-stepper:focus-within { border-color: var(--signal); }
.ve-stepper__btn { display: grid; place-items: center; width: 26px; padding: 0; border: 0; background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-sm); line-height: 1; cursor: pointer; }
.ve-stepper__btn:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.ve-stepper__btn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-num { width: 56px; padding: 0 2px; border: 0; background: none; color: var(--film-ink); font-size: var(--t-xs); text-align: center; }
.ve-num:focus { outline: none; }
/* The room's own colour panel. */
.ve-colours { min-width: 0; padding: var(--s2); }
.ve-colours__grid { display: grid; gap: 3px; }
.ve-colours__row { display: grid; grid-template-columns: repeat(8, 22px); gap: 3px; }
.ve-colours__cell { width: 22px; height: 22px; padding: 0; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); cursor: pointer; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ve-colours__cell:hover { transform: scale(1.12); }
.ve-colours__cell[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--film-ink), inset 0 0 0 3px rgb(0 0 0 / 0.6); }
.ve-colours__cell:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; clip-path: none; }
.ve-colours__hex { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: var(--hairline) solid var(--ve-line); }
.ve-colours__now { width: 18px; height: 18px; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.ve-colours__input { flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 var(--s2); border: var(--hairline) solid var(--ve-line); background: var(--film-well); color: var(--film-ink); font-size: var(--t-xs); }
.ve-colours__input:focus { outline: none; border-color: var(--signal); }
.ve-item__meta { font-size: 0.6875rem; color: var(--film-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-item[data-missing] .ve-item__meta { color: var(--film-bad); }
.ve-item__add {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: var(--s1); padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--film-ink-3); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ve-item__add:hover:not(:disabled) { background: var(--signal-fill); color: var(--signal-ink); }
.ve-item__add:disabled { opacity: 0.35; cursor: default; }
.ve-item__more { margin-left: -6px; }
.ve-item__more:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); }
.ve-ghost {
  position: absolute; left: 0; top: 0; z-index: 50; pointer-events: none;
  max-width: 220px; padding: var(--s1) var(--s2); background: var(--signal-fill); color: var(--signal-ink);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: -6px 0 12px -4px rgb(var(--ve-trail) / 0.6);
}

/* --- the picture -------------------------------------------------------------------- */

.ve-view { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: var(--ve-desk); overflow: hidden; }
.ve-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: var(--s3); }
.ve-transport { position: relative; z-index: 2; }
.ve-frame { position: relative; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06); touch-action: none; }
.ve-canvas { display: block; width: 100%; height: 100%; }
.ve-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--s4); color: var(--film-ink-3); font-size: var(--t-sm); text-align: center; pointer-events: none; }
.ve-handles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
/* An upscaled frame being worked out: a quiet line on the picture. */
.ve-upnote { position: absolute; left: var(--s2); bottom: var(--s2); z-index: 2; margin: 0; padding: 2px var(--s2); background: rgb(13 11 9 / 0.8); color: var(--film-ink-2); font-size: var(--t-xs); pointer-events: none; box-shadow: inset 2px 0 0 var(--signal); }
.ve-upnote[hidden] { display: none; }
/* Safe areas: the inner nine-tenths where titles are never cut by a
   screen's edge, and on a tall film the strip a phone app covers with its
   own buttons and captions. Dashed, faint, and only when asked for. */
.ve-safe { display: none; position: absolute; inset: 0; pointer-events: none; }
.ve-frame[data-safe] .ve-safe { display: block; }
.ve-safe__title { position: absolute; inset: 5%; border: 1px dashed rgb(255 255 255 / 0.45); }
.ve-safe__ui { display: none; position: absolute; left: 0; right: 14%; bottom: 0; height: 22%; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.08) 0 6px, transparent 6px 12px); border-top: 1px dashed rgb(255 255 255 / 0.45); }
.ve-frame[data-tall] .ve-safe__ui { display: block; }
.ve-box { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; outline: 1.5px solid var(--signal); outline-offset: -1px; pointer-events: auto; cursor: move; box-shadow: -6px 0 14px -8px rgb(var(--ve-trail) / 0.6); }
.ve-handles[data-active] .ve-box { box-shadow: -10px 0 18px -6px rgb(var(--ve-trail) / 0.75); }
.ve-box__grip { position: absolute; width: 12px; height: 12px; background: var(--film-ink); border: 1.5px solid var(--signal); }
.ve-box__grip[data-grip="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.ve-box__grip[data-grip="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.ve-box__grip[data-grip="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.ve-box__grip[data-grip="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
/* Crop mode: the corners and the turn give way to four edges that trim. */
.ve-box__edge { display: none; position: absolute; background: var(--film-ink); border: 1.5px solid var(--signal); }
.ve-box[data-crop] .ve-box__edge { display: block; }
.ve-box[data-crop] .ve-box__grip, .ve-box[data-crop] .ve-box__turn { display: none; }
.ve-box[data-crop] { outline-style: dashed; cursor: default; }
.ve-box__edge[data-grip="n"], .ve-box__edge[data-grip="s"] { left: 50%; width: 28px; height: 8px; margin-left: -14px; cursor: ns-resize; }
.ve-box__edge[data-grip="n"] { top: -4px; }
.ve-box__edge[data-grip="s"] { bottom: -4px; }
.ve-box__edge[data-grip="w"], .ve-box__edge[data-grip="e"] { top: 50%; width: 8px; height: 28px; margin-top: -14px; cursor: ew-resize; }
.ve-box__edge[data-grip="w"] { left: -4px; }
.ve-box__edge[data-grip="e"] { right: -4px; }
.ve-box__turn { position: absolute; left: 50%; top: -30px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px rgb(0 0 0 / 0.5); cursor: grab; }
.ve-box__turn::after { content: ""; position: absolute; left: 6px; top: 14px; width: 1.5px; height: 16px; background: var(--signal); }

.ve-transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s1) var(--s3); border-top: var(--hairline) solid var(--ve-line); background: var(--ve-bg); }
.ve-transport__keys { display: flex; align-items: center; gap: var(--s1); }
.ve-tc { font-size: var(--t-sm); color: var(--film-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ve-tc--dim { color: var(--film-ink-3); }
.ve-transport__end { justify-self: end; display: inline-flex; align-items: center; gap: var(--s1); }
.ve-master { display: inline-flex; align-items: center; gap: 2px; margin-right: var(--s2); }
.ve-master__range { width: 72px; height: 20px; margin: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ve-master__range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--film-ink-2) var(--fill, 100%), var(--ve-line) var(--fill, 100%)); }
.ve-master__range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 13px; margin-top: -5px; border: 0; background: var(--knob-face); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ve-master__range:hover::-webkit-slider-thumb { background: var(--knob-face-hi); }
.ve-master__range:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
/* Watching: the picture and its transport fill the screen. */
.ve-view:fullscreen { background: #000; }
.ve-view:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
/* Watching is for looking: no handles over the picture. */
.ve-view:fullscreen .ve-handles { display: none; }
.ve-view:-webkit-full-screen .ve-handles { display: none; }
.ve-play {
  display: grid; place-items: center; width: 44px; height: 38px; padding: 0; border: 0;
  background: var(--film-ink); color: var(--ve-bg); cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background-color var(--dur-state) var(--ease), filter var(--dur-state) var(--ease);
}
.ve-play:hover { background: var(--signal); filter: drop-shadow(-6px 0 6px rgb(var(--ve-trail) / 0.5)); }
.ve-play:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ve-play:disabled { opacity: 0.4; }
.ve-ic--pause, .ve-play[data-playing] .ve-ic--play { display: none; }
.ve-play[data-playing] .ve-ic--pause { display: block; }

/* --- the inspector -------------------------------------------------------------------- */

.ve-actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: var(--s3); }
.ve-sec { border-top: var(--hairline) solid var(--ve-line); }
.ve-sec__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; align-items: center; gap: var(--s2);
  width: 100%; min-height: 42px; padding: 0 var(--s3); border: 0; background: none;
  color: var(--film-ink); font: inherit; font-weight: 600; font-size: var(--t-sm); text-align: left; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
.ve-sec__head:hover { background: var(--react-bar-hover); }
.ve-sec__head:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-sec__mark { width: 6px; height: 6px; transform: rotate(45deg); border: 1.5px solid var(--film-ink-3); }
.ve-sec__mark[data-on] { background: var(--signal); border-color: var(--signal); box-shadow: -4px 0 6px -1px rgb(var(--ve-trail) / 0.6); }
.ve-sec__count { font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; color: var(--film-ink-3); }
.ve-sec__chev { width: 16px; height: 16px; fill: none; stroke: var(--film-ink-3); stroke-width: 1.75; transition: transform var(--dur-state) var(--ease); }
.ve-sec[data-open] .ve-sec__chev { transform: rotate(180deg); }
.ve-sec__body { display: grid; gap: var(--s3); padding: var(--s1) var(--s3) var(--s4); }

.ve-field { display: grid; gap: var(--s1); }
.ve-field__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: var(--s1); }
.ve-field__label { font-size: var(--t-xs); color: var(--film-ink-2); }
/* A label with a plain sentence behind it says so, quietly. */
.ve-field__label--tip { justify-self: start; text-decoration: underline dotted rgb(241 238 233 / 0.35); text-underline-offset: 3px; cursor: help; }
.ve-field__label--tip:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.ve-field__value { font-size: var(--t-xs); color: var(--film-ink); font-variant-numeric: tabular-nums; }
.ve-reset, .ve-keybtn {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 3px;
  background: none; color: var(--film-ink-3); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.ve-reset:hover, .ve-keybtn:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.ve-reset:focus-visible, .ve-keybtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-keybtn .ve-ic { width: 13px; height: 13px; }
.ve-keynav { display: inline-flex; }
.ve-keynav[hidden] { display: none; }
.ve-keystep { width: 18px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--signal); font: inherit; font-size: var(--t-md); line-height: 1; cursor: pointer; }
.ve-keystep:hover { background: var(--film-raise-hi); }
.ve-keystep:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-keybtn .ve-ic--keyon { display: none; }
.ve-keybtn[data-has] { color: var(--signal); }
.ve-keybtn[aria-pressed="true"] .ve-ic--key { display: none; }
.ve-keybtn[aria-pressed="true"] .ve-ic--keyon { display: block; color: var(--signal); }

.ve-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; }
.ve-range::-webkit-slider-runnable-track { height: 3px; background: var(--film-raise-hi); }
.ve-range::-moz-range-track { height: 3px; background: var(--film-raise-hi); }
.ve-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 16px; margin-top: -6.5px; border: 0;
  background: var(--knob-face); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
  transition: background-color var(--dur-state) var(--ease);
}
.ve-range::-moz-range-thumb { width: 14px; height: 16px; border: 0; border-radius: 0; background: var(--knob-face); }
.ve-range:hover::-webkit-slider-thumb { background: var(--knob-face-hi); }
.ve-range:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
/* The reaction: a slider being moved trails its light backwards. The thumb
   is clipped to its cut shape, so its trail is drawn on the track. */
.ve-range[data-moving]::-webkit-slider-runnable-track { filter: var(--react-drag-track); background: linear-gradient(90deg, transparent, var(--signal)); }
.ve-range[data-moving]::-moz-range-track { filter: var(--react-drag-track); }
.ve-range[data-moving]::-webkit-slider-thumb { background: var(--signal); }

.ve-pills { display: flex; flex-wrap: wrap; gap: var(--s1); }
.ve-pills--tight { margin-top: calc(var(--s1) * -1); }
.ve-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--s2);
  border: var(--hairline) solid var(--ve-line); border-radius: 3px; background: var(--film-raise);
  color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; text-align: left;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), border-color var(--dur-state) var(--ease);
}
.ve-pill .ve-ic { width: 14px; height: 14px; }
.ve-pill:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); border-color: var(--film-ink-3); }
.ve-pill[aria-checked="true"], .ve-pill[aria-pressed="true"] { background: var(--knob-face); color: var(--knob-ink); border-color: transparent; }
/* Chosen stays chosen under the pointer: hovering a chosen pill lifts its own
   light face a step, it never falls back to the unchosen hover. So a click
   shows its result at once, with the pointer still on it. */
.ve-pill:is([aria-checked="true"], [aria-pressed="true"]):hover:not(:disabled) { background: var(--knob-face-hi); color: var(--knob-ink); border-color: transparent; }
.ve-pill:disabled { opacity: 0.4; cursor: default; }
.ve-pill:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ve-pill__sub { font-weight: 400; opacity: 0.75; }
/* Presets: small, in a row that wraps, the menu at its end. */
.ve-pills--presets { gap: 4px; }
.ve-pill--preset { min-height: 26px; padding: 0 var(--s2); font-weight: 600; }
.ve-pill--more { padding: 0 6px; }
.ve-pill--more .ve-ic { width: 14px; height: 14px; }
.ve-presetname { display: flex; gap: var(--s1); }
.ve-presetname__input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 var(--s2); border: var(--hairline) solid var(--ve-line); border-radius: 3px; background: var(--film-well); color: var(--film-ink); font: inherit; font-size: var(--t-xs); }
.ve-presetname__input:focus { outline: none; border-color: var(--signal); }
.ve-presets--naming { display: grid; gap: var(--s1); }
.ve-textarea {
  width: 100%; min-height: 64px; padding: var(--s2); resize: vertical;
  border: var(--hairline) solid var(--ve-line); border-radius: 3px; background: var(--film-well);
  color: var(--film-ink); font: inherit; font-size: var(--t-sm); line-height: var(--lh-tight);
}
.ve-textarea:focus { outline: none; border-color: var(--signal); }
.ve-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ve-swatch {
  position: relative; width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 3px;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); cursor: pointer;
}
.ve-swatch[aria-checked="true"] { border-color: var(--film-ink); }
.ve-swatch:focus-visible, .ve-swatch:focus-within { outline: 2px solid var(--signal); outline-offset: 1px; }
.ve-swatch--pick { background: conic-gradient(from 0deg, #e7685a, #f2c14e, #9cc88a, #7fb7d9, #e7685a); overflow: hidden; }
.ve-swatch--pick { padding: 0; border: 0; cursor: pointer; }
.ve-link { justify-self: start; padding: var(--s1) 0; border: 0; background: none; color: var(--film-ink-2); font: inherit; font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ve-link:hover { color: var(--film-ink); }
.ve-link:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.ve-note { margin: 0; font-size: var(--t-xs); line-height: var(--lh-prose); color: var(--film-ink-3); max-width: 62ch; }
/* The clip's own format, under its name. */
.ve-fmt { display: grid; gap: var(--s2); padding: var(--s1) var(--s3) var(--s3); }
.ve-fmt__line { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
.ve-fmt__same { color: var(--film-ink-3); }
/* A few words; the whole sentence is the tip. Dotted underline says so. */
.ve-fmt__why { justify-self: start; text-decoration: underline dotted rgb(241 238 233 / 0.35); text-underline-offset: 3px; cursor: help; }
.ve-fmt__why:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.ve-fmt .ve-pill { justify-self: start; }
.ve-pill--slowmo { justify-self: start; }
/* The room's tip: a sentence in plain words, above what it explains. */
.ve-tip-pop {
  position: fixed; left: 0; top: 0; z-index: 1000; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: var(--s2) var(--s3);
  overflow-wrap: anywhere;
  background: rgb(29 24 18); color: var(--film-ink); font-size: var(--t-xs); line-height: var(--lh-prose);
  box-shadow: -6px 8px 24px -10px rgb(0 0 0 / 0.8), inset 2px 0 0 var(--signal); pointer-events: none;
  animation: ve-tip-in var(--dur-state) var(--ease) both;
}
.ve-tip-pop[hidden] { display: none; }
/* A fade, not a slide: a tip never travels past the edge it was kept from. */
@keyframes ve-tip-in { from { opacity: 0; } to { opacity: 1; } }
.ve-film-panel { display: grid; gap: var(--s4); padding: var(--s3) var(--s3) var(--s4); }
.ve-pill--shape { gap: var(--s2); }
.ve-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s4); margin: 0; }
.ve-facts dt { font-size: 0.6875rem; color: var(--film-ink-3); }
.ve-facts dd { margin: 2px 0 0; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* The line between the picture and the timeline: a grip that takes no
   room of its own, lit like everything else here when it is moved. */
.ve-split { position: relative; z-index: 5; height: 0; cursor: row-resize; touch-action: none; }
.ve-split::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 8px; }
.ve-split::after {
  content: ""; position: absolute; left: 50%; top: -2px; width: 44px; height: 4px; margin-left: -22px;
  background: var(--film-ink-3); opacity: 0; transition: opacity var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.ve-split:hover::after, .ve-split:focus-visible::after, .ve[data-resizing] .ve-split::after { opacity: 1; }
.ve[data-resizing] .ve-split::after { background: var(--signal); box-shadow: -6px 0 8px rgb(var(--ve-trail) / 0.6); }
.ve-split:focus-visible { outline: none; }
.ve-split:focus-visible::after { background: var(--film-ink); }
.ve[data-resizing] { cursor: row-resize; user-select: none; -webkit-user-select: none; }

/* --- tools ------------------------------------------------------------------------- */

.ve-tools {
  display: flex; align-items: center; gap: var(--s2); min-height: 46px; padding: var(--s1) var(--s2);
  border-top: var(--hairline) solid var(--ve-line); border-bottom: var(--hairline) solid var(--ve-line);
  overflow-x: auto; scrollbar-width: none;
}
.ve-tools::-webkit-scrollbar { display: none; }
.ve-tools__group { display: flex; align-items: center; gap: 2px; padding-right: var(--s2); border-right: var(--hairline) solid var(--ve-line); }
.ve-tools__group:last-child, .ve-tools__group--end { border-right: 0; }
.ve-tools__group--end { margin-left: auto; padding-right: 0; }
.ve-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s2);
  border: 0; border-radius: 4px; background: none; color: var(--film-ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.ve-tool:hover:not(:disabled) { background: var(--film-raise-hi); color: var(--film-ink); box-shadow: -6px 0 10px -8px rgb(var(--ve-trail) / 0.7); }
.ve-tool:active:not(:disabled) { transform: scale(var(--react-press)); }
.ve-tool:disabled { opacity: 0.38; cursor: default; }
.ve-tool:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-tool[aria-pressed="true"] { color: var(--film-ink); background: var(--film-raise); box-shadow: inset 0 -2px 0 var(--signal); }
.ve-tool[aria-pressed="true"]:hover:not(:disabled) { color: var(--film-ink); background: var(--film-raise-hi); box-shadow: inset 0 -2px 0 var(--signal), -6px 0 10px -8px rgb(var(--ve-trail) / 0.7); }
.ve-tool--icon { width: 36px; padding: 0; justify-content: center; }
.ve-tool__key { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400; color: var(--film-ink-3); padding: 1px 4px; border: var(--hairline) solid var(--ve-line); border-radius: 2px; }

/* --- the timeline ----------------------------------------------------------------- */

.ve-tl { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 0; background: var(--ve-desk); overflow: hidden; }
.ve-tl__heads { position: relative; z-index: 3; min-height: 0; overflow: hidden; background: var(--ve-bg); border-right: var(--hairline) solid var(--ve-line); }
.ve-tl__corner { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 var(--s1); background: var(--ve-bg); border-bottom: var(--hairline) solid var(--ve-line); }
/* How the tracks share the height: fit all, fit the selected one; then
   every track shorter or taller. Small, because they are a view. */
.ve-tl__fit { display: inline-flex; gap: 1px; margin-right: auto; padding: 1px; background: var(--film-well); border-radius: 3px; }
.ve-tl__cbtn {
  display: grid; place-items: center; width: 24px; height: 20px; padding: 0; border: 0; border-radius: 2px;
  background: none; color: var(--film-ink-3); cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.ve-tl__cbtn .ve-ic { width: 14px; height: 14px; }
.ve-tl__cbtn:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.ve-tl__cbtn[aria-checked="true"] { color: var(--knob-ink); background: var(--knob-face); }
.ve-tl__cbtn[aria-checked="true"]:hover { color: var(--knob-ink); background: var(--knob-face-hi); }
.ve-tl__cbtn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -1px; }
.ve-tl__headlist { will-change: transform; }
.ve-th { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--s1) 0 var(--s2); border-bottom: var(--hairline) solid var(--ve-line); overflow: hidden; }
/* A short track keeps its name; the buttons go first, then the tag. */
.ve-th[data-size="s"] { flex-direction: row; align-items: center; justify-content: space-between; }
.ve-th[data-size="s"] .ve-th__vol, .ve-th[data-size="xs"] .ve-th__btns { display: none; }
.ve-th[data-size="xs"] { flex-direction: row; align-items: center; }
.ve-th[data-size="xs"] .ve-th__tag { display: none; }
/* Its lower edge: drag to make it taller or shorter. */
.ve-th__size { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 7px; cursor: row-resize; touch-action: none; }
.ve-th__size::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: 1px; height: 2px; background: transparent; transition: background-color var(--dur-state) var(--ease); }
.ve-th__size:hover::after, .ve-th__size:focus-visible::after, .ve-tl[data-sizing] .ve-th__size:active::after { background: var(--signal); box-shadow: -6px 0 6px -2px rgb(var(--ve-trail) / 0.5); }
.ve-th__size:focus-visible { outline: none; }
.ve-tl[data-sizing] { cursor: row-resize; user-select: none; -webkit-user-select: none; }
.ve-tl[data-settling] :is(.ve-th, .ve-lane, .ve-tl__lanes) { transition: height var(--dur-face) var(--ease), top var(--dur-face) var(--ease); }
.ve-th__name { align-self: flex-start; max-width: 100%; padding: 1px 3px; margin-left: -3px; border: 0; border-radius: 2px; background: none; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-2); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ve-th__name:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.ve-th__name:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -1px; }
.ve-th__tag { margin-left: 6px; padding: 0 4px; font-size: 0.625rem; color: var(--signal); border: var(--hairline) solid currentColor; }
.ve-th__btns { display: flex; align-items: center; gap: 0; }
.ve-th__vol { flex: 1 1 auto; min-width: 0; width: 100%; height: 20px; margin: 0 2px 0 4px; background: none; appearance: none; -webkit-appearance: none; cursor: ew-resize; }
.ve-th__vol::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--film-ink-3) var(--fill, 50%), var(--ve-line) var(--fill, 50%)); }
.ve-th__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 12px; margin-top: -4.5px; border: 0; background: var(--knob-face); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ve-th__vol:hover::-webkit-slider-thumb, .ve-th__vol:focus-visible::-webkit-slider-thumb { background: var(--knob-face-hi); }
.ve-th__vol:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; }
.ve-th__name[data-reading] { font-size: 0; }
.ve-th__name[data-reading]::after { content: attr(data-reading); font-size: var(--t-xs); color: var(--signal); }
/* A text track is a short row, so its name and its two buttons sit side by
   side instead of stacked. */
.ve-th[data-kind="text"] { flex-direction: row; align-items: center; justify-content: space-between; gap: 2px; }
.ve-th[data-kind="text"] .ve-th__name { align-self: center; min-width: 0; }
.ve-th__btn { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--film-ink-3); cursor: pointer; }
.ve-th__btn .ve-ic { width: 14px; height: 14px; }
.ve-th__btn:hover { color: var(--film-ink); background: var(--film-raise-hi); }
.ve-th__btn[aria-pressed="true"] { color: var(--signal); }
.ve-th__btn:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }

.ve-tl__scroll { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--film-rule) transparent; }
.ve-tl__inner { position: relative; min-height: 100%; }
/* (The ruler is kept whole by the scroll cue: its fade starts under it.) */
.ve-tl__scroll { --cue-inset-top: 27px; }
.ve-tl__ruler { position: sticky; top: 0; z-index: 4; height: 26px; background: var(--ve-bg); border-bottom: var(--hairline) solid var(--ve-line); cursor: text; touch-action: none; }
.ve-tl__ruler:focus-visible { outline: 2px solid var(--film-ink); outline-offset: -2px; }
.ve-tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--film-ink-3); opacity: 0.5; }
.ve-tick--major { height: 10px; opacity: 1; }
/* Clear of the playhead's flag (14px wide, centred on the line), which sat on
   the first figure of "0:00" whenever the film was at its start. */
.ve-tick__label { position: absolute; left: 9px; bottom: 8px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--film-ink-3); white-space: nowrap; }
.ve-marks { position: absolute; top: 0; height: 6px; background: rgb(var(--ve-trail) / 0.35); border-left: 2px solid var(--signal); border-right: 2px solid var(--signal); pointer-events: none; }
.ve-marker { position: absolute; bottom: 0; width: 10px; height: 12px; margin-left: -5px; background: var(--film-working); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.ve-tl__lanes { position: relative; }
.ve-tl__rows { position: absolute; inset: 0; }
.ve-lane { position: absolute; left: 0; right: 0; border-bottom: var(--hairline) solid rgb(255 255 255 / 0.04); }
.ve-lane[data-main] { background: rgb(255 240 222 / 0.025); }
.ve-lane[data-target] { background: rgb(var(--ve-trail) / 0.08); box-shadow: inset 0 0 0 1px rgb(var(--ve-trail) / 0.4); }
.ve-lane[data-refuse] { background: rgb(240 154 142 / 0.05); }
.ve-lane[data-locked] { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgb(255 255 255 / 0.025) 8px 9px); }
.ve-insert { position: absolute; left: 0; top: 0; z-index: 3; width: 2px; background: var(--signal); box-shadow: -6px 0 10px rgb(var(--ve-trail) / 0.6); pointer-events: none; }

.ve-clip {
  --kind: var(--ve-video);
  position: absolute; left: 0; top: 0; z-index: 1;
  overflow: hidden; background: rgb(from var(--kind) r g b / 0.32);
  box-shadow: inset 0 0 0 1px rgb(from var(--kind) r g b / 0.7);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: box-shadow var(--dur-state) var(--ease), filter var(--dur-state) var(--ease);
}
@supports not (color: rgb(from red r g b)) {
  .ve-clip { background: rgb(104 128 168 / 0.32); box-shadow: inset 0 0 0 1px rgb(104 128 168 / 0.7); }
  .ve-clip[data-kind="audio"] { background: rgb(92 140 120 / 0.3); box-shadow: inset 0 0 0 1px rgb(92 140 120 / 0.7); }
  .ve-clip[data-kind="text"] { background: rgb(176 140 104 / 0.3); box-shadow: inset 0 0 0 1px rgb(176 140 104 / 0.7); }
}
.ve-clip[data-kind="audio"] { --kind: var(--ve-audio); }
.ve-clip[data-kind="text"] { --kind: var(--ve-text); }
.ve-clip[data-kind="image"] { --kind: var(--ve-video); }
.ve-clip:hover { filter: brightness(1.12); }
.ve-clip[data-selected] { z-index: 2; box-shadow: inset 0 0 0 2px var(--signal); filter: none; }
/* The selection's outline drawn over the clip's own film strip and above
   both neighbours, so all four edges show wherever the clip sits: first,
   last, against a neighbour or meeting one in the middle of a transition. */
.ve-clip[data-selected]::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 2px var(--signal); }
.ve-clip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--film-ink); }
.ve-clip[data-dragsource] { opacity: 0.38; filter: grayscale(0.6); cursor: grabbing; }
/* Where a dragged clip will land: its outline and its name, grey until it
   is let go, trailing its light backwards as everything moving here does.
   A copy (Alt held) says so with a plus. */
.ve-dropghost {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  background: rgb(24 20 15 / 0.82); box-shadow: inset 0 0 0 1.5px rgb(241 238 233 / 0.6), -8px 0 12px -6px rgb(var(--ve-trail) / 0.5);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.ve-dropghost[data-copy] { background: rgb(34 28 19 / 0.86); box-shadow: inset 0 0 0 1.5px var(--signal), -8px 0 12px -6px rgb(var(--ve-trail) / 0.6); }
.ve-dropghost__name { position: absolute; left: 6px; top: 3px; right: 6px; font-size: 0.6875rem; font-weight: 600; color: var(--film-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ve-tl[data-dragging] .ve-clip[data-selected]:not([data-dragsource]) { filter: drop-shadow(-6px 0 8px rgb(var(--ve-trail) / 0.45)); }
.ve-clip[data-muted] .ve-clip__strip { opacity: 0.35; }
.ve-clip[data-locked] { cursor: default; }
.ve-clip__strip { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0.9; }
/* Clips glide into their places when the main track closes up, and when
   the tracks change height. */
.ve-tl[data-settling] :is(.ve-clip, .ve-trans) { transition: transform var(--dur-face) var(--ease), width var(--dur-face) var(--ease), height var(--dur-face) var(--ease); }
/* The edge being trimmed is lit; the clip's other edge stays where it is. */
.ve-clip[data-trimming="l"] .ve-clip__trim--l, .ve-clip[data-trimming="r"] .ve-clip__trim--r { background: var(--signal); box-shadow: -6px 0 8px -2px rgb(var(--ve-trail) / 0.6); }
.ve-clip__name {
  position: absolute; left: 6px; top: 3px; right: 6px; z-index: 1;
  font-size: 0.6875rem; font-weight: 600; color: var(--film-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); pointer-events: none;
}
.ve-clip__badges { position: absolute; left: 6px; bottom: 3px; z-index: 1; font-family: var(--font-mono); font-size: 0.625rem; color: var(--film-ink); text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); pointer-events: none; white-space: nowrap; }
/* What a clip is, where it differs from the film: "4K · 60". Quiet, in the
   top right; its tip says what happens to it. */
.ve-clip__fmt {
  position: absolute; right: 6px; top: 3px; z-index: 2; padding: 0 4px;
  font-size: 0.625rem; line-height: 14px; color: var(--film-ink-2); background: rgb(13 11 9 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(241 238 233 / 0.18); cursor: help;
}
.ve-clip__fmt[hidden] { display: none; }
.ve-clip__fmt[data-slow] { color: var(--signal); box-shadow: inset 0 0 0 1px rgb(var(--ve-trail) / 0.45); }
.ve-clip[data-kind="text"] .ve-clip__name { top: 50%; transform: translateY(-50%); }
.ve-clip[data-kind="text"] .ve-clip__badges { display: none; }
.ve-clip__fade { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.ve-clip__fade--in { left: 0; background: linear-gradient(to top right, rgb(0 0 0 / 0.45) 50%, transparent 50.5%); }
.ve-clip__fade--out { right: 0; background: linear-gradient(to top left, rgb(0 0 0 / 0.45) 50%, transparent 50.5%); }
.ve-clip__keys { position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; z-index: 1; pointer-events: none; }
.ve-clip__keys i { position: absolute; width: 7px; height: 7px; margin-left: -3.5px; background: var(--signal); transform: rotate(45deg); }
.ve-clip__trim { position: absolute; top: 0; bottom: 0; z-index: 3; width: 10px; cursor: ew-resize; }
.ve-clip__fadegrip { position: absolute; top: 2px; z-index: 4; display: none; width: 10px; height: 10px; margin-left: -5px; background: var(--film-ink); border: 1.5px solid var(--ve-bg); border-radius: 50%; cursor: ew-resize; touch-action: none; }
.ve-clip[data-sounds]:is(:hover, [data-selected]) .ve-clip__fadegrip { display: block; }
.ve-clip__vol { position: absolute; left: 10px; right: 10px; z-index: 2; display: none; height: 12px; cursor: ns-resize; touch-action: none; }
.ve-clip__vol[data-on] { display: block; }
.ve-clip__vol::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 1px; background: transparent; transition: background-color var(--dur-state) var(--ease); }
.ve-clip:is(:hover, [data-selected]) .ve-clip__vol::before { background: rgb(241 238 233 / 0.5); }
.ve-clip__vol:hover::before, .ve-clip__vol[data-active]::before { background: var(--signal); box-shadow: -6px 0 6px -2px rgb(var(--ve-trail) / 0.5); }
.ve-clip__volread { position: absolute; left: 50%; bottom: 13px; display: none; padding: 1px 6px; transform: translateX(-50%); border-radius: 2px; background: rgb(13 11 8 / 0.92); color: var(--film-ink); font-size: 0.6875rem; white-space: nowrap; pointer-events: none; }
.ve-clip__vol:hover .ve-clip__volread, .ve-clip__vol[data-active] .ve-clip__volread { display: block; }
.ve-clip__trim--l { left: 0; }
.ve-clip__trim--r { right: 0; }
.ve-clip:hover .ve-clip__trim, .ve-clip[data-selected] .ve-clip__trim { background: linear-gradient(90deg, rgb(255 255 255 / 0.35), transparent); }
.ve-clip:hover .ve-clip__trim--r, .ve-clip[data-selected] .ve-clip__trim--r { background: linear-gradient(270deg, rgb(255 255 255 / 0.35), transparent); }
.ve-clip[data-selected] .ve-clip__trim--l { box-shadow: inset 3px 0 0 var(--signal); }
.ve-clip[data-selected] .ve-clip__trim--r { box-shadow: inset -3px 0 0 var(--signal); }

/* Where two clips on the main track meet: a mark inside the track's top
   edge, always there. Faint for a plain cut, the signal for a transition,
   whose length it shows. A click opens the list of transitions at it. */
.ve-trans {
  position: absolute; left: 0; top: 0; z-index: 4; height: 14px; padding: 0;
  border: 0; background: rgb(255 255 255 / 0.22); cursor: pointer;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: background-color var(--dur-state) var(--ease), filter var(--dur-state) var(--ease);
}
.ve-trans[data-on] { clip-path: polygon(0 50%, 7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%); background: linear-gradient(90deg, rgb(var(--ve-trail) / 0.45), var(--signal)); }
.ve-trans:hover, .ve-trans[aria-expanded="true"] { background: var(--signal); filter: drop-shadow(-6px 0 4px rgb(var(--ve-trail) / 0.6)); }
.ve-trans:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 1px; clip-path: none; }

.ve-tl__ph { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; width: 0; pointer-events: none; }
.ve-tl__ph::before { content: ""; position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1.5px; background: var(--signal); box-shadow: -6px 0 8px -2px rgb(var(--ve-trail) / 0.45); }
.ve-tl__phhead { position: absolute; left: -7px; top: 0; width: 14px; height: 16px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); pointer-events: auto; cursor: ew-resize; touch-action: none; }
.ve-tl__hover { position: absolute; left: 0; top: 0; bottom: 0; z-index: 5; width: 1px; background: rgb(241 238 233 / 0.28); pointer-events: none; }
.ve-tl__hovertime { position: sticky; top: 0; display: block; transform: translateX(4px); width: max-content; padding: 1px 4px; font-size: 0.625rem; color: var(--film-ink); background: var(--ve-bg); border: var(--hairline) solid var(--ve-line); }
.ve-tl__snap { position: absolute; left: 0; top: 0; bottom: 0; z-index: 5; width: 1px; background: var(--film-ink); opacity: 0.8; pointer-events: none; }
/* Nothing on the timeline yet: no empty tracks, one invitation. */
.ve-tl[data-empty] { grid-template-columns: minmax(0, 1fr); }
.ve-tl[data-empty] .ve-tl__heads, .ve-tl[data-empty] .ve-tl__scroll { display: none; }
.ve-tl__empty { display: grid; place-content: center; justify-items: center; gap: var(--s3); min-height: 0; margin: var(--s3); padding: var(--s4); border: 1.5px dashed var(--ve-line); text-align: center; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: border-color var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease); }
.ve-tl__empty[hidden] { display: none; }
.ve-tl[data-dropping] .ve-tl__empty, .ve:has(.ve-ghost) .ve-tl[data-empty] .ve-tl__empty { border-color: var(--signal); background: rgb(var(--ve-trail) / 0.06); }
.ve-tl__emptyline { margin: 0; max-width: 36ch; color: var(--film-ink-2); font-size: var(--t-sm); line-height: var(--lh-prose); }
.ve-tl__emptyart { display: grid; gap: 4px; width: 120px; }
.ve-tl__emptyart i { display: block; height: 10px; background: var(--film-raise-hi); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.ve-tl__emptyart i:nth-child(1) { width: 46%; margin-left: 22%; }
.ve-tl__emptyart i:nth-child(2) { width: 100%; height: 16px; background: rgb(var(--ve-trail) / 0.35); box-shadow: -6px 0 10px -6px rgb(var(--ve-trail) / 0.6); }
.ve-tl__emptyart i:nth-child(3) { width: 70%; }
/* Where a dragged clip makes a new track. */
.ve-newlane { position: absolute; left: 148px; right: 0; top: 0; z-index: 6; height: 4px; background: var(--signal); box-shadow: -6px 0 10px -4px rgb(var(--ve-trail) / 0.6); pointer-events: none; }
.ve-newlane[hidden] { display: none; }
.ve-newlane span { position: absolute; left: var(--s2); top: 6px; padding: 1px 6px; background: var(--signal-fill); color: var(--signal-ink); font-size: 0.6875rem; font-weight: 700; }

/* --- notices and dialogs -------------------------------------------------------------- */

.ve-notice {
  position: absolute; left: 50%; top: 62px; z-index: 30; transform: translateX(-50%);
  max-width: min(560px, calc(100% - 32px)); padding: var(--s2) var(--s3);
  background: rgb(29 24 18 / 0.96); color: var(--film-ink); font-size: var(--t-xs); line-height: var(--lh-tight);
  border-left: 3px solid var(--film-ink-3); box-shadow: -6px 8px 24px -10px rgb(0 0 0 / 0.8);
  animation: ve-notice-in var(--dur-face) var(--ease) both; pointer-events: none;
}
.ve-notice[data-kind="good"] { border-left-color: var(--film-ok); }
.ve-notice[data-kind="bad"] { border-left-color: var(--film-bad); }
.ve-notice[data-kind="busy"] { border-left-color: var(--signal); }
@keyframes ve-notice-in { from { opacity: 0; transform: translate(calc(-50% + 14px), 0); } to { opacity: 1; transform: translate(-50%, 0); } }

.ve-layer { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; padding: var(--s4); background: rgb(var(--shade-rgb) / 0.62); }
.ve-layer[hidden] { display: none; }
.ve-dialog {
  width: min(560px, 100%); max-height: calc(100% - 16px); overflow: auto; background: rgb(25 20 15);
  border: var(--hairline) solid var(--ve-line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: -10px 16px 40px -14px rgb(0 0 0 / 0.8);
  animation: ve-dialog-in var(--dur-face) var(--ease) both;
}
@keyframes ve-dialog-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.ve-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s2) var(--s4); }
.ve-dialog__head h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--t-md); text-transform: uppercase; letter-spacing: -0.05em; }
.ve-dialog__body { display: grid; gap: var(--s4); padding: var(--s2) var(--s4) var(--s4); }
.ve-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: var(--hairline) solid var(--ve-line); }
.ve-go {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border: 0;
  background: var(--signal-fill); color: var(--signal-ink); font: inherit; font-weight: 700; font-size: var(--t-sm); text-decoration: none; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background-color var(--dur-state) var(--ease), filter var(--dur-state) var(--ease);
}
.ve-go:hover { background: var(--signal-fill-hover); filter: drop-shadow(-6px 0 6px rgb(var(--ve-trail) / 0.45)); }
.ve-go:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 2px; }
.ve-go .ve-ic { width: 16px; height: 16px; stroke-width: 2.2; }
.ve-estimate { margin: 0; font-size: var(--t-sm); color: var(--film-ink); }
.ve-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.ve-versions__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: var(--hairline) solid rgb(255 255 255 / 0.05); }
.ve-versions__when { font-size: var(--t-xs); color: var(--film-ink); white-space: nowrap; }
.ve-versions__why { font-size: var(--t-xs); color: var(--film-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-progress { position: relative; height: 4px; background: var(--film-raise-hi); overflow: hidden; }
.ve-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--signal); box-shadow: -6px 0 8px var(--signal); transition: width var(--dur-state) linear; }
.ve-progress__fill[data-unknown] { width: 30% !important; animation: ve-sweep 1.4s var(--ease) infinite; }
@keyframes ve-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.ve-progress__line { margin: 0; font-size: var(--t-xs); color: var(--film-ink-2); }
/* Captions: the style chosen, seen over a frame of the film. */
.ve-capstyle { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s3); align-items: start; }
.ve-pills--stack { flex-direction: column; align-items: flex-start; }
.ve-capstyle__see { width: 200px; height: auto; aspect-ratio: 16 / 9; background: #0d0b09; box-shadow: 0 0 0 1px var(--ve-line); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.ve-capwork { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); }
.ve-capwork[hidden] { display: none; }
.ve-note--warn { color: var(--film-ink-2); border-left: 2px solid var(--signal); padding-left: var(--s2); }
.ve-pill--toggle { justify-self: start; }
@media (max-width: 480px) { .ve-capstyle { grid-template-columns: minmax(0, 1fr); } .ve-capstyle__see { width: 100%; } }
.ve-alert { margin: 0; font-size: var(--t-xs); line-height: var(--lh-prose); color: var(--film-bad); }

.ve-dialog--palette { width: min(620px, 100%); align-self: start; margin-top: 8vh; }
.ve-palette__find { width: 100%; min-height: 52px; border-radius: 0; padding: 0 var(--s4); border: 0; border-bottom: var(--hairline) solid var(--ve-line); background: none; color: var(--film-ink); font: inherit; font-size: var(--t-md); }
.ve-palette__find:focus { outline: none; box-shadow: inset 3px 0 0 var(--signal); }
.ve-palette__list { list-style: none; margin: 0; padding: var(--s1); max-height: 52vh; overflow: auto; }
.ve-palette__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s3); cursor: pointer; }
.ve-palette__item[aria-selected="true"] { background: var(--film-raise-hi); box-shadow: inset 3px 0 0 var(--signal); }
.ve-palette__item[aria-disabled] { opacity: 0.45; }
.ve-palette__group { font-size: var(--t-xs); color: var(--film-ink-3); }
.ve-palette__keys { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--film-ink-3); }
.ve-palette__none { padding: var(--s3); color: var(--film-ink-3); }
.ve-dialog--sheet { width: min(860px, 100%); }
.ve-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4) var(--s6); padding: var(--s2) var(--s4) var(--s5); }
.ve-sheet__group h4 { margin: 0 0 var(--s2); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--film-ink-3); font-weight: 600; }
.ve-sheet dl { margin: 0; }
.ve-sheet__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 5px 0; border-bottom: var(--hairline) solid rgb(255 255 255 / 0.05); font-size: var(--t-xs); }
.ve-sheet__row dd { margin: 0; white-space: nowrap; }
.ve-sheet kbd { display: inline-block; min-width: 22px; padding: 1px 5px; border: var(--hairline) solid var(--ve-line); border-radius: 2px; font-family: var(--font-mono); font-size: 0.6875rem; text-align: center; color: var(--film-ink); }

/* --- the phone bar is only for narrow screens ------------------------------------------ */

.ve-phonebar { display: none; }

/* --- smaller laptops ---------------------------------------------------------------- */

@media (max-width: 1180px) {
  .ve-main { grid-template-columns: 200px minmax(0, 1fr) 268px; }
  .ve-tool__key { display: none; }
}
@media (max-width: 1000px) {
  .ve-film__line { display: none; }
  .ve-title { flex-basis: 180px; }
}

/* --- tablets and phones: the picture and the timeline; media and settings
       come up over the picture when asked for ---------------------------------------- */

@media (max-width: 860px) {
  main:has(.stage[data-state="video-edit"]) { padding-inline: var(--s2); padding-top: var(--s1); padding-bottom: var(--s1); }
  .ve { grid-template-rows: auto minmax(160px, 1fr) 0 auto minmax(120px, var(--ve-tl-h, 40%)) auto; height: max(520px, calc(100dvh - 150px)); }
  .ve-th__tag { display: none; }
  .ve-bar { flex-wrap: wrap; padding-right: calc(var(--s2) + 28px); row-gap: var(--s1); }
  .ve-title { flex: 1 1 140px; }
  .ve-menus { order: 3; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .ve-film { margin-left: 0; }
  /* The Film panel across the editor, 8 px from each side. */
  .ve-filmpop { width: calc(100% - 16px); }
  .ve-export span { display: none; }
  .ve-export { padding: 0 var(--s3); }
  .ve-main { grid-template-columns: minmax(0, 1fr); position: relative; }
  .ve-bin, .ve-inspect {
    position: absolute; top: 0; bottom: 0; z-index: 8; width: min(420px, 100%);
    background: var(--ve-bg); box-shadow: 0 0 0 1px var(--ve-line), -8px 12px 32px -8px rgb(0 0 0 / 0.7);
    transform: translateX(-104%); transition: transform var(--dur-face) var(--ease); visibility: hidden;
  }
  .ve-bin { left: 0; border-right: 0; }
  .ve-inspect { right: 0; left: auto; border-left: 0; transform: translateX(104%); }
  .ve[data-panel="bin"] .ve-bin, .ve[data-panel="inspect"] .ve-inspect { transform: none; visibility: visible; }
  /* An open panel takes the picture, the tools and the timeline's room, so
     a phone gets a whole screen of it rather than a strip. */
  .ve:is([data-panel="bin"], [data-panel="inspect"]) .ve-main { grid-row: 2 / 6; }
  .ve:is([data-panel="bin"], [data-panel="inspect"]) :is(.ve-split, .ve-tools, .ve-tl) { display: none; }
  .ve-phonebar .ve-btn[aria-pressed="true"] { color: var(--film-ink); box-shadow: inset 0 -2px 0 var(--signal); }
  .ve-phonebar { display: flex; gap: var(--s2); padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom)); border-top: var(--hairline) solid var(--ve-line); }
  .ve-phonebar .ve-btn { flex: 1; min-height: 40px; }
  .ve-tool__label { display: none; }
  .ve-tool { min-width: 40px; justify-content: center; }
  /* Onto a second row rather than sideways out of reach: on a phone the
     zoom tools were past the edge, behind a scroll nothing showed. */
  .ve-tools { flex-wrap: wrap; row-gap: var(--s1); overflow-x: visible; }
  /* The rule after the last group divided it from the view tools, which here
     sit apart at the far end or on the row below: it led to nothing. */
  .ve-tools__group:has(+ .ve-tools__group--end) { border-right: 0; }
  .ve-tl { grid-template-columns: 64px minmax(0, 1fr); }
  /* The narrow heads keep the two fits; taller and shorter are in View. */
  .ve-tl__corner [data-vzoom] { display: none; }
  .ve-tl__corner { padding: 0 2px; }
  .ve-newlane { left: 64px; }
  .ve-th__btns { display: none; }
  /* A phone has its own volume buttons. */
  .ve-master { display: none; }
  .ve-tl__corner .ve-btn span { display: none; }
  .ve-transport { grid-template-columns: auto 1fr auto; }
  .ve-transport__keys { justify-self: center; }
}
@media (max-width: 480px) {
  .ve-saved { display: none; }
  .ve-transport [data-cmd="play.start"], .ve-transport [data-cmd="play.end"] { display: none; }
}
@media (hover: none) {
  .ve-clip__trim { width: 18px; }
  .ve-clip[data-sounds] .ve-clip__fadegrip { display: block; width: 14px; height: 14px; margin-left: -7px; }
  /* Clear of the larger fade grip, which is always shown here and sat on the
     first letter of the clip's name ("ideo train.mp4"). */
  .ve-clip[data-sounds] .ve-clip__name { left: 18px; }
}

/* A finger instead of a pointer: the editor's bars are dense, and a reach
   lent past a button would land on its neighbour or be cut by the bar, so
   on touch the buttons themselves are a finger tall (and the square ones a
   finger wide). The building's reach (styles.css) covers the small pills and
   the media list's buttons. The timeline's own handles -- a track's name, its
   height grip, the ruler and the two fit buttons in its corner -- stay as
   they are: the timeline is worked by dragging, and each of those has a
   menu's 44 px row (View, Clip) as well. */
@media (pointer: coarse) {
  /* The building's reach (styles.css); a pill lends its ::before, a plan's
     mark having its ::after. */
  :where(.ve-btn--small, .ve-item__add, .ve-pill) { position: relative; }
  :where(.ve-btn--small, .ve-item__add)::after,
  :where(.ve-pill)::before { content: ""; position: absolute; inset: var(--hit-reach); }
  .ve-btn:not(.ve-btn--small), .ve-menubtn, .ve-film, .ve-export, .ve-tool, .ve-play,
  .ve-shelf__del, .ve-shelf__new, .ve-name { min-height: var(--hit); }
  .ve-play { height: var(--hit); }
  .ve-btn--icon, .ve-tool--icon { width: var(--hit); }
  .ve-menubtn, .ve-tool, .ve-export { min-width: var(--hit); }
  .ve-corner { width: var(--hit); height: var(--hit); }
  .ve-menu__item, .ve-go, .ve-pill, .ve-pill--preset { min-height: var(--hit); }
  .ve-pill { min-width: var(--hit); }
  .ve-item__add { flex: none; width: var(--hit); height: var(--hit); }
  .ve-item__more { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ve-menu, .ve-dialog, .ve-notice, .ve-tip-pop { animation: none; }
  .ve-tl[data-settling] :is(.ve-clip, .ve-trans, .ve-th, .ve-lane, .ve-tl__lanes) { transition: none; }
  .ve-bin, .ve-inspect, .ve-progress__fill { transition: none; }
  .ve-progress__fill[data-unknown] { animation: none; width: 100% !important; opacity: 0.4; }
}