:host{display:block;position:relative;overflow:hidden}:host(.off) *,:host(.off) *::before,:host(.off) *::after{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){:host(:not(:hover)) *,:host(:not(:hover)) *::before,:host(:not(:hover)) *::after{animation-play-state:paused!important}}.s{position:absolute;inset:0;overflow:hidden;container-type:size;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}/* The preview kit: what every coded preview shares, so 400+ cards read as one video being cut.
   Loaded once per page after the preview base and before each preview's own <style>.
   Plates are --pv-<name> variables set on :root (composer.py embeds them); a missing plate
   falls back to a flat gradient of the same tone, so previews work before the plates exist. */
.pv-plate{position:absolute;inset:0;background:var(--pv-wide,linear-gradient(#f0b36a,#c8744a 58%,#5a7a4a 58%)) center/cover no-repeat}
.pv-plate.face{background-image:var(--pv-face,linear-gradient(120deg,#e9b98f,#8a5a3c))}
.pv-plate.cat{background-image:var(--pv-cat,linear-gradient(120deg,#f1a35a,#8c4a26))}
.pv-plate.town{background-image:var(--pv-town,linear-gradient(#f5c98a,#b86f48 55%,#6b4a3a 55%))}
.pv-plate.walk{background-image:var(--pv-walk,linear-gradient(#f3bb72,#9c6a44 60%,#4e6a3f 60%))}
.pv-plate.night{background-image:var(--pv-night,linear-gradient(#0f1a3a,#2a3b6e 60%,#0b1020 60%))}
.pv-plate.selfie{background-image:var(--pv-selfie,linear-gradient(120deg,#f0d2b4,#9a7a62))}
.pv-plate.dim::after{content:"";position:absolute;inset:0;background:rgba(10,12,20,.45)}
/* The PawBytes mark: a paw and the wordmark, for shots whose subject is text, logos or UI. */
.pv-mark{position:absolute;display:inline-flex;align-items:center;gap:.6em;font:900 9cqw/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.pv-mark::before{content:"";width:1em;height:1em;flex:none;background:var(--pv-paw) center/contain no-repeat}
.pv-mark.ink{color:#1b1d26}.pv-mark.ink::before{background-image:var(--pv-paw-ink)}
.pv-mark.accent{color:#ff6d52}.pv-mark.accent::before{background-image:var(--pv-paw-accent)}
.pv-mark.center{left:50%;top:50%;transform:translate(-50%,-50%)}
/* The label strip: what the viewer is looking at, in the same place on every card. */
.pv-label{position:absolute;left:3cqw;top:4cqh;z-index:5;font:700 2.7cqw/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:#fff;background:rgba(12,13,20,.72);padding:.8cqh 1.6cqw;border-radius:3cqw;white-space:nowrap;max-width:90cqw;overflow:hidden;text-overflow:ellipsis}
.pv-sub{position:absolute;left:3cqw;top:15cqh;z-index:5;font:800 2.6cqw/1 ui-monospace,Consolas,monospace;letter-spacing:.2cqw;text-transform:uppercase;color:#ffe600;-webkit-text-stroke:.55cqw rgba(12,13,20,.9);paint-order:stroke fill;text-shadow:0 .3cqh 1cqw rgba(0,0,0,.7);white-space:nowrap}
.pv-label.right{left:auto;right:3cqw}.pv-label.bottom{top:auto;bottom:4cqh}
/* The beat strip: the cut rhythm as a timeline with a playhead; one <i> per shot, its flex = its length. */
.pv-beats{position:absolute;left:0;right:0;bottom:0;z-index:5;height:12cqh;padding:2.6cqh 3cqw;display:flex;gap:.5cqw;background:linear-gradient(transparent,rgba(12,13,20,.85) 40%);font:700 2.4cqw/1 system-ui,sans-serif;color:#fff}
.pv-beats i{flex:1;position:relative;border-radius:.8cqh;background:rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-style:normal;overflow:hidden;white-space:nowrap}
.pv-beats i.on{background:#ff6d52}
.pv-beats .pv-ph{position:absolute;top:1.6cqh;bottom:1.6cqh;left:3cqw;width:.6cqw;background:#fff;border-radius:1cqw;animation:pv-ph var(--pv-loop,6s) linear infinite}
@keyframes pv-ph{to{left:97cqw}}
/* Captions: the baseline every caption style starts from. */
.pv-cap{position:absolute;left:8%;right:8%;bottom:16cqh;z-index:4;text-align:center;font:700 4.2cqw/1.3 system-ui,sans-serif;color:#fff;text-shadow:0 .3cqh 1cqw rgba(0,0,0,.7);text-wrap:balance}
/* A phone, for vertical formats; its screen is a size container so a plate crops to 9:16 inside it. */
.pv-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88cqh;aspect-ratio:9/16;border-radius:3cqw;overflow:hidden;background:#000;box-shadow:0 0 0 .6cqw #2e3040,0 2cqh 4cqw rgba(0,0,0,.5);container-type:size}
.pv-phone .pv-plate{background-position:center}
/* Film frame: letterbox bars and a grade, when a look wants to say "cinema". */
.pv-bars::before,.pv-bars::after{content:"";position:absolute;left:0;right:0;height:9cqh;background:#000;z-index:3}
.pv-bars::before{top:0}.pv-bars::after{bottom:0}.pv-label,.pv-sub{display:none!important}.pv-beats,.pv-beats *{color:transparent!important;-webkit-text-stroke:0!important;text-shadow:none!important}