/* Experiment layer for the notes: dark header band, light reading column, dark code panels, scan CTA with the wombat. */
:root{--night:#0E151C;--sig:#8EC5F0;--sig-2:#CFE6F8;--dtext:#C3C9CF;--dline:rgba(246,244,238,.12);--wb:#8EC5F0;--wc:#2E5F8A;--wk:#1E4363;--wl:#CFE6F8;--wo:#0B1117}
/* nav */
.xnav{position:sticky;top:0;z-index:50;background:rgba(14,21,28,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--dline);color:var(--paper)}
.xnav .nav-in{height:68px;display:flex;align-items:center;justify-content:space-between}
.xnav .brand{display:flex;align-items:center;gap:12px;font-weight:600;white-space:nowrap}
.xnav .brand img{width:30px;height:30px;filter:invert(1) brightness(1.4)}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--dtext)}
.nav-links a:hover{color:#fff}
.lng{display:inline-flex;align-items:center;gap:7px;font-size:13.5px}.lng i{font-style:normal;opacity:.5}.lng a{opacity:.6}.lng a.on{opacity:1;font-weight:500}
.xbtn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--sig);color:var(--night)!important;font-weight:500;font-size:14px;white-space:nowrap}
.xbtn:hover{background:#fff}
@media(max-width:860px){.nav-links .hide-m{display:none}}
@media(max-width:600px){.nav-links{gap:12px}.xbtn{padding:0 14px}.xnav .brand{gap:8px;font-size:15.5px}}
/* header band */
.nband{position:relative;background:radial-gradient(800px 420px at 85% 0%,rgba(46,95,138,.45),transparent 60%),var(--night);color:#fff;overflow:hidden}
.nband:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--dline) 1px,transparent 1px),linear-gradient(90deg,var(--dline) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 80%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 80%);pointer-events:none}
.nband-in{position:relative;width:min(820px,calc(100% - 48px));margin:0 auto;padding:72px 0 64px}
.nmeta{margin:0 0 22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8C949C;display:flex;gap:10px;flex-wrap:wrap}
.nmeta a{color:var(--sig)}.nmeta a:hover{color:#fff}
.nband h1{font-size:clamp(34px,4.4vw,60px);font-weight:500;line-height:1.04;letter-spacing:-.025em;margin:0 0 22px;color:#fff;text-wrap:balance}
.nband .lead{font-size:19px;line-height:1.6;color:var(--dtext);margin:0;max-width:40em}
.hero{display:none}
/* reading column */
main.read{width:min(720px,calc(100% - 48px))!important;padding-top:8px}
.block h2{text-wrap:balance}
.block p b{font-weight:600}
.code{background:var(--night)!important;border:0!important;border-radius:14px;color:var(--sig-2)!important}
.code .r i{color:#E2B04A!important}
/* scan CTA */
.ncta{position:relative;display:grid;grid-template-columns:1fr;gap:24px;align-items:end;margin:72px 0 0;padding:36px 36px 34px;border-radius:18px;background:var(--navy);color:#fff}
.ncta h2{color:#fff;margin:0 0 8px;font-size:clamp(24px,2.6vw,32px)}
.ncta p{color:var(--dtext);margin:0 0 20px;font-size:16px}
.ndomain{display:flex;gap:8px;max-width:460px;padding:5px;background:#fff;border-radius:999px}
.ndomain label{flex:1;display:flex;align-items:center;padding-left:14px;font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.ndomain input{flex:1;min-width:0;border:0;outline:0;font-family:var(--mono);font-size:14.5px;color:var(--ink);background:transparent;padding:9px 4px}
.ndomain button{border:0;border-radius:999px;background:var(--night);color:#fff;font:inherit;font-size:14.5px;font-weight:500;padding:0 18px;cursor:pointer}
.ndomain button:hover{background:var(--accent)}
.ncta .wombat{position:relative;display:inline-block;width:76px;line-height:0;margin-bottom:-6px;justify-self:end}
.wb-svg{width:100%;height:auto;display:block;image-rendering:pixelated;animation:bob 1.2s steps(2) infinite}
.wb-svg .f2{opacity:0;animation:wave 1.2s steps(1) infinite}.wb-svg .f1{animation:wave1 1.2s steps(1) infinite}
@keyframes bob{50%{transform:translateY(4%)}}@keyframes wave{0%,49%{opacity:0}50%,100%{opacity:1}}@keyframes wave1{0%,49%{opacity:1}50%,100%{opacity:0}}
.bubble{position:absolute;bottom:calc(100% + 12px);right:0;white-space:nowrap;padding:8px 12px;font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--night);background:var(--paper);border:2px solid var(--sig);box-shadow:3px 3px 0 var(--sig)}
.bubble:after{content:"";position:absolute;top:100%;right:26px;border:7px solid transparent;border-top-color:var(--sig)}
@media(max-width:640px){.ncta{grid-template-columns:1fr;padding:28px 22px}.ncta .wombat{display:none}.ndomain{border-radius:14px;flex-wrap:wrap}.ndomain button{width:100%;min-height:44px}}
@media(prefers-reduced-motion:reduce){.wb-svg,.wb-svg .f1,.wb-svg .f2{animation:none}.wb-svg .f2{display:none}}
/* article cards (index + related) */
.note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
main.read[style] .note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ncard{border:0!important;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line);transition:transform .2s ease,box-shadow .2s ease}
.ncard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(21,44,64,.35),0 0 0 1px var(--line)}
.ncard .viz{display:block;background:var(--night)!important;color:var(--sig-2)!important;padding:22px;font-family:var(--mono);font-size:11.5px;line-height:2;min-height:120px;border:0!important}
.ncard .viz i{font-style:normal;color:#E2B04A!important}
.ncard .body{display:block;padding:20px 22px 24px}
.ncard .t{display:block;font-size:18.5px;font-weight:500;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.ncard .body p{margin:0;color:var(--ink-2);font-size:15px}
.nrel{margin:64px 0 0}.nrel h2{margin:0 0 20px}
.end{border-top:0!important;margin-top:40px!important;padding-bottom:0!important}
main.read{padding-bottom:96px}
@media(max-width:700px){.note-grid,main.read[style] .note-grid{grid-template-columns:1fr}}
/* footer */
.xfoot{background:var(--night);color:#8C949C;font-size:14px;padding:0;border:0}
.xfoot .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:32px 0}
.xfoot .links{display:flex;gap:18px;flex-wrap:wrap}.xfoot a:hover{color:#fff}

@media(max-width:600px){.xfoot .foot{flex-direction:column;gap:12px;padding:28px 0}.xfoot .links{gap:8px 20px}}

.foot .li{display:inline-flex;align-items:center;margin-left:4px}.foot .li svg{display:block}