Narrated walkthrough

{
  "id": "v001",
  "kind": "video",
  "name": "Narrated walkthrough",
  "version": "2026-10-23",
  "status": "standard",
  "page": "https://fedm8.com/design/v/001/",
  "catalog": "https://fedm8.com/design/v/catalog.json",
  "style_text": "https://fedm8.com/design/v/001/style.md",
  "skill": {
    "name": "fedm8-walkthrough-style",
    "file": "https://fedm8.com/design/v/001/fedm8-walkthrough-style.skill",
    "note": "A Claude skill with this style guide, the reference episode's shot list and the render toolkit."
  },
  "summary": "One warm narrator walks through the FedM8 app in a browser window on a navy stage. Real clicks, typing and scrolling, a gold cursor ripple, short captions, a 'Why it helps' card for each benefit, labeled previews and samples, and a quiet piano bed.",
  "use_for": [
    "feature walkthroughs and product demos with one narrator",
    "previews of upcoming features",
    "release notes and 'what's new' videos",
    "continuing the FedM8 community walkthrough series"
  ],
  "not_for": [
    "videos that need a different look or format (pick or add a style in the video catalog)",
    "brand marks, print and web pages (use design 001 or 002)"
  ],
  "precedence": "This page and this file are the standard for walkthrough videos. DESIGN_DNA.md wins on brand marks (shield, wordmark). If a skill or older note disagrees on anything video, follow this file and report the difference.",

  "reference_episode": {
    "title": "FedM8 community features: upcoming update preview",
    "duration_s": 179.5,
    "file_720p": "https://fedm8.com/design/v/001/media/reference-episode-720p.mp4",
    "captions_vtt": "https://fedm8.com/design/v/001/media/reference-episode.vtt",
    "captions_srt": "https://fedm8.com/design/v/001/media/reference-episode.srt",
    "poster": "https://fedm8.com/design/v/001/media/poster.jpg",
    "updated": "2026-10-23: re-rendered with the fedm8.com end card and address bar and made-up sample places. Narration, music and timing unchanged.",
    "chapters": [
      {"t": "0:00", "title": "Find people discussing your work"},
      {"t": "0:20", "title": "Every opportunity has a conversation"},
      {"t": "0:43", "title": "Your codes connect you"},
      {"t": "1:02", "title": "Starting feels simple"},
      {"t": "1:25", "title": "Veterans and certification communities"},
      {"t": "1:45", "title": "Follow, reply, keep it going"},
      {"t": "2:04", "title": "Helpful answers and clear summaries"},
      {"t": "2:22", "title": "Trust and a consistent experience"},
      {"t": "2:43", "title": "Desktop to phone, closing lines"},
      {"t": "2:53", "title": "End card"}
    ]
  },

  "frame": {
    "size_px": [1920, 1080],
    "fps": 30,
    "video": "H.264, yuv420p, bt709",
    "stage": {
      "color": "#0b1626",
      "glows": ["radial #183252, 1200x700 at 18% 0%", "radial #1b2b20, 900x600 at 100% 100%"]
    },
    "window": {
      "size_px": [1660, 868],
      "offset_px": [130, 84],
      "radius_px": 18,
      "shadow": "0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3)",
      "chrome": "light bar #eef1f5, 30px tall at app scale, three gray dots #cfd5dd, URL pill with a lock: fedm8.com/#/...",
      "app_scale": 1.4,
      "app_logical_size_px": [1186, 620]
    },
    "zones": {
      "labels_top_px": [22, 64],
      "window_px": [84, 952],
      "captions_top_px": 956
    }
  },

  "colors": {
    "stage": {"stage": "#0b1626", "stage_glow": "#183252", "stage_text": "#f2f5f9", "stage_muted": "#b9c6d6", "stage_gold": "#d6b56c", "stage_line": "#3a5070", "end_black": "#05090f"},
    "app": {
      "page": "#f5f6f8", "surface": "#ffffff", "ink": "#182231", "ink_2": "#526071", "muted": "#626f80", "line": "#e4e8ee",
      "navy": "#193b5d", "navy_deep": "#0b1626", "gold": "#c4a35a", "gold_ink": "#8b6c28", "gold_tint": "#f5efe1", "gold_edge": "#e8dbbb",
      "blue_tint": "#e8edf5", "blue": "#1f6fb5", "blue_ink": "#183b61",
      "green": "#1f7a3a", "green_tint": "#e6f3ea", "red": "#b42318", "red_tint": "#fdecea", "amber": "#8a5a00", "amber_tint": "#fdf3d8",
      "ai_note_ground": "#fbf8f0", "ai_note_edge": "#eadfc4"
    },
    "overlay": {"ripple_ring": "rgba(196,163,90,.95)", "ripple_fill": "rgba(196,163,90,.18)", "ring": "#c4a35a", "ring_glow": "rgba(196,163,90,.22)", "cursor_fill": "#ffffff", "cursor_edge": "#142033"}
  },

  "fonts": {
    "sans": "DM Sans (interface, captions, labels, wordmark)",
    "serif": "Source Serif 4 (closing lines, end-card tagline)",
    "load": "https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..800&family=Source+Serif+4:opsz,wght@8..60,500..700&display=block"
  },
  "type_scale_px_at_1080p": {
    "caption": {"size": 34, "weight": 500, "line_height": 1.28, "color": "#f2f5f9", "max_lines": 2},
    "why_it_helps_label": {"size": 15, "weight": 700, "tracking_em": 0.16, "case": "upper", "color": "#d6b56c"},
    "why_it_helps_line": {"size": 32, "weight": 600, "color": "#ffffff"},
    "preview_label": {"size": 19, "weight": 600, "pill_height": 42},
    "sample_label": {"size": 19, "weight": 500, "pill_height": 42},
    "app_body": {"size_logical": 13.5, "size_on_frame": 18.9},
    "app_heading": {"size_logical": 20, "weight": 650},
    "closing_line": {"family": "serif", "size": 62, "weight": 600, "last_word": "#d6b56c"},
    "end_wordmark": {"size": 150, "weight": 700, "tracking_em": -0.04},
    "end_tagline": {"family": "serif", "size": 52, "weight": 600},
    "end_address": {"size": 30, "weight": 500, "color": "#b9c6d6", "pill": "1px #2b3d55"}
  },

  "overlays": {
    "preview_label": {"text": "Upcoming FedM8 update · Preview", "where": "top left, x=130, y=22", "style": "gold outline rgba(214,181,108,.55), gold tint fill, 10px gold dot", "when": "every demo frame of an unreleased feature, from the first app frame to the end of the demo", "released_feature": "drop the preview label and keep the sample label"},
    "sample_label": {"text": "Sample conversations · Names and activity are illustrative", "where": "top right, right=130, y=22", "style": "dashed #3a5070 edge, #b9c6d6 text, info icon", "when": "the whole demo"},
    "sample_listing_chip": "Dashed gray 'Sample listing' chip on every contract and grant. Opening documents say 'Illustration'.",
    "caption": "One caption per spoken sentence, centered below the window, fades 0.2s, at most two lines. Also export SRT and VTT.",
    "why_it_helps": "Benefit sentences show as a card instead of a plain caption: 'WHY IT HELPS' label, thin gold divider, the line. Card: gold tint rgba(196,163,90,.12), edge rgba(214,181,108,.45), radius 16.",
    "ring": "2px gold ring with a 4px soft gold glow, around the part being named, timed to the spoken word",
    "annotation": "Numbered gold pill (gold ground, dark number disc) placed in empty space, never on top of text",
    "ai_label": "Every AI note shows 'FedM8 AI' (solid navy chip) and 'Automated summary · not a member' or 'Automated note · not a member', with a source link on each line"
  },

  "interface": {
    "rule": "Recreate the current FedM8 app faithfully. Use the live menu and labels at the time of recording.",
    "episode_1_rail": ["Chat", "Inbox", "Find Work", "Grants", "Get Certified", "Rooms: General, New here, Veterans Hall", "Your codes", "Following"],
    "chips": {"contract": "blue tint", "grant": "green tint", "naics_code": "gold tint", "sample_listing": "dashed gray outline", "greeter_founding": "gold tint, bold", "fedm8_ai": "solid navy, white text"},
    "talk_chip": "Navy outline pill 'Talk · N' with a chat icon. Fills navy on hover.",
    "room_header": "Kind chip, eyebrow, title, agency, deadline chip, official source link, Follow button, tabs 'This contract | This code | Everyone'",
    "message": "Initials avatar (veteran star badge when relevant), name, role chip, time, text, actions 'Helpful N · Reply · ⋯'",
    "composer": "Context line above: 'Posting in <item> · the details come with your question'. Post button navy.",
    "states_shown": ["Follow -> Following", "reply notification toast", "Inbox badge", "2 new replies · Show pill", "Report / Hide this person / Remove mine menu", "plain error that keeps the draft", "honest empty room"]
  },

  "motion": {
    "feel": "Someone using the product, not slides.",
    "cursor": {"shape": "white arrow, dark outline", "size_px": [34, 40], "move_s": [0.5, 0.9], "path": "eased in-out with a slight curve", "hover": "buttons darken, links underline, rows tint"},
    "click": {"ripple_px": 64, "ring_px": 3, "duration_s": 0.55, "cursor_press_scale": 0.86, "sound": "very soft tick"},
    "typing": "Human speed with small random variation, longer pauses after spaces and punctuation, blinking caret",
    "camera": {"zoom": 1.16, "align": "main column's left edge (rail goes off frame)", "max_zoom_on_narrow_items": 1.3, "return": "back to 1.0 before a page change", "ease_s": [0.7, 1.0]},
    "between_scenes": {"type": "dip through the empty window", "seconds": 0.45, "never": "cross-dissolve two screens"},
    "page_change_in_scene": {"fade_s": 0.3, "settle_px": 8},
    "new_content": "Grows into place over about 0.4s. A reply you are sent to gets a gold highlight for about 1.5s.",
    "ending": "Desktop window shrinks into a 400x840 phone with the same conversation (about 1.6s), closing lines appear one per spoken line on the left, then end card"
  },

  "sound": {
    "voice": {"engine": "Kokoro TTS v1.0 (kokoro-onnx)", "voice": "af_heart", "speed": 0.94, "lang": "en-us", "character": "warm, unhurried, female"},
    "pronunciation": {"FedM8": "Fed Mate", "NAICS": "nakes", "scope": "TTS input only; captions keep the real spelling"},
    "clips": "One sentence per clip, trim silence (keep ~40ms lead, ~80ms tail), place 0.3 to 0.8s apart on the action",
    "check": "Transcribe every clip (Whisper small.en) and confirm each word before timing scenes",
    "music": {"style": "soft felt-piano arpeggio over a warm pad", "key": "D major", "bpm": 76, "chords": ["D", "Bm7", "Gmaj7", "A", "Em7", "Gmaj7", "D/F#", "Asus"], "chord_length": "2 bars", "intro": "sparse low piano until the app appears", "end": "resolved D chord on the end card, fade out"},
    "mix": {"music_vs_voice_db": -17, "duck_db": -7.5, "duck_smoothing_s": 0.35, "clicks": "very soft"},
    "master": {"integrated_lufs": -16, "true_peak_db": -1.5, "codec": "AAC 192k, 48 kHz"}
  },

  "words": {
    "voice": "Warm, clear, practical, human. Speak to one person (you).",
    "sentences": "Short, often 3 to 8 words. Start with a verb when showing an action.",
    "pattern": "One useful action, then its benefit.",
    "examples": {
      "action": "Open the opportunity. Read the discussion. Ask your question in context.",
      "benefit": "Less searching for where to ask. Less repeating background information.",
      "closing": "Understand the opportunity. Ask your people. Keep the conversation moving."
    },
    "avoid": ["hype", "jargon", "buzzwords", "exclamation marks", "em dashes", "technical architecture", "promises about winning contracts"],
    "narration_share": "about half the runtime",
    "names": {"matching_ai": "Match-M8", "room_host": "FedM8 AI", "post_action": "Post"}
  },

  "structure": {
    "scene_seconds": [18, 23],
    "scene_template": ["title and time range", "on-screen actions, step by step", "narration (1 to 4 short sentences) with the word each action lands on", "optional 'Why it helps' line", "labels shown"],
    "episode_1_runtime_s": 179.5,
    "open": "the problem in the real world (scattered tabs, notes, messages), then the FedM8 wordmark, then the app",
    "close": "desktop to phone, three short parallel lines, end card"
  },

  "end_card": {"wordmark": "Fed + M8 (M8 in #d6b56c)", "tagline": "Federal work. Connected people.", "address": "fedm8.com", "hold_s": 6, "fade": "to #05090f over the last second"},

  "honesty": {
    "do": [
      "Label every preview: 'Upcoming FedM8 update · Preview'",
      "Label every sample: the top-right pill and a 'Sample listing' chip",
      "Label and source every AI note",
      "Show honest empty or unavailable states",
      "Write error messages that say what to do and keep the draft"
    ],
    "dont": [
      "Say an unreleased feature is live",
      "Show unconfirmed pricing, plans, subscription gates, exact limits or launch dates",
      "Promise a win. Members share experience, SBA decides eligibility",
      "Present sample people or activity as real",
      "Name a real base, facility or contracting office in a sample (use Example Base and Example Agency)",
      "Show technical architecture"
    ]
  },

  "sample_cast": {
    "people": [
      {"name": "Kim P.", "role": "veteran, owns a small IT business, NAICS 541512", "avatar": "KP"},
      {"name": "Maria L.", "role": "new member, Lopez Facility Services, janitorial, NAICS 561720", "avatar": "ML"},
      {"name": "Dana R.", "role": "sub, veteran"},
      {"name": "Luis M.", "role": "prime"},
      {"name": "Rosa G.", "role": "sub"},
      {"name": "Marcus T.", "role": "prime"},
      {"name": "Priya S.", "role": "sub, veteran"},
      {"name": "Ray T.", "role": "Greeter, Founding member"}
    ],
    "contract": "Help desk support, Example Base · Example Agency · Due Nov 18 · SDVOSB set-aside",
    "grant": "Small business technical assistance grant · USDA Rural Development · Closes Dec 12",
    "rule": "Reuse the cast so the series feels connected. Every listing carries 'Sample listing'.",
    "places": "Made-up places and offices only: Example Base, Example Agency, 'regional VA medical center', 'regional Air Force base'. Department names (Veterans Affairs, Air Force, USDA Rural Development) are fine on a labeled sample listing."
  },

  "deliverables": ["MP4 1080p30 H.264 + AAC 192k with captions burned in", "SRT and VTT captions", "script and shot list table: time, scene, on screen, narration"],

  "build": {
    "how": "Frames are a pure function of time (renderAt(t)) in an HTML page, captured by Playwright and piped to ffmpeg, rendered in parallel chunks.",
    "steps": ["write narration.json", "generate voice clips", "check words with Whisper and take word timings", "author scenes with the kit builders", "preview stills and contact sheets", "render", "mix music and voice", "master to -16 LUFS", "write SRT and VTT"],
    "lessons": [
      "Never cross-dissolve two screens. Dip through the empty window.",
      "Zoom 1.16 on the main column, left-aligned. Bigger zooms crop buttons.",
      "After a page change, move the cursor to something on the new page.",
      "Place overlays relative to their target, never with hard-coded pixels.",
      "Annotation pills go in empty space, never on top of text.",
      "Use word timings to land highlights on the spoken word.",
      "Check preview stills before the full render."
    ]
  },

  "decisions": {
    "date": "2026-10-23",
    "items": [
      {"item": "preview label", "decision": "Upcoming FedM8 update · Preview, gold outline, only while the feature is not out", "why": "Says plainly the feature is not out yet. 'Feature preview' can read as an early-access switch available today. The sample label already covers sample data."},
      {"item": "address on screen", "decision": "fedm8.com on the end card and in the address bar", "why": "The real address. ai.fedm8.com only redirects to it."},
      {"item": "sample places", "decision": "Example Base and Example Agency; no real base, facility or contracting office", "why": "A real base on a sample listing can send people looking for a contract that does not exist."},
      {"item": "reference episode file", "decision": "kept on fedm8.com, 720p, about 9.6 MB, replaced in place", "why": "Well under the 25 MB file limit, plays on iPhone, no other host needed."}
    ],
    "design_001": "Design 001's video summary matches these values."
  }
}

