*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07020d;--bg2:#120a1c;--surface:rgba(255,255,255,.035);--border:rgba(255,255,255,.09);--text:#eceef6;--muted:#8d93ab;
  --a1:#7c5cff;--a2:#00e1ff;--a3:#ff4fd8;--ok:#3ddc97;--glow:color-mix(in srgb,var(--a2) 70%,transparent);
  --mono:'JetBrains Mono',ui-monospace,monospace;--max:1180px;
}
:root[data-theme=light]{
  --bg:#f4f3fb;--bg2:#ffffff;--surface:rgba(60,30,140,.04);--border:rgba(40,20,90,.12);--text:#0e1124;--muted:#565c75;
  --a1:#5b3df5;--a2:#0088ad;--a3:#c41a92;--glow:color-mix(in srgb,var(--a1) 35%,transparent);
}
html{overflow-x:clip}
body{background:radial-gradient(ellipse 90% 60% at 50% -10%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 70%) fixed,var(--bg);color:var(--text);font-family:var(--font);line-height:1.75;-webkit-font-smoothing:antialiased;transition:background-color .5s,color .5s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--a1);color:#fff}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
.grad{background:linear-gradient(120deg,var(--a1),var(--a2) 50%,var(--a3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:focus-visible{outline:2px solid var(--a2);outline-offset:3px}

/* warp starfield (drawn by journey.js) */
#sky{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;view-transition-name:sky}

/* ---------- top bar ---------- */
.bar{position:fixed;top:0;inset-inline:0;z-index:20;view-transition-name:bar;background:linear-gradient(var(--bg) 55%,transparent)}
.bar .wrap{display:flex;align-items:center;gap:10px;height:72px}
.bar .home{margin-inline-end:auto;display:inline-flex;align-items:center;gap:10px;font:600 13px var(--mono);color:var(--muted);transition:color .25s}
.bar .home:hover{color:var(--text)}
.bar .home i{font-style:normal;color:var(--a2)}
.icon-btn{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font:600 13px var(--mono);transition:.25s}
.icon-btn:hover{border-color:var(--a2);transform:translateY(-2px)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sun{display:none}:root[data-theme=light] .sun{display:block}:root[data-theme=light] .moon{display:none}

/* ---------- neon line art ---------- */
.art svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 9px var(--glow))}
.art .n,.art .n2{fill:none;stroke:var(--a2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:0}
.art .n2{stroke:var(--a3)}
.art .soft{opacity:.45}
.art .lbl{font:600 9px var(--mono);letter-spacing:.12em;fill:var(--muted);text-anchor:middle}
.art .flow,.art .spray{stroke-dasharray:6 9}
@media (prefers-reduced-motion:no-preference){
  .art:not(.draw) .n,.art:not(.draw) .n2{stroke-dashoffset:var(--len)}
  .art:not(.draw) .lbl{opacity:0}
  .art .lbl{transition:opacity .8s .9s}
  .art.draw .n,.art.draw .n2{animation:draw 1.4s cubic-bezier(.65,0,.25,1) calc(var(--i) * 45ms) both}
  .art.draw .ping{animation:draw .8s both,ping 2.4s ease-out 1.4s infinite}
  .art.draw .ping.d2{animation-delay:0s,1.7s}
  .art.draw .ping.d3{animation-delay:0s,2s}
  .art.draw .pulse{animation:draw .8s both,pulse 1.4s ease-in-out 1.4s infinite}
  .art.draw .flow,.art.draw .spray{animation:flow 1.4s linear infinite,show .8s 1s both}
  .art:not(.draw) .flow,.art:not(.draw) .spray{opacity:0}
  .art .rotor{animation:rotor .16s linear infinite}
  .art .prop{animation:prop .3s linear infinite}
  .art .head{animation:head 3.2s ease-in-out infinite}
}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes ping{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes pulse{50%{opacity:.25}}
@keyframes flow{to{stroke-dashoffset:-30}}
@keyframes show{from{opacity:0}}
@keyframes rotor{50%{transform:scaleX(.12)}}
@keyframes prop{to{transform:rotate(1turn)}}
@keyframes head{0%,100%{transform:translateX(-36px)}50%{transform:translateX(36px)}}

/* ---------- map ---------- */
.intro{padding:150px 0 60px;max-width:760px}
.kicker{font:600 12px var(--mono);letter-spacing:.18em;color:var(--a2);text-transform:uppercase}
.intro h1{margin:14px 0 20px;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.035em}
.intro p{color:var(--muted);font-size:1.12rem;max-width:620px}
.intro .hint{margin-top:18px;font:13px var(--mono);color:var(--muted);opacity:.8}

.trail{position:relative;display:grid;gap:46px;padding-bottom:40px}
.route{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route path{fill:none;stroke-linecap:round}
.route .rail{stroke:var(--a1);stroke-width:6;opacity:.18}
.route .run{stroke:var(--a2);stroke-width:2;stroke-dasharray:2 12;opacity:.8}
@media (prefers-reduced-motion:no-preference){.route .run{animation:march 1.2s linear infinite}}
@keyframes march{to{stroke-dashoffset:-28}}

.portal{position:relative;display:grid;grid-template-columns:minmax(0,230px) 1fr;gap:26px;align-items:center;width:min(640px,100%);padding:18px 26px 18px 18px;border-radius:26px;text-align:start;
  border:1px solid var(--border);background:color-mix(in srgb,var(--bg2) 88%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
[dir=rtl] .portal{padding:18px 18px 18px 26px}
.portal:nth-of-type(even){margin-inline-start:auto}
.portal:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--a2) 60%,var(--border));box-shadow:0 30px 70px -36px var(--a2)}
.portal .art{padding:8px;border-radius:18px;background:color-mix(in srgb,var(--a1) 7%,transparent)}
.portal small{font:600 12px var(--mono);letter-spacing:.12em;color:var(--a2)}
.portal b{display:block;margin:4px 0 6px;font-size:1.35rem;line-height:1.25;letter-spacing:-.01em}
.portal p{color:var(--muted);font-size:.95rem;line-height:1.6}
.portal .go{display:inline-block;margin-top:10px;font:600 12px var(--mono);color:var(--a3);transition:transform .3s}
.portal:hover .go{transform:translateX(6px)}
[dir=rtl] .portal:hover .go{transform:translateX(-6px)}

.epilogue{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin:40px auto 90px;padding:30px 34px;border-radius:26px;border:1px dashed color-mix(in srgb,var(--a2) 45%,var(--border));background:var(--surface)}
.epilogue b{display:block;font-size:1.3rem}
.epilogue p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:14px;font-weight:600;color:#fff;background:linear-gradient(120deg,var(--a1),var(--a3));box-shadow:0 14px 40px -16px var(--a1);transition:transform .3s}
.btn:hover{transform:translateY(-3px)}

/* ---------- chapter ---------- */
.ch-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;padding:120px 0 30px}
.ch-art{position:sticky;top:110px}
.ch-art .art{padding:24px;border-radius:30px;border:1px solid var(--border);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--a1) 14%,transparent),transparent 70%)}
.ch-art .art svg{filter:drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 16px var(--glow))}
.ch-text h2{margin:10px 0 18px;font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.03em}
.lede{font-size:1.12rem;color:var(--text);opacity:.9}
.steps{list-style:none;margin:34px 0;border-inline-start:1px solid var(--border)}
.steps li{position:relative;padding:0 0 24px 26px}
[dir=rtl] .steps li{padding:0 26px 24px 0}
.steps li::before{content:"";position:absolute;top:9px;inset-inline-start:-5px;width:9px;height:9px;border-radius:50%;background:var(--a2);box-shadow:0 0 12px var(--a2)}
.steps time{display:block;font:600 12px var(--mono);letter-spacing:.08em;color:var(--a2)}
.steps b{display:block;margin:2px 0 4px;font-size:1.05rem}
.steps span{color:var(--muted);font-size:.96rem}
.lesson{padding:20px 24px;border-radius:18px;border:1px solid var(--border);border-inline-start:3px solid var(--a3);background:var(--surface)}
.lesson span{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--a3)}
.lesson p{margin-top:6px}
.ch-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0 80px}
.ch-nav button,.ch-nav a{padding:12px 20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font:600 13px var(--mono);transition:.25s}
.ch-nav button:hover,.ch-nav a:hover{border-color:var(--a2);transform:translateY(-2px)}
.ch-nav>:last-child{margin-inline-start:auto}
.ch-nav [data-go=next]{color:var(--a2)}
.ch-nav [data-go=next] span{color:var(--text)}

/* ---------- map ⇄ chapter travel ---------- */
::view-transition-group(journey-art){animation-duration:.85s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(sky){display:none}
::view-transition-new(sky){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-timing-function:cubic-bezier(.7,0,.2,1)}
html[data-vt=in]::view-transition-old(root){animation:dive-out .6s both}
html[data-vt=in]::view-transition-new(root){animation:dive-in .7s .2s both}
html[data-vt=out]::view-transition-old(root){animation:rise-out .5s both}
html[data-vt=out]::view-transition-new(root){animation:rise-in .6s .15s both}
@keyframes dive-out{to{opacity:0;transform:scale(1.25)}}
@keyframes dive-in{from{opacity:0;transform:scale(.9)}}
@keyframes rise-out{to{opacity:0;transform:scale(.88)}}
@keyframes rise-in{from{opacity:0;transform:scale(1.1)}}

@media (max-width:860px){
  .ch-grid{grid-template-columns:1fr;gap:28px;padding-top:96px}
  .ch-art{position:relative;top:0;max-width:520px}
}
@media (max-width:620px){
  .portal,[dir=rtl] .portal{grid-template-columns:1fr;gap:14px;padding:16px}
  .intro{padding-top:120px}
  .bar .home b{display:none}
}