@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700;900&display=swap";:root{--bg-primary:#030812;--bg-secondary:#061124;--bg-tertiary:#0c1e3a;--color-cyan:#00e5ff;--color-cyan-glow:#00e5ff66;--color-pink:#ff007f;--color-pink-glow:#ff007f66;--color-emerald:#0f8;--color-emerald-glow:#0f86;--color-amber:#fa0;--color-amber-glow:#fa06;--text-primary:#fff;--text-secondary:#ffffffb3;--text-muted:#fff6;--text-cyan:#7ff5ff;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-tech:"Orbitron", monospace;--glass-bg:#061124a6;--glass-border:#ffffff14;--glass-shadow:0 8px 32px 0 #0000005e;--glass-blur:16px;--tilt-x:0deg;--tilt-y:0deg}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--color-cyan-glow)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:24px}.glass-panel-cyan{-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));background:#00e5ff08;border:1px solid #00e5ff26;border-radius:24px;box-shadow:0 8px 32px #00e5ff14}.glass-panel-pink{-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));background:#ff007f08;border:1px solid #ff007f26;border-radius:24px;box-shadow:0 8px 32px #ff007f14}.hud-scanline{z-index:10;pointer-events:none;opacity:.4;background:linear-gradient(#12101000 50%,#00000040 50%) 0 0/100% 4px;width:100%;height:100%;position:absolute;top:0;left:0}.hud-grid{pointer-events:none;z-index:1;background-image:linear-gradient(#00e5ff0d 1px,#0000 1px),linear-gradient(90deg,#00e5ff0d 1px,#0000 1px);background-position:50%;background-size:20px 20px;width:100%;height:100%;position:absolute;top:0;left:0}.tech-title{font-family:var(--font-tech);letter-spacing:.15em;text-transform:uppercase;font-weight:700}.glow-text-cyan{text-shadow:0 0 10px var(--color-cyan-glow), 0 0 20px #00e5ff33}.glow-text-pink{text-shadow:0 0 10px var(--color-pink-glow), 0 0 20px #ff007f33}.cyber-btn{font-family:var(--font-tech);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--color-cyan);color:var(--color-cyan);cursor:pointer;background:#00e5ff14;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-weight:600;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;box-shadow:0 0 12px #00e5ff26}.cyber-btn:hover{background:var(--color-cyan);color:var(--bg-primary);box-shadow:0 0 20px var(--color-cyan-glow);transform:translateY(-2px)}.cyber-btn:active{transform:translateY(0)}.cyber-btn-pink{border-color:var(--color-pink);color:var(--color-pink);background:#ff007f14;box-shadow:0 0 12px #ff007f26}.cyber-btn-pink:hover{background:var(--color-pink);color:#fff;box-shadow:0 0 20px var(--color-pink-glow)}@keyframes neon-pulse{0%,to{opacity:.8;box-shadow:0 0 12px var(--color-cyan-glow)}50%{opacity:1;box-shadow:0 0 24px #00e5ff99}}.animate-pulse-cyan{animation:2s ease-in-out infinite neon-pulse}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.glitch-hover:hover{animation:.3s linear infinite glitch}.sound-wave{align-items:flex-end;gap:3px;height:24px;display:flex}.sound-wave-bar{background:var(--color-cyan);border-radius:99px;width:3px;animation:.8s ease-in-out infinite alternate bounce}.sound-wave-bar:nth-child(2){animation-delay:.15s}.sound-wave-bar:nth-child(3){animation-delay:.3s}.sound-wave-bar:nth-child(4){animation-delay:.45s}.sound-wave-bar:nth-child(5){animation-delay:.6s}@keyframes bounce{0%{height:4px}to{height:22px}}@keyframes matched-glow{0%{opacity:0;filter:blur(10px);transform:scale(.9)}50%{opacity:.8;filter:blur(2px)}to{opacity:0;filter:blur(20px);transform:scale(1.1)}}.match-ring{border:2px solid var(--color-cyan);border-radius:50%;width:250px;height:250px;animation:1.5s ease-out infinite matched-glow;position:absolute}.match-ring:nth-child(2){border-color:var(--color-pink);animation-delay:.5s}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{background:#010611;overflow:hidden}.avatar-page{width:100vw;height:100dvh;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));color:#fff;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 46%,#ffffff14,#0000 18%),radial-gradient(circle at 18% 20%,#00dcff14,#0000 24%),radial-gradient(circle at 82% 74%,#ffffff0f,#0000 22%),linear-gradient(#020713 0%,#020914 48%,#00040b 100%);flex-direction:column;justify-content:center;align-items:center;font-family:Courier New,SF Mono,monospace;display:flex;position:relative;overflow:hidden}.avatar-page:before,.avatar-page:after{content:"";z-index:0;pointer-events:none;position:fixed;inset:0}.avatar-page:before{transform-origin:bottom;opacity:.72;background:linear-gradient(#0000 32%,#ffffff26),repeating-linear-gradient(0deg,#ffffff2e 0 1px,#0000 1px 42px),repeating-linear-gradient(90deg,#ffffff21 0 1px,#0000 1px 72px);width:min(150vw,1280px);height:88dvh;animation:10s linear infinite perspective-drift;top:auto;bottom:-38dvh;left:50%;transform:translate(-50%)perspective(760px)rotateX(64deg);-webkit-mask-image:linear-gradient(#0000 12%,#00000094 54%,#000000eb);mask-image:linear-gradient(#0000 12%,#00000094 54%,#000000eb)}.avatar-page:after{opacity:.68;background:linear-gradient(90deg,#0000 0 6%,#ffffff29 49.92% 50.08%,#0000 94% 100%),linear-gradient(0deg,#0000 0 51.8%,#ffffff21 52%,#0000 52.35% 100%),repeating-conic-gradient(from -42deg at 50% 52%,#0000 0deg 7.25deg,#ffffff1a 7.25deg 7.55deg,#0000 7.55deg 14.5deg),radial-gradient(circle at 50% 52%,#ffffff1c,#0000 16%);-webkit-mask-image:radial-gradient(at 50% 52%,#000000e0 0 38%,#0000 74%);mask-image:radial-gradient(at 50% 52%,#000000e0 0 38%,#0000 74%)}@keyframes perspective-drift{0%{background-position:0 0,0 0,0 0}to{background-position:0 0,0 42px,72px 0}}.avatar-bg-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.avatar-setup-button{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));z-index:20;color:#ffffff7a;letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);cursor:pointer;background:#050c186b;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:6px;height:30px;padding:0 10px;font-family:inherit;font-size:9px;display:inline-flex;position:fixed}.avatar-switcher{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));z-index:20;opacity:.64;-webkit-backdrop-filter:blur(10px);background:#050c183d;border:1px solid #00dcff14;border-radius:999px;align-items:center;gap:2px;padding:2px;transition:opacity .18s,border-color .18s;display:inline-flex;position:fixed}.avatar-switcher:hover,.avatar-switcher:focus-within{opacity:.92;border-color:#00dcff29}.avatar-switch-button{color:#ffffff57;letter-spacing:.08em;cursor:pointer;background:0 0;border:0;border-radius:999px;height:24px;padding:0 8px;font-family:inherit;font-size:8px;font-weight:800}.avatar-switch-button.is-selected{color:#ffffffb8;background:#00dcff14;box-shadow:inset 0 0 0 1px #00dcff1f}.avatar-stage{z-index:2;perspective:1800px;perspective-origin:50%;width:min(calc((100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) * .645), calc(100vw - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right))));max-width:680px;position:relative}.avatar-stage:before,.avatar-stage:after{content:"";z-index:-1;pointer-events:none;transform-style:preserve-3d;border-radius:50%;position:absolute;top:49%;left:50%}.avatar-stage:before{aspect-ratio:1;border:1px solid #ffffff24;border-color:#ffffff57 #ffffff24 #00dcff1f;width:128%;animation:14s linear infinite orbit-slow;transform:translate(-50%,-50%)rotateX(68deg)rotate(-10deg);box-shadow:0 0 34px #ffffff0d,inset 0 0 28px #00dcff0a}.avatar-stage:after{aspect-ratio:1;opacity:.72;border:1px dashed #ffffff29;width:92%;animation:18s linear infinite reverse orbit-slow;transform:translate(-50%,-50%)rotateX(74deg)rotate(18deg)}@keyframes orbit-slow{0%{rotate:0deg}to{rotate:360deg}}.holo-box{aspect-ratio:400/620;width:100%;height:auto;max-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));transform-style:preserve-3d;cursor:crosshair;background:radial-gradient(circle at 50% 42%,#ffffff09,#0000 34%),linear-gradient(170deg,#08142d38 0%,#03081429 60%,#050c1e3d 100%);border:1px solid #ffffff24;border-radius:28px;transition:transform 80ms linear;position:relative;overflow:hidden;box-shadow:0 38px 90px #00000057,0 0 0 1px #ffffff0b,0 0 60px #ffffff09,0 0 140px #00c8ff14,inset 0 0 42px #ffffff09,inset 0 1px #ffffff1f}.holo-box>*{transform-style:preserve-3d}.holo-box:before,.holo-box:after{content:"";filter:blur(1px);z-index:100;background:linear-gradient(90deg,#0000 0%,#ffffff47 20%,#ffffffd1 50%,#ffffff47 80%,#0000 100%);width:84%;height:2px;animation:3s ease-in-out infinite avatar-bar-pulse;position:absolute;left:8%}.holo-box:before{top:14px}.holo-box:after{animation-delay:1.5s;bottom:14px}@keyframes avatar-bar-pulse{0%,to{opacity:.6}50%{opacity:1}}.scan-overlay{z-index:18;pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 3px,#ffffff02 3px 4px),linear-gradient(120deg,#0000 0 44%,#ffffff05 49%,#0000 55% 100%);border-radius:28px;position:absolute;inset:0}.scan-beam{z-index:19;pointer-events:none;background:linear-gradient(#0000 0%,#ffffff03 42%,#ffffff07 50%,#00dcff04 58%,#0000 100%);width:100%;height:80px;animation:5s linear infinite scan-move;position:absolute;left:0}@keyframes scan-move{0%{top:-80px}to{top:100%}}.holo-grid{transform-origin:bottom;opacity:.98;pointer-events:none;background-image:linear-gradient(#ffffff26 1px,#0000 1px),linear-gradient(90deg,#ffffff21 1px,#0000 1px);background-size:22px 22px;width:176%;height:34%;position:absolute;bottom:-4%;left:-38%;transform:rotateX(74deg)translateZ(-58px)translateY(8px);box-shadow:0 -18px 38px #ffffff08}.holo-grid-glow{filter:blur(10px);pointer-events:none;background:radial-gradient(#fff3 0%,#00dcff14 42%,#0000 72%);width:260px;height:54px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.pulse-ring{pointer-events:none;border:1px solid #ffffff24;border-radius:50%;animation:3.5s ease-out infinite ring-expand;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pulse-ring:first-of-type{width:160px;height:160px;animation-delay:0s}.pulse-ring:nth-of-type(2){width:220px;height:220px;animation-delay:.8s}.pulse-ring:nth-of-type(3){width:280px;height:280px;animation-delay:1.6s}@keyframes ring-expand{0%{opacity:.7;transform:translate(-50%,-50%)scale(.7)}to{opacity:0;transform:translate(-50%,-50%)scale(1.3)}}.holo-layer{pointer-events:none;will-change:transform;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.layer-bg{opacity:.18;transform:translateZ(-80px)}.bg-mol{color:#ffffffc7;font-size:64px;line-height:1;position:absolute}.bg-mol-1{top:16%;left:8%;transform:translateZ(-120px)rotate(20deg)}.bg-mol-2{font-size:52px;bottom:24%;right:7%;transform:translateZ(-90px)rotate(-25deg)}.bg-mol-3{opacity:.6;font-size:36px;top:48%;left:6%;transform:translateZ(-140px)rotate(45deg)}.layer-corners{z-index:10;transform:translateZ(34px)}.corner{border-style:solid;border-color:#ffffff70;width:22px;height:22px;position:absolute}.corner-tl{border-width:2px 0 0 2px;top:24px;left:24px}.corner-tr{border-width:2px 2px 0 0;top:24px;right:24px}.corner-bl{border-width:0 0 2px 2px;bottom:24px;left:24px}.corner-br{border-width:0 2px 2px 0;bottom:24px;right:24px}.layer-character{z-index:32;transform-style:preserve-3d}.layer-character:after{content:"";filter:blur(14px);opacity:.78;background:radial-gradient(#ffffff4d 0%,#00dcff1a 44%,#0000 72%);border-radius:50%;width:52%;height:11%;animation:4.5s ease-in-out infinite avatar-shadow-float;position:absolute;bottom:18%;left:50%;transform:translate(-50%)rotateX(66deg)translateZ(-90px)}.char-img{z-index:2;filter:drop-shadow(0 34px 36px #0000007a)drop-shadow(0 0 10px #ffffff14)drop-shadow(0 0 24px #00dcff1f);width:min(75%,300px);height:auto;margin-top:-30px;animation:4.5s ease-in-out infinite avatar-float;position:relative}@keyframes avatar-float{0%,to{transform:translateY(0)translateZ(26px)rotateX(0)}50%{transform:translateY(-18px)translateZ(46px)rotateX(2deg)}}@keyframes avatar-shadow-float{0%,to{opacity:.68;transform:translate(-50%)rotateX(66deg)translateZ(-90px)scale(1)}50%{opacity:.42;transform:translate(-50%)rotateX(66deg)translateZ(-90px)scale(.82)}}.layer-fg-ui{z-index:40;transform:translateZ(64px)}.ui-title{white-space:nowrap;color:#ffffffe0;letter-spacing:4px;text-shadow:0 0 12px #ffffff8c,0 0 24px #00dcff38;font-size:11px;font-weight:700;position:absolute;top:44px;left:50%;transform:translate(-50%)}.ui-panel-left,.ui-panel-right{flex-direction:column;gap:12px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.ui-panel-left{left:26px}.ui-panel-right{align-items:flex-end;right:26px}.data-row,.data-row-right{flex-direction:column;gap:3px;display:flex}.data-row-right{align-items:flex-end}.data-label{color:#00dcff80;letter-spacing:1.5px;text-transform:uppercase;font-size:8px}.data-value{color:#00dcff;text-shadow:0 0 6px #00dcffb3;font-size:13px;font-weight:700}.data-bar,.data-bar-right{background:#00dcff26;border-radius:2px;width:60px;height:3px;overflow:hidden}.data-bar-fill{background:linear-gradient(90deg,#00dcff,#00fff2);border-radius:2px;height:100%;animation:2s ease-in-out infinite alternate avatar-bar-fill}@keyframes avatar-bar-fill{0%{opacity:.6}to{opacity:1}}.fg-mol{color:#fff;opacity:.75;filter:drop-shadow(0 0 6px #00dcffcc);font-size:28px;animation:3s ease-in-out infinite alternate fg-float;position:absolute}.fg-mol-1{animation-delay:0s;top:32%;right:10%}.fg-mol-2{font-size:22px;animation-delay:1s;bottom:27%;left:10%}@keyframes fg-float{0%{transform:translateY(0)rotate(0)}to{transform:translateY(-6px)rotate(8deg)}}.avatar-connect-button{z-index:70;color:#fff;letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;background:#00dcff1a;border:1px solid #00dcff8c;border-radius:999px;justify-content:center;align-items:center;gap:9px;min-width:148px;height:44px;font-family:inherit;font-size:12px;font-weight:800;display:inline-flex;position:absolute;bottom:82px;left:50%;transform:translate(-50%);box-shadow:0 0 22px #00dcff33,inset 0 1px #ffffff1f}.avatar-connect-button.is-active{background:#ff007f1f;border-color:#ff007f73;box-shadow:0 0 22px #ff007f2e,inset 0 1px #ffffff1f}.ui-status{white-space:nowrap;color:#fff;letter-spacing:2px;-webkit-backdrop-filter:blur(6px);text-shadow:0 0 8px #fff9;background:#00dcff12;border:1px solid #00dcff66;border-radius:30px;padding:7px 18px;font-size:11px;font-weight:800;animation:2.5s ease-in-out infinite status-blink;position:absolute;bottom:34px;left:50%;transform:translate(-50%);box-shadow:0 0 20px #00dcff26,inset 0 1px #ffffff1a}.status-dot{vertical-align:middle;background:#0f8;border-radius:50%;width:6px;height:6px;margin-right:8px;animation:1.2s ease-in-out infinite dot-blink;display:inline-block;box-shadow:0 0 6px #0f8}@keyframes status-blink{0%,to{box-shadow:0 0 20px #00dcff26,inset 0 1px #ffffff1a}50%{box-shadow:0 0 30px #00dcff4d,inset 0 1px #ffffff1a}}@keyframes dot-blink{0%,to{opacity:1}50%{opacity:.3}}.avatar-caption{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:12;color:#ffffffb8;text-align:center;-webkit-backdrop-filter:blur(10px);background:#0308148c;border:1px solid #00dcff1f;border-radius:18px;width:min(560px,100vw - 34px);max-height:86px;margin-top:0;padding:10px 14px;font-size:12px;line-height:1.55;position:fixed;overflow:hidden;transform:translate(-50%)}.brand-text{left:50%;bottom:max(8px, env(safe-area-inset-bottom));z-index:1;letter-spacing:5px;color:#00dcff59;text-transform:uppercase;margin-top:0;font-size:10px;animation:4s ease-in-out infinite alternate brand-fade;position:fixed;transform:translate(-50%)}@keyframes brand-fade{0%{opacity:.4}to{opacity:.8}}.settings-overlay{z-index:50;background:#00000070;justify-content:flex-end;display:flex;position:fixed;inset:0}.settings-panel{width:min(86vw,360px);height:100%;padding:max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));background:#080f1af5;border-left:1px solid #ffffff1a;overflow-y:auto;box-shadow:-20px 0 45px #00000073}.settings-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;padding-bottom:14px;display:flex}.settings-eyebrow{color:#ffffff6b;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px;font-size:9px}.settings-header h2{color:#fff;margin:0;font-size:22px;line-height:1.1}.settings-close{color:#ffffffb8;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}.settings-field,.settings-toggle{background:#ffffff0a;border:1px solid #ffffff14;border-radius:18px;margin-bottom:12px;padding:14px;display:block}.settings-field span,.settings-toggle span{color:#ffffffe6;margin-bottom:8px;font-size:12px;display:block}.settings-field select{color:#fff;background:#101922;border:1px solid #ffffff1a;border-radius:14px;outline:none;width:100%;height:40px;padding:0 12px}.settings-toggle{justify-content:space-between;align-items:center;gap:12px;display:flex}.settings-toggle p{color:#ffffff6b;margin:0;font-size:11px;line-height:1.4}.toggle-track{cursor:pointer;background:#ffffff26;border:none;border-radius:999px;width:52px;height:28px;padding:3px}.toggle-track span{background:#fff;border-radius:50%;width:22px;height:22px;margin:0;transition:transform .2s;display:block}.toggle-track.on{background:#00dcff}.toggle-track.on span{transform:translate(24px)}.settings-note{color:#ffffff75;background:#0000002e;border:1px dashed #ffffff1f;border-radius:18px;margin:14px 0 0;padding:14px;font-size:11px;line-height:1.5}@media (width<=480px){.avatar-page{justify-content:center}.avatar-stage{width:min(calc((100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) * .645), calc(100vw - 12px))}.char-img{width:74%}.ui-title{letter-spacing:3px;font-size:10px;top:38px}.ui-panel-left{left:22px}.ui-panel-right{right:22px}.data-value{font-size:12px}.avatar-connect-button{height:42px;bottom:74px}.avatar-switcher{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left))}.avatar-switch-button{letter-spacing:.06em;height:22px;padding:0 6px;font-size:7px}.ui-status{letter-spacing:1.5px;font-size:10px;bottom:30px}}@media (orientation:landscape){.avatar-stage{width:min(calc((100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) * .645), 48vw)}.avatar-caption{right:max(18px, env(safe-area-inset-right));left:auto;bottom:max(18px, env(safe-area-inset-bottom));text-align:left;width:min(34vw,360px);transform:none}}
