:root{--gold:#e8b84a;--gold2:#ffd77a;--cy:#6fe3ff;--tx:#efe9ff;--mut:#a9a2c8;--glass:rgba(20,14,48,.6)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 38%,#2a1660 0%,#140c38 40%,#07051a 80%);color:var(--tx);font:400 clamp(13px,1.45vh,30px)/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#111;padding:8px 12px;border-radius:6px;z-index:9}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px}
.top{display:flex;justify-content:space-between;align-items:center;padding:2.2vh 3vw}
.brand{display:flex;align-items:center;gap:.7em;text-decoration:none;letter-spacing:.3em;font-weight:500;color:var(--gold2)}
.brand img{width:2.6em;height:auto}
.pause{background:rgba(255,255,255,.05);border:1px solid rgba(232,184,74,.35);color:var(--gold2);border-radius:99px;padding:.4em 1em;font:inherit;font-size:.85em;cursor:pointer}
main{flex:1;display:flex;flex-direction:column;align-items:center;min-height:0}
.stage{position:relative;width:min(92vw,118vh);height:52vh;flex-shrink:0}
#brain{position:absolute;left:50%;top:50%;width:52vh;height:52vh;transform:translate(-50%,-50%)}
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.links path{fill:none;stroke-linecap:round}
.links .halo{stroke-width:4;opacity:.28;transition:opacity .25s}
.links .core{stroke-width:1.2;opacity:.8;transition:stroke-width .25s,opacity .25s}
.links .flow{stroke-width:2;stroke-dasharray:2 22;opacity:.95;animation:flow 2.6s linear infinite}
.links .s{fill:#fff3c9;filter:drop-shadow(0 0 4px #ffd77a)}
.links .e{fill:var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.links .on .halo{opacity:.7}.links .on .core{stroke-width:2;opacity:1}.links .on .flow{animation-duration:1.1s}
.links .lk:nth-of-type(2) .flow{animation-delay:-.45s}.links .lk:nth-of-type(3) .flow{animation-delay:-.9s}.links .lk:nth-of-type(4) .flow{animation-delay:-1.35s}.links .lk:nth-of-type(5) .flow{animation-delay:-1.8s}.links .lk:nth-of-type(6) .flow{animation-delay:-2.25s}
@keyframes flow{to{stroke-dashoffset:-48}}
.nodes{position:absolute;inset:0}
.node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.55em;background:var(--glass);backdrop-filter:blur(4px);border:1px solid rgba(111,227,255,.35);color:var(--tx);border-radius:99px;padding:.45em 1em;font:inherit;font-size:.95em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .2s,box-shadow .2s,color .2s}
.node i{width:.5em;height:.5em;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.node:hover,.node:focus-visible{border-color:var(--gold2);color:var(--gold2);box-shadow:0 0 22px rgba(232,184,74,.4),inset 0 0 12px rgba(232,184,74,.12);transform:translate(-50%,-50%) scale(1.06)}
.node{transition:border-color .2s,box-shadow .2s,color .2s,transform .2s}
.node i{animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.5);opacity:.6}}
.node.hot{border-color:var(--gold);color:var(--gold2)}.node.hot i{background:var(--gold2);box-shadow:0 0 8px var(--gold2)}
.n1{left:13%;top:20%}.n2{left:9%;top:52%}.n3{left:16%;top:84%}.n4{left:87%;top:20%}.n5{left:90%;top:52%}.n6{left:84%;top:84%}
.title{text-align:center;padding:0 4vw}
h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:400;letter-spacing:.28em;margin-right:-.28em;font-size:clamp(2.6rem,8.6vh,11rem);line-height:1.05;background:linear-gradient(180deg,#fff0bf,#e8b84a 55%,#a8761f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(232,184,74,.35))}
.tag{color:var(--cy);font-size:1.5em;letter-spacing:.06em;margin:.4em 0 .2em;text-shadow:0 0 14px rgba(111,227,255,.35)}
.tick{color:var(--mut);letter-spacing:.08em;font-size:.95em}
.row{display:flex;gap:1em;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.6vh}
.ca{display:inline-flex;align-items:center;gap:.9em;background:var(--glass);border:1px solid rgba(232,184,74,.3);border-radius:.6em;padding:.6em .9em;max-width:100%}
.ca-l{color:var(--gold2);font-weight:600;padding-right:.9em;border-right:1px solid rgba(255,255,255,.15)}
.ca code{font:.95em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all;user-select:all}
.copy{background:none;border:0;color:var(--tx);cursor:pointer;display:flex;padding:.2em}.copy:hover{color:var(--gold2)}
.btn{display:inline-flex;align-items:center;border-radius:.5em;padding:.75em 1.6em;text-decoration:none;font:inherit;font-weight:600;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1d1206;border:0;cursor:pointer;box-shadow:0 0 22px rgba(232,184,74,.3)}
.btn:hover{box-shadow:0 0 34px rgba(255,215,122,.5)}
.btn.ghost{background:none;color:var(--tx);border:1px solid rgba(255,255,255,.3);box-shadow:none}
.status{min-height:1.4em;color:var(--cy);font-size:.9em;margin-top:.3em}
.foot{flex-shrink:0;display:flex;gap:2em;justify-content:center;align-items:center;flex-wrap:wrap;padding:1.6vh 3vw 2.2vh;font-size:.88em;color:var(--mut)}
.foot a{text-decoration:none;color:var(--tx);opacity:.85}.foot a:hover{color:var(--gold2)}
dialog{margin:auto;max-width:min(92vw,34em);background:#140c34;color:var(--tx);border:1px solid rgba(232,184,74,.35);border-radius:.8em;padding:1.6em 1.8em;box-shadow:0 20px 80px rgba(0,0,0,.6);font-size:max(15px,1em)}
dialog::backdrop{background:rgba(5,3,16,.7);backdrop-filter:blur(3px)}
dialog h2{font-family:Georgia,serif;font-weight:400;font-size:1.7em;margin-bottom:.5em;color:var(--gold2)}
dialog p,dialog li{margin-bottom:.7em;color:#ddd8f0}dialog form{margin-top:1em;text-align:right}
.steps{padding-left:1.2em}.clinks{list-style:none}.clinks a{color:var(--gold2)}.small{font-size:.9em;color:var(--mut)}
@media (max-width:760px),(max-height:520px){
 body{overflow:auto;height:auto;min-height:100%;font-size:15px}
 .stage{width:100%;height:auto;display:flex;flex-direction:column;align-items:center}
 #brain{position:relative;left:auto;top:auto;transform:none;width:min(80vw,46vh);height:min(80vw,46vh)}
 .links{display:none}
 .nodes{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:.6em;padding:0 4vw 1em}
 .node,.node:hover,.node:focus-visible{position:static;transform:none}
 h1{font-size:clamp(2.2rem,11vw,4rem)}
 .ca code{font-size:.8em}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.node{gap:.6em;padding:.5em 1.1em .5em .85em;background:linear-gradient(180deg,rgba(38,28,78,.72),rgba(14,10,36,.78));border-color:rgba(111,227,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 20px rgba(0,0,0,.35);letter-spacing:.02em;font-weight:500}
.node .ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:var(--cy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(111,227,255,.45))}
.node.hot{background:linear-gradient(180deg,rgba(90,60,14,.75),rgba(30,18,6,.8));border-color:rgba(255,215,122,.7)}
.node.hot .ic{stroke:var(--gold2);filter:drop-shadow(0 0 4px rgba(255,215,122,.6))}
.node:hover .ic,.node:focus-visible .ic{stroke:var(--gold2)}
