:root{
  --bg:#05070b; --panel:#0b111c; --panel2:#0f1728; --text:#f6f2e8; --muted:#a7b0c3;
  --gold:#e5b657; --green:#63d471; --copper:#ff8f4e; --cyan:#37d7ff; --purple:#8b5cff; --navy:#0c1830;
  --danger:#ff6b6b; --radius:28px; --shadow:0 28px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
body{
  background:radial-gradient(circle at 15% 10%,rgba(229,182,87,.17),transparent 28%),radial-gradient(circle at 80% 30%,rgba(139,92,255,.17),transparent 30%),linear-gradient(160deg,#030509,#08111e 55%,#05070b);
}
#ambient{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 80%)}
#sidebar{
  position:fixed;z-index:20;left:0;top:0;bottom:0;width:292px;padding:26px 22px;background:rgba(5,7,11,.72);backdrop-filter:blur(28px);border-right:1px solid rgba(255,255,255,.08);transform:translateX(0);transition:transform .25s ease;overflow:auto;
}
#sidebar.closed{transform:translateX(-102%)}
.brand-mini{display:flex;align-items:center;gap:12px;margin-bottom:26px}.brand-mini strong{display:block;letter-spacing:.02em}.brand-mini small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.orb{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,var(--gold),#90651b);box-shadow:0 0 34px rgba(229,182,87,.5)}
#sectionNav{display:flex;flex-direction:column;gap:6px}#sectionNav button{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13px}#sectionNav button.active,#sectionNav button:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}.hint{font-size:12px;color:#79849a;line-height:1.55;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
#app{height:100%;display:flex;flex-direction:column;transition:margin-left .25s ease;margin-left:292px;min-width:0}
#sidebar.closed+#app{margin-left:0}
.topbar{height:62px;display:flex;align-items:center;gap:18px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(5,7,11,.25);backdrop-filter:blur(12px)}
button{font:inherit}
#menuBtn,.controls button,#mapBtn,#closeMap{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--text);border-radius:14px;padding:10px 14px;cursor:pointer}
.controls button:hover,#menuBtn:hover,#mapBtn:hover,#closeMap:hover{background:rgba(255,255,255,.12)}
.progress{height:7px;flex:1;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--copper),var(--purple),var(--cyan));border-radius:inherit;transition:width .25s ease}.counter{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.slide{flex:1;display:grid;place-items:center;padding:34px;overflow:hidden;min-width:0}
.stage{width:min(1500px,96vw);height:min(820px,calc(100vh - 150px));border:1px solid rgba(255,255,255,.1);border-radius:36px;background:linear-gradient(145deg,rgba(17,24,39,.84),rgba(5,9,17,.92));box-shadow:var(--shadow);position:relative;overflow:hidden;padding:54px}.stage:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 20% 0%,rgba(229,182,87,.18),transparent 30%),radial-gradient(circle at 85% 12%,rgba(55,215,255,.13),transparent 28%);pointer-events:none}.content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;min-width:0}.eyebrow{color:var(--gold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:18px}.title{font-size:clamp(46px,5.2vw,82px);line-height:.95;letter-spacing:-.06em;margin:0;max-width:1080px}.subtitle{font-size:clamp(18px,1.8vw,30px);line-height:1.35;color:#d8dfed;max-width:900px;white-space:pre-line;margin:24px 0 0}.body{display:grid;gap:14px;margin-top:30px;max-width:900px}.bullet{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);padding:16px 18px;border-radius:18px;color:#dce5f7}.bullet:before{content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px var(--gold);flex:none}.bullet strong{display:block;color:#fff;margin-bottom:4px}.media{border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#05070b;box-shadow:0 24px 80px rgba(0,0,0,.42)}.media img{width:100%;height:100%;object-fit:contain;display:block}.hero .media{position:absolute;inset:0;opacity:.27;border:0;border-radius:0;filter:saturate(1.05) contrast(1.05)}.hero .media img{object-fit:cover}.hero .content{justify-content:flex-end}.hero .title{font-size:clamp(62px,7vw,116px)}.hero .subtitle{font-size:clamp(20px,2vw,34px);max-width:760px}.hero .content:after{content:"";position:absolute;inset:auto -54px -54px -54px;height:45%;background:linear-gradient(to top,rgba(5,7,11,.95),transparent);z-index:-1}.image .content{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center}.image .media{height:100%;min-height:0}.image .title{font-size:clamp(42px,4vw,68px)}.image .subtitle{font-size:22px}.standard .content,.bullets .content{justify-content:center}.quote .content{justify-content:center;align-items:flex-start}.quote .title{font-size:clamp(54px,6vw,100px);max-width:1200px}.quote .subtitle{font-size:clamp(22px,2.3vw,36px);max-width:1000px;color:#fff}.controls{height:70px;display:flex;justify-content:center;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.06);background:rgba(5,7,11,.28)}
.arch-wrap{height:100%;display:flex;flex-direction:column}.arch-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.arch-title h1{font-size:48px;line-height:1;margin:0;letter-spacing:-.05em}.arch-title p{margin:9px 0 0;color:var(--muted);font-size:18px}.architecture{flex:1;position:relative;border-radius:28px;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 30%),rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.09);padding:20px;overflow:hidden}.arch-grid{height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(7,1fr);gap:12px}.node{border:1px solid rgba(255,255,255,.11);background:rgba(8,14,26,.84);border-radius:18px;padding:11px 13px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;transition:.25s ease}.node b{font-size:14px}.node small{font-size:10px;color:var(--muted);margin-top:4px}.node.dim{opacity:.22;filter:grayscale(.9)}.node.active{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px rgba(229,182,87,.25),0 0 38px rgba(229,182,87,.22);transform:translateY(-2px)}.node.green.active{border-color:var(--green);box-shadow:0 0 38px rgba(99,212,113,.22)}.node.copper.active{border-color:var(--copper);box-shadow:0 0 38px rgba(255,143,78,.22)}.node.purple.active{border-color:var(--purple);box-shadow:0 0 38px rgba(139,92,255,.22)}.node.cyan.active{border-color:var(--cyan);box-shadow:0 0 38px rgba(55,215,255,.22)}.root{grid-column:5/9;grid-row:1}.method{grid-column:1/4;grid-row:1}.vc{grid-column:1/5;grid-row:3}.saguaro{grid-column:6/10;grid-row:2}.ocotillo{grid-column:6/10;grid-row:3}.tachyon{grid-column:4/6;grid-row:5}.road{grid-column:6/8;grid-row:5}.tqi{grid-column:8/10;grid-row:5}.zero{grid-column:10/12;grid-row:5}.opx{grid-column:2/4;grid-row:6}.green{grid-column:4/6;grid-row:6}.health{grid-column:6/8;grid-row:6}.frp{grid-column:8/10;grid-row:6}.guardian{grid-column:10/12;grid-row:6}.reign{grid-column:1/3;grid-row:4}.tbc{grid-column:3/5;grid-row:4}.prime{grid-column:10/12;grid-row:7}.zp{grid-column:8/10;grid-row:7}.legend{position:absolute;right:18px;bottom:16px;color:var(--muted);font-size:12px;background:rgba(0,0,0,.25);padding:8px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.08)}
.overlay{position:fixed;z-index:50;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(20px);display:grid;place-items:center}.overlay.hidden{display:none}.overlay-inner{width:min(1300px,92vw);height:min(780px,85vh);background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:28px}.overlay-inner h2{margin:0 0 16px;font-size:30px}#closeMap{position:absolute;right:28px;top:24px;font-size:28px;padding:6px 16px}.overlay .architecture{height:calc(100% - 60px)}
.sidebar-backdrop{
  position:fixed;inset:0;z-index:15;border:0;background:rgba(0,0,0,.56);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}
