/* The app, replicated: AnimSpark for Mac in its light theme — title bar, viewer, inspector, timeline, chat.
 * Every value is the product's: light tokens from apps/web globals.css, pane chrome from dock-pane-bar.ts,
 * menus from ProjectLayoutMenu / ProjectMenu, the timeline's sizes from Timeline.tsx (head 108, toolbar 34,
 * ruler 20, tracks 56 / 44, gap 3, info strip 15). Laid out at 1280 × 860 and scaled to fit. */
.app-stage { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.app-fit { position: relative; width: 100%; }
.app {
  --bg: #fcfcfc; --shell: #f2f2f2; --pane: #fcfcfc; --surface: #fcfcfc; --surface-2: #f2f2f2; --surface-3: #e8e8e8;
  --border: rgba(0, 0, 0, .08); --border-strong: rgba(0, 0, 0, .16);
  --text: #1f1f1f; --text-dim: #4b4b4b; --text-muted: #7a7a7a; --text-faint: #a9a9a9;
  --hover: rgba(0, 0, 0, .045); --active: rgba(0, 0, 0, .08); --accent: #1a1a1a;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .05);
  --tl-lane: #efefef; --tl-lane-on: #f5f5f5; --tl-head: #fcfcfc; --tl-line: #e2e2e2; --tl-text: #4a4a4a; --tl-faint: #8a8a8a;
  --tl-playhead: #1f8a86; --tl-accent: #1f8a86; --tl-tick: rgba(0, 0, 0, .16);
  --tl-scene: #3f9b9b; --tl-video: #5385bd; --tl-voice: #6f62b0; --tl-sfx: #5192c4; --tl-music: #3f9a90; --tl-caption: #7c8797;
  position: absolute; left: 0; top: 0; width: 1280px; height: 860px; transform-origin: 0 0;
  display: flex; flex-direction: column; border-radius: 12px; background: var(--shell); color: var(--text);
  font: 400 13px/1.4 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0;
  overflow: hidden; user-select: none; -webkit-user-select: none; outline: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 60px 120px -50px rgba(20, 40, 50, .35), 0 20px 44px -28px rgba(0, 0, 0, .22);
  transition: opacity .9s var(--ease), translate 1.1s var(--out);
}
.app[data-state="closed"] { opacity: 0; translate: 0 36px; }
:where(.app) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: default; }
.app textarea { user-select: text; -webkit-user-select: text; }
.app svg { display: block; flex: none; }
.app .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

.app { --fill-tsp: rgba(0, 0, 0, .05); --ok: #16a34a; --warn: #d97706; --tint-green: #22a06b; --frame: #0d99ff;
  --pop-shadow: 0 0 0 1px var(--border-strong), 0 16px 40px -8px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .12); }

/* title bar (AppMenuButton: avatar + Projects; then the title, centred; then agents → layout → versions → more).
   TOP_BTN: 26 × 26, rounded-md, --text-dim, hover --bg-hover */
.a-top { position: relative; height: 40px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 14px; }
.a-lights { display: flex; gap: 8px; margin-right: 17px; }
.a-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.a-lights i:nth-child(2) { background: #febc2e; } .a-lights i:nth-child(3) { background: #28c840; }
.a-title { position: absolute; left: 50%; transform: translateX(-50%); height: 26px; display: flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.a-grow { flex: 1; min-width: 0; }
.a-btn { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--text-dim); cursor: pointer !important; transition: background .15s, color .15s; }
.a-btn:hover, .a-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.a-btn.a-av { border-radius: 50%; }
.a-avimg { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }

/* dock: shell #f2f2f2, panes #fcfcfc, 6 px gaps, rounded 7. The chat is the right column, full height; the
   viewer and the inspector share a row, and the timeline spans under both. */
.a-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 6px; padding: 0 6px 6px; }
.app[data-chat="off"] .a-body { grid-template-columns: minmax(0, 1fr); }
.app[data-chat="off"] .a-chat { display: none; }
.a-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.a-row { flex: 1; min-height: 0; display: flex; gap: 6px; }
.a-pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 7px; background: var(--pane); overflow: hidden; }
/* PANE_BAR h-8 gap-1 px-1.5 · PANE_TITLE 12 / 500 / muted · PANE_BTN 22 × 22 */
.a-bar { height: 32px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px; }
.a-bar h5 { min-width: 0; margin: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.a-pbtn { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--text-dim); cursor: pointer !important; transition: background .15s, color .15s; }
.a-pbtn:hover, .a-pbtn.on { background: var(--hover); color: var(--text); }

/* viewer: the picture, and over it the Figma-style frame of what's selected (StageTransformFrame: 1 px #0d99ff,
   white 8 px corner squares, the size badge 6 px under it; the quote-into-chat bar above its top-left corner) */
.a-viewer { flex: 1; }
.a-screen-box { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 12px; container-type: size; }
/* the stage takes the delivery frame's shape (--r, FramePicker); the film sits inside at its own 16:9, black bars
   round it (filmFrameBox, contain) — the film box and the selection frame are placed by editor.js in % of the stage */
