/* ═══════════════════════════════════════════════════════════
   DEMO OUTPUTS — the Product film and Social clips tabs of #demo.
   Behaviour and the outputs themselves: assets/js/demo-outputs.js.
   The frames sit in .dfx-stage beside the Guide's doc viewer, so the
   bar and footer use its measures.
   ═══════════════════════════════════════════════════════════ */

.dfo {
  --dfo-line: rgba(28, 28, 28, .09);
  --dfo-ink: #1c1c1c;
  --dfo-muted: rgba(28, 28, 28, .55);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--dfo-line);
  box-shadow: 0 1px 2px rgba(28, 28, 28, .04), 0 24px 60px -28px rgba(30, 27, 75, .28);
  font-family: "Inter", sans-serif; color: var(--dfo-ink);
}
.dfo-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 7px 14px; border-bottom: 1px solid var(--dfo-line);
  background: linear-gradient(180deg, #fcfcfd, #f7f7f9);
}
.dfo-file { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 12.5px/1.2 "SF Mono", ui-monospace, Menlo, monospace; color: rgba(28, 28, 28, .7); }
.dfo-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfo-file svg, .dfo-foot svg, .dfo-tag svg { width: 14px; height: 14px; flex: none; }
.dfo-tags { display: flex; gap: 6px; flex: none; }
.dfo-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1 "Inter", sans-serif; color: rgba(28, 28, 28, .66);
  background: #fff; border: 1px solid var(--dfo-line); padding: 5px 9px; border-radius: 20px; }
