/* ==========================================================================
   What? Studio — "Six directions" UI frames
   Real-looking product UIs for capture → After Effects → Lottie.
   Rules for capture-friendliness: real text, inline SVG icons, solid fills,
   simple shadows, no backdrop-filter, no pseudo-element decoration,
   semantic class names (they become layer names).
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: #e7e9ee; }

body {
  font-family: Inter, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: #0f1115;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

svg { display: block; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }

/* --- Index / single / embed modes ------------------------------------- */
.frames-index { padding: 48px; display: grid; gap: 56px; }
.frames-index > header { display: grid; gap: 6px; }
.frames-index > header h1 { font-size: 28px; letter-spacing: -0.02em; }
.frames-index > header p { color: #5b6170; font-size: 15px; }
.frame-entry { display: grid; gap: 14px; }
.frame-entry-head { display: flex; align-items: baseline; gap: 14px; font-size: 15px; }
.frame-entry-head strong { font-size: 17px; }
.frame-entry-head span { color: #6b7080; }
.frame-entry-head a { color: #3b5bdb; text-decoration: none; }
.frame-entry .ui-frame { zoom: 0.5; box-shadow: 0 10px 40px rgba(15, 17, 21, 0.12); }

body.is-single, body.is-embed { background: transparent; overflow: hidden; }
body.is-single .frames-index, body.is-embed .frames-index { padding: 0; gap: 0; display: block; }
body.is-single .frames-index > header, body.is-embed .frames-index > header,
body.is-single .frame-entry-head, body.is-embed .frame-entry-head { display: none; }
body.is-single .frame-entry, body.is-embed .frame-entry { display: none; }
body.is-single .frame-entry.is-current, body.is-embed .frame-entry.is-current { display: block; }
body.is-single .frame-entry .ui-frame { zoom: 1; box-shadow: none; }
body.is-embed .frame-entry .ui-frame { zoom: 1; box-shadow: none; position: absolute; left: 50%; top: 50%; transform-origin: center center; }

.ui-frame { position: relative; overflow: hidden; }

/* --- Shared UI atoms ----------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.btn-dark { background: #0f1115; color: #ffffff; }
.btn-ghost { background: #ffffff; color: #0f1115; border: 1px solid #e3e5eb; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #ffffff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.kbd { display: inline-grid; place-items: center; height: 20px; min-width: 20px; padding: 0 5px; border-radius: 5px; background: #f1f2f5; color: #6b7080; font-size: 11px; font-weight: 600; border: 1px solid #e3e5eb; }

.cursor { position: absolute; width: 34px; height: 40px; z-index: 30; }
.cursor svg { width: 100%; height: 100%; }
.click-ring { position: absolute; z-index: 29; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(91, 91, 214, 0.55); background: rgba(91, 91, 214, 0.12); }

/* ==========================================================================
   01 — Macro UI Zoomer · "Quillo" commerce admin  (1600 × 960)
   ========================================================================== */
.frame-macro { width: 1600px; height: 960px; background: #e9eaf6; }
.frame-macro .scene-glow { position: absolute; left: 820px; top: -260px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #cfd2fb 0%, rgba(207, 210, 251, 0) 70%); }
.frame-macro .app-window { position: absolute; left: 110px; top: 80px; width: 1300px; height: 820px; display: flex; overflow: hidden; border-radius: 20px; background: #ffffff; border: 1px solid #dfe1ea; box-shadow: 0 40px 90px rgba(40, 44, 92, 0.18), 0 8px 24px rgba(40, 44, 92, 0.08); }

.q-sidebar { width: 232px; flex: 0 0 auto; display: flex; flex-direction: column; padding: 20px 14px; background: #fafafc; border-right: 1px solid #eceef3; }
.q-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.q-logo { width: 30px; height: 30px; border-radius: 9px; background: #5b5bd6; display: grid; place-items: center; }
.q-logo svg { width: 18px; height: 18px; }
.q-nav { display: grid; gap: 2px; }
.q-nav-item { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 9px; color: #4b5262; font-size: 14px; font-weight: 500; }
.q-nav-item .q-badge { margin-left: auto; height: 20px; min-width: 22px; padding: 0 7px; border-radius: 999px; background: #eceef3; color: #4b5262; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.q-nav-item.is-active { background: #ebebfb; color: #3f3fb0; font-weight: 600; }
.q-nav-label { padding: 18px 10px 8px; color: #9aa0ad; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.q-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid #eceef3; }
.q-user-name { display: grid; gap: 1px; font-size: 13px; font-weight: 600; }
.q-user-name span { color: #8a90a0; font-size: 12px; font-weight: 500; }

.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-topbar { height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 26px; border-bottom: 1px solid #eceef3; }
.q-crumbs { display: flex; align-items: center; gap: 8px; color: #8a90a0; font-size: 14px; font-weight: 500; }
.q-crumbs strong { color: #0f1115; font-weight: 600; }
.q-search { margin-left: auto; width: 300px; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px 0 12px; border-radius: 10px; background: #f4f5f8; color: #8a90a0; font-size: 14px; }
.q-search .kbd { margin-left: auto; }
.q-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid #e6e8ee; color: #4b5262; }
.q-primary { background: #5b5bd6; color: #ffffff; }

.q-content { padding: 26px 26px 0; display: flex; flex-direction: column; gap: 18px; }
.q-page-head { display: flex; align-items: flex-end; justify-content: space-between; }
.q-title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.q-subtitle { margin-top: 4px; color: #8a90a0; font-size: 14px; font-weight: 500; }
.q-tabs { display: flex; gap: 22px; border-bottom: 1px solid #eceef3; }
.q-tab { padding: 0 0 12px; color: #8a90a0; font-size: 14px; font-weight: 600; }
.q-tab span { margin-left: 6px; color: #b0b5c1; font-weight: 600; }
.q-tab.is-active { color: #0f1115; border-bottom: 2px solid #5b5bd6; }
.q-filters { display: flex; align-items: center; gap: 8px; }
.q-chip { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 9px; border: 1px dashed #d5d8e1; color: #4b5262; font-size: 13px; font-weight: 600; }
.q-chip.is-set { border-style: solid; background: #f4f4fd; border-color: #d6d6f5; color: #3f3fb0; }
.q-filters .q-export { margin-left: auto; }

.q-table { border: 1px solid #eceef3; border-radius: 14px; overflow: hidden; }
.q-row { display: grid; grid-template-columns: 44px 1.9fr 1fr 1fr 0.9fr 1.1fr 64px; align-items: center; height: 66px; padding: 0 16px; border-top: 1px solid #f0f1f5; font-size: 14px; }
.q-row:first-child { border-top: 0; }
.q-row.q-head { height: 42px; background: #fafafc; color: #8a90a0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.q-row.is-hover { background: #f5f5fe; }
.q-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cfd3dc; }
.q-row.is-hover .q-check { border-color: #5b5bd6; background: #5b5bd6; display: grid; place-items: center; color: #ffffff; }
.q-product { display: flex; align-items: center; gap: 12px; }
.q-thumb { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.q-thumb svg { width: 24px; height: 24px; }
.q-product-name { display: grid; gap: 2px; font-weight: 600; }
.q-product-name span { color: #9aa0ad; font-size: 12px; font-weight: 500; }
.q-status-active { background: #e7f8ef; color: #16794a; }
.q-status-draft { background: #f1f2f5; color: #6b7080; }
.q-status-low { background: #fff4e0; color: #a35b00; }
.q-stock { display: grid; gap: 6px; color: #4b5262; font-weight: 500; font-size: 13px; }
.q-bar { width: 110px; height: 5px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: 999px; background: #5b5bd6; }
.q-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.q-spark { width: 120px; height: 30px; }
.q-more { justify-self: end; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #8a90a0; }
.q-row.is-hover .q-more { background: #ffffff; border: 1px solid #e3e5eb; color: #0f1115; }

/* Macro loupe */
.macro-loupe { position: absolute; z-index: 20; left: 980px; top: 410px; width: 430px; height: 430px; border-radius: 50%; overflow: hidden; background: #ffffff; border: 8px solid #ffffff; box-shadow: 0 0 0 1px rgba(91, 91, 214, 0.35), 0 40px 80px rgba(40, 44, 92, 0.32), 0 10px 24px rgba(40, 44, 92, 0.16); }
.loupe-surface { position: absolute; inset: 0; background: #f5f5fe; }
.loupe-card { position: absolute; left: 44px; top: 86px; width: 340px; display: grid; gap: 16px; }
.loupe-row { display: flex; align-items: center; gap: 16px; }
.loupe-thumb { width: 74px; height: 74px; border-radius: 18px; display: grid; place-items: center; }
.loupe-thumb svg { width: 40px; height: 40px; }
.loupe-name { display: grid; gap: 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.loupe-name span { color: #8a90a0; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.loupe-meta { display: flex; align-items: center; gap: 12px; }
.loupe-price { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.loupe-actions { display: flex; gap: 10px; }
.loupe-edit { height: 52px; padding: 0 22px; border-radius: 14px; background: #5b5bd6; color: #ffffff; font-size: 18px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.loupe-view { height: 52px; width: 52px; border-radius: 14px; background: #ffffff; border: 1px solid #dcdcf4; color: #3f3fb0; display: grid; place-items: center; }
.frame-macro .cursor { left: 1133px; top: 667px; width: 44px; height: 52px; }
.frame-macro .click-ring { left: 1113px; top: 645px; }

/* ==========================================================================
   02 — Metric Dash · "Orvia" analytics  (1200 × 1480)
   ========================================================================== */
.frame-dash { width: 1200px; height: 1480px; background: #edf0f4; }
.frame-dash .scene-glow { position: absolute; left: -300px; top: 760px; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #d3efe4 0%, rgba(211, 239, 228, 0) 70%); }
.frame-dash .app-window { position: absolute; left: 70px; top: 80px; width: 1060px; height: 1320px; overflow: hidden; border-radius: 22px; background: #f8f9fb; border: 1px solid #e0e3ea; box-shadow: 0 40px 100px rgba(16, 24, 40, 0.16), 0 8px 24px rgba(16, 24, 40, 0.06); }
.o-topbar { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: #ffffff; border-bottom: 1px solid #e9ecf1; }
.o-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.o-logo { width: 28px; height: 28px; border-radius: 50%; background: #0f1115; display: grid; place-items: center; }
.o-logo i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid #2fd49d; }
.o-workspace { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: #f3f5f8; color: #4b5262; font-size: 13px; font-weight: 600; }
.o-nav { display: flex; gap: 4px; margin-left: 10px; }
.o-nav span { height: 32px; display: grid; place-items: center; padding: 0 12px; border-radius: 8px; color: #6b7080; font-size: 14px; font-weight: 500; }
.o-nav span.is-active { background: #0f1115; color: #ffffff; font-weight: 600; }
.o-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.o-content { padding: 28px; display: grid; gap: 20px; }
.o-head { display: flex; align-items: flex-end; justify-content: space-between; }
.o-title { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.o-live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: #e3f8f0; color: #0f8a62; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.o-live i { width: 7px; height: 7px; border-radius: 50%; background: #12b886; }
.o-sub { margin-top: 4px; color: #8a90a0; font-size: 14px; font-weight: 500; }
.o-controls { display: flex; gap: 8px; }
.o-control { height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: #ffffff; border: 1px solid #e3e6ec; color: #4b5262; font-size: 13px; font-weight: 600; }

.o-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.o-card { background: #ffffff; border: 1px solid #e9ecf1; border-radius: 18px; }
.o-kpi { padding: 20px 20px 16px; display: grid; gap: 6px; }
.o-kpi-label { display: flex; align-items: center; gap: 8px; color: #6b7080; font-size: 13px; font-weight: 600; }
.o-kpi-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.o-kpi-value { font-size: 36px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.o-kpi-foot { display: flex; align-items: center; justify-content: space-between; }
.o-delta { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; background: #e3f8f0; color: #0f8a62; font-size: 12px; font-weight: 700; }
.o-delta-note { color: #9aa0ad; font-size: 12px; font-weight: 500; }
.o-kpi-spark { width: 110px; height: 34px; }

.o-chart-card { padding: 22px 24px 18px; display: grid; gap: 14px; }
.o-chart-head { display: flex; align-items: flex-start; justify-content: space-between; }
.o-chart-title { display: grid; gap: 4px; font-size: 15px; font-weight: 600; color: #4b5262; }
.o-chart-title strong { color: #0f1115; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.o-legend { display: flex; gap: 16px; color: #6b7080; font-size: 13px; font-weight: 500; }
.o-legend span { display: inline-flex; align-items: center; gap: 7px; }
.o-legend i { width: 10px; height: 10px; border-radius: 3px; }
.o-chart { position: relative; height: 450px; }
.o-chart svg.o-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.o-ylabels { position: absolute; left: 0; top: 0; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; color: #9aa0ad; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.o-xlabels { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; color: #9aa0ad; font-size: 12px; font-weight: 500; }
.o-xlabels span { position: absolute; top: 0; width: 60px; margin-left: -30px; text-align: center; }
.o-tooltip { position: absolute; left: 600px; top: 64px; z-index: 5; width: 190px; padding: 12px 14px; border-radius: 12px; background: #0f1115; color: #ffffff; display: grid; gap: 6px; box-shadow: 0 14px 30px rgba(15, 17, 21, 0.28); }
.o-tooltip-date { color: #9aa0ad; font-size: 12px; font-weight: 600; }
.o-tooltip-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.o-tooltip-row span { display: inline-flex; align-items: center; gap: 7px; color: #c7cbd4; font-weight: 500; }
.o-tooltip-row i { width: 8px; height: 8px; border-radius: 50%; }
.o-point { position: absolute; left: 578px; top: 140px; z-index: 4; width: 18px; height: 18px; border-radius: 50%; background: #12b886; border: 4px solid #ffffff; box-shadow: 0 2px 8px rgba(18, 184, 134, 0.5); }

.o-bottom { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }
.o-panel { padding: 22px 24px; display: grid; gap: 18px; align-content: start; }
.o-panel-title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; }
.o-panel-title span { color: #9aa0ad; font-size: 13px; font-weight: 500; }
.o-channel { display: grid; gap: 8px; }
.o-channel-row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: #4b5262; }
.o-channel-row strong { color: #0f1115; font-weight: 600; font-variant-numeric: tabular-nums; }
.o-track { height: 10px; border-radius: 999px; background: #f0f2f6; overflow: hidden; }
.o-track i { display: block; height: 100%; border-radius: 999px; }
.o-donut-wrap { display: flex; align-items: center; gap: 22px; }
.o-donut { position: relative; width: 170px; height: 170px; flex: 0 0 auto; }
.o-donut svg { width: 100%; height: 100%; }
.o-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.o-donut-center strong { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.o-donut-center span { color: #9aa0ad; font-size: 12px; font-weight: 600; }
.o-donut-legend { display: grid; gap: 12px; font-size: 13px; font-weight: 500; color: #4b5262; }
.o-donut-legend span { display: flex; align-items: center; gap: 8px; }
.o-donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.o-donut-legend strong { margin-left: auto; color: #0f1115; font-weight: 600; padding-left: 14px; }
.o-toast { position: absolute; z-index: 6; right: 108px; bottom: 120px; width: 330px; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #ffffff; border: 1px solid #e3e6ec; box-shadow: 0 24px 50px rgba(16, 24, 40, 0.18); }
.o-toast-icon { width: 36px; height: 36px; border-radius: 10px; background: #e3f8f0; color: #0f8a62; display: grid; place-items: center; flex: 0 0 auto; }
.o-toast-text { display: grid; gap: 3px; font-size: 14px; font-weight: 600; }
.o-toast-text span { color: #6b7080; font-size: 13px; font-weight: 500; line-height: 1.4; }

/* ==========================================================================
   03 — Launch Cut · "Veltra" landing page  (1240 × 1000)
   ========================================================================== */
.frame-launch { width: 1240px; height: 1000px; background: #06070b; color: #f5f6fa; }
.frame-launch .glow-a { position: absolute; left: 170px; top: 360px; width: 900px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(91, 60, 240, 0.55) 0%, rgba(91, 60, 240, 0) 68%); }
.frame-launch .glow-b { position: absolute; left: 520px; top: 480px; width: 600px; height: 500px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(224, 73, 143, 0.32) 0%, rgba(224, 73, 143, 0) 68%); }
.frame-launch .grid-lines { position: absolute; inset: 0; opacity: 0.5; }
.v-nav { position: absolute; left: 60px; right: 60px; top: 34px; height: 52px; display: flex; align-items: center; gap: 30px; }
.v-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.v-logo { width: 30px; height: 30px; }
.v-links { display: flex; gap: 26px; margin-left: 18px; color: #a4a8b8; font-size: 15px; font-weight: 500; }
.v-nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; color: #c9ccd8; font-size: 15px; font-weight: 500; }
.v-cta-small { height: 38px; padding: 0 16px; border-radius: 999px; background: #f5f6fa; color: #06070b; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; }
.v-hero { position: absolute; left: 0; right: 0; top: 150px; display: grid; justify-items: center; text-align: center; gap: 22px; }
.v-announce { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 6px; border-radius: 999px; background: #12131c; border: 1px solid #2a2c3d; color: #c9ccd8; font-size: 14px; font-weight: 500; }
.v-announce b { height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: #6d4dff; color: #ffffff; font-size: 12px; font-weight: 700; }
.v-announce .icon { color: #8b8fa3; margin-right: 6px; }
.v-headline { font-size: 72px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.v-headline span { color: #b9a8ff; }
.v-sub { max-width: 580px; color: #a4a8b8; font-size: 19px; font-weight: 500; line-height: 1.5; }
.v-actions { display: flex; gap: 12px; margin-top: 6px; }
.v-btn-primary { height: 50px; padding: 0 24px; border-radius: 999px; background: #f5f6fa; color: #06070b; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.v-btn-ghost { height: 50px; padding: 0 22px 0 8px; border-radius: 999px; background: #12131c; border: 1px solid #2a2c3d; color: #f5f6fa; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.v-play { width: 34px; height: 34px; border-radius: 50%; background: #6d4dff; display: grid; place-items: center; }
.v-play svg { width: 14px; height: 14px; fill: #ffffff; }
.v-shot { position: absolute; left: 140px; top: 600px; width: 960px; height: 480px; border-radius: 18px; background: #0d0e15; border: 1px solid #2a2c3d; box-shadow: 0 -10px 80px rgba(109, 77, 255, 0.35); overflow: hidden; display: flex; }
.v-shot-side { width: 200px; padding: 18px 14px; border-right: 1px solid #1f2130; display: grid; align-content: start; gap: 4px; }
.v-shot-item { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px; color: #8b8fa3; font-size: 13px; font-weight: 500; }
.v-shot-item.is-active { background: #1a1b27; color: #f5f6fa; }
.v-shot-item i { width: 8px; height: 8px; border-radius: 3px; }
.v-shot-main { flex: 1; padding: 18px 22px; display: grid; align-content: start; gap: 14px; }
.v-shot-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; }
.v-shot-head span { color: #8b8fa3; font-size: 13px; font-weight: 500; }
.v-release { display: grid; grid-template-columns: 90px 1fr 120px 100px; align-items: center; height: 54px; padding: 0 14px; border-radius: 12px; background: #12131c; border: 1px solid #1f2130; font-size: 13px; font-weight: 500; color: #c9ccd8; }
.v-release strong { color: #f5f6fa; font-weight: 600; }
.v-version { font-family: "SF Mono", "JetBrains Mono", Menlo, monospace; color: #b9a8ff; font-size: 13px; font-weight: 600; }
.v-status { justify-self: start; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.v-status-live { background: rgba(47, 212, 157, 0.14); color: #2fd49d; }
.v-status-roll { background: rgba(109, 77, 255, 0.18); color: #b9a8ff; }
.v-status-plan { background: #1f2130; color: #8b8fa3; }
.v-progress { height: 6px; border-radius: 999px; background: #1f2130; overflow: hidden; }
.v-progress i { display: block; height: 100%; border-radius: 999px; background: #6d4dff; }

/* ==========================================================================
   04 — Product Tour Storyboard · "Kovo" board  (1760 × 800)
   ========================================================================== */
.frame-tour { width: 1760px; height: 800px; background: #f2f3f5; }
.frame-tour .canvas-dots { position: absolute; inset: 0; }
.k-board-bar { position: absolute; left: 24px; top: 22px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 8px; border-radius: 12px; background: #ffffff; border: 1px solid #e3e5ea; box-shadow: 0 4px 14px rgba(15, 17, 21, 0.06); font-size: 14px; font-weight: 600; }
.k-board-bar .k-file-icon { width: 28px; height: 28px; border-radius: 8px; background: #2f6bff; display: grid; place-items: center; color: #ffffff; }
.k-board-bar span { color: #9aa0ad; font-weight: 500; }
.k-collab { position: absolute; right: 24px; top: 22px; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; border-radius: 12px; background: #ffffff; border: 1px solid #e3e5ea; box-shadow: 0 4px 14px rgba(15, 17, 21, 0.06); }
.k-collab .avatars { display: flex; }
.k-collab .avatar { width: 28px; height: 28px; font-size: 11px; border: 2px solid #ffffff; margin-left: -6px; }
.k-collab .avatar:first-child { margin-left: 0; }
.k-share { height: 30px; padding: 0 12px; border-radius: 8px; background: #2f6bff; color: #ffffff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }

.k-scene { position: absolute; top: 150px; width: 480px; display: grid; gap: 10px; }
.k-scene-1 { left: 70px; }
.k-scene-2 { left: 640px; }
.k-scene-3 { left: 1210px; }
.k-scene-label { display: flex; align-items: center; gap: 8px; color: #6b7080; font-size: 13px; font-weight: 600; }
.k-scene-label b { color: #2f6bff; }
.k-scene-label .k-time { margin-left: auto; height: 22px; padding: 0 8px; border-radius: 6px; background: #ffffff; border: 1px solid #e3e5ea; display: inline-flex; align-items: center; color: #4b5262; font-size: 12px; font-variant-numeric: tabular-nums; }
.k-screen { position: relative; height: 330px; border-radius: 16px; overflow: hidden; background: #ffffff; border: 1px solid #e1e3e8; box-shadow: 0 16px 40px rgba(15, 17, 21, 0.08); }
.k-scene.is-selected .k-screen { border: 2px solid #2f6bff; box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.14), 0 16px 40px rgba(15, 17, 21, 0.1); }
.k-app-top { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #eef0f3; font-size: 13px; font-weight: 700; }
.k-app-top .k-mini-logo { width: 18px; height: 18px; border-radius: 5px; background: #2f6bff; }
.k-app-top > span:last-child { margin-left: auto; color: #9aa0ad; font-weight: 500; font-size: 12px; }
.k-screen-body { padding: 16px; display: grid; gap: 12px; }
.k-h { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.k-p { color: #8a90a0; font-size: 12px; font-weight: 500; margin-top: -6px; }
.k-field { display: grid; gap: 6px; font-size: 11px; font-weight: 600; color: #6b7080; }
.k-input { height: 36px; display: flex; align-items: center; padding: 0 12px; border-radius: 9px; border: 1.5px solid #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.12); color: #0f1115; font-size: 13px; font-weight: 600; }
.k-caret { width: 2px; height: 16px; margin-left: 2px; background: #2f6bff; }
.k-templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.k-template { height: 70px; border-radius: 10px; border: 1px solid #e6e8ee; padding: 8px; display: grid; align-content: space-between; font-size: 11px; font-weight: 600; color: #4b5262; }
.k-template.is-picked { border: 1.5px solid #2f6bff; background: #f3f7ff; color: #1f4fd1; }
.k-template-art { display: flex; gap: 3px; }
.k-template-art i { height: 18px; flex: 1; border-radius: 4px; background: #e9edf5; }
.k-template.is-picked .k-template-art i { background: #cbdaff; }
.k-cta { height: 36px; border-radius: 9px; background: #2f6bff; color: #ffffff; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.k-invite-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #eef0f3; font-size: 13px; font-weight: 600; }
.k-invite-row div span { color: #9aa0ad; font-size: 12px; font-weight: 500; }
.k-invite-row em { margin-left: auto; font-style: normal; color: #6b7080; font-size: 12px; font-weight: 600; }
.k-invite-row .avatar { width: 28px; height: 28px; font-size: 11px; }
.k-email { display: flex; gap: 8px; }
.k-email .k-input { flex: 1; border-color: #e1e3e8; box-shadow: none; color: #9aa0ad; font-weight: 500; }
.k-email .k-cta { width: 90px; }
.k-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.k-col { display: grid; gap: 8px; align-content: start; }
.k-col-title { display: flex; align-items: center; gap: 6px; color: #6b7080; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.k-col-title i { width: 7px; height: 7px; border-radius: 50%; }
.k-card { padding: 9px 10px; border-radius: 9px; background: #ffffff; border: 1px solid #e8eaef; display: grid; gap: 7px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04); }
.k-card-meta { display: flex; align-items: center; justify-content: space-between; }
.k-tag { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; }
.k-card .avatar { width: 18px; height: 18px; font-size: 8px; }
.k-card.is-dragging { border: 1.5px solid #2f6bff; box-shadow: 0 14px 30px rgba(47, 107, 255, 0.25); }
.k-success { position: absolute; left: 118px; bottom: 16px; height: 38px; padding: 0 14px 0 10px; border-radius: 10px; background: #0f1115; color: #ffffff; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px rgba(15, 17, 21, 0.25); }
.k-success i { width: 22px; height: 22px; border-radius: 50%; background: #2fd49d; display: grid; place-items: center; color: #0f1115; }
.k-arrow { position: absolute; top: 330px; width: 90px; height: 24px; color: #2f6bff; }
.k-arrow-1 { left: 552px; }
.k-arrow-2 { left: 1122px; }
.k-note { position: absolute; width: 260px; padding: 14px 16px; border-radius: 4px 14px 14px 14px; display: grid; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.45; box-shadow: 0 8px 20px rgba(15, 17, 21, 0.08); }
.k-note b { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.k-note-1 { left: 120px; top: 560px; background: #fff3c4; color: #5b4a10; }
.k-note-2 { left: 690px; top: 560px; background: #dff5e8; color: #1b5e3d; }
.k-note-3 { left: 1260px; top: 560px; background: #e6e6ff; color: #3a3a99; }
.k-toolbar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); height: 50px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 14px; background: #ffffff; border: 1px solid #e3e5ea; box-shadow: 0 10px 30px rgba(15, 17, 21, 0.12); }
.k-tool { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #4b5262; }
.k-tool.is-active { background: #2f6bff; color: #ffffff; }
.k-tool-sep { width: 1px; height: 24px; background: #e3e5ea; margin: 0 4px; }
.frame-tour .cursor { left: 1426px; top: 374px; }
.k-cursor-tag { position: absolute; z-index: 31; left: 1454px; top: 410px; height: 24px; padding: 0 8px; border-radius: 6px 6px 6px 2px; background: #e8590c; color: #ffffff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }

/* ==========================================================================
   05 — Onboarding Flow · "Fenn" workspace  (1240 × 1000)
   ========================================================================== */
.frame-onboard { width: 1240px; height: 1000px; background: #f3f4f7; }
.f-app { position: absolute; inset: 0; display: flex; }
.f-side { width: 230px; padding: 22px 16px; background: #ffffff; border-right: 1px solid #eceef2; display: grid; align-content: start; gap: 6px; }
.f-side-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; font-size: 17px; font-weight: 700; }
.f-logo { width: 28px; height: 28px; border-radius: 9px; background: #e8590c; display: grid; place-items: center; }
.f-ghost { height: 30px; border-radius: 8px; background: #f2f3f6; }
.f-ghost.short { width: 70%; }
.f-main { flex: 1; padding: 30px; display: grid; align-content: start; gap: 18px; }
.f-main-head { height: 36px; width: 300px; border-radius: 10px; background: #e9ebf0; }
.f-main-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.f-main-card { height: 150px; border-radius: 16px; background: #ffffff; border: 1px solid #eceef2; }
.f-main-wide { height: 380px; border-radius: 16px; background: #ffffff; border: 1px solid #eceef2; }
.f-scrim { position: absolute; inset: 0; background: rgba(17, 19, 28, 0.42); }

.f-modal { position: absolute; left: 310px; top: 120px; width: 620px; border-radius: 26px; background: #ffffff; overflow: hidden; box-shadow: 0 50px 120px rgba(17, 19, 28, 0.35), 0 10px 30px rgba(17, 19, 28, 0.18); }
.f-hero { position: relative; height: 170px; background: #fff1e8; overflow: hidden; }
.f-hero .blob-a { position: absolute; left: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: #ffd9c2; }
.f-hero .blob-b { position: absolute; right: -40px; top: 40px; width: 220px; height: 220px; border-radius: 50%; background: #ffe8b8; }
.f-hero .f-confetti { position: absolute; inset: 0; }
.f-hero-avatar { position: absolute; left: 50%; top: 52px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: #e8590c; border: 5px solid #ffffff; display: grid; place-items: center; color: #ffffff; font-size: 30px; font-weight: 700; box-shadow: 0 12px 30px rgba(232, 89, 12, 0.35); }
.f-close { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); display: grid; place-items: center; color: #4b5262; }
.f-body { padding: 26px 36px 30px; display: grid; gap: 20px; }
.f-step { display: grid; gap: 10px; }
.f-step-head { display: flex; justify-content: space-between; color: #8a90a0; font-size: 13px; font-weight: 600; }
.f-step-head b { color: #e8590c; }
.f-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.f-progress i { height: 5px; border-radius: 999px; background: #eceef2; }
.f-progress i.is-done { background: #e8590c; }
.f-title { text-align: center; display: grid; gap: 6px; }
.f-title h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; }
.f-title h2 em { font-style: normal; color: #e8590c; }
.f-title p { color: #6b7080; font-size: 15px; font-weight: 500; }
.f-field { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: #4b5262; }
.f-input { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e8590c; box-shadow: 0 0 0 4px rgba(232, 89, 12, 0.12); color: #0f1115; font-size: 15px; font-weight: 600; }
.f-input .f-url { margin-left: auto; color: #9aa0ad; font-size: 13px; font-weight: 500; }
.f-segment { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #f2f3f6; }
.f-segment span { height: 36px; display: grid; place-items: center; border-radius: 9px; color: #6b7080; font-size: 14px; font-weight: 600; }
.f-segment span.is-active { background: #ffffff; color: #0f1115; box-shadow: 0 1px 3px rgba(17, 19, 28, 0.12); }
.f-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.f-goal { position: relative; padding: 14px; border-radius: 14px; border: 1.5px solid #e8eaef; display: grid; align-content: start; gap: 10px; font-size: 14px; font-weight: 600; }
.f-goal span { color: #8a90a0; font-size: 12px; font-weight: 500; line-height: 1.35; }
.f-goal-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.f-goal.is-picked { border-color: #e8590c; background: #fff7f2; }
.f-goal-check { position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #e8590c; color: #ffffff; display: grid; place-items: center; }
.f-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.f-skip { color: #8a90a0; font-size: 14px; font-weight: 600; }
.f-continue { height: 48px; padding: 0 24px; border-radius: 14px; background: #0f1115; color: #ffffff; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.frame-onboard .cursor { left: 845px; top: 834px; }
.frame-onboard .click-ring { left: 823px; top: 811px; border-color: rgba(232, 89, 12, 0.6); background: rgba(232, 89, 12, 0.14); }

/* ==========================================================================
   06 — Social Motion Pack · "Lumio" launch  (1520 × 800)
   ========================================================================== */
.frame-social { width: 1520px; height: 800px; background: #101114; color: #f5f6fa; }
.frame-social .glow { position: absolute; left: 420px; top: 20px; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(198, 255, 61, 0.14) 0%, rgba(198, 255, 61, 0) 65%); }
.s-format { position: absolute; display: grid; gap: 14px; }
.s-format-label { display: flex; align-items: center; gap: 8px; color: #8b8fa3; font-size: 13px; font-weight: 600; }
.s-format-label b { height: 22px; padding: 0 8px; border-radius: 6px; background: #1d1f26; color: #d7dae3; font-size: 12px; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
.s-square-wrap { left: 80px; top: 112px; }
.s-story-wrap { left: 664px; top: 64px; }
.s-post-wrap { left: 1068px; top: 112px; }

.s-square { position: relative; width: 520px; height: 520px; border-radius: 22px; overflow: hidden; background: #c6ff3d; color: #0d0e10; }
.s-square .s-sq-brand { position: absolute; left: 34px; top: 30px; display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; }
.s-logo { width: 28px; height: 28px; border-radius: 8px; background: #0d0e10; display: grid; place-items: center; }
.s-logo i { width: 12px; height: 12px; border-radius: 3px; background: #c6ff3d; }
.s-square .s-sq-tag { position: absolute; right: 30px; top: 30px; height: 30px; padding: 0 12px; border-radius: 999px; background: #0d0e10; color: #c6ff3d; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.s-square h3 { position: absolute; left: 34px; top: 100px; width: 460px; font-size: 55px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; }
.s-square h3 em { font-style: normal; display: inline-block; padding: 0 10px 4px; margin-left: -4px; border-radius: 12px; background: #0d0e10; color: #c6ff3d; }
.s-sq-ui { position: absolute; left: 34px; right: 34px; bottom: 30px; height: 200px; border-radius: 16px; background: #0d0e10; padding: 16px; display: grid; gap: 10px; color: #f5f6fa; }
.s-sq-ui-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.s-sq-ui-top span { color: #8b8fa3; font-weight: 500; }
.s-timeline { display: grid; gap: 8px; }
.s-track { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; color: #8b8fa3; font-size: 11px; font-weight: 600; }
.s-track-bar { position: relative; height: 18px; border-radius: 6px; background: #1d1f26; }
.s-track-bar i { position: absolute; top: 0; height: 100%; border-radius: 6px; }
.s-playhead { position: absolute; top: 44px; bottom: 16px; left: 310px; width: 2px; background: #c6ff3d; }

.s-story { position: relative; width: 340px; height: 604px; border-radius: 30px; overflow: hidden; background: #1a1c22; border: 6px solid #22252d; }
.s-story-bg { position: absolute; inset: 0; background: #2a1f55; }
.s-story-bg .orb-a { position: absolute; left: -140px; top: 0; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(109, 77, 255, 0.9) 0%, rgba(109, 77, 255, 0) 68%); }
.s-story-bg .orb-b { position: absolute; right: -160px; bottom: 10px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(198, 255, 61, 0.38) 0%, rgba(198, 255, 61, 0) 66%); }
.s-story-progress { position: absolute; left: 14px; right: 14px; top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.s-story-progress i { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }
.s-story-progress i.is-done { background: #ffffff; }
.s-story-head { position: absolute; left: 16px; right: 16px; top: 30px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.s-story-head .s-logo { width: 30px; height: 30px; border-radius: 50%; background: #c6ff3d; }
.s-story-head .s-logo i { background: #0d0e10; border-radius: 3px; }
.s-story-head span { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.s-story-title { position: absolute; left: 22px; right: 22px; top: 110px; display: grid; gap: 12px; }
.s-story-title small { height: 26px; justify-self: start; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.s-story-title strong { font-size: 64px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; }
.s-story-title p { color: rgba(255, 255, 255, 0.72); font-size: 15px; font-weight: 500; line-height: 1.4; }
.s-story-card { position: absolute; left: 22px; right: 22px; top: 330px; padding: 14px; border-radius: 18px; background: rgba(13, 14, 16, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 10px; }
.s-story-card-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.s-story-card-row .icon { color: #c6ff3d; }
.s-story-card-row span { margin-left: auto; color: #8b8fa3; font-weight: 500; font-size: 12px; }
.s-story-link { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); height: 40px; padding: 0 16px; border-radius: 999px; background: #ffffff; color: #0d0e10; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.s-post { width: 380px; border-radius: 20px; background: #16171c; border: 1px solid #262833; padding: 18px; display: grid; gap: 14px; }
.s-post-head { display: flex; align-items: center; gap: 10px; }
.s-post-head .s-logo { width: 40px; height: 40px; border-radius: 50%; background: #c6ff3d; }
.s-post-head .s-logo i { width: 14px; height: 14px; background: #0d0e10; }
.s-post-who { display: grid; gap: 1px; font-size: 14px; font-weight: 700; }
.s-post-who span { color: #8b8fa3; font-size: 13px; font-weight: 500; }
.s-verified { width: 16px; height: 16px; color: #c6ff3d; }
.s-post-text { color: #d7dae3; font-size: 15px; font-weight: 500; line-height: 1.45; }
.s-post-text b { color: #c6ff3d; font-weight: 600; }
.s-post-media { position: relative; height: 214px; border-radius: 14px; overflow: hidden; background: #c6ff3d; }
.s-post-media .s-pm-ui { position: absolute; left: 24px; top: 26px; right: 24px; bottom: 0; border-radius: 12px 12px 0 0; background: #0d0e10; padding: 14px; display: grid; gap: 8px; align-content: start; }
.s-pm-line { height: 10px; border-radius: 999px; background: #262833; }
.s-pm-line.accent { width: 46%; background: #c6ff3d; }
.s-pm-line.w70 { width: 70%; }
.s-pm-line.w55 { width: 55%; }
.s-pm-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: #ffffff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.s-pm-play svg { width: 20px; height: 20px; fill: #0d0e10; margin-left: 3px; }
.s-pm-time { position: absolute; right: 10px; bottom: 10px; height: 22px; padding: 0 7px; border-radius: 6px; background: rgba(13, 14, 16, 0.75); color: #ffffff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.s-post-stats { display: flex; gap: 22px; color: #8b8fa3; font-size: 13px; font-weight: 600; }
.s-post-stats span { display: inline-flex; align-items: center; gap: 6px; }
.s-post-stats .is-liked { color: #ff5c8a; }

/* Tour — drag state + invite rows */
.k-invite-row > div { line-height: 1.3; }
.k-drop-slot { height: 58px; border-radius: 9px; border: 1.5px dashed #9db8ff; background: #f3f7ff; }
.k-drag { position: absolute; z-index: 3; left: 150px; top: 168px; width: 142px; }

/* ==========================================================================
   Loop animations — only on the website cards (?embed=1).
   Capture mode (?frame=<name>) stays static for Design to Motion.
   ========================================================================== */
@keyframes ui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ui-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.8; } }
@keyframes ui-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ui-pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } }

/* 01 · Macro — cursor glides to “Edit product”, clicks, loupe floats */
@keyframes macro-cursor {
  0% { transform: translate(150px, 120px); }
  38% { transform: translate(0, 0); }
  48% { transform: translate(0, 0) scale(0.86); }
  54% { transform: translate(0, 0) scale(1); }
  80% { transform: translate(0, 0); }
  100% { transform: translate(150px, 120px); }
}
@keyframes macro-ring {
  0%, 46% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(0.6); opacity: 1; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@keyframes macro-press {
  0%, 46%, 58%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(0.95); filter: brightness(0.88); }
}
body.is-embed .frame-macro .cursor { animation: macro-cursor 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-macro .click-ring { animation: macro-ring 4s ease-out infinite; }
body.is-embed .frame-macro .loupe-edit { animation: macro-press 4s ease-in-out infinite; }
body.is-embed .frame-macro .macro-loupe { animation: ui-float 4s ease-in-out infinite; }
body.is-embed .frame-macro .scene-glow { animation: ui-breathe 6s ease-in-out infinite; }

/* 02 · Dash — the revenue line draws, the point and tooltip land, toast slides in */
@keyframes dash-line {
  0% { stroke-dashoffset: 1; opacity: 1; }
  42% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes dash-area { 0%, 30% { opacity: 0; } 50%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes dash-pop { 0%, 40% { transform: scale(0); } 48% { transform: scale(1.25); } 54%, 90% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes dash-tip { 0%, 46% { opacity: 0; transform: translateY(10px); } 54%, 90% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes dash-toast { 0%, 56% { opacity: 0; transform: translateX(60px); } 64%, 90% { opacity: 1; transform: translateX(0); } 98%, 100% { opacity: 0; transform: translateX(60px); } }
@keyframes dash-bars { 0% { transform: scaleX(0); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
body.is-embed .frame-dash .o-line { stroke-dasharray: 1; animation: dash-line 4.5s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-dash .o-area { animation: dash-area 4.5s ease infinite; }
body.is-embed .frame-dash .o-point { animation: dash-pop 4.5s ease-out infinite; }
body.is-embed .frame-dash .o-tooltip { animation: dash-tip 4.5s ease-out infinite; }
body.is-embed .frame-dash .o-toast { animation: dash-toast 4.5s cubic-bezier(0.3, 1.3, 0.5, 1) infinite; }
body.is-embed .frame-dash .o-track i { transform-origin: left center; animation: dash-bars 4.5s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-dash .o-live i { animation: ui-pulse-dot 1.4s ease-in-out infinite; }

/* 03 · Launch — glows breathe, the product shot floats, the rollout bar fills */
@keyframes launch-roll { 0% { transform: scaleX(0.35); } 70%, 85% { transform: scaleX(1.4); } 100% { transform: scaleX(0.35); } }
@keyframes launch-play { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 77, 255, 0.6); } 60% { box-shadow: 0 0 0 14px rgba(109, 77, 255, 0); } }
@keyframes launch-shot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
body.is-embed .frame-launch .glow-a { animation: ui-breathe 4s ease-in-out infinite; }
body.is-embed .frame-launch .glow-b { animation: ui-breathe 4s ease-in-out -2s infinite; }
body.is-embed .frame-launch .v-shot { animation: launch-shot 4s ease-in-out infinite; }
body.is-embed .frame-launch .v-release-roll .v-progress i { transform-origin: left center; animation: launch-roll 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-launch .v-play { animation: launch-play 2s ease-out infinite; }
body.is-embed .frame-launch .v-status-roll .pill-dot { animation: ui-pulse-dot 1.2s ease-in-out infinite; }

/* 04 · Tour — Maya drags the card into “In progress”, dashes flow, caret blinks */
@keyframes tour-drag {
  0% { transform: translate(-150px, 26px); }
  15% { transform: translate(-150px, 26px); }
  55% { transform: translate(0, 0); }
  85% { transform: translate(0, 0); }
  100% { transform: translate(-150px, 26px); }
}
@keyframes tour-toast { 0%, 58% { opacity: 0; transform: translateY(12px) scale(0.96); } 64%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes tour-dash { to { stroke-dashoffset: -22; } }
@keyframes tour-select { 0%, 100% { box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.14), 0 16px 40px rgba(15, 17, 21, 0.1); } 50% { box-shadow: 0 0 0 8px rgba(47, 107, 255, 0.2), 0 16px 40px rgba(15, 17, 21, 0.1); } }
body.is-embed .frame-tour .k-drag,
body.is-embed .frame-tour .cursor,
body.is-embed .frame-tour .k-cursor-tag { animation: tour-drag 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-tour .k-success { animation: tour-toast 4s ease-out infinite; }
body.is-embed .frame-tour .k-arrow path:first-child { animation: tour-dash 0.9s linear infinite; }
body.is-embed .frame-tour .k-caret { animation: ui-blink 1s steps(1) infinite; }
body.is-embed .frame-tour .k-scene.is-selected .k-screen { animation: tour-select 2s ease-in-out infinite; }

/* 05 · Onboarding — cursor clicks Continue, step 3 lights up, confetti drifts */
@keyframes onboard-cursor {
  0% { transform: translate(-220px, -150px); }
  45% { transform: translate(0, 0); }
  55% { transform: translate(0, 0) scale(0.86); }
  60% { transform: translate(0, 0) scale(1); }
  82% { transform: translate(0, 0); }
  100% { transform: translate(-220px, -150px); }
}
@keyframes onboard-ring { 0%, 52% { transform: scale(0.3); opacity: 0; } 56% { transform: scale(0.6); opacity: 1; } 76%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes onboard-press { 0%, 52%, 62%, 100% { transform: scale(1); } 56% { transform: scale(0.95); } }
@keyframes onboard-step { 0%, 56% { background: #eceef2; } 62%, 92% { background: #e8590c; } 100% { background: #eceef2; } }
@keyframes onboard-confetti { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes onboard-avatar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
body.is-embed .frame-onboard .cursor { animation: onboard-cursor 4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
body.is-embed .frame-onboard .click-ring { animation: onboard-ring 4s ease-out infinite; }
body.is-embed .frame-onboard .f-continue { animation: onboard-press 4s ease-in-out infinite; }
body.is-embed .frame-onboard .f-progress i:nth-child(3) { animation: onboard-step 4s ease infinite; }
body.is-embed .frame-onboard .f-confetti { animation: onboard-confetti 3s ease-in-out infinite; }
body.is-embed .frame-onboard .f-hero-avatar { animation: onboard-avatar 3s ease-in-out infinite; }
body.is-embed .frame-onboard .k-caret { animation: ui-blink 1s steps(1) infinite; }

/* 06 · Social — playhead scrubs, story progress fills, like pulses */
@keyframes social-playhead { 0% { transform: translateX(-176px); } 100% { transform: translateX(132px); } }
@keyframes social-story { 0% { box-shadow: inset 0 0 0 #ffffff; } 100% { box-shadow: inset 104px 0 0 #ffffff; } }
@keyframes social-like { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.35); } 86% { transform: scale(0.95); } }
@keyframes social-orb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -24px); } }
@keyframes social-em { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
body.is-embed .frame-social .s-playhead { animation: social-playhead 4s linear infinite; }
body.is-embed .frame-social .s-story-progress i:nth-child(3) { animation: social-story 4s linear infinite; }
body.is-embed .frame-social .s-post-stats .is-liked .icon { animation: social-like 2s ease-out infinite; }
body.is-embed .frame-social .orb-a { animation: social-orb 4s ease-in-out infinite; }
body.is-embed .frame-social .orb-b { animation: social-orb 4s ease-in-out -2s infinite; }
body.is-embed .frame-social .s-square h3 em { display: inline-block; animation: social-em 2s ease-in-out infinite; }
body.is-embed .frame-social .glow { animation: ui-breathe 4s ease-in-out infinite; }
body.is-embed .frame-social .s-pm-play { animation: launch-play 2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  body.is-embed .ui-frame *,
  body.is-embed .ui-frame *::before,
  body.is-embed .ui-frame *::after {
    animation: none !important;
  }
}

/* Embed: nothing behind the frame (prevents light edges on the cards) */
html.want-embed,
html.want-embed body {
  background: transparent;
  overflow: hidden;
}