:root { --lv-bg:#080a0f; --lv-surface:#11151e; --lv-primary:#8df0c6; --lv-secondary:#8aa4ff; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(circle at 15% 20%, rgba(138,164,255,.16), transparent 28%), radial-gradient(circle at 84% 12%, rgba(141,240,198,.12), transparent 24%), linear-gradient(#080a0f,#0d1119); }
.preview-orbit { position:absolute; width:min(34rem,52vw); aspect-ratio:1; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:0; top:-10rem; animation:orbit 20s linear infinite; }
.preview-orbit::before,.preview-orbit::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.06);border-radius:50%;inset:12%;}.preview-orbit::after{inset:28%;}
@keyframes orbit{to{transform:rotate(1turn)}}
.preview-hero { position:relative; min-height: 72vh; display:grid; align-items:center; overflow:hidden; }
.preview-hero__grid { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:3rem; }
.preview-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .75rem; border:1px solid var(--lv-line); border-radius:999px; color:var(--lv-muted); font-size:.8rem; }
.preview-badge i { width:.5rem; height:.5rem; border-radius:50%; background:var(--lv-primary); box-shadow:0 0 18px var(--lv-primary); }
.preview-hero h1 { max-width: 10ch; margin:1.5rem 0; }
.preview-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.preview-meta .card { padding:1.25rem; }
.preview-meta strong { display:block; font-size:1.8rem; }
.preview-tools { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.filters { display:flex; flex-wrap:wrap; gap:.55rem; }
.filter { min-height:44px; padding:.6rem .9rem; border:1px solid var(--lv-line); border-radius:999px; background:transparent; color:var(--lv-muted); cursor:pointer; }
.filter.is-active { background:var(--lv-text); color:var(--lv-bg); border-color:var(--lv-text); }
.theme-toggle { min-width:44px; min-height:44px; border:1px solid var(--lv-line); border-radius:50%; background:transparent; cursor:pointer; }
.demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.demo-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--lv-line); border-radius:1.5rem; background:var(--lv-surface); transition:transform .45s var(--lv-ease), border-color .3s, opacity .3s; }
.demo-card:hover { transform:translateY(-8px); border-color:rgba(255,255,255,.35); }
.demo-card[hidden] { display:none; }
.demo-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--thumb-bg,#171a22); }
.demo-thumb::before { content:""; position:absolute; inset:12%; border:1px solid rgba(255,255,255,.18); border-radius:1rem; transform:perspective(800px) rotateX(8deg) rotateY(-7deg); transition:transform .6s var(--lv-ease); }
.demo-card:hover .demo-thumb::before { transform:perspective(800px) rotateX(0) rotateY(0) scale(1.03); }
.demo-thumb::after { content:""; position:absolute; width:40%; aspect-ratio:1; border-radius:50%; background:var(--thumb-accent,#8df0c6); filter:blur(40px); opacity:.3; right:3%; bottom:-20%; transition:transform .6s var(--lv-ease); }
.demo-card:hover .demo-thumb::after { transform:translate(-20%,-25%) scale(1.2); }
.thumb-lines { position:absolute; inset:22% 18%; display:grid; align-content:center; gap:.65rem; }
.thumb-lines span { height:.45rem; border-radius:999px; background:rgba(255,255,255,.8); transform-origin:left; animation:linePulse 4s ease-in-out infinite; }
.thumb-lines span:nth-child(2){width:72%;opacity:.5;animation-delay:.2s}.thumb-lines span:nth-child(3){width:46%;opacity:.25;animation-delay:.4s}
@keyframes linePulse{50%{transform:scaleX(.82);opacity:.55}}
.demo-card__body { padding:1.25rem; display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:end; }
.demo-card__body p { margin:0; color:var(--lv-muted); font-size:.9rem; }
.demo-card__body h3 { margin:0 0 .3rem; font-size:1.25rem; }
.demo-index { font-size:.72rem; color:var(--lv-primary); letter-spacing:.12em; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.feature-grid .card { padding:1.4rem; }
.feature-grid h3 { font-size:1rem; }
.feature-grid p { margin:0; color:var(--lv-muted); font-size:.9rem; }
[data-theme="light"] { --lv-bg:#f4f1e9; --lv-surface:#fff; --lv-text:#141414; --lv-muted:#5f625f; --lv-line:rgba(0,0,0,.14); color-scheme:light; }
[data-theme="light"] body::before { background:radial-gradient(circle at 15% 20%,rgba(91,111,255,.10),transparent 28%),linear-gradient(#f4f1e9,#ebe9e2); }
@media(max-width:900px){.preview-hero__grid,.demo-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feature-grid{grid-template-columns:1fr}.preview-meta{grid-template-columns:1fr}.demo-card__body{grid-template-columns:1fr}.demo-card__body .button{width:100%}}