/* Found Clips product demo: a live DOM storyboard (no video). Stage is authored at 560x380 and scaled. */
.fcd { --eo: cubic-bezier(.215,.61,.355,1); --eio: cubic-bezier(.645,.045,.355,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --b1: #8b5cf6; --b2: #4f46e5; --brand: #6547f0; --ink: #15151d; --muted: #6c6c7d; --line: #e7e7ef; --soft: #f5f4fb; --rec: #f43f5e;
  position: relative; width: 100%; aspect-ratio: 560 / 380; font-family: Geist, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; }
.fcd * { box-sizing: border-box; }
.fcd .fd-stage { position: absolute; left: 0; top: 0; width: 560px; height: 380px; transform-origin: 0 0; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20,20,40,.06), 0 40px 90px -36px rgba(60,40,160,.55), 0 10px 24px -14px rgba(20,20,40,.18); }
.fcd .fd-notransition, .fcd .fd-notransition * { transition: none !important; }

/* browser chrome */
.fcd .fd-bar { position: absolute; inset: 0 0 auto; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #f7f7fb; border-bottom: 1px solid var(--line); }
.fcd .fd-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e2e2ec; }
.fcd .fd-url { margin-left: 10px; flex: 1; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 9px; font: 500 11px 'Geist Mono', ui-monospace, monospace; color: var(--muted); }
.fcd .fd-url svg { flex: 0 0 auto; }
.fcd .fd-ext { position: relative; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; transition: transform .15s var(--eo), box-shadow .25s ease, background .25s ease; }
.fcd .fd-ext img { width: 20px; height: 20px; border-radius: 6px; }
.fcd .fd-ext.hl { background: #f1edff; box-shadow: 0 0 0 2px var(--brand); }
.fcd .fd-ext.press { transform: scale(.86); }
.fcd .fd-ext .fd-badge { position: absolute; right: -5px; top: -4px; padding: 1px 4px; border-radius: 5px; background: var(--rec); color: #fff; font: 700 7.5px/1.3 Geist, sans-serif; letter-spacing: .04em; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .3s var(--spring); }
.fcd .fd-ext .fd-badge.show { opacity: 1; transform: none; }

/* the page being recorded */
.fcd .fd-page { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; display: grid; grid-template-columns: 112px 1fr; }
.fcd .fd-side { border-right: 1px solid var(--line); padding: 16px 12px; background: #fcfcfe; }
.fcd .fd-side b { display: block; height: 8px; border-radius: 5px; background: #ececf4; margin-bottom: 12px; }
.fcd .fd-side b.fd-sel { background: #ddd5ff; }
.fcd .fd-main { padding: 16px 18px; }
.fcd .fd-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.fcd .fd-h strong { font-size: 15px; letter-spacing: -.02em; color: var(--ink); }
.fcd .fd-h span { font-size: 11px; color: var(--muted); }
.fcd .fd-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 10px; height: 150px; display: flex; flex-direction: column; }
.fcd .fd-card .fd-k { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-bottom: 8px; }
.fcd .fd-card .fd-k b { color: var(--ink); font: 600 13px 'Geist Mono', monospace; }
.fcd .fd-bars { flex: 1; display: flex; align-items: flex-end; gap: 9px; position: relative; }
.fcd .fd-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: #e4ddff; transition: background .3s ease, transform .35s var(--eo); transform-origin: bottom; }
.fcd .fd-bars i.hl { background: linear-gradient(180deg, var(--b1), var(--b2)); transform: scaleY(1.04); }
.fcd .fd-tip { position: absolute; top: -6px; padding: 5px 8px; border-radius: 8px; background: var(--ink); color: #fff; font: 600 10.5px 'Geist Mono', monospace; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .2s ease, transform .3s var(--eo); }
.fcd .fd-tip.show { opacity: 1; transform: translate(-50%, 0); }
.fcd .fd-rows { margin-top: 12px; }
.fcd .fd-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 11px; color: var(--ink); transition: background .25s ease; }
.fcd .fd-row.hl { background: #f4f1ff; }
.fcd .fd-row .fd-d { width: 18px; height: 18px; border-radius: 6px; background: #ece8ff; }
.fcd .fd-row .fd-n { flex: 1; }
.fcd .fd-row .fd-v { font: 600 10.5px 'Geist Mono', monospace; color: #059669; }

/* toolbar popup */
.fcd .fd-menu { position: absolute; top: 46px; right: 10px; width: 222px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -16px rgba(40,30,120,.45), 0 2px 6px rgba(20,20,40,.06); transform-origin: 92% 0; opacity: 0; transform: scale(.94) translateY(-6px); pointer-events: none;
  transition: opacity .2s ease, transform .32s var(--eo); }
.fcd .fd-menu.open { opacity: 1; transform: none; }
.fcd .fd-menu .fd-lg { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; color: var(--ink); letter-spacing: -.02em; margin-bottom: 10px; }
.fcd .fd-menu .fd-lg img { width: 18px; height: 18px; border-radius: 5px; }
.fcd .fd-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 9px; background: #f0f0f6; margin-bottom: 8px; position: relative; }
.fcd .fd-seg span { position: relative; z-index: 1; text-align: center; white-space: nowrap; letter-spacing: -.01em; font-size: 9px; font-weight: 600; color: var(--muted); padding: 7px 0; border-radius: 7px; transition: color .2s ease; }
.fcd .fd-seg span.on { color: var(--brand); }
.fcd .fd-seg .fd-knob { position: absolute; z-index: 0; top: 3px; left: 3px; bottom: 3px; width: calc((100% - 12px) / 3); border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(20,20,40,.12), 0 0 0 1px #d9d0ff; transition: transform .38s var(--eio); }
.fcd .fd-dev { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; font-size: 10px; font-weight: 550; color: var(--ink); }
.fcd .fd-dev svg { color: var(--muted); flex: 0 0 auto; }
.fcd .fd-dev .fd-t { flex: 1; }
.fcd .fd-dev .fd-sw { width: 22px; height: 13px; border-radius: 99px; background: var(--brand); position: relative; }
.fcd .fd-dev .fd-sw::after { content: ''; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.fcd .fd-startb { margin-top: 4px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff; font-weight: 700; font-size: 11.5px; background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 8px 18px -8px rgba(101,71,240,.9); transition: transform .15s var(--eo), filter .15s ease; }
.fcd .fd-startb i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.fcd .fd-startb.press { transform: scale(.96); filter: brightness(1.1); }

/* countdown */
.fcd .fd-cd { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; display: grid; place-items: center; background: rgba(16,12,40,.32); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.fcd .fd-cd.show { opacity: 1; }
.fcd .fd-cd b { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 52px/1 Geist, sans-serif; letter-spacing: -.04em; background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 0 0 10px rgba(139,92,246,.28), 0 24px 50px -10px rgba(79,70,229,.8); }
.fcd .fd-cd b.bump { animation: fcdpop .75s var(--eo) both; }
@keyframes fcdpop { 0% { transform: scale(1.35); opacity: 0; filter: blur(4px); } 30% { transform: scale(1); opacity: 1; filter: none; } 80% { opacity: 1; } 100% { transform: scale(.9); opacity: .0; } }

/* recording overlay */
.fcd .fd-pill { position: absolute; left: 12px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; border-radius: 99px; background: #16161f; box-shadow: 0 14px 26px -10px rgba(0,0,0,.55);
  opacity: 0; transform: translateX(-14px); transition: opacity .2s ease, transform .35s var(--eo); }
.fcd .fd-pill.show { opacity: 1; transform: none; }
.fcd .fd-pill u { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #2a2a37; transition: transform .15s var(--eo); }
.fcd .fd-pill u.fd-stop { background: var(--rec); }
.fcd .fd-pill u.press { transform: scale(.82); }
.fcd .fd-pill em { font: 600 8.5px 'Geist Mono', monospace; color: #fff; font-style: normal; padding: 1px 0; }
.fcd .fd-bub { position: absolute; left: 56px; bottom: 18px; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 0 0 2.5px var(--b1), 0 18px 36px -12px rgba(40,30,120,.6); background: linear-gradient(180deg, #dcd5ff, #b7aaff);
  opacity: 0; transform: scale(.4); transform-origin: 30% 80%; transition: opacity .25s ease, transform .5s var(--spring); }
.fcd .fd-bub.show { opacity: 1; transform: none; }
.fcd .fd-bub .fd-face { position: absolute; left: 50%; top: 24%; width: 34%; height: 38%; margin-left: -17%; border-radius: 48% 48% 44% 44%; background: #f2c9ad; box-shadow: inset 0 -4px 0 rgba(0,0,0,.05); }
.fcd .fd-bub .fd-hair { position: absolute; left: 50%; top: 18%; width: 40%; height: 22%; margin-left: -20%; border-radius: 50% 50% 30% 30%; background: #3b2a24; }
.fcd .fd-bub .fd-body { position: absolute; left: 50%; bottom: -16%; width: 78%; height: 44%; margin-left: -39%; border-radius: 50% 50% 0 0; background: linear-gradient(135deg, var(--b1), var(--b2)); }
.fcd .fd-bub .fd-mouth { position: absolute; left: 50%; top: 50%; width: 10%; height: 4%; margin-left: -5%; border-radius: 0 0 10px 10px; background: #9b4a3a; }
.fcd .fd-bub.show .fd-talk { animation: fcdtalk 2.2s ease-in-out infinite; }
.fcd .fd-bub.show .fd-mouth { animation: fcdmouth .42s ease-in-out infinite alternate; }
@keyframes fcdtalk { 50% { transform: translateY(-2px) rotate(-1.5deg); } }
@keyframes fcdmouth { to { height: 7%; } }

/* link copied toast */
.fcd .fd-toast { position: absolute; left: 50%; bottom: 22px; width: 300px; margin-left: -150px; padding: 10px 12px; border-radius: 14px; background: #16161f; color: #fff;
  box-shadow: 0 22px 44px -14px rgba(0,0,0,.55); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .4s var(--eo); }
.fcd .fd-toast.show { opacity: 1; transform: none; }
.fcd .fd-toast .fd-ok { width: 22px; height: 22px; border-radius: 50%; background: #10b981; display: grid; place-items: center; flex: 0 0 auto; transform: scale(0); transition: transform .4s var(--spring); }
.fcd .fd-toast .fd-ok.show { transform: none; }
.fcd .fd-toast .fd-tx { min-width: 0; flex: 1; }
.fcd .fd-toast .fd-tx b { display: block; font-size: 11.5px; }
.fcd .fd-toast .fd-tx span { display: block; font: 500 10px 'Geist Mono', monospace; color: #c4b5fd; white-space: nowrap; overflow: hidden; min-height: 13px; }
.fcd .fd-toast .fd-tx span::after { content: ''; display: inline-block; width: 1px; height: 10px; margin-left: 1px; background: #c4b5fd; vertical-align: -1px; animation: fcdcaret .8s steps(1) infinite; }
@keyframes fcdcaret { 50% { opacity: 0; } }

/* cursor */
.fcd .fd-cur { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 20; transition: transform .8s var(--eio); will-change: transform; }
.fcd .fd-cur svg { transition: transform .15s var(--eo); transform-origin: 3px 2px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.fcd .fd-cur.press svg { transform: scale(.82); }
.fcd .fd-ring { position: absolute; z-index: 19; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--b1); opacity: 0; pointer-events: none; }
.fcd .fd-ring.fire { animation: fcdring .5s var(--eo); }
@keyframes fcdring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } }

/* whole-scene fade for the loop seam */
.fcd .fd-stage > .fd-all { position: absolute; inset: 0; transition: opacity .45s ease; }
.fcd .fd-stage > .fd-all.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fcd .fd-bub.show .fd-talk, .fcd .fd-bub.show .fd-mouth, .fcd .fd-toast .fd-tx span::after { animation: none; } }