@import url('/linksphere/style.css');
@font-face{font-family:'Oxanium';font-style:normal;font-weight:200 800;font-display:swap;src:url('/linksphere/assets/fonts/oxanium.ttf') format('truetype')}
:root{color-scheme:dark}
.sales-page{--showcase-height:min(700px,100vw,calc(100svh - 150px));display:flex;flex-direction:column;justify-content:flex-start;height:auto;min-height:100svh;overflow-x:hidden;text-transform:lowercase}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stage.showcase{flex:0 0 auto;height:var(--showcase-height);margin-top:max(0px,calc((100svh - var(--showcase-height) - 134px)/2));min-height:0;isolation:isolate}
#stage.showcase::before{display:none}
#stage.showcase:focus-visible{outline-color:#9abcda55}
.showcase-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.showcase #orbit{pointer-events:none}
.demo-node{pointer-events:auto;min-width:44px;min-height:44px}
/* A perspective-transformed DOM plane can be cached at CSS-pixel resolution
   even on a dense display. Paint 3x locally, then fit back to the exact same
   world-space size. The capped icon layout keeps this static cache bounded. */
.demo-node .tile{inset:auto;left:50%;top:50%;width:calc(var(--icon-size)*3);height:calc(var(--icon-size)*3);transform:translate(-50%,-50%) scale(.3333333333);transition:filter .2s}
.demo-node:hover .tile,.demo-node:focus-visible .tile{filter:brightness(1.15)}
.demo-node .node-label{opacity:0;font-size:11px;letter-spacing:.025em;transition:opacity .2s}
.demo-node:hover .node-label,.demo-node:focus-visible .node-label{opacity:var(--label-visibility,0)}
.demo-node .demo-group-label{opacity:calc(var(--label-visibility,0)*.6)}
.demo-node[aria-expanded=true] .demo-group-label{opacity:0}
.demo-connections{--connections-safe-top:env(safe-area-inset-top,0px);--connections-safe-right:env(safe-area-inset-right,0px);--connections-safe-bottom:env(safe-area-inset-bottom,0px);--connections-safe-left:env(safe-area-inset-left,0px);position:absolute;z-index:6;transform:translateZ(0);width:148px;padding:0 8px 4px;border:0;background:none;backdrop-filter:none;box-shadow:none;overflow:auto;overscroll-behavior:contain;pointer-events:auto;font-family:'Oxanium',Arial,sans-serif;font-size:12px;letter-spacing:.035em;color:#b9c5ce;text-align:center;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#92a6b344 transparent}
.demo-connections[hidden]{display:none}
.demo-connections::before{content:attr(data-title);display:block;width:max-content;max-width:100%;margin:0 auto 12px;padding:0 0 4px;border-bottom:.5px solid #b4c6d055;color:#9dadb9;font-size:11px;line-height:17px;letter-spacing:.055em}
.demo-connections a{display:block;width:max-content;max-width:100%;min-width:44px;min-height:36px;margin:0 auto;padding:9px 4px;border-bottom:.5px solid #a8b1bd33;color:inherit;text-decoration:none;line-height:17px;touch-action:manipulation}
.demo-connections a:last-child{border-bottom:0}
.demo-connections a:hover,.demo-connections a:focus-visible{color:#eef6ff;background:none;outline:1px solid #a8c5e566;outline-offset:1px}
.showcase.travelling .node-label{opacity:0}
/* Keep the rest of the display legible while the selected grains lift forward. */
.showcase.travelling .node{filter:blur(calc(var(--travel)*1px));opacity:calc(1 - var(--travel)*.18)}
.showcase.travelling .node.selected{filter:none;opacity:1}
.showcase.travelling .node.selected .tile{opacity:calc(var(--tile-opacity,1) * (1 - var(--travel)*7))!important}
.demo-node.glitching .icon-art{transform:translateX(calc(var(--glitch-shift,0px)*3));opacity:var(--glitch-opacity,1);filter:none}
.demo-node .icon-art::before,.demo-node .icon-art::after{content:'';position:absolute;inset:0;background-image:var(--texture);background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0;pointer-events:none}
.demo-node.glitching .icon-art::before{opacity:var(--glitch-echo,0);transform:translateX(calc(var(--glitch-shift,0px)*-6));filter:brightness(1.4) sepia(1) saturate(2) hue-rotate(145deg);clip-path:inset(var(--glitch-slice,28%) 0 calc(84% - var(--glitch-slice,28%)) 0)}
.demo-node.glitching .icon-art::after{opacity:var(--glitch-echo,0);transform:translateX(calc(var(--glitch-shift,0px)*6));filter:brightness(1.35) sepia(1) saturate(2) hue-rotate(275deg);clip-path:inset(48% 0 13% 0)}
.sales-footer{display:flex;flex:0 0 auto;flex-direction:column;justify-content:flex-end;align-items:center;gap:16px;min-height:20svh;margin-top:auto;position:relative;z-index:2;padding:0 24px max(30px,env(safe-area-inset-bottom));font-family:'Oxanium',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sales-menu{display:grid;justify-items:center;perspective:1000px;max-width:100%}
.sales-menu button{font:inherit;appearance:none;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation}
.sales-plus{display:grid;place-items:center;width:74px;height:74px;min-width:44px;min-height:44px;padding:0;color:#dcecf5;transform-style:preserve-3d;transition:filter .2s,transform .15s}
.glass-plus-art{width:70px;height:70px;overflow:visible;filter:drop-shadow(0 1px 2px #87c8e923) drop-shadow(0 0 9px #a0d3ef10);transform-origin:50% 50%;animation:plus-float 7.5s ease-in-out infinite}
.plus-shimmer{opacity:.35;animation:plus-shimmer 6s ease-in-out infinite}
.sales-plus:hover{filter:brightness(1.2)}.sales-plus:active{transform:translateY(2px)}
.sales-plus:focus-visible,.sales-share:focus-visible{outline:1px solid #a8c5e588;outline-offset:4px;border-radius:0}
.sales-plans{display:grid;grid-template-rows:0fr;max-width:100%;opacity:0;visibility:hidden;filter:blur(.7px);transform:perspective(1000px) translateZ(-220px) translateY(-4px);transform-origin:50% 0;transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1),opacity .24s,visibility .34s,filter .34s,transform .34s cubic-bezier(.2,.8,.2,1)}
.sales-menu[data-open=true] .sales-plans{grid-template-rows:1fr;opacity:1;visibility:visible;filter:blur(0);transform:perspective(1000px) translateZ(0) translateY(0)}
.sales-plans-inner{min-height:0;overflow:hidden;padding:0 6px}
.sales-plan-list{display:grid;justify-items:start;width:max-content;margin:0 auto;border-left:.5px solid #a8b1bd66;padding-left:10px}
.sales-menu .sales-plan{display:block;width:max-content;min-width:44px;min-height:44px;padding:10px 0;color:#b9c5cf;font-size:13px;font-weight:400;line-height:20px;letter-spacing:.025em;text-align:left}
.sales-plan span{display:inline-block;width:max-content;padding-bottom:2px;border-bottom:.5px solid #a8b1bd77;transition:transform .15s,color .15s,opacity .15s}
.sales-plan:hover span{color:#e4f1f8}.sales-plan:active span{transform:translateY(2px)}
.sales-plan[aria-pressed=true] span{transform:translateY(1.5px) scale(.985);color:#d4e5ef;opacity:.82;text-shadow:0 1px 2px #0b1d2999}
.sales-plan:focus-visible{outline:none}.sales-plan:focus-visible span{outline:1px solid #a8c5e588;outline-offset:4px}
.sales-reward{display:flex;flex-direction:column;align-items:center;gap:2px;margin:8px 0 2px;scroll-margin-bottom:12px;color:#a8b3bd}
.sales-reward[hidden]{display:none}
.sales-share{display:grid;place-items:center;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;transition:color .15s,transform .15s}
.sales-share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.sales-share:hover{color:#edf7ff}.sales-share:active{transform:translateY(1.5px)}.sales-share:disabled{opacity:.55;cursor:default}
.sales-reward-copy{max-width:270px;margin:0;text-align:center;font-size:10px;font-weight:400;line-height:1.45;letter-spacing:.015em}
.sales-share-status{margin:6px 0 0;text-align:center;font-size:10px;line-height:1.4;color:#b8c7d3}.sales-share-status:empty{display:none}
@keyframes plus-float{0%,100%{transform:perspective(700px) translateY(1px) rotateX(8deg) rotateY(-14deg) rotateZ(-7deg)}50%{transform:perspective(700px) translateY(-3px) rotateX(12deg) rotateY(-18deg) rotateZ(-5deg)}}
@keyframes plus-shimmer{0%,100%{opacity:.2}42%{opacity:.8}60%{opacity:.32}}
.glass-copy{display:inline-block;color:#dce5ed;animation:glass-float 8s ease-in-out infinite}
@supports (background-clip:text) or (-webkit-background-clip:text){
 .tagline-copy.glass-copy{background:linear-gradient(176deg,#f0faffc9 0%,#9fc5d850 38%,#f6fcffeb 46%,#7597ad33 54%,#bdd9e87d 76%,#e5f6ffc2 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.3px #d8edfa8c;text-shadow:0 -.5px .5px #edfaff4d,0 1px 1px #54849c26,0 0 8px #9dc8df16}
}
.tagline-copy{animation-delay:-3s}
@keyframes glass-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-1.5px)}}
.blank-symbol{position:relative;display:inline-block;letter-spacing:0;pointer-events:none}
.blank-symbol::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#9bb2c7;z-index:2}
.particle-symbol,.particle-fallback{position:absolute;width:2.65em;height:2.65em;left:50%;top:48%;transform:translate(-50%,-50%)}
.particle-symbol{opacity:0}.particle-ready .particle-symbol{opacity:1}.particle-ready .particle-fallback{visibility:hidden}
.tagline{display:flex;align-items:flex-end;justify-content:center;gap:.2em;margin:0;color:#9dacba;font-size:clamp(14px,1.4vw,16px);font-weight:400;line-height:1.4;letter-spacing:.018em;white-space:nowrap}
.tagline-symbol{flex:0 0 3.2em;width:3.2em;height:1.5em}
.tagline-period{margin-left:-.1em}
.tagline .particle-symbol,.tagline .particle-fallback{width:3.2em;height:3.2em;top:30%}
.tagline .blank-symbol::after{background:#71879b}
.showcase.fallback-nebula .demo-node::before{opacity:.12}
@media(max-width:600px){.sales-footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-height:500px){.sales-page{min-height:280px}#stage.showcase{height:min(700px,100vw,calc(100svh - 110px))}.sales-footer{gap:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.tagline{font-size:13px}}
@media(prefers-reduced-motion:reduce){.demo-node .tile,.demo-node .node-label{transition:none}.glass-copy{animation:none;transform:none}}
@media(prefers-reduced-motion:reduce){.glass-plus-art,.plus-shimmer{animation:none}.glass-plus-art{transform:perspective(700px) rotateX(10deg) rotateY(-16deg) rotateZ(-6deg)}.sales-plus,.sales-plans,.sales-plan span,.sales-share{transition:none}}

.demo-connections a:active{transform:scale(.95);transform-origin:left center}

/* Color belongs to the recessed plate; the separate glass glyph stays neutral. */
.showcase .demo-node .tile{background:none}.showcase .demo-node .tile::before{content:'';position:absolute;inset:0;background:var(--plate-texture,url('/linksphere/assets/glass-base.svg')) center/100% 100% no-repeat;opacity:var(--plate-opacity,1);pointer-events:none}.showcase .demo-node .surface-light{opacity:calc(var(--reflection,.8)*var(--plate-opacity,1))}.showcase .demo-node .icon-art{opacity:calc(var(--glyph-opacity,.64)*var(--glyph-reveal,1))}.showcase .demo-node.glitching .icon-art{opacity:calc(var(--glyph-opacity,.64)*var(--glyph-reveal,1)*var(--glitch-opacity,1))}
/* Glyph-only reflection follows the same sun/normal as the engraved plate.
   The transparent vector silhouette masks the light, including its cutouts. */
.showcase .demo-node .glyph-light{position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,35%),#fff9,transparent 64%);-webkit-mask-image:var(--texture);mask-image:var(--texture);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;opacity:var(--glyph-reflection,.24);pointer-events:none}

/* Group affordance shares the drawn glass line language, without row rules. */
.group-dropdown-glyph{display:inline-block;width:15px;height:12px;margin-left:6px;vertical-align:middle;pointer-events:none}
.demo-connections::before,.demo-connections a{border-bottom:0}
.demo-connections a:hover,.demo-connections a:focus-visible{outline:none;filter:none;color:#eef6ff}

/* Only the decorative backdrop is feathered; link ink and hit areas stay crisp. */
.demo-connections a,.owner-renderer .owner-connections a{position:relative;z-index:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 2px #000,0 0 5px #000c,0 0 10px #0008}
@supports (mask-image:radial-gradient(#000,transparent)) or (-webkit-mask-image:radial-gradient(#000,transparent)){
 .demo-connections a::before,.owner-renderer .owner-connections a::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 40%,#0008 70%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 40%,#0008 70%,transparent 100%)}
}
@media(forced-colors:active){.demo-connections a:focus-visible,.owner-renderer .owner-connections a:focus-visible{text-decoration:underline;text-underline-offset:3px}}

/* Neutrality is baked into public glyphs and owner display derivatives.
   Filtering this nested plane makes WebKit drop the visible symbol. */
.showcase .demo-node .icon-art{background-image:none;filter:none}
.showcase .glass-glyph-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* Landing uses the approved external hex plate, with its separate glass glyph. */
.sales-page .showcase .demo-node .tile::before{background-image:url('/linksphere/assets/glass-base.svg')}

.showcase-particles-fallback[hidden]{display:none}