:root { --bg:#0a0a0f; --surface:#12121a; --border:#2a2a45; --green:#00ff41; --blue:#00aaff; --amber:#ffb000; --red:#ff3355; --text:#e8e8f0; --text-dim:#8888a0; --text-muted:#555570; --radius:12px; --font-sans:system-ui,-apple-system,sans-serif; --font-mono:"SF Mono","Fira Code",Consolas,monospace; }
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; background:var(--bg); color:var(--text); font-family:var(--font-sans); overflow:hidden; user-select:none; }
  .slide { position:fixed; inset:0; display:none; flex-direction:column; justify-content:center; align-items:center; padding:5vh 6vw; }
  .slide.active { display:flex; }
  .slide-bg { position:absolute; inset:0; overflow:hidden; z-index:-1; }
  .slide-bg .grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,170,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,170,255,0.03) 1px, transparent 1px); background-size:4vh 4vh; }
  .content { position:relative; z-index:1; width:100%; max-width:90vw; }
  h1 { font-size:clamp(32px,5vw,80px); font-weight:900; line-height:1.1; letter-spacing:-0.05em; margin-bottom:1.2vh; }
  h1 .accent { color:var(--green); } h1 .red { color:var(--red); } h1 .amber { color:var(--amber); } h1 .blue { color:var(--blue); }
  h2 { font-size:clamp(24px,3.2vw,52px); font-weight:700; margin-bottom:1.5vh; letter-spacing:-0.03em; }
  h2 .accent { color:var(--green); } h2 .red { color:var(--red); } h2 .amber { color:var(--amber); } h2 .blue { color:var(--blue); }
  p.subtitle { font-size:clamp(14px,1.6vw,26px); color:var(--text-dim); line-height:1.6; max-width:80%; font-weight:300; }
  p.body { font-size:clamp(13px,1.4vw,22px); color:var(--text); line-height:1.6; max-width:85%; }
  .meta { font-family:var(--font-mono); font-size:clamp(10px,0.9vw,14px); color:var(--text-muted); margin-top:2vh; }
  .tag { display:inline-block; padding:0.4em 1.2em; border-radius:20px; font-family:var(--font-mono); font-size:clamp(10px,0.85vw,13px); font-weight:500; letter-spacing:0.03em; margin-bottom:1.2vh; }
  .tag-green { background:rgba(0,255,65,0.1); color:var(--green); border:1px solid rgba(0,255,65,0.2); }
  .tag-red { background:rgba(255,51,85,0.1); color:var(--red); border:1px solid rgba(255,51,85,0.2); }
  .tag-amber { background:rgba(255,176,0,0.1); color:var(--amber); border:1px solid rgba(255,176,0,0.2); }
  .tag-blue { background:rgba(0,170,255,0.1); color:var(--blue); border:1px solid rgba(0,170,255,0.2); }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2vh; width:100%; }
  .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.8vh; width:100%; }
  .grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1.4vh; width:100%; }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2vh 2vw; transition:all 0.3s; }
  .card h3 { font-size:clamp(13px,1.3vw,22px); font-weight:600; margin-bottom:0.6vh; }
  .card p { font-size:clamp(11px,1vw,16px); color:var(--text-dim); line-height:1.5; }
  .card .icon { font-size:clamp(24px,2.4vw,40px); margin-bottom:1vh; display:block; }
  .card .source { font-size:clamp(9px,0.7vw,12px); font-family:var(--font-mono); color:var(--text-muted); margin-top:1vh; display:block; }
  .nav { position:fixed; bottom:2.5vh; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:1.2vw; z-index:50; font-family:var(--font-mono); background:rgba(10,10,15,0.8); backdrop-filter:blur(12px); padding:1vh 1.8vw; border-radius:40px; border:1px solid var(--border); }
  .nav button { background:none; border:none; color:var(--text-dim); font-size:clamp(14px,1.2vw,20px); cursor:pointer; padding:0.4vh 0.8vw; border-radius:8px; transition:all 0.2s; font-family:var(--font-mono); }
  .nav button:hover { color:var(--green); background:var(--surface); }
  .nav .counter { color:var(--text-muted); font-size:clamp(10px,0.85vw,14px); min-width:4vw; text-align:center; }
  .nav .dot { width:0.7vh; height:0.7vh; border-radius:50%; background:var(--surface); transition:0.3s; }
  .nav .dot.active { background:var(--blue); box-shadow:0 0 1vh var(--blue); }
  .nav .dots { display:flex; gap:0.4vw; align-items:center; }
  .progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--blue), var(--green)); z-index:60; transition:width 0.4s ease; }
  .checklist { list-style:none; width:100%; }
  .checklist li { padding:0.8vh 0; border-bottom:1px solid var(--border); font-size:clamp(11px,1.1vw,18px); display:flex; align-items:center; gap:0.8vw; }
  .checklist li::before { content:'⬡'; color:var(--blue); font-size:clamp(12px,1.2vw,20px); }