/* Video v001 · Narrated walkthrough. Tokens and live samples for /design/v/001/.
   Values match /design/v/001/tokens.json. Overlay samples are shown at 60% of their 1080p size. */

body[data-design="v001"] {
  --v1-stage:#0b1626; --v1-stage-glow:#183252; --v1-stage-text:#f2f5f9; --v1-stage-muted:#b9c6d6; --v1-stage-gold:#d6b56c; --v1-stage-line:#3a5070;
  --v1-page:#f5f6f8; --v1-surface:#ffffff; --v1-ink:#182231; --v1-ink-2:#526071; --v1-muted:#626f80; --v1-line:#e4e8ee;
  --v1-navy:#193b5d; --v1-gold:#c4a35a; --v1-gold-ink:#8b6c28; --v1-gold-tint:#f5efe1; --v1-gold-edge:#e8dbbb;
  --v1-blue-tint:#e8edf5; --v1-blue:#1f6fb5; --v1-blue-ink:#183b61;
  --v1-green:#1f7a3a; --v1-green-tint:#e6f3ea; --v1-red:#b42318; --v1-red-tint:#fdecea;
  --v1-ai-ground:#fbf8f0; --v1-ai-edge:#eadfc4; --v1-cursor-edge:#142033;

  --ds-bg:var(--v1-page); --ds-surface:var(--v1-surface); --ds-ink:var(--v1-ink); --ds-muted:var(--v1-ink-2); --ds-line:var(--v1-line);
  --ds-accent:var(--v1-navy); --ds-accent-ink:#fff; --ds-soft:var(--v1-blue-tint); --ds-focus:#2b6cb0; --ds-dark:var(--v1-stage);
  --ds-font-sans:"DM Sans",system-ui,sans-serif; --ds-font-serif:"Source Serif 4",Georgia,serif; --ds-radius:12px;
  --plan-b-ink:#1a3a68; --plan-b-bg:transparent; --plan-b-line:#c9d3e0; --plan-p-ink:#7a5f22; --plan-p-bg:#f7f0dd; --plan-p-line:#e2cf9c;
  --pc-surface:var(--v1-surface); --pc-ink:var(--v1-ink); --pc-muted:var(--v1-ink-2); --pc-line:var(--v1-line); --pc-accent:var(--v1-navy); --pc-accent-ink:#fff;
  --pc-soft:var(--v1-blue-tint); --pc-radius:12px; --pc-font:"DM Sans",system-ui,sans-serif; --pc-act-ink:var(--v1-navy); --pc-line-strong:#cfd7e2;
}