body.sidebar-open .sidebar-backdrop[hidden]{display:block}
@media(max-width:900px){
  #sidebar{
    width:min(86vw,320px);
    background:rgba(5,7,11,.9);
    box-shadow:16px 0 60px rgba(0,0,0,.45);
    transform:translateX(-102%);
  }
  #sidebar.closed{transform:translateX(-102%)}
  #sidebar:not(.closed){transform:translateX(0)}
  #app{margin-left:0}
  .topbar{height:auto;min-height:56px;gap:12px;padding:12px 14px}
  #menuBtn{min-width:44px;min-height:44px;padding:8px 12px}
  .progress{height:6px}
  .counter{font-size:12px}
  .slide{padding:12px 12px 14px;align-items:stretch;overflow:auto}
  .stage{
    width:100%;
    min-height:calc(100vh - 132px);
    height:auto;
    padding:18px;
    border-radius:22px;
  }
  .content{height:auto;gap:16px}
  .hero .content,.image .content,.standard .content,.bullets .content,.quote .content{
    justify-content:flex-start;
  }
  .hero .content{padding-bottom:12px}
  .hero .media{
    position:relative;
    inset:auto;
    order:2;
    opacity:.42;
    height:220px;
    margin-top:auto;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
  }
  .hero .media img{object-fit:cover}
  .hero .content:after{inset:auto -18px -18px -18px;height:34%;border-radius:0 0 22px 22px}
  .title{font-size:clamp(30px,8vw,46px);line-height:.98;max-width:none}
  .hero .title{font-size:clamp(34px,9vw,54px)}
  .subtitle{font-size:16px;line-height:1.45;margin-top:14px;max-width:none}
  .hero .subtitle{font-size:17px;max-width:none}
  .body{margin-top:18px;gap:10px;max-width:none}
  .bullet{padding:13px 14px;border-radius:16px;font-size:14px}
  .bullet:before{margin-top:6px}
  .image .content{grid-template-columns:1fr;gap:16px}
  .image .media{order:2;height:auto;max-height:42vh}
  .image .title{font-size:clamp(28px,7vw,42px)}
  .image .subtitle{font-size:16px}
  .quote .title{font-size:clamp(34px,8vw,52px)}
  .quote .subtitle{font-size:clamp(17px,4.5vw,24px)}
  .controls{
    height:auto;
    padding:10px 12px 12px;
    flex-wrap:wrap;
  }
  .controls button{flex:1 1 0;min-width:0}
  .arch-wrap{min-height:0}
  .arch-title{flex-direction:column;align-items:flex-start;gap:10px}
  .arch-title h1{font-size:clamp(28px,8vw,40px)}
  .arch-title p{font-size:15px;margin-top:0}
  .architecture{padding:14px;overflow:auto}
  .arch-grid{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(10,minmax(78px,auto));gap:10px;min-height:860px}
  .node{padding:7px 8px;border-radius:14px}
  .node b{font-size:9px;line-height:1.1}
  .node small{display:none}
  .root{grid-column:2/6;grid-row:1}
  .method{grid-column:1/3;grid-row:2}
  .vc{grid-column:1/4;grid-row:3}
  .saguaro{grid-column:4/7;grid-row:3}
  .ocotillo{grid-column:4/7;grid-row:4}
  .tachyon{grid-column:1/3;grid-row:6}
  .road{grid-column:3/5;grid-row:6}
  .tqi{grid-column:5/7;grid-row:6}
  .zero{grid-column:5/7;grid-row:7}
  .opx{grid-column:1/3;grid-row:7}
  .green{grid-column:3/5;grid-row:7}
  .health{grid-column:1/3;grid-row:8}
  .frp{grid-column:3/5;grid-row:8}
  .guardian{grid-column:5/7;grid-row:8}
  .reign{grid-column:1/3;grid-row:4}
  .tbc{grid-column:3/5;grid-row:4}
  .prime{grid-column:3/5;grid-row:9}
  .zp{grid-column:5/7;grid-row:9}
  .legend{left:14px;right:14px;bottom:14px;text-align:center}
  .overlay-inner{width:min(94vw,1300px);height:min(88vh,780px);padding:18px}
  .overlay-inner h2{font-size:22px;padding-right:52px}
  #closeMap{right:16px;top:14px}
}
@media(max-width:520px){
  #sidebar{width:min(88vw,300px);padding:22px 18px}
  #sectionNav button{font-size:14px;padding:10px 11px}
  .hint{font-size:11px}
  .slide{padding:10px}
  .stage{padding:14px;border-radius:18px;min-height:calc(100vh - 126px)}
  .topbar{padding:10px 12px}
  .controls{gap:8px}
  .controls button{padding:10px 12px;font-size:14px}
  .title{font-size:clamp(28px,9vw,40px)}
  .subtitle{font-size:15px}
  .body{gap:9px}
  .bullet{font-size:13px}
}
@media print{body{overflow:visible;background:#05070b}.topbar,.controls,#sidebar,.sidebar-backdrop{display:none}#app{margin:0}.slide{page-break-after:always;height:100vh}.stage{height:90vh;width:100%;box-shadow:none}}