.dfo-tag--pub { color: #047857; background: #ecfdf5; border-color: #d1fae5; }
.dfo-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; padding: 8px 14px; border-top: 1px solid var(--dfo-line); background: #fafafb;
  font: 400 11.5px/1.35 "SF Mono", ui-monospace, Menlo, monospace; color: rgba(28, 28, 28, .55);
}
.dfo-foot-r { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* a fixed-size design canvas, scaled to its box (the stage of a composition) */
.dfo-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.dfo-doc { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; pointer-events: none; background: #f4f5f8; }
.dfo-meas { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; white-space: normal; }

/* ── the cursor ── */
.dfo-cur { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dfo-cur-g { position: absolute; left: 0; top: 0; }
.dfo-cur-g svg { display: block; overflow: visible; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28)); }
.dfo-cur-pulse, .dfo-cur-ring { position: absolute; display: none; border-radius: 50%; }
.dfo-cur-ring { border-style: solid; background: none; }

/* ══════════════ PRODUCT FILM ══════════════ */
.dfo-screen { position: relative; flex: 1; min-height: 0; background: #08080b; display: flex; align-items: center; justify-content: center; }
.dfo-film-box { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; }
.dfo-ctrl {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 22px 14px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; opacity: 0; transition: opacity .25s ease;
}
.dfo-screen:hover .dfo-ctrl, .dfo-screen:focus-within .dfo-ctrl, .dfo-film.is-paused .dfo-ctrl { opacity: 1; }
.dfo-play { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.dfo-play svg { width: 15px; height: 15px; }
.dfo-play .is-play, .dfo-play[aria-pressed="true"] .is-pause { display: none; }
.dfo-play[aria-pressed="true"] .is-play { display: block; }
.dfo-scrub { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); cursor: pointer; }
.dfo-scrub::before { content: ""; position: absolute; inset: -10px 0; }
.dfo-scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff; }
.dfo-mark { position: absolute; top: -2px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, .55); }
.dfo-time { flex: none; font: 500 12px/1 "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.dfo-parts { display: none; }

/* the film, on its 1920x1080 canvas */
.fm { background: #0b0b0f; font-family: "Inter", sans-serif; }
.fm-bg { position: absolute; inset: 0; overflow: hidden; }
.fm-bg i { position: absolute; border-radius: 50%; }
.fm-beat { position: absolute; inset: 0; visibility: hidden; }
.fm-head { position: absolute; display: flex; align-items: center; justify-content: center; }
.fm-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; font-family: "Inter Tight", "Inter", sans-serif; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.fm-w { display: inline-block; white-space: nowrap; }
.fm-win { position: absolute; transform-origin: 50% 60%; }
.fm-frame { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #16161d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.fm-chrome { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #1d1d25; border-bottom: 1px solid rgba(255, 255, 255, .07); position: relative; }
.fm-chrome i { width: 12px; height: 12px; border-radius: 6px; background: #ff5f57; }
.fm-chrome i:nth-child(2) { background: #febc2e; } .fm-chrome i:nth-child(3) { background: #28c840; }
.fm-chrome span { position: absolute; left: 50%; transform: translateX(-50%); width: 520px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: center; font: 400 13px/1 "Inter", sans-serif; color: #a1a1aa; }
.fm-view { position: relative; overflow: hidden; background: #f4f5f8; }
.fm-cam { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }
.fm-curlayer { position: absolute; inset: 0; pointer-events: none; }

/* motion titles: a 1280x720 stage at 1.5x */
.fm-title { position: absolute; inset: 0; visibility: hidden; background: radial-gradient(ellipse at 50% 45%, #0c0e12 0%, #07080a 70%); }
.fm-tstage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(1.5); transform-origin: 0 0; overflow: hidden; }
.fm-abs, .fm-logo, .fm-glow, .fm-sheen, .fm-floor, .fm-rule, .fm-ttext, .fm-sign { position: absolute; }
.fm-logo { display: block; object-fit: contain; }
.fm-glow { border-radius: 50%; background: radial-gradient(circle, rgba(124, 107, 255, .42) 0%, rgba(124, 107, 255, .12) 38%, rgba(124, 107, 255, 0) 70%); }
.fm-sheen { overflow: hidden; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fm-sheen i { position: absolute; left: 0; top: 0; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent); }
.fm-refl { transform: scaleY(-1); -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000); mask-image: linear-gradient(to bottom, transparent 35%, #000); opacity: 0; }
.fm-floor { height: 1px; background: linear-gradient(90deg, transparent, #7c6bff, transparent); }
.fm-ttext { text-align: center; }
.fm-eyebrow { font: 600 14px/1 "Inter", sans-serif; text-transform: uppercase; letter-spacing: .28em; color: rgba(242, 243, 245, .56); white-space: nowrap; }
.fm-sign { text-align: center; }
.fm-thead { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #f2f3f5; }
.fm-rule { height: 2px; border-radius: 1px; background: #7c6bff; transform-origin: 50% 50%; }

/* ══════════════ SOCIAL PACK ══════════════ */
.dfo-ttl { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dfo-ttl b { font: 600 14px/1.2 "Inter", sans-serif; white-space: nowrap; }
.dfo-ttl span { font: 400 12px/1.3 "Inter", sans-serif; color: var(--dfo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfo-ratio { display: inline-flex; flex: none; padding: 2px; border-radius: 9px; border: 1px solid #e5e7eb; background: #f9fafb; }
.dfo-ratio button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 7px; background: none;
  font: 500 12px/1 "Inter", sans-serif; color: #6b7280; cursor: pointer; }
.dfo-ratio button svg { width: 14px; height: 14px; }
.dfo-ratio button[aria-pressed="true"] { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.dfo-pack-body { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px; background: #f9fafb; }
.dfo-motion { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.dfo-motion-media { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.dfo-motion-box { position: relative; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; }
.dfo-pack[data-ratio="1:1"] .dfo-motion-box { aspect-ratio: 1 / 1; }
.dfo-pack[data-ratio="16:9"] .dfo-motion-box { height: auto; width: 440px; max-width: 100%; aspect-ratio: 16 / 9; align-self: flex-start; }
.dfo-pack[data-ratio="16:9"] .dfo-pack-body { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
.dfo-kick { margin: 0; font: 500 11px/1.2 "Inter", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #4f46e5; }
.dfo-motion-t { margin: 3px 0 0; font: 500 13px/1.3 "Inter", sans-serif; color: #111827; }
.dfo-motion-s { margin: 1px 0 0; font: 400 11.5px/1.3 "Inter", sans-serif; color: #6b7280; }
.dfo-clips-wrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dfo-clips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dfo-clips-head b { font: 600 13px/1.2 "Inter", sans-serif; color: #111827; }
.dfo-clips-head span { font: 400 11.5px/1.2 "Inter", sans-serif; color: #6b7280; }
.dfo-clips { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 10px; align-content: start; padding: 1px 4px 2px 1px; scrollbar-width: thin; }
.dfo-pack[data-ratio="1:1"] .dfo-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dfo-pack[data-ratio="16:9"] .dfo-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dfo-clip { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.dfo-clip-tile { position: relative; overflow: hidden; aspect-ratio: 9 / 12; background: #fff; border-bottom: 1px solid #eef0f3; }
.dfo-pack[data-ratio="1:1"] .dfo-clip-tile { aspect-ratio: 1 / 1; }
.dfo-pack[data-ratio="16:9"] .dfo-clip-tile { aspect-ratio: 16 / 9; }
.dfo-clip-len { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 5px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: #fff; font: 500 10px/1.2 "Inter", sans-serif; }
.dfo-clip-meta { padding: 7px 9px 8px; }
.dfo-clip-title { margin: 0; font: 500 12px/1.3 "Inter", sans-serif; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dfo-clip-entry { margin: 3px 0 0; font: 400 10.5px/1.2 "Inter", sans-serif; color: #6b7280; font-variant-numeric: tabular-nums; }
.dfo-brand { justify-content: flex-start; flex-wrap: wrap; gap: 6px 16px; font-family: "Inter", sans-serif; }
.dfo-brand > span { display: inline-flex; align-items: center; gap: 6px; }
.dfo-sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .1); }

/* the pack, on its canvases */
.sx { background: #fff; font-family: "Inter", sans-serif; color: #0f172a; }
.sx-bg { position: absolute; inset: 0; overflow: hidden; }
.sx-bg i { position: absolute; border-radius: 50%; }
.sx-bg .sx-grid { inset: 0; border-radius: 0;
  background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 75%); }
.sx-scene { position: absolute; inset: 0; visibility: hidden; }
.sx-col, .sx-abs { position: absolute; display: flex; flex-direction: column; }
.sx-abs { display: block; }
.sx-center-y { justify-content: center; }
.sx-center { align-items: center; justify-content: center; }
.sx-text { font-family: "Inter", sans-serif; }
.sx-w { display: inline-block; position: relative; isolation: isolate; }
.sx-marker { position: absolute; left: -.08em; right: -.08em; top: 18%; bottom: 4%; border-radius: .12em; transform-origin: left; transform: scaleX(0); z-index: -1; }
.sx-kicker { display: flex; align-items: center; gap: .6em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sx-kicker i { width: 1.6em; height: max(3px, .12em); border-radius: 4px; background: currentColor; }
.sx-bar { display: block; width: 0; border-radius: 8px; }
.sx-pill { align-self: flex-start; display: inline-flex; align-items: center; padding: .32em .8em .38em; border: 2px solid; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.sx-card { position: absolute; overflow: hidden; background: #f8fafc; transform-origin: 50% 50%;
  box-shadow: 0 28px 48px -18px rgba(15, 23, 42, .30), 0 8px 16px -8px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .08); }
.sx-inner { position: absolute; left: 0; overflow: hidden; }
.sx-chrome { position: relative; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 18px; background: #f3f3f1; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.sx-chrome i { width: 13px; height: 13px; border-radius: 50%; background: #ff5f57; }
.sx-chrome i:nth-child(2) { background: #febc2e; } .sx-chrome i:nth-child(3) { background: #28c840; }
.sx-chrome span { margin: 0 auto; padding: 5px 22px; border-radius: 13px; background: rgba(0, 0, 0, .06); font: 400 15px/1 "Inter", sans-serif; color: #64748b; }
.sx-cardglow { position: absolute; height: 40px; background: radial-gradient(ellipse at center, rgba(79, 57, 246, .3) 0%, rgba(79, 57, 246, 0) 70%); }
.sx-ring { position: absolute; border: 4px solid; opacity: 0; z-index: 2; pointer-events: none; }
.sx-steptitle { display: flex; align-items: flex-end; }
.sx-step { display: flex; align-items: center; }
.sx-badge { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.sx-badge svg { width: 50%; height: 50%; display: none; }
.sx-steptext { font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #0f172a; }
.sx-logo { display: block; object-fit: contain; }
.sx-tagline { font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-align: center; }
.sx-btn { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.sx-domain { font-weight: 600; letter-spacing: .01em; }

/* ══════════════ phones and tablets ══════════════ */
@media (max-width: 760px) {
  .dfo { border-radius: 14px; }
  .dfo-bar { flex-wrap: wrap; padding: 8px 12px; }
  .dfo-tag:not(.dfo-tag--pub) { display: none; }
  .dfo-foot { flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; font-size: 11px; }
  .dfo-film .dfo-screen { flex: none; }
  .dfo-ctrl { opacity: 1; padding: 16px 10px 8px; gap: 8px; }
  .dfo-play { width: 30px; height: 30px; }
  .dfo-parts { display: block; flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; }
  .dfo-parts li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font: 400 13px/1.3 "Inter", sans-serif; color: rgba(28, 28, 28, .72); cursor: pointer; }
  .dfo-parts li b { flex: none; width: 34px; font: 500 12px/1 "Inter", sans-serif; font-variant-numeric: tabular-nums; color: rgba(28, 28, 28, .45); }
  .dfo-parts li.on { color: #1c1c1c; font-weight: 500; background: #f5f5ff; }
  .dfo-parts li.on b { color: #4f46e5; }

  .dfo-pack .dfo-bar { flex-wrap: nowrap; }
  .dfo-ttl span { display: none; }
  .dfo-ratio button { padding: 7px 9px; }
  .dfo-pack-body, .dfo-pack[data-ratio="16:9"] .dfo-pack-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .dfo-motion { flex: none; flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
  .dfo-motion-media { flex: none; height: 200px; }
  .dfo-pack[data-ratio="16:9"] .dfo-motion-media { height: auto; width: 62%; }
  .dfo-pack[data-ratio="16:9"] .dfo-motion-box { width: 100%; }
  .dfo-motion-meta { min-width: 0; }
  .dfo-clips-wrap { flex: 1; }
  .dfo-clips, .dfo-pack[data-ratio="1:1"] .dfo-clips, .dfo-pack[data-ratio="16:9"] .dfo-clips {
    display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .dfo-clip { flex: none; width: 112px; scroll-snap-align: start; }
  .dfo-pack[data-ratio="1:1"] .dfo-clip { width: 130px; }
  .dfo-pack[data-ratio="16:9"] .dfo-clip { width: 200px; }
  .dfo-clip-meta { padding: 6px 7px 7px; }
  .dfo-clip-title { font-size: 11.5px; }
  .dfo-brand .dfo-brand-font, .dfo-brand .dfo-brand-logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dfo-ctrl { transition: none; }
}

/* five tabs: the long names step down to one word on phones */
.dfx-tab .dfx-ts { display: none; }
@media (max-width: 600px) {
  .dfx-tab .dfx-tl { display: none; }
  .dfx-tab .dfx-ts { display: inline; }
}
.dfo-pack[data-ratio="16:9"] .dfo-motion-media { flex: none; }
@media (min-width: 761px) and (max-width: 1120px) {
  .dfo-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dfo-pack[data-ratio="1:1"] .dfo-clips, .dfo-pack[data-ratio="16:9"] .dfo-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}