/* Blueprint look. Loaded after style.css and overrides its variables. */
:root{
  --outline:#04122e;--s0:#0a2552;--s1:#0f3272;--s2:#164087;--s3:#2f68b8;--panel:#0b2a5e;
  --a1:#3f8fd6;--a2:#78c4ff;--a3:#c4e6ff;--a4:#fff;--adim:#78c4ff;
  --text:#eef6ff;--soft:#c3d8f4;--mute:#8cadde;--gold:#ffc531;
  --disp:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;--sans:var(--body);
}
body{font-family:var(--body);background-color:#0a2552;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(1100px 600px at 80% -10%,rgba(120,196,255,.16),transparent 70%),
  linear-gradient(rgba(196,230,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(196,230,255,.045) 1px,transparent 1px);
  background-size:220px,auto,28px 28px,28px 28px}
.top{background:rgba(8,29,68,.88);border-bottom:1px solid rgba(196,230,255,.35);box-shadow:none}
.brand-name{font-family:var(--disp);font-weight:700}
.brand-name b{color:var(--gold)}
.brand-tag{color:var(--a3);border-color:rgba(196,230,255,.4);background:none}
.top-links a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--gold);background:none}
.lang button.on{background:var(--gold);color:#1a1200}
.side{border-right:1px dashed rgba(196,230,255,.25)}
.sec-h{color:var(--a3);font-family:var(--mono)}
.sec li a.on{color:#fff;border-left-color:var(--gold);background:linear-gradient(90deg,rgba(255,197,49,.14),transparent)}
.toc a.on{color:var(--gold);border-left-color:var(--gold)}
.page h1{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4.4vw,52px);letter-spacing:-.025em;text-shadow:none}
.page .lead{font-size:19px;max-width:62ch}
.crumb{color:var(--gold);font-family:var(--mono)}
.page h2,.page h3,.page h4{font-family:var(--disp)}
.page h2{border-bottom:1px solid rgba(196,230,255,.35);font-weight:700;letter-spacing:-.015em}
.page h2::after{width:9px;height:9px;left:auto;right:0;bottom:-5px;background:none;border:1px solid var(--gold);box-shadow:none;transform:rotate(45deg)}
.page h3{color:var(--a3)}
.page h4{color:var(--gold)}
.page p,.page li{max-width:72ch}
.page code{background:rgba(4,18,46,.55);border-color:rgba(196,230,255,.25);color:#ffe9a8}
.page th{background:rgba(4,18,46,.5);color:var(--gold)}
.tw,.code,.media{border-color:rgba(196,230,255,.3);border-radius:3px}
.code{background:#061a3d}
.code-h{background:rgba(4,18,46,.7)}
.adm{border-radius:2px;border-style:dashed;border-left-style:solid}
.card,.pager a,.stat{border-radius:3px;border-color:rgba(196,230,255,.3);background:rgba(4,18,46,.35)}
.card:hover{border-color:var(--gold);box-shadow:none;transform:none}
.card::after{color:var(--gold)}
.pager b{color:var(--gold)}
.modal-box{border-color:var(--a2);border-radius:4px}
.tk-k{color:#9fe3ff}
.tk-n{color:var(--gold)}
/* ---------- home ---------- */
.hero{border:0;padding:92px 32px 30px;overflow:visible}
.hero h1{font-family:var(--disp);font-size:clamp(54px,7.6vw,112px);line-height:.9;letter-spacing:-.04em;margin:0 0 22px;text-shadow:none;font-weight:800}
.hero p.sub{font-size:19px;max-width:44ch}
.hero .meta{margin:22px 0 0;font:500 13px var(--mono);color:var(--mute)}
.sheet{position:relative;aspect-ratio:1.28;min-height:360px;color:var(--text)}
.sheet::before{content:"";position:absolute;inset:-2%;background:#0d3578;filter:url(#rough);box-shadow:0 0 0 1px rgba(255,255,255,.1);z-index:0;
  background-image:linear-gradient(rgba(196,230,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(196,230,255,.09) 1px,transparent 1px);background-size:6% 7.7%}
.sheet::after{content:"";position:absolute;inset:14px;border:1px solid rgba(196,230,255,.55);pointer-events:none;z-index:1}
.sheet .links{position:absolute;inset:7% 5% 17% 5%;width:90%;height:76%;z-index:1;overflow:visible}
.sheet .links path{fill:none;stroke:rgba(196,230,255,.55);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.1s .2s both ease-out}
.sheet .links path.on{stroke:#25e39a;stroke-width:2.5}
@keyframes draw{from{stroke-dashoffset:1}}
.nodes{position:absolute;inset:7% 5% 17% 5%;z-index:2}
.n{position:absolute;transform:translate(-50%,-50%);width:clamp(46px,8.2vw,68px);aspect-ratio:1;border:0;padding:0;background:url(../assets/img/ui/node_square_locked.png) center/100% no-repeat;image-rendering:pixelated;cursor:not-allowed;animation:pop .5s calc(var(--i)*.09s + .35s) both}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
.n img{width:50%;height:50%;position:absolute;inset:25%;image-rendering:pixelated}
.n.locked img{filter:grayscale(1) brightness(.5)}
.n.avail{background-image:url(../assets/img/ui/node_square_ready.png);cursor:pointer;filter:drop-shadow(0 0 8px rgba(120,196,255,.8))}
.n.done{background-image:url(../assets/img/ui/node_square_done.png);cursor:default}
.n.root{background:none;cursor:default}
.n.root img{inset:0;width:100%;height:100%}
.n::after{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;opacity:var(--o,0);background:conic-gradient(var(--gold) calc(var(--p,0)*1%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%)}
.n.done::before{content:"";position:absolute;right:-5px;top:-5px;width:18px;height:18px;background:url(../assets/img/ui/icon_check.png) center/contain no-repeat;image-rendering:pixelated}
.n:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.info{position:absolute;left:30px;bottom:28px;z-index:2;width:56%;font-size:13.5px;line-height:1.45;min-height:4.4em}
.info b{display:block;font:700 17px var(--disp);color:#fff}
.info em{font-style:normal;color:var(--gold)}
.sheet .again{position:absolute;right:30px;top:26px;z-index:3;font:600 12px var(--mono);background:var(--gold);color:#1a1200;border:0;padding:5px 10px;cursor:pointer;display:none}
.sheet.finished .again{display:block}
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.band h2{font-family:var(--disp);font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em}
.band h2::before{display:none}
.band{padding-top:84px}
.pack{border-radius:3px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:rgba(4,18,46,.4);padding:24px}
.pack:hover{transform:none;box-shadow:inset 0 0 0 1px var(--c)}
.pack .bp img{width:56px;height:56px}
.pack b{font-family:var(--disp);font-size:24px}
.pack:nth-child(2){margin-top:28px}
.pack:nth-child(3){margin-top:56px}
.fine{border-top:1px dashed rgba(196,230,255,.3);font-family:var(--mono);font-size:12px}
@media(max-width:960px){.how{grid-template-columns:1fr}
.pack:nth-child(n){margin-top:0}
.info{width:90%;bottom:70px}
.hero{padding-top:56px}}
/* ---------- hero ---------- */
.hero.lamp{padding:0;height:calc(100svh - var(--top));min-height:560px;position:relative;overflow:hidden;border-bottom:1px solid rgba(4,18,46,.5)}
.hero.lamp canvas{position:absolute;inset:0;width:100%;height:100%;cursor:none;touch-action:pan-y}
.lamp .hero-txt{position:absolute;left:4vw;bottom:6vh;max-width:min(560px,92vw);pointer-events:none;mix-blend-mode:difference;color:#fff}
.lamp h1{color:#fff;font-size:clamp(56px,9vw,132px);line-height:.86;margin:0 0 20px}
.lamp p.sub{color:#fff;font-weight:500}
.lamp .meta{color:#fff}
.lamp .btns{pointer-events:auto;mix-blend-mode:normal}
.lamp .expo{position:absolute;left:4vw;top:22px;font:600 12px var(--mono);color:#fff;mix-blend-mode:difference;pointer-events:none}
@media(max-width:960px){.lamp .hero-txt{bottom:4vh}}
/* ---------- buttons and sections ---------- */
.hb{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto;mix-blend-mode:normal}
.hb a{font:700 15px var(--disp);color:#f4ecd0!important;background:#06194a;padding:11px 18px;border-bottom:3px solid var(--gold);box-shadow:4px 4px 0 rgba(4,18,46,.45);text-decoration:none!important;transition:transform .12s,box-shadow .12s}
.hb a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(4,18,46,.45);background:#0b2a6b}
.lamp .meta{font:500 13px var(--mono);margin-top:24px}
.lamp .meta b{display:block;font:700 19px var(--disp);margin-top:3px;transition:opacity .26s}
.dv{filter:sepia(1) brightness(1.7) contrast(.5) blur(6px);opacity:.35;transition:filter 1.5s ease-out,opacity 1.5s}
.dv.in{filter:none;opacity:1}
.lock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.lock .note{font:500 13px var(--mono);color:var(--gold)}
.paper{background:#e8e0c2;color:#0a2552;padding:22px;box-shadow:10px 10px 0 rgba(4,18,46,.5);position:relative}
.paper .pat{display:block;background:none;border:0;color:#0a2552;font:600 13px var(--mono);padding:0 0 12px;white-space:normal}
.paper ul{list-style:none;margin:0;padding:0}
.paper .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px dashed rgba(10,37,82,.35);max-width:none}
.paper .row code{background:none;border:0;color:inherit;font:600 14px var(--mono);padding:0;white-space:nowrap}
.row .st{font:600 12px var(--mono)}
.row .st::after{content:attr(data-l);color:#a3321f}
.row:not(.ex) code{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.row.ex .st{color:#1d6b4a}
.open .row:not(.ex) code{text-decoration:none;opacity:1}
.open .row .st::after{content:attr(data-u);color:#1d6b4a}
.paper button{margin-top:14px;font:700 14px var(--disp);background:#06194a;color:#f4ecd0;border:0;border-bottom:3px solid var(--gold);padding:10px 16px;cursor:pointer}
.mq{overflow:hidden;margin:34px 0 0;display:grid;gap:12px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-r>div{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite}
.mq:hover .mq-r>div{animation-play-state:paused}
.mq span{white-space:nowrap;font:600 15px var(--mono);padding:9px 16px;border:1px solid rgba(196,230,255,.45);background:rgba(4,18,46,.4)}
@keyframes mq{to{transform:translateX(-50%)}}
.feed{display:grid;gap:18px;position:relative;padding:26px 96px 26px 0}
.lane{display:flex;align-items:center;gap:12px;font:600 12px var(--mono);color:var(--mute)}
.lane span{width:48px}
.lane i{flex:1;height:14px;background:var(--p) 0 50%/36px 14px repeat-x;animation:flow 1.1s linear infinite;border-bottom:1px solid rgba(196,230,255,.3)}
.lane.item i{--p:linear-gradient(90deg,#fff 0 9px,transparent 9px)}
.lane.fluid i{--p:radial-gradient(circle at 6px 7px,#4fb3ff 0 6px,transparent 7px);animation-duration:1.7s}
.lane.fe i{--p:linear-gradient(90deg,var(--gold) 0 14px,transparent 14px);animation-duration:.7s}
@keyframes flow{to{background-position:36px 50%}}
.feed .st{position:absolute;right:0;top:50%;width:84px;height:84px;transform:translateY(-50%)}
@media(max-width:960px){.lock{grid-template-columns:1fr;gap:28px}}
@media(prefers-reduced-motion:reduce){.dv{filter:none;opacity:1}
.mq-r>div,.lane i{animation:none!important}}
.lamp p.sub{max-width:54ch}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}
.tabs button{font:700 14px var(--disp);color:var(--soft);background:rgba(4,18,46,.45);border:1px solid rgba(196,230,255,.35);padding:9px 15px;cursor:pointer}
.tabs button:hover{color:#fff;border-color:#fff}
.tabs button.on{background:#e8e0c2;color:#0a2552;border-color:#e8e0c2;box-shadow:4px 4px 0 rgba(4,18,46,.5)}
.tp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;margin-bottom:18px}
.tp p{font-size:17px;line-height:1.7;margin:0;max-width:56ch}
.tp .media{margin:0}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal .media{margin:0}
@media(max-width:960px){.tp,.gal{grid-template-columns:1fr}}