/* Snapline Studio page: the editor scene.
 *
 * The Studio editor in Dark Mode, drawn from the app's source and measured
 * against a replica of its window rendered on macOS 26 (see DESIGN.md,
 * Realistic scenes, the Studio page's entry). It restates the few shared
 * scene parts it needs from landing.css (the size container, the stage and
 * its point unit, baked documents) rather than importing 5,000 lines of the
 * homepage's demos, as legal.css restates the page's tokens.
 *
 * Every size is a multiple of --pt, one point of the stage's screen, except
 * inside the canvas, which is a size container: there the frame is in
 * percent and container units of the canvas, and the recording in --rp, one
 * point of the 1440 by 900 point recording. (An unregistered custom property
 * holding container units resolves against the nearest container where it is
 * used, so --pt is never used inside the canvas.)
 */

.studio-demo {
  min-width: 0;
  margin: 0 0 calc(var(--step) * 6);
  container-type: inline-size;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.studio-demo img { -webkit-user-drag: none; }

.mac-stage {
  --pt: calc(100cqw / var(--screen-w, 720));
  --mac-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  position: relative;
  overflow: hidden;
  font-family: var(--mac-font);
  font-size: calc(var(--pt) * 13);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
}

/* A made-up document is a picture of itself (scripts/bake-scenes.py); what
   the take changes stays live over it, placed in percent. */
.mac-stage [data-bake] { position: relative; }

.mac-stage .baked {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: fill;
}

.mac-stage .baked-live {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
}

/* The screen: the window on the section's wash, the way the homepage's
   scenes sit on theirs. */
.sv-stage {
  --screen-w: 1164;
  --win-w: 1100;
  --win-h: 772;
  --win-at: 32;
  /* StudioChrome in Dark Mode on macOS 26: the window background, and the
     matte, lanes and ruler moved from it (light 0.11 / dark 0.3, and so on). */
  --window: #1e1e1e;
  --matte: #141414;
  --lane: #181818;
  --lane-alt: #1b1b1b;
  --ruler: #2b2b2b;
  --separator: rgba(255, 255, 255, 0.098);
  --label: rgba(255, 255, 255, 0.85);
  --secondary: rgba(255, 255, 255, 0.55);
  --tertiary: rgba(255, 255, 255, 0.25);
  --accent: #007aff;
  aspect-ratio: 1164 / 836;
  border-radius: 24px;
  background: #f1e6ff;
}

.sv-stage img { display: block; }

/* The window: macOS 26's corner, a light hairline inside the dark edge, and
   the window server's shadow. */
.sv-win {
  position: absolute;
  left: calc(var(--pt) * var(--win-at));
  top: calc(var(--pt) * var(--win-at));
  width: calc(var(--pt) * var(--win-w));
  height: calc(var(--pt) * var(--win-h));
  overflow: hidden;
  border-radius: calc(var(--pt) * 26);
  background: var(--matte);
  color: var(--label);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.7),
    0 calc(var(--pt) * 22) calc(var(--pt) * 48) calc(var(--pt) * -6) rgba(30, 10, 70, 0.45);
}

/* The window's content (StudioEditorView): the stage column, the rail and
   the Inspector over a divider and the 156-point timeline. */
.sv-top {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  height: calc(var(--pt) * (var(--win-h) - 157));
  box-shadow: 0 calc(var(--pt) * 1) 0 var(--separator);
}