.a-stage { --r: 1.7778; position: relative; width: min(100cqw, 100cqh * var(--r)); height: min(100cqh, 100cqw / var(--r)); }
.a-screen { position: absolute; inset: 0; background: #000; overflow: hidden; }
.a-film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.a-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-screen.fs .a-film video { object-fit: contain; }
.a-screen:fullscreen { width: 100vw; height: 100vh; }
.a-screen:-webkit-full-screen { width: 100vw; height: 100vh; }
/* full screen keeps the delivery frame: the frame (--r) fitted to the screen, the film inside it where the stage puts it */
.a-screen.fs .a-film { --fw: min(100vw, 100vh * var(--r)); --fh: min(100vh, 100vw / var(--r)); left: calc((100vw - var(--fw)) / 2 + var(--fw) * var(--il, 0)) !important; top: calc((100vh - var(--fh)) / 2 + var(--fh) * var(--it, 0)) !important; width: calc(var(--fw) * var(--iw, 1)) !important; height: calc(var(--fh) * var(--ih, 1)) !important; }
.a-sel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; box-sizing: border-box; border: 1px solid var(--frame); pointer-events: none; }
.a-sel[hidden] { display: none; }
.a-sel > i { position: absolute; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid var(--frame); background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08); }
.a-sel .nw { left: -5px; top: -5px; } .a-sel .ne { right: -5px; top: -5px; } .a-sel .se { right: -5px; bottom: -5px; } .a-sel .sw { left: -5px; bottom: -5px; }
.a-size { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 1px 4px; border-radius: 3px; background: var(--frame); font-size: 10px; font-weight: 500; line-height: 14px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-stb { position: absolute; left: -1px; bottom: calc(100% + 5px); display: flex; padding: 3px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); pointer-events: auto; }
.a-stb button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--text); cursor: pointer !important; }
.a-stb button:hover { background: var(--hover); }
.a-muted { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px !important; border-radius: 8px !important; background: var(--surface) !important; box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); font-size: 12px !important; font-weight: 500; color: var(--text) !important; cursor: pointer !important; transition: opacity .3s; }
.a-muted:hover { background: #fff !important; }
.app.sound .a-muted { opacity: 0; pointer-events: none; }
.app.loading .a-muted span::after { content: '…'; }
.a-transport { position: relative; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.a-tc { position: absolute; left: 10px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.a-tc b { font-weight: 500; color: var(--text); }
.a-tr { position: absolute; right: 6px; display: flex; gap: 2px; }
/* FramePicker's button: proportions, and the frame printed beside it once it isn't the native one */
.a-pbtn.a-frbtn { width: auto; min-width: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; }
.a-frbtn .r { font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.a-frbtn .r:empty { display: none; }
.a-pbtn.a-frbtn[aria-expanded="true"] { background: var(--hover); color: var(--text); }

/* full screen: the player's own bar (PlayerControlsBar) — a soft gradient, the seek bar (3 px, 5 px under the hand,
   red, scene marks), then play · sound · time … exit; it fades after 2.5 s idle and the pointer goes with it */
.a-fsbar { display: none; }
.a-screen.fs .a-fsbar { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 28px 16px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); color: #fff; font: 400 12px/1 'Inter', system-ui, sans-serif; transition: opacity .25s; }
.a-screen.fs .a-muted { display: none; }
.a-screen.fs.idle { cursor: none; }
.a-screen.fs.idle .a-fsbar { opacity: 0; pointer-events: none; }
.a-seek { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.a-seek .tr { position: relative; width: 100%; height: 3px; border-radius: 1.5px; background: rgba(255, 255, 255, .25); transition: height .1s; }
.a-seek .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: inherit; background: #f03; }
.a-seek .tr b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .6); }
.a-seek .kn { position: absolute; left: var(--p, 0%); top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #f03; transform: scale(0); transition: transform .1s; }
.a-seek:hover .tr, .a-seek.drag .tr { height: 5px; border-radius: 2.5px; }
.a-seek:hover .kn, .a-seek.drag .kn { transform: none; }
.a-seek .tip { position: absolute; bottom: 18px; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .82); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.a-seek:hover .tip, .a-seek.drag .tip { opacity: 1; }
.a-fsrow { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.a-fsb { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; color: #fff !important; cursor: pointer !important; }
.a-fsb:hover { background: rgba(255, 255, 255, .2) !important; }
.a-fsb .i-pause, .app.playing .a-fsb .i-play, .a-fsb .i-on, .a-screen.snd .a-fsb .i-off { display: none; }
.app.playing .a-fsb .i-pause, .a-screen.snd .a-fsb .i-on { display: block; }
.a-fst { margin-left: 6px; opacity: .9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-play { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--text-dim); cursor: pointer !important; }
.a-play:hover { background: var(--hover); color: var(--text); }
.a-play .i-pause, .app.playing .a-play .i-play { display: none; }
.app.playing .a-play .i-pause { display: block; }

/* inspector (FilmInspector, 300 wide): fields are a light fill with no border, an outline on hover */
.a-insp { width: 300px; flex: none; }
.app[data-insp="off"] .a-insp { display: none; }
.a-insp-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 24px; scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; }
.a-empty { display: flex; flex-direction: column; align-items: center; padding: 56px 24px 0; text-align: center; }
.a-empty > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-tsp); color: var(--text-muted); }
.a-empty b { margin-top: 12px; font-size: 12px; font-weight: 500; color: var(--text); }
.a-empty p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.625; color: var(--text-faint); }
.a-lh { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.a-lh .k { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--fill-tsp); color: var(--text-muted); }
.a-lh > div { flex: 1; min-width: 0; }
.a-lh b, .a-lh small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-lh b { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--text); }
.a-lh small { font-size: 10.5px; line-height: 14px; color: var(--text-faint); }
.a-hb { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 5px; color: var(--text-muted); cursor: pointer !important; }
.a-hb:hover { background: var(--hover); color: var(--text); }
.a-sec { border-top: 1px solid var(--border); padding: 10px 12px 12px; }
.a-sec h3 { height: 20px; margin: 0 0 8px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--text); }
.a-sec .b { display: flex; flex-direction: column; gap: 6px; }
.a-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.a-f { min-width: 0; height: 26px; display: flex; align-items: center; border-radius: 5px; background: var(--fill-tsp); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s; }
.a-f:hover { box-shadow: inset 0 0 0 1px var(--border); }
.a-f .p { width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-size: 10.5px; color: var(--text-faint); cursor: ew-resize; }
.a-f .v { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.a-f .u { padding-right: 8px; font-size: 11px; color: var(--text-faint); }
.a-align { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); }
.a-align > div { flex: 1; height: 26px; display: flex; align-items: center; padding: 1px; border-radius: 5px; background: var(--fill-tsp); }
.a-align button { flex: 1; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--text-muted); cursor: pointer !important; }
.a-align button:hover { background: var(--bg); color: var(--text); }
.a-vol { display: grid; grid-template-columns: 1fr 5.5rem; align-items: center; gap: 8px; }
.a-vol input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; cursor: pointer; background: linear-gradient(to right, var(--text-muted) 0 var(--v), var(--border-strong) var(--v) 100%) center / 100% 3px no-repeat; }
.a-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 3px rgba(0, 0, 0, .18); }
.a-vol input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--border-strong), 0 1px 3px rgba(0, 0, 0, .18); }
.a-ta { margin: 0; padding: 8px 10px; border-radius: 5px; background: var(--fill-tsp); font-size: 11.5px; line-height: 1.5; color: var(--text); }
.a-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); font-size: 11px; font-weight: 500; color: var(--text); cursor: pointer !important; }
.a-ask:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.a-hint { margin: 0; padding: 10px 12px 0; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.55; color: var(--text-faint); }
.a-hint:empty { display: none; }

