/* Appearance only: the existing two choices and their handlers remain unchanged. */
#projectCreationModeChoice {
  --mode-edge:color-mix(in srgb,var(--sia-sidebar-active-line) 20%,var(--sia-line));
  container-type:inline-size;
  background:var(--sia-sidebar-bg) !important;
  border-color:var(--mode-edge) !important;
  border-radius:24px;
  box-shadow:0 12px 32px rgba(18,49,74,.07) !important;
}
#projectCreationModeChoice .creation-mode-hero { padding:32px 32px 24px; }
#projectCreationModeChoice .creation-mode-icon { background:var(--sia-sidebar-active); border-color:var(--sia-sidebar-active-line); color:var(--sia-sidebar-accent); box-shadow:var(--sia-sidebar-glow); }
#projectCreationModeChoice .creation-mode-eyebrow { color:var(--sia-sidebar-accent); font-weight:800; }
#projectCreationModeChoice .creation-mode-hero h2 { color:var(--sia-heading); font-size:clamp(1.65rem,3vw,2rem); }
#projectCreationModeChoice .creation-mode-hero p { color:var(--sia-muted); }
#projectCreationModeChoice .creation-mode-grid { gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:8px 24px 24px; }
#projectCreationModeChoice .creation-mode-card { background:linear-gradient(145deg,color-mix(in srgb,var(--sia-teal) 4%,var(--sia-surface)),var(--sia-surface)) !important; border-color:var(--mode-edge) !important; border-radius:18px; box-shadow:none; min-width:0; padding:20px; transform:none; }
#projectCreationModeChoice .creation-mode-card:hover { border-color:color-mix(in srgb,var(--sia-sidebar-active-line) 65%,var(--sia-line)) !important; box-shadow:var(--sia-sidebar-glow); transform:none; }
#projectCreationModeChoice .creation-mode-card.is-selected { background:var(--sia-sidebar-active) !important; border-color:var(--sia-sidebar-active-line) !important; box-shadow:var(--sia-sidebar-glow); transform:none; }
#projectCreationModeChoice .creation-mode-card:focus-visible { outline:2px solid var(--sia-teal); outline-offset:3px; }
#projectCreationModeChoice .creation-mode-card.is-selected::after { background:var(--sia-teal-dark); border-color:var(--sia-surface); }
#projectCreationModeChoice .creation-mode-card h3 { color:var(--sia-heading); font-size:1.2rem; line-height:1.4; }
#projectCreationModeChoice .creation-mode-card p { color:var(--sia-muted); font-size:.9rem; line-height:1.6; }
#projectCreationModeChoice .creation-mode-features { color:var(--sia-text); font-size:.82rem; font-weight:600; line-height:1.5; }
#projectCreationModeChoice .creation-mode-features li::before { color:var(--sia-sidebar-accent); }
#projectCreationModeChoice .creation-mode-demo { background:var(--sia-sidebar-bg) !important; border-color:var(--mode-edge); }
#projectCreationModeChoice .creation-mode-demo-badge { background:var(--sia-surface); border-color:var(--mode-edge); color:var(--sia-sidebar-accent); }
#projectCreationModeChoice :where(.creation-mode-ai-node > span:first-child,.creation-mode-editor-asset) { background:var(--sia-sidebar-active); border-color:var(--mode-edge); color:var(--sia-sidebar-accent); box-shadow:none; }
#projectCreationModeChoice :is(.creation-mode-ai-node,.creation-mode-editor-arrow) { color:var(--sia-sidebar-accent); }
#projectCreationModeChoice .creation-mode-ai-rail { background:var(--sia-line-strong); }
#projectCreationModeChoice .creation-mode-editor-timeline { background:var(--sia-surface); border-color:var(--mode-edge); }
#projectCreationModeChoice .creation-mode-trial-badge { background:var(--sia-teal-soft); border-color:var(--mode-edge); color:var(--sia-teal-dark); }
#projectCreationModeChoice .creation-mode-trial-badge.is-empty { background:var(--sia-surface); color:var(--sia-muted); }
#projectCreationModeChoice .creation-mode-card-footer { flex-wrap:wrap; }
#projectCreationModeChoice .creation-mode-cta { background:color-mix(in srgb,var(--sia-teal) 7%,var(--sia-surface)); border:1px solid var(--mode-edge); border-radius:12px; color:var(--sia-sidebar-accent); font-size:.86rem; font-weight:750; justify-content:center; min-height:44px; padding:10px 16px; width:100%; }
#projectCreationModeChoice .is-selected .creation-mode-cta { background:var(--sia-sidebar-active); border-color:var(--sia-sidebar-active-line); }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #projectPager { border-color:var(--sia-line); }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #projectPager .button { border-radius:14px; min-height:48px; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #previousProjectStep { background:var(--sia-sidebar-bg); border-color:var(--sia-line-strong); color:var(--sia-text); }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #nextProjectStep { background:linear-gradient(110deg,#0b7178,#0c666f); border-color:var(--sia-teal-dark); box-shadow:var(--sia-sidebar-glow); color:white; }
html[data-theme="dark"] body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #nextProjectStep { background:linear-gradient(110deg,#235b62,#24636b); border-color:var(--sia-sidebar-active-line); }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #projectPager button:disabled { cursor:not-allowed; opacity:.5; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) #projectPager button:focus-visible { outline:2px solid var(--sia-teal); outline-offset:3px; }
@container (max-width:680px) { #projectCreationModeChoice .creation-mode-grid { grid-template-columns:1fr; } }
@media(max-width:900px) {
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .brand { box-sizing:border-box; padding-right:60px !important; width:100%; }
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .brand-name { font-size:clamp(1.3rem,6.65vw,1.62rem) !important; }
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .floating-theme-toggle { bottom:auto; right:16px; top:17px; z-index:41; }
}
@media(max-width:600px) {
  #projectCreationModeChoice .creation-mode-hero { padding:24px 16px; }
  #projectCreationModeChoice .creation-mode-grid { gap:16px; padding:0 16px 16px; }
  #projectCreationModeChoice .creation-mode-card { padding:16px; }
}
@media(prefers-reduced-motion:reduce) { #projectCreationModeChoice .creation-mode-card { transition:none; } }

/* Reference-led selector finish; original animation names/timings remain in projects.html. */
#projectCreationModeChoice { position:relative; isolation:isolate; border:1px solid color-mix(in srgb,var(--sia-teal) 55%,var(--sia-line)) !important; border-radius:28px; background:radial-gradient(ellipse at 45% 0,color-mix(in srgb,var(--sia-teal) 10%,transparent),transparent 58%),var(--sia-sidebar-bg) !important; }
#projectCreationModeChoice .creation-mode-ambient { position:absolute; inset:0 0 auto; height:320px; z-index:-1; color:var(--sia-sidebar-accent); opacity:.3; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(0deg,transparent,#000 35%,#000 80%,transparent); mask-composite:intersect; }
#projectCreationModeChoice .creation-mode-ambient svg { width:100%; height:100%; }
#projectCreationModeChoice .creation-mode-hero { padding:28px 32px 24px; }
#projectCreationModeChoice .creation-mode-icon { width:72px; height:72px; border-radius:20px; margin-bottom:20px; background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--sia-sidebar-accent) 22%,transparent),transparent 70%),var(--sia-sidebar-active); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sia-sidebar-accent) 35%,transparent),0 0 28px color-mix(in srgb,var(--sia-teal) 18%,transparent); }
#projectCreationModeChoice .creation-mode-icon svg { width:34px; height:34px; }
#projectCreationModeChoice .creation-mode-eyebrow { display:none; }
#projectCreationModeChoice .creation-mode-hero h2 { font-size:clamp(24px,2.7vw,32px); font-weight:800; }
#projectCreationModeChoice .creation-mode-hero p { font-size:17px; max-width:760px; }
#projectCreationModeChoice .creation-mode-grid { gap:24px; padding:0 24px 24px; }
#projectCreationModeChoice .creation-mode-card {
  --mode-accent:var(--sia-teal); --mode-ink:var(--sia-sidebar-accent);
  padding:24px; border-radius:24px; border:1px solid color-mix(in srgb,var(--mode-accent) 65%,var(--sia-line)) !important;
  background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--mode-accent) 11%,transparent),transparent 66%),var(--sia-sidebar-bg) !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mode-accent) 22%,transparent),0 12px 28px rgba(18,49,74,.06);
}
#projectCreationModeChoice #chooseManualVideoMode { --mode-accent:#41a7ff; --mode-ink:#176bb5; --teal:var(--mode-accent); --teal-dark:var(--mode-ink); }
html[data-theme="dark"] #projectCreationModeChoice #chooseManualVideoMode { --mode-ink:#a2ceff; }
#projectCreationModeChoice .creation-mode-card:hover { border-color:var(--mode-accent) !important; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mode-accent) 38%,transparent),0 0 24px color-mix(in srgb,var(--mode-accent) 15%,transparent); }
#projectCreationModeChoice .creation-mode-card.is-selected { border-color:var(--mode-accent) !important; background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--mode-accent) 20%,transparent),transparent 70%),var(--sia-sidebar-bg) !important; box-shadow:0 0 0 2px color-mix(in srgb,var(--mode-accent) 25%,transparent),0 0 28px color-mix(in srgb,var(--mode-accent) 15%,transparent); }
#projectCreationModeChoice .creation-mode-card::after { content:""; position:absolute; right:24px; top:24px; width:24px; height:24px; border-radius:50%; border:1px solid var(--sia-muted); background:var(--sia-surface); box-shadow:inset 0 0 0 3px var(--sia-surface-soft); }
#projectCreationModeChoice .creation-mode-card.is-selected::after { content:"\2713"; width:24px; height:24px; right:24px; top:24px; background:var(--mode-ink); color:var(--sia-surface); border-color:var(--mode-accent); box-shadow:none; }
#projectCreationModeChoice .creation-mode-card:focus-visible { outline-color:var(--mode-ink); }
#projectCreationModeChoice .creation-mode-demo { height:208px; padding:0; border:0; border-radius:0; overflow:visible; background:transparent !important; }
#projectCreationModeChoice .creation-mode-demo-badge { position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; max-width:calc(100% - 40px); padding:8px 14px; border-radius:999px; border:1px solid color-mix(in srgb,var(--mode-accent) 65%,var(--sia-line)); background:color-mix(in srgb,var(--mode-accent) 10%,var(--sia-surface)); color:var(--mode-ink); font-size:11px; line-height:1.4; }
#projectCreationModeChoice .creation-mode-demo-badge svg { width:18px; height:18px; flex:none; }
#projectCreationModeChoice .creation-mode-ai-flow { left:0; right:0; bottom:24px; gap:16px; }
#projectCreationModeChoice .creation-mode-ai-node { font-size:12px; gap:12px; color:var(--sia-text); }
#projectCreationModeChoice .creation-mode-ai-node > span:first-child { width:58px; height:58px; border-radius:16px; border:1px solid color-mix(in srgb,var(--mode-accent) 50%,var(--sia-line)); color:var(--mode-ink); background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--mode-accent) 20%,transparent),transparent 85%),var(--sia-surface-soft); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--mode-accent) 25%,transparent); }
#projectCreationModeChoice .creation-mode-ai-node svg { width:28px; height:28px; }
#projectCreationModeChoice .creation-mode-ai-node:nth-child(-n+3)::after { content:"›"; position:absolute; right:-12px; top:12px; color:var(--mode-ink); font:400 28px/1 sans-serif; }
#projectCreationModeChoice .creation-mode-ai-node:nth-child(4) > span:first-child { background:var(--sia-sidebar-active); box-shadow:0 0 20px color-mix(in srgb,var(--mode-accent) 20%,transparent); }
#projectCreationModeChoice .creation-mode-ai-rail { left:10%; right:10%; bottom:72px; opacity:.3; }
#projectCreationModeChoice .creation-mode-editor-assets { top:70px; left:12px; right:12px; gap:24px; }
#projectCreationModeChoice .creation-mode-editor-asset { width:70px; height:54px; border-radius:12px; border:1px solid color-mix(in srgb,var(--mode-accent) 60%,var(--sia-line)); color:var(--mode-ink); background:linear-gradient(145deg,color-mix(in srgb,var(--mode-accent) 22%,var(--sia-surface)),var(--sia-surface-soft)); box-shadow:0 8px 20px color-mix(in srgb,var(--mode-accent) 8%,transparent); }
#projectCreationModeChoice .creation-mode-editor-asset svg { width:28px; height:28px; }
#projectCreationModeChoice .creation-mode-editor-asset:nth-child(1) { rotate:-8deg; }
#projectCreationModeChoice .creation-mode-editor-asset:nth-child(2) { rotate:-5deg; }
#projectCreationModeChoice .creation-mode-editor-asset:nth-child(3) { rotate:7deg; }
#projectCreationModeChoice .creation-mode-editor-arrow { color:var(--mode-ink); }
#projectCreationModeChoice .creation-mode-editor-timeline { height:48px; left:0; right:0; bottom:12px; padding:5px; gap:6px; border-radius:12px; border:1px solid color-mix(in srgb,var(--mode-accent) 45%,var(--sia-line)); background:var(--sia-surface-soft); }
#projectCreationModeChoice .creation-mode-editor-timeline > span { color:var(--mode-ink); overflow:hidden; background:color-mix(in srgb,var(--mode-accent) 15%,var(--sia-surface)); }
#projectCreationModeChoice .creation-mode-editor-timeline > span:nth-child(2) { color:var(--sia-sidebar-accent); background:var(--sia-sidebar-active); }
#projectCreationModeChoice .creation-mode-editor-timeline svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
#projectCreationModeChoice .creation-mode-editor-playhead { top:142px; bottom:6px; background:var(--mode-ink); }
#projectCreationModeChoice .creation-mode-editor-playhead::before { background:var(--mode-ink); width:9px; height:9px; left:-3.5px; }
#projectCreationModeChoice .creation-mode-card h3 { font-size:24px; font-weight:800; line-height:1.3; margin:12px 0; }
#projectCreationModeChoice .creation-mode-card p { font-size:16px; line-height:1.6; }
#projectCreationModeChoice .creation-mode-features { font-size:14px; gap:12px; margin:24px 0; }
#projectCreationModeChoice .creation-mode-features li { gap:12px; align-items:center; }
#projectCreationModeChoice .creation-mode-features li::before { display:flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; border:1px solid color-mix(in srgb,var(--sia-teal) 65%,var(--sia-line)); color:var(--sia-sidebar-accent); background:var(--sia-sidebar-active); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sia-teal) 20%,transparent); }
#projectCreationModeChoice .creation-mode-cta { min-height:52px; padding:12px 16px; border-radius:16px; border:1px solid var(--mode-accent); color:var(--mode-ink); background:linear-gradient(120deg,color-mix(in srgb,var(--mode-accent) 16%,var(--sia-surface)),color-mix(in srgb,var(--mode-accent) 6%,var(--sia-surface))); gap:12px; font-size:15px; font-weight:800; }
#projectCreationModeChoice .creation-mode-cta::after { content:"→"; font-size:22px; font-weight:500; line-height:1; }
#projectCreationModeChoice #chooseAiVideoMode .creation-mode-cta { background:var(--sia-sidebar-accent); color:#fff; box-shadow:0 4px 18px color-mix(in srgb,var(--sia-teal) 20%,transparent); }
html[data-theme="dark"] #projectCreationModeChoice #chooseAiVideoMode .creation-mode-cta { background:linear-gradient(110deg,var(--sia-sidebar-accent),var(--sia-teal)); color:#073337; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar { position:relative; isolation:isolate; min-height:144px; align-items:center; padding:12px 0 24px; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar .title-row { gap:24px; min-width:0; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar .title-icon { width:80px; height:80px; flex:0 0 80px; border-radius:22px; background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--sia-sidebar-accent) 22%,transparent),transparent 70%),var(--sia-sidebar-active) !important; border:1px solid var(--sia-sidebar-active-line); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sia-sidebar-accent) 20%,transparent),var(--sia-sidebar-glow); }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar .title-icon svg { width:36px; height:36px; }
body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .video-library-header-art { display:block; position:absolute; inset:0 0 auto auto; width:70%; height:100%; max-width:780px; z-index:-1; color:var(--sia-sidebar-accent); background:radial-gradient(ellipse at 75% 35%,color-mix(in srgb,var(--sia-teal) 14%,transparent),transparent 65%); pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 24%,#000 58%,transparent),linear-gradient(0deg,transparent,#000 25%,#000 80%,transparent); mask-composite:intersect; }
@container (max-width:680px) {
  #projectCreationModeChoice .creation-mode-grid { gap:20px; }
  #projectCreationModeChoice .creation-mode-hero { padding:24px 20px; }
  #projectCreationModeChoice .creation-mode-card { padding:20px; }
}
@container (max-width:360px) {
  #projectCreationModeChoice .creation-mode-ai-node > span:first-child { width:42px; height:46px; border-radius:12px; }
  #projectCreationModeChoice .creation-mode-ai-node svg { width:23px; height:23px; }
  #projectCreationModeChoice .creation-mode-ai-node { font-size:10px; }
  #projectCreationModeChoice .creation-mode-ai-flow { gap:10px; }
  #projectCreationModeChoice .creation-mode-ai-node:nth-child(-n+3)::after { right:-9px; top:10px; font-size:24px; }
  #projectCreationModeChoice .creation-mode-editor-assets { gap:12px; left:0; right:0; }
  #projectCreationModeChoice .creation-mode-editor-asset { width:54px; height:50px; }
  #projectCreationModeChoice .creation-mode-card h3 { font-size:22px; }
}
@media(max-width:600px) {
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar { min-height:0; padding:12px 0 24px; }
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar .title-row { align-items:flex-start; gap:16px; }
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .topbar .title-icon { width:64px; height:64px; flex-basis:64px; border-radius:18px; }
  body:has(#projectCreationModeSlot:not([hidden]) > #projectCreationModeChoice:not([hidden])) .video-library-header-art { width:100%; opacity:.55; }
}

/* Keep the moving rail and chevrons on the icon centreline at each breakpoint. */
#projectCreationModeChoice .creation-mode-ai-flow { --mode-icon-centre:29px; }
#projectCreationModeChoice .creation-mode-ai-flow > .creation-mode-ai-rail { top:var(--mode-icon-centre); bottom:auto; left:12.5%; right:12.5%; z-index:0; }
#projectCreationModeChoice .creation-mode-ai-node:nth-child(-n+3)::after { top:var(--mode-icon-centre); transform:translateY(-50%); }
#projectCreationModeChoice .creation-mode-ai-node:nth-child(4)::after { content:none; }
#projectCreationModeChoice .creation-mode-features li[hidden] { display:none; }
@container (max-width:360px) { #projectCreationModeChoice .creation-mode-ai-flow { --mode-icon-centre:23px; } }