/* NXT CLIPS - video editor (media bin, program monitor, inspector, timeline), the project launcher
   and the landing page. Title templates reference the Archivo families by name, so they are
   declared here, for this product only. Loaded only on this product's pages. Owned by the product
   team - tokens only (--c-*, --s-*, --r-*, --t-*); the monitor and viewer areas are deliberately
   dark in both themes, like a broadcast monitor. */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-SemiBold.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Archivo Display'; src: url('/assets/fonts/ArchivoExtraCondensed-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Archivo Display'; src: url('/assets/fonts/ArchivoExtraCondensed-Black.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

@layer product {
  .p-clips { --cl-video: #3D3D3D; --cl-video-hi: #D9D9D9; --cl-audio: #6B6B6B; --cl-image: #262626; --cl-text: #595959; --cl-cap: #4D4D4D; --cl-coral: #FFFFFF;
    --cl-night: #090909; --cl-night2: #131313; --cl-night-line: #292929; --cl-night-text: #E9E9E9; --cl-night-muted: #A1A1A1; }

  /* ---------- Shared bits ---------- */
  .cl-aspect rect { fill: color-mix(in srgb, var(--c-link) 14%, transparent); stroke: var(--c-link); stroke-width: 1.5; }
  .cl-h { font: 600 var(--t-h4)/1.3 var(--font-sans); letter-spacing: -0.01em; margin: 0; display: flex; gap: var(--s-2); align-items: center; }
  .cl-count { font: 600 var(--t-caption)/1 var(--font-mono); padding: 3px 7px; border-radius: var(--r-xs); background: var(--c-surface2); color: var(--c-muted); }
  .cl-panel { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); min-width: 0; }
  .cl-panel-head { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .cl-panel-head a { display: inline-flex; gap: 4px; align-items: center; }
  .cl-map { display: block; width: 100%; height: auto; max-height: 64px; }
  .cl-map-lane { fill: color-mix(in srgb, var(--c-text) 7%, transparent); }
  .cl-map-v { fill: var(--cl-video); } .cl-map-a { fill: var(--cl-audio); } .cl-map-i { fill: var(--cl-image); } .cl-map-t { fill: var(--cl-text); } .cl-map-c { fill: var(--cl-cap); }
  .cl-frame { position: absolute; inset: var(--s-2); display: grid; place-items: center; }
  .cl-frame-img { display: block; width: 100%; height: 100%; object-fit: contain; }
  img.cl-frame-img { width: auto; height: auto; max-width: 100%; max-height: 100%; }


  /* ---------- Launcher ---------- */
  .cl-home { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
  .cl-home > * { min-width: 0; }
  .cl-side { display: grid; gap: var(--s-5); align-content: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  @media (min-width: 1200px) {
    .cl-home { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: 'continue side' 'library side' 'onb side'; grid-template-rows: auto auto 1fr; align-items: start; }
    .cl-continue { grid-area: continue; } .cl-library { grid-area: library; } .cl-home > .onboarding { grid-area: onb; } .cl-side { grid-area: side; grid-template-columns: minmax(0, 1fr); }
    .cl-side .cl-quick { grid-template-columns: minmax(0, 1fr); }
    .cl-home.is-empty { grid-template-areas: 'hero side' 'onb side'; } .cl-home.is-empty .cl-hero { grid-area: hero; }
  }
  .cl-continue { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; background: var(--cl-night); color: var(--cl-night-text); border: 1px solid var(--cl-night-line); box-shadow: var(--e-2);
    --c-text: var(--cl-night-text); --c-muted: var(--cl-night-muted); --c-border: var(--cl-night-line); --c-link: #D6D6D6; --c-surface: var(--cl-night2); --c-surface2: #1A1A1A; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-primary-hover: #D6D6D6; --c-accent: #FFFFFF; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000; color-scheme: dark; }
  .cl-monitor { position: relative; display: grid; place-items: center; min-height: 280px; padding: var(--s-4); background: radial-gradient(70% 70% at 50% 40%, #181818, #070707); }
  .cl-monitor::after { content: ''; position: absolute; inset: var(--s-3); border: 1px solid rgb(255 255 255 / 0.06); border-radius: var(--r-sm); pointer-events: none; }
  .cl-monitor .cl-frame { inset: var(--s-5); }
  .cl-tc { position: absolute; left: var(--s-4); bottom: var(--s-3); font: 600 var(--t-caption)/1 var(--font-mono); letter-spacing: .06em; color: #FAFAFA; background: rgb(0 0 0 / 0.6); padding: 5px 8px; border-radius: var(--r-xs); }
  .cl-continue-copy { display: grid; gap: var(--s-3); align-content: center; padding: var(--s-6); border-left: 1px solid var(--cl-night-line); }
  .cl-continue-copy .eyebrow { margin: 0; color: var(--cl-coral); }
  .cl-continue-copy p { margin: 0; }
  .cl-continue-name { font: var(--fw-h2) clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1.05 var(--font-display); letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; color: #fff; }
  .cl-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: 0; }
  .cl-facts div { display: grid; gap: 2px; }
  .cl-facts dt { font: 600 var(--t-overline)/1 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--cl-night-muted); }
  .cl-facts dd { margin: 0; font-weight: 600; }
  .cl-continue-map { padding: var(--s-2); border-radius: var(--r-sm); background: #0F0F0F; border: 1px solid var(--cl-night-line); }
  .cl-continue-map .cl-map-lane { fill: rgb(255 255 255 / 0.05); }
  .cl-continue .btn-secondary { --b-bg: transparent; --b-fg: #E9E9E9; --b-bd: #424242; --b-hover: rgb(255 255 255 / 0.06); }
  .cl-continue .row { gap: var(--s-2); } .cl-continue form { margin: 0; }
  @media (max-width: 820px) { .cl-continue { grid-template-columns: minmax(0, 1fr); } .cl-continue-copy { border-left: 0; border-top: 1px solid var(--cl-night-line); padding: var(--s-5); } .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .cl-new { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .cl-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  .cl-quick li, .cl-quick form { margin: 0; height: 100%; }
  .cl-quick-btn { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-2); align-items: center; width: 100%; height: 100%; min-height: 52px; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--d-fast), background-color var(--d-fast), transform var(--d-fast) var(--ease-out); }
  .cl-quick-btn .cl-aspect { grid-row: 1 / 3; }
  .cl-quick-btn:hover { border-color: var(--c-link); background: var(--p-soft); transform: translateY(-1px); }
  .cl-quick-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .cl-quick-name { font-size: var(--t-small); font-weight: 600; line-height: 1.2; }
  .cl-quick-name .num { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--c-muted); font-weight: 500; }
  .cl-quick-use { font-size: var(--t-caption); color: var(--c-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cl-library { display: grid; gap: var(--s-4); }
  .cl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .cl-card { margin: 0; min-width: 0; }
  @media (max-width: 640px) { .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } .cl-card-map { display: none; } .cl-card-body { padding: var(--s-2) var(--s-3) var(--s-3); } .cl-card-meta > span:nth-child(n+3) { display: none; } }
  .cl-card-link { display: grid; height: 100%; align-content: start; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); text-decoration: none; overflow: hidden; transition: border-color var(--d-fast), box-shadow var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
  .cl-card-link:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c-link) 55%, var(--c-border)); box-shadow: var(--e-2); transform: translateY(-2px); }
  .cl-card-link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .cl-card-monitor { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s-2); background: radial-gradient(80% 80% at 50% 40%, #191919, #070707); }
  .cl-card-dur { position: absolute; right: 8px; bottom: 8px; font: 600 var(--t-caption)/1 var(--font-mono); color: #fff; background: rgb(0 0 0 / 0.65); padding: 4px 6px; border-radius: var(--r-xs); }
  .cl-card-link:hover .cl-frame-img { transform: scale(1.02); }
  .cl-frame-img { transition: transform var(--d-slow) var(--ease-out); }
  .cl-card-map { display: block; padding: 6px var(--s-3); background: var(--c-surface2); border-bottom: 1px solid var(--c-border); }
  .cl-card-body { display: grid; gap: 4px; padding: var(--s-3) var(--s-4) var(--s-4); min-width: 0; }
  .cl-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cl-card-meta { display: flex; gap: 4px var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-small); color: var(--c-muted); }
  .cl-card-meta > span + span::before { content: '·'; margin-right: var(--s-2); }
  .cl-card-foot { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

  .cl-tpl-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .cl-tpl-mini li, .cl-tpl-mini form { margin: 0; }
  .cl-tpl-btn, .cl-tpl-card { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
  .cl-tpl-btn[disabled], .cl-tpl-card[disabled] { cursor: not-allowed; opacity: .6; }
  .cl-tpl-art { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-2); border-radius: var(--r-md); background: radial-gradient(80% 80% at 50% 40%, #191919, #070707); border: 1px solid var(--c-border); overflow: hidden; transition: border-color var(--d-fast); }
  .cl-tpl-card .cl-tpl-art { aspect-ratio: 4 / 3; padding: var(--s-4); }
  .cl-tpl-frame { display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08); }
  .cl-tpl-btn:not([disabled]):hover .cl-tpl-art, .cl-tpl-card:not([disabled]):hover .cl-tpl-art { border-color: var(--c-link); }
  .cl-tpl-btn:focus-visible, .cl-tpl-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-sm); }
  .cl-tpl-cap { fill: #FAFAFA; opacity: .85; } .cl-tpl-cap.bold { fill: #D1D1D1; } .cl-tpl-cap.boxed { fill: #E7E7E7; } .cl-tpl-cap.minimal { opacity: .55; }
  .cl-tpl-name { font-weight: 600; }
  .cl-tpl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .cl-tpl-grid li, .cl-tpl-grid form { margin: 0; height: 100%; }

  .cl-hero { display: grid; gap: var(--s-6); padding: clamp(var(--s-6), 4vw, var(--s-10)); border-radius: var(--r-xl); background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--cl-video) 45%, transparent), transparent 60%), var(--cl-night); color: var(--cl-night-text); border: 1px solid var(--cl-night-line);
    --c-text: var(--cl-night-text); --c-muted: var(--cl-night-muted); --c-border: var(--cl-night-line); --c-bg: #0F0F0F; --c-link: #D6D6D6; --p-soft: #242424; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-primary-hover: #D6D6D6; --c-accent: #FFFFFF; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000; color-scheme: dark; }
  .cl-hero-copy { display: grid; gap: var(--s-3); max-width: 60ch; }
  .cl-hero-copy p { margin: 0; } .cl-hero .eyebrow { color: var(--cl-coral); }
  .cl-hero-title { font: var(--fw-h2) clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.02 var(--font-display); letter-spacing: -0.035em; margin: 0; color: #fff; }

  /* ---------- New project ---------- */
  .cl-newpage { display: grid; gap: var(--s-6); }
  .cl-aspect-form { display: grid; gap: var(--s-5); }
  .cl-aspects { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .cl-aspects legend { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--s-3); padding: 0; }
  .cl-aspect-opt { position: relative; display: block; }
  .cl-aspect-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .cl-aspect-card { display: grid; gap: 4px; height: 100%; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); transition: border-color var(--d-fast), background-color var(--d-fast), box-shadow var(--d-fast); }
  .cl-aspect-stage { display: grid; place-items: center; height: 112px; margin-bottom: var(--s-2); border-radius: var(--r-sm); background: radial-gradient(80% 80% at 50% 40%, #191919, #070707); }
  .cl-aspect-stage .cl-aspect rect { fill: rgb(193 193 193 / 0.14); stroke: #D6D6D6; }
  .cl-aspect-name { font-weight: 600; }
  .cl-aspect-name .num, .cl-aspect-px { font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .cl-aspect-opt:hover .cl-aspect-card { border-color: var(--c-link); }
  .cl-aspect-opt input:checked + .cl-aspect-card { border-color: var(--c-primary); background: var(--p-soft); box-shadow: inset 0 0 0 1px var(--c-primary); }
  .cl-aspect-opt input:focus-visible + .cl-aspect-card { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  /* ---------- Media ---------- */
  .cl-media-page { display: grid; gap: var(--s-5); }
  .cl-media-note { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); font-size: var(--t-small); color: var(--c-muted); max-width: 80ch; }
  .cl-media-note .i { flex: none; margin-top: 2px; color: var(--c-text); }
  .cl-media-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
  .cl-media-card a { overflow-wrap: anywhere; }
  .cl-media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .cl-media-card { margin: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
  .cl-media-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: #fff; background: var(--cl-video); }
  .cl-media-ico.is-audio { background: var(--cl-audio); } .cl-media-ico.is-image { background: var(--cl-image); }
  .cl-media-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-small); }
  .cl-media-card .small { display: block; }

  /* ---------- Editor structure (layout the editor script relies on) ---------- */
  .clips-editor { grid-template-rows: auto auto 1fr auto; }
  .clips-body { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; min-height: 0; }
  .clips-panel { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); background: var(--c-bg); overflow-y: auto; min-width: 0; }
  .clips-stage { display: grid; min-width: 0; }
  .clips-canvas-wrap { display: grid; place-items: center; width: 100%; }
  .clips-canvas-wrap canvas { background: #000; }
  .clips-transport { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
  .clips-time { font-variant-numeric: tabular-nums; }
  .clips-media { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .clips-media li { display: grid; gap: 2px; padding: var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); margin: 0; }
  .clips-media li.is-missing { border-style: dashed; }
  .clips-media-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clips-captions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
  .clips-captions li { padding: var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); margin: 0; }
  .clips-captions li.is-selected { border-color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-text); }
  .clips-timeline { min-width: 0; }
  .clips-tl-tools { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--c-border); }
  .clips-tl-scroll { overflow: auto; }
  .clips-ruler { border-bottom: 1px solid var(--c-border); user-select: none; }
  .clips-tick { padding-left: 3px; border-left: 1px solid var(--c-border); white-space: nowrap; }
  .clips-track.is-hidden .clips-lane, .clips-track.is-muted .clips-lane-audio { opacity: .45; }
  .clips-track-head { align-items: center; font-size: var(--t-caption); }
  .clips-item { color: #fff; font-size: var(--t-caption); cursor: grab; user-select: none; border: 2px solid transparent; }
  .clips-item:focus-visible { outline: none; }
  .clips-item-caption { cursor: pointer; }
  .clips-item-label { display: block; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .clips-handle { background: rgb(255 255 255 / .35); }
  .clips-handle:hover { background: rgb(255 255 255 / .7); }

  /* ---------- Editor workspace ---------- */
  .cl-ws { --cl-head-w: 148px; height: calc(100dvh - var(--layout-header)); min-height: 600px; grid-template-rows: auto auto minmax(0, 1fr) minmax(210px, 36vh); background: var(--c-surface2); }
  .cl-ws > .cl-bar { grid-row: 1; } .cl-ws > .clips-conflict { grid-row: 2; } .cl-ws > .cl-body { grid-row: 3; } .cl-ws > .cl-timeline { grid-row: 4; }
  .cl-bin > * { min-width: 0; }
  .cl-bin .alert { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: var(--s-3); margin: 0 0 var(--s-2); font-size: var(--t-small); }
  .cl-bin .alert p { margin: 0; }
  .cl-bin .alert .btn { justify-self: start; }
  .cl-pane-head .btn { flex: none; }
  .cl-ws .clips-media li.cl-mi { grid-template-columns: 40px minmax(0, 1fr); border-left-width: 1px; }
  .cl-insp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-border); }
  .cl-insp-facts div { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--c-surface); }
  .cl-insp-facts dt { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .cl-insp-facts dd { margin: 0; font-weight: 600; font-size: var(--t-small); }
  @media (max-width: 640px) { .cl-hint { display: none; } }
  .cl-mi { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px var(--s-3); align-items: center; }
  .cl-mi-glyph { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--cl-night); color: #E6E6E6; border: 1px solid var(--cl-night-line); }
  .cl-mi.is-missing .cl-mi-glyph { background: repeating-linear-gradient(45deg, #2A2A2A 0 4px, #161616 4px 8px); }
  .cl-mi-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font: 500 var(--t-caption)/1.3 var(--font-mono); color: var(--c-muted); }
  .cl-mi-state { display: inline-flex; gap: 3px; align-items: center; padding: 1px 6px; border-radius: var(--r-xs); border: 1px dashed var(--c-border-strong); font-family: var(--font-sans); font-weight: 600; color: var(--c-text); }
  .cl-mi-state.is-ok { border-style: solid; }
  .cl-mi .row { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 2px; }
  .cl-bar { gap: var(--s-2); min-height: 52px; padding: 6px var(--s-3); background: var(--c-surface); border-bottom: 1px solid var(--c-border); flex-wrap: nowrap; }
  .cl-back { display: inline-flex; gap: 4px; align-items: center; min-height: 36px; padding: 0 var(--s-2) 0 4px; border-radius: var(--r-sm); color: var(--c-text); font-weight: 600; font-size: var(--t-small); text-decoration: none; flex: none; }
  .cl-back:hover { background: var(--c-surface2); text-decoration: none; }
  .cl-title { display: grid; min-width: 0; }
  .cl-title .create-name { padding: 2px 6px; max-width: 20rem; }
  .cl-title-meta { display: inline-flex; gap: 4px; align-items: center; padding-left: 7px; font-size: var(--t-caption); color: var(--c-muted); white-space: nowrap; }
  .cl-title-meta .num { font-family: var(--font-mono); }
  .cl-ws .create-status { min-width: 0; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-caption); flex: 0 1 auto; }
  .cl-ws .create-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-success); }
  .cl-ws[data-save='dirty'] .create-status::before { background: var(--c-warning); }
  .cl-ws[data-save='busy'] .create-status::before { background: var(--c-info); animation: cl-pulse 1s var(--ease-in-out) infinite; }
  .cl-ws[data-save='error'] .create-status::before { background: var(--c-error); }
  @keyframes cl-pulse { 50% { opacity: .35; } }
  .cl-group { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-bg); flex: none; }
  .cl-ibtn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--c-text); cursor: pointer; }
  .cl-ibtn:hover { background: var(--c-surface2); }
  .cl-ibtn:focus-visible, .cl-play:focus-visible, .cl-tab:focus-visible, .cl-back:focus-visible, .cl-tbtn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
  .cl-zoom { min-width: 4.5em; text-align: center; font: 500 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .cl-ws .clips-conflict { padding: var(--s-3) var(--s-4); background: var(--c-warning-soft); border-bottom: 1px solid var(--c-warning); }

  .cl-body { grid-template-columns: 272px minmax(0, 1fr) 328px; min-height: 0; }
  .cl-ws .clips-panel { max-height: none; height: 100%; min-height: 0; overflow-y: auto; background: var(--c-surface); padding: var(--s-3) var(--s-4) var(--s-5); gap: var(--s-3); }
  .cl-ws .clips-panel.cl-bin { border-right: 1px solid var(--c-border); }
  .cl-ws .clips-side { border-left: 1px solid var(--c-border); }
  .cl-pane-head { display: flex; gap: var(--s-2); align-items: center; justify-content: space-between; }
  .cl-pane-h { display: flex; gap: 6px; align-items: center; margin: var(--s-2) 0 0; font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .cl-pane-head .cl-pane-h { margin: 0; }
  .cl-pane-h .i { color: var(--c-link); }
  .cl-note { margin: 0; }
  .cl-row { gap: 6px; }
  .cl-settings summary { cursor: pointer; font-weight: 600; }
  .cl-settings[open] { display: grid; gap: var(--s-2); }
  .cl-settings form { margin: 0; }
  .cl-color { grid-template-columns: 1fr auto; align-items: center; }

  .cl-ws .clips-media { gap: 6px; }
  .cl-ws .clips-media li { grid-template-columns: minmax(0, 1fr); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-bg); border-color: var(--c-border); border-left: 3px solid var(--cl-video); }
  .cl-ws .clips-media li.is-missing { border-left-color: var(--c-warning); }
  .cl-ws .clips-media-name { font-size: var(--t-small); }
  .cl-ws .clips-media .row { gap: 4px; margin-top: 4px; }

  .cl-stage { display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto auto; justify-items: stretch !important; align-content: stretch !important; gap: 0 !important; padding: 0 !important; background: var(--cl-night); color: var(--cl-night-text); min-height: 0;
    --c-text: var(--cl-night-text); --c-muted: var(--cl-night-muted); --c-border: var(--cl-night-line); --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-primary-hover: #D6D6D6; --c-accent: #FFFFFF; --p: #FFFFFF; --pa: #FFFFFF; --pon: #000000; color-scheme: dark; }
  .cl-monitor-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 8px var(--s-4); border-bottom: 1px solid var(--cl-night-line); }
  .cl-monitor-label { font: var(--fw-overline) var(--t-overline)/1 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--cl-night-muted); display: inline-flex; gap: 8px; align-items: center; }
  .cl-monitor-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #545454; }
  .cl-ws.is-playing .cl-monitor-label::before { background: var(--cl-coral); box-shadow: 0 0 10px var(--cl-coral); }
  .cl-time { font: 600 0.9375rem/1 var(--font-mono); color: #F4F4F4; letter-spacing: .02em; min-width: 0 !important; }
  .cl-canvas { min-height: 0; overflow: hidden; padding: var(--s-3); place-items: center; height: 100%; }
  .cl-canvas canvas { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 60px -20px rgb(0 0 0 / 0.9) !important; }
  .cl-transport { justify-content: center; gap: var(--s-2) !important; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--cl-night-line); }
  .cl-transport .cl-ibtn { color: #E7E7E7; }
  .cl-transport .cl-ibtn:hover { background: rgb(255 255 255 / 0.08); }
  .cl-play { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #FAFAFA; color: #212121; cursor: pointer; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08); transition: transform var(--d-fast) var(--ease-spring); }
  .cl-play:hover { transform: scale(1.06); }
  .cl-ws.is-playing .cl-play { background: var(--cl-coral); color: #151515; }
  .cl-hint { margin: 0; padding: 0 var(--s-4) var(--s-2); text-align: center; color: var(--cl-night-muted); font-size: var(--t-caption); }
  .cl-hint kbd { font: 600 0.625rem/1 var(--font-mono); padding: 2px 4px; border-radius: 3px; border: 1px solid #404040; background: #181818; color: #E7E7E7; }

  .cl-tabs { display: flex; gap: 2px; padding: 3px; margin: 0 0 var(--s-1); border-radius: var(--r-md); background: var(--c-surface2); position: sticky; top: calc(var(--s-3) * -1); z-index: 2; }
  .cl-tab { flex: 1; min-height: 32px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); font: 600 var(--t-small)/1 var(--font-sans); cursor: pointer; }
  .cl-tab[aria-selected='true'] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--e-1); }
  .cl-ws.has-tabs .cl-tabpanel > .cl-pane-h:first-child { display: none; }
  .cl-tabpanel { display: grid; gap: var(--s-3); min-width: 0; }
  .cl-tabpanel[hidden] { display: none; }
  .cl-insp .h-xs { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); margin: var(--s-2) 0 0; }
  .cl-insp [data-inspector] { display: grid; gap: var(--s-3); }
  .cl-export-facts { list-style: none; margin: 0; padding: var(--s-3); display: grid; gap: 6px; border-radius: var(--r-md); background: var(--c-surface2); font-size: var(--t-small); }
  .cl-export-facts li { display: flex; gap: var(--s-2); align-items: center; margin: 0; }
  .cl-export-facts .i { color: var(--c-link); flex: none; }
  .cl-progress progress { width: 100%; accent-color: var(--c-primary); }
  .cl-ws .create-field { font-size: var(--t-caption); color: var(--c-muted); font-weight: 500; }
  .cl-ws .create-field input:not([type=checkbox]):not([type=color]):not([type=range]), .cl-ws .create-field select, .cl-ws .create-field textarea { min-height: 32px; padding: 5px 8px; border-color: var(--c-border-strong); background: var(--c-bg); font-size: var(--t-small); }
  .cl-ws .create-field input[type=range] { accent-color: var(--c-primary); }
  .cl-ws .create-box { background: var(--c-bg); border-radius: var(--r-md); }
  .cl-ws .clips-captions li { background: var(--c-bg); border-radius: var(--r-md); }
  .cl-ws details > summary { cursor: pointer; }

  .cl-timeline { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--c-surface); border-top: 1px solid var(--c-border); }
  .cl-tl-tools { gap: var(--s-2) !important; padding: 6px var(--s-3) !important; background: var(--c-surface); }
  .cl-toggle { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
  .cl-toggle input { accent-color: var(--c-primary); }
  .cl-toggle:has(input:checked) { background: var(--p-soft); border-color: color-mix(in srgb, var(--c-link) 40%, var(--c-border)); }
  .cl-tl-scroll { max-height: none !important; min-height: 0; background: var(--c-surface2); }
  .cl-ws .clips-ruler { background: var(--c-surface); font: 500 0.6875rem/24px var(--font-mono); }
  .cl-ws .clips-tick { color: var(--c-muted); border-left-color: var(--c-border-strong); }
  .cl-ws .clips-track { border-bottom: 1px solid var(--c-border); }
  .cl-ws .clips-track-head { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 6px 0 10px; background: var(--c-surface); border-right: 1px solid var(--c-border); box-shadow: inset 3px 0 0 var(--cl-video); }
  .cl-ws .cl-head-audio { box-shadow: inset 3px 0 0 var(--cl-audio); }
  .cl-ws .cl-head-text { box-shadow: inset 3px 0 0 var(--cl-text); }
  .cl-ws .cl-head-captions { box-shadow: inset 3px 0 0 var(--cl-cap); }
  .cl-track-kind { display: inline-grid; color: var(--c-muted); flex: none; }
  .cl-ws .clips-track-name { flex: 1 1 auto; flex-basis: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-caption); }
  .cl-track-btns { display: inline-flex; gap: 2px; flex: none; }
  .cl-tbtn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-xs); background: var(--c-bg); color: var(--c-muted); font: 700 0.6875rem/1 var(--font-mono); cursor: pointer; }
  .cl-tbtn:hover { color: var(--c-text); }
  .cl-tbtn[aria-pressed='true'] { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
  .cl-ws .clips-lane { background: var(--c-surface2); }
  .cl-ws .clips-item { border-radius: 5px; border: 1px solid rgb(0 0 0 / 0.25); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 40%), var(--cl-video); font-weight: 600; }
  .cl-ws .clips-item-audio { background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 40%), var(--cl-audio); }
  .cl-ws .clips-item-image { background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 40%), var(--cl-image); }
  .cl-ws .clips-item-text { background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 40%), var(--cl-text); }
  .cl-ws .clips-item-caption { background: var(--cl-cap); font-weight: 500; }
  .cl-ws .clips-item.is-missing { background: repeating-linear-gradient(45deg, #737373, #737373 6px, #545454 6px, #545454 12px); }
  .cl-ws .clips-item.is-selected, .cl-ws .clips-item:focus-visible { border-color: #E6E6E6; box-shadow: 0 0 0 2px #D1D1D1, inset 0 1px 0 rgb(255 255 255 / 0.2); z-index: 2; }
  .cl-ws .clips-playhead { background: var(--cl-coral); box-shadow: 0 0 8px rgb(158 158 158 / 0.6); }
  .cl-ws .clips-playhead::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--cl-coral); }

  @media (max-width: 1280px) { .cl-body { grid-template-columns: 240px minmax(0, 1fr) 300px; } .cl-title-meta { display: none; } }
  @media (max-width: 1000px) {
    .cl-ws { height: auto; min-height: 0; display: flex; flex-direction: column; }
    .cl-bar { flex-wrap: wrap; row-gap: 6px; }
    .cl-back-label { display: none; }
    .cl-title { flex: 1 1 140px; } .cl-title .create-name { max-width: none; width: 100%; }
    .cl-ws .create-status { order: 10; flex-basis: 100%; }
    .cl-ws > .cl-body { display: contents; }
    .cl-stage { order: 1; }
    .cl-canvas { height: auto; }
    .cl-ws > .cl-timeline { order: 2; }
    .cl-tl-scroll { max-height: 46vh !important; }
    .cl-ws .clips-panel { order: 3; height: auto; overflow: visible; border: 0 !important; border-top: 1px solid var(--c-border) !important; }
    .cl-ws .clips-panel.cl-bin { order: 4; }
  }

  /* ================= Landing ================= */
  .lp-cl-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 112px) 0; background: radial-gradient(60% 70% at 78% 40%, rgb(255 255 255 / 0.07), transparent 70%), #000; color: #F2F2F2; }
  .lp-cl-bars::before, .lp-cl-bars::after { content: ''; position: absolute; left: 0; right: 0; height: clamp(10px, 2vw, 22px); background: #000; z-index: 1; border-bottom: 1px solid #1C1C1C; }
  .lp-cl-bars::before { top: 0; } .lp-cl-bars::after { bottom: 0; border-bottom: 0; border-top: 1px solid #1C1C1C; }
  .lp-cl-grid { position: relative; z-index: 2; display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1100px) { .lp-cl-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); } }
  .lp-cl-copy { display: grid; gap: var(--s-5); min-width: 0; }
  .lp-cl-copy p, .lp-cl-copy h1 { margin: 0; }
  .lp-cl-id { display: flex; gap: var(--s-3); align-items: center; }
  .lp-cl-name { font: 700 1.125rem/1 var(--font-display); } .lp-cl-name span { font-weight: 500; }
  .lp-cl-copy .h-display { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem); line-height: .95; letter-spacing: -0.045em; text-transform: none; }
  .lp-cl-copy .h-display > span { display: block; } .lp-cl-copy .h-display .is-dim { color: #8C8C8C; }
  .lp-cl-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid #262626; border-bottom: 1px solid #262626; }
  .lp-cl-specs li { margin: 0; padding: 10px var(--s-4) 10px 0; margin-right: var(--s-4); border-right: 1px solid #262626; font: 500 var(--t-caption)/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: #A3A3A3; }
  .lp-cl-specs li:last-child { border-right: 0; }
  .lp-cl-specs .num { color: #FFFFFF; font-weight: 700; }
  .lp-cl-preview { min-width: 0; }
  .lp-cl-preview .preview { background: #0B0B0B; border-color: #262626; box-shadow: 0 40px 120px -30px rgb(255 255 255 / 0.12), var(--e-4); }
  .lp-cl-ed { display: grid; background: #070707; color: #E6E6E6; }
  .lp-cl-monitor { display: grid; gap: 0; border-bottom: 1px solid #1F1F1F; }
  .lp-cl-aspects { display: flex; gap: 2px; justify-content: flex-end; margin: 0; padding: 6px 8px; border: 0; border-bottom: 1px solid #1F1F1F; }
  .lp-cl-aspects label { position: relative; }
  .lp-cl-aspects input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .lp-cl-aspects label > span { display: inline-flex; gap: 6px; align-items: center; min-height: 30px; padding: 0 10px; border-radius: var(--r-sm); font: 600 var(--t-caption)/1 var(--font-mono); color: #8C8C8C; }
  .lp-cl-aspects .cl-aspect rect { fill: rgb(255 255 255 / 0.1); stroke: currentColor; }
  .lp-cl-aspects input:checked + span { background: #F2F2F2; color: #0A0A0A; }
  .lp-cl-aspects input:focus-visible + span { outline: 2px solid #FFFFFF; outline-offset: 2px; }
  .lp-cl-screen { display: grid; place-items: center; height: clamp(200px, 26vw, 330px); padding: var(--s-4); background: radial-gradient(70% 80% at 50% 40%, #151515, #030303); }
  .lp-cl-frame { position: relative; height: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; container-type: size; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 60px -24px #000; transition: aspect-ratio var(--d-slow) var(--ease-out); }
  .lp-cl-monitor:has(input[value='9x16']:checked) .lp-cl-frame { aspect-ratio: 9 / 16; }
  .lp-cl-monitor:has(input[value='1x1']:checked) .lp-cl-frame { aspect-ratio: 1; }
  .lp-cl-monitor:has(input[value='4x5']:checked) .lp-cl-frame { aspect-ratio: 4 / 5; }
  .lp-cl-footage { position: absolute; inset: 0; background: radial-gradient(60% 70% at 65% 35%, rgb(255 255 255 / 0.22), transparent 70%), radial-gradient(40% 50% at 20% 90%, rgb(255 255 255 / 0.10), transparent 70%), repeating-linear-gradient(115deg, #1C1C1C 0 14px, #161616 14px 28px); animation: lp-cl-pan 12s linear infinite alternate; }
  .lp-cl-title { position: absolute; left: 6%; top: 9%; font: 900 clamp(14px, 9cqh, 44px)/1 'Archivo Display', var(--font-display); letter-spacing: .02em; color: #FFFFFF; }
  .lp-cl-caps { position: absolute; left: 6%; right: 6%; bottom: 9%; display: grid; justify-items: center; }
  .lp-cl-caps span { grid-area: 1 / 1; padding: 2px 8px; background: rgb(0 0 0 / 0.72); color: #FFFFFF; font: 600 clamp(10px, 6cqh, 20px)/1.25 'Archivo', var(--font-sans); text-align: center; opacity: 0; animation: lp-cl-cap 12s steps(1, end) infinite; }
  .lp-cl-caps span:nth-child(2) { animation-delay: 4s; } .lp-cl-caps span:nth-child(3) { animation-delay: 8s; }
  @keyframes lp-cl-cap { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes lp-cl-pan { to { background-position: 0 0, 0 0, 120px 0; } }
  .lp-cl-transport { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--s-4); border-top: 1px solid #1F1F1F; }
  .lp-cl-tc { font: 600 var(--t-caption)/1 var(--font-mono); color: #BDBDBD; letter-spacing: .04em; }
  .lp-cl-btns { display: inline-flex; gap: var(--s-3); align-items: center; }
  .lp-cl-btns i { display: inline-grid; place-items: center; color: #D9D9D9; }
  .lp-cl-btns .is-play { width: 34px; height: 34px; border-radius: 50%; background: #F2F2F2; color: #0A0A0A; }
  .lp-cl-tlwrap { padding: var(--s-3); background: #0B0B0B; }
  .lp-cl-tl .hd { fill: #A3A3A3; font: 600 12px var(--font-sans); }
  .lp-cl-heads { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-auto-rows: 30px; row-gap: 6px; }
  .lp-cl-heads li { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 0.6875rem; font-weight: 600; color: #A3A3A3; border-left: 2px solid #3D3D3D; padding-left: 6px; }
  .lp-cl-tl { display: block; width: 100%; height: auto; overflow: visible; }
  .lp-cl-tl .lane { fill: #121212; }
  .lp-cl-tl .tk { stroke: #3D3D3D; stroke-width: 1; } .lp-cl-tl .tl { fill: #7A7A7A; font: 500 9px var(--font-mono); }
  .lp-cl-tl .clip { stroke: rgb(0 0 0 / .6); stroke-width: 1; }
  .lp-cl-tl .k-video { fill: #4A4A4A; } .lp-cl-tl .k-audio { fill: #2B2B2B; } .lp-cl-tl .k-text { fill: #6B6B6B; } .lp-cl-tl .k-cap { fill: #8C8C8C; }
  .lp-cl-tl .cl-lbl { fill: #F2F2F2; font: 600 10px var(--font-sans); pointer-events: none; }
  .lp-cl-tl .wave { fill: none; stroke: #9C9C9C; stroke-width: 1; opacity: .7; }
  .lp-cl-tl .ph { animation: lp-cl-ph 12s linear infinite; }
  .lp-cl-tl .ph line { stroke: #FFFFFF; stroke-width: 2; } .lp-cl-tl .ph path { fill: #FFFFFF; }
  @keyframes lp-cl-ph { from { transform: translateX(120px); } to { transform: translateX(960px); } }
  @media (max-width: 640px) { .lp-cl-aspects { justify-content: center; } .lp-cl-aspects .num { display: none; } }

  .lp-cl-frames { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .lp-cl-frames li { display: grid; gap: 4px; margin: 0; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .lp-cl-fglyph { display: grid; place-items: center; height: 132px; margin-bottom: var(--s-3); border-radius: var(--r-md); background: radial-gradient(80% 80% at 50% 40%, #191919, #050505); }
  .lp-cl-fglyph .cl-aspect rect { fill: rgb(255 255 255 / 0.08); stroke: #E6E6E6; }
  .lp-cl-fname { font-weight: 600; }
  .lp-cl-fname .num, .lp-cl-px { font: 500 var(--t-caption)/1.3 var(--font-mono); color: var(--c-muted); }

  .lp-cl-bay .features { margin-top: var(--s-2); }
  .lp-cl-keys { list-style: none; margin: var(--s-8) 0 0; padding: var(--s-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); border-top: 1px solid #262626; }
  .lp-cl-keys li { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: var(--t-small); color: #BDBDBD; }
  .lp-cl-keys kbd { font: 600 var(--t-caption)/1 var(--font-mono); padding: 5px 8px; border-radius: var(--r-xs); border: 1px solid #3D3D3D; background: #111111; color: #F2F2F2; box-shadow: 0 2px 0 #000; }

  .lp-cl-caps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .lp-cl-caps-grid li { display: grid; gap: var(--s-2); justify-items: start; margin: 0; }
  .lp-cl-capframe { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--c-border); }
  .lp-cl-tpls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .lp-cl-tpls li { display: grid; gap: 6px; align-content: start; margin: 0; }
  .lp-cl-tpl-art { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-4); border-radius: var(--r-md); background: radial-gradient(80% 80% at 50% 40%, #191919, #070707); border: 1px solid var(--c-border); }
  .lp-cl-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: f; }
  .lp-cl-flow li { position: relative; display: grid; gap: var(--s-3); align-content: start; margin: 0; padding: var(--s-5); border-top: 2px solid var(--c-text); background: var(--c-surface); }
  .lp-cl-flow li::before { counter-increment: f; content: '0' counter(f); position: absolute; right: var(--s-4); top: var(--s-4); font: 600 var(--t-caption)/1 var(--font-mono); color: var(--c-muted); }
  .lp-cl-flow h3, .lp-cl-flow p { margin: 0; }
  .lp-cl-flow h3 { margin-bottom: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .lp-cl-footage, .lp-cl-tl .ph { animation: none; }
    .lp-cl-caps span { animation: none; } .lp-cl-caps span:first-child { opacity: 1; }
  }
}