@layer reset,base,components,responsive;@layer theme{.grid-illustration{isolation:isolate;min-width:0;margin:0 -26px 0 -8px;position:relative;overflow:hidden}.grid-hud{z-index:2;justify-content:space-between;align-items:center;padding-inline:20px;display:flex;position:relative}.grid-hud>.mono{color:#9aa8cf;letter-spacing:.1em;align-items:center;gap:8px;font-size:8px;display:flex}.grid-hud i{background:#9fa6ff;width:5px;height:5px;box-shadow:0 0 12px #7a73ff}.motion-toggle{color:#b5c1de;font:9px var(--mono);background:#151b2a;border:1px solid #303a56;border-radius:4px;align-items:center;gap:8px;padding:9px 10px;display:inline-flex}.motion-toggle span{color:#b2b6ff}.scene-viewport{perspective:1000px;cursor:grab;touch-action:pan-y;outline-offset:-5px;height:460px;position:relative;overflow:clip}.scene-viewport.is-dragging{cursor:grabbing}.scene-world{transform-style:preserve-3d;will-change:transform;pointer-events:none;position:absolute;inset:0;transform:rotateX(-18deg)rotateY(-28deg)}.scene-nebula{filter:blur(15px);pointer-events:none;background:radial-gradient(at 52%,#5d49ff30,#0000 55%),radial-gradient(at 76% 27%,#327ef211,#0000 40%);position:absolute;inset:-40px -15px}.scene-floor{pointer-events:none;background-image:linear-gradient(#6479bd29 1px,#0000 1px),linear-gradient(90deg,#6479bd29 1px,#0000 1px);background-size:32px 32px;width:115%;height:330px;position:absolute;bottom:-37px;left:-7.5%;transform:perspective(500px)rotateX(62deg);mask-image:radial-gradient(#000 8%,#0000 68%)}.scene-stars{pointer-events:none;position:absolute;inset:0}.scene-stars i{top:var(--sy);left:var(--sx);opacity:.4;width:2px;height:2px;animation:stardrift 9s var(--delay) ease-in-out infinite alternate;background:#bac6ff;position:absolute;box-shadow:0 0 9px #8d94ff}.scene-stars i:nth-child(3n){background:#7c98e2;width:3px;height:3px}.voxel-anchor{transform-style:preserve-3d;width:0;height:0;position:absolute}.anchor-core{top:50%;left:50%;transform:translateZ(40px)}.anchor-mac{top:27%;left:25%;transform:translateZ(-35px)}.anchor-linux{top:29%;left:77%;transform:translateZ(-65px)}.anchor-vm{top:81%;left:38%;transform:translateZ(0)}.voxel{--size:61px;--half:30.5px;width:var(--size);height:var(--size);top:calc(var(--half) * -1);left:calc(var(--half) * -1);transform-style:preserve-3d;animation:6s ease-in-out infinite voxel-float;position:absolute}.voxel-core{--size:128px;--half:64px;animation-duration:7s}.voxel-linux{animation-delay:-2s}.voxel-vm{animation-delay:-4s}.voxel-face{backface-visibility:hidden;background-color:#141e3f;background-image:linear-gradient(#9fa8ff12 1px,#0000 1px),linear-gradient(90deg,#9fa8ff12 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:25% 25%;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #7889e975;place-items:center;width:100%;height:100%;display:grid;position:absolute;box-shadow:inset 0 0 20px #7283ff16}.face-front{transform:translateZ(var(--half));background-color:#202f60}.face-back{transform:rotateY(180deg) translateZ(var(--half))}.face-right{transform:rotateY(90deg) translateZ(var(--half));background-color:#182244}.face-left{transform:rotateY(-90deg) translateZ(var(--half))}.face-top{transform:rotateX(90deg) translateZ(var(--half));background-color:#344575}.face-bottom{transform:rotateX(-90deg) translateZ(var(--half))}.voxel-core .voxel-face{border-color:#adb0ffb5;box-shadow:inset 0 0 35px #a296ff20}.voxel-core .face-front{background-color:#5358ee}.voxel-core .face-right{background-color:#2a329f}.voxel-core .face-left,.voxel-core .face-back{background-color:#3a3fbf}.voxel-core .face-top{background-color:#787aff}.voxel-core .face-bottom{background-color:#252789}.core-glyph{grid-template-columns:1fr 1fr;gap:10px;width:50px;height:50px;display:grid}.core-glyph i{background:#eef0ff;box-shadow:0 0 18px #ffffff50}.node-bars{flex-direction:column;gap:6px;width:25px;display:flex}.node-bars i{background:#9bb7ff;width:100%;height:2px;box-shadow:0 0 8px #6b90ff80}.node-bars i:last-child{width:60%}.core-platform{filter:blur(15px);background:radial-gradient(#6e5bff45,#656aff0b 45%,#0000 70%);width:180px;height:180px;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%)translateZ(-80px)}.grid-connections{opacity:.8;width:100%;height:100%;position:absolute;inset:0;transform:translateZ(-35px)}.connection-flow{animation:20s linear infinite beam-flow}.orbital{width:295px;height:295px;transform-style:preserve-3d;border:1px solid #9a88ff65;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateX(70deg)rotate(-25deg);box-shadow:0 0 18px #706bff12}.orbital:before{content:"";background:#b4a8ff;border-radius:50%;width:5px;height:5px;position:absolute;top:50%;left:-3px;box-shadow:0 0 12px 3px #8e69ff80}.orbital-one{animation:30s linear infinite orbit-spin}.orbital-two{border-style:dashed;border-color:#6ac4df45;width:237px;height:237px;transform:translate(-50%,-50%)rotateY(60deg)rotate(25deg)}.orbital-two:before{background:#9be3f4;box-shadow:0 0 12px #5bc5ff}.grid-node{z-index:3;color:#bdc9e8;min-height:34px;font:8px var(--mono);background:#0e1424df;border:1px solid #303c61;border-radius:4px;align-items:center;gap:7px;padding:9px 11px;transition:border-color .2s,background .2s,box-shadow .2s;display:flex;position:absolute;box-shadow:0 5px 30px #0005}.grid-node:hover,.grid-node[aria-pressed=true]{color:#ececff;background:#1b2242;border-color:#9b9fff;box-shadow:0 0 18px #7673ff25}.node-light{background:#9ba5ff;width:4px;height:4px;box-shadow:0 0 7px #8a7dff}.node-cross{color:#91a0ca;margin-left:8px;font-size:12px}.node-mac{top:13%;left:9%}.node-linux{top:16%;right:0}.node-vm{top:84%;left:21%}.scene-axis{color:#8092c2;pointer-events:none;align-items:center;gap:6px;font-size:7px;display:flex;position:absolute;bottom:6px;left:20px}.scene-axis i{border-bottom:1px solid #6076af;border-left:1px solid #6076af;width:20px;height:20px;transform:skewY(-20deg)}.scene-hint{color:#94a0c0;pointer-events:none;font-size:7px;position:absolute;bottom:0;right:12px}.scene-hint span{color:#a3a9ff;margin-left:10px}.scene-surge{opacity:0;pointer-events:none;background:radial-gradient(#0000 35%,#9a85ff35 50%,#0000 65%);border-radius:50%;width:300px;height:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.grid-status{background:linear-gradient(110deg,#161c31,#0e1320);border:1px solid #29334c;border-radius:6px;align-items:center;gap:14px;margin:23px 15px 0;padding:15px 18px;display:flex;position:relative}.grid-status-mark{color:#b9b6ff;border:1px solid #41466c;border-radius:4px;place-items:center;width:30px;height:30px;font-size:17px;display:grid}.grid-status strong,.grid-status span:not(.grid-status-mark):not(.status-bracket){display:block}.grid-status strong{color:#e0e5f5;font-size:11px;font-weight:500}#grid-status-copy{color:#9ba9c5;margin-top:4px;font-size:9px;line-height:1.5}.status-bracket{color:#8d94ba;margin-left:auto}[data-selected=mac] .voxel-mac .voxel-face,[data-selected=linux] .voxel-linux .voxel-face,[data-selected=vm] .voxel-vm .voxel-face{border-color:#b8b5ff;box-shadow:inset 0 0 25px #8e8aff35}[data-motion=paused] *,[data-visible=false] *{animation-play-state:paused!important}@keyframes voxel-float{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes orbit-spin{to{transform:translate(-50%,-50%)rotateX(70deg)rotate(335deg)}}@keyframes beam-flow{to{stroke-dashoffset:-210px}}@keyframes stardrift{0%{opacity:.2;transform:translateY(0)}to{opacity:.7;transform:translateY(-8px)}}@media (width<=1050px){.scene-viewport{height:410px}.voxel-core{--size:110px;--half:55px}.grid-hud{padding-inline:10px}.grid-hud>.mono{font-size:7px}}@media (width<=800px){.grid-illustration{margin-inline:-15px}.scene-viewport{height:370px}.voxel-core{--size:95px;--half:47.5px}.voxel:not(.voxel-core){--size:48px;--half:24px}.orbital{width:245px;height:245px}.orbital-two{width:190px;height:190px}.grid-status{gap:9px;margin-top:15px;padding:12px}.grid-status strong{font-size:10px}#grid-status-copy{font-size:8px}.grid-hud>.mono{letter-spacing:0;font-size:6px}.motion-toggle{padding:7px;font-size:8px}.node-mac{left:0}.grid-node{gap:5px;padding:7px;font-size:7px}.node-cross{margin-left:2px}}@media (width<=580px){.grid-illustration{margin:48px -10px 0}.scene-viewport{height:380px}.voxel-core{--size:108px;--half:54px}.grid-hud>.mono{font-size:7px}.grid-hud{padding-inline:10px}.grid-node{padding:9px;font-size:8px}.node-mac{left:3%}.node-linux{right:2%}.grid-status{margin:18px 10px 0}.grid-status strong{font-size:11px}#grid-status-copy{font-size:9px}.core-glyph{gap:8px;width:42px;height:42px}}@media (prefers-reduced-motion:reduce){.scene-world{will-change:auto}}}
