/* Match the DualView landing-page recording demo inside a landscape phone. */
.mini-demo{padding:18px 0 55px}.capture-heading{display:flex;align-items:center;gap:7px;margin:0 0 13px;color:#ddd0ef;font-size:9px;letter-spacing:.1em;font-weight:700}.capture-dot{width:7px;height:7px;background:#ff5545;border-radius:50%;flex-shrink:0}
.demo-wide.capture-phone{aspect-ratio:1.95;border:7px solid #111216;border-radius:28px;box-shadow:0 0 0 1px #79747f,0 2px 0 2px #38353e,0 15px 30px #08080c70;overflow:hidden;background:#111216}.capture-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.capture-phone:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0006,transparent 15%,transparent 75%,#0009)}.capture-lens{position:absolute;z-index:4;left:6px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#07080c;box-shadow:inset 0 0 0 2px #292c34}.capture-phone .recording{z-index:2;left:21px;top:10px;font-size:9px;background:#11151bd9}.capture-phone .format{z-index:2;left:21px;bottom:12px;background:#11151bd9}.capture-phone .crop-guide{left:26.18%;width:31.64%;z-index:1}.capture-timer{position:absolute;right:17px;top:10px;z-index:2;font:700 10px monospace;color:white;background:#11151bd9;padding:3px 6px;border-radius:4px;font-variant-numeric:tabular-nums}.capture-corner{position:absolute;left:21px;top:43px;width:14px;height:14px;border-top:1px solid #fffc;border-left:1px solid #fffc;z-index:2}.capture-mode{position:absolute;left:44%;bottom:12px;font-size:8px;color:#ffdc85;letter-spacing:.1em;z-index:2}.capture-zoom{position:absolute;left:44%;bottom:37px;color:white;font-size:9px;border:1px solid #ffffff70;background:#11151b80;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;z-index:2}.capture-record{position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:#10101566;padding:0;cursor:pointer}.capture-record span{width:28px;height:28px;border-radius:50%;background:#ff5545;transition:border-radius .2s,width .2s,height .2s}.is-playing .capture-record span{width:20px;height:20px;border-radius:5px}.is-playing .capture-record:before{content:"";position:absolute;inset:-6px;border:1px solid #ff5545;border-radius:50%;animation:capture-pulse 2s infinite}.capture-switch{position:absolute;right:28px;bottom:15px;font-size:18px;color:white;z-index:2}.capture-home{position:absolute;right:6px;top:36%;height:28%;width:3px;border-radius:4px;background:#fff9;z-index:2}
.mini-demo .demo-tall{right:72px;top:90px;width:23%;border:3px solid #15161b;border-radius:12px;box-shadow:0 8px 20px #0008;z-index:3}.demo-tall .format{font-size:8px;bottom:9px;left:6px}.portrait-label{position:absolute;top:7px;left:5px;right:5px;font-size:6px;font-weight:700;letter-spacing:.04em;text-align:center;color:white;background:#11151baa;border-radius:3px;padding:3px 0}.mini-demo .demo-control{bottom:0}.capture-record:focus-visible{outline:3px solid #c6a5ff;outline-offset:7px}
@keyframes capture-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.3);opacity:0}}
@media(max-width:1100px) and (min-width:761px){.mini-demo .demo-tall{right:67px;top:82px}.capture-mode,.capture-zoom{left:38%}.capture-record{right:12px}}
@media(max-width:400px){.demo-wide.capture-phone{border-width:5px;border-radius:22px}.mini-demo .demo-tall{top:80px;right:60px;width:22%}.capture-record{width:44px;height:44px;right:9px}.capture-record span{width:24px;height:24px}.is-playing .capture-record span{width:17px;height:17px}.capture-switch{right:23px;bottom:9px}.capture-phone .recording{left:17px;top:7px;font-size:8px}.capture-timer{top:7px;right:13px;font-size:8px}.capture-phone .format{left:17px;bottom:8px;font-size:8px}.capture-mode{left:37%;bottom:8px;font-size:7px}.capture-zoom{left:37%;bottom:25px;width:21px;height:21px}.capture-corner{left:17px;top:34px}.portrait-label{font-size:5px}.capture-lens{width:7px;height:7px;left:4px}}
@media(prefers-reduced-motion:reduce){.is-playing .capture-record:before{animation:none}.capture-record span{transition:none}}

.capture-phone video{object-fit:contain}.capture-phone .crop-guide{left:calc(50% - 42.3467cqh);width:56.2489cqh}.capture-phone{container-type:size}

/* Two separate outputs: never place the portrait preview over the recording. */
.mini-demo{display:grid;grid-template-columns:minmax(0,3.47fr) minmax(0,1fr);gap:16px;align-items:start;padding:18px 0 0}
.capture-heading{grid-column:1/-1;margin:0}
.mini-demo .demo-wide{width:100%;min-width:0}
.mini-demo .demo-tall{position:relative;inset:auto;width:100%;min-width:0;aspect-ratio:9/16;align-self:start;border-width:4px;border-radius:16px}
.mini-demo .demo-control{position:static;grid-column:1/-1;justify-self:start;margin-top:4px}
.portrait-label{font-size:8px;line-height:1.2;letter-spacing:0;padding:5px 2px}
@media(min-width:1001px){.capture-mode,.capture-zoom,.capture-switch{display:none}.capture-phone .recording{left:15px}.capture-phone .format{left:15px}.capture-record{right:10px}.capture-timer{right:12px}}
@media(max-width:640px){.mini-demo{grid-template-columns:1fr;gap:18px}.mini-demo .demo-tall{width:42%;max-width:180px;justify-self:center;inset:auto;border-radius:18px}.portrait-label{font-size:10px}.demo-tall .format{font-size:10px}.mini-demo .demo-control{justify-self:center}.capture-heading{font-size:9px}}