.canvas-showcase { position:relative; width:794px; }
.canvas-demo-page .cv-page { margin:0; }
.canvas-demo-controls { display:flex; justify-content:center; align-items:center; gap:2px; padding:4px 6px; width:max-content; max-width:100%; margin:14px auto 0; border:1px solid #d7e6df; border-radius:24px; background:#fffffff2; box-shadow:0 3px 12px #06352a12; }
.canvas-demo-controls button { display:grid; place-items:center; padding:0; width:30px; height:30px; flex:0 0 30px; border:0; border-radius:50%; background:transparent; color:#06352a; cursor:pointer; }
.canvas-demo-dot span { width:7px; height:7px; border-radius:50%; background:#c6d5ce; transition:background .2s,transform .2s; }
.canvas-demo-dot[aria-pressed="true"] span { background:#06352a; transform:scale(1.35); }
.canvas-demo-play { font-size:19px; }
.canvas-demo-controls button:hover { background:#edf5f0; }
.canvas-demo-controls button:focus-visible { outline:2px solid #b08a2e; outline-offset:1px; }
:is(.tpl-thumb,.g-thumb)>.canvas-showcase { width:100%; height:100%; }
:is(.tpl-thumb,.g-thumb) .canvas-demo-controls { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:2; margin:0; }
#pvHost:has(.canvas-showcase) .cv-page { margin-bottom:0; }
#landingPreviewControls:empty { display:none; }
#landingPreviewControls .canvas-demo-controls { margin:8px auto; }
.landing-preview-dialog:has(#landingPreviewControls:not(:empty)) .landing-preview-body { max-height:calc(100dvh - 193px); }
.preview-stage:has(.canvas-showcase) { flex-direction:column; align-items:center; gap:14px; scroll-margin-top:110px; }
#pvCanvasControls .canvas-demo-controls { margin:0; }
@media(prefers-reduced-motion:reduce) { .canvas-demo-dot span { transition:none; } }