/* timeline */
.a-tl { height: 360px; flex: none; background: var(--tl-head); }
.app[data-tl="off"] .a-tl { display: none; }
.a-tools { height: 34px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.a-tool { height: 28px; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; border-radius: 6px; color: var(--text-dim); transition: background .15s; }
.a-tool:hover { background: rgba(0, 0, 0, .05); }
.a-tool.off { color: var(--text-faint); } .a-tool.off:hover { background: none; }
.a-tool.on { color: #fff; background: var(--tl-accent); }
.a-tool-sep { width: 1px; height: 16px; margin: 0 5px; background: var(--tl-line); }
.a-mode { display: inline-flex; align-items: center; }
.a-tool.a-caret { min-width: 15px; width: 15px; }
.a-zoom { -webkit-appearance: none; appearance: none; width: 96px; height: 16px; margin: 0 4px; background: transparent; cursor: pointer; }
.a-zoom::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--tl-accent) 0 calc(var(--pos, 0) * 100%), var(--tl-line) calc(var(--pos, 0) * 100%)); }
.a-zoom::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 13px; margin-top: -5px; border-radius: 2px; background: var(--tl-accent); }
.a-zoom::-moz-range-track { height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--tl-accent) 0 calc(var(--pos, 0) * 100%), var(--tl-line) calc(var(--pos, 0) * 100%)); }
.a-zoom::-moz-range-thumb { width: 6px; height: 13px; border: 0; border-radius: 2px; background: var(--tl-accent); }
.a-tlbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 10px; overflow: hidden; }
.a-heads { grid-area: 1 / 1; } .a-scroll { grid-area: 1 / 2; }
/* TimelineRangeBar: the one horizontal bar, under the lanes only (not the headers), pinned to the pane's bottom while
   the tracks scroll up and down. 10 px to hit, a 4 px thumb that thickens to 8 under the hand; the thumb is the
   visible share (full and still at 100 %) */
.a-range { grid-area: 2 / 2; position: relative; min-width: 0; touch-action: none; }
.a-range::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: rgba(0, 0, 0, .06); }
.a-range i { position: absolute; left: 0; top: 50%; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 28%, transparent); transform-origin: 0 50%; translate: 0 -50%; transition: height .12s ease, background-color .12s ease; }
.a-range.can { cursor: pointer; }
.a-range.can:hover i, .a-range.drag i { height: 8px; background: color-mix(in srgb, var(--text) 42%, transparent); }
/* the tracks scroll vertically under a sticky ruler; the headers ride along (translated by the scroller) under
   their own 20 px cap, so a header always sits beside its lane */
