.product-tour:has(.video-demo){display:block}
.demo-screen{scroll-margin-top:86px}
.detail-body .product-tour:has(.video-demo){scroll-margin-top:86px}
.video-demo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);height:100%;min-height:0}
.demo-screen{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;padding:24px;background:var(--demo-bg);overflow:hidden}
.demo-screen video{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:8px;background:#111;box-shadow:0 15px 45px #0002}
.video-demo[data-layout=mobile] .demo-screen video{height:100%;width:auto;max-width:100%;border-radius:18px}
.demo-screen .demo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:12px;align-items:center;white-space:nowrap;padding:17px 23px;border-radius:40px;background:var(--signal);color:var(--signal-ink);border:1px solid #15171530;box-shadow:0 6px 32px #0004;font-size:13px;font-weight:600}
.demo-screen .demo-play[hidden],.demo-error[hidden]{display:none}
.demo-duration{position:absolute;right:15px;top:15px;padding:5px 9px;border-radius:15px;font-size:10px;color:#fff;background:#151715d9}
.demo-guide{padding:26px;min-height:0;overflow-y:auto;background:var(--surface);display:flex;flex-direction:column}
.demo-topline{display:flex;justify-content:space-between;gap:12px;font-size:8px;line-height:1.5;color:var(--muted);margin-bottom:18px}
.demo-variants{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.demo-variants button{border:1px solid var(--line);padding:9px 13px;min-height:40px;background:transparent;color:var(--muted);font-size:11px;border-radius:25px}
.demo-variants button[aria-pressed=true]{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.demo-caption h4{font-weight:400;font-size:clamp(22px,2.2vw,34px);line-height:1.1;letter-spacing:-.04em;margin:0 0 12px}
.demo-caption p{font-size:13px;line-height:1.7;color:var(--muted);margin:0;min-height:65px}
.demo-chapters{margin:22px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demo-chapters summary{cursor:pointer;font-size:12px;min-height:44px;padding:14px 0}
.demo-chapters summary>span{float:right;font-size:9px;color:var(--muted)}
.demo-chapters ol{list-style:none;padding:0;margin:0 0 10px}
.demo-chapters button{display:flex;align-items:baseline;gap:13px;text-align:left;width:100%;min-height:42px;padding:10px;background:none;font-size:12px;color:var(--muted);border-radius:5px}
.demo-chapters button .mono{font-size:9px;flex-shrink:0}
.demo-chapters button[aria-current=step]{color:var(--ink);background:var(--demo-bg)}
.demo-actions{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-top:18px}
.demo-actions{flex-wrap:wrap}
.demo-screen video:fullscreen{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
.demo-actions button{min-height:44px;padding:11px 17px;border:1px solid var(--line);border-radius:25px;font-size:11px;background:transparent}
.demo-actions [data-demo-toggle]{background:var(--ink);color:var(--paper)}
.demo-actions [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.demo-actions [data-demo-captions] span{font-size:9px}
.demo-guide .tour-evidence{margin-top:18px;font-size:10px}
.demo-download{font-size:10px;color:var(--muted);margin-top:12px;align-self:flex-start;text-underline-offset:4px}
.demo-error{position:absolute;inset:auto 15px 40px;margin:0;padding:16px;background:var(--paper);border:1px solid var(--line);font-size:12px}
.demo-error button{display:block;margin-top:12px;background:var(--signal);color:var(--signal-ink);padding:10px;border-radius:20px}
@media(min-width:901px) and (max-height:800px){.demo-guide{padding:20px}.demo-topline{margin-bottom:12px}.demo-caption h4{font-size:24px}.demo-caption p{font-size:12px}.demo-guide .tour-evidence{font-size:9px}.demo-chapters{margin-top:12px}}
@media(max-width:900px){.video-demo{grid-template-columns:minmax(0,1fr) minmax(260px,.9fr)}.demo-screen{min-height:350px}.video-demo[data-layout=mobile] .demo-screen{height:550px}.demo-guide{padding:22px}.demo-caption p{min-height:0}}
@media(max-width:600px){.video-demo{display:flex;flex-direction:column}.demo-screen{padding:16px 10px;min-height:0;min-width:0}.video-demo[data-layout=mobile] .demo-screen{height:min(590px,78svh);padding:20px}.demo-screen video{border-radius:4px}.demo-guide{padding:23px 20px;overflow:visible}.demo-caption h4{font-size:27px}.demo-caption p{font-size:14px}.demo-topline{font-size:8px}.demo-variants button{min-height:44px}.demo-chapters button{min-height:46px}.demo-guide .tour-evidence{font-size:11px}.demo-duration{top:8px;right:8px;font-size:9px}.detail-body .product-tour{height:auto}}
/* Phone recordings retain their native ratio and fill the phone viewport. */
@media(min-width:601px){
 .detail-body .product-tour:has(.video-demo[data-layout=mobile]){height:auto;min-height:740px}
 .video-demo[data-layout=mobile]{grid-template-columns:minmax(0,1fr) minmax(240px,.8fr)}
 .video-demo[data-layout=mobile] .demo-screen{height:auto;min-height:740px;padding:20px}
 .video-demo[data-layout=mobile] .demo-screen video{width:min(100%,390px);height:auto;max-height:none}
}
@media(max-width:600px){
 .detail-body .product-tour:has(.video-demo[data-layout=mobile]){width:calc(100% + 36px);margin-inline:-18px}
 .video-demo[data-layout=mobile] .demo-screen{height:auto;padding:0;min-height:0}
 .video-demo[data-layout=mobile] .demo-screen video{width:100%;height:auto;max-height:none;max-width:100%;border-radius:0}
}
@media(min-width:601px) and (max-width:900px){
 .detail-body .product-tour:has(.video-demo[data-layout=mobile]){min-height:0}
 .video-demo[data-layout=mobile]{display:flex;flex-direction:column}
 .video-demo[data-layout=mobile] .demo-screen{min-height:0;padding:24px}
 .video-demo[data-layout=mobile] .demo-screen video{width:min(100%,430px)}
 .video-demo[data-layout=mobile] .demo-guide{overflow:visible}
}