.sv-col { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.sv-stagearea { position: relative; flex: 1; }

/* The stage's padding (18, 22, 14, 22) under the 52-point toolbar, and the
   canvas fitted at its own shape in it (StudioStageView, Fit). */
.sv-fit {
  position: absolute;
  inset: calc(var(--pt) * 70) calc(var(--pt) * 22) calc(var(--pt) * 14);
  display: grid;
  place-items: center;
  container-type: size;
}

/* The canvas: Content, never the appearance's (ADR 0001). Indigo,
   #4f46e5 to #9333ea corner to corner, which on a 16:10 canvas is the
   122-degree line through its corners. Its edge is the player's 0.5-point
   separator line. */
.sv-canvas {
  position: relative;
  width: min(100cqw, 160cqh);
  aspect-ratio: 16 / 10;
  background: linear-gradient(122deg, #4f46e5, #9333ea);
  box-shadow: 0 0 0 0.5px var(--separator);
  container-type: size;
}

/* The frame (StudioFrameLayout): padding 8 % of the canvas's shorter side,
   so the 16:10 recording fills 84 % of it; corners 2 % of that side; the
   shadow's blur 2.5 % of it, a third of that downward, black at 0.425. */
.sv-frame {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  border-radius: 2cqh;
  box-shadow: 0 0.8333cqh 2.5cqh rgba(0, 0, 0, 0.425);
}

.sv-rec {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* The recording layer: the screen, the cursor and the click effects, one
   transform (StudioCompositor): scale by the level about the crop's corner.
   The rest is pushed in on the switch at 2x. */
.sv-take {
  position: absolute;
  inset: 0;
  container-type: size;
  --rp: calc(100cqw / 1440);
  transform-origin: 0 0;
  transform: scale(var(--lv, 2)) translate(calc(var(--x0, 0.5) * -100%), calc(var(--y0, 0.1556) * -100%));
  will-change: transform;
}

.sv-take > .sv-page { position: absolute; inset: 0; overflow: hidden; }

/* What the take changes on the page: the fourth task's box, the progress
   bar and the switch. Styled here because they stay live over the picture
   (the rest of the page's styles live in site/scenes/documents.css). */
.sv-page .nw-check {
  flex: none;
  width: calc(var(--rp) * 20);
  height: calc(var(--rp) * 20);
  border-radius: calc(var(--rp) * 6);
  box-shadow: inset 0 0 0 calc(var(--rp) * 1.6) #c7c7cc;
}

.sv-page .nw-check.is-on {
  background: #34c759 url("/assets/macos/sf/checkmark.png") center / 115% no-repeat;
  box-shadow: none;
}

.sv-page .nw-bar {
  display: block;
  flex: none;
  width: calc(var(--rp) * 220);
  height: calc(var(--rp) * 6);
  border-radius: calc(var(--rp) * 3);
  background: #ececf0;
}

.sv-page .nw-bar i { display: block; width: 37.5%; height: 100%; border-radius: inherit; background: #34c759; }

.sv-page .nw-bar.is-on i { width: 50%; }

.sv-page .nw-switch {
  position: relative;
  flex: none;
  width: calc(var(--rp) * 38);
  height: calc(var(--rp) * 22);
  border-radius: calc(var(--rp) * 11);
  background: #e5e5ea;
}

.sv-page .nw-switch::after {
  content: "";
  position: absolute;
  left: calc(var(--rp) * 2);
  top: calc(var(--rp) * 2);
  width: calc(var(--rp) * 18);
  height: calc(var(--rp) * 18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--rp) * 1) calc(var(--rp) * 2) rgba(0, 0, 0, 0.2);
}

.sv-page .nw-switch.is-on { background: #34c759; }

.sv-page .nw-switch.is-on::after { left: calc(var(--rp) * 18); }

/* Live over the picture, each where the bake measured it. */
.sv-page .baked-live { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }

/* The recorded cursor, redrawn (StudioCursorDrawing): the arrow the system
   showed, at 160 % of its recorded size and placed by its hot spot (5, 5 of
   28 by 40 points), with no shadow added. */
.sv-cursor {
  position: absolute;
  left: calc(var(--rp) * var(--cx, 1369));
  top: calc(var(--rp) * var(--cy, 365));
  width: 0;
  height: 0;
}

.sv-cursor img {
  position: absolute;
  left: calc(var(--rp) * -8);
  top: calc(var(--rp) * -8);
  width: calc(var(--rp) * 44.8);
  height: auto;
  max-width: none;
}

/* A click's Ring (StudioClickEffects): yellow, 60 % of 50 points, its radius
   from 6 to 24 points over 0.55 s, 2.4 points wide, fading as it grows. The
   rest is 0.2 s into the second click. */
.sv-ring {
  position: absolute;
  left: calc(var(--rp) * var(--rx, 1369));
  top: calc(var(--rp) * var(--ry, 365));
  width: calc(var(--rp) * (var(--rr, 12.55) * 2 + 2.4));
  height: calc(var(--rp) * (var(--rr, 12.55) * 2 + 2.4));
  box-sizing: border-box;
  border: calc(var(--rp) * 2.4) solid #ffcc00;
  border-radius: 50%;
  opacity: var(--ro, 0.636);
  transform: translate(-50%, -50%);
}

/* The status bar (StudioStatusBar): 26 points of window background, 11-point
   secondary text: the preview zoom, the canvas and frame rate, and the
   project's size on disk at the right. */
.sv-status {
  position: relative;
  flex: none;
  height: calc(var(--pt) * 26);
  margin-top: calc(var(--pt) * 1);
  background: var(--window);
  box-shadow: 0 calc(var(--pt) * -1) 0 var(--separator);
  font-size: calc(var(--pt) * 11);
  line-height: calc(var(--pt) * 26);
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sv-status > span { position: absolute; top: calc(var(--pt) * -1.5); }

.sv-status__zoom { left: calc(var(--pt) * 13); display: flex; align-items: center; gap: calc(var(--pt) * 3); color: var(--label); }

.sv-status__zoom img { width: calc(var(--pt) * 10.5); height: calc(var(--pt) * 10.5); opacity: 0.85; }

.sv-status__canvas { left: calc(var(--pt) * 57); }

.sv-status__size { right: calc(var(--pt) * 10); }

/* The rail (StudioToolRail) and the Inspector: columns of the window's own
   background with a line at the leading edge, run up under the toolbar. */
.sv-rail,
.sv-insp {
  position: relative;
  flex: none;
  background: var(--window);
  box-shadow: inset calc(var(--pt) * 1) 0 0 var(--separator);
}

.sv-rail { width: calc(var(--pt) * 50); }

/* Each section a small accessory-bar toggle, its key's number at the foot of
   its symbol; the open one in the accent colour on the bar's highlight. */
.sv-railbtn {
  position: absolute;
  left: calc(var(--pt) * 4);
  width: calc(var(--pt) * 42);
  height: calc(var(--pt) * 28);
  border-radius: calc(var(--pt) * 6);
}

.sv-railbtn:nth-child(1) { top: calc(var(--pt) * 60); }
.sv-railbtn:nth-child(2) { top: calc(var(--pt) * 90); }
.sv-railbtn:nth-child(3) { top: calc(var(--pt) * 120); }
.sv-railbtn:nth-child(5) { top: calc(var(--pt) * 161); }

.sv-railbtn i {
  position: absolute;
  left: calc(var(--pt) * 11);
  top: calc(var(--pt) * 4);
  width: calc(var(--pt) * 20);
  height: calc(var(--pt) * 20);
  background: var(--label);
  -webkit-mask: var(--sym) center / contain no-repeat;
  mask: var(--sym) center / contain no-repeat;
}

.sv-railbtn b {
  position: absolute;
  left: calc(var(--pt) * 29);
  top: calc(var(--pt) * 13);
  font-family: ui-rounded, var(--mac-font);
  font-size: calc(var(--pt) * 10);
  font-weight: 600;
  color: var(--secondary);
}

.sv-railbtn.is-on { background: #3a3a3a; }

.sv-railbtn.is-on i { background: var(--accent); }

.sv-railbtn.is-on b { color: var(--accent); }

.sv-raildiv {
  position: absolute;
  left: calc(var(--pt) * 13);
  top: calc(var(--pt) * 154);
  width: calc(var(--pt) * 26);
  height: calc(var(--pt) * 1);
  background: var(--separator);
}

/* The Inspector (StudioInspector): 288 points, the open section's name in
   15-point bold with its readout, then the grouped form. */
.sv-insp { width: calc(var(--pt) * 288); font-size: calc(var(--pt) * 13); }

.sv-insp__head {
  position: absolute;
  left: calc(var(--pt) * 16);
  right: calc(var(--pt) * 16);
  top: calc(var(--pt) * 57);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: calc(var(--pt) * 27);
  font-size: calc(var(--pt) * 15);
}

.sv-insp__head::after {
  content: "";
  position: absolute;
  left: calc(var(--pt) * -16);
  right: calc(var(--pt) * -16);
  bottom: calc(var(--pt) * -1);
  height: calc(var(--pt) * 1);
  background: var(--separator);
}

.sv-insp__head b { font-weight: 700; }

.sv-insp__head span { font-size: calc(var(--pt) * 10); color: var(--secondary); font-variant-numeric: tabular-nums; }

.sv-insp__sec {
  position: absolute;
  left: calc(var(--pt) * 30);
  font-size: calc(var(--pt) * 13);
  font-weight: 700;
}

.sv-insp__sec:nth-of-type(1) { top: calc(var(--pt) * 105); }
.sv-insp__sec:nth-of-type(2) { top: calc(var(--pt) * 367); }

.sv-group {
  position: absolute;
  left: calc(var(--pt) * 20);
  width: calc(var(--pt) * 248);
  border-radius: calc(var(--pt) * 10);
  background: #252525;
}

.sv-fill { top: calc(var(--pt) * 134); height: calc(var(--pt) * 204); }

.sv-frameset { top: calc(var(--pt) * 396); height: calc(var(--pt) * 118); }

/* Fill: six to a row in 30-point columns, each swatch 34 by 26 at radius 6,
   ringed in the accent when it is the background (BackgroundSwatch). */
.sv-swatches {
  position: absolute;
  left: calc(var(--pt) * 8);
  top: calc(var(--pt) * 11);
  display: grid;
  grid-template-columns: repeat(6, calc(var(--pt) * 34));
  column-gap: calc(var(--pt) * 2);
  row-gap: calc(var(--pt) * 6);
}

.sv-sw {
  display: grid;
  place-items: center;
  height: calc(var(--pt) * 26);
  border-radius: calc(var(--pt) * 6);
  background: var(--g, rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 calc(var(--pt) * 1) var(--separator);
}

.sv-sw.is-on { box-shadow: inset 0 0 0 calc(var(--pt) * 2) var(--accent); }

.sv-sw img { width: calc(var(--pt) * 17.3); height: calc(var(--pt) * 17.3); opacity: 0.55; }

.sv-btnrow {
  position: absolute;
  left: calc(var(--pt) * 10);
  right: calc(var(--pt) * 10);
  height: calc(var(--pt) * 45);
  box-shadow: inset 0 calc(var(--pt) * 1) 0 rgba(255, 255, 255, 0.04);
}

.sv-btnrow:nth-of-type(1) { top: calc(var(--pt) * 114); }
.sv-btnrow:nth-of-type(2) { top: calc(var(--pt) * 159); }

.sv-push {
  position: absolute;
  left: 0;
  top: calc(var(--pt) * 10);
  padding: 0 calc(var(--pt) * 12);
  border-radius: calc(var(--pt) * 6);
  background: #353535;
  line-height: calc(var(--pt) * 24);
  white-space: nowrap;
}

/* Frame: a label, a small stepped slider (macOS 26: a thin track, the
   accent on its minimum side, a capsule knob, a tick per step) and the
   value, 44 points, trailing. */
.sv-slrow {
  position: absolute;
  left: calc(var(--pt) * 10);
  right: calc(var(--pt) * 10);
  display: flex;
  align-items: center;
  height: calc(var(--pt) * 37);
}

.sv-slrow:nth-child(1) { top: 0; }
.sv-slrow:nth-child(2) { top: calc(var(--pt) * 39.25); }
.sv-slrow:nth-child(3) { top: calc(var(--pt) * 78.5); }

.sv-slrow:nth-child(n + 2)::before {
  content: "";
  position: absolute;
  inset: calc(var(--pt) * -1.5) 0 auto;
  height: calc(var(--pt) * 1);
  background: rgba(255, 255, 255, 0.04);
}

.sv-slrow em {
  margin-left: auto;
  font-size: calc(var(--pt) * 10);
  font-style: normal;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

.sv-slider {
  position: absolute;
  left: calc(var(--pt) * 103);
  top: calc(var(--pt) * 17.5);
  width: calc(var(--pt) * 73);
  height: calc(var(--pt) * 4);
  border-radius: calc(var(--pt) * 2);
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / calc(var(--pt) * 5 + var(--pt) * 63 * var(--v)) 100% no-repeat,
    #3a3a3a;
}

.sv-slider::before {
  content: "";
  position: absolute;
  left: calc(var(--pt) * 5);
  right: calc(var(--pt) * 5);
  top: calc(var(--pt) * 6.5);
  height: calc(var(--pt) * 2);
  background: repeating-linear-gradient(90deg, #494949 0 calc(var(--pt) * 1), transparent 0 calc(var(--pt) * 63 / var(--n)));
}

.sv-slider::after {
  content: "";
  position: absolute;
  left: calc(var(--pt) * 63 * var(--v));
  top: calc(var(--pt) * -6.5);
  width: calc(var(--pt) * 10);
  height: calc(var(--pt) * 17);
  border-radius: calc(var(--pt) * 5);
  background: #dfdfdf;
  box-shadow: 0 calc(var(--pt) * 0.5) calc(var(--pt) * 1.5) rgba(0, 0, 0, 0.4);
}

/* The timeline pane (StudioTimelinePane): the 32-point bar, a 150-point
   header column and the lanes, all on the window's background. */
.sv-tl {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--pt) * 156);
  background: var(--window);
}

.sv-tlbar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--pt) * 32);
  box-shadow: 0 calc(var(--pt) * 1) 0 var(--separator);
}

.sv-tlbtn {
  position: absolute;
  left: calc(var(--pt) * var(--x));
  top: calc(var(--pt) * 4);
  display: grid;
  place-items: center;
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 24);
  border-radius: calc(var(--pt) * 6);
}

.sv-tlbtn--end { left: auto; right: calc(var(--pt) * (var(--x) - 28)); }

.sv-tlbtn.is-on { background: #3a3a3a; }

.sv-tlbtn img { width: calc(var(--pt) * 17.3); height: calc(var(--pt) * 17.3); opacity: 0.85; }

/* The snapping glyph is wider than the others' box, so it is drawn in a
   24-point box at the same scale. */
.sv-tlbtn--wide img { width: calc(var(--pt) * 20.8); height: calc(var(--pt) * 20.8); }

.sv-tlbtn.is-off img { opacity: 0.25; }

/* The timeline zoom's slider, at Fit: the knob at its minimum. */
.sv-tlslider {
  position: absolute;
  right: calc(var(--pt) * 72);
  top: calc(var(--pt) * 14);
  width: calc(var(--pt) * 120);
  height: calc(var(--pt) * 4);
  border-radius: calc(var(--pt) * 2);
  background: #343434;
}

.sv-tlslider::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--pt) * -5);
  width: calc(var(--pt) * 17.5);
  height: calc(var(--pt) * 14);
  border-radius: calc(var(--pt) * 7);
  background: #dedede;
  box-shadow: 0 calc(var(--pt) * 0.5) calc(var(--pt) * 1.5) rgba(0, 0, 0, 0.4);
}

/* The header column: the timeline's length over each track's symbol and
   name, a line under each row. */
.sv-heads {
  position: absolute;
  left: 0;
  top: calc(var(--pt) * 33);
  bottom: 0;
  width: calc(var(--pt) * 150);
  box-shadow: calc(var(--pt) * 1) 0 0 var(--separator);
}

.sv-heads::before,
.sv-heads::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--pt) * 1);
  background: var(--separator);
}