.a-heads { position: relative; min-height: 0; overflow: hidden; }
.a-heads::before { content: ''; position: relative; z-index: 1; display: block; height: 20px; background: var(--tl-head); }
.a-heads-in { position: relative; padding-bottom: 3px; will-change: transform; }
.a-head { display: flex; align-items: center; gap: 3px; margin-top: 3px; padding: 0 6px 0 8px; background: var(--tl-lane); }
.a-head b { min-width: 21px; height: 14px; margin-right: 5px; padding: 0 3px; border-radius: 3px; font-size: 9px; font-weight: 600; line-height: 14px; letter-spacing: .02em; text-align: center; color: #fff; }
.a-hbtn { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--tl-text) !important; }
.a-hbtn:hover { background: rgba(0, 0, 0, .05); }
button.a-hbtn { cursor: pointer !important; }
.a-hbtn[aria-pressed="true"] { color: var(--tl-accent) !important; }
.a-scroll { position: relative; min-height: 0; overflow: auto; scrollbar-width: none; }
.a-scroll::-webkit-scrollbar { display: none; }
.a-lanes { position: relative; min-width: 100%; min-height: 100%; padding-bottom: 3px; touch-action: pan-y; }
.a-ruler { position: sticky; top: 0; z-index: 4; height: 20px; background: var(--tl-head); cursor: pointer; }
.a-ruler i { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--tl-tick); }
.a-ruler i.mj { height: 8px; }
.a-ruler span { position: absolute; bottom: 8px; left: 3px; font-size: 10px; color: var(--tl-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-lane { position: relative; margin-top: 3px; background: var(--tl-lane); }
.a-clip { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--c); overflow: hidden; cursor: pointer; transform-origin: left center; transition: opacity .2s; }
.a-clip canvas { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; }
.a-clip .l { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 15px; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: rgba(0, 0, 0, .3); font-size: 10px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; pointer-events: none; }
.a-clip .l svg { opacity: .8; }
.a-clip .l em { font-style: normal; opacity: .75; }
.a-clip.sel { box-shadow: inset 0 0 0 2px rgb(240, 240, 240), 0 0 0 1px rgb(200, 200, 200); z-index: 2; }
.a-clip.muted { opacity: .4; }
.a-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 12px; margin-left: -6px; z-index: 5; cursor: col-resize; }
.a-ph::before { content: ''; position: absolute; left: 5.5px; top: 14px; bottom: 0; width: 1px; background: var(--tl-playhead); }
.a-ph svg { position: absolute; left: 0; top: 2px; will-change: transform; }
body.scrubbing, body.scrubbing * { cursor: col-resize !important; user-select: none !important; -webkit-user-select: none !important; }
.app[data-state="building"] .a-clip { animation: land .6s var(--out) both; animation-delay: calc(var(--i) * 40ms + 200ms); }
@keyframes land { from { opacity: 0; transform: scaleX(.2); } }


/* chat — ProjectConversation's turn: the bubble, the work (folded to one line on finished rounds), the answer,
   the Changes card and the footer (who answered, on what, how long). Rows from AgentActivityRow: an icon and a
   plain sentence; no tool names, no ticks. */
.a-chat { display: flex; flex-direction: column; }
.a-ctitle { opacity: 0; transition: opacity .2s; }
.a-ctitle.on { opacity: 1; }
/* contain: at its top or bottom (it opens at the bottom) a trackpad swipe used to fall through to the page, and the gesture
   stayed latched there, so the chat "wouldn't scroll" while the whole window slid away; the app's panes never do that */