/* ---------- overlay samples (on the stage, 60%) ---------- */
.v1-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.v1-pill { display:inline-flex; align-items:center; gap:7px; height:25px; padding:0 11px; border-radius:999px; font:600 11.4px/1 var(--ds-font-sans); white-space:nowrap; }
.v1-pill--pre { border:1px solid rgba(214,181,108,.55); background:rgba(196,163,90,.14); color:var(--v1-stage-text); }
.v1-pill--pre i { width:6px; height:6px; border-radius:50%; background:var(--v1-stage-gold); box-shadow:0 0 0 2.5px rgba(214,181,108,.22); }
.v1-pill--smp { border:1px dashed var(--v1-stage-line); color:var(--v1-stage-muted); font-weight:500; }
.v1-cap { margin:0; max-width:900px; text-align:center; font:500 20.4px/1.28 var(--ds-font-sans); color:var(--v1-stage-text); }
.v1-why { display:inline-flex; align-items:center; gap:11px; max-width:940px; padding:7px 16px; border:1px solid rgba(214,181,108,.45); border-radius:10px; background:rgba(196,163,90,.12); }
.v1-why b { padding-right:11px; border-right:1px solid rgba(214,181,108,.4); font:700 9px/1 var(--ds-font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--v1-stage-gold); white-space:nowrap; }
.v1-why span { font:600 19.2px/1.25 var(--ds-font-sans); color:#fff; }
.v1-center { display:flex; flex-direction:column; align-items:center; gap:18px; }
.v1-close { display:flex; flex-direction:column; gap:12px; font:600 37px/1.1 var(--ds-font-serif); color:var(--v1-stage-text); letter-spacing:-.015em; }
.v1-close b { color:var(--v1-stage-gold); font-weight:600; }
.v1-end { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0 4px; color:var(--v1-stage-text); }
.v1-end-wm { font:700 72px/1 var(--ds-font-sans); letter-spacing:-.04em; }
.v1-end-wm b { color:var(--v1-stage-gold); }
.v1-end-tag { font:600 26px/1.15 var(--ds-font-serif); }
.v1-end-url { margin-top:4px; padding:5px 14px; border:1px solid #2b3d55; border-radius:999px; font:500 15px/1 var(--ds-font-sans); color:var(--v1-stage-muted); }

/* ---------- interface samples (app size; the video shows them at 1.4x) ---------- */
.v1-app { display:grid; gap:12px; padding:14px; border-radius:12px; background:var(--v1-page); font:13.5px/1.45 var(--ds-font-sans); color:var(--v1-ink); }
.v1-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border:1px solid #dce2ea; border-radius:999px; background:#f0f2f5; color:var(--v1-ink-2); font:500 11px/1.3 var(--ds-font-sans); white-space:nowrap; }
.v1-chip--contract { background:var(--v1-blue-tint); border-color:#cbd8e7; color:var(--v1-blue-ink); }
.v1-chip--grant { background:var(--v1-green-tint); border-color:#bfe0c9; color:var(--v1-green); }
.v1-chip--code { background:var(--v1-gold-tint); border-color:var(--v1-gold-edge); color:#725820; }
.v1-chip--sample { background:transparent; border-style:dashed; border-color:#b7c1ce; color:#6b7788; }
.v1-chip--greet { background:var(--v1-gold-tint); border-color:#e1cf9f; color:#6f5419; font-weight:650; }
.v1-chip--ai { background:var(--v1-navy); border-color:var(--v1-navy); color:#fff; font-weight:650; }
.v1-talk { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border:1.5px solid var(--v1-navy); border-radius:999px; background:#fff; color:var(--v1-navy); font:650 11.5px/1.3 var(--ds-font-sans); }
.v1-talk--hover { background:var(--v1-navy); color:#fff; }
.v1-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:1px solid var(--v1-navy); border-radius:9px; background:var(--v1-navy); color:#fff; font:600 12.5px/1 var(--ds-font-sans); }
.v1-btn--ghost { background:#fff; color:#243b57; border-color:#d3dbe5; }
.v1-btn--on { background:var(--v1-green-tint); border-color:#9fd1ae; color:var(--v1-green); }
.v1-msg { display:flex; gap:10px; align-items:flex-start; }
.v1-av { display:inline-grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#3d5a80; color:#fff; font:700 10.5px/1 var(--ds-font-sans); }
.v1-av--b { background:#2f6d8f; }
.v1-bub { flex:1; max-width:560px; padding:8px 12px; border:1px solid var(--v1-line); border-radius:4px 12px 12px 12px; background:#fff; font-size:13px; }
.v1-bub--flash { box-shadow:0 0 0 2px var(--v1-gold),0 0 0 6px rgba(196,163,90,.25); }
.v1-who { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:2px; font-weight:650; font-size:12.5px; }
.v1-who small { font-weight:400; font-size:11.5px; color:var(--v1-muted); }
.v1-acts { display:flex; gap:14px; margin-top:5px; font-size:11.5px; font-weight:500; color:var(--v1-muted); }
.v1-acts .on { padding:0 6px; border-radius:6px; background:var(--v1-gold-tint); color:#6f5419; font-weight:700; }
.v1-ctx { font-size:11.5px; color:var(--v1-muted); }
.v1-ctx b { color:var(--v1-ink-2); font-weight:650; }
.v1-inp { display:flex; align-items:center; gap:8px; min-height:33px; padding:6px 6px 6px 12px; border:1px solid #cbd4df; border-radius:10px; background:#fff; font-size:13px; }
.v1-inp > span:first-child { flex:1; min-width:0; }
.v1-inp .v1-btn { flex:none; }
.v1-inp--focus { border-color:#7f9cc0; box-shadow:0 0 0 3px rgba(31,111,181,.12); }
.v1-inp--err { border-color:#d9827a; box-shadow:0 0 0 3px rgba(180,35,24,.08); }
.v1-err { padding:8px 11px; border:1px solid #f3c3bd; border-radius:9px; background:var(--v1-red-tint); color:#7a1d15; font-size:12.5px; }
.v1-saved { font-size:11px; font-weight:650; color:var(--v1-green); }
.v1-ai { display:grid; gap:6px; padding:11px 13px; border:1px solid var(--v1-ai-edge); border-left:3px solid var(--v1-navy); border-radius:10px; background:var(--v1-ai-ground); font-size:13px; }
.v1-ai small { font-size:11.5px; color:var(--v1-muted); }
.v1-ai a, .v1-link { color:var(--v1-blue-ink); font-weight:600; text-decoration:underline; text-decoration-color:#9fb3cc; text-underline-offset:2px; }
.v1-npill { justify-self:center; display:inline-flex; gap:6px; padding:6px 14px; border-radius:999px; background:var(--v1-navy); color:#fff; font:650 12px/1 var(--ds-font-sans); box-shadow:0 6px 16px rgba(25,59,93,.3); }
.v1-menu { display:grid; width:180px; padding:5px; border:1px solid var(--v1-line); border-radius:10px; background:#fff; box-shadow:0 10px 28px rgba(16,24,40,.16); font-size:12.5px; }
.v1-menu span { padding:7px 10px; border-radius:7px; }
.v1-menu .hov { background:#f0f3f7; }
.v1-menu .dis { color:#a7b1be; }
.v1-empty { display:grid; justify-items:center; gap:6px; padding:18px; border:1px solid var(--v1-line); border-radius:12px; background:#fff; text-align:center; }
.v1-empty b { font-size:14.5px; }
.v1-empty > span:not(.v1-btn) { font-size:12.5px; color:var(--v1-ink-2); }

/* ---------- motion helpers shown as stills ---------- */
.v1-ringdemo { display:inline-block; padding:3px; border:2px solid var(--v1-gold); border-radius:10px; box-shadow:0 0 0 4px rgba(196,163,90,.22); }
.v1-anno { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; border-radius:999px; background:var(--v1-gold); color:#1a1405; font:700 11px/1 var(--ds-font-sans); box-shadow:0 2px 8px rgba(0,0,0,.15); }
.v1-anno i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#1a1405; color:var(--v1-gold); font-style:normal; font-size:10px; }
.v1-clickdemo { position:relative; display:inline-block; width:90px; height:70px; }
.v1-ripple { position:absolute; left:6px; top:2px; width:38px; height:38px; border:2px solid rgba(196,163,90,.95); border-radius:50%; background:rgba(196,163,90,.18); }
.v1-cursor { position:absolute; left:23px; top:19px; width:24px; height:28px; }

/* ---------- type specimens ---------- */
.v1-type-dark { display:inline-block; padding:8px 12px; border-radius:8px; background:var(--v1-stage); color:var(--v1-stage-text); }
.v1-t-cap { font:500 20.4px/1.28 var(--ds-font-sans); }
.v1-t-why { font:600 19.2px/1.25 var(--ds-font-sans); }
.v1-t-close { font:600 37px/1.1 var(--ds-font-serif); }
.v1-t-close b { color:var(--v1-stage-gold); font-weight:600; }
.v1-t-wm { font:700 44px/1 var(--ds-font-sans); letter-spacing:-.04em; }
.v1-t-wm b { color:var(--v1-stage-gold); }
.v1-t-app { font:400 13.5px/1.45 var(--ds-font-sans); color:var(--v1-ink); }
.v1-t-apph { font:650 20px/1.22 var(--ds-font-sans); letter-spacing:-.02em; color:var(--v1-ink); }

@media (max-width: 760px) {
  .v1-end-wm { font-size:52px; }
  .v1-close { font-size:28px; }
}