.thumbnail-demo {
  grid-template-columns: minmax(310px, .66fr) minmax(0, 1.34fr);
  overflow: hidden;
  border: 1px solid #c7d5e9;
  border-radius: 22px;
  box-shadow: 0 28px 75px rgb(7 31 72 / .16);
}

.thumbnail-demo-controls {
  gap: 14px;
  padding: 26px;
  background: linear-gradient(180deg, #fbfdff, #edf4ff);
}

.thumbnail-demo-controls textarea,
.thumbnail-demo-controls input:not([type="range"]),
.thumbnail-demo-controls select {
  border: 1px solid #9cb3d2;
  border-radius: 8px;
  box-shadow: inset 0 1px 1px rgb(7 31 72 / .05);
}

.layout-choice-grid button {
  min-height: 39px;
  color: #294264;
  background: rgb(255 255 255 / .8);
  border-color: #c6d4e7;
  font-size: .73rem;
}

.layout-choice-grid button[aria-pressed="true"] {
  color: #075be2;
  background: #e8f1ff;
  border-color: #2676ed;
  box-shadow: inset 0 0 0 1px #2676ed;
}

.thumbnail-demo-stage {
  gap: 13px;
  padding: 22px 24px 24px;
  align-content: start;
  background: radial-gradient(circle at 75% 5%, #1d4f99, transparent 33%), #071a3b;
}

.thumbnail-demo-art {
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #071a3b;
  border: 1px solid rgb(172 210 255 / .35);
  border-radius: 16px;
  box-shadow: 0 30px 70px -28px #000;
}

.thumbnail-demo-background { position:absolute; z-index:0; inset:0; background:url('/assets/thumbnail-creator-studio-v1.png') center / cover no-repeat; transform:scale(1.01); }

.thumbnail-demo-stage[data-format="shorts"] .thumbnail-demo-art {
  width: min(100%, 292px);
  max-height: none;
  aspect-ratio: 9 / 16;
}

.thumbnail-demo-art::before {
  background: linear-gradient(90deg, rgb(2 8 20 / calc(var(--demo-overlay, .56) + .17)) 0%, rgb(2 8 20 / .28) 48%, transparent 77%);
}

.demo-person { display: none; }

.demo-safe-area {
  inset: 5.5%;
  border-color: rgb(172 210 255 / .55);
}

.thumbnail-demo-copy {
  top: 28%;
  left: 6%;
  width: 48%;
  gap: 10px;
}

.thumbnail-demo-copy i { width: 19%; height: 6px; background: #37a0ff; }
.thumbnail-demo-copy strong { font-size: clamp(2rem, 4.3vw, 4.6rem); letter-spacing: -.065em; }
.thumbnail-demo-copy small { color: #dbeaff; font-size: clamp(.7rem, 1vw, .95rem); }

.thumbnail-canvas-toolbar { position: relative; z-index: 3; }
.thumbnail-feed-check { padding: 0 4px; }
.thumbnail-mini { background: url('/assets/thumbnail-creator-studio-v1.png') center / cover no-repeat; }
.thumbnail-demo-circle { position: absolute; z-index: 4; top: 20%; right: 14%; width: 19%; aspect-ratio: 1; border: 9px solid #f5d238; border-radius: 50%; box-shadow: 0 3px 10px rgb(0 0 0 / .45); }
.thumbnail-demo-circle, .thumbnail-demo-arrow { cursor: grab; touch-action: none; }
.thumbnail-demo-circle:active, .thumbnail-demo-arrow:active { cursor: grabbing; }
.thumbnail-demo-badge { position: absolute; z-index: 5; top: 9%; left: 7%; padding: 7px 11px; color: #fff; background: #e63d56; border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / .3); font-size: clamp(.6rem,1vw,.9rem); font-weight: 950; letter-spacing: .08em; }

@media (max-width: 850px) {
  .thumbnail-demo { grid-template-columns: 1fr; }
  .thumbnail-demo-art { min-height: 0; }
}