:root{--bg:#0f172a;--fg:#e2e8f0;--shadow:0 12px 36px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
.container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.empty{max-width:720px;text-align:center;opacity:.9}
.empty h1{margin:0 0 .25rem;font-weight:700}
.single{max-width:min(100%,1200px);width:100%;height:auto;border-radius:1rem;box-shadow:var(--shadow)}
.slider{position:relative;max-width:min(100%,1200px);width:100%;user-select:none}
.slides{position:relative;overflow:hidden;border-radius:1rem;box-shadow:var(--shadow)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.is-active{position:relative;opacity:1}
.slide img{display:block;width:100%;height:auto}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,23,42,.55);border:none;color:var(--fg);font-size:2rem;line-height:1;width:2.75rem;height:2.75rem;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.nav:hover{background:rgba(15,23,42,.8)}
.prev{left:.5rem}
.next{right:.5rem}
.dots{display:flex;gap:.5rem;justify-content:center;margin:.75rem 0 0}
.dot{width:.65rem;height:.65rem;border-radius:999px;border:2px solid rgba(226,232,240,.8);background:transparent;cursor:pointer}
.dot.is-active{background:rgba(226,232,240,.95)}