:root{
  --void:#05060f; --void-2:#080a1c;
  --gold:#ffd768; --gold-2:#f1b53e;
  --violet:#9b7bff; --cyan:#46d6ff; --magenta:#ff7ad1; --teal:#3fe0b5; --amber:#ff9d5c;
  --star:#fff; --text:#e9ecff; --muted:#8b93c9;
  --line:rgba(255,255,255,.09); --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06);
  --maxw:920px; --acc:var(--gold);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:116px;}
body{margin:0; background:var(--void); color:var(--text);
  font-family:"Mukta",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.74; letter-spacing:.1px; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body::before{content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1000px 620px at 50% -10%, rgba(255,215,104,.14), transparent 60%),
    radial-gradient(760px 680px at 84% 8%, rgba(155,123,255,.16), transparent 62%),
    radial-gradient(820px 760px at 8% 70%, rgba(70,214,255,.10), transparent 62%),
    radial-gradient(700px 700px at 92% 96%, rgba(255,122,209,.08), transparent 60%),
    linear-gradient(180deg,#05060f 0%, #070818 55%, #04050d 100%);}
body::after{content:""; position:fixed; inset:-50%; z-index:-2; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 72% 16%, #fff9, transparent),
    radial-gradient(1.4px 1.4px at 42% 64%, #fff8, transparent),
    radial-gradient(1.1px 1.1px at 88% 52%, #fff8, transparent),
    radial-gradient(1.3px 1.3px at 12% 80%, #fff7, transparent),
    radial-gradient(1.1px 1.1px at 60% 88%, #fff7, transparent),
    radial-gradient(1.2px 1.2px at 32% 36%, #fff6, transparent),
    radial-gradient(1.1px 1.1px at 95% 30%, #fff6, transparent);
  background-size:520px 520px; animation:drift 140s linear infinite;}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(260px)}}
.twinkle{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.twinkle i{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 6px #fff; animation:tw 3.2s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.25; transform:scale(.7)}50%{opacity:1; transform:scale(1.25)}}
.shot{position:fixed; top:0; left:0; z-index:0; pointer-events:none; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px #fff;}
.shot::after{content:""; position:absolute; right:2px; top:50%; width:120px; height:1px; transform:translateY(-50%); background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);}
a{color:inherit;}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px;}

header.bar{position:sticky; top:0; z-index:50; background:rgba(5,6,15,.8); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.bar-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 20px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none;}
.brand .crown{font-size:1.25rem; color:var(--gold); filter:drop-shadow(0 0 10px rgba(255,215,104,.6));}
.brand b{font-family:"Cinzel",serif; font-weight:700; font-size:.96rem; letter-spacing:.3px;}
.brand b span{color:var(--gold);}
.brand small{font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:2px; color:var(--muted); display:block; margin-top:-3px;}
.back{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:1px; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:6px 12px; border-radius:999px; white-space:nowrap; transition:.2s;}
.back:hover{color:var(--gold); border-color:rgba(255,215,104,.45);}
.progress{height:2px; background:transparent;}
.progress>i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--violet),var(--gold)); box-shadow:0 0 12px rgba(255,215,104,.8);}

nav.chips{position:sticky; top:52px; z-index:40; background:rgba(5,6,15,.66); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.chips-scroll{display:flex; gap:8px; overflow-x:auto; padding:9px 20px; max-width:var(--maxw); margin:0 auto; scrollbar-width:none;}
.chips-scroll::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); text-decoration:none; background:var(--panel); border:1px solid var(--line); padding:6px 13px; border-radius:999px; transition:.18s; white-space:nowrap;}
.chip em{font-family:"Space Mono",monospace; font-style:normal; font-weight:700; color:var(--gold); font-size:.72rem;}
.chip:hover{color:var(--text); border-color:rgba(255,215,104,.35);}
.chip.active{color:#15110a; background:linear-gradient(180deg,var(--gold),var(--gold-2)); border-color:transparent; font-weight:600;}
.chip.active em{color:#3a2c08;}

.hero{text-align:center; padding:58px 0 22px;}
.hero .eyebrow{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.crown-svg{width:120px; height:auto; margin:0 auto 6px; display:block; filter:drop-shadow(0 0 18px rgba(255,215,104,.5));}
.hero h1{font-family:"Cinzel",serif; font-weight:900; letter-spacing:3px; font-size:clamp(2.3rem,9vw,4rem); margin:6px 0 4px;
  background:linear-gradient(180deg,#fff 0%, #ffe9a8 60%, var(--gold) 130%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .h-sub{font-family:"Space Mono",monospace; font-size:.78rem; letter-spacing:3px; color:var(--violet); margin-bottom:16px;}
.hero p.lead{max-width:600px; margin:0 auto; color:#cdd3ff; font-size:1.04rem;}
.hero .h-hi{color:var(--gold); font-weight:600;}

.atlas{margin:18px auto 6px; max-width:600px; padding:8px 14px 4px; text-align:center;}
.atlas h2{font-family:"Cinzel",serif; font-size:1.05rem; letter-spacing:1.5px; color:#fff; margin:0 0 2px;}
.atlas .sub{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:1.5px; color:var(--muted); margin-bottom:6px;}
.constellation{width:100%; height:auto; touch-action:manipulation;}
.cstar circle.core{transition:.25s; cursor:pointer;}
.cstar:hover circle.core{r:7;}
.cstar text{font-family:"Space Mono",monospace; font-weight:700; fill:#fff; font-size:8px; pointer-events:none;}
.cstar .glow{opacity:0; transition:.3s;}
.cstar:hover .glow{opacity:.55;}
.clabel{font-family:"Mukta",sans-serif; fill:#aeb6ee; font-size:7.5px; opacity:.85; pointer-events:none;}
.cpath{fill:none; stroke:url(#pg); stroke-width:1.4; stroke-linecap:round; opacity:.85; stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 3s ease forwards .3s;}
@keyframes draw{to{stroke-dashoffset:0;}}

.start-row{text-align:center; margin:10px 0 6px;}
.toc{margin:20px 0 6px; display:grid; gap:12px; grid-template-columns:repeat(2,1fr);}
.toc a{display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:13px 14px; transition:.2s;}
.toc a:hover{border-color:color-mix(in srgb, var(--ta) 45%, transparent); background:var(--panel-2); transform:translateY(-2px);}
.toc .tnum{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:"Space Mono",monospace; font-weight:700; color:#15110a; font-size:.8rem; background:radial-gradient(circle at 35% 30%, #fff, var(--ta) 52%); box-shadow:0 0 14px -2px var(--ta);}
.toc .ttxt b{display:block; color:#fff; font-size:.95rem;}
.toc .ttxt span{color:var(--muted); font-size:.78rem;}

main{padding:6px 0 40px;}
.chapter-hero{display:flex; gap:16px; align-items:center; padding:42px 0 4px;}
.ch-seal{flex:0 0 auto; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 35% 30%, #fff, var(--acc) 42%, color-mix(in srgb, var(--acc) 55%, #000) 100%);
  box-shadow:0 0 26px -2px var(--acc), inset 0 0 0 1px rgba(255,255,255,.35);}
.ch-seal span{font-family:"Space Mono",monospace; font-weight:700; color:#120d05; font-size:1.05rem;}
.ch-seal::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--acc); opacity:.35;}
.ch-titles .eyebrow{font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--acc);}
.ch-titles h1{font-family:"Cinzel",serif; font-weight:700; font-size:clamp(1.6rem,6vw,2.3rem); margin:3px 0 0; line-height:1.1;}
.ch-titles .hi{color:var(--muted); font-size:.98rem; margin-top:3px;}
.ch-body{margin-top:20px;}
.ch-body p{margin:0 0 15px; color:#d7dbff;}
.ch-body strong{color:#fff;}
.lead-line{border-left:3px solid var(--acc); padding-left:15px; color:#fff !important; font-weight:500; font-size:1.06rem;}

.grid{display:grid; gap:14px; margin:6px 0 8px;}
.g2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px 17px; transition:.2s; position:relative; overflow:hidden;}
.card::before{content:""; position:absolute; top:-30px; right:-30px; width:80px; height:80px; border-radius:50%; background:var(--acc); opacity:0; filter:blur(30px); transition:.25s;}
.card:hover{border-color:color-mix(in srgb, var(--acc) 45%, transparent); transform:translateY(-3px); background:var(--panel-2);}
.card:hover::before{opacity:.35;}
.card .ico{font-size:1.5rem; display:block; margin-bottom:8px;}
.card h3{margin:0 0 5px; font-size:1.02rem; color:var(--acc);}
.card p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.62;}
.card .meta{margin-top:9px; font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.5px; color:#c9cfff; opacity:.8;}

.path{display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:12px; transition:.2s;}
.path:hover{border-color:color-mix(in srgb, var(--acc) 40%, transparent); background:var(--panel-2);}
.path .num{flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:"Space Mono",monospace; font-weight:700; color:#15110a; font-size:.82rem; background:radial-gradient(circle at 35% 30%, #fff, var(--acc) 50%); box-shadow:0 0 16px -2px var(--acc);}
.path h3{margin:0 0 3px; font-size:1.02rem; color:#fff;}
.path p{margin:0; font-size:.9rem; color:var(--muted);}

.note{background:linear-gradient(135deg, color-mix(in srgb, var(--acc) 14%, transparent), rgba(255,255,255,.02)); border:1px solid color-mix(in srgb, var(--acc) 30%, transparent); border-radius:16px; padding:15px 17px; margin:8px 0 14px;}
.note b{color:var(--acc);}
.tip{background:color-mix(in srgb, var(--acc) 7%, transparent); border:1px dashed color-mix(in srgb, var(--acc) 45%, transparent); border-radius:14px; padding:13px 16px; margin:8px 0 14px; font-size:.93rem;}
.tip b{color:var(--acc);}
ul.tick{list-style:none; padding:0; margin:6px 0 14px;}
ul.tick li{position:relative; padding:7px 0 7px 30px; border-bottom:1px solid var(--line); color:#d7dbff; font-size:.95rem;}
ul.tick li:last-child{border-bottom:none;}
ul.tick li::before{content:"✦"; position:absolute; left:0; top:6px; color:var(--acc); font-size:.95rem;}
ul.plain{padding-left:20px; margin:4px 0 14px; color:#d7dbff;}
ul.plain li{margin:5px 0;}
ul.plain li::marker{color:var(--acc);}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:26px 0 0;}

.pager{display:flex; gap:12px; margin:30px 0 0;}
.pg{flex:1; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; transition:.2s; min-width:0;}
.pg:hover{border-color:rgba(255,215,104,.4); background:var(--panel-2);}
.pg small{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:1.5px; color:var(--muted); display:block; margin-bottom:3px;}
.pg b{color:#fff; font-size:.95rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pg.next{text-align:right;}
.pg.disabled{opacity:.35; pointer-events:none;}

.crown-cta{margin:40px auto 10px; text-align:center; position:relative; background:radial-gradient(700px 300px at 50% 0%, rgba(255,215,104,.16), transparent 70%); border:1px solid rgba(255,215,104,.25); border-radius:26px; padding:42px 22px;}
.crown-cta .crown-svg{width:96px; margin:0 auto 6px;}
.crown-cta h2{font-family:"Cinzel",serif; font-size:clamp(1.5rem,5.4vw,2.1rem); margin:6px 0 6px; background:linear-gradient(180deg,#fff,var(--gold) 140%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.crown-cta p{color:#cdd3ff; max-width:520px; margin:0 auto 22px;}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; padding:13px 22px; border-radius:999px; font-size:.95rem; transition:.2s;}
.btn-gold{color:#15110a; background:linear-gradient(180deg,var(--gold),var(--gold-2)); box-shadow:0 8px 22px rgba(255,215,104,.3);}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,215,104,.45);}
.btn-ghost{color:var(--text); border:1px solid var(--line); background:var(--panel);}
.btn-ghost:hover{border-color:rgba(255,215,104,.5); color:var(--gold);}

footer{text-align:center; padding:34px 20px 48px; color:var(--muted); font-size:.82rem; border-top:1px solid var(--line); margin-top:10px;}
footer .brandlock{font-family:"Cinzel",serif; font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:12px; letter-spacing:.4px;}
footer .brandlock .crown{color:var(--gold); filter:drop-shadow(0 0 10px rgba(255,215,104,.55));}
footer .brandlock b span{color:var(--gold);}
footer .lineage{display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; align-items:center; max-width:600px; margin:0 auto 12px; line-height:1.6;}
footer .lineage span{white-space:nowrap;}
footer .lineage .dot{color:var(--gold); opacity:.7; font-size:.7rem;}
footer .lineage b{color:#cfd5ff; font-weight:600;}
footer .lineage a{text-decoration:none;}
footer .lineage a b{color:var(--gold-2); transition:.18s;}
footer .lineage a:hover b{color:var(--gold); text-shadow:0 0 12px rgba(255,215,104,.5);}
footer .flinks{margin-bottom:8px;}
footer a{color:var(--gold); text-decoration:none;}
footer .coords{font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:1.5px; opacity:.6; margin-top:8px;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media (max-width:640px){ .g2{grid-template-columns:1fr;} .toc{grid-template-columns:1fr;} html{scroll-padding-top:104px;} .hero h1{letter-spacing:2px;} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important;} html{scroll-behavior:auto;} .reveal{opacity:1; transform:none;} .cpath{stroke-dashoffset:0;} }