/* ============================================================
   Ad Preview Studio
   Device frame is ONE fixed size for every placement:
   --dw x (--dw * 16/9). Nothing about switching placements
   is allowed to change it.
   ============================================================ */

:root {
  --dw: 300px;                      /* device screen width  */
  --dh: calc(var(--dw) * 16 / 9);   /* device screen height */

  --accent: #6C2BD9;
  --accent-soft: #f3ecfe;
  --gold: #FFD200;

  --ink: #14161a;
  --ink-2: #5b6068;
  --ink-3: #8b9098;
  --line: #e5e7eb;
  --bg: #f5f6f8;
  --panel: #fff;

  --danger: #f43f5e;
  --ok: #10b981;

  --r: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
h1, h2, h3, h4 { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------------- masthead ---------------- */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.mast-left { display: flex; align-items: center; gap: 12px; }
.mast-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; cursor: pointer;
}
.mast-mark img { width: 100%; height: 100%; object-fit: cover; }
.masthead h1 { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.masthead p { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); }
.mast-right { display: flex; gap: 8px; }

.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 650;
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 650; padding: 0; }

/* ---------------- layout ---------------- */
.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.controls {
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--line);
  position: sticky; top: 65px; max-height: calc(100vh - 65px); overflow-y: auto;
}
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.card h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin-bottom: 11px; font-weight: 750;
}

.lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 650; margin: 12px 0 5px;
}
.card > .lbl:first-of-type { margin-top: 0; }
.count { font-weight: 500; font-size: 11px; color: var(--ink-3); }
.count.over { color: #d97706; }
.count.way-over { color: var(--danger); }

input[type=text], textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--ink); background: #fff; resize: vertical;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }

.triple { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.triple .lbl { margin-top: 0; }

/* dropzone */
.drop {
  border: 1.5px dashed var(--line); border-radius: 10px; padding: 18px 12px;
  text-align: center; color: var(--ink-2); cursor: pointer;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.drop p { margin: 6px 0 0; font-size: 12.5px; }
.drop .sub { font-size: 11px; color: var(--ink-3); }
.media-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.badge {
  font-size: 11px; font-weight: 650; background: var(--accent-soft); color: var(--accent);
  padding: 4px 8px; border-radius: 6px;
}
.hint-line { margin: 6px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--ink-3); }
.specs-note a { color: var(--accent); }
.swipe-pill.fb { background: #0866ff; color: #fff; }

/* segmented */
.seg-row { display: flex; gap: 5px; }
.seg {
  flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 7px 4px; font-size: 11.5px; font-weight: 650; color: var(--ink-2);
}
.seg.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* avatar */
.avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.avatar-prev { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--line); flex-shrink: 0; }
.avatar-btns { display: flex; flex-direction: column; gap: 5px; }

/* toggles */
.tgl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.card > .tgl-row:first-of-type { border-top: none; padding-top: 2px; }
.tgl-row.compact { padding: 8px 0 0; border-top: none; font-size: 12.5px; font-weight: 650; }
.tgl-row span { display: flex; flex-direction: column; gap: 2px; }
.tgl-row b { font-size: 13px; font-weight: 650; }
.tgl-row em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.tgl-row input[type=checkbox] { width: 34px; height: 20px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }

/* ---------------- stage ---------------- */
.stage { padding: 16px 20px 40px; min-width: 0; }
.stage-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 650; color: var(--ink-2);
}
.tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.quick { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 12px; font-size: 12px; font-weight: 650; color: var(--ink-2);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip.on i { background: var(--accent); }

/* warnings */
.warnings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.warn {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px;
  padding: 9px 12px; border-radius: 9px; border: 1px solid;
}
.warn.w-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.warn.w-err  { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.warn.w-ok   { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.warn b { font-weight: 700; }

/* preview grid */
.previews { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.previews.single { justify-content: center; }

.pv { display: flex; flex-direction: column; gap: 9px; width: calc(var(--dw) + 16px); }
/* min-height keeps every card's frame starting on the same baseline,
   even when a spec caption wraps to two lines */
.pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 48px; }
.pv-title { font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; }
.pv-spec { font-size: 11px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.pv-png {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: var(--ink);
}
.pv-png:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   DEVICE — identical for every placement
   ============================================================ */
.shell {
  width: calc(var(--dw) + 16px); padding: 8px; background: #111318;
  border-radius: 34px; box-shadow: 0 10px 34px rgba(17,20,24,.18);
}
.shell.no-chrome {
  width: var(--dw); margin: 0 auto; padding: 0;
  background: transparent; border-radius: 14px; box-shadow: 0 6px 24px rgba(17,20,24,.14);
}

.device {
  width: var(--dw); height: var(--dh);
  border-radius: 26px; overflow: hidden; position: relative; background: #000;
}
.shell.no-chrome .device { border-radius: 14px; }

/* status bar */
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 11.5px; font-weight: 700; color: #fff;
  pointer-events: none;
}
.statusbar.on-light { color: #050505; }
.statusbar .island {
  position: absolute; left: 50%; transform: translateX(-50%); top: 7px;
  width: 74px; height: 19px; border-radius: 12px; background: #000;
}
.shell.no-chrome .statusbar { display: none; }
.sb-icons { display: flex; align-items: center; gap: 4px; }

/* ---------------- FEED screens ---------------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen.light { background: #fff; color: #050505; }
.screen.dark  { background: #18191a; color: #e4e6eb; }
.screen.ig.dark { background: #000; }

/* keep feed content clear of the status bar */
.screen.has-chrome { padding-top: 30px; }
.shell.no-chrome .screen.has-chrome { padding-top: 0; }

/* full-bleed overlays sit lower when the status bar is drawn */
.shell.no-chrome .story-bars { top: 10px; }
.shell.no-chrome .ov-head    { top: 20px; }
.shell.no-chrome .reel-top   { top: 18px; }

.feed-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.feed-scroll::-webkit-scrollbar { display: none; }

/* the post runs past the screen, same as a real feed — show it scrolls */
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 14;
  pointer-events: none; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 5px;
  background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,0));
}
.screen.dark .scroll-hint { background: linear-gradient(0deg, rgba(24,25,26,.92), rgba(24,25,26,0)); }
.screen.ig.dark .scroll-hint { background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,0)); }
.scroll-hint span {
  font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #8b9098;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.08);
  padding: 3px 8px; border-radius: 999px;
}
.screen.dark .scroll-hint span { background: rgba(58,59,60,.95); border-color: rgba(255,255,255,.1); color: #b0b3b8; }

.post-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px 5px; }
.pf-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #dde1e7; flex-shrink: 0; }
.pf-av.ring { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #d62976; }
.pf-txt { flex: 1; min-width: 0; }
.pf-name { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.pf-sub { font-size: 11px; color: #65676b; display: flex; align-items: center; gap: 4px; }
.screen.dark .pf-sub { color: #b0b3b8; }
.pf-more { color: #65676b; flex-shrink: 0; }

.post-text { padding: 0 12px 6px; font-size: 12px; line-height: 1.36; white-space: pre-wrap; word-break: break-word; }
.see-more { color: #65676b; font-weight: 600; cursor: pointer; }
.screen.dark .see-more { color: #b0b3b8; }

.media-box { position: relative; width: 100%; background: #000; overflow: hidden; flex-shrink: 0; }
.media-box.full { position: absolute; inset: 0; }

/* Fill: the inner wrapper covers the frame and the asset crops to it.
   Fit:  the wrapper takes the asset's own aspect and is centred, so the
         letterbox gaps — and the crop strips — line up with the artwork. */
.media-inner { position: absolute; inset: 0; }
.media-inner img, .media-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fit mode: flex centres the letterboxed asset; the inline aspect-ratio and
   pinned dimension come from mediaBlock() so both orientations behave. */
.media-box.fit { display: flex; align-items: center; justify-content: center; }
.media-box.fit .media-inner { position: relative; inset: auto; max-width: 100%; max-height: 100%; }
.media-box.fit .media-inner img, .media-box.fit .media-inner video { object-fit: contain; }

/* strips Fill mode would cut away */
.cropstrip {
  position: absolute; z-index: 3;
  background: repeating-linear-gradient(135deg,
    rgba(15,23,42,.62) 0 6px,
    rgba(15,23,42,.40) 6px 12px);
  outline: 1px dashed rgba(255,255,255,.8); outline-offset: -1px;
}
.crop-note {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 4;
  background: rgba(15,18,22,.88); color: #fff; font-size: 8.5px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.media-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #23262b, #23262b 12px, #1b1e22 12px, #1b1e22 24px);
  color: #7b8189; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
}

/* FB link card */
.linkcard {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  background: #f0f2f5; border-top: 1px solid #e4e6ea;
}
.screen.dark .linkcard { background: #242526; border-top-color: #3a3b3c; }
.lc-txt { flex: 1; min-width: 0; }
.lc-link { font-size: 10.5px; text-transform: uppercase; color: #65676b; letter-spacing: .02em; }
.lc-head { font-size: 13px; font-weight: 700; margin-top: 1px; line-height: 1.25; }
.lc-desc { font-size: 11px; color: #65676b; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen.dark .lc-link, .screen.dark .lc-desc { color: #b0b3b8; }
.lc-cta {
  flex-shrink: 0; background: #e4e6ea; color: #050505; border: none;
  border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.screen.dark .lc-cta { background: #3a3b3c; color: #e4e6eb; }

/* FB engagement */
.engage { padding: 5px 12px 6px; }
.engage-counts {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #65676b; padding-bottom: 4px;
}
.screen.dark .engage-counts { color: #b0b3b8; }
.reacts { display: inline-flex; align-items: center; gap: 3px; }
.react-dot {
  width: 15px; height: 15px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; color: #fff; margin-right: -4px;
  border: 1.5px solid #fff;
}
.screen.dark .react-dot { border-color: #18191a; }
.engage-btns {
  display: flex; justify-content: space-around; border-top: 1px solid #e4e6ea; padding-top: 5px;
  font-size: 11px; font-weight: 650; color: #65676b;
}
.screen.dark .engage-btns { border-top-color: #3a3b3c; color: #b0b3b8; }
.engage-btns span { display: inline-flex; align-items: center; gap: 5px; }

/* IG feed */
.ig-actions { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 4px; }
.ig-actions-l { display: flex; gap: 13px; }
.ig-likes { padding: 0 12px; font-size: 12px; font-weight: 650; }
.ig-cap { padding: 3px 12px 0; font-size: 12px; line-height: 1.36; white-space: pre-wrap; word-break: break-word; }
.ig-cap b { font-weight: 700; }
.ig-comments { padding: 3px 12px 0; font-size: 11.5px; color: #8e8e8e; }
/* Instagram feed ads render the CTA as a full-bleed blue bar directly under
   the media — no headline, no outlined button. Blue is IG's own #0095f6. */
.ig-ctabar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: #0095f6; color: #fff;
  font-size: 13.5px; font-weight: 650;
}
.ig-ctabar svg { flex-shrink: 0; opacity: .95; }

/* ---------------- STORY / REEL screens ---------------- */
.screen.full { background: #000; color: #fff; }
.story-bars {
  position: absolute; top: 34px; left: 9px; right: 9px; z-index: 22;
  display: flex; gap: 3px;
}
.story-bars span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.4); }
.story-bars span.done { background: #fff; }
.story-bars span.now { background: linear-gradient(90deg,#fff 42%, rgba(255,255,255,.4) 42%); }

.fade-top {
  position: absolute; top: 0; left: 0; right: 0; height: 24%; z-index: 10; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.fade-bot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
}

.ov-head {
  position: absolute; top: 44px; left: 11px; right: 11px; z-index: 22;
  display: flex; align-items: center; gap: 8px;
}
.ov-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #444; flex-shrink: 0; }
.ov-name { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.ov-sub { font-size: 11px; color: rgba(255,255,255,.85); }
.ov-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* story bottom CTA */
.story-cta {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 22;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.story-cta .swipe-pill {
  background: #fff; color: #050505; border: none; border-radius: 999px;
  padding: 10px 26px; font-size: 13px; font-weight: 700;
}

/* reels */
.reel-top {
  position: absolute; top: 42px; left: 13px; right: 13px; z-index: 22;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
}
.reel-rail {
  position: absolute; right: 9px; bottom: 84px; z-index: 22;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.reel-rail .rail-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.reel-rail .rail-item small { font-size: 10px; font-weight: 650; }
.reel-bottom {
  position: absolute; left: 12px; right: 62px; bottom: 16px; z-index: 22;
  display: flex; flex-direction: column; gap: 7px;
}
.reel-user { display: flex; align-items: center; gap: 7px; }
.reel-cap {
  font-size: 11.5px; line-height: 1.38;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: #fff;
  backdrop-filter: blur(3px);
}
.reel-cta.fb { background: #0866ff; border-color: #0866ff; }
.reel-audio { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.92); }

.ov-shadow { text-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* ============================================================
   SAFE ZONES  — hatched bands over the UNSAFE areas
   ============================================================ */
.safe { position: absolute; inset: 0; z-index: 18; pointer-events: none; display: none; }
.safe.show { display: block; }
.sz {
  position: absolute;
  background: repeating-linear-gradient(135deg,
    rgba(244,63,94,.22) 0 6px,
    rgba(244,63,94,.09) 6px 12px);
  outline: 1px dashed rgba(244,63,94,.9); outline-offset: -1px;
}

/* Outline mode: keep the boundary, drop the fill. On a bright creative the
   hatch buries the artwork, which defeats the point of previewing it. */
.safe.outline .sz { background: none; outline-color: rgba(244,63,94,1); }
.safe.outline .sz-label { background: rgba(244,63,94,.95); }
.sz-label {
  position: absolute; background: rgba(15,18,22,.86); color: #fff;
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2.5px 6px; border-radius: 4px; white-space: nowrap;
}
.sz-flag {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px;
  background: rgba(217,119,6,.95); color: #fff; font-size: 8.5px; font-weight: 800;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
}
.sz-ok {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16,185,129,.94); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

/* crop guide for feed placements */
.cropguide { position: absolute; inset: 0; z-index: 12; pointer-events: none; display: none; }
.cropguide.show { display: block; }
.cg-band {
  position: absolute;
  background: repeating-linear-gradient(135deg,
    rgba(15,23,42,.55) 0 6px,
    rgba(15,23,42,.34) 6px 12px);
  outline: 1px dashed rgba(255,255,255,.75); outline-offset: -1px;
}
.cg-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(15,18,22,.86); color: #fff; font-size: 8.5px; font-weight: 800;
  letter-spacing: .04em; padding: 2.5px 6px; border-radius: 4px; white-space: nowrap;
}

/* ---------------- spec table ---------------- */
.specs { margin-top: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.specs h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 10px; }
.specs table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.specs th { text-align: left; font-weight: 700; color: var(--ink-2); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.specs td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); }
.specs tr:last-child td { border-bottom: none; }
.specs code { font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.specs-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); max-width: 78ch; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .controls { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .previews { justify-content: center; }
}