:root { --bg:#061309; --text:#76ff88; --muted:#49c862; --accent:#b6ff9c; --card:#0d2412; --border:#2bea59; --glow:rgba(118,255,136,.45); }
body[data-theme="c64"]  { --bg:#261765; --text:#f5f3ff; --muted:#c8c2ff; --accent:#8d7dff; --card:#4430a5; --border:#a99cff; --glow:rgba(169,156,255,.5); }
body[data-theme="zx"]   { --bg:#000;    --text:#fff;    --muted:#d7d700; --accent:#00d7d7; --card:#0000d7; --border:#d70000; --glow:rgba(215,0,0,.5); }
body[data-theme="dark"] { --bg:#0e1116; --text:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --card:#161b22; --border:#30363d; --glow:rgba(88,166,255,.35); }
body[data-theme="light"]{ --bg:#f6f4ef; --text:#1b1b1f; --muted:#666;    --accent:#3b6cff; --card:#fff;    --border:#d8d4c8; --glow:rgba(59,108,255,.3); }

* { box-sizing:border-box; margin:0; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font:clamp(16px,2.2vw,28px)/1.4 "Cascadia Mono","Consolas",monospace; transition:background .6s, color .6s; }
#stage { position:absolute; inset:0; display:grid; place-items:center; padding:6vw; text-align:center; }
.scene { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:1.2vw; padding:4vw; perspective:1600px; }

.big   { font-size:clamp(34px,7vw,110px); font-weight:700; letter-spacing:-.02em; text-shadow:0 0 24px var(--glow); }
.mid   { font-size:clamp(22px,3.6vw,56px); text-shadow:0 0 14px var(--glow); }
.small { color:var(--muted); }
.accent{ color:var(--accent); }
.cursor::after { content:"█"; margin-left:.1em; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.typed { text-align:left; max-width:26em; white-space:pre-wrap; }

.pop { opacity:0; transform:translateY(24px) scale(.96); }
.pop.show { opacity:1; transform:none; transition:all .45s cubic-bezier(.2,.9,.3,1.2); }

.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6vw; width:min(90vw,1200px); }
.card { background:var(--card); border:2px solid var(--border); padding:1.6vw; box-shadow:0 0 18px var(--glow); }
.card b { display:block; color:var(--accent); font-size:1.15em; }
.card span { color:var(--muted); font-size:.75em; }

.stat { display:grid; gap:.2em; }
.stat strong { font-size:clamp(40px,8vw,120px); text-shadow:0 0 24px var(--glow); font-variant-numeric:tabular-nums; }
.row { display:flex; gap:5vw; flex-wrap:wrap; justify-content:center; }

.heat { display:grid; grid-template-columns:repeat(26,1fr); gap:4px; width:min(80vw,900px); }
.heat i { aspect-ratio:1; background:var(--card); border:1px solid var(--border); opacity:.35; transition:all .4s; }
.heat i.on { background:var(--text); opacity:1; box-shadow:0 0 8px var(--glow); }

.kbd { border:2px solid var(--border); padding:.1em .5em; margin:0 .15em; box-shadow:0 4px 0 var(--border); }
.window { width:min(80vw,900px); border:2px solid var(--border); background:var(--card); text-align:left; box-shadow:0 0 40px var(--glow); }
.window header { border-bottom:2px solid var(--border); padding:.4em .8em; color:var(--muted); font-size:.7em; }
.window .body { padding:1.2em; min-height:7em; white-space:pre-wrap; }

.scanlines { position:fixed; inset:0; pointer-events:none; opacity:.18;
  background:repeating-linear-gradient(0deg, transparent 0 2px, #000 3px); mix-blend-mode:multiply; }
body[data-theme="light"] .scanlines { opacity:0; }
#bar { position:fixed; left:0; right:0; bottom:0; height:4px; background:rgba(128,128,128,.25); }
#progress { display:block; height:100%; width:0; background:var(--text); }
#controls { position:fixed; bottom:12px; left:12px; display:flex; gap:12px; align-items:center; font-size:12px; opacity:0; transition:opacity .3s; color:var(--muted); }
body:hover #controls { opacity:1; }
button { font:inherit; font-size:14px; color:var(--text); background:var(--card); border:1px solid var(--border); padding:.3em .8em; cursor:pointer; }
#start { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:5; }
#start button { font-size:24px; padding:.6em 1.4em; box-shadow:0 0 30px var(--glow); }
#start.hidden { display:none; }

/* drifting glow background */
body::before, body::after { content:""; position:fixed; width:70vmax; height:70vmax; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, var(--glow), transparent 65%); filter:blur(40px); opacity:.5; transition:background 1s; }
body::before { left:-20vmax; top:-25vmax; animation:drift1 18s ease-in-out infinite alternate; }
body::after  { right:-25vmax; bottom:-30vmax; animation:drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(18vw,14vh) scale(1.2); } }
@keyframes drift2 { to { transform:translate(-16vw,-10vh) scale(1.15); } }

/* app showcase */
.showcase { grid-auto-flow:row; gap:2.2vh; }
.cap { text-align:center; min-height:5.2em; }
.cap small { display:block; color:var(--accent); letter-spacing:.3em; text-transform:uppercase; font-size:.6em; }
.cap h2 { font-size:clamp(20px,2.8vw,42px); font-weight:600; text-shadow:0 0 14px var(--glow); }
.themelabel { min-height:1.4em; }
.frame { width:min(82vw, calc(64vh * 16 / 9)); border:2px solid var(--border); background:var(--card); border-radius:12px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 60px var(--glow); transform-style:preserve-3d; will-change:transform; }
.chrome { display:flex; align-items:center; gap:7px; padding:9px 14px; border-bottom:2px solid var(--border); background:var(--card); color:var(--muted); font-size:.55em; }
.chrome i { width:11px; height:11px; border-radius:50%; background:var(--border); }
.chrome span { margin-left:10px; }
.viewport { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg); }
.viewport img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform,opacity; }
.title { perspective:800px; }