.sv-heads::before { top: calc(var(--pt) * 26); box-shadow: 0 calc(var(--pt) * 29) 0 var(--separator); }
.sv-heads::after { top: calc(var(--pt) * 118); }

.sv-heads > span { position: absolute; left: calc(var(--pt) * 10); display: flex; align-items: center; white-space: nowrap; }

.sv-heads__len {
  top: calc(var(--pt) * -1);
  left: calc(var(--pt) * 12) !important;
  height: calc(var(--pt) * 26);
  font-size: calc(var(--pt) * 10.5);
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

.sv-heads__track { gap: calc(var(--pt) * 7); height: calc(var(--pt) * 16); font-size: calc(var(--pt) * 11.5); font-weight: 500; }

.sv-heads__track--zoom { top: calc(var(--pt) * 32); }
.sv-heads__track--screen { top: calc(var(--pt) * 78); }

.sv-heads__track img { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); opacity: 0.55; }

/* The lanes (StudioTimelineView): the ruler in its band, a thin Zoom lane, a
   Screen lane, a line under each. The time axis runs 12 points in from
   either end, so the playhead's knob shows at 0 and at the end. */
.sv-lanes {
  position: absolute;
  left: calc(var(--pt) * 151);
  right: 0;
  top: calc(var(--pt) * 33);
  bottom: 0;
  background:
    linear-gradient(var(--separator), var(--separator)) 0 calc(var(--pt) * 26) / 100% calc(var(--pt) * 1) no-repeat,
    linear-gradient(var(--separator), var(--separator)) 0 calc(var(--pt) * 55) / 100% calc(var(--pt) * 1) no-repeat,
    linear-gradient(var(--separator), var(--separator)) 0 calc(var(--pt) * 118) / 100% calc(var(--pt) * 1) no-repeat,
    linear-gradient(var(--ruler), var(--ruler)) 0 0 / 100% calc(var(--pt) * 26) no-repeat,
    linear-gradient(var(--lane), var(--lane)) 0 calc(var(--pt) * 27) / 100% calc(var(--pt) * 28) no-repeat,
    linear-gradient(var(--lane-alt), var(--lane-alt)) 0 calc(var(--pt) * 56) / 100% calc(var(--pt) * 62) no-repeat;
}

