freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.3

package/dist/assets/design/skills/talking-head-recut/references/DESIGN_INDEX.md

@@ -0,0 +1,145 @@
+# V—Take Visual Design Library
+
+This directory is a **reference library** for the talking-head-recut skill. Style, layout,
+and video frame are three **orthogonal** dimensions you can freely mix when
+designing a takeaway video.
+
+```
+Style  ×  Layout  ×  VideoFrame
+ (10)      (4)         (3)        = 120 possible combinations
+```
+
+Read a reference file when you decide to use that dimension. Each file is a
+self-contained HTML fragment that follows the talking-head-recut card-HTML contract
+(scoped `<style>`, no `<script>`, no external URLs, animations only via
+`data-anim-*`).
+
+## Layouts — how video and card share the canvas
+
+| key       | file                                         | what it does                                            | best for                                |
+| --------- | -------------------------------------------- | ------------------------------------------------------- | --------------------------------------- |
+| `split`   | [layouts/split.html](layouts/split.html)     | 50/50 side-by-side (landscape) or top/bottom (portrait) | speaker + data equal weight             |
+| `stack`   | [layouts/stack.html](layouts/stack.html)     | video on top (~52%), card below                         | talking-head with summary card          |
+| `pip`     | [layouts/pip.html](layouts/pip.html)         | card fills canvas, video rounded PiP in corner          | content-heavy moment, speaker secondary |
+| `overlay` | [layouts/overlay.html](layouts/overlay.html) | video full-bleed, glass card floats on bottom           | cinematic / dramatic moments            |
+
+A layout is a **two-part recipe**: pick a `card.zone` value to put in
+`storyboard.json` AND author a GSAP tween for `#video-wrap` to its
+target rect in the composition's `<script>`. Open the layout file's
+header for the recommended `zone` + the GSAP statement to paste.
+(Earlier docs referenced a `card.layout` field — that field does NOT
+exist in the real schema; the strict v3 schema only has `card.zone`.)
+
+## Styles — the card's visual language
+
+| key          | file                                             | character                                            | accent    | suggested font      |
+| ------------ | ------------------------------------------------ | ---------------------------------------------------- | --------- | ------------------- |
+| `academic`   | [styles/academic.html](styles/academic.html)     | warm paper · grid · serif · blue highlight           | `#2557a7` | serif               |
+| `editorial`  | [styles/editorial.html](styles/editorial.html)   | cream · coral block · big italic quote               | `#ff3a2d` | Playfair-like serif |
+| `minimal`    | [styles/minimal.html](styles/minimal.html)       | pure black/white · huge type · generous space        | `#000`    | Inter               |
+| `spotlight`  | [styles/spotlight.html](styles/spotlight.html)   | dark purple gradient · glow · dramatic               | `#a78bfa` | sans                |
+| `geom`       | [styles/geom.html](styles/geom.html)             | chartreuse + hot pink + black collision              | `#d4ff00` | Inter bold          |
+| `whiteboard` | [styles/whiteboard.html](styles/whiteboard.html) | paper · Caveat handwriting · sketched borders        | `#ff6b35` | Caveat              |
+| `audit`      | [styles/audit.html](styles/audit.html)           | manila paper · justified serif · APPROVED stamp      | `#8b1d1d` | serif               |
+| `terminal`   | [styles/terminal.html](styles/terminal.html)     | dark · monospace · ASCII border · prompt cursor      | `#4ade80` | mono                |
+| `swiss`      | [styles/swiss.html](styles/swiss.html)           | white · Helvetica · strict double rules · red accent | `#e8190f` | Helvetica/Inter     |
+| `xhs`        | [styles/xhs.html](styles/xhs.html)               | cream + hot pink · chips · #hashtags · ❤ row      | `#ff2e63` | sans                |
+
+Choose by content tone, not by content type — `academic` works for finance
+too if the tone is reflective; `terminal` works for non-tech if the tone is
+"engineering rigor".
+
+## Video Frames — decoration around the video element
+
+| key        | file                                         | character                                                    | when to skip                                     |
+| ---------- | -------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------ |
+| `clean`    | [frames/clean.html](frames/clean.html)       | no decoration; raw video                                     | default; safest                                  |
+| `hairline` | [frames/hairline.html](frames/hairline.html) | double-stroke + four-corner viewfinder ticks                 | over `overlay` layout (clashes with full-bleed)  |
+| `polaroid` | [frames/polaroid.html](frames/polaroid.html) | white photo frame + Caveat label + blue washi tape (no tilt) | over `overlay` layout; portrait PiP gets cramped |
+
+A frame is a decorative div that sits **next to** the `#video-wrap` inside
+the composition's `#stage`. It is one-time HTML (not animated), but you can
+fade it in/out across cards. See each frame file for the placement snippet
+and the inline `<style>` it needs.
+
+## Decision guide (loose, not prescriptive)
+
+| video content                    | suggested combos                                         |
+| -------------------------------- | -------------------------------------------------------- |
+| interview / dialogue             | `academic` × `stack`, `audit` × `split`                  |
+| product launch / announcement    | `editorial` × `overlay`, `geom` × `pip`                  |
+| data analysis / financial report | `audit` × `split`, `swiss` × `stack`, `terminal` × `pip` |
+| social clip (9:16)               | `xhs` × `overlay`, `editorial` × `stack`                 |
+| technical tutorial               | `terminal` × `split`, `whiteboard` × `pip`               |
+| emotional story / narration      | `spotlight` × `overlay`, `whiteboard` × `overlay`        |
+| minimalist presentation          | `minimal` × `split`, `swiss` × `overlay`                 |
+
+These are starting points only. Look at the transcript, pick the tone, then
+pick the visual.
+
+## Portrait sizing — bigger type for mobile
+
+Every `references/styles/*.html` is sized for a **1920×1080 landscape**
+preview. When the final composition is **portrait (1080×1920)** — the
+default for social / mobile — scale every visual size up so it reads on a
+phone held close.
+
+| token                 | landscape | **portrait** | scale |
+| --------------------- | --------- | ------------ | ----- |
+| hero title (h1/h2)    | 64–96px   | **88–132px** | ×1.35 |
+| detail / body         | 24–30px   | **30–40px**  | ×1.30 |
+| kicker / chip / meta  | 14–18px   | **18–22px**  | ×1.25 |
+| primary number / stat | 48–60px   | **64–88px**  | ×1.40 |
+| horizontal padding    | 40–64px   | **24–36px**  | ÷1.5  |
+
+`portraitPx ≈ round(landscapePx × 1.3)`. Hero headlines can go ×1.4;
+small meta stays at ×1.2. Padding **shrinks** in portrait since the card
+is narrower.
+
+For a card that must work in both, use a container query on the card
+root: `container-type: inline-size` + `font-size: clamp(64px, 8.5cqi, 132px)`.
+
+## Source aspect ratio independence
+
+Output canvas is independent of source video aspect. Three supported
+output ratios (selected by the user in Step 7.0 of SKILL.md):
+
+| ratio  | canvas    | `storyboard.layout`                                    | best for                                                   |
+| ------ | --------- | ------------------------------------------------------ | ---------------------------------------------------------- |
+| `16:9` | 1920×1080 | `"landscape"`                                          | YouTube / TV / desktop playback                            |
+| `9:16` | 1080×1920 | `"portrait"`                                           | TikTok / Reels / short-form mobile                         |
+| `4:5`  | 1080×1350 | `"portrait"` (schema treats 4:5 as portrait since h>w) | Instagram feed / WeChat Moments / works for both platforms |
+
+The layout reference files in `layouts/` document **landscape** and
+**portrait** bounds only. For **4:5** derive bounds by proportional
+vertical scaling from portrait: `4:5 y/h = round(portrait y/h × 0.703)`,
+keep `x/w` identical. The composer doesn't care about the named layout
+value; it just uses `composition.width × height`.
+
+- Landscape video on landscape canvas → `videoBounds` matches video aspect, no letterbox
+- Portrait video on landscape canvas → `videoBounds` is a narrower box (e.g. `pip` becomes 248×440); empty side filled by card or background
+- Landscape video on portrait canvas → `videoBounds` becomes a wide-but-short band; `stack` and `overlay` work best
+- Portrait video on portrait canvas → most natural; any layout
+
+The layout reference files show landscape values; for portrait you usually
+flip the long axis: `split` becomes top/bottom, `pip` video bubble shrinks
+~20%, `overlay` card slot widens to full width.
+
+## Constraints you must obey when copying from these references
+
+1. **No `<script>`** — animations only via `data-anim-*` attributes
+2. **No external URLs** — no Google Fonts CDN, no remote images; the
+   skill provides Caveat / LXGW WenKai TC / Inter / Virgil locally
+3. **All `<style>` rules must be prefixed with `.card[data-card-id="..."]`** —
+   the hyperframes sanitizer auto-scopes them, but write them already-scoped to
+   stay readable
+4. **No `on*=` inline handlers**
+5. **CSS variables for colors** when you want a card to switch theme cleanly;
+   inline hex when you want this specific style's signature look
+
+If a reference uses a font you don't have, fall back:
+
+- Playfair Display / Noto Serif SC → `ui-serif, "Songti SC", "Times New Roman", serif`
+- Noto Sans SC → `ui-sans-serif, system-ui, sans-serif`
+- JetBrains Mono → `ui-monospace, "SF Mono", Menlo, monospace`
+- Kalam → `'Caveat', cursive`

