/* ── Movie Matcher Film ───────────────────────────────────────────────────
   Authoring space is a fixed 1920×1080 stage. Everything on it is laid out in
   film pixels; the stage is CSS-scaled to fit whatever viewport it lands in,
   so a frame grabbed headless at 1920×1080 is the same frame you scrub here.

   THE ONE RULE: nothing in here may animate itself. No transitions, no
   @keyframes, no self-playing media on the stage. Every moving value is
   written per frame by fx.js from the film clock. Break it and the export
   drifts from the preview. (The editor chrome below the stage is exempt —
   it never appears in a frame.)                                           */

@font-face { font-family: Selecta; src: url('fonts/Selecta-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: Selecta; src: url('fonts/Selecta-Italic.woff2')  format('woff2'); font-weight: 400; font-style: italic;  font-display: block; }
@font-face { font-family: Selecta; src: url('fonts/Selecta-Medium.woff2')  format('woff2'); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: Selecta; src: url('fonts/Selecta-Bold.woff2')    format('woff2'); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: Kalice;  src: url('fonts/Kalice-Regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: block; }

:root {
  --paper: #f0f0f0;        /* the film's own ground — Wabi's grey */
  --ink:   #191919;
  --dimink: rgba(25,25,25,.46);

  --room:   #e7e2d8;
  --tx:     #262320;
  --dim:    #8a8378;
  --mist:   #8fb2c6;
  --mist-d: #5d8ba6;
  --glass:      rgba(255,255,255,.52);
  --glass-line: rgba(255,255,255,.72);
  --sunk:   rgba(120,108,92,.13);
  --ed-h:   150px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--tx);
  background:
    radial-gradient(120% 90% at 50% -10%, #f4f1ea 0%, rgba(244,241,234,0) 60%),
    radial-gradient(90% 70% at 88% 108%, rgba(143,178,198,.24) 0%, rgba(143,178,198,0) 62%),
    var(--room);
  font-family: Selecta, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: -0.012em;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ── header ────────────────────────────────────────────────────────────── */
#bar {
  flex: none; height: 52px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark { font-size: 20px; align-self: center; }
.brand-t { font-family: Kalice, serif; font-size: 20px; letter-spacing: -0.01em; color: var(--tx); }
.brand-s { font-size: 12px; color: var(--dim); letter-spacing: 0.02em; }
.keys { font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 5px; }
.keys span { opacity: .45; }
.keys kbd {
  font: inherit; font-size: 10.5px; padding: 2.5px 6px; border-radius: 6px;
  background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(80,70,55,.10);
  color: #55504a;
}

/* ── stage ─────────────────────────────────────────────────────────────── */
#viewport {
  flex: 1; position: relative; display: grid; place-items: center;
  min-height: 0; padding: 4px 18px 12px;
}
#stage {
  width: 1920px; height: 1080px; flex: none;
  transform-origin: center center;
  position: relative; overflow: hidden;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 30px 70px rgba(72,62,48,.22), 0 6px 18px rgba(72,62,48,.12),
              0 0 0 1px rgba(120,108,92,.14);
}
#film { position: absolute; inset: 0; }

body.clean { background: #000; }
body.clean #editor, body.clean #bar { display: none; }
body.clean #viewport { padding: 0; }
body.clean #stage { box-shadow: none; border-radius: 0; }

body.export { background: #000; overflow: hidden; }
body.export #editor, body.export #bar { display: none; }
body.export #viewport { padding: 0; display: block; }
body.export #stage { transform: none !important; position: fixed; top: 0; left: 0; box-shadow: none; border-radius: 0; }

/* ── scenes ────────────────────────────────────────────────────────────── */
.scene {
  position: absolute; inset: 0;
  background: var(--paper);
  isolation: isolate;
  will-change: opacity;
  contain: strict;
}
.scene.hidden { display: none; }

/* every item is absolutely placed in film pixels and centred on its own box,
   so `x`/`y` in scenes.js is the item's CENTRE — the thing you actually
   art-direct — rather than a top-left corner that moves when copy changes */
.it { position: absolute; left: 0; top: 0; will-change: transform, opacity; transform-origin: center center; }
.it-c { position: absolute; left: 50%; top: 50%; }

/* ── the prompt box (scene 1) ──────────────────────────────────────────── */
.pb {
  width: 980px; min-height: 168px; border-radius: 34px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 2px 5px rgba(60,54,44,.05), 0 26px 60px rgba(60,54,44,.13);
  padding: 34px 38px; display: flex; align-items: flex-start;
}
.pb-t { font-size: 40px; color: var(--ink); letter-spacing: -0.022em; line-height: 1.22; flex: 1; }
.pb-t.ph { color: rgba(25,25,25,.28); }
/* the caret is drawn, not blinked — a CSS blink would desync from the clock */
.pb-caret { display: inline-block; width: 3px; height: 40px; background: var(--ink); vertical-align: -7px; margin-left: 3px; border-radius: 2px; }
.pb-send {
  width: 62px; height: 62px; border-radius: 50%; background: #191919;
  display: flex; align-items: center; justify-content: center; flex: none; margin-left: 26px;
}
.pb-send svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── chat bubbles ──────────────────────────────────────────────────────── */
.bub {
  max-width: 720px; border-radius: 30px; padding: 26px 32px;
  font-size: 34px; line-height: 1.26; letter-spacing: -0.018em;
  /* the film sets its own line breaks — a bubble that rewraps on a font
     substitution would move every avatar beside it */
  white-space: pre-line;
  box-shadow: 0 2px 4px rgba(60,54,44,.05), 0 20px 44px rgba(60,54,44,.14);
}
.bub.light { background: #fff; color: var(--ink); }
.bub.dark  { background: #191919; color: #f4f4f4; }

/* ── avatars ───────────────────────────────────────────────────────────── */
.av {
  border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 10px 26px rgba(60,54,44,.20), 0 2px 5px rgba(60,54,44,.10);
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-gen { width: 100%; height: 100%; display: block; }

/* ── the app icon ──────────────────────────────────────────────────────────
   Storyboard slides 3–4 at Figma's numbers (node 3097:4195). A white TILE,
   not an iOS squircle. Authored at 712.385 × 753.802 and scaled by fx.js.  */
.ico {
  position: absolute; left: 50%; top: 50%;
  background: #fff; border-radius: 85.23px; overflow: hidden;
  transform-origin: center center;
  box-shadow: 0 316.7px 440.19px rgba(0,0,0,.15), 0 8.545px 17.091px rgba(0,0,0,.08);
}
/* Figma's own four inset shadows: a dark bottom-right edge, a lit top-left,
   a long fall from the top and a faint all-round. Together they make the tile
   a slab of white rather than a white rectangle. */
.ico-rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset -8.421px -8.421px 8.455px rgba(0,0,0,.10),
    inset 23.17px 23.17px 18.686px rgba(255,255,255,.20),
    inset 0 170.905px 384.537px rgba(0,0,0,.05),
    inset 0 0 51.437px rgba(0,0,0,.03);
}
.ico-orb {
  position: absolute; left: 50%; top: 50%;
  width: 446.374px; height: 446.374px;
  margin-left: -226.63px; margin-top: -317.09px;   /* 50% − 3.44, 50% − 93.9 */
  border-radius: 50%; overflow: hidden;
  filter: drop-shadow(0 20px 15px rgba(0,0,0,.05));
}
.ico-orb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ico-orb .pop { transform-origin: center; }
/* the glass sphere is SCREEN-blended and oversized 122% — that blend is what
   turns a photograph into something under glass, and it is the whole trick */
.ico-orb .gl { left: -11.06%; top: -10.99%; width: 122.16%; height: 122.14%; mix-blend-mode: screen; }
/* a soap film: an iridescent rim that thins to nothing in the middle, which
   is what a bubble actually is — the colour lives in the wall, not the fill */
.ico-orb .bub {
  position: absolute; inset: 0; border-radius: 50%; transform-origin: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 58%, rgba(255,255,255,.5) 78%, rgba(255,255,255,0) 100%),
    conic-gradient(from 200deg,
      #ffd6a5, #ff9db0, #d9a7ff, #a0c4ff, #9df0e0, #ffe8a3, #ffb0c8, #ffd6a5);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 52%, #000 72%, #000 96%, transparent 100%);
          mask: radial-gradient(circle at 50% 50%, transparent 52%, #000 72%, #000 96%, transparent 100%);
  filter: blur(2px) saturate(1.3);
}
/* the faint sheen inside the film */
.ico-orb .bub::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(60% 55% at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  -webkit-mask: none; mask: none; filter: blur(6px);
}
.ico-label {
  /* centred by the box, NOT by translateX(-50%) — fx.js writes the whole
     transform string every frame, so a centring transform here would be
     overwritten the moment the label animates and the wordmark would hang
     off the right edge of the tile */
  position: absolute; left: 0; right: 0; top: 50%; text-align: center;
  margin-top: 202.09px; white-space: nowrap;
  font-family: Selecta; font-weight: 500; font-size: 74.658px; line-height: 1.2;
  letter-spacing: -0.7466px;
  /* the wordmark is not flat ink — it lifts to mauve at the cap line */
  background: linear-gradient(to top, #181818 1.717%, #bc6597 121.2%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the same orb, small, at the head of a chat scene */
.chead-orb {
  width: 66px; height: 66px; border-radius: 50%; overflow: hidden; position: relative;
  box-shadow: 0 6px 18px rgba(60,54,44,.18);
}
.chead-orb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chead-orb .gl { left: -11.06%; top: -10.99%; width: 122.16%; height: 122.14%; mix-blend-mode: screen; }

/* ── the app ───────────────────────────────────────────────────────────────
   Ported from the shipped mini app (wabis/movie matcher/styles.css), authored
   at 402 x 874. Its own CSS uses vw and clamp(); those are RESOLVED here
   against 402 and written down with their source, because a clamp inside a
   node the film scales would otherwise resolve against the browser window and
   change with the viewport — the film would look different at every size.  */
.mm {
  position: absolute; left: 50%; top: 50%;
  background: #0B0B0D;            /* --bg */
  border-radius: 44px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(60,54,44,.30), 0 8px 22px rgba(60,54,44,.16);
  font-family: Selecta, Georgia, serif;
  color: #F5F5F5;                 /* --text-primary */
}
.mm-shell { position: absolute; left: -22px; top: -19px; width: 446px; height: 912px; pointer-events: none; z-index: 40; }
.mm-shell img { width: 100%; height: 100%; object-fit: contain; }
.mm-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* top bar */
.mm-top {
  flex: none; display: flex; align-items: center; justify-content: flex-start;
  padding: 22px 22px 2px; z-index: 5;
  overflow: hidden;   /* the row slides inside it once four pills do not fit */
}
.mm-filters { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; color: #F5F5F5; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.42);
}
/* an active filter reads as BRIGHTER GLASS, never as red — red belongs to the
   match. Same rule as the app. */
.mm-pill.on {
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.15));
  border-color: rgba(255,255,255,.34); color: #fff;
}
.mm-pill .lbl { white-space: nowrap; }
/* an added filter opens from zero width so the centred row spreads to make
   room for it. overflow:hidden is what turns the width into a reveal rather
   than a squash of the pill inside. */
.mm-add { flex: none; overflow: hidden; display: flex; }
.mm-add .mm-pill { flex: none; }
.mm-pill .flash {
  position: absolute; inset: -2px; border-radius: 100px; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 120% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  box-shadow: 0 0 22px 2px rgba(255,255,255,.45);
}
.mm-pill { position: relative; }
.mm-pill svg { width: 16px; height: 16px; fill: none; stroke: #A3A3A3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-pill.on svg { stroke: rgba(255,255,255,.9); }
.mm-gear {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.42);
}
.mm-gear svg { width: 20px; height: 20px; fill: none; stroke: #A3A3A3; stroke-width: 1.7; stroke-linecap: round; }

/* the deck */
.mm-deckwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
/* the ambient poster-colour echo — the room behind the deck taking the colour
   of whatever is on top. Masked to a soft oval so it never reaches an edge. */
.mm-ambient {
  position: absolute; inset: -45% -25%; z-index: 0; pointer-events: none;
  -webkit-mask: radial-gradient(58% 46% at 50% 46%, #000 22%, transparent 76%);
          mask: radial-gradient(58% 46% at 50% 46%, #000 22%, transparent 76%);
}
.mm-ambient img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(64px) saturate(1.7) brightness(0.92);
  transform: scale(1.25); opacity: 0;
}
.mm-deck { position: relative; z-index: 1; }
.mm-card {
  position: absolute; inset: 0;
  border-radius: 34.17px;                                  /* clamp(28px,8.5vw,38px) @402 */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.30)) drop-shadow(0 18px 40px rgba(0,0,0,.45));
  transform-origin: 50% 85%;
  will-change: transform, opacity;
}
.mm-card .in { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #161618; }
.mm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transform: scale(1.06); }
.mm-card .scrim {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 66%, rgba(0,0,0,.72) 100%);
}
.mm-card .scrimT {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 26%);
}
/* the specular sheen — glass catching light as the card turns */
.mm-card .sheen {
  position: absolute; inset: 0; border-radius: inherit; z-index: 3; opacity: .35;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.20) 50%, transparent 66%);
  mix-blend-mode: soft-light;
}
/* the glass bevel rim — the app's exact Figma inset shadow */
.mm-card .bevel {
  position: absolute; inset: 0; border-radius: inherit; z-index: 6;
  box-shadow: inset -3px -3px 3px 0 #565656, inset 3px 3px 3px 0 rgba(255,255,255,.30);
}
/* the intent wash — emerald right, rose left, gold up */
.mm-card .wash { position: absolute; inset: 0; border-radius: inherit; z-index: 4; opacity: 0; }
/* the stamps, exactly as the app draws them */
.mm-card .stamp {
  position: absolute; z-index: 9; padding: 8px 18px; border-radius: 14px;
  border: 4px solid currentColor;
  font-size: 30px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; backdrop-filter: blur(2px);
}
.mm-card .stamp.yes { top: 38px; left: 26px;  color: #34D399; text-shadow: 0 0 18px rgba(52,211,153,.4); }
.mm-card .stamp.no  { top: 38px; right: 26px; color: #FB7185; text-shadow: 0 0 18px rgba(251,113,133,.4); }
.mm-card .content { position: absolute; inset: 0; z-index: 7; }
.mm-card .meta {
  position: absolute; left: 23.64px; right: 23.64px; bottom: 33.71px;   /* clamp(20,7%,30) / clamp(22,7%,34) */
  display: flex; flex-direction: column; gap: 4px;
}
.mm-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.mm-card .gp {
  padding: 5px 11px; border-radius: 200px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.82); white-space: nowrap;
}
/* a collection is SOLID where a genre is glass — a genre describes, a
   collection stamps */
.mm-card .lp {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 200px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.mm-card .lp.a24 { background: #101010; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.4); }
.mm-card .lp.cri { background: #EFEAE0; color: #141414; box-shadow: inset 0 -1px 0 rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.4); }
.mm-card .lp i { font-style: normal; padding-left: 6px; border-left: 1px solid currentColor; opacity: .62; letter-spacing: .09em; }
.mm-card .sub {
  font-size: 12.5px; letter-spacing: .02em; color: rgba(245,245,245,.72);
  display: flex; align-items: center; gap: 8px;
}
.mm-card .sub .imdb { color: #FF2D55; font-weight: 500; }   /* --match */
.mm-card .sub .dot { opacity: .5; }
.mm-card .ttl { font-size: 54.27px; line-height: .98; letter-spacing: -0.01em; color: #fff; }  /* clamp(40,13.5vw,56) @402 */

/* action row */
.mm-acts { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 34px; }
.mm-acts .ab {
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.42);
}
.mm-acts .ab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mm-acts .ab svg.fill { fill: currentColor; }
/* the action buttons answer the swipe — the app's own :active tints, driven
   by the drag instead of by a press */
.mm-acts .ab.lit.no  { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.40); }
.mm-acts .ab.lit.yes { background: rgba(52,211,153,.14);  border-color: rgba(52,211,153,.40); }
.mm-acts .undo { width: 48px; height: 48px; color: #8d8d94; }
.mm-acts .no   { width: 62px; height: 62px; color: #FB7185; }
.mm-acts .fav  { width: 52px; height: 52px; color: #FF2D55; }
.mm-acts .yes  { width: 62px; height: 62px; color: #34D399; }

/* tab bar */
.mm-nav {
  flex: none; height: 76px; display: flex; align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,11,13,.86);
}
.mm-nav .ni {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #6b6b70; font-size: 10.5px;
}
.mm-nav .ni.on { color: #F5F5F5; }
.mm-nav .ni svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── invite ────────────────────────────────────────────────────────────── */
.inv-pill {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 50px; border-radius: 999px; background: #fff;
  font-size: 40px; color: var(--ink); letter-spacing: -0.02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 50px rgba(60,54,44,.16), 0 3px 6px rgba(60,54,44,.06);
}
.inv-pill svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 999px; border: 2px solid rgba(25,25,25,.10); }

/* ── hearts ────────────────────────────────────────────────────────────── */
.heart { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

/* ── chat header (the little app chip at the top of a chat scene) ──────── */
.chead { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chead .nm { font-size: 20px; color: var(--dimink); letter-spacing: -0.01em; }

/* ── title-safe guides ─────────────────────────────────────────────────── */
#stage.guides::after {
  content: ''; position: absolute; inset: 5%; pointer-events: none;
  outline: 1px dashed rgba(226,96,58,.55); z-index: 9999;
}
#stage.guides::before {
  content: ''; position: absolute; inset: 10%; pointer-events: none;
  outline: 1px dashed rgba(93,139,166,.55); z-index: 9999;
}

/* ── editor chrome: one frosted glass slab floating on the paper ───────── */
#editor {
  flex: none; height: var(--ed-h); margin: 0 14px 14px;
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 11px;
  user-select: none;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(26px) saturate(1.7);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(255,255,255,.35) inset,
              0 18px 44px rgba(72,62,48,.16), 0 3px 10px rgba(72,62,48,.08);
}
.ed-row { display: flex; align-items: center; gap: 8px; }
.ed-spacer { flex: 1; }

.ed-btn {
  height: 36px; min-width: 36px; padding: 0 13px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.44));
  color: #3a352f; border: 1px solid rgba(255,255,255,.85);
  font: inherit; font-size: 12.5px; letter-spacing: -0.012em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -1px 2px rgba(120,108,92,.10) inset,
              0 2px 5px rgba(80,70,55,.10);
  transition: transform .14s cubic-bezier(.25,1,.5,1), box-shadow .14s ease, background .14s ease;
}
.ed-btn:hover { background: linear-gradient(180deg, #fff, rgba(255,255,255,.6)); transform: translateY(-1px); }
.ed-btn:active { transform: translateY(.5px) scale(.985); }
.ed-btn svg { width: 17px; height: 17px; fill: currentColor; }
.ed-btn.on {
  background: linear-gradient(180deg, var(--mist), var(--mist-d));
  border-color: rgba(255,255,255,.55); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 8px rgba(93,139,166,.34);
}
.ed-play {
  width: 46px; color: #fff; border-color: rgba(255,255,255,.5);
  background: linear-gradient(180deg, #2c2926, #191614);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 3px 9px rgba(40,34,28,.30);
}
.ed-play:hover { background: linear-gradient(180deg, #3a3632, #211d1a); }
.ed-play .i-pause { display: none; }
body.playing .ed-play .i-play  { display: none; }
body.playing .ed-play .i-pause { display: block; }

.ed-time { font-variant-numeric: tabular-nums; font-size: 13px; margin-left: 8px; color: #4a453f; }
.ed-dim { color: var(--dim); }

.ed-field {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px;
  background: rgba(255,255,255,.44); border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px; font-size: 12.5px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
.ed-sc { color: var(--dim); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-field input {
  width: 52px; background: transparent; border: 0; color: var(--tx);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; outline: none;
  -moz-appearance: textfield;
}
.ed-field input::-webkit-outer-spin-button, .ed-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-unit { color: var(--dim); }

.ed-track {
  position: relative; flex: 1; height: 56px;
  background: var(--sunk);
  border-radius: 13px; overflow: hidden; cursor: text;
  box-shadow: 0 2px 5px rgba(100,88,72,.14) inset, 0 -1px 0 rgba(255,255,255,.65) inset;
}
.ed-clips { position: absolute; inset: 3px; display: flex; gap: 2px; }
.clip {
  position: relative; height: 100%; min-width: 0; flex: none;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.52));
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(90,78,62,.10);
  display: flex; align-items: center; padding: 0 9px; overflow: hidden; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.clip:hover { background: linear-gradient(180deg, #fff, rgba(255,255,255,.68)); }
.clip.act {
  background: linear-gradient(180deg, rgba(143,178,198,.60), rgba(143,178,198,.36));
  box-shadow: 0 0 0 1.5px var(--mist-d) inset, 0 1px 0 rgba(255,255,255,.6) inset;
}
.clip.dark {
  background: linear-gradient(180deg, rgba(38,35,32,.86), rgba(38,35,32,.70));
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 1px 3px rgba(50,42,34,.20);
}
.clip.dark b { color: #e8e3da; }
.clip.dark i { color: rgba(232,227,218,.6); }
.clip.dark.act { box-shadow: 0 0 0 1.5px var(--mist) inset; }
.clip b {
  font-weight: 400; font-size: 10.5px; color: #4b463f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.clip i {
  position: absolute; right: 7px; bottom: 4px; font-style: normal; font-size: 9px;
  color: var(--dim); font-variant-numeric: tabular-nums; pointer-events: none;
}
.clip .grip {
  position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 4;
  border-radius: 4px;
}
.clip .grip:hover { background: var(--mist-d); opacity: .5; }

.ed-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, #e2603a, #c8451f);
  pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 8px rgba(226,96,58,.55);
}
.ed-playhead::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg); background: #d4512b; border-radius: 2px;
}