:root { --ink:#171817; --paper:#f4f1e9; --blue:#215bd7; --red:#ee5b45; --line:#d9d4c8; --white:#fff; --muted:#6e706d; --green:#2f8f64 }
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
.skv-wrap { width:min(1180px,calc(100% - 40px)); margin:auto }
.skv-page h1,.skv-page h2,.skv-page h3,.draft-page h1 { letter-spacing:-.045em }
.skv-hero { padding:72px 0 78px; background:radial-gradient(circle at 80% 25%,rgba(33,91,215,.11),transparent 32%),linear-gradient(#f8f6ef,#ede8dd) }
.hero-grid { display:grid; grid-template-columns:.8fr 1.35fr; gap:55px; align-items:center }
.eyebrow,.section-head>span,.library-head>div>span,.limits span,.final-cta span { font-size:12px; letter-spacing:.18em; font-weight:800; color:var(--blue) }
.hero-copy h1 { font-size:clamp(48px,6vw,82px); line-height:.92; margin:18px 0 25px }
.hero-copy h1 em { color:var(--blue); font-style:normal }
.hero-copy>p { font-size:18px; line-height:1.7; color:#555b58 }
.hero-actions { display:flex; gap:12px; margin:28px 0 }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:15px 22px; border-radius:4px; text-decoration:none; font-weight:800 }
.btn.primary { background:var(--ink); color:#fff }
.btn.ghost { border:1px solid #aaa69c; color:var(--ink) }
.hero-note { border-top:1px solid var(--line); padding-top:18px; display:flex; flex-direction:column; gap:4px }
.hero-note span { color:var(--muted); font-size:13px }
.sketchboard { background:#202221; color:#fff; padding:18px; box-shadow:0 30px 70px rgba(32,34,33,.2); transform:rotate(.35deg) }
.board-head,.board-foot { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.16em; color:#b9c0ba; padding:4px 3px 14px }
.board-foot { padding:14px 3px 2px }
.board-panels { display:grid; grid-template-columns:1fr 70px 1fr; min-height:420px }
.draft-pane,.motion-pane { position:relative; margin:0; background:#efede5; overflow:hidden }
.draft-pane img,.motion-pane video { width:100%; height:100%; object-fit:cover; display:block }
.draft-pane figcaption,.motion-pane figcaption {
    position:absolute;
    left:15px;
    bottom:15px;
    background:rgba(20,22,21,.88);
    padding:9px 12px;
    display:flex;
    flex-direction:column;
    font-size:11px
}
.draft-pane figcaption span,.motion-pane figcaption span { color:#b9c0ba }
.trace-layer {
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 13px),#2b5cc0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:32px;
    color:#fff;
    font-size:8px;
    letter-spacing:.08em
}
.arrow { position:absolute; color:var(--red); font-size:40px; font-style:normal; font-weight:900; text-shadow:0 1px #fff }
.a1 { left:14%; top:28% }
.a2 { right:15%; top:56% }
.camera-box { position:absolute; inset:18% 15%; border:2px solid var(--blue) }
.section-head { max-width:720px; margin-bottom:36px }
.section-head h2 { font-size:clamp(35px,4.5vw,58px); line-height:1.02; margin:12px 0 }
.section-head p { font-size:17px; line-height:1.7; color:var(--muted) }
.section-head.compact { margin-bottom:28px }
.skv-build { padding:95px 0; background:#fff }
.build-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line) }
.build-grid article { padding:28px; border-right:1px solid var(--line) }
.build-grid article:last-child { border:0 }
.build-grid article>b { color:var(--blue); font-size:12px }
.build-grid h3 { font-size:20px; margin:28px 0 10px }
.build-grid p { color:var(--muted); line-height:1.55; font-size:14px }
.wide-cta { margin-top:18px; background:var(--ink); color:#fff; text-decoration:none; padding:18px 22px; display:flex; justify-content:space-between; font-weight:800 }
.intent-section { padding:92px 0 }
.intent-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.intent-grid button { background:transparent; border:1px solid #bbb6aa; text-align:left; padding:24px; min-height:150px; cursor:pointer }
.intent-grid button:hover { background:#fff; border-color:var(--blue) }
.intent-grid i { font-style:normal; color:var(--blue); font-size:11px }
.intent-grid b,.intent-grid span { display:block }
.intent-grid b { font-size:21px; margin:28px 0 5px }
.intent-grid span { color:var(--muted) }
.fidelity { background:#1c1e1d; color:#fff; padding:100px 0 }
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:70px }
.fidelity h2 { font-size:clamp(36px,4.5vw,60px); margin:16px 0 }
.fidelity p { color:#b9c0ba; line-height:1.7 }
.fidelity-options { display:grid; gap:8px; margin-top:30px }
.fidelity-options div { border:1px solid #454945; padding:17px }
.fidelity-options div.active { border-color:#5f88e9; background:#253b68 }
.fidelity-options b,.fidelity-options span { display:block }
.fidelity-options span { font-size:13px; color:#bac1bb; margin-top:4px }
.line-lock { background:#f4f1e9; color:var(--ink); padding:30px; align-self:start }
.lock-head { display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:15px }
.lock-head span { font-size:12px; letter-spacing:.15em; font-weight:900 }
.lock-head b { color:var(--green) }
.line-lock ul { list-style:none; padding:0; margin:10px 0 }
.line-lock li { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line) }
.line-lock strong { font-size:11px; color:var(--blue) }
.line-lock p { color:var(--muted); font-size:13px }
.beats { padding:95px 0; background:#fff }
.beat-track { display:grid; grid-template-columns:repeat(4,1fr); position:relative }
.beat-track:before { content:""; position:absolute; left:4%; right:4%; top:16px; height:2px; background:var(--ink) }
.beat-track div { position:relative; padding:0 20px }
.beat-track div:before {
    content:"";
    display:block;
    width:30px;
    height:30px;
    border:3px solid var(--ink);
    background:#fff;
    border-radius:50%;
    margin-bottom:20px;
    position:relative;
    z-index:1
}
.beat-track div:nth-child(3):before { background:var(--red) }
.beat-track i,.beat-track b,.beat-track span { display:block }
.beat-track i { font-size:11px; color:var(--blue); font-style:normal }
.beat-track b { font-size:20px; margin:5px 0 }
.beat-track span { color:var(--muted); font-size:13px }
.feature-cases { padding:100px 0 }
.case-row { display:grid; grid-template-columns:1.25fr .75fr; gap:55px; align-items:center; padding:60px 0; border-top:1px solid var(--line) }
.case-row.reverse .case-media { order:2 }
.case-media { display:grid; grid-template-columns:1fr 1fr; background:#242625; padding:12px; gap:8px; min-height:360px }
.case-media img,.case-media video { width:100%; height:100%; object-fit:cover }
.case-copy small { color:var(--blue); font-weight:800; letter-spacing:.14em }
.case-copy h3 { font-size:36px; margin:14px 0 }
.case-copy p { color:var(--muted); line-height:1.7 }
.case-copy a { color:var(--ink); font-weight:800 }
.library { padding:100px 0; background:#181a19; color:#fff }
.library-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px }
.library-head h2 { font-size:50px; margin:10px 0 0 }
.filters { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end }
.filters button { border:1px solid #454945; background:transparent; color:#ccc; padding:9px 12px; cursor:pointer }
.filters button.active { background:#fff; color:#111 }
.library-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px }
.library-card { background:#272a28; overflow:hidden }
.library-media { aspect-ratio:4/3; position:relative }
.library-media img,.library-media video { width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.library-media video { opacity:0 }
.library-card:hover video,.library-card.playing video { opacity:1 }
.library-info { padding:16px }
.library-info small { color:#7fa4ff }
.library-info b { display:block; font-size:17px; margin:5px 0 }
.library-info span { color:#aeb4af; font-size:12px }
.library-info a { display:block; color:#fff; margin-top:14px; font-weight:700; font-size:13px }
.load-more { display:block; margin:30px auto 0; background:transparent; color:#fff; border:1px solid #666; padding:13px 24px }
.uses { padding:100px 0 }
.use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.use-grid article { background:#fff; padding:26px; border-top:4px solid var(--blue) }
.use-grid b { font-size:20px }
.use-grid p { color:var(--muted); line-height:1.6 }
.limits { background:#295dce; color:#fff; padding:80px 0 }
.limits h2 { font-size:48px; margin:12px 0 }
.limits p { max-width:900px; line-height:1.8; color:#dce6ff }
.limits span { color:#fff }
.faq { padding:95px 0; background:#fff }
.faq details { border-top:1px solid var(--line); padding:20px 0 }
.faq summary { font-weight:800; cursor:pointer }
.faq details p { color:var(--muted); line-height:1.7 }
.final-cta { padding:100px 0; text-align:center }
.final-cta h2 { font-size:clamp(38px,5vw,70px); margin:15px 0 35px }
.draft-page { min-height:100vh; background:#e9e6dc }
.project-strip { background:#191b1a; color:#fff; padding:13px 0 }
.draft-wrap { width:min(1380px,calc(100% - 30px)); margin:auto; display:flex; align-items:center; gap:35px }
.project-strip .back { color:#cbd2cc; text-decoration:none; margin-right:auto }
.project-strip span,.project-strip b { display:block }
.project-strip span { font-size:9px; color:#8f9691; letter-spacing:.14em }
.project-strip b { font-size:12px }
.draft-workspace { width:min(1380px,calc(100% - 30px)); margin:20px auto; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:18px }
.drawing-surface,.creative-notes { background:#fff; border:1px solid #d0ccc0 }
.surface-head { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line) }
.surface-head span,.surface-head b { display:block }
.surface-head span { font-size:10px; letter-spacing:.13em; color:var(--blue); font-weight:800 }
.surface-tabs button { border:0; background:none; padding:8px 12px }
.surface-tabs button.active { background:var(--ink); color:#fff }
.canvas-zone {
    min-height:620px;
    position:relative;
    background:repeating-linear-gradient(0deg,transparent 0 29px,rgba(22,24,23,.035) 30px),#f5f3ec;
    padding:25px;
    display:flex;
    align-items:center;
    justify-content:center
}
.sketch-upload { width:100%; height:100%; min-height:550px; border:1px dashed #92968f; display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer }
.sketch-upload input { display:none }
.upload-empty { text-align:center }
.pencil-icon { display:block; font-size:50px; color:var(--blue) }
.upload-empty b,.upload-empty small { display:block }
.upload-empty b { font-size:22px; margin:10px }
.upload-empty small { color:var(--muted) }
.core-reference-list.has-images { position:absolute; inset:0 }
.core-reference-item,.core-reference-item img { width:100%; height:100%; object-fit:contain }
.core-reference-number { display:none }
.sketch-upload:has(.has-images) .upload-empty { display:none }
.clear-upload { position:absolute; left:35px; bottom:35px; z-index:4; border:1px solid #aaa; background:#fff; padding:8px }
.upload-count { position:absolute; right:35px; bottom:35px }
.markup-overlay { position:absolute; left:35px; top:35px; display:flex; gap:7px }
.markup-overlay button { border:1px solid #777; background:rgba(255,255,255,.9); padding:8px 10px; font-size:11px }
.result-card { position:absolute; inset:25px; background:#111; z-index:8 }
.result-card[hidden] { display:none }
.result-box,.result-item,.result-img,.result-img video { width:100%; height:100% }
.result-img video { object-fit:contain }
.result-actions { position:absolute; right:16px; bottom:16px }
.result-actions a { background:#fff; color:#111; padding:10px 16px; text-decoration:none }
.loading-gen { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:12px }
.spinner { width:42px; height:42px; border:3px solid #555; border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin {
    to { transform:rotate(360deg) }
}
.surface-note { padding:13px 18px; display:flex; gap:12px; border-top:1px solid var(--line); font-size:12px }
.surface-note span { color:var(--blue); font-weight:800 }
.surface-note p { margin:0; color:var(--muted) }
.creative-notes { padding:22px; align-self:start }
.notes-head span { font-size:10px; color:var(--blue); letter-spacing:.15em; font-weight:800 }
.notes-head h1 { font-size:34px; margin:6px 0 22px }
.creative-notes label { display:block; font-size:12px; font-weight:800; margin:13px 0 }
.creative-notes select,.creative-notes textarea { width:100%; margin-top:7px; border:1px solid #c8c4b8; background:#f8f7f2; padding:11px; font:inherit }
.creative-notes small { display:block; color:var(--muted); font-weight:400; margin-top:5px }
.triple,.settings-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.settings-row { grid-template-columns:1fr 1fr }
.lock-box { border:1px solid var(--line); padding:14px; margin:14px 0 }
.lock-box>div { display:flex; justify-content:space-between; margin-bottom:6px }
.lock-box label { margin:8px 0; font-weight:500 }
.audio-toggle { display:flex!important; align-items:center; gap:8px }
.audio-toggle input { width:auto }
.credit-status { background:#edf2ff; padding:10px; font-size:12px }
.generate-btn { width:100%; border:0; background:var(--blue); color:#fff; padding:15px; font-weight:900; margin-top:12px; cursor:pointer }
.status { font-size:12px; color:#a53e32; margin-top:10px; line-height:1.5 }
.story-beat { width:min(1380px,calc(100% - 30px)); margin:0 auto 30px; background:#fff; border:1px solid #d0ccc0; display:grid; grid-template-columns:220px 1fr }
.beat-title { padding:20px; border-right:1px solid var(--line) }
.beat-title span,.beat-title b { display:block }
.beat-title span { font-size:10px; letter-spacing:.14em; color:var(--blue); font-weight:800 }
.beat-line { display:grid; grid-template-columns:repeat(4,1fr) }
.beat-line button { background:none; border:0; border-right:1px solid var(--line); text-align:left; padding:18px }
.beat-line button.active { background:#eef3ff }
.beat-line i,.beat-line b,.beat-line span { display:block }
.beat-line i { font-style:normal; color:var(--red); font-size:10px }
.beat-line span { font-size:11px; color:var(--muted) }
@media(max-width:900px) {
    .hero-grid,.split,.case-row,.draft-workspace { grid-template-columns:1fr }
    .board-panels { grid-template-columns:1fr }
    .trace-layer { height:55px; flex-direction:row }
    .build-grid,.library-grid,.use-grid { grid-template-columns:repeat(2,1fr) }
    .intent-grid { grid-template-columns:repeat(2,1fr) }
    .case-row.reverse .case-media { order:0 }
    .draft-workspace { width:calc(100% - 20px) }
    .canvas-zone { min-height:480px }
    .story-beat { width:calc(100% - 20px); grid-template-columns:1fr }
    .beat-title { border-right:0; border-bottom:1px solid var(--line) }
}
@media(max-width:600px) {
    .skv-wrap { width:min(100% - 24px,1180px) }
    .skv-hero { padding-top:45px }
    .hero-copy h1 { font-size:51px }
    .hero-actions { flex-direction:column }
    .build-grid,.library-grid,.use-grid,.intent-grid { grid-template-columns:1fr }
    .build-grid article { border-right:0; border-bottom:1px solid var(--line) }
    .board-panels { min-height:620px }
    .draft-pane,.motion-pane { min-height:280px }
    .library-head { align-items:start; flex-direction:column; gap:20px }
    .library-head h2 { font-size:40px }
    .case-media { min-height:240px }
    .case-copy h3 { font-size:29px }
    .beat-track { grid-template-columns:1fr; gap:25px }
    .beat-track:before { display:none }
    .project-strip .draft-wrap { overflow:auto }
    .project-strip .back { min-width:180px }
    .triple { grid-template-columns:1fr }
    .story-beat { display:none }
    .markup-overlay { left:15px; top:15px; flex-wrap:wrap }
    .canvas-zone { padding:10px; min-height:390px }
    .sketch-upload { min-height:360px }
    .creative-notes { padding:16px }
}


/* ==============================
   Sketch to Video compact refresh
   ============================== */
.skv-page{overflow:hidden}
.skv-hero{padding:52px 0 56px}
.hero-grid{gap:36px}
.hero-copy h1{margin:14px 0 18px}
.hero-copy>p{max-width:560px;font-size:16px;line-height:1.6}
.hero-actions{margin:22px 0 18px}
.hero-note{padding-top:12px}
.sketchboard{padding:12px;box-shadow:0 18px 42px rgba(32,34,33,.18)}
.board-panels{min-height:360px}
.section-head{margin-bottom:24px}
.section-head h2{font-size:clamp(30px,4vw,48px);margin:9px 0}
.intent-section,.feature-cases,.library,.faq,.final-cta{padding:64px 0}
.intent-grid{gap:8px}
.intent-grid button{min-height:112px;padding:18px;border:1px solid var(--ink);border-radius:0;background:transparent}
.intent-grid button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.intent-grid button:hover span,.intent-grid button:hover i{color:#d8d8d2}
.intent-grid b{font-size:17px;margin:18px 0 4px}
.intent-grid span{font-size:12px}
.case-row{gap:36px;padding:34px 0}
.case-media{min-height:290px;padding:8px;border:1px solid #111;border-radius:0}
.case-copy h3{font-size:30px;margin:10px 0}
.case-copy p{margin:0 0 12px;font-size:14px;line-height:1.55}
.library{padding-top:68px;padding-bottom:72px}
.library-head{margin-bottom:20px}
.library-head h2{font-size:42px}
.library-grid{gap:10px}
.library-card{border:1px solid #3f4240;border-radius:0}
.library-info{padding:12px}
.library-info b{font-size:15px}
.library-info a{margin-top:10px}
.filters button,.load-more{border-radius:0}
.faq details{padding:15px 0}
.final-cta{padding:68px 0}
.final-cta h2{font-size:clamp(34px,4.6vw,56px);margin:12px 0 24px}
.btn{border-radius:0}

/* Current-page generator: match the original drafting-board visual language */
.t67-vscene-studio{
  width:min(1180px,calc(100% - 40px));
  margin:42px auto 18px!important;
  padding:20px!important;
  border:1px solid #171817!important;
  border-radius:0!important;
  background:#f7f5ee!important;
  box-shadow:none!important;
  color:#171817!important;
}
.t67-vscene-head{margin-bottom:14px!important;padding-bottom:12px!important;border-bottom:1px solid #171817!important}
.t67-vscene-head small{color:var(--blue)!important;letter-spacing:.16em!important}
.t67-vscene-head h2{margin:3px 0 0!important;font-size:28px!important;letter-spacing:-.04em!important}
.t67-vscene-head p,.t67-vscene-badge{display:none!important}
.t67-vscene-grid{gap:12px!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important}
.t67-vscene-upload,.t67-vscene-controls{
  padding:14px!important;
  border:1px solid #171817!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.t67-vscene-upload-label,.t67-vscene-prompt-head label,.t67-vscene-field span{font-size:10px!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:800!important}
.t67-vscene-drop{min-height:270px!important;border:1px dashed #5e625e!important;border-radius:0!important;background:#f3f1ea!important}
.t67-vscene-plus{width:42px!important;height:42px!important;border:1px solid #171817!important;border-radius:0!important;background:#fff!important;color:#171817!important;font-size:24px!important}
.t67-vscene-empty{gap:8px!important}
.t67-vscene-empty span{display:none!important}
.t67-vscene-upload-foot{margin-top:8px!important}
.t67-vscene-clear,.t67-vscene-sample{border:1px solid #171817!important;border-radius:0!important;background:#fff!important;color:#171817!important;min-height:28px!important}
.t67-vscene-prompt{min-height:118px!important;padding:10px!important;border:1px solid #171817!important;border-radius:0!important;background:#f8f7f2!important;box-shadow:none!important}
.t67-vscene-row{gap:6px!important;margin-top:8px!important}
.t67-vscene-field select{height:34px!important;min-height:34px!important;padding:0 24px 0 8px!important;border:1px solid #171817!important;border-radius:0!important;background:#fff!important;font-size:11px!important;box-shadow:none!important}
.t67-vscene-model-info{margin:8px 0!important;padding:7px 9px!important;border-left:2px solid #171817!important;border-radius:0!important;background:#ece9e0!important;font-size:11px!important}
.t67-vscene-generate{min-height:42px!important;margin-top:8px!important;border:1px solid #171817!important;border-radius:0!important;background:#171817!important;color:#fff!important;box-shadow:none!important}
.t67-vscene-credit,.t67-vscene-status{margin-top:7px!important;font-size:11px!important}
.t67-vscene-result{margin-top:12px!important}
.t67-vscene-result-stage{border:1px solid #171817!important;border-radius:0!important;background:#111!important}
.t67-vscene-download{border-radius:0!important}

@media(max-width:900px){
  .t67-vscene-grid{grid-template-columns:1fr!important}
  .board-panels{min-height:320px}
}
@media(max-width:600px){
  .skv-hero{padding:34px 0 38px}
  .hero-copy h1{font-size:46px}
  .intent-section,.feature-cases,.library,.faq,.final-cta{padding:48px 0}
  .t67-vscene-studio{width:calc(100% - 24px);margin:28px auto 12px!important;padding:12px!important}
  .t67-vscene-upload,.t67-vscene-controls{padding:10px!important}
  .t67-vscene-drop{min-height:220px!important}
  .t67-vscene-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .case-row{padding:24px 0}
}


/* compact3: requested layout refinements */
/* Four core controls only: Model / Duration / Ratio / Motion */
#t67SceneSpecific:empty{display:none!important}
.t67-vscene-controls>.t67-vscene-row:first-of-type{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Scene Intent: six across on desktop, two across on mobile */
.intent-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:7px}
.intent-grid button{min-width:0;min-height:104px;padding:14px 12px}
.intent-grid b{font-size:14px;margin:14px 0 3px;line-height:1.2}
.intent-grid span{font-size:10px;line-height:1.35}

/* Hero sketch + motion preview stays side by side even on small screens */
@media(max-width:900px){
  .board-panels{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:260px!important}
  .trace-layer{display:none!important}
  .draft-pane,.motion-pane{min-width:0!important;min-height:260px!important}
}
@media(max-width:600px){
  .board-panels{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:190px!important}
  .draft-pane,.motion-pane{min-height:190px!important}
  .draft-pane figcaption,.motion-pane figcaption{left:7px!important;right:7px!important;bottom:7px!important;padding:7px!important}
  .draft-pane figcaption b,.motion-pane figcaption b{font-size:10px!important}
  .draft-pane figcaption span,.motion-pane figcaption span{font-size:8px!important}
  .intent-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px}
  .intent-grid button{min-height:92px;padding:12px}
  .intent-grid b{font-size:13px;margin:11px 0 2px}
  .intent-grid span{font-size:10px}
  .t67-vscene-controls>.t67-vscene-row:first-of-type{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ==============================
   Sketch to Video light/dark theme v4
   Keeps the square black-line drafting aesthetic in both modes.
   ============================== */
body{
  --skv-bg:#f4f1e9;
  --skv-surface:#ffffff;
  --skv-surface-soft:#f7f5ee;
  --skv-surface-alt:#efede5;
  --skv-text:#171817;
  --skv-muted:#6e706d;
  --skv-line:#171817;
  --skv-line-soft:#d9d4c8;
  --skv-input:#ffffff;
  --skv-input-soft:#f8f7f2;
  --skv-blue:#215bd7;
  --skv-red:#ee5b45;
  --skv-dark:#181a19;
  --skv-dark-card:#272a28;
}

/* Explicit light mode so old/global theme declarations do not muddy this page. */
body:not(.dark) .skv-page{background:var(--skv-bg);color:var(--skv-text)}
body:not(.dark) .skv-hero{background:radial-gradient(circle at 80% 25%,rgba(33,91,215,.10),transparent 32%),linear-gradient(#f8f6ef,#ede8dd)}
body:not(.dark) .intent-section,
body:not(.dark) .feature-cases,
body:not(.dark) .final-cta{background:var(--skv-bg)}
body:not(.dark) .faq{background:#fff}

/* Dark palette */
body.dark{
  --skv-bg:#0d0f0e;
  --skv-surface:#151817;
  --skv-surface-soft:#121513;
  --skv-surface-alt:#1b1e1c;
  --skv-text:#f1f3ef;
  --skv-muted:#9ca39d;
  --skv-line:#747b75;
  --skv-line-soft:#303530;
  --skv-input:#111411;
  --skv-input-soft:#181b18;
  --skv-blue:#82a7ff;
  --skv-red:#ff7967;
  --skv-dark:#090b0a;
  --skv-dark-card:#171a18;
}

body.dark .skv-page{
  background:var(--skv-bg)!important;
  color:var(--skv-text)!important;
}
body.dark .skv-hero{
  background:
    radial-gradient(circle at 82% 18%,rgba(72,113,214,.16),transparent 31%),
    linear-gradient(180deg,#121512 0%,#0d0f0e 100%)!important;
  color:var(--skv-text)!important;
  border-bottom:1px solid var(--skv-line-soft);
}
body.dark .hero-copy h1,
body.dark .section-head h2,
body.dark .case-copy h3,
body.dark .final-cta h2,
body.dark .faq summary,
body.dark .intent-grid b{color:var(--skv-text)!important}
body.dark .hero-copy>p,
body.dark .hero-note span,
body.dark .section-head p,
body.dark .case-copy p,
body.dark .intent-grid span,
body.dark .faq details p{color:var(--skv-muted)!important}
body.dark .eyebrow,
body.dark .section-head>span,
body.dark .library-head>div>span,
body.dark .case-copy small,
body.dark .intent-grid i{color:var(--skv-blue)!important}
body.dark .hero-note,
body.dark .case-row,
body.dark .faq details{border-color:var(--skv-line-soft)!important}

/* Hero board remains intentionally dark, but its light panes are toned down. */
body.dark .sketchboard{
  background:#080a09!important;
  border:1px solid #3a403b;
  box-shadow:0 20px 46px rgba(0,0,0,.38)!important;
}
body.dark .draft-pane,
body.dark .motion-pane{background:#171a18!important}
body.dark .draft-pane figcaption,
body.dark .motion-pane figcaption{background:rgba(5,7,6,.86)!important;color:#f1f3ef!important}
body.dark .draft-pane figcaption span,
body.dark .motion-pane figcaption span,
body.dark .board-head,
body.dark .board-foot{color:#a9b0aa!important}

/* Buttons */
body.dark .btn.primary{background:#f1f3ef!important;color:#111311!important;border:1px solid #f1f3ef!important}
body.dark .btn.ghost{background:transparent!important;color:#e9ece8!important;border-color:#59605a!important}
body.dark .btn.ghost:hover{background:#1c211d!important;border-color:#8ea0ff!important;color:#fff!important}

/* Scene intent */
body.dark .intent-section,
body.dark .feature-cases,
body.dark .final-cta{background:var(--skv-bg)!important}
body.dark .intent-grid button{
  color:var(--skv-text)!important;
  background:#101310!important;
  border-color:#555c56!important;
}
body.dark .intent-grid button:hover,
body.dark .intent-grid button.active{
  background:#edf0eb!important;
  color:#121412!important;
  border-color:#edf0eb!important;
}
body.dark .intent-grid button:hover b,
body.dark .intent-grid button.active b{color:#121412!important}
body.dark .intent-grid button:hover span,
body.dark .intent-grid button.active span{color:#59605b!important}
body.dark .intent-grid button:hover i,
body.dark .intent-grid button.active i{color:#315fc9!important}

/* Feature cases */
body.dark .case-media{background:#090b0a!important;border-color:#656c66!important}
body.dark .case-copy a{color:#dce5ff!important}
body.dark .case-copy a:hover{color:#fff!important}

/* Motion library is intentionally the darkest portfolio section. */
body.dark .library{background:#070908!important;color:#f3f5f2!important;border-top:1px solid #252925;border-bottom:1px solid #252925}
body.dark .library-card{background:#141715!important;border-color:#353a36!important}
body.dark .library-info b{color:#f3f5f2!important}
body.dark .library-info span{color:#9aa19b!important}
body.dark .library-info a{color:#e7ebff!important}
body.dark .filters button,
body.dark .load-more{background:#0e110f!important;color:#cbd0cb!important;border-color:#4a504b!important}
body.dark .filters button:hover,
body.dark .filters button.active,
body.dark .load-more:hover{background:#f0f2ee!important;color:#111311!important;border-color:#f0f2ee!important}

/* FAQ */
body.dark .faq{background:#111411!important;color:var(--skv-text)!important;border-top:1px solid var(--skv-line-soft);border-bottom:1px solid var(--skv-line-soft)}

/* Current-page generator */
body.dark .t67-vscene-studio{
  background:#101310!important;
  color:#f0f2ef!important;
  border-color:#666d67!important;
}
body.dark .t67-vscene-head{border-color:#555c56!important}
body.dark .t67-vscene-head h2{color:#f3f5f2!important}
body.dark .t67-vscene-head small,
body.dark .t67-vscene-upload-label,
body.dark .t67-vscene-prompt-head label,
body.dark .t67-vscene-field span{color:#a9bfff!important}
body.dark .t67-vscene-upload,
body.dark .t67-vscene-controls{
  background:#151817!important;
  color:#eef1ed!important;
  border-color:#5c635d!important;
}
body.dark .t67-vscene-drop{
  background:#0d100e!important;
  color:#e8ebe7!important;
  border-color:#686f69!important;
}
body.dark .t67-vscene-drop:hover,
body.dark .t67-vscene-drop.is-dragging{background:#111611!important;border-color:#8aa7ff!important}
body.dark .t67-vscene-plus{
  background:#171b18!important;
  color:#f1f3ef!important;
  border-color:#747b75!important;
}
body.dark .t67-vscene-empty strong{color:#f0f2ef!important}
body.dark .t67-vscene-empty span,
body.dark .t67-vscene-upload-foot,
body.dark .t67-vscene-credit,
body.dark .t67-vscene-status{color:#9da49e!important}
body.dark .t67-vscene-clear,
body.dark .t67-vscene-sample{
  background:#101310!important;
  color:#e9ece8!important;
  border-color:#5d645e!important;
}
body.dark .t67-vscene-clear:hover,
body.dark .t67-vscene-sample:hover{background:#ecefeb!important;color:#111311!important;border-color:#ecefeb!important}
body.dark .t67-vscene-prompt,
body.dark .t67-vscene-field select{
  background:#0e110f!important;
  color:#f0f2ef!important;
  border-color:#5d645e!important;
}
body.dark .t67-vscene-prompt::placeholder{color:#707871!important}
body.dark .t67-vscene-field select option{background:#101310;color:#eef1ed}
body.dark .t67-vscene-model-info{
  background:#1a1e1a!important;
  color:#b5bcb6!important;
  border-left-color:#8ba7ff!important;
}
body.dark .t67-vscene-generate{
  background:#eef1ed!important;
  color:#101210!important;
  border-color:#eef1ed!important;
}
body.dark .t67-vscene-generate:hover{background:#fff!important;border-color:#fff!important}
body.dark .t67-vscene-generate:disabled{background:#555b56!important;color:#aeb4af!important;border-color:#555b56!important}
body.dark .t67-vscene-result-stage{background:#050706!important;border-color:#666d67!important}
body.dark .t67-vscene-download{background:#f0f2ef!important;color:#111311!important;border:1px solid #fff!important}

/* Keep native controls readable in both modes. */
body.dark .skv-page input,
body.dark .skv-page textarea,
body.dark .skv-page select{color-scheme:dark}
body:not(.dark) .skv-page input,
body:not(.dark) .skv-page textarea,
body:not(.dark) .skv-page select{color-scheme:light}

/* Footer, if injected/kept on this page. */
body.dark .skv-page + .footer,
body.dark .footer{background:#090b0a!important;color:#a3aaa4!important;border-top-color:#292e2a!important}
body.dark .footer a{color:#c8cec9!important}
body.dark .footer a:hover{color:#fff!important}