:root{--bg-dark: #0f0c29;--modal-bg: rgba(20, 20, 25, .85);--border-color: rgba(255, 255, 255, .1);--text-main: #ffffff;--text-sub: rgba(255, 255, 255, .7);--radius-main: 12px;--accent-glow: rgba(0, 210, 255, .6)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%}body{font-family:Outfit,Noto Sans SC,sans-serif;background-color:var(--bg-dark);color:var(--text-main);height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;cursor:default;transition:background-color 1.5s ease}.background-decor{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none;display:flex;justify-content:center;align-items:center;overflow:hidden}.bg-clock{font-size:15vw;font-weight:800;color:#ffffff05;font-family:Outfit,sans-serif;letter-spacing:-5px;-webkit-user-select:none;user-select:none;white-space:nowrap;filter:blur(1px);transform:translateY(-15vh)}.bg-symbols{position:absolute;top:0;left:0;width:100%;height:100%}.bg-symbol{position:absolute;color:#ffffff0d;font-family:Consolas,Monaco,monospace;font-weight:700;-webkit-user-select:none;user-select:none;animation:floatSymbol ease-in-out infinite;will-change:transform,opacity}@keyframes floatSymbol{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(10deg)}to{transform:translateY(0) rotate(0)}}.tech-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fffc;font-size:.9rem;font-weight:500;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 10px #0000001a;cursor:grab;transition:border-color .3s,background .3s,box-shadow .3s;-webkit-user-select:none;user-select:none}.tech-tag:active{cursor:grabbing}.tech-tag svg{width:18px;height:18px;fill:currentColor;transition:transform .3s}.tech-tag:hover{background:#ffffff1a;box-shadow:0 8px 20px #0003;transform:translateY(-2px)}.background-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-5;background:linear-gradient(to bottom,#020105,#0f0c29,#1a1530);transition:filter 1.5s ease}#starfield{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-4;pointer-events:none}.aurora-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-3;pointer-events:none;overflow:hidden;opacity:.7;transition:opacity 1.5s ease}.aurora{position:absolute;filter:blur(60px);opacity:.6;mix-blend-mode:color-dodge;animation:auroraWave 20s infinite alternate ease-in-out;will-change:transform,opacity}.aurora-1{top:-20%;left:-10%;width:120%;height:80%;background:linear-gradient(135deg,transparent 20%,rgba(0,255,135,.4) 50%,rgba(96,239,255,.2) 80%,transparent 100%);transform:rotate(-10deg) skew(-20deg);animation-duration:25s}.aurora-2{top:-10%;right:-20%;width:100%;height:70%;background:linear-gradient(225deg,transparent 30%,rgba(0,255,180,.3) 50%,rgba(0,150,255,.3) 70%,transparent 100%);transform:rotate(15deg) skew(20deg);animation-duration:35s;animation-delay:-5s}.aurora-3{bottom:0;left:20%;width:80%;height:60%;background:radial-gradient(ellipse at center,rgba(50,255,150,.15),transparent 70%);filter:blur(80px);animation:auroraPulse 15s infinite alternate ease-in-out}@keyframes auroraWave{0%{transform:translate(0) rotate(-10deg) skew(-10deg);opacity:.5}to{transform:translate(30px) rotate(-8deg) skew(-5deg);opacity:.7}}@keyframes auroraPulse{0%{opacity:.1;transform:scale(1)}to{opacity:.3;transform:scale(1.1)}}.moon{position:fixed;top:50px;right:50px;width:140px;height:140px;border-radius:50%;z-index:50;cursor:pointer;background-color:#f6f1d5;background-image:radial-gradient(circle at 60% 40%,rgba(200,200,200,.1) 0%,transparent 60%),radial-gradient(circle at 30% 65%,rgba(180,180,180,.15) 10%,transparent 50%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");background-blend-mode:normal,normal,overlay;box-shadow:inset -20px -20px 50px #00000026,inset 10px 10px 30px #ffffffe6,0 0 30px #ffffe666,0 0 70px #fff3,0 0 100px #64c8ff1a;filter:contrast(1.05) brightness(1);transition:all 1s cubic-bezier(.4,0,.2,1);will-change:transform,filter,box-shadow;animation:moonFloat 6s ease-in-out infinite alternate}.moon:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;border-radius:50%;background:radial-gradient(circle,#ffffff14,#fff0 60%);z-index:-1;pointer-events:none;animation:haloPulse 4s ease-in-out infinite alternate}@keyframes moonFloat{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes haloPulse{0%{transform:scale(.95);opacity:.5}to{transform:scale(1.05);opacity:.8}}.moon:hover{transform:scale(1.05) translateY(-5px);filter:contrast(1.1) brightness(1.2)}.moon.off{background-color:#2a2a2a;box-shadow:inset -10px -10px 30px #000c,0 0 20px #ffffff0d;filter:grayscale(1) brightness(.4);animation-play-state:paused}.moon.off:before{opacity:0}body.lights-off .background-layer{filter:brightness(.2)}body.lights-off .aurora-container{opacity:0}body.lights-off .clouds-container{opacity:.3;filter:brightness(.3)}@media(max-width:768px){.moon{width:80px;height:80px;top:30px;right:20px}}.clouds-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:51;pointer-events:none;overflow:hidden;transition:opacity 1.5s ease,filter 1.5s ease}.cloud{position:absolute;top:0;left:0;width:200%;height:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.8'/%3E%3C/svg%3E");background-size:cover;mask-image:linear-gradient(to bottom,#0000,#000 40% 60%,#0000);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%);will-change:transform}.cloud-1{opacity:.15;mix-blend-mode:screen;animation:cloudMove 120s linear infinite;filter:contrast(.8) brightness(.8)}.cloud-2{top:-20%;width:250%;opacity:.1;mix-blend-mode:overlay;animation:cloudMove 90s linear infinite reverse;filter:contrast(1.2) brightness(1.1)}.cloud-3{bottom:-30%;width:220%;height:60%;opacity:.15;mix-blend-mode:screen;animation:cloudMove 60s linear infinite;filter:blur(5px)}@keyframes cloudMove{0%{transform:translate(0)}to{transform:translate(-50%)}}.danmaku-container{position:fixed;top:0;left:0;width:100%;height:20%;z-index:60;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}.danmaku-item{position:absolute;left:0;white-space:nowrap;font-family:Outfit,Noto Sans SC,sans-serif;font-weight:700;letter-spacing:2px;color:#ffffffbf;text-shadow:0 0 10px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.2);will-change:transform;pointer-events:auto;cursor:default;transition:color .3s,opacity .3s,text-shadow .3s;animation:floatLeft linear forwards}.danmaku-item:hover{color:#fff;opacity:1!important;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(0,210,255,.6);z-index:100;animation-play-state:paused}@keyframes floatLeft{0%{transform:translate(100vw)}to{transform:translate(-100%)}}.container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20;pointer-events:none}.container>div{position:relative;width:100%;height:100%}.container>div>*{pointer-events:auto;position:absolute}.anim-item{opacity:0;transition:all .8s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}.container.loaded .anim-item{opacity:1}.avatar-wrapper{width:120px;height:120px;border-radius:50%;padding:3px;background:linear-gradient(45deg,#00d2ff,#3a7bd5,#8e2de2);background-size:200% 200%;animation:gradientBorder 3s ease infinite,breathe 4s infinite ease-in-out;box-shadow:0 0 30px #00d2ff66}@keyframes gradientBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes breathe{0%,to{box-shadow:0 0 25px #00d2ff4d}50%{box-shadow:0 0 50px #8e2de299}}.avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #1a1512;display:block}.name{font-size:3.5rem;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(to right,#fff,#89f7fe,#66a6ff,#fff);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(0,210,255,.3);animation:textFlow 5s linear infinite;margin:0;white-space:nowrap}@keyframes textFlow{to{background-position:300% center}}.tagline-container{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:0}.role-tag{display:inline-block;font-size:1rem;color:#ffffffe6;font-weight:400;padding:8px 16px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;transition:all .3s cubic-bezier(.25,.8,.25,1);cursor:default;letter-spacing:1px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 10px #0000001a}.role-tag:hover{background:#ffffff26;border-color:#ffffff4d;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #00d2ff33;text-shadow:0 0 8px rgba(255,255,255,.6)}.description{font-size:1rem;color:var(--text-sub);max-width:400px;line-height:1.8;font-weight:400;margin:0;text-align:left}@media(max-width:768px){.danmaku-item{font-size:.9rem!important}.tagline-container{gap:4px}.role-tag{padding:4px 8px;font-size:.9rem}.tech-tag,.btn,.role-tag,.context-menu{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#141419d9}.aurora-container{display:none!important}html,body{overscroll-behavior:none}}.btn{position:relative;display:flex;align-items:center;gap:10px;padding:12px 28px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-main);color:#e0e0e0;text-decoration:none;font-size:.95rem;font-weight:600;letter-spacing:.5px;overflow:hidden;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s}.btn:before{content:"";position:absolute;top:var(--y, -50%);left:var(--x, -50%);width:150px;height:150px;background:radial-gradient(circle,var(--accent-glow),transparent 60%);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0;mix-blend-mode:screen}.btn:after{content:"";position:absolute;inset:1px;border-radius:var(--radius-main);background:#141419cc;z-index:0}.btn span,.btn svg{position:relative;z-index:1}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0006;border-color:#fff3}.btn:hover:before{opacity:.8}.btn:active{transform:scale(.96)}.btn-social{border-color:#40c4ff4d;background:#40c4ff14}.btn-social:hover{border-color:#40c4ffcc;box-shadow:0 10px 30px #40c4ff4d;background:#40c4ff26}.btn-social .icon-svg{color:#40c4ff}.btn-projects{border-color:#ff9a004d;background:#ff9a0014}.btn-projects:hover{border-color:#ff9a00cc;box-shadow:0 10px 30px #ff9a004d;background:#ff9a0026}.btn-projects .icon-svg{color:#ff9a00}.icon-svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn .icon-svg{width:18px;height:18px}.footer{position:fixed;bottom:1.5rem;left:0;width:100%;text-align:center;font-size:.75rem;font-family:Outfit,sans-serif;letter-spacing:.5px;opacity:0;transition:opacity 1s 1s;color:#fff6;z-index:30}.container.loaded~.footer{opacity:1}.footer p{margin:4px 0}.icp-link{color:#fff6;text-decoration:none;transition:all .3s ease;position:relative}.icp-link:hover{color:#ffffffe6;text-shadow:0 0 8px rgba(255,255,255,.3)}.context-menu{position:fixed;z-index:999;background:#1e1e23e6;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:12px;padding:8px;width:180px;box-shadow:0 10px 30px #00000080;display:none;opacity:0;transform:scale(.95);transition:opacity .2s,transform .2s;pointer-events:auto}.context-menu.visible{display:block;opacity:1;transform:scale(1)}.menu-item{padding:10px 12px;color:#e0e0e0;font-size:.9rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .2s,color .2s}.menu-item:hover{background:#ffffff1a;color:#fff}.menu-item svg{width:16px;height:16px;opacity:.8}.menu-divider{height:1px;background:#ffffff1a;margin:6px 0}
