/* Basic purple theme, readable, and edge-friendly */
:root{
  --bg:#0b0420;
  --bg-alt:#140a35;
  --text:#f7f2ff;
  --muted:#b7a8e8;
  --accent:#6249ea;
  --accent-strong:#4e35dd;
  --card:#130c2b;
  --border:#2a2340;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.container{max-width:1080px;margin:0 auto;padding:16px}

.site-header{
  position:sticky;top:0;backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(11,4,32,0.7);border-bottom:1px solid var(--border);z-index:10
}
.site-header .container{display:flex;align-items:center;gap:16px}
.logo{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}
.nav a{color:var(--muted);text-decoration:none;margin:0 10px}
.nav a[aria-current="page"], .nav a:hover{color:var(--text)}

.hero h1{font-size:clamp(28px,4vw,42px);margin:16px 0 8px}
.hero-cta{display:flex;gap:12px;margin:10px 0 20px}
button{
  background:var(--accent);color:white;border:0;border-radius:12px;
  padding:10px 14px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(98,73,234,.25);
}
button:hover{background:var(--accent-strong)}

.canvas-wrap{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:8px}
#scene{width:100%;height:420px;display:block}

.mini-canvas-wrap{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:6px;margin-top:12px}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
pre{background:#0f0a28;border:1px solid var(--border);border-radius:10px;padding:10px;overflow:auto}

.site-footer{border-top:1px solid var(--border);margin-top:28px}
small{color:var(--muted)}