.sv-axis { position: absolute; inset: 0 calc(var(--pt) * 12); }

/* A second a label here (64 points apart at the least): majors 9 points tall
   in the secondary label colour, four minors between, 4 points, tertiary. */
.sv-ruler {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + var(--pt) * 1);
  height: calc(var(--pt) * 26);
  background:
    linear-gradient(90deg, #9f9f9f 0 calc(var(--pt) * 1), transparent 0) 0 100% / calc((100% - var(--pt) * 1) / 10) calc(var(--pt) * 9) repeat-x,
    linear-gradient(90deg, #5f5f5f 0 calc(var(--pt) * 1), transparent 0) 0 100% / calc((100% - var(--pt) * 1) / 50) calc(var(--pt) * 4) repeat-x;
}

.sv-ruler span {
  position: absolute;
  left: calc((100% - var(--pt) * 1) * var(--s) / 10 + var(--pt) * 3);
  top: calc(var(--pt) * 2);
  font-size: calc(var(--pt) * 10);
  line-height: calc(var(--pt) * 14);
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

/* A clip: its track's colour laid thinly over the lane (0.30 in Dark Mode),
   edged in it at 0.75, radius 5, 3 points in from the lane's edges. */
.sv-clip {
  position: absolute;
  left: calc(100% * var(--a) / 10 + var(--pt) * 1);
  width: calc(100% * (var(--b) - var(--a)) / 10 - var(--pt) * 2);
  overflow: hidden;
  border-radius: calc(var(--pt) * 5);
  font-size: calc(var(--pt) * 10.5);
  white-space: pre;
}

.sv-clip b { font-weight: 600; }

/* Zoom: systemPurple, its level and what it follows written on it. */
.sv-clip--zoom {
  top: calc(var(--pt) * 30);
  height: calc(var(--pt) * 22);
  padding-left: calc(var(--pt) * 6);
  background: rgba(219, 52, 242, 0.3);
  box-shadow: inset 0 0 0 calc(var(--pt) * 1) rgba(219, 52, 242, 0.75);
  line-height: calc(var(--pt) * 22);
  color: var(--secondary);
}

.sv-clip--zoom b { color: var(--label); }

/* Screen: systemBlue, the filmstrip over a 16-point band for the waveform,
   and the clip's name and length on a dark chip at its top left. */
.sv-clip--screen {
  top: calc(var(--pt) * 59);
  height: calc(var(--pt) * 56);
  background: rgba(0, 145, 255, 0.3);
}

.sv-clip--screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--pt) * 1) rgba(0, 145, 255, 0.75);
}

