* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#0a0e18; --panel:#101828; --line:#24304e; --text:#c9dcf2; --dim:#8ea6c8;
  --teal:#53d7c8; --mint:#7effc4; --amber:#ffb347;
}
html { scroll-behavior:smooth; }
body { background:radial-gradient(120% 90% at 50% -10%, #17233f 0%, var(--ink) 55%); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; line-height:1.55; overflow-x:hidden; }
a { color:var(--teal); text-decoration:none; }
#top { position:sticky; top:0; z-index:9; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(10,14,24,.82); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.logo { font-weight:800; letter-spacing:.18em; color:var(--mint); }
#top nav { display:flex; gap:16px; font-size:14px; }
#top nav a { color:var(--dim); } #top nav a:hover { color:var(--mint); }
#hero { display:flex; gap:34px; align-items:center; flex-wrap:wrap; padding:52px 6vw 44px; }
#hero-copy { flex:1 1 400px; min-width:min(100%,420px); }
h1 { font-size:clamp(38px,7vw,72px); letter-spacing:.1em; color:var(--mint);
  text-shadow:0 0 30px rgba(126,255,196,.35), 0 2px 0 #06110c; }
.tagline { margin:14px 0 26px; font-size:clamp(15px,2vw,19px); color:var(--text); max-width:34em; }
#play-now, #play-now-2 { display:inline-block; padding:16px 36px; border-radius:14px; font-weight:800;
  font-size:17px; letter-spacing:.08em; color:#04140e; background:linear-gradient(120deg,#4dffb0,#1ba883);
  box-shadow:0 8px 30px rgba(47,214,168,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .15s ease; }
#play-now:hover, #play-now-2:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 12px 36px rgba(47,214,168,.55); }
.fine { margin-top:14px; font-size:12.5px; color:var(--dim); }
#hero-preview { flex:1 1 420px; width:min(100%,640px); height:auto; aspect-ratio:640/420; border-radius:18px;
  border:1px solid var(--line); background:#0a0e18; box-shadow:0 24px 70px rgba(0,0,0,.55); }
main { max-width:1120px; margin:0 auto; padding:10px 6vw 40px; }
h2 { font-size:clamp(22px,3.4vw,32px); letter-spacing:.06em; color:#e6f2ff; margin:40px 0 18px;
  border-left:4px solid var(--teal); padding-left:14px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
#gallery figure { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.4); }
#gallery img { display:block; width:100%; height:auto; }
#gallery figcaption { padding:10px 14px; font-size:13px; color:var(--dim); border-top:1px solid var(--line); }
#features { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
#features li { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; font-size:14.5px; }
#features b { color:var(--mint); display:block; margin-bottom:4px; }
#features code { color:var(--amber); }
#controls { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; font-size:15px; }
#controls table { border-collapse:collapse; margin:14px 0; width:100%; }
#controls td { padding:7px 10px; border-bottom:1px solid var(--line); font-size:14px; }
#controls td:first-child { color:var(--mint); font-weight:700; white-space:nowrap; width:110px; }
#controls em { color:var(--mint); font-style:normal; }
#play-section { text-align:center; padding:30px 0 10px; }
footer { margin-top:50px; padding:26px 6vw 34px; border-top:1px solid var(--line); display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); }
@media (max-width:640px) {
  #hero { padding:34px 5vw 30px; gap:22px; }
  #top nav { display:none; }
  #play-now, #play-now-2 { width:100%; text-align:center; }
  #controls td:first-child { width:auto; }
}