package/dist/assets/design/skills/talking-head-recut/references/confirm-visual-direction-with-user-do-this-first.md

@@ -0,0 +1,211 @@
+## Confirm Visual Direction with User (DO THIS FIRST)
+
+Before you start designing cards or deciding bounds, **ask the user to
+pick the output ratio, the layout, the style, and the card-density
+preset**. Frames are auto-selected from the chosen layout × style
+combination (see "Auto-pick frame" table below). Before sending the
+question, **precompute two things**:
+
+1. **`recommendedRatio`** from the source video's aspect ratio
+   (`metadata.json` width / height):
+   - `sourceAspect = width / height`
+   - `sourceAspect ≥ 1.5` (≥ ~3:2 wide) → recommend **`16:9`**
+   - `sourceAspect ≤ 0.7` (≤ ~9:13 tall) → recommend **`9:16`**
+   - `0.7 < sourceAspect < 1.5` (near-square) → recommend **`4:5`**
+
+   Mark the recommended option's label with " (recommended · matches source video X:Y)"
+   so the user sees why it's recommended.
+
+2. **`autoCount`** from Step 6 (`max(5, round(videoSec / (basePace ×
+densityMultiplier)))`) so the "auto" option's label can show the
+   concrete number.
+
+**Environment compatibility — pick the best available question channel.**
+Not every runtime exposes the same structured-question tool. Apply this
+order:
+
+1. **Native clarification tool** — use the structured 4-question call below.
+2. **Other native clarification tool** (e.g. `ask_question`,
+   `request_user_input`, IDE-specific prompt) — use that tool with the
+   same 4 question texts and option lists. Preserve the recommendation
+   markers and the precomputed values.
+3. **No native tool** (Codex CLI, plain text-only runtimes) — **ask
+   directly in normal conversation**. Use the plain-text template at the
+   end of this section. Keep it to **one message, 4 numbered questions**
+   (the global cap is 2–5 questions per round; we stay inside it).
+
+Rules that apply to every channel:
+
+- Ask **at most 2–5 questions per round**. Our 4 here fits.
+- Even if missing info doesn't block rendering, **ask once to confirm
+  the parameters that materially affect the final output** (ratio,
+  layout, style, cardCount).
+- If the user has already pre-approved defaults ("just use defaults",
+  "no need to ask", "auto-pick everything"), asked you not to ask, or the
+  run carries an ongoing autonomous signal ("surprise me" / "decide for me" —
+  `../hyperframes/references/brief-contract.md` § 1) — **skip
+  the question entirely** and use: `recommendedRatio`, `layout="stack"`
+  (safest cross-ratio default), `style` chosen from transcript tone in
+  the most neutral group (editorial/data), `autoCount`. Tell the user
+  what you picked in one sentence and continue.
+
+**Channel A — native `AskUserQuestion`:**
+
+```
+// Precompute before the call:
+//   recommendedRatio = "16:9" | "9:16" | "4:5"
+//   autoCount        = integer (from Step 6)
+
+AskUserQuestion({
+  questions: [
+    {
+      question: "Output video aspect ratio (canvas):",
+      header: "Aspect ratio",
+      multiSelect: false,
+      // Reorder so the recommended option appears FIRST (per AskUserQuestion convention).
+      // Append " (recommended · matches source video W×H)" to the recommended option's label.
+      options: [
+        { label: "16:9 (1920×1080) landscape", description: "TV / YouTube / desktop playback. Most natural when the source video is already landscape; widest canvas." },
+        { label: "9:16 (1080×1920) portrait", description: "TikTok / Reels / short-form mobile. Most natural for portrait source; native mobile experience." },
+        { label: "4:5 (1080×1350) near-portrait", description: "Instagram feed / WeChat Moments. Best when source is near-square or you want to cover both platforms." }
+      ]
+    },
+    {
+      question: "Choose the overall layout: how should the video and cards coexist on the canvas?",
+      header: "Layout",
+      multiSelect: false,
+      options: [
+        { label: "side-by-side (split)",  description: "Video and card each take half the canvas. Most stable for interview / data side-by-side; clear visual separation." },
+        { label: "top-bottom (stack)",    description: "Video on top (~52%), card below. Classic combo of speaker face + summary card; works well in portrait too." },
+        { label: "picture-in-picture (pip)", description: "Card fills the canvas, video shrinks to a rounded corner window. Use when content is primary and speaker is secondary." },
+        { label: "full-screen overlay (overlay)", description: "Video plays full-bleed, card floats as a glass layer on top. Strong cinematic / emotional feel." }
+      ]
+    },
+    {
+      question: "Choose the card visual style (style):",
+      header: "Style group",
+      multiSelect: false,
+      // NOTE: these 3 groups intentionally match the frame auto-pick matrix
+      // rows below, so picking a group resolves both `style` group AND the
+      // frame matrix column in one step. Memberships are mutually exclusive.
+      options: [
+        { label: "warm paper (warm-paper)", description: "academic notebook · editorial big-type · whiteboard hand-drawn · xhs social. Best for interview reflections, product launches, lifestyle, emotional stories." },
+        { label: "clinical / cold (clinical)",   description: "audit magazine · swiss grid · terminal CLI · minimal modern. Best for financial analysis, investigative reports, technical tutorials, serious presentations." },
+        { label: "experimental / avant-garde (experimental)", description: "geom color-clash geometry · spotlight dark-background. Best for short-form highlights, product launches, strong emotion, cinematic feel." }
+      ]
+    },
+    {
+      question: "Card count (takeaway pacing): how many cards to cut?",
+      header: "Card count",
+      multiSelect: false,
+      options: [
+        { label: "Auto (recommended) · approx N cards", description: "Inferred automatically from video duration and information density (see Step 6 rules). This run estimates approx N cards. Substitute the real N (your autoCount) into the label." },
+        { label: "Fewer · approx round(N × 0.6) cards", description: "Sparser cuts, each card holds longer — suits reflective / slow-paced content." },
+        { label: "More · approx round(N × 1.5) cards", description: "Tighter cuts, faster rhythm — suits staccato / data-dense / short-form highlight content." }
+      ]
+    }
+  ]
+})
+```
+
+**About "Other"** — `AskUserQuestion` automatically adds an "Other" option to the card count question. The user can type a number directly (e.g. "8", "20") as the cardCount target. Parse the input as an integer: if parsing succeeds → use that value (minimum 5 as a floor); if parsing fails → fall back to "auto".
+
+**Channel B — plain-text fallback** (Codex CLI, runtimes without a
+native question tool). Post this as one normal message, then wait for
+the reply. Bullet-style 1/2/3/4 keeps the reply parseable:
+
+```
+I need to confirm four visual decisions with you before I start cutting cards:
+
+1) Output aspect ratio (canvas):
+   A. 16:9 landscape (1920×1080) — TV / YouTube / desktop playback
+   B. 9:16 portrait (1080×1920) — TikTok / Reels / short-form mobile
+   C. 4:5 near-portrait (1080×1350) — Instagram feed / works for both platforms
+   ▸ My recommendation:  <recommendedRatio>  (matches source video W×H = <sourceW>×<sourceH>)
+
+2) Overall layout (how video & card coexist):
+   A. split   side-by-side (50/50)
+   B. stack   top-bottom (video top, card bottom)
+   C. pip     picture-in-picture (card full canvas, video rounded corner window)
+   D. overlay full-screen glass overlay (video full-bleed, card glass layer)
+
+3) Card style group (maps to frame auto-pick matrix, pick 1 of 3):
+   A. warm paper (warm-paper)      (academic / editorial / whiteboard / xhs)
+   B. clinical / cold (clinical)   (audit / swiss / terminal / minimal)
+   C. experimental (experimental)  (geom / spotlight)
+
+4) Card count (takeaway pacing):
+   A. Auto (recommended) — approx <autoCount> cards
+   B. Fewer — approx round(<autoCount> × 0.6) cards
+   C. More — approx round(<autoCount> × 1.5) cards
+   D. Give me a specific number (e.g. "8", "20")
+
+Reply format: "1A 2C 3B 4A" or natural language is fine.
+If you want all recommended defaults, reply "default" / "auto" / "use all recommendations".
+```
+
+Parsing the plain-text reply:
+
+- Accept loose formats: `"1A 2C 3B 4A"`, `"A C B A"`, `"16:9 / pip /
+data / auto"`, full sentences, or `default`.
+- If any answer is ambiguous → re-ask only the ambiguous ones (still
+  inside the 2–5 cap).
+- If the user says "default / auto / use all recommendations" → skip without re-asking.
+
+After the user answers (any channel):
+
+1. **Resolve the output canvas** from the ratio answer — these are the
+   exact `storyboard.composition.width / height` values to write:
+
+   | user choice | composition.width × height | storyboard.layout field                                       |
+   | ----------- | -------------------------- | ------------------------------------------------------------- |
+   | `16:9`      | **1920 × 1080**            | `"landscape"`                                                 |
+   | `9:16`      | **1080 × 1920**            | `"portrait"`                                                  |
+   | `4:5`       | **1080 × 1350**            | `"portrait"` (schema treats 4:5 as portrait — height > width) |
+
+   For **4:5 bounds inside `references/layouts/*.html`** — those files
+   only document landscape (1920×1080) and portrait (1080×1920). For
+   4:5 (1080×1350) derive bounds by **proportional scaling from
+   portrait**: keep horizontal values, scale vertical values by
+   `1350/1920 ≈ 0.703`. Example: `overlay` portrait card =
+   `{ x: 24, y: 1280, w: 1032, h: 564 }` → 4:5 card =
+   `{ x: 24, y: round(1280 × 0.703), w: 1032, h: round(564 × 0.703) }`
+   = `{ x: 24, y: 900, w: 1032, h: 397 }`.
+
+2. **Map the style group to a specific style** by looking at the
+   transcript tone — pick the one that best fits, but stay inside the
+   user's chosen group. If you're unsure between two specific styles
+   inside the group, send a second `AskUserQuestion` with those 2–4
+   specific style options.
+
+3. **Resolve final cardCount** from the density answer:
+
+   | user choice             | final cardCount                           |
+   | ----------------------- | ----------------------------------------- |
+   | Auto (recommended)      | the `autoCount` you already computed      |
+   | Fewer                   | `max(5, round(autoCount × 0.6))`          |
+   | More                    | `round(autoCount × 1.5)` (no upper clamp) |
+   | Other = "<n>" (integer) | `max(5, parseInt(n))`                     |
+   | Other = anything else   | fall back to `autoCount`                  |
+
+4. **Auto-pick the video frame** from this table (frames don't ask the
+   user — they follow from layout × style):
+
+   | layout    | warm-paper styles (academic / whiteboard / editorial / xhs) | clinical styles (audit / swiss / terminal / minimal) | experimental styles (geom / spotlight) |
+   | --------- | ----------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------- |
+   | `split`   | `polaroid`                                                  | `hairline`                                           | `clean`                                |
+   | `stack`   | `polaroid`                                                  | `hairline`                                           | `clean`                                |
+   | `pip`     | `clean` (pip pill already has chrome)                       | `clean`                                              | `clean`                                |
+   | `overlay` | `clean` (full-bleed forbids deco frames)                    | `clean`                                              | `clean`                                |
+
+5. **Tell the user what you chose** in one sentence — ratio (+ canvas
+   size), layout, specific style, frame, and final cardCount — then
+   proceed with the rest of Step 7 (per-card layouts, motion patterns).
+6. Record the five values (ratio / layout / style / frame / cardCount)
+   in working memory (no schema field needed); you'll reference them
+   while writing each card's HTML in Step 8 and while reading the
+   matching `references/<dim>/<key>.html` for tokens and structure.
+
+If the user picks an answer via "Other" with a free-text style name not
+in the 10-style library, treat it as a hint to design a fresh card
+visual yourself, but still anchor on the chosen layout's bounds.

