/* Video storyboard builder landing page (tools/video-storyboard-builder only) */
.vsb-demo{display:grid;gap:0}
.vsb-head{display:grid;gap:4px;padding:18px 20px 14px;border-bottom:1px solid #d7e1ee}
.vsb-kicker{margin:0;color:#3159b8;font-size:.78rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.mt-public .vsb-demo .vsb-title{margin:0;color:#071b35;font-size:1.08rem;line-height:1.35;letter-spacing:-.01em}
.vsb-sheet{margin:0;padding:16px 20px 12px;background:#eef2f7}
.vsb-paper{padding:12px 12px 10px;border:1px solid #cdd7e4;border-radius:6px;background:#fff;box-shadow:0 6px 18px rgba(9,34,70,.08)}
.vsb-paper-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid #e3e9f1;color:#33405c;font:600 .74rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.vsb-paper-bar b{color:#071b35;font-weight:800}
.vsb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;margin:0;padding:0;list-style:none}
.vsb-grid li{display:grid;gap:3px;min-width:0;margin:0;padding:0}
.vsb-frame{display:block;aspect-ratio:16/9;border-radius:2px;background-color:#8a9bb3;box-shadow:inset 0 0 0 1px rgba(7,27,53,.12)}
.vsb-ts{color:#33405c;font:600 .7rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center;font-variant-numeric:tabular-nums}
.vsb-sheet figcaption{margin:10px 0 0;color:#52647b;font-size:.8rem;line-height:1.5}

/* Scene 1: coast, sun moving (00:00 to 00:10) */
.vsb-f1{background:radial-gradient(circle at 72% 30%,#fff1bf 0 7%,transparent 8%),linear-gradient(180deg,#9fd0f2 0 52%,#3d8cc2 52% 68%,#ecd6a4 68%)}
.vsb-f2{background:radial-gradient(circle at 62% 34%,#fff1bf 0 7%,transparent 8%),linear-gradient(180deg,#a7d3f0 0 52%,#3a86bd 52% 68%,#ecd6a4 68%)}
.vsb-f3{background:radial-gradient(circle at 26% 78%,#c0572e 0 5%,transparent 6%),radial-gradient(circle at 52% 38%,#ffe9a8 0 7%,transparent 8%),linear-gradient(180deg,#b3d8ef 0 52%,#3780b6 52% 68%,#e6cc96 68%)}
/* Scene 2: kitchen interior (00:15 to 00:25) */
.vsb-f4{background:linear-gradient(180deg,transparent 0 68%,#6f4c34 68%),linear-gradient(90deg,#d8b58f 0 34%,#f5e3c3 34% 62%,#d8b58f 62%)}
.vsb-f5{background:radial-gradient(ellipse at 50% 64%,#f2f2f0 0 12%,transparent 13%),linear-gradient(180deg,transparent 0 68%,#6f4c34 68%),linear-gradient(90deg,#d4ae86 0 34%,#f5e3c3 34% 62%,#d4ae86 62%)}
.vsb-f6{background:radial-gradient(ellipse at 42% 62%,#f2f2f0 0 16%,transparent 17%),radial-gradient(circle at 70% 48%,#c2452d 0 7%,transparent 8%),linear-gradient(180deg,transparent 0 70%,#6a4830 70%),linear-gradient(90deg,#cfa67c 0 30%,#f2dcb6 30% 58%,#cfa67c 58%)}
/* Scene 3: hills in the evening (00:30 to 00:40) */
.vsb-f7{background:linear-gradient(162deg,transparent 0 58%,#3f6f4c 58%),linear-gradient(18deg,#2e5a3b 0 34%,transparent 34%),linear-gradient(180deg,#f6c38b 0 40%,#f0a97a 70%)}
.vsb-f8{background:radial-gradient(circle at 30% 52%,#ffd9a0 0 8%,transparent 9%),linear-gradient(162deg,transparent 0 58%,#3a6646 58%),linear-gradient(18deg,#2a5337 0 34%,transparent 34%),linear-gradient(180deg,#f2b27e 0 40%,#e5906c 70%)}
.vsb-f9{background:linear-gradient(162deg,transparent 0 58%,#2f5439 58%),linear-gradient(18deg,#22452d 0 34%,transparent 34%),linear-gradient(180deg,#b9798a 0 36%,#6d5a86 80%)}
/* Scene 4: city at night (00:45 to 00:55) */
.vsb-f10{background:radial-gradient(circle,#ffd878 0 26%,transparent 30%) 0 70%/10% 16% repeat-x,radial-gradient(circle,#f5c65e 0 26%,transparent 30%) 5% 88%/10% 16% repeat-x,linear-gradient(180deg,transparent 0 52%,#141c35 52%),linear-gradient(180deg,#2b3563 0,#1c2448 100%)}
.vsb-f11{background:radial-gradient(circle,#ffd878 0 26%,transparent 30%) 20% 78%/8% 14% no-repeat,radial-gradient(circle,#ffd878 0 26%,transparent 30%) 30% 92%/8% 14% no-repeat,radial-gradient(circle,#f5c65e 0 26%,transparent 30%) 70% 70%/8% 14% no-repeat,radial-gradient(circle,#ffd878 0 26%,transparent 30%) 78% 88%/8% 14% no-repeat,linear-gradient(90deg,transparent 0 16%,#10172d 16% 38%,transparent 38% 62%,#0f162b 62% 86%,transparent 86%) 0 100%/100% 64% no-repeat,linear-gradient(180deg,transparent 0 60%,#161f3a 60%),linear-gradient(180deg,#232c55 0,#1a2144 100%)}
.vsb-f12{background:radial-gradient(circle at 80% 24%,#f4f1e4 0 6%,transparent 7%),linear-gradient(90deg,transparent 0 18%,#0d1428 18% 38%,transparent 38% 62%,#0c1326 62% 84%,transparent 84%) 0 100%/100% 62% no-repeat,linear-gradient(180deg,transparent 0 58%,#131b33 58%),linear-gradient(180deg,#171e3b 0 100%)}

.vsb-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:14px 20px 18px;list-style:none}
.vsb-files li{display:flex;align-items:center;gap:9px;min-width:0;margin:0;padding:0;color:#33405c;font-size:.86rem;line-height:1.3}
.vsb-badge{display:inline-grid;place-items:center;flex:0 0 auto;min-width:44px;height:26px;padding:0 6px;border-radius:5px;color:#fff;font:800 .72rem/1 Manrope,system-ui,sans-serif;letter-spacing:.05em}
.vsb-pdf{background:#b42318}
.vsb-jpg{background:#8a4b00}
.vsb-html{background:#1548c7}
.vsb-csv{background:#087a4d}

@media(max-width:430px){
  .vsb-head{padding:16px 14px 12px}
  .vsb-sheet{padding:12px 10px 10px}
  .vsb-paper{padding:8px 7px 7px}
  .vsb-grid{gap:6px 4px}
  .vsb-ts{font-size:.64rem}
  .vsb-files{padding:12px 14px 16px;gap:8px 6px}
  .vsb-files li{font-size:.8rem}
  .vsb-badge{min-width:40px}
}