@import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&display=swap);#matrix,body{background:#000}.circle-core::after,.circle-core::before,.wing::before{content:"";position:absolute}.left-wing,.right-wing{clip-path:polygon(100% 50%,85% 35%,70% 20%,45% 10%,0% 0%,18% 30%,40% 48%,12% 64%,35% 82%,10% 100%,60% 88%,88% 72%)}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden}body{font-family:Orbitron,sans-serif;animation:.8s both pageIn}@keyframes pageIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.page{width:100%;height:100vh;padding:10px}.topbar{width:100%;height:96px;border:1.6px solid #1eff1e;border-radius:24px;background:rgba(4,10,4,.836);box-shadow:0 0 18px rgba(30,255,30,.38),inset 0 0 12px rgba(30,255,30,.12);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 14px;margin-top:10px;animation:.9s 50ms both popIn}.brand,.nav-panel{align-items:center}@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.brand{display:flex;gap:16px;min-width:0;animation:.9s .1s both leftIn}@keyframes leftIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}.logo-box{width:54px;height:54px;border-radius:50%;border:2px solid #1eff1e;display:grid;place-items:center;box-shadow:0 0 12px rgba(30,255,30,.75);flex-shrink:0}#matrix,.user-logo{width:100%;height:100%}.user-logo{object-fit:cover;border-radius:50%;display:block}.brand-text{line-height:1;min-width:0}.brand-title{color:#f0f5f0;font-size:26px;font-weight:800;letter-spacing:1px;white-space:nowrap}.brand-subtitle{margin-top:5px;color:#84d084;font-size:13px;font-weight:600;letter-spacing:4px;white-space:nowrap}.footer-text,.nav-btn{letter-spacing:3px;text-transform:uppercase}.nav-panel{display:flex;gap:12px;flex-shrink:0;animation:.9s .12s both rightIn}@keyframes rightIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}.icon-btn,.nav-btn{height:46px;border:1px solid rgba(30,255,30,.35);border-radius:13px;background:linear-gradient(180deg,rgba(10,18,10,.98),rgba(0,0,0,.98));color:#e8f2e8;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;box-shadow:0 0 0 1px rgba(30,255,30,.08),inset 0 0 10px rgba(30,255,30,.05);transition:.2s}.nav-btn{min-width:82px;font-size:13px;border-color:#1eff1e;animation:.7s both btnUp}.nav-btn:first-child{animation-delay:.18s}.nav-btn:nth-child(2){animation-delay:.24s}.nav-btn:nth-child(3){animation-delay:.3s}.nav-btn:nth-child(4){animation-delay:.36s}.nav-btn:nth-child(5){animation-delay:.42s}@keyframes btnUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.icon-btn:hover,.nav-btn:hover{border-color:rgba(30,255,30,.75);box-shadow:0 0 14px rgba(30,255,30,.18),inset 0 0 12px rgba(30,255,30,.08);transform:translateY(-1px)}.icon-btn{padding:0;animation:.7s .48s both btnUp}.icon-btn .icon-moon,.icon-btn .icon-sun{position:absolute;font-size:17px;line-height:1;transition:opacity .25s,transform .25s;text-shadow:0 0 8px rgba(255,255,255,.5)}.icon-btn .icon-sun{color:#fff;opacity:1;transform:scale(1)}.icon-btn .icon-moon{color:#fff;opacity:0;transform:scale(.6) rotate(-20deg)}body.day-mode{background:#081008}body.day-mode .icon-btn .icon-sun{opacity:0;transform:scale(.6) rotate(20deg)}body.day-mode .icon-btn .icon-moon{opacity:1;transform:scale(1) rotate(0)}@media (max-width:1100px){.topbar{overflow-x:auto}.nav-panel{margin-left:auto}}@media (max-width:800px){.brand,.nav-panel{width:100%}.topbar{height:auto;min-height:96px;padding:14px;gap:14px;align-items:flex-start;flex-direction:column}.nav-panel{justify-content:flex-start;flex-wrap:wrap}.brand-title{font-size:18px}.brand-subtitle{font-size:10px;letter-spacing:3px}.nav-btn{min-width:72px;font-size:11px;padding:0 14px}}#matrix{position:fixed;top:0;left:0;z-index:-1}.hero-box{position:relative;width:720px;height:560px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:20px;top:-60px;margin-left:auto;margin-right:auto;transform:translateX(50px) translateY(-80px);animation:1s forwards popIn,5s ease-in-out 1s infinite floatHero}.circle-core{z-index:5;width:330px;height:330px;border-radius:50%;border:2px solid #1eff1e;background:radial-gradient(circle at center,rgba(30,255,30,.22) 0,rgba(4,10,4,.96) 75%);box-shadow:0 0 35px rgba(30,255,30,.55),0 0 90px rgba(30,255,30,.38),inset 0 0 35px rgba(30,255,30,.25)}.circle-core::before{inset:22px;border-radius:50%;border:1px solid rgba(30,255,30,.55);box-shadow:0 0 22px rgba(30,255,30,.4),inset 0 0 18px rgba(30,255,30,.2)}.circle-core::after{inset:-45px;border-radius:50%;border-top:3px solid #1eff1e;border-bottom:3px solid #1eff1e;border-left:3px solid transparent;border-right:3px solid transparent;filter:drop-shadow(0 0 14px #1eff1e)}.wing{position:absolute;top:50%;width:320px;height:340px;background:linear-gradient(to bottom,rgba(30,255,30,.24),rgba(30,255,30,.03));border:2px solid rgba(30,255,30,.95);filter:drop-shadow(0 0 12px rgba(30, 255, 30, .8)) drop-shadow(0 0 35px rgba(30, 255, 30, .45));overflow:hidden}.wing::before{inset:0;background:repeating-linear-gradient(to bottom,rgba(30,255,30,.35) 0,rgba(30,255,30,.35) 2px,transparent 2px,transparent 20px);opacity:.4}.left-wing{left:0;transform:translateY(-50%) rotate(-10deg)}.right-wing{right:0;transform:translateY(-50%) rotate(10deg) scaleX(-1)}@keyframes popIn{from{opacity:0;transform:scale(.7) translateY(80px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes floatHero{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}.circle-core img{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:.88;filter:brightness(1.1) contrast(1.05) drop-shadow(0 0 18px #1eff1e)}body.day-mode .circle-core{border:2px solid #00b7ff;background:radial-gradient(circle at center,rgba(0,183,255,.18) 0,rgba(220,240,255,.95) 75%);box-shadow:0 0 35px rgba(0,183,255,.45),0 0 90px rgba(0,183,255,.25),inset 0 0 35px rgba(0,183,255,.18)}body.day-mode .circle-core::before{border:1px solid rgba(0,183,255,.45);box-shadow:0 0 18px rgba(0,183,255,.35),inset 0 0 14px rgba(0,183,255,.15)}body.day-mode .circle-core::after{border-top:3px solid #00b7ff;border-bottom:3px solid #00b7ff;filter:drop-shadow(0 0 12px #00b7ff)}body.day-mode .wing{border:2px solid rgba(0,183,255,.9);background:linear-gradient(to bottom,rgba(0,183,255,.18),rgba(0,183,255,.03));filter:drop-shadow(0 0 10px rgba(0,183,255,.6)) drop-shadow(0 0 30px rgba(0,183,255,.3))}body.day-mode .wing::before{background:repeating-linear-gradient(to bottom,rgba(0,183,255,.35) 0,rgba(0,183,255,.35) 2px,transparent 2px,transparent 20px)}body.day-mode .topbar{border:1.6px solid #00b7ff;background:rgba(8,18,28,.92);box-shadow:0 0 18px rgba(0,183,255,.38),inset 0 0 12px rgba(0,183,255,.12)}body.day-mode .logo-box{border:2px solid #00b7ff;box-shadow:0 0 14px rgba(0,183,255,.75)}body.day-mode .brand-title{color:#eaf8ff}body.day-mode .brand-subtitle{color:#7fdcff}body.day-mode .icon-btn,body.day-mode .nav-btn{border:1px solid rgba(0,183,255,.35);background:linear-gradient(180deg,rgba(12,22,35,.98),rgba(4,10,18,.98));color:#eef9ff;box-shadow:0 0 0 1px rgba(0,183,255,.08),inset 0 0 10px rgba(0,183,255,.05)}body.day-mode .icon-btn:hover,body.day-mode .nav-btn:hover{border-color:rgba(0,183,255,.85);box-shadow:0 0 14px rgba(0,183,255,.25),inset 0 0 12px rgba(0,183,255,.08)}body.day-mode #matrix{background:linear-gradient(180deg,#dff6ff 0,#c7ebff 100%);filter:brightness(1.05) saturate(1.1)}.circle-core,.logo-box{position:relative;overflow:hidden}.circle-img,.panel-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s,transform .4s}.green-circle-img,.green-panel-logo{opacity:1;z-index:2}.blue-circle-img,.blue-panel-logo{opacity:0;z-index:1}body.day-mode .green-circle-img,body.day-mode .green-panel-logo{opacity:0;transform:scale(1.08)}body.day-mode .blue-circle-img,body.day-mode .blue-panel-logo{opacity:1;transform:scale(1)}.cyber-footer{position:fixed;bottom:0;left:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:12px;z-index:999}.footer-line{width:96%;height:1px;background:linear-gradient(90deg,transparent,#1eff1e,transparent);box-shadow:0 0 12px rgba(30,255,30,.8);margin-bottom:10px;animation:1.2s forwards lineExpand}.footer-text{color:#8dff8d;font-size:11px;text-shadow:0 0 10px rgba(30,255,30,.5);opacity:0;transform:translateY(40px) scale(.95);animation:1.2s cubic-bezier(.22,1,.36,1) forwards footerIncoming;animation-delay:.3s}@keyframes footerIncoming{from{opacity:0;transform:translateY(40px) scale(.95);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes lineExpand{from{width:0;opacity:0}to{width:96%;opacity:1}}body.day-mode .footer-line{background:linear-gradient(90deg,transparent,#00b7ff,transparent);box-shadow:0 0 12px rgba(0,183,255,.8)}body.day-mode .footer-text{color:#7fdcff;text-shadow:0 0 10px rgba(0,183,255,.45)}.icon-btn{width:48px;height:48px;position:relative;overflow:hidden;border-radius:14px;cursor:pointer}.icon-moon,.icon-sun{position:absolute;font-size:20px;line-height:1;transition:opacity .35s,transform .35s,text-shadow .35s}.icon-sun{color:#1eff1e;opacity:1;transform:scale(1) rotate(0);text-shadow:0 0 10px rgba(30,255,30,.9),0 0 20px rgba(30,255,30,.5)}.icon-moon{color:#00b7ff;opacity:0;transform:scale(.4) rotate(-90deg)}body.day-mode .icon-sun{opacity:0;transform:scale(.4) rotate(90deg)}body.day-mode .icon-moon{opacity:1;transform:scale(1) rotate(0);text-shadow:0 0 10px rgba(0,183,255,.9),0 0 20px rgba(0,183,255,.5)}.icon-btn:hover .icon-moon,.icon-btn:hover .icon-sun{transform:scale(1.15) rotate(8deg)}@media (max-width:900px){body{overflow-x:hidden;overflow-y:auto}.page{height:auto;min-height:100vh}.topbar{height:auto;gap:16px;flex-direction:column;align-items:center}.brand,.nav-panel{justify-content:center}.nav-panel{flex-wrap:wrap;gap:10px}.nav-btn{min-width:130px;font-size:11px}.hero-wrapper{width:100%;display:flex;justify-content:center;align-items:center}.icon-btn,.logo-box{height:50px;min-width:50px;border-radius:50%;overflow:hidden}.topbar{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 12px;min-height:auto;gap:10px}.brand{width:auto;display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-left:-2px}.logo-box{width:50px}.brand-title{font-size:21px;white-space:nowrap}.brand-subtitle{font-size:9px;letter-spacing:2px}.nav-panel{width:auto;flex-wrap:nowrap;display:flex;align-items:center;justify-content:flex-end}.nav-panel .nav-btn{display:none}.icon-btn{width:50px;border:2px solid #1eff1e;background:radial-gradient(circle at center,rgba(20,35,20,.95),rgba(0,0,0,.98));box-shadow:0 0 12px rgba(30,255,30,.6),inset 0 0 10px rgba(30,255,30,.15);display:flex;align-items:center;justify-content:center;padding:0}.icon-moon,.icon-sun{font-size:18px}body.day-mode .icon-btn{border:2px solid #00b7ff;background:radial-gradient(circle at center,rgba(10,35,55,.95),rgba(0,0,0,.98));box-shadow:0 0 12px rgba(0,183,255,.6),inset 0 0 10px rgba(0,183,255,.15)}.hero-wrapper{flex-direction:column;align-items:center;justify-content:center;margin-top:20px}.hero-box{width:100%;max-width:420px;height:340px;margin:0 auto;top:0;transform:none}.circle-core{width:190px;height:190px}.wing{width:150px;height:170px}.mobile-social{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:-10px;padding-bottom:100px}.mobile-social .nav-btn{display:flex;min-width:120px;border-color:#1eff1e;height:42px;font-size:10px;letter-spacing:2px}.cyber-footer{padding-bottom:8px}.footer-text{letter-spacing:2px;font-size:8px;letter-spacing:1.5px;text-align:center;padding:0 8px}}.mode-toggle-btn{width:50px;height:50px;min-width:50px;border-radius:50%;border:2px solid #1eff1e;background:radial-gradient(circle at center,rgba(20,35,20,.95),rgba(0,0,0,.98));box-shadow:0 0 12px rgba(30,255,30,.6),inset 0 0 10px rgba(30,255,30,.15);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}.mode-blue-icon,.mode-green-icon{position:absolute;font-size:18px;transition:opacity .35s,transform .35s}.mode-green-icon{color:#1eff1e;opacity:1;text-shadow:0 0 12px rgba(30,255,30,.8)}.mode-blue-icon,body.day-mode .mode-green-icon{opacity:0;transform:scale(.5)}.mode-blue-icon{color:#00b7ff}body.day-mode .mode-toggle-btn{border:2px solid #00b7ff;background:radial-gradient(circle at center,rgba(10,35,55,.95),rgba(0,0,0,.98));box-shadow:0 0 12px rgba(0,183,255,.6),inset 0 0 10px rgba(0,183,255,.15)}body.day-mode .mode-blue-icon{opacity:1;transform:scale(1);text-shadow:0 0 12px rgba(0,183,255,.8)}