:root{
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --surface: rgba(10, 24, 44, 0.7);
  --surface-border: rgba(255,255,255,0.08);
  --accent: #62f1ff;
  --accent-soft: rgba(98, 241, 255, 0.15);
  --fg: #e6f1ff;
  --fg-soft: rgba(230, 241, 255, 0.7);
  --bg: radial-gradient(120% 120% at 80% 0%, #10183c 0%, #04070f 45%, #03040c 100%);
}
*{box-sizing:border-box}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  top:-100%;
  left:0;
  padding:0.75rem 1.5rem;
  background:var(--accent);
  color:#000;
  font-weight:600;
  border-radius:0 0 8px 0;
  z-index:9999;
  text-decoration:none;
}
.skip-link:focus{
  top:0;
  outline:3px solid var(--fg);
  outline-offset:2px;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem,5vw,4rem);
  color:var(--fg);
  font-family:var(--font-base, var(--font-sans));
  background:var(--bg);
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--overlay, radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,0.12) 0%, transparent 70%));
  opacity:0.9;
  pointer-events:none;
}
a{
  color:var(--accent);
  text-decoration:none;
  position:relative;
}
a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.2rem;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.4;
  transition:opacity 180ms ease;
}
a:hover::after{opacity:0.8}
a:focus{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:4px;
}
.backdrop{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.pattern{
  position:absolute;
  inset:0;
  mix-blend-mode:screen;
  opacity:0.12;
  background-size:40px 40px;
  animation:drift 22s linear infinite;
}
.pattern-secondary{
  opacity:0.08;
  animation-duration:36s;
  transform:rotate(12deg) scale(1.1);
}
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.fx canvas{
  width:100%;
  height:100%;
  display:block;
  opacity:0.35;
}
.fx .particle{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  filter:blur(1px);
  animation:particlePulse 5s ease-in-out infinite;
}
.fx.fx-sparkle .particle{filter:blur(0);}
.fx .particle::after{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius:inherit;
  background:inherit;
  filter:blur(12px);
  opacity:0.4;
}
.fx .orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  animation:orbit-spin 20s linear infinite;
}
.fx .orbit::after{
  content:"";
  position:absolute;
  top:-4px;
  left:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  transform:translateX(-50%);
  box-shadow:0 0 16px var(--accent);
}
.fx .scanner{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  animation:scanner-sweep 14s ease-in-out infinite;
}
.shell{
  position:relative;
  max-width: min(720px, 100%);
  width:100%;
  padding:clamp(2rem, 4vw, 3rem);
  border:1px solid var(--surface-border);
  border-radius:24px;
  background:var(--surface, rgba(8,18,38,0.65));
  box-shadow:0 40px 80px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter:blur(32px);
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  z-index:2;
}
.hero{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--fg-soft);
}
h1{
  margin:0;
  font-size:clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing:-0.02em;
  font-weight:600;
}
.tagline{
  margin:0;
  font-size:clamp(1rem, 2.8vw, 1.3rem);
  color:var(--fg-soft);
}
.blurb{
  margin:0;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--fg);
}
.highlights, .notes{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.65rem;
}
.highlights li{
  padding:0.35rem 0.75rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
}
.notes{
  flex-direction:column;
  gap:0.45rem;
}
.notes li{
  position:relative;
  padding-left:1.4rem;
  color:var(--fg-soft);
  line-height:1.4;
}
.notes li::before{
  content:"▸";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-family:var(--font-mono);
}
.cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:0.5rem;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem 1.2rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:500;
  font-size:0.95rem;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  text-decoration:none;
}
.button-primary{
  background:var(--accent);
  color:#020407;
  font-family:var(--font-mono);
  box-shadow:0 18px 40px -18px var(--accent);
}
.button-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 45px -16px var(--accent);
}
.button-primary:focus{
  outline:3px solid var(--fg);
  outline-offset:3px;
}
.button-ghost{
  border-color:var(--accent-soft, rgba(255,255,255,0.2));
  color:var(--accent);
  background:rgba(255,255,255,0.02);
}
.button-ghost:hover{
  border-color:var(--accent);
  background:rgba(255,255,255,0.06);
}
.button-ghost:focus{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
footer{
  position:absolute;
  inset-inline:0;
  bottom:1.5rem;
  text-align:center;
  font-size:0.85rem;
  color:var(--fg-soft);
  letter-spacing:0.02em;
  z-index:2;
}
footer a{
  color:inherit;
  text-decoration:none;
  transition:color 0.2s ease, opacity 0.2s ease;
}
footer a:hover{
  color:var(--accent);
  opacity:1;
}
footer a:focus{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1.05);}
  50%{transform:translate3d(10px, -20px,0) scale(1.08);}
  100%{transform:translate3d(0,0,0) scale(1.05);}
}
@keyframes particlePulse{
  0%,100%{transform:scale(0.6);opacity:0.4;}
  50%{transform:scale(1.3);opacity:0.9;}
}
@keyframes orbit-spin{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}
@keyframes scanner-sweep{
  0%,100%{transform:translateY(-100%);}
  50%{transform:translateY(100%);}
}
/* Markdown content block styling */
.markdown-content{
  margin-top:2rem;
  padding:2rem 0;
  border-top:1px solid var(--surface-border);
  max-width:65ch;
  line-height:1.7;
}
.markdown-content h1,.markdown-content h2,.markdown-content h3{
  color:var(--accent);
  margin-top:1.5em;
  margin-bottom:0.5em;
  font-weight:600;
}
.markdown-content h1{font-size:1.75rem;}
.markdown-content h2{font-size:1.4rem;}
.markdown-content h3{font-size:1.15rem;}
.markdown-content p{
  margin:1em 0;
  color:var(--fg-soft);
}
.markdown-content a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.markdown-content a:hover{
  border-bottom-color:var(--accent);
}
.markdown-content ul,.markdown-content ol{
  padding-left:1.5em;
  margin:1em 0;
}
.markdown-content li{
  margin:0.5em 0;
  color:var(--fg-soft);
}
.markdown-content li strong{
  color:var(--accent);
  font-weight:600;
}
.markdown-content code{
  font-family:var(--font-mono);
  font-size:0.9em;
  padding:0.2em 0.4em;
  background:var(--accent-soft);
  border-radius:3px;
}
.markdown-content pre{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:8px;
  padding:1rem;
  overflow-x:auto;
  margin:1.5em 0;
}
.markdown-content pre code{
  background:transparent;
  padding:0;
}
.markdown-content blockquote{
  margin:1.5em 0;
  padding-left:1.5rem;
  border-left:3px solid var(--accent);
  font-style:italic;
  color:var(--fg-soft);
}
.markdown-content hr{
  border:none;
  border-top:1px solid var(--surface-border);
  margin:2em 0;
}

/* Game CTA */
.game-cta{
  margin:2rem 0 1rem;
  text-align:center;
}
.game-cta .button{
  font-size:1.1rem;
  padding:0.875rem 2rem;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}

@media (max-width:640px){
  body{padding:1.75rem;}
  .shell{padding:1.75rem; border-radius:18px;}
  footer{position:static;margin-top:2rem;}
  .markdown-content{padding:1.5rem 0;}
}

/* Print styles */
@media print{
  *{animation:none !important;transition:none !important;}
  body{background:white;color:black;padding:0;}
  body::before,.backdrop,.fx,.pattern,.button-ghost{display:none;}
  .shell{background:white;border:1px solid #ddd;box-shadow:none;backdrop-filter:none;max-width:100%;padding:2rem;}
  .hero h1{color:#000;}
  .tagline,.blurb{color:#333;}
  a{color:#0066cc;text-decoration:underline;}
  a::after{display:none;}
  .button-primary{background:#0066cc;color:white;border:none;}
  footer{position:static;color:#666;page-break-before:avoid;}
}