:root{
  --bg:#0b0d12;--panel:#121521;--muted:#9aa4b2;--text:#e7ebf1;--brand:#66e3c4;--brand-2:#4cb4ff;--border:#1e2433
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:10;background:rgba(11,13,18,.7);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--border)}
.site-header .brand{display:flex;align-items:center;gap:.6rem}
.site-header .logo{font-weight:700;font-size:1.1rem;letter-spacing:.4px;color:var(--text)}
.site-header .tag{font-size:.8rem;color:var(--muted);padding:.15rem .5rem;border:1px solid var(--border);border-radius:999px}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:58px}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px;font-size:.95rem}
.nav a:hover{color:var(--text)}

.hero{padding:64px 0 42px;border-bottom:1px solid var(--border);background:radial-gradient(1200px 400px at 20% -10%,rgba(102,227,196,.14),transparent),radial-gradient(900px 320px at 85% -10%,rgba(76,180,255,.12),transparent)}
.hero h1{margin:0 0 10px;font-size:2.2rem}
.subtitle{color:var(--muted);max-width:900px;margin:0 0 16px}
.note{color:var(--muted);font-size:.95rem}
.cta{display:flex;gap:.75rem;margin:18px 0 6px}
.btn{display:inline-block;padding:.55rem .9rem;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#081013;border:none}
.btn:hover{opacity:.95}

.section{padding:44px 0;border-bottom:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.section h2{margin:0 0 14px;font-size:1.5rem}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.cols.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
.card{border:1px solid var(--border);background:var(--panel);padding:14px;border-radius:12px;color:var(--text)}

pre.code{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:auto}
code{color:#e6f7ff}

.site-footer{padding:22px 0;color:var(--muted)}
.site-footer .container{display:flex;gap:10px;align-items:center}
.site-footer .sep{opacity:.5}

@media (max-width:960px){
  .grid.two,.cols.two,.cards{grid-template-columns:1fr}
  .nav{display:none}
  .hero{padding-top:44px}
}
/* ===== HTML Gallery Carousel ===== */
.carousel {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.carousel-window {
  width: 100%;
  height: min(70vh, 720px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.carousel-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.carousel-btn {
  height: 44px;
  width: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.carousel-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.carousel-open {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .carousel {
    grid-template-columns: 40px 1fr 40px;
  }
  .carousel-window {
    height: min(65vh, 560px);
  }
}