html:has(.vistas){scrollbar-gutter:auto}
html:has(.vistas),body:has(.vistas){margin:0;padding:0;background:#0b0a12;color:#ece8f2;color-scheme:dark}
.vistas{font-family:ui-sans-serif,system-ui,sans-serif;min-height:100svh;background:#0b0a12}
.vistas *{box-sizing:border-box}

.vistas-screen{position:relative;width:100%;overflow:hidden;background:#000}
.vistas-canvas{display:block;width:100%;height:70svh;min-height:320px;max-height:880px}
.vistas-screen:fullscreen{width:100vw;height:100dvh}
.vistas-styled{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.vistas-has-style .vistas-styled{display:block}
.vistas-screen:fullscreen .vistas-canvas{height:100%;min-height:0;max-height:none}

.vistas .vistas-fullscreen{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff33;border-radius:8px;background:#0b0a12a6;color:#f2eef8;cursor:pointer;opacity:1;transition:opacity .3s,background .2s,border-color .2s;z-index:2;backdrop-filter:blur(6px)}
.vistas .vistas-fullscreen:hover{background:#1d1a2b;border-color:#ffffff80}
.vistas .vistas-fullscreen[hidden]{display:none}
.vistas-contract{display:none}
.vistas-screen:fullscreen .vistas-expand{display:none}
.vistas-screen:fullscreen .vistas-contract{display:block}
.vistas-screen:fullscreen.vistas-idle{cursor:none}
.vistas-screen:fullscreen.vistas-idle .vistas-fullscreen{opacity:0;pointer-events:none}
.vistas-screen:fullscreen.vistas-idle .vistas-fullscreen:focus-visible{opacity:1;pointer-events:auto}

.vistas-panel{border-top:1px solid #24202f;padding:28px 4vw 24px;max-width:1600px;margin:0 auto}
.vistas-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.vistas-heading h1{font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#f6f2fb;margin:0}
.vistas-by{font-weight:400;color:#958ea6;margin-left:4px}
.vistas-by a{color:#b8b0c8;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:3px}
.vistas-by a:hover{color:#f6f2fb;text-decoration-color:currentColor}
.vistas-now{font-family:Georgia,serif;font-size:36px;letter-spacing:-.5px;line-height:1.15;margin:8px 0 6px;color:#f6f2fb}
.vistas-blurb{font-size:14px;line-height:1.5;color:#b2abc2;margin:0;max-width:640px}
.vistas-actions{display:flex;align-items:center;gap:22px;flex-shrink:0}
.vistas button.vistas-pause{font:inherit;font-size:13px;background:#ece6f7;color:#16121f;border:1px solid #ece6f7;border-radius:6px;padding:0 18px;min-width:84px;min-height:44px;cursor:pointer}
.vistas button.vistas-pause:hover{background:#fff}
.vistas-shuffle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#d6d0e2;cursor:pointer;min-height:44px;user-select:none}
.vistas-shuffle input{width:18px;height:18px;margin:0;accent-color:#c9b8f0;cursor:pointer}
.vistas-shuffle:hover{color:#f6f2fb}
.vistas-speed{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;font-size:11px;letter-spacing:.3px;color:#b8b0c8;width:190px}
.vistas-speed output{color:#a49cb6;font-variant-numeric:tabular-nums;text-align:right}
.vistas-speed input{grid-column:1 / -1;width:100%;margin:0;accent-color:#c9b8f0;height:18px;cursor:pointer}
.vistas :focus-visible{outline:2px solid #c9b8f0;outline-offset:3px}

.vistas-styles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 0;padding-top:22px;border-top:1px solid #24202f}
.vistas-styles[hidden]{display:none}
.vistas-styles-label{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#958ea6;margin-right:8px}
.vistas button.vistas-style{font:inherit;font-size:13px;color:#d6d0e2;background:#16131f;border:1px solid #2e2a3b;border-radius:999px;padding:0 15px;min-height:36px;cursor:pointer}
.vistas button.vistas-style:hover{border-color:#6c6380;color:#f6f2fb}
.vistas button.vistas-style[aria-checked=true]{background:#ece6f7;border-color:#ece6f7;color:#16121f}
.vistas-thumbs{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px}
.vistas .vistas-thumb{display:block;width:100%;padding:0;border:0;background:none;color:#b8b0c8;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.vistas-thumb-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1a1724;outline:1px solid #ffffff14;outline-offset:-1px;transition:transform .25s,box-shadow .25s}
.vistas-thumb-frame img,.vistas-thumb-frame canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.vistas-thumb-frame canvas{opacity:0}
.vistas-previewing .vistas-thumb-frame canvas{opacity:1}
.vistas-thumb span{display:block;margin-top:10px;line-height:1.3}
.vistas-thumb:hover .vistas-thumb-frame{transform:translateY(-2px);box-shadow:0 10px 24px #00000080}
.vistas-thumb:hover span{color:#ece8f2}
.vistas-thumb[aria-pressed=true] .vistas-thumb-frame{box-shadow:0 0 0 2px #0b0a12,0 0 0 4px #ece6f7}
.vistas-thumb[aria-pressed=true] span{color:#f6f2fb;font-weight:600}
.vistas .vistas-thumb:focus-visible{outline:none}
.vistas-thumb:focus-visible .vistas-thumb-frame{box-shadow:0 0 0 2px #0b0a12,0 0 0 4px #c9b8f0}

.vistas-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:28px}
.vistas-footer p{font-size:11px;color:#958ea6;line-height:1.8;margin:0}
.vistas-footer span span{margin:0 8px}
.vistas-footer kbd{font:inherit;color:#d6d0e2}
.vistas-footer em{font-style:normal}
.vistas-brand{flex-shrink:0;margin-left:auto;font-size:10px;letter-spacing:2px;color:#958ea6;text-decoration:none}
.vistas-brand:hover{color:#ece8f2}
.vistas-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1100px){.vistas-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .vistas-canvas{height:56svh;min-height:280px}
  .vistas-panel{padding:22px 16px}
  .vistas-heading{display:block}
  .vistas-now{font-size:28px}
  .vistas-actions{margin-top:20px;justify-content:space-between}
  .vistas-speed{flex:1;max-width:220px}
  .vistas-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .vistas-footer{flex-wrap:wrap}
  .vistas-keys{display:none}
  .vistas-footer .vistas-brand{font-size:9px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){.vistas .vistas-fullscreen,.vistas-thumb-frame{transition:none}}