.a-thread { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 20px; padding: 8px 16px 16px; scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; }
.a-turn { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.a-me { align-self: flex-end; max-width: 88%; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.a-me p { margin: 0; font-size: 13.5px; line-height: 1.625; color: var(--text); overflow-wrap: anywhere; }
.a-atts { display: flex; flex-wrap: wrap; gap: 6px; }
.a-att { height: 32px; max-width: 132px; min-width: 0; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; overflow: hidden; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.a-att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.a-att:has(img) { width: 32px; padding: 0; }
.a-att img { width: 100%; height: 100%; object-fit: cover; }
.a-say { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; font-size: 13px; line-height: 24px; color: var(--text); }
.a-say p { margin: 0; }
.a-say b { font-weight: 600; }
.a-work { min-width: 0; padding: 4px 0; }
.a-work-h { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.625; color: var(--text-muted); cursor: pointer !important; transition: color .15s; }
.a-work-h:hover { color: var(--text); }
.a-work-h svg { transition: transform .15s; }
.a-work.open > .a-work-h svg { transform: rotate(90deg); }
.a-work-b { display: none; margin-top: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.a-work.open > .a-work-b { display: block; }
.a-work.open > .a-work-s { display: none; }
.a-grp { min-width: 0; padding: 4px 0; }
.a-grp-h { max-width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 8px; text-align: left; font-size: 13px; line-height: 1.625; color: var(--text-muted); cursor: pointer !important; }
.a-grp-h:hover { color: var(--text); }
.a-grp-h > svg, .a-grp-h .cv { margin-top: 5px; }
.a-grp-h .s { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-grp-h .r { flex: none; opacity: .8; font-variant-numeric: tabular-nums; }
.a-grp-h .cv { flex: none; opacity: 0; transition: opacity .15s, transform .15s; }
.a-grp-h:hover .cv, .a-grp.open .cv { opacity: 1; }
.a-grp.open .cv { transform: rotate(90deg); }
.a-grp-b { display: none; margin: 2px 0 0 6px; padding-left: 12px; border-left: 1px solid var(--border); }
.a-grp.open > .a-grp-b { display: block; }
.a-grp.open > .a-strip { display: none; }
.a-act { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.625; color: var(--text-muted); }
.a-act > svg { margin-top: 5px; }
.a-act .w { flex: none; }
.a-act .q, .a-act .d { min-width: 0; margin-left: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.a-act .d { font: 11.5px/21px ui-monospace, 'SF Mono', Menlo, monospace; }
.a-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-aud { max-width: 100%; height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); cursor: pointer !important; transition: color .15s, border-color .15s; }
.a-aud:hover { color: var(--text); }
.a-aud.on { border-color: var(--accent); color: var(--text); }
.a-aud .i-pause, .a-aud.on .i-play { display: none; }
.a-aud.on .i-pause { display: block; }
.a-aud .t { opacity: .7; font-variant-numeric: tabular-nums; }
.a-chg { align-self: flex-start; width: 100%; max-width: 416px; display: flex; flex-direction: column; padding: 8px; border-radius: 10px; border: 1px solid var(--border); }
.a-chg > b { font-size: 13px; font-weight: 500; line-height: 19px; color: var(--text); }
.a-chg > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 17px; color: var(--text-muted); }
.a-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.a-chg-n { padding: 2px 4px; font-size: 12px; line-height: 20px; color: var(--text-muted); }
/* the changed scenes as pictures: four across, a frame of media/editor/thumbs.jpg (89 one-second frames) each */
.a-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.a-tile { min-width: 0; display: flex; flex-direction: column; padding: 0; border-radius: 7px; text-align: left; cursor: pointer !important; transition: opacity .15s; }
.a-tile:hover { opacity: .85; }
.a-tile:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.a-tile i { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--surface-2) url(/media/editor/thumbs.jpg) 0 0 / 8900% 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.a-tile span { min-width: 0; display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; line-height: 15px; color: var(--text-muted); }
.a-tile em { flex: none; font: normal 10.5px ui-monospace, 'SF Mono', Menlo, monospace; }
.a-tile em.mk-add { color: var(--ok); }
.a-tile b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.a-sc { height: 24px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; color: var(--text); cursor: pointer !important; transition: border-color .15s, background .15s; }
.a-sc:hover { border-color: var(--border-strong); background: var(--surface-2); }
.a-sc span { font: 11px ui-monospace, 'SF Mono', Menlo, monospace; }
/* mk-: the home page's edit demo owns a global .ed */
.a-sc .mk-add { color: var(--ok); } .a-sc .mk-ed { color: var(--text-muted); }
.a-foot { min-width: 0; height: 28px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.a-foot .lg { width: 14px; flex: none; display: flex; justify-content: center; opacity: .8; }
.a-foot > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-copy { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 4px; opacity: 0; cursor: pointer !important; transition: opacity .15s, background .15s; }
.a-turn:hover .a-copy { opacity: .7; }
.a-copy:hover { opacity: 1 !important; background: var(--hover); color: var(--text); }
.a-chap { display: flex; flex-direction: column; gap: 2px; margin: 0; padding-left: 18px; list-style: decimal; }
.a-chap li::marker { color: var(--text-faint); }
.a-chap button { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 24px; color: var(--text); text-align: left; cursor: pointer !important; }
.a-chap button:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.a-chap button.on { color: var(--tl-accent); }
.a-chap em { font-style: normal; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* composer: the box (placeholder + ↵ inside), then under it the agent chip on the left, + and the library on the right */
.a-compose { flex: none; display: flex; flex-direction: column; gap: 4px; margin: 0 16px 8px; }
.a-box { display: flex; align-items: flex-end; gap: 4px; padding: 10px 8px 10px 14px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, .08); background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); transition: border-color .2s; }
.a-box:focus-within { border-color: rgba(0, 0, 0, .32); }
.a-tx { position: relative; flex: 1; min-width: 0; }
.a-box textarea { width: 100%; height: 22px; display: block; padding: 0; overflow: hidden; resize: none; border: 0; outline: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: inherit; color: var(--text); }
/* the hint is one line, cut with an ellipsis — never two */
.a-ph-t { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 22px; color: var(--text-faint); pointer-events: none; }
.a-ph-t[hidden] { display: none; }
.a-send { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--text-dim); cursor: pointer !important; transition: background .15s, color .15s; }
.a-send:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.a-send:disabled { color: var(--text-faint); cursor: default !important; }
.a-crow { display: flex; align-items: center; gap: 2px; padding: 0 2px; }
.a-agent { height: 32px; max-width: 220px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer !important; transition: background .15s; }
.a-agent:hover, .a-agent[aria-expanded="true"] { background: var(--hover); }
.a-agent .ic { display: flex; color: var(--text-dim); }
.a-agent .m { color: var(--text-dim); transition: color .15s; }
.a-agent .e { color: var(--text-muted); transition: color .15s; }
.a-agent:hover .m { color: var(--text); } .a-agent:hover .e { color: var(--text-dim); }
.a-ctool { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--text-dim); cursor: pointer !important; transition: background .15s, color .15s; }
.a-ctool:hover { background: var(--surface-2); color: var(--text); }

/* menus */
.a-pop { position: absolute; z-index: 20; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); animation: rise .14s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.a-pop[hidden] { display: none; }
.a-mi { width: 100%; display: flex; align-items: center; text-align: left; color: var(--text); cursor: pointer !important; }
.a-mi:hover { background: var(--hover); }
/* ProjectLayoutMenu: w-52 rounded 14 p-1.5; a switch per pane, ink when on */
.a-pop.layout { width: 208px; padding: 6px; border-radius: 14px; box-shadow: 0 0 0 1px var(--border), 0 18px 48px -12px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .08); }
.a-pop.layout h6 { margin: 0; padding: 4px 8px; font-size: 11px; font-weight: 500; color: var(--text-faint); }
.a-pop.layout .a-mi { gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; }
.a-pop.layout .ti { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); }
.a-pop.layout .n { flex: 1; }
.a-pop.layout .sw { position: relative; width: 30px; height: 18px; flex: none; border-radius: 999px; background: var(--text); transition: background .15s; }
.a-pop.layout .sw i { position: absolute; top: 3px; left: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); transition: left .15s, background .15s; }
.a-pop.layout [aria-checked="false"] .sw { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.a-pop.layout [aria-checked="false"] .sw i { left: 3px; background: var(--text-faint); }
/* ProjectMenu: min-w 176 rounded-xl border py-1, rows gap-2.5 px-3 py-2 13.5 px */
.a-pop.pmenu { min-width: 176px; padding: 4px 0; }
.a-pop.pmenu .a-mi { gap: 10px; padding: 8px 12px; font-size: 13.5px; }
/* AgentsChip: third-party agents — its body is .agpop in site.css (shared with the coding-agent popover's preview) */
.a-pop.ver { width: 300px; padding: 6px; }
.a-pop.ver h6 { margin: 4px 8px 6px; font-size: 11px; font-weight: 500; color: var(--text-faint); }
.a-pop.ver .a-mi { align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 8px; }
.a-pop.ver .a-mi svg { margin-top: 2px; color: var(--text-muted); }
.a-pop.ver .a-mi b { display: block; font-size: 13px; font-weight: 500; }
.a-pop.ver .a-mi small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-faint); }
.a-pop.ver .a-mi.cur { background: var(--hover); }
/* FramePicker's menu: 164 wide, rounded 8, a shape per row, ✓ on the current one (the light theme's accent is ink) */
.a-pop.frame { width: 164px; padding: 4px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); }
.a-fr { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 5px; font-size: 12px; line-height: 16px; color: var(--text); text-align: left; cursor: pointer !important; transition: background .15s; }
.a-fr:hover { background: var(--hover); }
.a-fr > span:not(.sh) { flex: 1; min-width: 0; }
.a-fr > svg { flex: none; color: var(--text); }
.a-fr > svg:first-child { color: var(--text-muted); }
.a-fr .sh { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.a-fr .sh i { box-sizing: border-box; border: 1px solid currentColor; border-radius: 2px; opacity: .7; }
.a-pop.frame .a-hr { margin: 4px 0; }

/* Tooltip: a small dark pill with its arrow, 2 px off the button */
.a-tip { position: absolute; z-index: 60; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: rgb(20, 20, 20); color: rgb(240, 240, 240); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08); pointer-events: none; }
.a-tip[hidden] { display: none; }
.a-tip .k { margin-left: 5px; opacity: .55; }
.a-tip i { position: absolute; left: var(--ax, 50%); bottom: -4px; width: 7px; height: 7px; box-sizing: border-box; background: rgb(20, 20, 20); border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); transform: translateX(-50%) rotate(45deg); }
.a-tip.below i { top: -4px; bottom: auto; border: 0; border-left: 1px solid rgba(255, 255, 255, .16); border-top: 1px solid rgba(255, 255, 255, .16); }

