/* Scoped public-page refresh. Does not affect Studio or the standalone demo. */
body.gallery-first {background:#fff;color:#18221e}
.gallery-first header {max-width:1320px;border-bottom:1px solid #e5e9e6;padding:20px 32px}
.gallery-first .intro {background:#fff!important;padding:0!important;overflow:visible}
.gallery-first .hero-copy {max-width:900px!important;margin:0 auto!important;padding:26px 24px 12px!important;text-align:center}
.gallery-first .hero-copy h1 {font-size:64px!important;line-height:1.05!important;letter-spacing:0!important;margin:10px 0 16px!important}
.gallery-first .hero-copy .eyebrow {font-size:12px;color:#456050}
.gallery-first .hero-copy .lead {font-size:34px!important;line-height:1.18!important;max-width:760px!important;margin:0 auto 16px!important;text-wrap:balance}
.gallery-first .hero-copy>p:not(.eyebrow):not(.lead) {max-width:620px;margin-inline:auto}
.gallery-first .hero-copy .actions {justify-content:center;margin:22px 0 12px!important;gap:12px}
.gallery-first .hero-copy .demo-entry-hint {font-size:13px}
.gallery-first :is(h1,h2,h3,p,a,select) {letter-spacing:0}
.gallery-first .hero-stage,.gallery-first .process-nav {display:none!important}
.gallery-first #clip-gallery {padding:28px 32px 48px!important;width:100%;max-width:1320px;margin:0 auto;border:0;background:#fff}
.gallery-heading {display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.gallery-heading h2 {font-size:28px;line-height:1.2;margin:8px 0 0;max-width:800px}
.gallery-heading .eyebrow {margin:0;color:#476453}
.gallery-editor-link {font-size:14px;font-weight:650;white-space:nowrap;border-bottom:1px solid #204d37;padding-bottom:4px}
.gallery-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1040px;margin-inline:auto}
.gallery-layout {display:grid;grid-template-rows:auto auto auto auto;align-content:start}
.gallery-layout h3 {font-size:20px!important;margin:0 0 6px!important}
.gallery-layout-detail {font-size:13px;line-height:1.5;color:#627066;margin:0 0 16px;min-height:39px}
.gallery-captions {margin-top:40px;padding-top:30px;border-top:1px solid #e2e7e3}
.gallery-captions>h3 {font-size:24px;margin:0 0 24px}
.gallery-captions>.gallery-item {display:grid;grid-template-columns:240px minmax(0,300px);grid-template-rows:auto auto auto 1fr;gap:12px 32px;max-width:572px;margin-inline:auto}
.gallery-captions .gallery-frame {grid-row:1/5}
.gallery-captions .gallery-meta {align-self:end;margin:0}
.gallery-captions .gallery-style-label {margin:0;align-self:end}
.gallery-captions select {align-self:start}
.gallery-item {min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none}
.gallery-frame {position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:8px;background:#101715;isolation:isolate}
.gallery-frame video {display:block;width:100%;height:100%;object-fit:contain;background:#101715}
.gallery-poster {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.gallery-poster[hidden] {display:none}
.gallery-frame.landscape {aspect-ratio:16/9}
.gallery-meta {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#5d6862;font-size:11px;line-height:1.4;margin:13px 0 8px}
.gallery-meta span:last-child {color:#305542}
.gallery-style-label {display:block;font-size:12px;margin-bottom:5px;color:#59685f}
.gallery-item select {width:100%;min-width:0;font:600 14px/1.3 system-ui,sans-serif;background:#f5f7f5;border:1px solid #d1d9d3;border-radius:4px;padding:10px 28px 10px 10px;min-height:42px;color:#18221e}
.gallery-item h3 {font-size:16px;line-height:1.4;margin:8px 0;overflow-wrap:anywhere}
.gallery-note {font-size:12px;line-height:1.6;color:#627066;max-width:90ch;margin:22px 0 0}
.gallery-caption,.gallery-first .gallery-caption.interactive-caption {position:absolute;top:64%;left:6%;width:88%;height:auto;max-width:none;transform:none;text-align:center;font:700 15px/1.25 system-ui,sans-serif;color:white;white-space:pre-line;pointer-events:none;text-shadow:0 2px 4px #000;z-index:1;overflow:visible}
.gallery-caption[data-style=boxed] {background:#101517e8;border-radius:4px;padding:8px;left:9%;width:82%}
.gallery-caption canvas {display:block;width:100%;height:auto;aspect-ratio:720/220}
.gallery-caption .comic-word {font-size:30px}
.gallery-caption .comic-ink {color:var(--comic-color)}
.gallery-error {position:absolute;inset:auto 8px 44px;padding:10px;background:#fff;color:#7b1524;font-size:13px;z-index:3}
.gallery-error[hidden] {display:none}
.gallery-backgrounds {margin-top:48px;padding-top:30px;border-top:1px solid #e2e7e3}
.gallery-backgrounds>h3 {font-size:24px;margin:0 0 20px}
.gallery-wide-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px}
.gallery-wide-item {margin:0;min-width:0}
.gallery-wide-item figcaption {font-size:15px;font-weight:650;padding-top:12px}
.gallery-first #workflow-showcase {border-top:1px solid #dce5de!important;background:#f3f6f4!important;padding-top:44px!important;padding-bottom:44px!important}
.gallery-first #background-inspiration {display:none}
.gallery-first #clip-planner {margin-top:0}
.gallery-first :is(button,select,a):focus-visible {outline:3px solid #2476a8;outline-offset:4px}
@media(min-width:1600px){.gallery-first .hero-copy{padding-top:32px!important}}
@media(max-width:900px){.gallery-first header{padding:16px 22px}.gallery-first #clip-gallery{padding-inline:22px!important}.gallery-grid{gap:14px}.gallery-caption .comic-word{font-size:23px}.gallery-caption{font-size:12px}}
@media(max-width:640px){
  .gallery-first .hero-copy{padding:24px 20px 12px!important}
  .gallery-first .hero-copy h1{font-size:44px!important;margin:8px 0 12px!important}
  .gallery-first .hero-copy .lead{font-size:25px!important}
  .gallery-first .hero-copy>p:not(.lead):not(.eyebrow){font-size:14px}
  .gallery-first #clip-gallery{padding:22px 18px 32px!important}
  .gallery-heading{align-items:start;gap:12px}.gallery-heading h2{font-size:22px}.gallery-editor-link{font-size:12px;white-space:normal}
  .gallery-grid{grid-template-columns:1fr;gap:30px;max-width:330px}
  .gallery-layout-detail{min-height:0;margin-bottom:12px}
  .gallery-captions>.gallery-item{display:block;max-width:280px}
  .gallery-captions .gallery-meta{margin:12px 0}.gallery-captions .gallery-style-label{margin-bottom:6px}
  .gallery-item select{font-size:12px;padding-left:7px}
  .gallery-wide-grid{grid-template-columns:1fr;gap:24px}
  .gallery-backgrounds{margin-top:30px}.gallery-backgrounds>h3{font-size:21px}
  .gallery-caption .comic-word{font-size:24px}
  .gallery-first .gallery-caption.interactive-caption,.gallery-caption{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.gallery-first{scroll-behavior:auto}.gallery-caption .comic-word{transform:none}}