package/dist/assets/design/skills/talking-head-recut/references/frames/clean.html

@@ -0,0 +1,92 @@
+<!--
+  Frame: clean — no decoration. Raw video edge.
+  ─────────────────────────────────────────────────────────────────────
+  When to use
+    - Default; safest.
+    - Pairs with any layout and any style.
+    - Required over the `overlay` layout (decorative frames clash with full-bleed video).
+
+  How to apply in the composition
+    No extra HTML — just leave #video-wrap without the `framed` class.
+
+    .video-wrapper { border-radius: 0; box-shadow: none; }
+
+  How to apply on PiP layouts
+    Even with `clean`, PiPs benefit from a 14px border-radius + soft shadow
+    (see layouts/pip.html). That's a layout-level treatment, not a frame.
+
+  Placement
+    None. This reference exists as documentation of the "no-frame" option.
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>frame · clean (no decoration)</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        color: #fff;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        background: #0a0c12;
+        overflow: hidden;
+      }
+      .video-wrap {
+        position: absolute;
+        left: 240px;
+        top: 140px;
+        width: 1440px;
+        height: 810px;
+        background: #1a1f2e;
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 12px,
+          rgba(255, 255, 255, 0.05) 12px 13px
+        );
+      }
+      .v-label {
+        position: absolute;
+        left: 24px;
+        top: 24px;
+        padding: 8px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        border-radius: 3px;
+        color: rgba(255, 255, 255, 0.7);
+        font:
+          600 16px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.14em;
+      }
+      .note {
+        position: absolute;
+        left: 240px;
+        bottom: 60px;
+        right: 240px;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.5);
+        font:
+          14px/1.4 ui-monospace,
+          monospace;
+        letter-spacing: 0.12em;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="video-wrap">
+        <span class="v-label">VIDEO · no chrome</span>
+      </div>
+      <div class="note">CLEAN — let the video speak for itself.</div>
+    </div>
+  </body>
+</html>

