reelson 0.7.0

package/skills/reelson-compose/sections/outro/endcard/section.css

@@ -0,0 +1,25 @@
+#outro { display: grid; place-items: center; }
+#outro .card { display: flex; flex-direction: column; align-items: center; gap: 72px; text-align: center; will-change: transform; }
+#outro .brand { display: flex; flex-direction: column; align-items: center; gap: 26px; }
+#outro .wordmark { font-size: 120px; }
+#outro .brand-line { width: 180px; }
+#outro .what { display: flex; flex-direction: column; align-items: center; gap: 22px; }
+#outro .title { font-size: 76px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; max-width: 1400px; }
+#outro .subtitle { font-size: 34px; font-weight: 400; color: var(--muted); max-width: 1300px; line-height: 1.35; }
+#outro .subtitle:empty { display: none; }
+
+/* Portrait: the same card, sized for a phone screen */
+#root.portrait #outro .card { gap: 90px; padding: 0 80px; }
+#root.portrait #outro .wordmark { font-size: 132px; }
+#root.portrait #outro .brand-sub { font-size: 34px; }
+#root.portrait #outro .title { font-size: 92px; max-width: 920px; }
+#root.portrait #outro .subtitle { font-size: 42px; max-width: 880px; }
+#root.portrait #outro .meta { font-size: 30px; }
+
+/* Square: the same card, narrower */
+#root.square #outro .card { gap: 64px; padding: 0 70px; }
+#root.square #outro .wordmark { font-size: 112px; }
+#root.square #outro .brand-sub { font-size: 30px; }
+#root.square #outro .title { font-size: 76px; max-width: 940px; }
+#root.square #outro .subtitle { font-size: 36px; max-width: 900px; }
+#root.square #outro .meta { font-size: 26px; }

package/skills/reelson-compose/sections/outro/endcard/section.html

@@ -0,0 +1,13 @@
+<section id="outro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="card">
+    <div class="brand">
+      <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+      <div class="brand-line"></div>
+    </div>
+    <div class="what">
+      <h1 class="title">{{TITLE}}</h1>
+      <p class="subtitle">{{SUBTITLE}}</p>
+      <div class="meta" data-chip></div>
+    </div>
+  </div>
+</section>

package/skills/reelson-compose/sections/outro/endcard/section.js

