/* Mesh Playground: interactive, local-only illustration of packet relaying. */
.playground-section{background:#08090d;border-top:1px solid #171b23;border-bottom:1px solid #20242e}
.playground-layout{display:grid;grid-template-columns:minmax(240px,.66fr) minmax(0,1.34fr);align-items:center;gap:clamp(24px,5vw,72px)}
.playground-intro h2{margin-top:16px;font-size:clamp(2.8rem,5.3vw,5.4rem);line-height:1.04;letter-spacing:-.06em}
.playground-intro h2 span{color:#87aafa}
.playground-intro>p:not(.eyebrow){max-width:390px;margin-top:22px;color:#aaaebd;font-size:15px;line-height:1.75}
.playground-intro .playground-steps{margin-top:28px;display:grid;gap:13px;list-style:none;padding:0;counter-reset:meshstep}
.playground-steps li{display:flex;gap:14px;color:#c0c3cf;font-size:13px;line-height:1.5}
.playground-steps li::before{counter-increment:meshstep;content:"0" counter(meshstep);font:11px/1.6 var(--font-mono);color:#839bd9}
.playground-shell{min-width:0;overflow:hidden;border:1px solid #323c56;border-radius:16px;background:#0b101c;box-shadow:0 30px 85px #0008}
.playground-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 20px 13px;border-bottom:1px solid #252f45}
.playground-topline strong{font-size:13px;letter-spacing:.01em;font-weight:650}
.playground-topline span{font:10px/1.4 var(--font-mono);color:#90a0c2;letter-spacing:.07em}
.playground-visual{position:relative;height:clamp(300px,32vw,405px);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 46% 48%,#1c2a4a 0,#101828 42%,#090e19 87%)}
.playground-visual:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#7095db42 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.playground-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.playground-links line{stroke:#6e85b6;stroke-width:1.4;stroke-dasharray:.7 .85;opacity:.62;vector-effect:non-scaling-stroke}
.playground-links line.is-route{stroke:#8ec6ff;stroke-width:2.3;stroke-dasharray:none;opacity:.95;filter:drop-shadow(0 0 5px #5aaaff)}
.playground-node{--node-color:#97a9e4;position:absolute;left:0;top:0;display:grid;place-items:center;transform:translate(-50%,-50%);width:52px;height:52px;border:1px solid var(--node-color);border-radius:50%;background:#121e37;color:#eef2ff;font:700 14px/1 var(--font-mono);box-shadow:0 0 0 7px #5c8ce612,0 0 25px #5a85ff24;cursor:grab;touch-action:none;user-select:none;transition:box-shadow .2s,border-color .2s;z-index:2}
.playground-node:after{content:"";position:absolute;inset:10px;border:1px solid var(--node-color);border-radius:50%;opacity:.21;pointer-events:none}
.playground-node:hover,.playground-node:focus-visible{box-shadow:0 0 0 10px #588cfa25,0 0 32px #68a3fd55;outline:0}
.playground-node.is-dragging{cursor:grabbing;z-index:5;box-shadow:0 0 0 15px #6599fd2b,0 0 42px #8dbaff70}
.playground-node.is-source{--node-color:#53b7ff;background:#102946}
.playground-node.is-target{--node-color:#68f0d2;background:#0d3333}
.playground-node.is-current{box-shadow:0 0 0 9px #89c0ff34,0 0 36px #89c0ff66}
.playground-packet{position:absolute;left:0;top:0;display:grid;place-items:center;transform:translate(-50%,-50%);width:22px;height:22px;border:2px solid #f8fbff;border-radius:6px;background:#d8f2ff;box-shadow:0 0 12px #a8e7ff,0 0 35px #60a5ffb0;pointer-events:none;z-index:6}
.playground-packet:after{content:"";width:6px;height:6px;border-radius:2px;background:#2e638e}
.playground-packet[hidden]{display:none}
.playground-guide{position:absolute;left:18px;bottom:14px;font:10px/1.5 var(--font-mono);letter-spacing:.02em;color:#a1abc4;pointer-events:none}
.playground-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding:18px 18px 12px;border-top:1px solid #252f45}
.playground-control{display:grid;gap:7px;flex:1 1 94px;min-width:82px}
.playground-control label{font-size:11px;color:#a4aec7}
.playground-control select{width:100%;min-height:43px;padding:10px 30px 10px 12px;border:1px solid #3d4b67;border-radius:8px;background:#151e30;color:#f8f8ff;font:600 13px var(--font-sans);cursor:pointer}
.playground-control select:focus-visible{outline:2px solid #8cbcff;outline-offset:2px}
.playground-send,.playground-reset{min-height:43px;padding:11px 15px;border-radius:8px;font:650 12px var(--font-sans);cursor:pointer}
.playground-send{border:1px solid #d9e5ff;background:#dce8ff;color:#101a2a;flex:1 1 120px}
.playground-send:hover{background:white}
.playground-reset{border:1px solid #43516d;background:transparent;color:#cbd5e9}
.playground-reset:hover{background:#202b42}
.playground-send:disabled{opacity:.45;cursor:wait}
.playground-status{min-height:63px;padding:13px 20px 18px;color:#b9c9e5;font-size:12px;line-height:1.6}
.playground-status[data-state="delivered"]{color:#77f4d8}
.playground-status[data-state="waiting"]{color:#e9c48c}
.playground-footnote{margin-top:13px;color:#767d8d;font-size:11px;line-height:1.5}
@media(max-width:1000px){.playground-layout{grid-template-columns:1fr;gap:28px}.playground-intro>p:not(.eyebrow){max-width:750px}.playground-intro .playground-steps{grid-template-columns:repeat(3,1fr);gap:20px}.playground-visual{height:clamp(300px,40vw,440px)}}
@media(max-width:600px){.playground-intro h2{font-size:clamp(2.6rem,11vw,3.9rem)}.playground-intro .playground-steps{grid-template-columns:1fr;gap:10px;margin-top:22px}.playground-visual{height:350px}.playground-topline{padding:13px 14px}.playground-topline strong{font-size:12px}.playground-topline span{font-size:9px}.playground-controls{padding:14px 12px 8px;gap:8px}.playground-control{flex-basis:calc(50% - 5px)}.playground-send{flex:1 1 60%}.playground-reset{flex:1 1 27%}.playground-node{width:46px;height:46px}.playground-status{padding:12px 14px 14px}.playground-guide{font-size:9px;left:12px}}
@media(prefers-reduced-motion:reduce){.playground-node{transition:none}}


/* Mesh Playground v2 — sandbox controls, radio ranges and legend. */
.playground-intro .playground-footnote{max-width:410px;margin-top:18px;font-size:11px;line-height:1.6;color:#858da3}
.playground-legend{margin-top:29px;padding:19px;border:1px solid #293248;border-radius:12px;background:#0d1424}
.playground-legend h3{font-size:13px;letter-spacing:.01em;font-weight:650}
.playground-legend p{margin-top:7px;color:#8f9bb3;font-size:11px;line-height:1.6}
.playground-legend ul{display:grid;grid-template-columns:1fr 1fr;gap:15px 11px;margin:19px 0 0;padding:0;list-style:none}
.playground-legend li{display:flex;align-items:center;gap:10px;color:#c0c8dc;font-size:11px;line-height:1.45}
.mesh-key{display:inline-block;flex:0 0 20px;width:20px;height:20px;border:1px solid #919fc0;border-radius:50%;background:#17223c}
.mesh-key.is-sender{border-color:#53b7ff;background:#123d6a;box-shadow:0 0 13px #349eff55}
.mesh-key.is-recipient{border-color:#68f0d2;background:#104a43;box-shadow:0 0 13px #39ebc477}
.mesh-key.is-relay{border-color:#b79eff;background:#302052;box-shadow:0 0 13px #a780ff55}
.mesh-key.is-coverage{width:20px;height:20px;border:1px dashed #8092bf;background:#5275b51a}
.mesh-key.is-connection{height:0;border:0;border-top:2px dashed #7a91be;border-radius:0;background:none}
.mesh-key.is-message{flex-basis:15px;width:15px;height:15px;margin-inline:2px;border:2px solid #fff;border-radius:4px;background:#d9eeff;box-shadow:0 0 9px #78b6ff}
.playground-topline>div{display:flex;flex-direction:column;gap:4px}
.playground-topline .playground-count{font-size:11px;color:#b4bdd4;font-weight:450}
.playground-topline .playground-stats{max-width:230px;text-align:right;font-size:10px;letter-spacing:0;color:#98b5e6}
.playground-visual{height:clamp(330px,32vw,420px)}
.playground-links{z-index:0}
.playground-links circle.mesh-range{fill:#78a1ed07;stroke:#637da641;stroke-width:1.2;stroke-dasharray:4 5}
.playground-links circle.mesh-range.is-active{fill:#6d9eff0d;stroke:#80b0ff93;stroke-width:1.5;stroke-dasharray:5 5}
.playground-links line{stroke:#7387b2;stroke-width:1.3;stroke-dasharray:4 6;opacity:.66;vector-effect:none}
.playground-links line.is-route{stroke:#87bdff;stroke-width:2.7;stroke-dasharray:none;opacity:.95;filter:drop-shadow(0 0 5px #65aaff)}
.playground-node{--node-color:#b49bf8;background:#2a1a48;border-color:var(--node-color);box-shadow:0 0 0 6px #9177f712,0 0 22px #9e76ff27}
.playground-node.is-source{--node-color:#53b7ff;background:#102946}
.playground-node.is-target{--node-color:#68f0d2;background:#0d3333}
.playground-packet.is-waiting{border-color:#ffd996;background:#ffe6b5;box-shadow:0 0 14px #ffcb75,0 0 33px #ffaf3e99;animation:packet-wait 1.7s ease-in-out infinite}
@keyframes packet-wait{50%{box-shadow:0 0 0 9px #ffca7433,0 0 38px #ffb64f}}
.playground-visual.is-adding{cursor:crosshair}
.playground-visual.is-removing .playground-node{cursor:pointer}
.playground-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:3px 18px 17px;border-bottom:1px solid #243048}
.playground-tool{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:9px 13px;border:1px solid #3c5074;border-radius:8px;background:#121d31;color:#cfdaed;font:600 11px var(--font-sans);cursor:pointer;transition:background .18s,border-color .18s}
.playground-tool:hover{background:#1c304f;border-color:#6588c0}
.playground-tool.is-active{background:#345ba4;border-color:#8ab3ff;color:white}
.playground-tool:focus-visible{outline:2px solid #8cbcff;outline-offset:3px}
.playground-toolbar .playground-tool:first-child{border-color:#557db3;color:#e9f1ff}
.playground-tool.is-active:first-child{color:white}
.playground-guide{color:#d4dded;text-shadow:0 1px 4px #030710;font-weight:500}
.playground-status{border-top:0;padding:13px 20px 20px}
@media(max-width:1000px){.playground-legend{max-width:750px}}
@media(max-width:600px){
  .playground-layout{gap:24px}
  .playground-legend{padding:15px;margin-top:23px}
  .playground-legend ul{gap:14px 10px}
  .playground-legend li{font-size:10px;gap:8px}
  .playground-topline .playground-stats{max-width:145px;font-size:9px}
  .playground-visual{height:350px}
  .playground-toolbar{padding:2px 12px 14px;gap:7px}
  .playground-tool{flex:1 1 auto;padding:9px 7px;font-size:10px}
  .playground-status{padding:11px 14px 16px}
}
@media(prefers-reduced-motion:reduce){.playground-packet.is-waiting{animation:none}.playground-tool{transition:none}}