/* ModelPopover: the agent menu over the composer (244 wide, rows 28 px), its lists flying out beside it */
.a-pop.hint { width: 232px; padding: 12px 14px; animation: fade .12s ease-out both; }
.a-pop.hint b { display: block; font-size: 13px; font-weight: 600; }
.a-pop.hint p { margin: 3px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.a-pop.hint a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--text); text-decoration: none; }
.a-pop.hint a:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-pop.amenu, .a-pop.fly { padding: 4px; box-shadow: var(--pop-shadow); }
.a-pop.amenu { width: 244px; }
.a-pop.fly { z-index: 21; min-width: 148px; width: max-content; animation: none; }
.a-mh { padding: 4px 10px; font-size: 11px; line-height: 16px; color: var(--text-faint); }
.a-opt { width: 100%; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; font-size: 13px; color: var(--text); text-align: left; cursor: pointer !important; }
.a-opt:hover { background: var(--hover); }
.a-opt .lg { width: 16px; flex: none; display: flex; justify-content: center; color: var(--text); }
.a-opt > svg { margin-left: auto; flex: none; color: var(--text); }
.a-opt.tall { height: auto; padding-top: 6px; padding-bottom: 6px; }
.a-opt .c { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.a-opt .c > span { white-space: nowrap; }
.a-opt .c .b { font-weight: 500; }
.a-opt .c small { max-width: 260px; font-size: 11.5px; line-height: 1.375; color: var(--text-faint); }
.a-hr { height: 1px; margin: 4px; background: var(--border); }
.a-hr.s { margin: 2px 4px; }
.a-mrow { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.a-mrow:hover, .a-mrow.on { background: var(--hover); }
.a-mrow .l { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.a-mrow .help { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--text-faint); }
.a-mrow .help:hover { background: var(--hover); color: var(--text); }
.a-mrow .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--text-dim); }
.a-mrow > svg { flex: none; color: var(--text-faint); }
.a-fh { max-width: 280px; margin: 0; padding: 4px 10px 6px; font-size: 11.5px; line-height: 1.375; color: var(--text-faint); }

