/* 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; }
}