/* The live network is an ambient place to watch, with a clear exploration layer. */
@property --network-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero{grid-template-columns:.86fr 1.22fr;gap:38px;align-items:center}
.hero-network{--scene-a:#6cd6cd;--scene-b:#9384e4;--scene-c:#afffdb;--scene-scale:linear-gradient(90deg,var(--scene-b),var(--scene-a),var(--scene-c));isolation:isolate;overflow:hidden;border:1px solid transparent;border-radius:18px;background:linear-gradient(#0b131a,#0b131a) padding-box,conic-gradient(from var(--network-angle),#203c40 0deg,var(--scene-a) 60deg,#23414b 100deg,var(--scene-b) 190deg,#283641 245deg,var(--scene-c) 290deg,#203c40 360deg) border-box;animation:network-frame 18s linear infinite;box-shadow:0 24px 90px #0005,0 0 60px #72c8ba08;scroll-margin-top:115px}
.hero-network[data-palette=kaspa]{--scene-a:#70c7ba;--scene-b:#4d978c;--scene-c:#bfffe1;}
.hero-network[data-palette=aurora]{--scene-a:#62d3db;--scene-b:#7274cd;--scene-c:#aeffda;}
.hero-network[data-palette=deep]{--scene-a:#5faaed;--scene-b:#3d67af;--scene-c:#9eedff;}
.hero-network[data-palette=violet]{--scene-a:#ac87ed;--scene-b:#6b55a8;--scene-c:#eed8ff;}
.hero-network[data-palette=sunset]{--scene-a:#f59483;--scene-b:#9d5db2;--scene-c:#ffdf9e;}
.hero-network[data-palette=rose]{--scene-a:#ea82b3;--scene-b:#8c548e;--scene-c:#ffd1e8;}
.hero-network[data-palette=ember]{--scene-a:#ed9b5b;--scene-b:#986044;--scene-c:#ffe8af;}
.hero-network[data-palette=spectrum]{--scene-a:#60d3b6;--scene-b:#775cce;--scene-c:#ffa690;--scene-scale:linear-gradient(90deg,#775cce,#6689e7,#58b9e1,#60d3b6,#aede75,#f6d174,#ffa690);}
.hero-network:after{border-radius:inherit;box-shadow:inset 0 0 50px #86efda04}
.graph-top{position:relative;z-index:6;padding:13px 21px;border-bottom:1px solid #b1daec0b;background:#0d182178}
.graph-top .eyebrow{font-size:9px;letter-spacing:1.6px;color:#b9d3d4}
.graph-top .connection{font-size:9px;color:#91b2b0}
[data-network-state=live] .graph-top .dot{animation:network-beacon 3s ease-in-out infinite}
.graph-intro{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 22px 4px}
.graph-overline{display:block;font:9px/1.4 var(--font);letter-spacing:2px;color:#77949e;margin-bottom:7px}
.graph-intro h2{font:400 clamp(20px,1.8vw,27px)/1.3 var(--font);letter-spacing:-.9px;white-space:normal;margin:0}
.graph-intro h2>span{color:var(--scene-a)}
.graph-watch{display:inline-flex;gap:10px;align-items:center;justify-content:center;border:1px solid #9ad6d432;border-radius:9px;padding:10px 12px;min-height:42px;max-width:165px;font:10px/1.5 var(--font);color:#c7e9e0;background:linear-gradient(120deg,#6cd6cd14,#9384e40b);transition:background .3s,box-shadow .3s,border-color .3s;flex-shrink:0}
.graph-watch:hover{border-color:var(--scene-a);background:#6cd6cd22;box-shadow:0 0 22px #6cd6cd14}
.graph-watch svg{width:18px;height:18px;flex-shrink:0}
.hero-network .graph-space{height:370px;background:none;isolation:isolate;overflow:hidden}
.graph-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 55% 48%,#19333d26,transparent 65%)}
.graph-atmosphere i{position:absolute;border-radius:50%;width:75%;height:120%;opacity:.11;filter:blur(48px);background:radial-gradient(ellipse,var(--scene-a),transparent 65%);left:28%;top:-35%;animation:network-nebula 27s ease-in-out infinite alternate}
.graph-atmosphere i:nth-child(2){background:radial-gradient(ellipse,var(--scene-b),transparent 65%);left:-22%;top:-10%;opacity:.12;animation-delay:-14s;animation-duration:34s}
.graph-atmosphere i:nth-child(3){width:50%;height:70%;background:radial-gradient(ellipse,var(--scene-c),transparent 70%);left:60%;top:28%;opacity:.07;animation-delay:-8s;animation-duration:23s}
#live-dag{cursor:grab;touch-action:pan-y;outline-offset:-4px}
#live-dag.dragging{cursor:grabbing}
.graph-hud{position:absolute;left:22px;right:22px;top:25px;display:flex;justify-content:space-between;gap:15px;pointer-events:none;z-index:4;font:8px/1.5 monospace;letter-spacing:.8px;color:#76979f}
.graph-hud>span:first-child{display:flex;align-items:center;gap:8px}
.graph-lens{width:8px;height:8px;border:1px solid var(--scene-a);border-radius:50%;display:inline-block;box-shadow:0 0 12px #75cfc425}
.hero-network .graph-vignette{box-shadow:inset 0 0 55px #080e1580;z-index:3;pointer-events:none}
.hero-network .graph-axis{left:22px;right:22px;bottom:20px;font-size:8px;color:#709c9f;letter-spacing:1.5px}
.graph-axis i{background:var(--scene-scale);opacity:.32}
.graph-tools{position:relative;z-index:6;display:flex;align-items:center;gap:12px;margin:0 20px;padding:13px 0;border-top:1px solid #b6d9eb12;border-bottom:1px solid #b6d9eb12}
.graph-tools button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:32px;height:34px;border:1px solid transparent;border-radius:6px;font:10px/1 var(--font);color:#8caaaf;transition:background .2s,border-color .2s,color .2s}
.graph-tools button:hover{background:#a3e5df12;color:#e7fff4;border-color:#aad7e52b}
.graph-tools button[aria-pressed=true]{background:#8cdae917;border-color:#8cdae92b;color:#d2f8f1}
.graph-tools button:focus-visible,.graph-watch:focus-visible{outline:2px solid var(--scene-a);outline-offset:3px}
.graph-tools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
.graph-mode-group{display:flex;gap:3px}
.graph-mode-group button{padding:0 9px}
.graph-palette-group{display:flex;border-left:1px solid #9bc2d41c;padding-left:9px}
#graph-palette-toggle{width:94px;min-width:94px;padding:0 9px;gap:8px;white-space:nowrap}
#graph-palette-toggle>i{display:block;flex-shrink:0;width:14px;height:14px;border-radius:50%;box-shadow:0 0 10px #92dde221;background:var(--scene-scale)}
#graph-palette-toggle svg{width:12px;height:12px;transition:transform .2s}
#graph-palette-toggle[aria-expanded=true]{background:#8cdae917;border-color:#8cdae92b;color:#d2f8f1}
#graph-palette-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
#graph-palette-picker{position:absolute;right:0;bottom:calc(100% + 12px);width:min(330px,100%);max-height:min(470px,max(150px,calc(100dvh - 200px)));padding:12px 14px 15px;overflow-y:auto;overscroll-behavior:contain;z-index:12;border:1px solid #a4dfda40;border-radius:14px;background:#0a1724fa;box-shadow:0 20px 65px #0008;backdrop-filter:blur(22px)}
.graph-palette-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font:8px var(--font);letter-spacing:1.7px;color:#90b1b7}
#graph-palette-close{width:36px;min-width:36px;height:36px;padding:8px;margin-right:-5px}
.graph-palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#graph-palette-picker [data-graph-palette]{width:100%;min-width:0;height:42px;padding:0 9px;gap:8px;justify-content:flex-start;font:10px/1.4 var(--font);color:#b0cbcf;background:#b1deeb05;border-color:#b1deeb10;text-align:left}
#graph-palette-picker [data-graph-palette]:hover{background:#b1deeb10;border-color:#b1deeb30;color:#e7fff4}
#graph-palette-picker [data-graph-palette][aria-pressed=true]{background:#8cdae91a;border-color:#8cdae960;color:#e0fff4}
#graph-palette-picker [data-graph-palette]>i{display:block;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--palette-swatch);box-shadow:0 0 12px #b1deeb1a}
#graph-palette-picker p{font:9px/1.6 var(--font);color:#8caab0;margin:13px 0 0;padding-top:11px;border-top:1px solid #b1deeb14}
.graph-glow-control{margin-top:14px;padding-top:13px;border-top:1px solid #b1deeb14;min-width:0}
.graph-glow-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font:11px/1.5 var(--font);color:#cce7e2}
.graph-glow-heading label{cursor:pointer}
.graph-glow-heading output{font-variant-numeric:tabular-nums;color:var(--scene-a);white-space:nowrap}
#graph-glow{display:block;width:100%;min-width:0;height:44px;min-height:44px;margin:1px 0 0;padding:0;accent-color:var(--scene-a);cursor:pointer}
#graph-glow:focus-visible{outline:2px solid var(--scene-a);outline-offset:2px;border-radius:5px}
.graph-glow-control small{display:block;font:10px/1.6 var(--font);color:#91b1b6}
.graph-navigation{margin-left:auto;display:flex;gap:2px}
.graph-navigation button{font:17px/1 monospace}
.graph-navigation #graph-pause{font:13px/1 var(--font);margin-left:3px}
.hero-network .graph-bottom{border:0;padding:15px 21px 9px;position:relative;z-index:6;gap:14px}
.hero-network .graph-bottom>div{gap:12px;display:flex;align-items:center;flex-wrap:wrap}
.hero-network .live-tag{border-color:#78b9b32b;border-radius:4px;color:#8dd8c7;font-size:7px;letter-spacing:.8px;white-space:nowrap}
.graph-tempo{font-size:10px;color:#8da8ac;white-space:nowrap}
.graph-tempo b{font:500 15px var(--font);color:#d5eee8;margin-right:3px}
.graph-tempo small{font:8px/1.4 var(--font);color:#607e88;margin-left:5px}
.hero-network .graph-meta{position:relative;z-index:6;padding:0 21px 13px;font-size:8px;color:#78959e;flex-wrap:wrap;gap:6px 12px}
.graph-instructions{position:relative;z-index:6;padding:12px 21px;display:flex;gap:12px;justify-content:space-between;font:8px/1.5 var(--font);color:#7e9ba1;border-top:1px solid #b6d9eb0c}
.graph-color-key{display:flex;gap:6px;align-items:center;white-space:nowrap}
.graph-color-key i{width:24px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--scene-b),var(--scene-a),var(--scene-c))}
.graph-info{position:absolute;right:20px;bottom:48px;z-index:5;width:226px;padding:17px;border-radius:12px;border:1px solid #a4dfda38;background:#0a1724ed;box-shadow:0 16px 40px #0005;backdrop-filter:blur(18px)}
.graph-info-label{padding-right:32px;display:block;font:7px var(--font);letter-spacing:1.5px;color:#82a8ae}
.graph-info strong{display:block;font:12px monospace;color:#d3f4e8;margin:9px 0 13px;letter-spacing:.5px}
.graph-info>div{display:flex;gap:13px;font:9px var(--font);color:#8cabb2}
.graph-info b{font-weight:500;color:#cae5de}
.graph-info a{display:inline-flex;color:#95dcca;font:9px var(--font);margin-top:16px}
.graph-info button{display:block;text-align:left;padding:12px 0 0;margin-top:13px;border-top:1px solid #a7d1d218;width:100%;font:9px var(--font);color:#a3babe}
.graph-info button:hover,.graph-info a:hover{color:#e0fff1}
#graph-detail-close{position:absolute;top:3px;right:3px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:8px;background:transparent;color:#a3c6cb;cursor:pointer}
#graph-detail-close:hover{background:#a3e5df12;color:#e7fff4}
#graph-detail-close svg{width:20px;height:20px;pointer-events:none}
#graph-awake{display:none;min-height:34px;height:auto;width:auto;padding:7px 12px;font:9px var(--font);border-radius:6px;background:#0e242b;border-color:#a8d7d522}
#network-theater{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#060d13}
#network-theater::backdrop{background:#060d13}
.network-theater-open{overflow:hidden}
body.network-theater-open>:not(#network-theater){visibility:hidden}
.hero-network.is-theater{position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#060d13;box-shadow:none;animation:none;max-width:none;margin:0;transform:none;visibility:visible}
.hero-network.is-theater::backdrop{background:#060d13}
.hero-network.is-theater .graph-space{position:absolute;inset:0;height:100%;width:100%}
.is-theater #live-dag{touch-action:none}
.is-theater .graph-top{position:absolute;top:0;left:0;right:0;z-index:7;padding:22px 40px;border:0;background:linear-gradient(#060d13b0,transparent)}
.is-theater .graph-top .eyebrow{font-size:10px;letter-spacing:2px}
.is-theater .graph-top .connection{display:none}
.is-theater .graph-intro{position:absolute;top:max(18px,env(safe-area-inset-top));left:0;right:0;padding:0 max(20px,env(safe-area-inset-right)) 0 20px;pointer-events:none;align-items:start;justify-content:flex-end;z-index:20}
.is-theater .graph-intro>div{display:none}
.is-theater .graph-intro h2{font-size:clamp(28px,3.2vw,48px);letter-spacing:-1.8px;transition:opacity .8s}
.is-theater .graph-overline{font-size:10px;margin-bottom:13px;transition:opacity .8s}
.is-theater .graph-watch{pointer-events:auto;min-width:144px;min-height:48px;font-size:12px;margin:0;padding:12px 16px;border-color:#9ad6d46b;background:#0d222cf5;color:#e7fff4;opacity:1;box-shadow:0 6px 24px #0005;touch-action:manipulation}
.is-theater [data-graph-sample]{transition:opacity .6s}
.is-theater .graph-hud{top:92px;left:40px;right:40px;font-size:9px;letter-spacing:1.4px}
.is-theater .graph-tools{position:absolute;bottom:95px;left:50%;width:500px;max-width:calc(100% - 36px);margin:0;padding:10px 13px;transform:translateX(-50%);border:1px solid #a6dae429;border-radius:12px;background:#0a1723d9;backdrop-filter:blur(20px);box-shadow:0 12px 50px #0004;transition:opacity .6s}
.is-theater .graph-tools button{height:44px;min-width:44px;font-size:11px}
.is-theater .graph-tools .graph-mode-group button{padding:0 12px}
.is-theater .graph-palette-group button{width:32px;min-width:32px}
.is-theater .graph-bottom{position:absolute;bottom:42px;left:40px;right:40px;padding:0;justify-content:space-between}
.is-theater .graph-tempo b{font-size:21px}
.is-theater .graph-tempo{font-size:11px}
.is-theater .live-tag{font-size:8px;padding:5px 7px}
.is-theater .graph-meta{position:absolute;bottom:18px;left:40px;right:40px;padding:0;font-size:9px}
.is-theater .graph-instructions{position:absolute;bottom:175px;left:40px;right:40px;border:0;padding:0;font-size:9px;transition:opacity .6s}
.is-theater .graph-axis{bottom:220px;left:40px;right:40px;font-size:9px}
.is-theater .graph-info{right:40px;bottom:240px;width:250px;padding:22px}
.is-theater .graph-info strong{font-size:14px}
.is-theater .graph-atmosphere i{filter:blur(80px);opacity:.12}
.is-theater .graph-atmosphere i:nth-child(2){opacity:.13}
.is-theater #graph-awake:not([hidden]){display:inline-flex;align-items:center;justify-content:center}
.is-theater.graph-idle [data-graph-sample],.is-theater.graph-idle .graph-tools,.is-theater.graph-idle .graph-intro h2,.is-theater.graph-idle .graph-overline,.is-theater.graph-idle .graph-instructions{opacity:0;pointer-events:none}
.is-theater.graph-idle .graph-watch{opacity:1;pointer-events:auto}
.hero h1 .mint{background:linear-gradient(110deg,#70c7ba 10%,#b1f3d4 45%,#7cc6d4 70%,#70c7ba 95%);background-size:240% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:network-wordmark 15s ease-in-out infinite alternate}
.article-card:hover{box-shadow:0 12px 40px #0003,0 0 28px #70c7ba0c}
.resource-list>a{transition:background .3s,padding .3s}
.resource-list>a:hover{background:linear-gradient(90deg,#70c7ba0a,transparent)}
.hero:not(.motion-onstage) .hero-network,.hero:not(.motion-onstage) .graph-atmosphere i,.hero:not(.motion-onstage) h1 .mint{animation-play-state:paused}
@keyframes network-frame{to{--network-angle:360deg}}
@keyframes network-nebula{from{transform:translate3d(-5%,-3%,0) rotate(-12deg) scale(.9)}to{transform:translate3d(10%,13%,0) rotate(12deg) scale(1.1)}}
@keyframes network-beacon{0%,100%{box-shadow:0 0 4px #70c7ba50}50%{box-shadow:0 0 14px #70c7ba90}}
@keyframes network-wordmark{to{background-position:100% 0}}
@media(min-width:1650px){.hero-network .graph-space{height:420px}}
@media(max-width:1200px) and (min-width:761px){.hero{gap:25px;grid-template-columns:.85fr 1.2fr}.graph-intro{padding-inline:16px}.graph-intro h2{font-size:22px}.graph-watch{max-width:118px;padding-inline:9px;font-size:9px}.graph-tools{margin-inline:14px;gap:6px;flex-wrap:wrap}.graph-tools button{min-width:29px}.graph-mode-group button{padding-inline:7px}.graph-palette-group{padding-left:6px}.graph-palette-group button{min-width:25px;width:25px}.graph-tempo small{display:none}.hero-network .graph-space{height:340px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:32px}.hero-network{border-radius:14px}.graph-intro{padding:20px 17px 3px;gap:10px}.graph-intro h2{font-size:23px;max-width:210px}.graph-overline{font-size:8px;margin-bottom:7px}.graph-watch{font-size:9px;padding:10px;max-width:126px}.graph-watch svg{width:16px;height:16px}.hero-network .graph-space{height:330px}.graph-top{padding:13px 17px}.graph-top .eyebrow{font-size:8px}.graph-top .connection{font-size:8px}.graph-tools{margin-inline:15px;gap:9px}.graph-tools button{min-width:31px}.hero-network .graph-meta{padding-inline:17px;font-size:8px}.hero-network .graph-bottom{padding-inline:17px}.graph-instructions{padding:11px 17px;font-size:8px}.graph-tempo small{display:none}.graph-info{width:210px;right:16px;padding:16px;bottom:44px}.is-theater .graph-top{padding:19px 20px}.is-theater .graph-top .eyebrow{font-size:8px}.is-theater .graph-top .connection{font-size:8px}.is-theater .graph-intro{top:max(14px,env(safe-area-inset-top));padding-inline:20px}.is-theater .graph-intro h2{font-size:30px;max-width:260px;letter-spacing:-1px}.is-theater .graph-overline{font-size:8px;margin-bottom:8px}.is-theater .graph-watch{min-width:144px;max-width:none;min-height:48px;font-size:11px}.is-theater .graph-hud{top:82px;left:20px;right:20px;font-size:8px;letter-spacing:.6px}.is-theater .graph-axis{left:20px;right:20px;bottom:230px;font-size:8px}.is-theater .graph-tools{bottom:103px;width:490px}.is-theater .graph-instructions{left:20px;right:20px;bottom:184px;font-size:8px}.is-theater .graph-bottom{left:20px;right:20px;bottom:49px}.is-theater .graph-meta{left:20px;right:20px;bottom:18px;font-size:8px}.is-theater .graph-tempo b{font-size:18px}.is-theater .graph-tempo{font-size:10px}.is-theater #graph-awake{font-size:8px;padding:7px 9px;max-width:120px}.is-theater .graph-info{right:20px;bottom:250px;width:220px;padding:17px}.is-theater .graph-atmosphere i{filter:blur(45px)}}
@media(max-width:550px){.graph-tools{flex-wrap:wrap;gap:7px}.graph-mode-group{flex:1}.graph-mode-group button{flex:1}.graph-palette-group{margin-left:auto}.graph-navigation{flex-basis:100%;justify-content:center;border-top:1px solid #b6d9eb0c;padding-top:5px;margin:3px 0 0;gap:12px}.graph-navigation button{min-width:42px}.graph-tools{padding-block:10px}.hero-network .graph-space{height:310px}.is-theater .graph-tools{bottom:96px;width:340px;padding:9px 11px;gap:6px}.is-theater .graph-tools button{height:44px}.is-theater .graph-navigation{padding-top:5px;margin-top:2px;gap:16px}.is-theater .graph-instructions{bottom:205px}.is-theater .graph-axis{bottom:239px}.is-theater .graph-info{bottom:265px}.is-theater .graph-bottom>div{gap:8px}.is-theater .graph-tempo{font-size:9px}}
@media(max-width:370px){.graph-intro h2{font-size:21px}.graph-watch{max-width:108px;font-size:8px}.graph-instructions{font-size:7px;gap:6px}.graph-top .connection{font-size:7px}.is-theater .graph-intro h2{font-size:25px}}
@media(max-height:550px) and (min-width:551px){.is-theater .graph-top{padding-block:12px}.is-theater .graph-intro{top:max(12px,env(safe-area-inset-top))}.is-theater .graph-intro h2{font-size:25px}.is-theater .graph-overline{display:none}.is-theater .graph-hud{top:80px}.is-theater .graph-tools{bottom:66px;padding:6px 10px}.is-theater .graph-tools button{height:44px}.is-theater .graph-bottom{bottom:32px}.is-theater .graph-meta{bottom:10px}.is-theater .graph-instructions{display:none}.is-theater .graph-axis{bottom:135px}.is-theater .graph-info{bottom:145px;padding:14px}}
@media(prefers-reduced-motion:reduce){.hero-network,.graph-atmosphere i,.hero h1 .mint,.graph-top .dot{animation:none!important}.graph-tools,.graph-intro h2,.graph-overline,.graph-instructions,.is-theater [data-graph-sample]{transition:none}.graph-atmosphere i{transform:none}.hero-network{background:linear-gradient(#0b131a,#0b131a) padding-box,linear-gradient(125deg,var(--scene-b),var(--scene-a),var(--scene-c)) border-box}}

/* On touch-sized screens, retain the colour and soft light without repainting
   the whole card for a changing gradient angle or blurring moving layers. */
@media(max-width:760px){
 .hero-network{animation:none;background:linear-gradient(#0b131a,#0b131a) padding-box,linear-gradient(135deg,var(--scene-b),var(--scene-a),var(--scene-c)) border-box}
 .graph-atmosphere i,.is-theater .graph-atmosphere i{filter:none;will-change:transform}
 #live-dag{transform:translateZ(0)}
}

/* Sharing is available to every visitor, beside the view it belongs to. */
.graph-sharing{position:relative;z-index:9;padding:12px 20px 10px;border-top:1px solid #b6d9eb12}
.graph-share-actions,.graph-share-options{display:flex;gap:8px;flex-wrap:wrap}
.graph-sharing button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 13px;border:1px solid #9ad6d42e;border-radius:8px;background:#13232f;color:#cce7e2;font:11px/1.4 var(--font);text-align:center}
.graph-sharing button:hover{border-color:var(--scene-a);background:#1c3641}
.graph-sharing button:focus-visible,.graph-sharing input:focus-visible{outline:2px solid var(--scene-a);outline-offset:3px}
.graph-sharing button:disabled{opacity:.55;cursor:wait}
.graph-sharing button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;flex-shrink:0}
.graph-sharing button small{font:8px/1 var(--font);letter-spacing:.6px;color:#88acae}
.graph-share-status{font:10px/1.6 var(--font);color:#b4d6ce;margin:7px 0 0;max-width:480px}
.graph-share-status:empty{display:none}
.graph-share-panel{position:absolute;bottom:calc(100% + 8px);left:12px;right:12px;max-height:min(410px,calc(100dvh - 100px));overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid #a4dfda50;border-radius:13px;background:#0a1724fa;box-shadow:0 18px 65px #0009;backdrop-filter:blur(20px)}
.graph-share-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.graph-share-heading strong{font:500 18px/1.4 var(--font);letter-spacing:-.4px;color:#e6f7f1}
.graph-share-heading button{width:44px;padding:10px;margin:-8px -8px -8px 0;background:transparent;border:0}
.graph-share-panel p{font:11px/1.7 var(--font);color:#a6c1c5;margin:12px 0 16px}
.graph-share-panel label{display:block;font:10px/1.5 var(--font);color:#9cbbbf;margin-bottom:7px}
.graph-share-panel input{width:100%;min-width:0;min-height:44px;border:1px solid #54777d;border-radius:7px;padding:10px;background:#060f18;color:#d8eee9;font:11px/1.5 monospace}
.graph-share-options{margin-top:12px}
.graph-share-panel>small{display:block;margin-top:14px;font:10px/1.7 var(--font);color:#8eafb5}
.is-theater .graph-sharing{position:absolute;top:76px;left:40px;right:40px;border:0;padding:0;width:fit-content;max-width:calc(100% - 80px);transition:opacity .6s}
.is-theater .graph-share-panel{top:calc(100% + 10px);bottom:auto;left:0;right:auto;width:480px;max-width:calc(100vw - 80px)}
.is-theater .graph-hud{top:146px}
.is-theater.graph-idle .graph-sharing{opacity:0;pointer-events:none}
@media(max-width:760px){.graph-sharing{padding-inline:15px}.graph-sharing button{font-size:10px;padding-inline:11px}.is-theater .graph-sharing{top:76px;left:20px;right:20px;max-width:calc(100% - 40px)}.is-theater .graph-share-panel{max-width:calc(100vw - 40px)}.graph-share-panel{padding:15px}.is-theater .graph-hud{top:145px}}
@media(max-height:550px) and (min-width:551px){.is-theater .graph-sharing{top:auto;bottom:66px;left:20px;right:auto;max-width:calc(50% - 30px)}.is-theater .graph-share-actions{flex-direction:column;gap:5px}.is-theater .graph-share-panel{top:auto;bottom:calc(100% + 8px);max-height:calc(100dvh - 30px)}.is-theater .graph-tools{left:auto;right:20px;transform:none;width:490px;max-width:calc(60% - 20px)}.is-theater .graph-hud{top:80px}}
@media(prefers-reduced-motion:reduce){.graph-sharing{transition:none!important}}
.graph-hud{flex-wrap:wrap}
.is-theater .graph-tools{width:500px}
.graph-sound-volume{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;min-height:44px;font:10px/1.5 var(--font);color:#acc9c9}
.graph-sound-volume input{width:130px;min-height:44px;margin:0;accent-color:var(--scene-a);cursor:pointer}
.graph-sound-volume small{font:9px/1.5 var(--font);color:#92b1b6}
.graph-sharing [data-network-sound][aria-pressed=true]{border-color:#8cdae960;background:#203c43;color:#e0fff4}
.graph-snapshot-result{display:flex;gap:16px;flex-wrap:wrap;min-height:44px;align-items:center;margin-top:4px;font:11px/1.5 var(--font);color:#b6ded7}
.graph-snapshot-result a{display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:4px}
.graph-snapshot-result a:hover{color:#edfff9}
.is-theater:has(.graph-sound-volume:not([hidden])) .graph-hud{top:200px}
.is-theater:has(.graph-snapshot-result:not([hidden])) .graph-hud{top:200px}
.is-theater:has(.graph-snapshot-result:not([hidden])):has(.graph-sound-volume:not([hidden])) .graph-hud{top:250px}
@media(max-width:550px){.graph-mode-group svg{display:none}.graph-tools .graph-mode-group button{padding-inline:7px}.is-theater .graph-tools{width:340px}.graph-sharing [data-network-sound]{width:44px;padding:10px}.graph-sharing [data-network-sound]>span{display:none}.graph-share-actions{gap:6px}.graph-sound-volume small{flex-basis:100%;margin-top:-5px}.is-theater:has(.graph-sound-volume:not([hidden])) .graph-hud{top:218px}}
@media(max-height:550px) and (min-width:551px){.is-theater .graph-tools{width:520px}.is-theater:has(.graph-sound-volume:not([hidden])) .graph-hud{top:80px}.is-theater .graph-sound-volume{padding:8px;background:#0a1724ee;border-radius:8px;max-width:240px}}
@media(max-height:550px) and (min-width:551px){.is-theater:has(.graph-snapshot-result:not([hidden])) .graph-hud{top:80px}}

.graph-sound-volume select{min-height:44px;max-width:190px;padding:8px 28px 8px 10px;border:1px solid #54777d;border-radius:7px;background:#10232d;color:#dceee8;font:11px/1.4 var(--font)}
.graph-sound-volume select:focus-visible{outline:2px solid var(--scene-a);outline-offset:3px}
.hero-network .graph-share-status{font:11px/1.6 var(--font)}
@media(max-width:550px){.graph-sound-volume{gap:8px}.graph-sound-volume select{max-width:155px}.graph-sound-volume small{flex-basis:100%}.is-theater:has(.graph-sound-volume:not([hidden])) .graph-hud{top:270px}.is-theater:has(.graph-snapshot-result:not([hidden])):has(.graph-sound-volume:not([hidden])) .graph-hud{top:310px}}