:root{--background:#090a0f;--surface:#101118;--surface-raised:#151720;--text:#f4f5f8;--muted:#9a9eac;--line:#292c38;--line-strong:#3a3e4d;--accent:#766cf1;--accent-hover:#8e85ff}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{min-height:100vh;margin:0;background:radial-gradient(circle at 50% 10%,rgba(118,108,241,.12),transparent 36rem),var(--background);color:var(--text);font-family:Manrope,system-ui,sans-serif}
button{font:inherit}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}:focus-visible{outline:2px solid var(--accent-hover);outline-offset:4px}
.shell{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.site-header{border-bottom:1px solid rgba(41,44,56,.72);background:rgba(9,10,15,.86);backdrop-filter:blur(18px)}
.nav{display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:.98rem;font-weight:800;letter-spacing:-.02em}
.brand-mark{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised)}
.brand-mark img{width:25px;height:25px;object-fit:contain}.home-link{color:var(--muted);font-size:.84rem;font-weight:700}.home-link:hover{color:var(--text)}
.theme-gallery{padding:clamp(64px,8vh,100px) 0 72px;text-align:center}
h1{min-height:1.15em;margin:0 0 40px;font-size:clamp(2.8rem,6vw,5rem);font-weight:800;letter-spacing:-.065em;line-height:1.15}
.coverflow{--side-shift:118%;--side-shift-left:-118%;--side-angle:35deg;--side-angle-right:-35deg;--side-scale:.82;position:relative;display:grid;width:min(100%,1020px);min-height:clamp(430px,56vw,540px);margin-inline:auto;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at center 58%,rgba(118,108,241,.13),transparent 62%),linear-gradient(160deg,var(--surface-raised),var(--surface));box-shadow:0 30px 80px rgba(0,0,0,.34);perspective:1100px;isolation:isolate;touch-action:pan-y}
.coverflow::after{position:absolute;right:8%;bottom:7%;left:8%;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);content:''}
.cover{position:absolute;display:grid;width:clamp(190px,26vw,300px);height:min(75%,410px);place-items:center;border:1px solid rgba(118,108,241,.3);border-radius:18px;padding:24px;background:linear-gradient(145deg,#1d1f2b,#11121a);box-shadow:0 22px 55px rgba(0,0,0,.46);transition:transform .34s ease,filter .34s ease,opacity .34s ease,border-color .2s ease}
.cover img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
.cover.current{z-index:2;transform:translateZ(80px)}
.cover.side{z-index:1;cursor:pointer;opacity:0;pointer-events:none;filter:blur(3px) brightness(.7)}
.coverflow.has-neighbours .cover.side{opacity:.72;pointer-events:auto}
.cover.previous{transform:translateX(var(--side-shift-left)) rotateY(var(--side-angle)) scale(var(--side-scale))}
.cover.next{transform:translateX(var(--side-shift)) rotateY(var(--side-angle-right)) scale(var(--side-scale))}
.cover.side:hover{border-color:var(--accent);filter:blur(1px) brightness(.95);opacity:.95}.cover.side:disabled{cursor:default}
.coverflow.move-next .cover.current{animation:from-right var(--move-duration,.34s) ease-out}
.coverflow.move-next .cover.previous{animation:to-left var(--move-duration,.34s) ease-out}
.coverflow.move-previous .cover.current{animation:from-left var(--move-duration,.34s) ease-out}
.coverflow.move-previous .cover.next{animation:to-right var(--move-duration,.34s) ease-out}
@keyframes from-right{from{transform:translateX(var(--side-shift)) rotateY(var(--side-angle-right)) scale(var(--side-scale));opacity:.72}to{transform:translateZ(80px);opacity:1}}
@keyframes from-left{from{transform:translateX(var(--side-shift-left)) rotateY(var(--side-angle)) scale(var(--side-scale));opacity:.72}to{transform:translateZ(80px);opacity:1}}
@keyframes to-left{from{transform:translateZ(80px);opacity:1}to{transform:translateX(var(--side-shift-left)) rotateY(var(--side-angle)) scale(var(--side-scale));opacity:.72}}
@keyframes to-right{from{transform:translateZ(80px);opacity:1}to{transform:translateX(var(--side-shift)) rotateY(var(--side-angle-right)) scale(var(--side-scale));opacity:.72}}
@media(max-width:700px){.shell{width:min(100% - 28px,1160px)}.nav{min-height:68px}.theme-gallery{padding-top:58px}h1{margin-bottom:30px}.coverflow{--side-shift:91%;--side-shift-left:-91%;--side-angle:42deg;--side-angle-right:-42deg;--side-scale:.7;min-height:430px}.cover{width:clamp(160px,43vw,250px);height:330px;padding:16px}}
@media(max-width:440px){.coverflow{--side-shift:78%;--side-shift-left:-78%;--side-angle:44deg;--side-angle-right:-44deg;--side-scale:.68;min-height:390px;border-radius:16px}.cover{width:56vw;height:295px;padding:12px}}
@media(prefers-reduced-motion:reduce){.cover{transition:none}.coverflow.move-next .cover,.coverflow.move-previous .cover{animation:none}}