/* Yap Studio · Source in the Edit sandbox (yap-source.js, YAP-AVATAR-CATFISH-PLAN.md): the Source row, the AI avatar and
   Catfish rows, their stage and the sheets over the sandbox. In Yap's own tokens (yap-studio.css .ysx); phone frames
   are Yap's .ysx-phone (rounded bezel, no notch). */
.ysx{position:relative}
.ysrc-i{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.ysrc-spin{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:ysrcSpin .8s linear infinite;flex:none;vertical-align:middle}
@keyframes ysrcSpin{to{transform:rotate(360deg)}}
.ysrc-load{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ysx-muted);padding:6px 0}

/* ── the Source card ── */
.ysrc.open{gap:10px}
.ysrc-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:var(--ysx-panel);border:1px solid var(--ysx-line)}
.ysrc-seg button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:38px;border:0;border-radius:12px;background:none;color:var(--ysx-muted);font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.ysrc-seg button span{overflow:hidden;text-overflow:ellipsis}
.ysrc-seg button:hover{color:var(--ysx-ink);background:var(--ysx-inner)}
.ysrc-seg button.on{background:var(--ysx-sun);color:#000}
.ysrc-say{margin:0}
.ysrc-runs{display:flex;flex-direction:column;gap:6px}
.ysrc-run{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:1px solid var(--ysx-line);border-radius:14px;background:var(--ysx-panel);color:var(--ysx-ink);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.ysrc-run span{color:var(--ysx-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-run em{font-style:normal;font-weight:800;border-bottom:2px solid var(--ysx-sun)}
.ysrc-run:hover{border-color:var(--ysx-ink)}

/* the rows: a number, a name, the value picked; the body under */
.ysrc-row{display:flex;flex-direction:column;gap:9px;padding:11px 12px 12px;border-radius:16px;background:var(--ysx-panel);border:1px solid var(--ysx-line);min-width:0}
.ysrc-rh{display:flex;align-items:center;gap:8px;min-width:0}
.ysrc-rh>i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ysx-inner);border:1px solid var(--ysx-line);font-style:normal;font-size:11px;font-weight:800}
.ysrc-row.done .ysrc-rh>i{background:var(--ysx-sun);color:#000;border-color:#000}
.ysrc-rh>i .ysrc-i{width:12px;height:12px}
.ysrc-rh>b{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ysrc-rh .v{flex:1;min-width:0;font-size:12.5px;color:var(--ysx-muted);font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysrc-row.done .ysrc-rh .v{color:var(--ysx-ink)}
.ysrc-rb{display:flex;flex-direction:column;gap:9px;min-width:0}
.ysrc-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.ysrc-chips.wrap{display:flex}
.ysrc-chips button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ysx-line);background:var(--ysx-inner);color:var(--ysx-ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ysrc-chips button:hover{border-color:var(--ysx-ink)}
.ysrc-chips button.on{background:var(--ysx-ink);color:var(--ysx-panel);border-color:var(--ysx-ink)}
html[data-theme="dark"] .ysrc-chips button.on{background:var(--ysx-sun);color:#000;border-color:var(--ysx-sun)}
.ysrc-sep{width:1px;align-self:stretch;margin:3px 4px;background:var(--ysx-line)}

/* faces: a strip of the cast, the whole cast in the sheet */
.ysrc-faces{display:grid;grid-auto-rows:max-content;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.ysrc-face{position:relative;display:block;padding:0;border:0;border-radius:12px;overflow:hidden;background:#15151a;cursor:pointer;outline:2px solid transparent;outline-offset:2px;color:#fff;font:inherit}
.ysrc-face::before{content:"";display:block;padding-top:150%}
.ysrc-face>img,.ysrc-face>.ysrc-fv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ysrc-face>.ysrc-fv{z-index:1}
.ysrc-face>span{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:11px;font-weight:800;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.ysrc-face.on{outline-color:var(--ysx-sun)}
.ysrc-face.more{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ysx-inner);color:var(--ysx-ink);border:1px dashed var(--ysx-line)}
.ysrc-face.more::before{display:none}
.ysrc-face.more b{font-size:13px}
.ysrc-face.more span{position:static;background:none;padding:2px 4px 0;font-size:10.5px;color:var(--ysx-muted);text-align:center;font-weight:600}

/* voices: cards with ▶; a ring fills while the sample plays */
.ysrc-voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ysrc-vc{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:14px;border:1px solid var(--ysx-line);background:var(--ysx-inner);min-width:0}
.ysrc-vc.on{border-color:var(--ysx-ink);box-shadow:inset 0 0 0 1px var(--ysx-ink);background:var(--ysx-panel)}
html[data-theme="dark"] .ysrc-vc.on{border-color:var(--ysx-sun);box-shadow:inset 0 0 0 1px var(--ysx-sun)}
.ysrc-vplay{--p:0;position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:conic-gradient(var(--ysx-sun) calc(var(--p) * 360deg),rgba(127,127,127,.28) 0);color:var(--ysx-ink);cursor:pointer}
.ysrc-vplay::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ysx-panel)}
.ysrc-vplay>.ysrc-i{position:relative;width:13px;height:13px;margin-left:2px}
.ysrc-vplay.pl>.ysrc-i{margin-left:0}
.ysrc-vplay:hover:not([disabled])::before{background:var(--ysx-sun)}
.ysrc-vplay:hover:not([disabled])>.ysrc-i{color:#000}
.ysrc-vplay[disabled]{opacity:.4;cursor:default}
.ysrc-vplay.ic{background:var(--ysx-sun);cursor:default}
.ysrc-vplay.ic::before{display:none}
.ysrc-vplay.ic>.ysrc-i{color:#000;margin:0}
.ysrc-vpick{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;background:none;padding:0;text-align:left;color:var(--ysx-ink);font:inherit;cursor:pointer}
.ysrc-vpick b{font-size:13px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-vpick small{font-size:11px;color:var(--ysx-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ysx-sun);color:#000}
.ysrc-ck .ysrc-i{width:12px;height:12px;stroke-width:3}
.ysrc-vall{display:flex;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--ysx-line);border-radius:14px;background:none;color:var(--ysx-ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;min-height:48px}
.ysrc-vall:hover{border-color:var(--ysx-ink)}

/* scripts */
.ysrc-scripts{display:flex;flex-direction:column;gap:6px}
.ysrc-sc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 12px;border-radius:14px;border:1px solid var(--ysx-line);background:var(--ysx-inner);color:var(--ysx-ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.ysrc-sc b{font-size:13px;font-weight:800}
.ysrc-sc span{font-size:12.5px;color:var(--ysx-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-sc small{font-size:11px;font-weight:700;color:var(--ysx-faint)}
.ysrc-sc:hover{border-color:var(--ysx-ink)}
.ysrc-sc.on{border-color:var(--ysx-ink);box-shadow:inset 0 0 0 1px var(--ysx-ink);background:var(--ysx-panel)}
html[data-theme="dark"] .ysrc-sc.on{border-color:var(--ysx-sun);box-shadow:inset 0 0 0 1px var(--ysx-sun)}
.ysrc-sc.own{cursor:default}
.ysrc-sc.own span{white-space:normal}
.ysrc-paste{display:flex;flex-direction:column;gap:8px}
.ysrc-paste textarea{width:100%;resize:vertical;min-height:110px;line-height:1.45}
.ysrc-len{font-size:12.5px;color:var(--ysx-muted)}
.ysrc-len b{color:var(--ysx-ink)}
.ysrc-len.bad b{color:var(--ysx-bad)}
.ysrc-fmt{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--ysx-sun);color:#000;font-size:11.5px;font-weight:800}
.ysrc-make{display:flex;flex-direction:column;gap:6px;padding:2px 0}
.ysx-primary.rec{background:#c81e1e;border-color:#c81e1e;color:#fff!important}

/* your take (catfish) */
.ysrc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:16px;border-radius:14px;border:2px dashed var(--ysx-line);background:var(--ysx-inner);text-align:center;cursor:pointer;font-size:13px}
.ysrc-drop span{font-size:12px;color:var(--ysx-muted)}
.ysrc-drop.drag,.ysrc-drop:hover{border-color:var(--ysx-sun)}
.ysrc-takes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto}
.ysrc-tk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;border:0;background:none;color:var(--ysx-ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.ysrc-tk>span{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#0b0b0c;outline:2px solid transparent;outline-offset:2px}
.ysrc-tk.on>span{outline-color:var(--ysx-sun)}
.ysrc-tk>span>:is(img,video){width:100%;height:100%;object-fit:cover;display:block}
.ysrc-tk em{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:1px 6px;border-radius:999px}
.ysrc-tk b{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-tk small{font-size:10.5px;color:var(--ysx-muted)}
.ysrc-opts{display:flex;flex-direction:column;gap:6px}
.ysrc-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--ysx-line);background:var(--ysx-inner);color:var(--ysx-ink);font:inherit;text-align:left;cursor:pointer}
.ysrc-opt>i{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ysx-line);display:grid;place-items:center}
.ysrc-opt.on>i{background:var(--ysx-sun);border-color:#000;color:#000}
.ysrc-opt>i .ysrc-i{width:12px;height:12px;stroke-width:3}
.ysrc-opt span{display:flex;flex-direction:column}
.ysrc-opt b{font-size:13px}
.ysrc-opt small{font-size:11.5px;color:var(--ysx-muted)}
.ysrc-opt.on{border-color:var(--ysx-ink)}
html[data-theme="dark"] .ysrc-opt.on{border-color:var(--ysx-sun)}

/* earlier results */
.ysrc-res{display:flex;flex-direction:column;gap:8px}
.ysrc-rv{display:flex;gap:10px;align-items:flex-start;padding:6px;border-radius:14px;border:1px solid transparent}
.ysrc-rv.on{border-color:var(--ysx-sun);background:var(--ysx-inner)}
.ysrc-rvt{position:relative;flex:none;width:54px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:0;padding:0;background:#0b0b0c;cursor:pointer}
.ysrc-rvt img{width:100%;height:100%;object-fit:cover;display:block}
.ysrc-rvt em{position:absolute;right:3px;bottom:3px;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);padding:0 5px;border-radius:999px}
.ysrc-rv.bad .ysrc-rvt img{filter:grayscale(.7) brightness(.6)}
.ysrc-rvd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ysrc-rvd b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysrc-rvd small{font-size:11.5px;color:var(--ysx-muted)}
.ysrc-rv.bad .ysrc-rvd small{color:var(--ysx-bad)}

/* ── the stage ── */
.ysrc-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.ysrc-ph>img,.ysrc-ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ysrc-ph>video[controls]{object-fit:contain;background:#000}
.ysrc-ph>video.mirror{transform:scaleX(-1)}
.ysrc-cap{position:absolute;z-index:2;left:8%;right:8%;bottom:9%;text-align:center;color:#fff;font-weight:800;font-size:15px;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.ysrc-vmeta{font-size:12.5px;color:var(--ysx-muted)}
.ysrc-vmeta b{color:var(--ysx-ink)}
.ysrc-recdot{position:absolute;z-index:3;top:12px;left:12px;padding:3px 10px;border-radius:999px;background:rgba(200,20,20,.9);color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ysrc-tp{position:absolute;z-index:3;left:0;right:0;top:0;max-height:34%;overflow:auto;padding:44px 16px 14px;background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.4));color:#fff;font-size:17px;font-weight:700;line-height:1.45;scroll-behavior:smooth}
.ysrc-pair{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px}
.ysrc-pair figure{margin:0;flex:1 1 0;min-width:0;max-width:260px;height:100%;max-height:520px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ysrc-pair .ysx-phone{flex:1 1 auto;min-height:0;height:auto;width:100%;border-radius:24px;border-width:6px}
.ysrc-pair figcaption{font-size:12px;font-weight:700;color:var(--ysx-muted)}
.ysrc-to{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ysx-sun);color:#000}
.ysrc-ph.job>img{filter:saturate(.85)}
.ysrc-sheen{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 30%,rgba(255,215,49,.28) 50%,transparent 70%);background-size:250% 100%;animation:ysrcSheen 2.2s linear infinite}
@keyframes ysrcSheen{from{background-position:120% 0}to{background-position:-120% 0}}
.ysrc-pct{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.ysrc-job>b{font-size:14px}
.ysrc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ysrc-steps li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ysx-faint)}
.ysrc-steps li>i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ysx-line);display:grid;place-items:center;flex:none}
.ysrc-steps li>i .ysrc-i{width:11px;height:11px;stroke-width:3}
.ysrc-steps li>i .ysrc-spin{width:10px;height:10px}
.ysrc-steps li.done{color:var(--ysx-muted)}
.ysrc-steps li.done>i{background:var(--ysx-mint);border-color:var(--ysx-mint);color:#000}
.ysrc-steps li.now{color:var(--ysx-ink);font-weight:700}
.ysrc-steps li.now>i{border-color:var(--ysx-sun)}
.ysrc-steps li small{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums}
.ysrc-pieces{display:flex;gap:5px;flex-wrap:wrap}
.ysrc-pieces span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ysx-inner);color:var(--ysx-muted)}
.ysrc-pieces span.now{background:var(--ysx-warn-bg);color:var(--ysx-ink)}
.ysrc-pieces span.done{background:rgba(85,219,156,.22);color:var(--ysx-ink)}
.ysrc-job .ysx-hint .ysrc-i{width:13px;height:13px}

/* ── sheets over the sandbox: the whole cast, all the voices ── */
.ysrc-sheet{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:24px;background:var(--ysx-panel);border:1px solid var(--border,#000);box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;animation:ysrcIn .16s both}
@keyframes ysrcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ysrc-shh{display:flex;align-items:flex-start;gap:12px}
.ysrc-shh>div{flex:1;display:flex;flex-direction:column;gap:2px}
.ysrc-shh b{font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.ysrc-shh span{font-size:12.5px;color:var(--ysx-muted)}
.ysrc-wall{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-auto-rows:max-content;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:12px;align-content:start;padding:2px}
.ysrc-ft{position:relative;display:block;padding:0;border:0;border-radius:14px;overflow:hidden;background:#15151a;cursor:pointer;outline:2px solid transparent;outline-offset:2px;color:#fff;font:inherit}
.ysrc-ft::before{content:"";display:block;padding-top:177.78%}
.ysrc-ft>img,.ysrc-ft>.ysrc-fv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ysrc-ft>.ysrc-fv{z-index:1}
.ysrc-ft.on{outline-color:var(--ysx-sun)}
.ysrc-ft:hover{transform:translateY(-2px)}
.ysrc-fn{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;padding:24px 9px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));text-align:left}
.ysrc-fn b{font-size:13px}
.ysrc-fn small{font-size:10.5px;opacity:.85}
.ysrc-moves{position:absolute;z-index:2;left:7px;top:7px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center}
.ysrc-moves .ysrc-i{width:10px;height:10px;margin-left:1px}
.ysrc-ft .ysrc-ck{position:absolute;z-index:2;top:7px;right:7px}
.ysrc-mk{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;background:var(--ysx-inner);border:1px solid var(--ysx-line)}
.ysrc-mk>div:first-child{display:flex;flex-direction:column}
.ysrc-mk>div:first-child span{font-size:12px;color:var(--ysx-muted)}
.ysrc-search{display:flex;align-items:center;gap:6px;flex:1 1 200px;min-width:0;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ysx-line);background:var(--ysx-inner)}
.ysrc-search input{flex:1;min-width:0;border:0;background:none;color:var(--ysx-ink);font:inherit;font-size:13px;outline:none}
.ysrc-vgrid{flex:1 1 auto;min-height:0;overflow:auto;display:grid;grid-auto-rows:max-content;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;align-content:start;padding:2px}

@media (max-width:1180px) and (min-width:900px){.ysrc-faces{grid-template-columns:repeat(4,minmax(0,1fr))}.ysrc-voices{grid-template-columns:minmax(0,1fr)}}
@media (max-width:899px){
  .ysrc-sheet{position:fixed;inset:0;border-radius:0;z-index:1000;padding:14px 12px}
  .ysrc-pair figure{max-height:420px}
  .ysrc-pair{min-height:380px}
}
@media (max-width:560px){
  .ysrc-seg button{flex-direction:column;gap:2px;height:52px;font-size:11.5px}
  .ysrc-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ysrc-voices{grid-template-columns:minmax(0,1fr)}
  .ysrc-takes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ysrc-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ysrc-fn small{display:none}
  .ysrc-vgrid{grid-template-columns:minmax(0,1fr)}
  .ysrc-pair{gap:6px}
  .ysrc-pair figure{max-height:340px}
}

/* one border only (Adi, Oct 9): the Source card is not a second box inside the panel; its rows carry the lines */
.ysx-card.ysrc{background:transparent;border:0;padding:2px 0 0;border-radius:0}
.ysrc-line{margin:-2px 2px 0;font-size:12.5px;line-height:1.45;color:var(--ysx-muted)}
/* Upload my take: a small looping explainer, three steps lighting up in turn (CSS only) */
.ysrc-explain{padding:12px;border-radius:16px;background:var(--ysx-panel);border:1px solid var(--ysx-line)}
.ysrc-explain ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.ysrc-explain li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.ysrc-explain li b{font-size:11.5px;line-height:1.3;color:var(--ysx-muted);font-weight:700}
.ysrc-exi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ysx-inner);border:1px solid var(--ysx-line);color:var(--ysx-muted)}
.ysrc-exi .ysrc-i{width:19px;height:19px}
.ysrc-explain li.ar{color:var(--ysx-faint)}
.ysrc-explain li.ar .ysrc-i{width:14px;height:14px}
.ysrc-explain li.s1 .ysrc-exi{animation:ysrcStep 4.5s infinite 0s}
.ysrc-explain li.s2 .ysrc-exi{animation:ysrcStep 4.5s infinite 1.5s}
.ysrc-explain li.s3 .ysrc-exi{animation:ysrcStep 4.5s infinite 3s}
.ysrc-explain li.s1 b{animation:ysrcStepT 4.5s infinite 0s}
.ysrc-explain li.s2 b{animation:ysrcStepT 4.5s infinite 1.5s}
.ysrc-explain li.s3 b{animation:ysrcStepT 4.5s infinite 3s}
@keyframes ysrcStep{0%,30%{background:var(--ysx-sun);color:#000;border-color:#000;transform:translateY(-2px) scale(1.06)}36%,100%{background:var(--ysx-inner);color:var(--ysx-muted);border-color:var(--ysx-line);transform:none}}
@keyframes ysrcStepT{0%,30%{color:var(--ysx-ink)}36%,100%{color:var(--ysx-muted)}}
@media (prefers-reduced-motion:reduce){.ysrc-explain li .ysrc-exi,.ysrc-explain li b{animation:none}}
.ysrc-drop.big{min-height:150px}

/* the explainer under the drop: three real scenes in turn (the take uploads · three templates, one picked · the real
   render); a still strip when motion is reduced */
.ysrc-exv{margin:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:var(--ysx-panel);border:1px solid var(--ysx-line)}
.ysrc-exh{display:flex;gap:6px;flex-wrap:wrap}
.ysrc-exh span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 4px;border-radius:999px;background:var(--ysx-inner);font-size:11px;font-weight:700;color:var(--ysx-muted);transition:background .3s,color .3s}
.ysrc-exh span i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--ysx-line);font-style:normal;font-size:10px}
.ysrc-exv[data-step="0"] .ysrc-exh [data-i="0"],.ysrc-exv[data-step="1"] .ysrc-exh [data-i="1"],.ysrc-exv[data-step="2"] .ysrc-exh [data-i="2"]{background:var(--ysx-sun);color:#000}
.ysrc-exv[data-step="0"] .ysrc-exh [data-i="0"] i,.ysrc-exv[data-step="1"] .ysrc-exh [data-i="1"] i,.ysrc-exv[data-step="2"] .ysrc-exh [data-i="2"] i{background:#000;color:var(--ysx-sun)}
.ysrc-exstage{position:relative;height:300px}
.ysrc-exs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;pointer-events:none}
.ysrc-exv[data-step="0"] .s0,.ysrc-exv[data-step="1"] .s1,.ysrc-exv[data-step="2"] .s2{opacity:1;transform:none}
.ysrc-exph{flex:none;height:100%;aspect-ratio:9/16;border-radius:22px;border:5px solid #1b1b1f;background:#000;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ysrc-exph video,.ysrc-excard video{width:100%;height:100%;object-fit:cover;display:block}
.ysrc-exv[data-step="0"] .s0 .ysrc-exph{animation:ysrcDrop .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ysrcDrop{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
.ysrc-exup{display:flex;flex-direction:column;gap:6px;max-width:220px}
.ysrc-exup b{font-size:14px}
.ysrc-exup small{font-size:11.5px;color:var(--ysx-muted);line-height:1.4}
.ysrc-exbar{display:block;height:6px;border-radius:3px;background:var(--ysx-inner);overflow:hidden}
.ysrc-exbar i{display:block;height:100%;width:0;background:var(--ysx-sun);border-radius:3px}
.ysrc-exv[data-step="0"] .ysrc-exbar i{animation:ysrcFill 2.4s .4s ease-out forwards}
@keyframes ysrcFill{to{width:100%}}
.ysrc-excard{position:relative;flex:none;height:86%;aspect-ratio:9/16;display:flex;flex-direction:column;gap:6px}
.ysrc-excard video{border-radius:12px;flex:1;min-height:0;outline:3px solid transparent;outline-offset:3px;transition:outline-color .2s}
.ysrc-excard b{font-size:11px;text-align:center;color:var(--ysx-muted)}
.ysrc-exv[data-step="1"] .ysrc-excard.pick video{animation:ysrcPick 3s forwards}
.ysrc-exv[data-step="1"] .ysrc-excard.pick b{animation:ysrcPickT 3s forwards}
@keyframes ysrcPick{0%,55%{outline-color:transparent}62%,100%{outline-color:var(--ysx-sun)}}
@keyframes ysrcPickT{0%,55%{color:var(--ysx-muted)}62%,100%{color:var(--ysx-ink)}}
.ysrc-excur{position:absolute;left:78%;top:85%;width:18px;height:22px;background:#fff;clip-path:polygon(0 0,0 85%,25% 65%,45% 100%,62% 92%,42% 58%,75% 58%);filter:drop-shadow(0 1px 2px #000);opacity:0}
.ysrc-exv[data-step="1"] .ysrc-excur{animation:ysrcCur 3s forwards}
@keyframes ysrcCur{0%{opacity:0;left:78%;top:85%}15%{opacity:1}55%{left:52%;top:50%;transform:scale(1)}60%{transform:scale(.85)}66%,100%{left:52%;top:50%;transform:scale(1);opacity:1}}
.ysrc-exv figcaption{font-size:11px;color:var(--ysx-faint);font-weight:600}
.ysrc-explain{display:none}
@media (prefers-reduced-motion:reduce){.ysrc-exv{display:none}.ysrc-explain{display:block}}
@media (max-width:560px){.ysrc-exstage{height:260px}.ysrc-exs{gap:8px}.ysrc-exup{max-width:140px}.ysrc-exh span{font-size:10px}}

/* Create your own avatar: the first tile, the sheet (photos with a consent box, or a description) */
.ysrc-face.create{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;background:var(--ysx-sun);color:#000;border:0;text-align:center}
.ysrc-face.create::before{display:none}
.ysrc-face.create>.ysrc-i{width:20px;height:20px}
.ysrc-face.create b{font-size:12px;line-height:1.2}
.ysrc-face.create span{position:static;background:none;padding:0;font-size:10.5px;color:rgba(0,0,0,.7);font-weight:600;text-align:center}
.ysrc-face.own{outline-color:rgba(255,215,49,.45)}
.ysrc-face.own.on{outline-color:var(--ysx-sun)}
.ysrc-face.pend{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--ysx-inner);color:var(--ysx-muted);border:1px dashed var(--ysx-line)}
.ysrc-face.pend::before{display:none}
.ysrc-face.pend>span:last-child{position:static;background:none;padding:0;font-size:11px;text-align:center;color:var(--ysx-muted)}
.ysrc-ownp{display:flex;flex-direction:column;gap:10px;max-width:640px}
.ysrc-ownp textarea{width:100%;resize:vertical;line-height:1.45}
.ysrc-ownthumbs{display:flex;gap:10px}
.ysrc-ownthumbs span{position:relative;width:96px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#15151a}
.ysrc-ownthumbs img{width:100%;height:100%;object-fit:cover}
.ysrc-ownthumbs button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.ysrc-ownthumbs em{position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:10px;font-weight:800;text-align:center;padding:3px;background:var(--ysx-sun);color:#000}
.ysrc-consent{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;background:var(--ysx-inner);border:1px solid var(--ysx-line);font-size:13px;font-weight:600;cursor:pointer}
.ysrc-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ysx-sun);flex:none}
/* Pick options: a few chip rows, then four faces to choose from */
.ysrc-pkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ysrc-pkrow>.dim{width:64px;flex:none;font-size:12px;font-weight:700}
.ysrc-pkh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:4px}
.ysrc-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:640px}
.ysrc-pk{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--ysx-inner);border:1px solid var(--ysx-line);padding:0;display:grid;place-items:center;color:var(--ysx-ink);font:inherit;font-size:12px}
button.ysrc-pk{cursor:pointer}
.ysrc-pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ysrc-pkgo{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:4px;height:28px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:800;opacity:0;transition:opacity .15s}
button.ysrc-pk:hover .ysrc-pkgo,button.ysrc-pk:focus-visible .ysrc-pkgo{opacity:1}
button.ysrc-pk:hover{outline:2px solid var(--ysx-sun);outline-offset:1px}
.ysrc-pk.bad{opacity:.6}
@media (hover:none){.ysrc-pkgo{opacity:1}}
@media (max-width:600px){.ysrc-picks{grid-template-columns:repeat(2,minmax(0,1fr))}.ysrc-pkrow>.dim{width:100%}}