@@ -0,0 +1,13 @@
+// Waits out the recap's cross-fade (0.3 s) so nothing lands on its text, then letters rise
+// from the centre, the line wipes open, title / subtitle / chip follow. Then it holds with a barely-there drift and ends
+// fully visible: the paused last frame is a readable end card.
+const e0 = section.start + 0.3;
+tl.fromTo('#outro .l', { opacity: 0, y: 36 }, { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out', stagger: { each: 0.05, from: 'center' }, ...later }, e0 + 0.1);
+tl.fromTo('#outro .brand-line', { scaleX: 0 }, { scaleX: 1, duration: 0.7, ease: 'power3.inOut', ...later }, e0 + 0.45);
+tl.fromTo('#outro .title', { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', ...later }, e0 + 0.6);
+tl.fromTo('#outro .subtitle', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out', ...later }, e0 + 0.8);
+tl.fromTo('#outro .meta', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out', ...later }, e0 + 0.95);
+tl.fromTo('#outro .card', { scale: 1 }, { scale: 1.02, duration: Math.max(0.5, section.duration - 1.9), ease: 'sine.inOut', ...later }, e0 + 1.6);
+
+gsap.set(['#outro .l', '#outro .title', '#outro .subtitle', '#outro .meta'], { opacity: 0 });
+gsap.set('#outro .brand-line', { scaleX: 0 });

package/skills/reelson-compose/sections/outro/endcard/section.json

@@ -0,0 +1,8 @@
+{
+    "description": "An end card that stays readable: wordmark (or logo) and accent line over the video title, subtitle and steps chip. Held longer, drifts very slightly, and ends fully visible, so the paused last frame says what the video was.",
+    "timing": {
+        "duration": 4.0
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/outro/wordmark/section.css

@@ -0,0 +1,11 @@
+#outro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
+
+/* Portrait: a wordmark that fits the width */
+#root.portrait #outro { padding: 0 60px; }
+#root.portrait #outro .wordmark { font-size: 150px; }
+#root.portrait #outro .brand-sub { font-size: 38px; }
+
+/* Square: a wordmark that fits the width */
+#root.square #outro { padding: 0 60px; }
+#root.square #outro .wordmark { font-size: 150px; }
+#root.square #outro .brand-sub { font-size: 38px; }

package/skills/reelson-compose/sections/outro/wordmark/section.html

@@ -0,0 +1,5 @@
+<section id="outro" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="wordmark" data-text="{{BRAND}}" data-logo="{{BRAND_LOGO}}"></div>
+  <div class="brand-line"></div>
+  <div class="brand-sub">{{BRAND_SUB}}</div>
+</section>

package/skills/reelson-compose/sections/outro/wordmark/section.js

@@ -0,0 +1,12 @@
+// Letters drift in from farther out and scale up from 0.88, the line wipes from the left,
+// then everything zooms out gently at the very end and settles at 15% opacity: the last
+// frame still shows the wordmark (house rule), never empty.
+const b0 = section.start;
+tl.fromTo('#outro .l', { opacity: 0, x: (i, el, all) => (i - all.length / 2) * (DEMO.layout.format === 'landscape' ? 44 : 16), scale: 0.88, filter: 'blur(12px)' },
+  { opacity: 1, x: 0, scale: 1, filter: 'blur(0px)', duration: 1.1, ease: 'power3.out', stagger: { each: 0.06, from: 'center' }, ...later }, b0 + 0.1);
+tl.fromTo('#outro .brand-line', { scaleX: 0, transformOrigin: 'left center' }, { scaleX: 1, duration: 0.9, ease: 'power3.inOut', ...later }, b0 + 0.7);
+tl.fromTo('#outro .brand-sub', { opacity: 0, y: 22 }, { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out', ...later }, b0 + 0.95);
+tl.fromTo('#outro', { opacity: 1, scale: 1 }, { opacity: 0.15, scale: 0.96, duration: 0.8, ease: 'power2.in', ...later }, b0 + section.duration - 0.8);
+
+gsap.set(['#outro .l', '#outro .brand-sub'], { opacity: 0 });
+gsap.set('#outro .brand-line', { scaleX: 0 });

package/skills/reelson-compose/sections/outro/wordmark/section.json

@@ -0,0 +1,8 @@
+{
+    "description": "Big centred wordmark (or logo): letters drift in from farther out, the line wipes from the left, then it zooms out gently and settles at 15% opacity — the last frame still shows the brand.",
+    "timing": {
+        "duration": 2.6
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/recap/compact/section.css

@@ -0,0 +1,26 @@
+#recap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; padding: 0 140px; text-align: center; }
+#recap .head { display: flex; flex-direction: column; align-items: center; gap: 22px; }
+#recap .title { font-size: 96px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
+#recap .accent { transform-origin: center; }
+#recap .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; max-width: 1600px; }
+#recap .chip { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px;
+  border: 1px solid var(--line); background: var(--surface); font-size: 28px; font-weight: 500; white-space: nowrap; }
+#recap .chip .n { width: 40px; height: 40px; font-size: 19px; }
+#recap .chip .who { font-size: 17px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-soft);
+  padding-right: 14px; border-right: 1px solid var(--line); }
+
+/* Portrait: the chips stack one per row */
+#root.portrait #recap { gap: 80px; padding: 0 80px; }
+#root.portrait #recap .title { font-size: 116px; }
+#root.portrait #recap .chips { flex-direction: column; align-items: center; gap: 22px; max-width: 920px; }
+#root.portrait #recap .chip { font-size: 38px; white-space: normal; text-align: left; padding: 14px 34px 14px 14px; }
+#root.portrait #recap .chip .n { width: 54px; height: 54px; font-size: 26px; }
+#root.portrait #recap .chip .who { font-size: 22px; }
+
+/* Square: the chips stack one per row */
+#root.square #recap { gap: 56px; padding: 0 70px; }
+#root.square #recap .title { font-size: 96px; }
+#root.square #recap .chips { flex-direction: column; align-items: center; gap: 16px; max-width: 940px; }
+#root.square #recap .chip { font-size: 32px; white-space: normal; text-align: left; padding: 12px 30px 12px 12px; }
+#root.square #recap .chip .n { width: 46px; height: 46px; font-size: 22px; }
+#root.square #recap .chip .who { font-size: 19px; }

package/skills/reelson-compose/sections/recap/compact/section.html

@@ -0,0 +1,8 @@
+<section id="recap" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="head">
+    <div class="eyebrow">{{EYEBROW}}</div>
+    <h1 class="title">{{OUTRO_TITLE}}</h1>
+    <div class="accent"></div>
+  </div>
+  <div class="chips"></div>
+</section>

package/skills/reelson-compose/sections/recap/compact/section.js

@@ -0,0 +1,23 @@
+// Head rises, chips pop in one after another, then the card fades.
+const chips = document.querySelector('#recap .chips');
+const steps = DEMO.callouts.slice(0, section.maxSteps);
+const rows = steps.map((c, i) => {
+  const el = node('div', 'chip');
+  el.append(node('span', 'n', String(i + 1)));
+  // Two-actor videos: the role tag opens each role's first chip.
+  if (c.group && c.group !== steps[i - 1]?.group) el.append(node('span', 'who', c.group));
+  el.append(node('span', '', c.text));
+  return chips.appendChild(el);
+});
+const r0 = section.start;
+tl.fromTo('#recap', { opacity: 0 }, { opacity: 1, duration: FADE, ease: 'power2.inOut', ...later }, r0);
+tl.fromTo('#recap .eyebrow', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out', ...later }, r0 + 0.05);
+tl.fromTo('#recap .title', { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out', ...later }, r0 + 0.12);
+tl.fromTo('#recap .accent', { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: 'power3.inOut', ...later }, r0 + 0.35);
+rows.forEach((row, i) => {
+  tl.fromTo(row, { opacity: 0, y: 18, scale: 0.94 }, { opacity: 1, y: 0, scale: 1, duration: 0.4, ease: 'back.out(1.6)', ...later }, r0 + 0.4 + i * 0.08);
+});
+tl.fromTo('#recap', { opacity: 1 }, { opacity: 0, duration: FADE, ease: 'power2.in', ...later }, r0 + section.duration - FADE);
+
+gsap.set(['#recap', '#recap .eyebrow', '#recap .title', ...rows], { opacity: 0 });
+gsap.set('#recap .accent', { scaleX: 0 });

package/skills/reelson-compose/sections/recap/compact/section.json

@@ -0,0 +1,11 @@
+{
+    "description": "Centred and short: eyebrow, title and accent line, then the steps as a wrapping row of numbered chips (role tag on the first chip of each role). Cross-fades in after the recording.",
+    "timing": {
+        "base": 1.8,
+        "perStep": 0.35,
+        "max": 5.5,
+        "maxSteps": 10
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/sections/recap/steps/section.css

@@ -0,0 +1,36 @@
+#recap { display: grid; grid-template-columns: 640px 1fr; align-items: center; column-gap: 120px; padding: 0 160px; }
+#recap .left { display: flex; flex-direction: column; gap: 26px; }
+#recap .title { font-size: 120px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
+#recap .steps { display: flex; flex-direction: column; gap: 14px; }
+#recap .step { display: inline-flex; align-items: center; gap: 18px; font-size: 32px; font-weight: 500; color: var(--ink); white-space: nowrap; }
+#recap .step .n { font-size: 21px; }
+#recap .steps.dense { gap: 11px; }
+#recap .steps.dense .step { font-size: 28px; gap: 16px; }
+#recap .steps.dense .step .n { width: 38px; height: 38px; font-size: 18px; }
+/* Split by actor: a titled list per role */
+#recap .group { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 700; letter-spacing: 0.2em;
+  text-transform: uppercase; color: var(--brand-soft); margin: 18px 0 2px; }
+#recap .group:first-child { margin-top: 0; }
+#recap .group::after { content: ""; width: 64px; height: 2px; border-radius: 1px; background: var(--line); }
+
+/* Portrait: the title above the steps, one column */
+#root.portrait #recap { grid-template-columns: 1fr; align-content: center; row-gap: 90px; padding: 0 90px; }
+#root.portrait #recap .title { font-size: 128px; }
+#root.portrait #recap .steps { gap: 26px; }
+#root.portrait #recap .step { font-size: 42px; gap: 24px; white-space: normal; align-items: flex-start; line-height: 1.25; }
+#root.portrait #recap .step .n { width: 58px; height: 58px; font-size: 28px; }
+#root.portrait #recap .steps.dense { gap: 18px; }
+#root.portrait #recap .steps.dense .step { font-size: 36px; }
+#root.portrait #recap .steps.dense .step .n { width: 50px; height: 50px; font-size: 24px; }
+#root.portrait #recap .group { font-size: 28px; margin: 26px 0 4px; }
+
+/* Square: the title above the steps, one column */
+#root.square #recap { grid-template-columns: 1fr; align-content: center; row-gap: 56px; padding: 0 80px; }
+#root.square #recap .title { font-size: 100px; }
+#root.square #recap .steps { gap: 18px; }
+#root.square #recap .step { font-size: 36px; gap: 20px; white-space: normal; align-items: flex-start; line-height: 1.25; }
+#root.square #recap .step .n { width: 50px; height: 50px; font-size: 24px; }
+#root.square #recap .steps.dense { gap: 12px; }
+#root.square #recap .steps.dense .step { font-size: 30px; }
+#root.square #recap .steps.dense .step .n { width: 42px; height: 42px; font-size: 20px; }
+#root.square #recap .group { font-size: 24px; margin: 18px 0 2px; }

package/skills/reelson-compose/sections/recap/steps/section.html

@@ -0,0 +1,8 @@
+<section id="recap" class="clip" data-start="{{START}}" data-duration="{{DURATION}}" data-track-index="{{TRACK}}">
+  <div class="left">
+    <div class="eyebrow">{{EYEBROW}}</div>
+    <h1 class="title">{{OUTRO_TITLE}}</h1>
+    <div class="accent"></div>
+  </div>
+  <div class="steps"></div>
+</section>

package/skills/reelson-compose/sections/recap/steps/section.js

@@ -0,0 +1,27 @@
+// Left block rises, steps cascade in on the right, then the card fades.
+const list = document.querySelector('#recap .steps');
+const steps = DEMO.callouts.slice(0, section.maxSteps); // the card holds this many
+if (steps.length > 8) list.classList.add('dense');
+// Two-actor videos: callouts carry a `group` (the role from the hand-off card); each
+// role gets its own titled list, numbering continues across them.
+const rows = [];
+steps.forEach((c, i) => {
+  if (c.group && c.group !== steps[i - 1]?.group) {
+    rows.push(list.appendChild(node('div', 'group', c.group)));
+  }
+  const el = node('div', 'step');
+  el.append(node('span', 'n', String(i + 1)), node('span', '', c.text));
+  rows.push(list.appendChild(el));
+});
+const r0 = section.start;
+tl.fromTo('#recap', { opacity: 0 }, { opacity: 1, duration: FADE, ease: 'power2.inOut', ...later }, r0);
+tl.fromTo('#recap .eyebrow', { opacity: 0, y: 18 }, { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out', ...later }, r0 + 0.1);
+tl.fromTo('#recap .title', { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', ...later }, r0 + 0.2);
+tl.fromTo('#recap .accent', { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: 'power3.inOut', ...later }, r0 + 0.45);
+rows.forEach((row, i) => {
+  tl.fromTo(row, { opacity: 0, x: 36 }, { opacity: 1, x: 0, duration: 0.45, ease: 'power3.out', ...later }, r0 + 0.5 + i * 0.1);
+});
+tl.fromTo('#recap', { opacity: 1 }, { opacity: 0, duration: FADE, ease: 'power2.in', ...later }, r0 + section.duration - FADE);
+
+gsap.set(['#recap', '#recap .eyebrow', '#recap .title', ...rows], { opacity: 0 });
+gsap.set('#recap .accent', { scaleX: 0 });

package/skills/reelson-compose/sections/recap/steps/section.json

@@ -0,0 +1,11 @@
+{
+    "description": "Eyebrow, big title and accent line on the left; ONE column of numbered steps on the right (split by role in two-actor videos). Cross-fades in after the recording.",
+    "timing": {
+        "base": 2.4,
+        "perStep": 0.45,
+        "max": 7.5,
+        "maxSteps": 10
+    },
+    "portrait": true,
+    "square": true
+}

package/skills/reelson-compose/studio/index.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>reelson studio</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect width=%2216%22 height=%2216%22 rx=%223%22 fill=%22%235aa9ff%22/%3E%3Cpath d=%22M6 4.5v7l5.5-3.5z%22 fill=%22%230e1116%22/%3E%3C/svg%3E">
+<script src="/hf/player.js"></script>
+<link rel="stylesheet" href="/studio/studio.css">
+</head>
+<body>
+<header>
+  <h1 id="title">reelson studio</h1>
+  <span class="slug" id="slug"></span>
+  <div class="chips" id="design"></div>
+  <span class="status" id="status">starting…</span>
+</header>
+<main>
+  <div class="stage">
+    <pre class="banner" id="banner"></pre>
+    <div class="viewer" id="viewer"><hyperframes-player id="player"></hyperframes-player></div>
+    <div class="transport">
+      <button id="start" title="Start (Home)">⏮</button>
+      <button id="back" title="Back one frame (←)">◀︎</button>
+      <button id="play" title="Play / pause (Space)">▶︎</button>
+      <button id="fwd" title="Forward one frame (→)">▶︎|</button>
+      <button id="end" title="Last frame (End)">⏭</button>
+      <span class="time" id="time">0.00 / 0.00<span class="frame"></span></span>
+      <span class="spacer"></span>
+      <button id="mute" title="Mute (M)">🔊</button>
+    </div>
+  </div>
+  <aside>
+    <section class="inspector">
+      <h2>Selected</h2>
+      <div id="inspector"><p class="empty">Click an item on the timeline.</p></div>
+    </section>
+    <section>
+      <h2>Warnings</h2>
+      <ul class="warnings" id="warnings"></ul>
+    </section>
+    <section>
+      <h2>Keys</h2>
+      <div class="keys">
+        <kbd>Space</kbd><span>play / pause</span>
+        <kbd>← →</kbd><span>one frame (Shift: one second)</span>
+        <kbd>[ ]</kbd><span>previous / next item edge</span>
+        <kbd>Home End</kbd><span>first / last frame</span>
+        <kbd>+ − 0</kbd><span>zoom timeline / fit</span>
+        <kbd>M</kbd><span>mute</span>
+        <kbd>C</kbd><span>callout at the playhead</span>
+        <kbd>Delete</kbd><span>delete the selected callout / zoom</span>
+        <kbd>⌘Z ⇧⌘Z</kbd><span>undo / redo</span>
+      </div>
+    </section>
+  </aside>
+</main>
+<section class="timeline">
+  <div class="tl-bar">
+    <button id="add-callout" title="Add a callout at the playhead (C)">+ Callout</button>
+    <button id="undo" title="Undo (⌘Z)" disabled>↶ Undo</button>
+    <button id="redo" title="Redo (⇧⌘Z)" disabled>↷ Redo</button>
+    <span class="toast" id="toast"></span>
+    <span class="hint">Drag callouts to move them, their right edge to resize · drag the recording’s edges to trim · edits save to video.json</span>
+    <span class="spacer"></span>
+    <button id="zoom-out" title="Zoom out (−)">−</button>
+    <button id="zoom-fit" title="Fit (0)">Fit</button>
+    <button id="zoom-in" title="Zoom in (+)">+</button>
+  </div>
+  <div class="tl-body" id="tl-body">
+    <div class="tl-inner" id="tl-inner">
+      <div class="labels" id="labels"></div>
+      <div class="tracks" id="tracks"></div>
+    </div>
+  </div>
+</section>
+<div class="tooltip" id="tooltip"></div>
+
+<script src="/studio/studio.js"></script>
+</body>
+</html>

package/skills/reelson-compose/studio/studio.css

@@ -0,0 +1,142 @@
+:root {
+  --bg: #0e1116;
+  --panel: #151a21;
+  --panel-2: #1b212a;
+  --line: #262e39;
+  --text: #d7dde5;
+  --muted: #7d8896;
+  --accent: #5aa9ff;
+  --intro: #7c6cf0;
+  --recording: #3f7d5c;
+  --recap: #c7862f;
+  --outro: #b24f7a;
+  --callout: #e2b340;
+  --zoom: #38b2ac;
+  --handoff: #8f9bb3;
+  --click: #9ecbff;
+  --marker: #a0a8b5;
+  --audio: #4f6a8f;
+  --bad: #ef5b5b;
+  --playhead: #ff5a4f;
+  --label-w: 104px;
+  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color-scheme: dark;
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); height: 100vh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
+header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; }
+header h1 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+header .slug { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.chip { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
+.chip b { color: var(--text); font-weight: 500; }
+.status { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
+.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fb96b; }
+.status.error::before { background: var(--bad); }
+.status.offline::before { background: var(--muted); }
+
+main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
+.stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px; gap: 8px; }
+.viewer { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
+hyperframes-player { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
+.viewer.tall hyperframes-player { width: auto; height: 100%; }
+.transport { display: flex; align-items: center; gap: 8px; }
+button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; cursor: pointer; }
+button:hover { border-color: #3a4554; }
+button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
+.time .frame { color: var(--muted); margin-left: 8px; }
+.spacer { flex: 1; }
+.hint { color: var(--muted); font-size: 11px; }
+
+aside { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 16px; }
+aside h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
+.inspector dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
+.inspector dt { color: var(--muted); }
+.inspector dd { margin: 0; overflow-wrap: anywhere; }
+.inspector .kind { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-bottom: 6px; color: #0e1116; font-weight: 600; }
+.inspector .problem { color: var(--bad); margin-top: 6px; font-size: 12px; }
+.empty { color: var(--muted); font-size: 12px; }
+.warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.warnings li { font-size: 12px; padding: 6px 8px; border-radius: 4px; background: #2a1f14; border-left: 3px solid var(--recap); }
+.warnings li.bad { background: #2b1618; border-left-color: var(--bad); }
+.warnings li.ok { background: #14261b; border-left-color: #3fb96b; }
+.keys { font-size: 11px; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
+kbd { font-family: ui-monospace, Menlo, monospace; font-size: 10px; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); color: var(--text); }
+
+.timeline { border-top: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; height: 292px; }
+.tl-bar { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--line); }
+.tl-body { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; }
+.tl-inner { position: relative; min-width: 100%; height: 100%; }
+.labels { position: sticky; left: 0; z-index: 3; width: var(--label-w); float: left; height: 100%; background: var(--panel); border-right: 1px solid var(--line); }
+.labels div { height: 28px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
+.labels .ruler-label { height: 22px; }
+.tracks { position: absolute; left: var(--label-w); top: 0; bottom: 0; cursor: text; }
+.ruler { position: relative; height: 22px; border-bottom: 1px solid var(--line); }
+.tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
+.tick span { position: absolute; left: 3px; top: 3px; font-size: 10px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
+.tick.minor { top: 15px; }
+.lane { position: relative; height: 28px; border-bottom: 1px solid var(--line); }
+.item { position: absolute; top: 4px; height: 20px; border-radius: 4px; font-size: 11px; line-height: 20px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0e1116; cursor: pointer; min-width: 3px; border: 1px solid transparent; }
+.item:hover { filter: brightness(1.15); }
+.item.selected { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
+.item.bad { outline: 2px solid var(--bad); outline-offset: -1px; }
+.item.intro { background: var(--intro); color: #fff; }
+.item.recording { background: var(--recording); color: #fff; z-index: 1; } /* its trim handles sit over the cross-fades */
+.item.recap { background: var(--recap); }
+.item.outro { background: var(--outro); color: #fff; }
+.item.callout { background: var(--callout); }
+.item.handoff { background: var(--handoff); }
+.item.audio { background: var(--audio); color: #fff; opacity: .85; }
+.item.zoom { background: transparent; padding: 0; overflow: visible; }
+.item.zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.item.zoom span { position: relative; padding: 0 6px; color: var(--text); font-weight: 600; }
+.dot { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--click); cursor: pointer; }
+.dot.type { border-radius: 2px; }
+.dot.selected { box-shadow: 0 0 0 2px #fff; }
+.glide { position: absolute; top: 13px; height: 2px; background: color-mix(in srgb, var(--click) 45%, transparent); pointer-events: none; }
+.typing { position: absolute; top: 11px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--click) 55%, transparent); pointer-events: none; }
+.pin { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: var(--marker); cursor: pointer; }
+.pin.unused { background: repeating-linear-gradient(var(--marker) 0 3px, transparent 3px 6px); }
+.pin.selected { background: #fff; width: 3px; }
+.belt { position: absolute; top: 4px; height: 20px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--handoff) 40%, transparent) 0 4px, transparent 4px 8px); border-radius: 4px 0 0 4px; pointer-events: none; }
+.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--playhead); pointer-events: none; z-index: 2; }
+.playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top: 7px solid var(--playhead); }
+.banner { display: none; margin: 0; padding: 8px 14px; background: #3a1619; color: #ffd5d5; font-size: 12px; white-space: pre-wrap; border-bottom: 1px solid #5a2328; font-family: ui-monospace, Menlo, monospace; }
+.banner.show { display: block; }
+.tooltip { position: fixed; z-index: 10; pointer-events: none; background: #000d; border: 1px solid var(--line); padding: 4px 7px; border-radius: 4px; font-size: 11px; max-width: 320px; display: none; }
+
+@media (max-width: 860px) {
+  main { grid-template-columns: 1fr; }
+  aside { display: none; }
+}
+
+/* editing */
+button:disabled { opacity: .45; cursor: default; }
+button.danger { color: #ffb4b4; border-color: #5a2328; }
+button.danger:hover { background: #3a1619; }
+input, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; width: 100%; min-width: 0; }
+input:focus, select:focus { outline: none; border-color: var(--accent); }
+input::placeholder { color: var(--muted); }
+.inspector dl { align-items: center; }
+.inspector .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.inspector .note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
+.chip select { width: auto; background: transparent; border: none; padding: 0 2px; color: var(--text); font-weight: 500; font-size: 11px; cursor: pointer; }
+.chip select:focus { outline: 1px solid var(--accent); }
+.status.busy::before { background: var(--callout); }
+.item.editable::after { content: ""; position: absolute; top: 3px; bottom: 3px; right: 1px; width: 2px; border-radius: 1px; background: #0006; }
+.item.recording.editable::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 1px; width: 2px; border-radius: 1px; background: #fff8; }
+.item.recording.editable::after { background: #fff8; }
+.item.zoom.editable::after { display: none; }
+.item.dragging { opacity: .8; box-shadow: 0 0 0 1px var(--accent); z-index: 1; }
+.item.half { top: 4px; height: 9px; line-height: 9px; font-size: 9px; }
+.lane-note { position: absolute; left: 8px; top: 7px; }
+.toast { font-size: 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
+.toast.show { display: inline-block; }
+.toast.bad { color: #ffd5d5; background: #3a1619; border-color: #5a2328; white-space: normal; }
+.toast.show ~ .hint { display: none; }
+
+/* cursor lane */
+.item.cursor { background: color-mix(in srgb, var(--click) 30%, transparent); color: var(--text); border: 1px dashed color-mix(in srgb, var(--click) 60%, transparent); }
+.item.cursor.hidden, .item.cursor.filmed { background: transparent; color: var(--muted); }
+.press { position: absolute; top: 8px; width: 2px; height: 12px; margin-left: -1px; background: var(--click); pointer-events: none; z-index: 1; }