.sv-film {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--pt) * 40);
  opacity: 0.92;
  background-size: calc(var(--pt) * 64) 100%;
  background-repeat: repeat-x;
}

.sv-wave {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: calc(var(--pt) * 16);
  background: rgba(48, 209, 88, 0.3);
  box-shadow: inset 0 calc(var(--pt) * 1) 0 rgba(48, 209, 88, 0.6);
  fill: rgba(48, 209, 88, 0.9);
}

.sv-chip {
  position: absolute;
  left: calc(var(--pt) * 4);
  top: calc(var(--pt) * 3);
  height: calc(var(--pt) * 15);
  padding: 0 calc(var(--pt) * 5);
  border-radius: calc(var(--pt) * 4);
  background: rgba(0, 0, 0, 0.55);
  line-height: calc(var(--pt) * 15);
  color: rgba(255, 255, 255, 0.75);
}

.sv-chip b { color: #fff; }

/* The playhead (StudioPlayheadView): the label colour, a 2-point line under a
   knob 12 points wide, a 6-point block over a 6-point point. */
.sv-playhead {
  position: absolute;
  left: calc(100% * var(--t, 6.9) / 10);
  top: 0;
  bottom: 0;
  width: 0;
}

.sv-playhead::before {
  content: "";
  position: absolute;
  left: calc(var(--pt) * -6);
  top: 0;
  width: calc(var(--pt) * 12);
  height: calc(var(--pt) * 12);
  background: var(--label);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}

.sv-playhead::after {
  content: "";
  position: absolute;
  left: calc(var(--pt) * -1);
  top: calc(var(--pt) * 10);
  bottom: 0;
  width: calc(var(--pt) * 2);
  background: var(--label);
}

/* The toolbar (StudioEditorToolbarContent), unified and icon-only, its items
   macOS 26's glass pills, placed where AppKit put them in a replica of the
   window: the lights, Undo and Redo (off: nothing to undo yet), the aspect
   menu, the document's title cut to fit, the transport in one pill, and at
   the trailing end the Inspector button and Export, the one prominent
   control. */
.sv-toolbar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--pt) * 52);
  font-size: calc(var(--pt) * 13);
  white-space: nowrap;
}