package/dist/assets/design/skills/talking-head-recut/references/frames/hairline.html

@@ -0,0 +1,171 @@
+<!--
+  Frame: hairline — double stroke + four-corner viewfinder ticks
+  ─────────────────────────────────────────────────────────────────────
+  When to use
+    - Professional / cinematographic feel without going full polaroid.
+    - Pairs well with: split, stack, pip layouts.
+    - Pairs well with: academic, audit, swiss, terminal styles.
+    - Skip on overlay layout — the decorative chrome clashes with full-bleed video.
+
+  How to apply in the composition
+    Add ONE decorative div as a sibling of #video-wrap (not a child — the
+    video element is muted/playsinline and the decorative div should sit
+    above it). The accent color is configurable per scene.
+
+    <div class="video-wrapper" id="video-wrap">
+      <video src="input-video.mp4" ...></video>
+    </div>
+    <div class="frame-deco frame-deco--hairline"
+         style="left:240px; top:140px; width:1440px; height:810px;
+                --frame-accent: #2557a7;">
+      <span class="tick tl"></span>
+      <span class="tick tr"></span>
+      <span class="tick bl"></span>
+      <span class="tick br"></span>
+    </div>
+
+    CSS (4 corners via explicit spans — preferred over ::before/::after
+    because pseudo-elements give you at most 2 corners cleanly):
+
+    .frame-deco { position: absolute; pointer-events: none; z-index: 3; }
+    .frame-deco--hairline {
+      box-shadow:
+        inset 0 0 0 2px var(--frame-accent),
+        inset 0 0 0 6px color-mix(in srgb, var(--frame-accent) 13%, transparent),
+        0 0 0 1px rgba(0,0,0,.1);
+    }
+    .frame-deco .tick { position: absolute; width: 24px; height: 24px; }
+    .frame-deco .tick.tl { top: -3px; left: -3px;     border-top: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
+    .frame-deco .tick.tr { top: -3px; right: -3px;    border-top: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
+    .frame-deco .tick.bl { bottom: -3px; left: -3px;  border-bottom: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
+    .frame-deco .tick.br { bottom: -3px; right: -3px; border-bottom: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
+
+  When the layout changes mid-composition
+    Move + resize the frame-deco div together with #video-wrap using GSAP:
+       tl.to('#video-wrap, .frame-deco', { left:, top:, width:, height:, ... }, T);
+    Or fade out the deco entirely before transitioning to a clean PiP.
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>frame · hairline (double stroke + viewfinder ticks)</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        color: #fff;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        background: #0a0c12;
+        overflow: hidden;
+      }
+      .video-wrap {
+        position: absolute;
+        left: 240px;
+        top: 140px;
+        width: 1440px;
+        height: 810px;
+        background: #1a1f2e;
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 12px,
+          rgba(255, 255, 255, 0.05) 12px 13px
+        );
+      }
+      .v-label {
+        position: absolute;
+        left: 24px;
+        top: 24px;
+        padding: 8px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        border-radius: 3px;
+        color: rgba(255, 255, 255, 0.7);
+        font:
+          600 16px/1 ui-monospace,
+          monospace;
+        letter-spacing: 0.14em;
+      }
+      .frame-deco {
+        position: absolute;
+        left: 240px;
+        top: 140px;
+        width: 1440px;
+        height: 810px;
+        pointer-events: none;
+        z-index: 3;
+        --frame-accent: #2557a7;
+        box-shadow:
+          inset 0 0 0 2px var(--frame-accent),
+          inset 0 0 0 6px rgba(37, 87, 167, 0.13),
+          0 0 0 1px rgba(0, 0, 0, 0.1);
+      }
+      .tick {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+      }
+      .tick.tl {
+        top: -3px;
+        left: -3px;
+        border-top: 4px solid var(--frame-accent, #2557a7);
+        border-left: 4px solid var(--frame-accent, #2557a7);
+      }
+      .tick.tr {
+        top: -3px;
+        right: -3px;
+        border-top: 4px solid var(--frame-accent, #2557a7);
+        border-right: 4px solid var(--frame-accent, #2557a7);
+      }
+      .tick.bl {
+        bottom: -3px;
+        left: -3px;
+        border-bottom: 4px solid var(--frame-accent, #2557a7);
+        border-left: 4px solid var(--frame-accent, #2557a7);
+      }
+      .tick.br {
+        bottom: -3px;
+        right: -3px;
+        border-bottom: 4px solid var(--frame-accent, #2557a7);
+        border-right: 4px solid var(--frame-accent, #2557a7);
+      }
+      .note {
+        position: absolute;
+        left: 240px;
+        bottom: 60px;
+        right: 240px;
+        text-align: center;
+        color: rgba(255, 255, 255, 0.5);
+        font:
+          14px/1.4 ui-monospace,
+          monospace;
+        letter-spacing: 0.12em;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="video-wrap">
+        <span class="v-label">VIDEO</span>
+      </div>
+      <div class="frame-deco">
+        <span class="tick tl"></span>
+        <span class="tick tr"></span>
+        <span class="tick bl"></span>
+        <span class="tick br"></span>
+      </div>
+      <div class="note">
+        HAIRLINE — double stroke (2px inner + soft 6px halo) + four-corner viewfinder ticks. Accent
+        color matches the card style.
+      </div>
+    </div>
+  </body>
+</html>