:root{--bg:#0a0812;--bg-2:#140b1c;--text:#f5efe9;--muted:#9a8fa6;--client:#ff7a6b;--client-2:#ff5d73;--client-glow:#ff6e668c;--server:#34e0cf;--server-2:#1fbfc0;--server-glow:#32d7c880;--wire:#ffe6bf;--heart:#ff5d73;--font-display:"Space Grotesk", system-ui, sans-serif;--font-mono:"Space Mono", ui-monospace, monospace;--font-body:"Inter", system-ui, sans-serif;--ease:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overflow:hidden}.js.stage{cursor:none}@media (hover:none){.js.stage{cursor:auto}}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage{background:radial-gradient(130% 90% at 24% 66%, #ff5a501a, transparent 46%), radial-gradient(130% 90% at 76% 34%, #2ed2c41c, transparent 46%), radial-gradient(120% 120% at 50% 50%, var(--bg-2), var(--bg) 68%);width:100%;min-height:100svh;position:relative;overflow:hidden}.aura{filter:blur(30px);opacity:.9;pointer-events:none;background:radial-gradient(40% 40% at 28% 60%,#ff5d732e,#0000 70%),radial-gradient(42% 42% at 72% 40%,#34e0cf29,#0000 70%);animation:18s ease-in-out infinite alternate auraDrift;position:absolute;inset:-20%}@keyframes auraDrift{0%{transform:translate(-1.5%,1%)scale(1)}to{transform:translate(2%,-1.5%)scale(1.06)}}.grain{pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px;animation:6s steps(5,end) infinite grain;position:absolute;inset:0}@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,3%)}to{transform:translate(0)}}.cursor{z-index:70;pointer-events:none;mix-blend-mode:screen;width:26px;height:26px;transition:transform .18s var(--ease), opacity .3s, border-color .3s, background .3s;opacity:0;background:radial-gradient(circle,#ffe6bf59,#0000 62%);border:1.5px solid #ffe6bfb3;border-radius:50%;margin:-13px 0 0 -13px;position:fixed;top:0;left:0}.cursor.is-on{opacity:1}.cursor.is-press{border-color:#fff;transform:scale(.62)}.cursor.is-hot{border-color:var(--client-2);background:radial-gradient(circle,#ff5d7366,#0000 62%);transform:scale(1.5)}@media (hover:none){.cursor{display:none}}.intro{z-index:52;text-align:center;background:radial-gradient(130% 90% at 24% 66%, #ff5a501a, transparent 46%), radial-gradient(130% 90% at 76% 34%, #2ed2c41c, transparent 46%), radial-gradient(120% 120% at 50% 50%, var(--bg-2), var(--bg) 68%);transition:opacity .8s var(--ease);place-items:center;padding:0 1.4rem;display:grid;position:absolute;inset:0}.intro.is-gone{opacity:0;pointer-events:none}.intro__line{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,1rem5vw,3.4rem);letter-spacing:-.01em;line-height:1.1}.intro__romantic{background:linear-gradient(92deg, var(--client-2), #ffd9a0 48%, var(--server));color:#0000;-webkit-background-clip:text;background-clip:text}.intro__q{color:var(--muted)}.intro__caret{vertical-align:-.12em;background:var(--wire);width:.09em;height:1em;margin-left:.1em;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.anchor,.wires,.controls,.hud{transition:opacity .8s var(--ease)}.stage.is-booting .anchor,.stage.is-booting .wires,.stage.is-booting .controls,.stage.is-booting .hud{opacity:0}.hud{z-index:40;justify-content:space-between;align-items:center;padding:clamp(16px,3.4vh,30px) clamp(18px,5vw,42px);display:flex;position:absolute;inset:0 0 auto}.brand{font-family:var(--font-display);letter-spacing:.24em;font-weight:700;font-size:clamp(.82rem,.72rem.5vw,1.05rem)}.brand__mark{color:var(--server);margin-right:.15em}.mute{width:38px;height:38px;color:var(--muted);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff24;border-radius:50%;place-items:center;transition:color .25s,border-color .25s,background .25s;display:grid}.js .mute{cursor:none}.mute:hover{color:var(--text);border-color:#ffffff4d}.mute__off,.mute[aria-pressed=true] .mute__on{display:none}.mute[aria-pressed=true] .mute__off{display:block}.wires{z-index:10;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#heartGroup{transform-box:fill-box;transform-origin:50%}#heartGroup.is-beat{animation:beat 1.5s var(--ease-soft) 1}@keyframes beat{0%,to{transform:scale(1)}16%{transform:scale(1.05)}32%{transform:scale(1)}50%{transform:scale(1.038)}64%{transform:scale(1)}}.half{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}.half--core{stroke:url(#heartGrad);stroke-width:4px}.half--glow{stroke:var(--heart);stroke-width:13px;filter:url(#soft)}.bloom{z-index:8;opacity:0;pointer-events:none;background:radial-gradient(circle,#ff5d7380,#ff785a2e 42%,#0000 66%);border-radius:50%;width:1px;height:1px;position:absolute;transform:translate(-50%,-50%)scale(0)}.hearts{z-index:9;pointer-events:none;position:absolute;inset:0}.floatheart{will-change:transform,opacity;width:16px;height:16px;color:var(--heart);opacity:0;position:absolute}.floatheart svg{filter:drop-shadow(0 0 6px #ff5d7399);width:100%;height:100%;display:block}.packet{z-index:20;background:radial-gradient(circle at 34% 30%, #fff, var(--wire) 42%, #ff9a52 100%);opacity:0;will-change:transform,opacity;border-radius:50%;width:20px;height:20px;position:absolute;top:0;left:0;transform:translate(-100px,-100px)scale(0);box-shadow:0 0 12px 3px #ffbe78d9,0 0 30px 8px #ff965a73}.packet.is-client{background:radial-gradient(circle at 34% 30%, #fff, #ff9a86 45%, var(--client-2) 100%);box-shadow:0 0 12px 3px var(--client-glow), 0 0 30px 8px #ff5a5066}.packet.is-server{background:radial-gradient(circle at 34% 30%, #fff, #8ff4e6 45%, var(--server-2) 100%);box-shadow:0 0 12px 3px var(--server-glow), 0 0 30px 8px #28c8be66}.packet.is-grab{touch-action:none}.packet.is-grab:before{content:"";border-radius:50%;position:absolute;inset:-18px}.packet.is-grab:after{content:"";animation:grabRing 1.3s var(--ease-soft) infinite;border:2px solid #ffe6bf99;border-radius:50%;position:absolute;inset:-7px}@keyframes grabRing{0%{opacity:.85;transform:scale(.7)}to{opacity:0;transform:scale(1.6)}}.draghint{z-index:22;pointer-events:none;font-family:var(--font-mono);letter-spacing:.08em;color:var(--muted);white-space:nowrap;opacity:0;font-size:.72rem;transition:opacity .4s;position:absolute;transform:translate(-50%,-50%)}.draghint.is-on{opacity:.85;animation:hintBob 1.5s var(--ease-soft) infinite}@keyframes hintBob{0%,to{transform:translate(-50%,-50%)translateY(0)}50%{transform:translate(-50%,-50%)translateY(-5px)}}.anchor{z-index:15;flex-direction:column;align-items:center;gap:.7rem;display:flex;position:absolute;transform:translate(-50%,-50%)}.anchor--client{top:61%;left:21%}.anchor--server{top:37%;left:79%}.node{aspect-ratio:1;will-change:transform;width:clamp(86px,19vw,126px);animation:float 6s var(--ease-soft) infinite alternate;border-radius:29%;place-items:center;display:grid;position:relative}.node--client{background:linear-gradient(150deg, #ff9a86, var(--client) 52%, var(--client-2));box-shadow:0 18px 46px -14px var(--client-glow), inset 0 2px 10px #ffffff59, inset 0 -8px 18px #b4283259}.node--server{background:linear-gradient(150deg, #7cf0e2, var(--server) 52%, var(--server-2));box-shadow:0 18px 46px -14px var(--server-glow), inset 0 2px 10px #fff6, inset 0 -8px 18px #0a787866;animation-delay:-3s}@keyframes float{0%{transform:translateY(-4px)}to{transform:translateY(5px)}}.node__label{font-family:var(--font-mono);letter-spacing:.28em;color:var(--muted);text-transform:uppercase;font-size:.72rem}.pin{background:radial-gradient(circle at 30% 35%, #fff6, transparent 60%), var(--client-2);width:20px;height:18px;clip-path:path("M10 17 C 2 10 0 5 3 2 C 6 0 9 2 10 5 C 11 2 14 0 17 2 C 20 5 18 10 10 17 Z");filter:drop-shadow(0 2px 4px #0006);transform-origin:bottom;animation:pinBob 3.4s var(--ease-soft) infinite alternate;position:absolute;top:-13px;left:12%}@keyframes pinBob{0%{transform:rotate(-7deg)}to{transform:rotate(8deg)}}.rack{background:#ffffffbf;border-radius:3px;width:20px;height:5px;position:absolute;top:11px;right:12px;box-shadow:0 8px #ffffff8c,0 16px #fff6}.face{width:72%;height:62%;position:relative}.eyes{justify-content:center;gap:22%;display:flex;position:absolute;top:22%;left:0;right:0}.eye{aspect-ratio:.86;width:30%;transition:transform .18s var(--ease), height .18s var(--ease), border-radius .3s;background:#1a1420;border-radius:50%;position:relative;box-shadow:inset 0 0 0 2px #ffffff1f}.eye:after{content:"";aspect-ratio:1;opacity:.96;background:#fff;border-radius:50%;width:40%;position:absolute;top:12%;left:20%}.pupil{aspect-ratio:1;width:48%;transition:transform .16s var(--ease-soft);background:#0b0810;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pupil:after{content:"";aspect-ratio:1;opacity:.85;background:#fff;border-radius:50%;width:30%;position:absolute;bottom:14%;right:16%}.node.is-blink .eye{transform:scaleY(.12)}.node.is-wide .eye{transform:scaleY(1.18)scaleX(1.06)}.node.is-happy .eye,.node.is-poke .eye{aspect-ratio:auto;width:28%;height:auto;box-shadow:none;background:0 0;border-bottom:3px solid #2a1e10;border-radius:0;transform:translateY(-10%)}.node.is-happy .eye:after,.node.is-happy .pupil,.node.is-poke .eye:after,.node.is-poke .pupil{opacity:0}.mouth{opacity:.75;width:22%;height:11%;transition:all .3s var(--ease);background:#140e1480;border-radius:0 0 40px 40px;position:absolute;bottom:2%;left:50%;transform:translate(-50%)}.node.is-happy .mouth,.node.is-poke .mouth{opacity:1;background:#2a1e10;width:36%;height:17%;box-shadow:inset 0 -2px #ffffff26}.blush{aspect-ratio:1;opacity:.32;width:22%;transition:opacity .4s var(--ease);filter:blur(1px);background:radial-gradient(circle,#ff788ce6,#0000 70%);border-radius:50%;position:absolute;top:50%}.blush--l{left:0%}.blush--r{right:0%}.node.is-happy .blush,.node.is-poke .blush{opacity:.95}.port{background:var(--wire);border-radius:50%;width:8px;height:8px;position:absolute;box-shadow:0 0 8px 2px #ffb578e6}.node--client .port{top:24%;right:-3px;transform:translateY(-50%)}.node--server .port{top:76%;left:-3px;transform:translateY(-50%)}.stamp{z-index:38;opacity:0;font-family:var(--font-mono);letter-spacing:.34em;color:#8dffdf;font-weight:700;font-size:clamp(.78rem,.68rem.5vw,1rem);text-shadow:0 0 18px #8dffdf66;pointer-events:none;position:absolute;top:0;left:0;transform:translate(-50%)}.controls{z-index:42;justify-content:center;display:flex;position:absolute;bottom:clamp(30px,7vh,64px);left:0;right:0}.cta{font-family:var(--font-display);font-weight:700;font-size:clamp(.92rem,.82rem.4vw,1.08rem);letter-spacing:.04em;color:var(--bg);cursor:pointer;transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;background:linear-gradient(120deg,#ffe6bf,#ffb98a);border:none;border-radius:100px;padding:.92em 2.4em;position:relative;overflow:hidden;box-shadow:0 12px 34px -12px #ffb478bf}.js .cta{cursor:none}.cta__ring{border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:0 0 #ffbe7899}.cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px #ffb478e6}.cta.is-charging{filter:saturate(1.2)brightness(1.05);transform:scale(.96)}.cta.is-charging .cta__ring{animation:ctaPulse .7s var(--ease-soft) infinite}.cta:disabled{opacity:.55}.cta:focus-visible{outline:2px solid var(--wire);outline-offset:4px}@keyframes ctaPulse{0%{box-shadow:0 0 #ffbe788c}to{box-shadow:0 0 0 22px #ffbe7800}}@media (prefers-reduced-motion:reduce){.aura,.grain,.node,.pin,.floatheart,#heartGroup.is-beat,.packet.is-grab:after,.draghint.is-on{animation:none!important}.grain{opacity:.04}.cursor{display:none}.js.stage,.js .cta,.js .mute{cursor:auto}.half,.ghost,.intro__caret{transition:none}}@media (width<=520px){.anchor--client{left:25%}.anchor--server{left:75%}}