.sv-toolbar > * { position: absolute; top: calc(var(--pt) * 8); }

.sv-lights { top: calc(var(--pt) * 19); left: calc(var(--pt) * 19); display: flex; gap: calc(var(--pt) * 9); }

.sv-lights i {
  width: calc(var(--pt) * 14);
  height: calc(var(--pt) * 14);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

.sv-lights i:nth-child(1) { background: #ff5f57; }
.sv-lights i:nth-child(2) { background: #febc2e; }
.sv-lights i:nth-child(3) { background: #28c840; }

.sv-pill {
  display: flex;
  align-items: center;
  height: calc(var(--pt) * 36);
  border-radius: calc(var(--pt) * 18);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 calc(var(--pt) * 1) calc(var(--pt) * 3) rgba(0, 0, 0, 0.25);
}

.sv-pill img { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); opacity: 0.85; }

.sv-pill img.is-off { opacity: 0.25; }

.sv-pill--undo { left: calc(var(--pt) * 98); width: calc(var(--pt) * 70); gap: calc(var(--pt) * 12); padding-left: calc(var(--pt) * 7); }

.sv-pill--aspect { left: calc(var(--pt) * 178); width: calc(var(--pt) * 75); justify-content: center; gap: calc(var(--pt) * 2); color: var(--secondary); }

.sv-pill--aspect img,
.sv-speed img { width: calc(var(--pt) * 11); height: calc(var(--pt) * 11); opacity: 0.55; }

/* The project's name, cut to fit before the transport as AppKit cut it
   ("Studio Project 202…"). */
.sv-title {
  top: calc(var(--pt) * 16);
  left: calc(var(--pt) * 265);
  width: calc(var(--pt) * 150);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
  line-height: calc(var(--pt) * 20);
}

.sv-pill--transport { left: calc(var(--pt) * 421); width: calc(var(--pt) * 307); padding-left: calc(var(--pt) * 6); }

.sv-pill--transport > img { margin-right: calc(var(--pt) * 24.5); }

.sv-pill--transport > img:nth-child(3) { margin-right: calc(var(--pt) * 18); }

.sv-time { color: var(--secondary); font-variant-numeric: tabular-nums; }

.sv-speed { display: flex; align-items: center; gap: calc(var(--pt) * 3); margin-left: calc(var(--pt) * 19); color: var(--secondary); }

.sv-loop {
  display: grid;
  place-items: center;
  width: calc(var(--pt) * 36);
  height: calc(var(--pt) * 36);
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.sv-loop img { opacity: 1; }

.sv-pill--insp { right: calc(var(--pt) * 125); width: calc(var(--pt) * 38); justify-content: center; }

/* Export, glassProminent: the accent under glass, its glyph and its word in
   semibold. */
.sv-pill--export {
  right: calc(var(--pt) * 9);
  width: calc(var(--pt) * 106);
  justify-content: center;
  gap: calc(var(--pt) * 5);
  background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%), var(--accent);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 calc(var(--pt) * 1) calc(var(--pt) * 3) rgba(0, 0, 0, 0.3);
  font-weight: 600;
  color: #fff;
}

.sv-pill--export img { width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); margin-top: calc(var(--pt) * -2); opacity: 1; }

/* Narrow: the window as it is with the Inspector hidden, 920 points wide (the
   narrowest at which every toolbar item still fits, Export included) and
   short enough that Fit shows the canvas at the size it has beside the
   Inspector, so the baked recording is the same picture. */
@media (max-width: 600px) {
  .sv-stage { --screen-w: 968; --win-w: 920; --win-h: 716.75; --win-at: 24; aspect-ratio: 968 / 764.75; border-radius: 16px; }
  .sv-insp { display: none; }
}