.theme-storyboard {
  --sb-black: #10100f;
  --sb-paper: #f4efdf;
  --sb-yellow: #f3d64e;
  --sb-red: #ec4e38;
  --sb-blue: #2d5cff;
  color: var(--sb-black);
  background: var(--sb-black);
}

.theme-storyboard .storyboard-page {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--sb-black);
}

.theme-storyboard .sb-topbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: 10px clamp(18px, 3vw, 54px);
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(16,16,15,.92);
  color: #fff;
  backdrop-filter: blur(18px);
}

.theme-storyboard .sb-brand,
.theme-storyboard .sb-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}
.theme-storyboard .sb-brand { justify-self: start; text-transform: uppercase; letter-spacing: -.02em; }
.theme-storyboard .sb-brand i { color: var(--accent); font-size: 21px; }
.theme-storyboard .sb-cut { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.theme-storyboard .sb-download { justify-self: end; min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; font-size: 11px; text-transform: uppercase; }
.theme-storyboard .sb-download:hover { border-color: var(--accent); background: var(--accent); color: var(--sb-black); }

.theme-storyboard .sb-reel {
  display: flex;
  width: 100%;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.theme-storyboard .sb-reel::-webkit-scrollbar { display: none; }
.theme-storyboard .sb-scene {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100dvh;
  padding: clamp(96px, 11vh, 130px) clamp(34px, 6vw, 110px) clamp(108px, 14vh, 150px);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--sb-paper);
}
.theme-storyboard .sb-scene:nth-child(3n) { background: var(--sb-yellow); }
.theme-storyboard .sb-scene:nth-child(4n) { background: var(--sb-red); }
.theme-storyboard .sb-scene::before,
.theme-storyboard .sb-scene::after {
  position: absolute;
  z-index: 0;
  top: 78px;
  bottom: 82px;
  width: 18px;
  background: repeating-linear-gradient(to bottom,var(--sb-black) 0 13px,transparent 13px 24px);
  content: "";
  opacity: .75;
}
.theme-storyboard .sb-scene::before { left: 8px; }
.theme-storyboard .sb-scene::after { right: 8px; }

.theme-storyboard .sb-opening { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); align-items: center; gap: clamp(44px,7vw,130px); background: var(--sb-yellow); }
.theme-storyboard .sb-opening::after { background: repeating-linear-gradient(to bottom,#fff 0 13px,transparent 13px 24px); }
.theme-storyboard .sb-frame-code { position: absolute; top: 86px; left: clamp(34px,6vw,110px); font: 800 10px/1 "Courier New",monospace; letter-spacing: .12em; }
.theme-storyboard .sb-opening-copy,.theme-storyboard .sb-portrait,.theme-storyboard .sb-scene-head,.theme-storyboard .sb-scroll-area,.theme-storyboard .sb-script-sheet,.theme-storyboard .sb-contact-layout { position: relative; z-index: 1; }
.theme-storyboard .sb-kicker { display: inline-flex; padding: 8px 12px; background: var(--sb-black); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; transform: rotate(-2deg); }
.theme-storyboard .sb-opening h1 { max-width: 950px; margin: 24px 0 16px; font-family: Impact,"Arial Black",sans-serif; font-size: clamp(76px,10.5vw,190px); font-weight: 900; letter-spacing: -.065em; line-height: .74; text-transform: uppercase; }
.theme-storyboard .sb-headline { max-width: 760px; margin: 0; font-size: clamp(22px,2.4vw,42px); font-weight: 800; line-height: 1.08; }
.theme-storyboard .sb-intro { max-width: 700px; margin: 20px 0 0; font-size: 15px; line-height: 1.65; }
.theme-storyboard .sb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.theme-storyboard .sb-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 2px solid var(--sb-black); background: var(--sb-black); color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.theme-storyboard .sb-actions .is-quiet { background: transparent; color: var(--sb-black); }
.theme-storyboard .sb-portrait { justify-self: center; width: min(470px,90%); margin: 0; padding: 28px 28px 72px; border: 4px solid var(--sb-black); background: #fff; box-shadow: 18px 18px 0 var(--sb-red); transform: rotate(2.5deg); }
.theme-storyboard .sb-portrait>img,.theme-storyboard .sb-monogram { display: grid; place-items: center; width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #d9d9d3; filter: grayscale(1) contrast(1.08); font-size: 160px; font-weight: 900; }
.theme-storyboard .sb-portrait figcaption { position: absolute; right: 25px; bottom: 20px; left: 25px; display: flex; justify-content: space-between; gap: 18px; font: 800 11px/1.2 "Courier New",monospace; text-transform: uppercase; }
.theme-storyboard .sb-portrait figcaption b { color: var(--sb-red); }
.theme-storyboard .sb-sprockets { position: absolute; z-index: 2; top: 8px; bottom: 54px; left: 8px; width: 10px; background: repeating-linear-gradient(to bottom,var(--sb-black) 0 8px,transparent 8px 16px); }
.theme-storyboard .sb-scroll-cue { position: absolute; right: 36px; bottom: 100px; display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.theme-storyboard .sb-scene-head { display: flex; align-items: flex-start; gap: clamp(20px,3vw,48px); margin-bottom: clamp(28px,5vh,58px); }
.theme-storyboard .sb-scene-head>div { min-width: 0; }
.theme-storyboard .sb-scene-head>span { display: grid; place-items: center; flex: 0 0 72px; width: 72px; aspect-ratio: 1; border: 3px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 900; }
.theme-storyboard .sb-scene-head small { display: block; margin-bottom: 8px; font: 800 10px/1 "Courier New",monospace; letter-spacing: .13em; text-transform: uppercase; }
.theme-storyboard .sb-scene-head h2 { margin: 0; font-family: Impact,"Arial Black",sans-serif; font-size: clamp(58px,8vw,132px); font-weight: 900; letter-spacing: -.045em; line-height: .78; text-transform: uppercase; }
.theme-storyboard .sb-scroll-area { max-height: calc(100dvh - 300px); overflow: auto; scrollbar-color: currentColor transparent; scrollbar-width: thin; }

.theme-storyboard .sb-script { background: #f5f0e5; }
.theme-storyboard .sb-script-sheet { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: clamp(44px,8vw,140px); max-width: 1500px; margin: 0 auto; padding: clamp(30px,4vw,62px); border-left: 4px solid var(--sb-red); background: repeating-linear-gradient(to bottom,transparent 0 31px,rgba(16,16,15,.1) 31px 32px); box-shadow: 12px 14px 0 rgba(16,16,15,.12); }
.theme-storyboard .sb-script-sheet>p { margin: 0; font: 700 clamp(22px,2.3vw,40px)/1.55 "Courier New",monospace; }
.theme-storyboard .sb-script-sheet dl { display: grid; align-content: start; gap: 18px; margin: 0; }
.theme-storyboard .sb-script-sheet dl div { padding-bottom: 14px; border-bottom: 2px solid var(--sb-black); }
.theme-storyboard .sb-script-sheet dt { font: 900 9px/1 "Courier New",monospace; letter-spacing: .15em; text-transform: uppercase; }
.theme-storyboard .sb-script-sheet dd { margin: 6px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.theme-storyboard .sb-script-sheet a { color: inherit; }

.theme-storyboard .sb-takes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.theme-storyboard .sb-takes article { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px 22px; padding: 24px; border: 3px solid var(--sb-black); background: rgba(255,255,255,.68); }
.theme-storyboard .sb-take { grid-row: span 2; display: grid; place-items: center; align-self: stretch; min-height: 90px; background: var(--sb-black); color: #fff; font: 900 10px/1 "Courier New",monospace; writing-mode: vertical-rl; }
.theme-storyboard .sb-takes time { font: 900 10px/1 "Courier New",monospace; text-transform: uppercase; }
.theme-storyboard .sb-takes h3 { margin: 7px 0 0; font-size: clamp(22px,2vw,32px); line-height: 1.05; }
.theme-storyboard .sb-takes p { margin: 8px 0 0; }
.theme-storyboard .sb-takes ul { margin: 14px 0 0; padding-left: 18px; line-height: 1.55; }

.theme-storyboard .sb-storyboards { background: var(--sb-red); color: #fff; }
.theme-storyboard .sb-project-grid { display: grid; grid-template-columns: repeat(3,minmax(260px,1fr)); gap: 22px; }
.theme-storyboard .sb-project-grid article { border: 4px solid var(--sb-black); background: var(--sb-paper); color: var(--sb-black); box-shadow: 10px 10px 0 var(--sb-black); }
.theme-storyboard .sb-project-visual { position: relative; display: grid; place-items: center; min-height: 190px; overflow: hidden; border-bottom: 4px solid var(--sb-black); background: repeating-linear-gradient(135deg,var(--sb-yellow) 0 18px,#fff 18px 36px); }
.theme-storyboard .sb-project-visual span { position: absolute; top: 12px; left: 14px; font: 900 12px/1 "Courier New",monospace; }
.theme-storyboard .sb-project-visual i { font-size: 64px; }
.theme-storyboard .sb-project-caption { padding: 22px; }
.theme-storyboard .sb-project-caption>div { display: flex; justify-content: space-between; gap: 16px; font: 800 9px/1.2 "Courier New",monospace; text-transform: uppercase; }
.theme-storyboard .sb-project-caption h3 { margin: 20px 0 8px; font-size: clamp(24px,2.5vw,42px); line-height: .98; }
.theme-storyboard .sb-project-caption ul { padding-left: 18px; line-height: 1.5; }
.theme-storyboard .sb-project-caption>a { display: inline-flex; gap: 8px; margin-top: 12px; color: inherit; font-weight: 900; }

.theme-storyboard .sb-credit-list { max-width: 1300px; margin: 0 auto; border-top: 4px solid var(--sb-black); }
.theme-storyboard .sb-credit-list article { display: grid; grid-template-columns: 70px 180px minmax(0,1fr); align-items: center; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--sb-black); }
.theme-storyboard .sb-credit-list article>span { font: 900 26px/1 "Courier New",monospace; color: var(--sb-red); }
.theme-storyboard .sb-credit-list time { font: 800 11px/1 "Courier New",monospace; }
.theme-storyboard .sb-credit-list h3 { margin: 0; font-size: clamp(24px,3vw,48px); line-height: 1; }
.theme-storyboard .sb-credit-list p { margin: 5px 0 0; }

.theme-storyboard .sb-cast { background: var(--sb-blue); color: #fff; }
.theme-storyboard .sb-cast-grid { display: grid; grid-template-columns: repeat(4,minmax(190px,1fr)); gap: 14px; }
.theme-storyboard .sb-cast-grid article { position: relative; min-height: 220px; padding: 26px; border: 2px solid rgba(255,255,255,.65); background: rgba(16,16,15,.16); }
.theme-storyboard .sb-cast-grid article>span { display: block; font: 900 10px/1 "Courier New",monospace; }
.theme-storyboard .sb-cast-grid h3 { margin: 70px 0 10px; font-size: clamp(24px,2.4vw,38px); line-height: .95; overflow-wrap: anywhere; }
.theme-storyboard .sb-cast-grid p { margin: 0; line-height: 1.45; }

.theme-storyboard .sb-award-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; max-width: 1300px; }
.theme-storyboard .sb-award-list article { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 22px; padding: 28px; border: 3px solid var(--sb-black); background: rgba(255,255,255,.55); }
.theme-storyboard .sb-award-list i { display: grid; place-items: center; width: 74px; aspect-ratio: 1; border-radius: 50%; background: var(--sb-black); color: var(--sb-yellow); font-size: 28px; }
.theme-storyboard .sb-award-list time { font: 900 10px/1 "Courier New",monospace; }
.theme-storyboard .sb-award-list h3 { margin: 10px 0 4px; font-size: clamp(24px,2.4vw,36px); }
.theme-storyboard .sb-award-list p { margin: 0; }

.theme-storyboard .sb-language-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 1200px; }
.theme-storyboard .sb-language-list article { padding: 28px; border: 3px solid var(--sb-black); background: #fff; }
.theme-storyboard .sb-language-list article>div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.theme-storyboard .sb-language-list h3 { margin: 0; font-size: 32px; }
.theme-storyboard .sb-language-list article>div:last-child { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 26px; }
.theme-storyboard .sb-language-list i { height: 12px; background: #d7d2c7; }
.theme-storyboard .sb-language-list i.is-on { background: var(--sb-red); }

.theme-storyboard .sb-scene.sb-contact { background: var(--sb-yellow); color: var(--sb-black); }
.theme-storyboard .sb-contact::before,.theme-storyboard .sb-contact::after { background: repeating-linear-gradient(to bottom,var(--sb-yellow) 0 13px,transparent 13px 24px); }
.theme-storyboard .sb-contact-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: clamp(42px,7vw,120px); align-items: start; }
.theme-storyboard .sb-contact-copy h3 { max-width: 700px; margin: 0; color: var(--sb-black); font-size: clamp(34px,4.4vw,76px); line-height: .98; }
.theme-storyboard .sb-contact-copy>p { max-width: 590px; line-height: 1.7; }
.theme-storyboard .sb-contact-links { display: grid; gap: 10px; margin-top: 26px; }
.theme-storyboard .sb-contact-links>a,.theme-storyboard .sb-contact-links>span { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.theme-storyboard .sb-contact-links i { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid rgba(16,16,15,.45); color: var(--sb-black); }
.theme-storyboard .sb-socials { display: flex; gap: 8px; margin-top: 24px; }
.theme-storyboard .sb-socials a { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgba(16,16,15,.45); color: var(--sb-black); text-decoration: none; }
.theme-storyboard .sb-contact-form { min-width: 0; padding: 28px; border: 3px solid var(--sb-yellow); border-radius: 0; background: var(--sb-paper); color: var(--sb-black); box-shadow: 12px 12px 0 var(--sb-red); }
.theme-storyboard .sb-contact-form input,.theme-storyboard .sb-contact-form textarea { border-radius: 0; background: #fff; }
.theme-storyboard .sb-contact-form button { border-radius: 0; background: var(--sb-red); }

.theme-storyboard .sb-transport {
  position: fixed;
  z-index: 35;
  right: clamp(12px,2vw,30px);
  bottom: 18px;
  left: clamp(12px,2vw,30px);
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(16,16,15,.94);
  color: #fff;
  backdrop-filter: blur(18px);
}
.theme-storyboard .sb-transport>button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: var(--accent); color: var(--sb-black); cursor: pointer; }
.theme-storyboard .sb-scene-links { display: flex; min-width: 0; max-width: 100%; align-items: center; justify-content: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.theme-storyboard .sb-scene-links::-webkit-scrollbar { display: none; }
.theme-storyboard .sb-scene-links a { display: grid; place-items: center; flex: 0 0 auto; min-width: 42px; min-height: 42px; padding: 0 10px; color: #fff; font: 800 9px/1 "Courier New",monospace; text-decoration: none; text-transform: uppercase; }
.theme-storyboard .sb-scene-links a span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-storyboard .sb-scene-links a.is-active { background: #fff; color: var(--sb-black); }
.theme-storyboard .sb-progress { position: absolute; right: 7px; bottom: 3px; left: 7px; height: 2px; background: rgba(255,255,255,.16); }
.theme-storyboard .sb-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .18s linear; }
.theme-storyboard :is(a,button,input,textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 1100px) {
  .theme-storyboard .sb-opening { grid-template-columns: minmax(0,1fr) minmax(280px,.72fr); }
  .theme-storyboard .sb-opening h1 { font-size: clamp(70px,9vw,112px); }
  .theme-storyboard .sb-takes,.theme-storyboard .sb-award-list { grid-template-columns: 1fr; }
  .theme-storyboard .sb-project-grid { grid-template-columns: repeat(2,minmax(260px,1fr)); }
  .theme-storyboard .sb-cast-grid { grid-template-columns: repeat(3,minmax(180px,1fr)); }
  .theme-storyboard .sb-contact-layout { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  .theme-storyboard .storyboard-page { height: auto; overflow: visible; }
  .theme-storyboard .sb-topbar { grid-template-columns: 1fr auto; min-height: 58px; }
  .theme-storyboard .sb-cut { display: none; }
  .theme-storyboard .sb-download { min-width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .theme-storyboard .sb-download i { font-size: 14px; }
  .theme-storyboard .sb-reel { display: block; height: auto; overflow: visible; scroll-snap-type: none; }
  .theme-storyboard .sb-scene { width: 100%; height: auto; min-height: 100dvh; padding: 92px 25px 96px; overflow: visible; }
  .theme-storyboard .sb-scene::before,.theme-storyboard .sb-scene::after { display: none; }
  .theme-storyboard .sb-opening { display: grid; grid-template-columns: 1fr; gap: 42px; }
  .theme-storyboard .sb-frame-code { top: 73px; left: 25px; }
  .theme-storyboard .sb-opening h1 { font-size: clamp(64px,21vw,94px); }
  .theme-storyboard .sb-headline { font-size: 24px; }
  .theme-storyboard .sb-portrait { width: min(350px,90%); box-shadow: 10px 10px 0 var(--sb-red); }
  .theme-storyboard .sb-scroll-cue { display: none; }
  .theme-storyboard .sb-scene-head { gap: 14px; margin-bottom: 30px; }
  .theme-storyboard .sb-scene-head>span { flex-basis: 48px; width: 48px; font-size: 10px; }
  .theme-storyboard .sb-scene-head h2 { overflow-wrap: anywhere; font-size: clamp(34px,10vw,48px); line-height: .86; }
  .theme-storyboard .sb-scroll-area { max-height: none; overflow: visible; }
  .theme-storyboard .sb-script-sheet { grid-template-columns: 1fr; gap: 30px; padding: 25px; }
  .theme-storyboard .sb-script-sheet>p { font-size: 20px; }
  .theme-storyboard .sb-takes,.theme-storyboard .sb-project-grid,.theme-storyboard .sb-cast-grid,.theme-storyboard .sb-award-list,.theme-storyboard .sb-language-list { grid-template-columns: 1fr; }
  .theme-storyboard .sb-takes article { grid-template-columns: 54px minmax(0,1fr); padding: 18px; }
  .theme-storyboard .sb-project-grid article { box-shadow: 7px 7px 0 var(--sb-black); }
  .theme-storyboard .sb-credit-list article { grid-template-columns: 44px minmax(0,1fr); gap: 14px; }
  .theme-storyboard .sb-credit-list time { grid-column: 2; }
  .theme-storyboard .sb-contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .theme-storyboard .pc-form-row { grid-template-columns: 1fr; }
  .theme-storyboard .sb-contact-form { padding: 22px; box-shadow: 8px 8px 0 var(--sb-red); }
  .theme-storyboard .sb-transport { right: 8px; bottom: 8px; left: 8px; grid-template-columns: 44px minmax(0,1fr) 44px; min-height: 56px; }
  .theme-storyboard .sb-transport>button { width: 44px; height: 44px; }
  .theme-storyboard .sb-scene-links { justify-content: flex-start; }
  .theme-storyboard .sb-scene-links a { min-width: 38px; min-height: 38px; padding: 0 8px; }
  .theme-storyboard .sb-scene-links a span { max-width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-storyboard .sb-reel { scroll-behavior: auto; }
  .theme-storyboard .sb-progress span { transition: none; }
}

.theme-storyboard.motion-kapali .sb-reel { scroll-behavior: auto; }
.theme-storyboard.design-card-preview .sb-topbar,.theme-storyboard.design-card-preview .sb-transport { position: absolute; }
.theme-storyboard.design-card-preview .sb-reel { height: 100%; }
.theme-storyboard.design-card-preview .sb-scene { height: 100%; min-height: 100%; }