.wh{--wh-ink:var(--ink,#f1f3ff);--wh-mute:var(--mute,rgba(226,231,255,.78));--wh-faint:var(--faint,rgba(226,231,255,.64));--wh-line:var(--line,rgba(200,210,255,.16));
  --hc:var(--lime,#a3e635);--wh-e:cubic-bezier(.2,.8,.2,1);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px) minmax(0,1fr);grid-template-areas:"l c r";gap:0 clamp(40px,6vw,96px);align-items:center;
  padding:var(--s-7,48px) var(--s-6,32px);border-radius:var(--r-xl,28px);
  isolation:isolate;overflow:hidden;background:radial-gradient(40% 60% at 50% 45%,color-mix(in srgb,var(--hc) 8%,transparent),transparent 70%),#03040a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 80px -40px rgba(0,0,0,.9);transition:background .5s}
.wh *{min-width:0}
.wh-sprite{position:absolute;width:0;height:0;overflow:hidden}
.wh-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wh-ic *{vector-effect:non-scaling-stroke}
.wh-ic .fill{fill:#0a0c1c}
.wh-sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1;opacity:.95}
.wh-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.wh-w{fill:none;stroke:var(--wh-line);stroke-width:1.3;transition:stroke .3s,stroke-width .3s,opacity .3s}
.wh-w.on{stroke:var(--c);stroke-width:2;stroke-dasharray:5 7;animation:wh-flow .9s linear infinite;filter:drop-shadow(0 0 6px var(--c))}
.wh-wd{fill:var(--wh-faint);transition:fill .3s}
.wh-wd.on{fill:var(--c)}
.wh.lit .wh-w:not(.on){opacity:.45}
@keyframes wh-flow{to{stroke-dashoffset:-24}}
.wh-core{grid-area:c;position:relative;z-index:1;display:grid;justify-items:center;gap:var(--s-4,16px);text-align:center}
.wh-hub{position:relative;width:100%;max-width:300px;aspect-ratio:1}
.wh-hub svg{display:block;width:100%;height:100%;overflow:visible}
.wh-earth{position:absolute;inset:0;width:100%;height:100%;display:block}
.wh-r1{fill:none;stroke:var(--wh-line);stroke-dasharray:2 6}
.wh-r2{fill:rgba(3,4,10,.3);stroke:color-mix(in srgb,var(--hc) 45%,transparent);stroke-width:1.2;transition:stroke .4s;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--hc) 30%,transparent))}
.wh-hl{font:500 9px var(--mono,monospace);letter-spacing:.2em;fill:var(--wh-mute)}
.wh-read{text-shadow:0 1px 10px #03040a,0 0 2px #03040a;display:grid;gap:6px;min-height:4.6em;max-width:30ch}
.wh-rk{font:380 22px/1.15 var(--serif,serif);font-style:italic;letter-spacing:-.01em;color:var(--hc);font-variation-settings:"opsz" 144;transition:color .3s}
.wh-rd{font-size:var(--fs-sm,14px);line-height:1.5;color:var(--wh-mute)}
.wh-col{position:relative;z-index:1;display:grid;gap:var(--s-6,32px)}
.wh-l{grid-area:l}.wh-r{grid-area:r}
.wh-gh{text-shadow:0 1px 8px #03040a;display:flex;align-items:center;gap:10px;margin:0 0 var(--s-2,8px);font:500 11px/1.2 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.wh-gh i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.wh-l .wh-gh{flex-direction:row-reverse}
.wh-list{list-style:none;display:grid;justify-items:start;gap:4px;margin:0;padding:0}
.wh-l .wh-list{justify-items:end}
.wh-e{display:flex;align-items:center;gap:14px;padding:7px 10px;border-radius:14px;cursor:default;outline:none;transition:background .25s,box-shadow .25s}
.wh-l .wh-e{flex-direction:row-reverse;text-align:right}
.wh-ib{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;color:var(--c);background:rgba(8,10,24,.92);box-shadow:inset 0 0 0 1px var(--wh-line);transition:box-shadow .25s,background .25s,transform .25s var(--wh-e)}
.wh-tx{display:grid;gap:2px}
.wh-tx b{font:600 16px/1.25 var(--body,sans-serif);color:var(--wh-ink);text-shadow:0 1px 8px #03040a}
.wh-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wh-e:hover,.wh-e.on{background:color-mix(in srgb,var(--c) 9%,transparent)}
.wh-e:hover .wh-ib,.wh-e.on .wh-ib{background:color-mix(in srgb,var(--c) 16%,#0a0c1c);box-shadow:inset 0 0 0 1.5px var(--c),0 0 24px -6px var(--c);transform:scale(1.06)}
.wh-e:focus-visible{box-shadow:0 0 0 2px var(--gold,#facc15)}
@media (max-width:900px){
  .wh{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "l r";gap:var(--s-6,32px) var(--s-5,24px);padding:var(--s-6,32px) var(--s-5,24px)}
  .wh-wires{display:none}
  .wh-list,.wh-l .wh-list{justify-items:stretch}
  .wh-read{min-height:0;max-width:40ch}.wh-rk{font-size:19px}
  .wh-hub{max-width:190px}
  .wh-d{text-shadow:0 1px 6px #03040a}
  .wh-l .wh-e,.wh-l .wh-gh{flex-direction:row;text-align:left}
  .wh-e{align-items:flex-start;padding:8px 6px}
  .wh-ib{width:42px;height:42px}
  .wh-d{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:var(--fs-sm,14px);line-height:1.45;color:var(--wh-mute)}
  .wh-e:hover .wh-ib,.wh-e.on .wh-ib{transform:none}
  .wh-grp{padding-top:var(--s-4,16px);border-top:1px solid var(--wh-line)}
}
@media (max-width:620px){
  .wh-col{display:contents}
  .wh-core,.wh-l,.wh-r{grid-area:auto}
  .wh-core{order:0}.wh-grp[data-g="web"]{order:1}.wh-grp[data-g="desk"]{order:2}.wh-grp[data-g="mob"]{order:3}.wh-grp[data-g="code"]{order:4}
  .wh{grid-template-columns:minmax(0,1fr);grid-template-areas:none;padding:var(--s-5,24px) var(--s-4,16px);border-radius:var(--r-lg,20px);gap:var(--s-5,24px)}
  .wh-hub{max-width:180px}
}
@media (prefers-reduced-motion:reduce){
  .wh-w.on{animation:none;stroke-dasharray:none}
  .wh-ib{transition:none}
}
html.paused .wh-w.on{animation-play-state:paused}