*,
*::before,
*::after{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  overflow-x:hidden;
  overscroll-behavior-x:none;
  color:#e8eef6;
  background:#000;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
}

:root{
  --card:#121722;
  --text:#e8eef6;
  --muted:#a7b2c2;
  --line:#ffffff33;
  --accent1:#6ae3ff;
  --accent2:#8df291;
  --bg:#0b0f14;
}

header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:rgba(10,14,20,0.7);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
}
.logo{ font-weight:900; font-size:1.35rem; color:var(--accent1); text-decoration:none }
#menu-icon{
  display:none; font-size:24px; cursor:pointer; color:var(--text);
  background:transparent; border:0; padding:4px 8px; border-radius:8px;
}
#nav{ display:flex; gap:16px; align-items:center }
#nav a{
  color:var(--text); text-decoration:none; font-weight:700; padding:6px 10px;
  border-radius:10px; white-space:nowrap;
}
#nav a:hover{ background:#ffffff14 }
@media (max-width:768px){
  #menu-icon{ display:block }
  #nav{
    position:absolute; top:58px; right:12px;
    flex-direction:column; gap:10px; width:220px; padding:10px;
    background:rgba(10,14,20,0.95); border:1px solid var(--line); border-radius:12px;
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.2s;
  }
  #nav.active{ transform:translateY(0); opacity:1; pointer-events:auto }
}

.hero{
  text-align:center; padding:70px 16px 36px;
  background:radial-gradient(1200px 600px at 70% -10%,#0f1725 0%,var(--bg) 60%);
}
.hero h1{
  margin:0; line-height:0.9; text-transform:lowercase;
  font-size:clamp(36px,6vw,80px); color:#eef3fb; text-shadow:0 2px 14px #000c;
}
.hero h1 span{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h2{ margin:10px 0 6px; font-weight:800; font-family: pacifico;letter-spacing: 3px; color:#d9e6ff; font-size:clamp(18px,2.2vw,26px) }
.hero p{ margin:0 auto; max-width:820px; color:#c7d2e0; font-size:clamp(14px,1.4vw,18px) }

.section-title{
  text-align:center; margin:18px 0 10px;
  font-weight:900;font-family: acme;letter-spacing: 7px;text-transform: uppercase; font-size:clamp(20px,2.8vw,28px);
  color:#eef3fb; text-shadow:0 2px 10px #000a;
}
.viewer-section{
  min-height:80vh; scroll-snap-align:start;
  display:grid; place-items:center; padding:24px 12px;
}

.viewer{
  width:min(1100px, 100%);
  margin:0 auto;
  display:grid; gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  position:relative;
}
.stage{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px; overflow:hidden;
  background:radial-gradient(1200px 600px at 70% -10%,#1a2230 0%,#0b0f14 60%);
}
@media (max-width:560px){ .stage{ aspect-ratio:4/3 } }

.viewer-canvas{
  position:absolute; inset:0;
  width:100% !important; height:100% !important; display:block;
}
.hint{
  position:absolute; right:10px; bottom:10px; font-size:.9rem;
  color:#e8eef6; font-weight:600;
  background:#ffffff12; border:1px solid var(--line);
  padding:6px 8px; border-radius:10px; backdrop-filter:blur(8px)
}

.grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.grid li{
  background:#0f1420; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; text-align:left;
}
.grid a{
  display:grid; grid-template-columns:96px 1fr; align-items:center; gap:10px;
  padding:10px; color:#ffffff; text-decoration:none; font-weight:700;
}
.grid img{
  width:96px; height:64px; object-fit:cover; border-radius:8px;
  background:#0b0f14;
}
.grid .name{ line-height:1.2 }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){
  .grid{ grid-template-columns:1fr }
  .viewer{ padding:12px }
}


/* Footer */
.site-footer{background:#050a18;color:#cfe0ff;text-align:center;padding:20px;font-size:.9rem}
.site-footer a{color:#ffcc66;text-decoration:none}
.site-footer a:hover{text-decoration:underline}