/* dialogs (ExportCenter, ShareDialog, SharePublishDialog): black/45 over the window with a 2 px blur — the film is
   paused while one is open — rounded-2xl cards, 15 px semibold titles, ink primary buttons */
.a-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.a-modal.enter { animation: fade .16s ease-out both; }
.a-modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.x-dlg { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg); }
.a-modal.enter .x-dlg { animation: rise .16s ease-out both; }
.x-dlg button:not(:disabled) { cursor: pointer !important; }
.x-close { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--text-faint); transition: background .15s, color .15s; }
.x-close:hover { background: var(--hover); color: var(--text); }
.x-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--text); font-size: 13.5px; font-weight: 500; color: var(--bg); white-space: nowrap; transition: opacity .15s; }
.x-primary:hover:not(:disabled) { opacity: .9; }
.x-primary:disabled { opacity: .4; }
.x-primary.busy:disabled, .x-primary[data-pub]:disabled { opacity: .7; }
.x-primary.sm { height: 36px; font-size: 13px; }
.x-primary.xs { height: 32px; gap: 6px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; }
.x-primary.wide { width: 100%; }
.x-primary svg[data-spin], .x-primary.busy svg, .x-film p svg, [data-pub]:disabled svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.x-ghost { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--text-muted); transition: background .15s, color .15s; }
.x-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.x-ghost:disabled { opacity: .4; }
.x-ghost.sm { height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; }
.x-ghost.stop:hover { color: #dc2626; }

/* Export: 880 × 640, the nav 212 wide on the grey */
.x-export { width: 880px; height: 640px; max-height: 100%; display: flex; }
.x-nav { width: 212px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--border); background: var(--surface-2); }
.x-nav h2 { margin: 0; padding: 4px 8px 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.x-nav > button { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--text-muted); transition: background .15s; }
.x-nav > button:hover { background: var(--hover); }
.x-nav > button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02); }
.x-nav > button svg { margin-top: 2px; }
.x-nav b { display: block; font-size: 13px; font-weight: 500; }
.x-nav small { display: block; font-size: 11px; line-height: 1.375; color: var(--text-faint); }
.x-engine { margin: auto 0 0; padding: 12px 8px 0; font-size: 10.5px; line-height: 1.625; color: var(--text-faint); }
.x-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.x-head { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px 4px; }
.x-head > div { flex: 1; min-width: 0; }
.x-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.x-head p { margin: 2px 0 0; font-size: 12px; line-height: 1.625; color: var(--text-muted); }
.x-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 16px; scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; }
.x-stack { display: flex; flex-direction: column; gap: 20px; }
.x-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.x-lab { font-size: 11.5px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--text-faint); }
.x-hint { margin: 0; font-size: 11.5px; line-height: 1.625; color: var(--text-faint); }
.x-desc { margin: -4px 0 4px; font-size: 12px; color: var(--text-muted); }
.x-sub { margin: 0; padding-left: 40px; font-size: 11.5px; color: var(--text-faint); }
.x-grid { display: grid; gap: 8px; }
.x-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
.x-grid.g2:has(> .x-card) { gap: 8px; }
.x-col { display: flex; flex-direction: column; gap: 8px; }
.x-num { font-variant-numeric: tabular-nums; }
.x-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); text-align: left; transition: border-color .15s, background .15s; }
.x-card:hover { border-color: rgba(0, 0, 0, .2); }
.x-card.on { border-color: rgba(0, 0, 0, .14); background: var(--hover); }
.x-card .t { width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text); }
.x-card .t .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-card .d { font-size: 11px; line-height: 1.375; color: var(--text-faint); }
.x-card .w { font-size: 10.5px; line-height: 1.375; color: var(--warn); }
.x-gl { position: relative; flex: none; display: inline-block; overflow: hidden; box-sizing: border-box; border-radius: 2px; border: 1px solid var(--text-faint); }
.x-gl i { position: absolute; background: var(--text-muted); opacity: .5; }
.x-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-chip { min-width: 56px; display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-muted); transition: border-color .15s, background .15s; }
.x-chip:hover { border-color: rgba(0, 0, 0, .2); }
.x-chip.on { border-color: rgba(0, 0, 0, .14); background: var(--hover); color: var(--text); }
.x-chip span { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.x-chip small { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.x-chip.row { min-width: 0; flex-direction: row; gap: 6px; }
.x-chip.row span { font-size: 12px; }
.x-seg { align-self: flex-start; max-width: 100%; display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.x-seg button { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); transition: color .15s, background .15s; }
.x-seg button:hover { color: var(--text); }
.x-seg button.on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.x-tog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); }
.x-tog.off { color: var(--text-faint); }
.x-tog button { position: relative; width: 30px; height: 18px; flex: none; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.x-tog button[aria-checked="true"] { background: var(--text); }
.x-tog button:disabled { opacity: .5; }
.x-tog button i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); transition: left .15s; }
.x-tog button[aria-checked="true"] i { left: 14px; }
.x-srcs { max-height: 200px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent; }
.x-src { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); text-align: left; transition: border-color .15s, background .15s; }
.x-src:hover { border-color: rgba(0, 0, 0, .2); }
.x-src.on { border-color: rgba(0, 0, 0, .14); background: var(--hover); }
.x-src i { width: 14px; height: 14px; flex: none; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--text-faint); }
.x-src.on i { border: 4px solid var(--text); }
.x-src .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text); }
.x-src .d { flex: none; font-size: 11px; color: var(--text-faint); }
.x-callout { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; line-height: 1.625; color: var(--text-muted); }
.x-callout svg { margin-top: 3px; color: var(--warn); }
.x-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--text); transition: background .15s; }
.x-btn:hover { background: var(--hover); }
.x-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.x-range select { max-width: 220px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
.x-range .n { font-variant-numeric: tabular-nums; }
.x-foot { flex: none; padding: 14px 20px; border-top: 1px solid var(--border); }
.x-save { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; }
.x-save svg { color: var(--text-faint); }
.x-save .l { flex: none; color: var(--text-muted); }
.x-save .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11.5px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text); }
.x-save button { flex: none; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); transition: background .15s, color .15s; }
.x-save button:hover { background: var(--hover); color: var(--text); }
.x-go { display: flex; align-items: center; gap: 12px; }
.x-sum { flex: 1; min-width: 0; font-size: 12px; line-height: 1.625; color: var(--text-muted); }
.x-sum .ok { color: var(--ok); } .x-sum .faint { color: var(--text-faint); }

/* Publish before you share: 420 wide, the cloud tile, Not now / Publish to cloud */
.x-small { width: 420px; padding: 20px; }
.x-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.x-tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text); }
.x-small h3 { margin: 16px 0 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.x-small p { margin: 6px 0 0; font-size: 13px; line-height: 1.625; color: var(--text-muted); }
.x-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Share: 440 wide — the film, its link and two quiet actions */
.x-share { width: 440px; }
.x-sh { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.x-sh h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.x-sb { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 20px; }
.x-film { min-width: 0; display: flex; align-items: center; gap: 12px; }
.x-film .th { position: relative; width: 88px; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border); }
.x-film .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-film > div { min-width: 0; flex: 1; }
.x-film b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--text); }
.x-film p { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.x-link { height: 40px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.x-link > svg { color: var(--text-faint); }
.x-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); user-select: text; -webkit-user-select: text; }
.x-link .ph { flex: 1; min-width: 0; height: 10px; border-radius: 999px; background: var(--surface-2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.x-note { margin: -4px 0 0; font-size: 12px; line-height: 1.625; color: var(--text-faint); }
.x-row { display: flex; align-items: center; justify-content: space-between; }
.a-toast { position: absolute; left: 50%; bottom: 18px; z-index: 40; transform: translateX(-50%); padding: 9px 14px; border-radius: 10px; background: #1a1a1a; color: #fff; font-size: 12.5px; box-shadow: var(--shadow-lg); animation: toast-in .18s ease-out both; white-space: nowrap; }
/* the keyframes keep the centring, or the toast would slide in from the right */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 4px); } }
.a-toast[hidden] { display: none; }
.a-toast a { margin-left: 8px; color: #7fd3c9; }

.a-media-status { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 5; padding: 6px 12px; border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; box-shadow: var(--shadow-lg); pointer-events: none; }
.a-media-status[hidden] { display: none; }