@font-face{font-family:ZQKNNY;src:url(/ZQKNNY-Medium-2.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}.bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#181c21;width:100%;height:100%;margin:0;display:flex;align-items:stretch;justify-content:stretch;z-index:0}.pattern-bg{width:100%;height:100%;overflow:hidden;position:relative;background:repeating-linear-gradient(135deg,#232526,#232526 60px,#23252699 70px,#414345 130px)}.cube-svg{position:absolute;width:200%;height:200%;left:-30%;top:-20%;background:transparent;opacity:.7;z-index:1;animation:cubeMove 18s linear infinite alternate}@keyframes cubeMove{0%{transform:translateY(0) scale(1)}to{transform:translateY(-20%) scale(1.02) rotate(1deg)}}@media (prefers-reduced-motion: reduce){.cube-svg{animation:none}}*{margin:0;padding:0;box-sizing:border-box}:root{--text: rgba(255, 255, 255, .92);--text-muted: rgba(255, 255, 255, .7);--accent: #fff;--accent-rgb: 255, 255, 255;--accent-glow: rgba(255, 255, 255, .1);--accent-glow-strong: rgba(255, 255, 255, .2);--card-bg: rgba(255, 255, 255, .05);--card-bg-hover: rgba(255, 255, 255, .09);--card-border: rgba(255, 255, 255, .08);--card-border-hover: rgba(255, 255, 255, .18);--glass-blur: 12px}body{margin:0;padding:48px 20px;min-height:100vh;background:#181c21;color:var(--text);overflow-x:hidden;overflow-y:auto;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.bg-blur{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}.container{position:relative;z-index:2;width:min(1200px,100%);margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}.card{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);border-radius:16px;border:1px solid var(--card-border);padding:24px;box-shadow:0 4px 24px #0003,inset 0 1px #ffffff0d;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;position:relative;overflow:hidden;color:var(--text)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.4),transparent);opacity:0;transition:opacity .3s ease}.card:hover{background:var(--card-bg-hover);border-color:var(--card-border-hover);box-shadow:0 8px 32px #0000004d,0 0 0 1px rgba(var(--accent-rgb),.05),inset 0 1px #ffffff14}.card:hover:before{opacity:1}.sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;height:fit-content}.avatar-card,.avatar-card:hover{padding:30px;display:flex;justify-content:center;align-items:center;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.avatar{width:180px;height:180px;border-radius:50%;background:rgba(var(--accent-rgb),.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(var(--accent-rgb),.25);transition:border-color .3s ease,box-shadow .3s ease;cursor:pointer;position:relative;overflow:hidden}.avatar:hover{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 0 20px rgba(var(--accent-rgb),.15)}.avatar-placeholder{font-size:16px;color:var(--text-muted);font-weight:500;z-index:1;letter-spacing:.5px}.avatar-img{display:block;min-width:100%;min-height:100%;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.sidebar .content{width:100%;height:80px;border-radius:12px}.sidebar .content .benefits{min-width:700px}.sidebar .content .basic-marquee svg{width:30px}.radio-container{font-size:14px;letter-spacing:.3px}.main-content{display:flex;flex-direction:column;gap:20px}.title-card,.title-card:hover{padding:40px 4px 16px;text-align:left;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.title-wrap{display:flex;align-items:baseline;gap:12px;font-size:48px;font-weight:700;font-family:ZQKNNY,sans-serif}.title-prefix{color:#fff;-webkit-text-fill-color:#fff;font-size:inherit;font-weight:inherit;letter-spacing:1px;flex-shrink:0}.title{font-size:inherit;font-weight:inherit;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientText 4s ease infinite}@keyframes gradientText{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.subtitle-card,.subtitle-card:hover{padding:0 4px 24px;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.subtitle-wrap{display:flex;align-items:baseline;gap:10px;font-size:32px;font-weight:600;letter-spacing:1px;font-family:ZQKNNY,sans-serif}.subtitle-prefix{color:var(--text-muted);font-size:inherit;font-weight:inherit;flex-shrink:0}.subtitle-name{font-size:inherit;font-weight:inherit;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradientText 4s ease infinite}.subtitle{font-size:20px;color:#fff;font-weight:400;text-align:left;letter-spacing:2px}.pixel-banner{display:flex;justify-content:flex-start;padding:8px 0}.pixel-grid{display:grid;gap:1px}.px-sq{width:6px;height:6px;border-radius:1px;background:#ffffff1a;flex-shrink:0}.px-active{background:#ffffffe6}.intro-card{padding:16px 4px 8px;line-height:1.8;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.intro-text{font-size:15px;color:var(--text-muted);line-height:1.9}.skills-card{padding:16px 4px 8px;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.skills-grid{display:flex;flex-wrap:wrap;gap:10px}.skill-tag{display:inline-flex;align-items:center;padding:8px 18px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--text);font-size:13px;letter-spacing:.3px;transition:background .25s ease,border-color .25s ease}.skill-tag:hover{background:#ffffff1f;border-color:#ffffff38}.projects-card,.projects-card:hover{padding:28px 0 0;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.email-card{max-width:640px;padding:0}.comms-card{max-width:900px;padding:18px 0 0;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.comms-header{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}.comms-card .section-title.comms-title{margin-bottom:0}.comms-subtitle{font-size:12px;color:var(--text-muted)}.comms-grid{display:grid;grid-template-columns:1fr 1px 1.3fr;gap:16px;align-items:start}.comms-divider{width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);opacity:.9}.comms-col-title{margin:0 0 10px;font-size:13px;letter-spacing:.4px;color:#ffffffe6;font-weight:600}.comms-card .contact-info{gap:10px}.comms-card .contact-item{background:#00000040;border:1px solid rgba(255,255,255,.1)}.comms-card .contact-item:hover{background:#00000059;border-color:#ffffff2e}.comms-card .email-header{margin-bottom:10px}.email-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.email-actions .email-hint{margin-top:0}@media (max-width: 900px){.comms-grid{grid-template-columns:1fr}.comms-divider{display:none}}.email-form{display:flex;flex-direction:column;gap:14px}.email-row,.email-field{display:flex;flex-direction:column;gap:6px}.email-label{font-size:13px;color:var(--text-muted);letter-spacing:.3px}.email-input,.email-textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#00000059;color:var(--text);font:inherit;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .1s ease}.email-input::placeholder,.email-textarea::placeholder{color:var(--text-muted)}.email-input:focus,.email-textarea:focus{border-color:#ffffffa6;box-shadow:0 0 0 1px #ffffff40;background:#00000080;transform:translateY(-1px)}.email-textarea{resize:vertical;min-height:96px}.email-submit{align-self:flex-start;margin-top:4px;padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:#ffffff1a;color:#fff;font-size:14px;cursor:pointer;transition:background .25s ease,transform .15s ease,box-shadow .25s ease}.email-submit:hover{background:#ffffff2e;box-shadow:0 8px 24px #00000059;transform:translateY(-1px)}.email-submit:active{transform:translateY(0);box-shadow:0 4px 16px #0000004d}.email-hint{margin-top:2px;font-size:12px;color:var(--text-muted)}.email-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}.email-icon{width:32px;height:32px;border-radius:999px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 55%),radial-gradient(circle at 70% 80%,rgba(255,255,255,.15),transparent 55%);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 24px #00000059}.email-icon svg{width:18px;height:18px;stroke:#ffffffe6;stroke-width:1.6;fill:none}.email-title{margin-bottom:2px}.email-subtitle{font-size:12px;color:var(--text-muted)}.email-header-text{display:flex;flex-direction:column}@media (min-width: 768px){.email-form{gap:16px}.email-row-inline{flex-direction:row;gap:12px}.email-row-inline .email-field,.email-row-inline .email-input{flex:1}}.section-title{font-size:20px;color:var(--text);margin-bottom:20px;font-weight:600;padding-left:4px;letter-spacing:.5px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.project-item{background:#ffffff0d;backdrop-filter:blur(var(--glass-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);border-radius:14px;padding:28px 20px;text-align:center;cursor:pointer;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}.project-item:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.3),transparent);opacity:0;transition:opacity .3s ease}.project-item:hover{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.2);box-shadow:0 8px 32px #0003,0 0 0 1px rgba(var(--accent-rgb),.05)}.project-item:hover:before{opacity:1}.project-icon{margin-bottom:14px;position:relative;z-index:1;color:#fffc;display:flex;align-items:center;justify-content:center}.project-icon svg{width:36px;height:36px;stroke:currentColor;stroke-width:1.5;fill:none}.project-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;position:relative;z-index:1}.project-desc{font-size:13px;color:var(--text-muted);position:relative;z-index:1}.contact-card,.contact-card:hover{padding:28px 0 0;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.contact-info{display:flex;flex-direction:column;gap:10px}.contact-item{padding:14px 20px;background:#ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;color:var(--text-muted);transition:background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer;border:1px solid rgba(255,255,255,.06);font-size:14px;display:flex;align-items:center;gap:12px}.contact-item svg{width:18px;height:18px;stroke:#ffffffb3;stroke-width:1.5;fill:none;flex-shrink:0}.contact-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--text);border-color:rgba(var(--accent-rgb),.15)}.mobile-avatar-card{display:none}.mobile-avatar{width:150px;height:150px;min-width:150px;min-height:150px;border-radius:50%;background:rgba(var(--accent-rgb),.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(var(--accent-rgb),.25);position:relative;overflow:hidden;margin:0 auto}.mobile-avatar .avatar-placeholder{font-size:13px;color:var(--text-muted);font-weight:500;z-index:1}.mobile-avatar .avatar-img,.mobile-avatar img{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;object-fit:cover!important;object-position:center!important;border-radius:50%!important;transform:none!important;z-index:2;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}@media (max-width: 1024px){body{padding:clamp(12px,3vw,48px) clamp(10px,3vw,20px)}.container{grid-template-columns:1fr;gap:0;max-width:100%;overflow:hidden}.sidebar{display:none!important}.mobile-avatar-card{display:flex;justify-content:center;padding:10px 0 6px}.title-card,.title-card:hover{padding:clamp(8px,2vw,40px) 0 clamp(4px,1vw,16px)}.title-wrap{font-size:clamp(22px,6vw,48px);flex-wrap:wrap;gap:6px}.title-prefix{flex-shrink:1}.subtitle-card,.subtitle-card:hover{padding:0 0 clamp(8px,1.5vw,24px)}.subtitle-wrap{font-size:clamp(13px,3.5vw,32px);flex-wrap:wrap;gap:4px}.subtitle-prefix{flex-shrink:1}.pixel-banner{overflow-x:auto;-webkit-overflow-scrolling:touch}.main-content{gap:clamp(10px,2vw,20px);max-width:100%;overflow:hidden}.section-title{font-size:clamp(16px,4vw,20px)}.intro-text{word-break:break-word;overflow-wrap:break-word}.skills-grid{gap:8px}.skill-tag{font-size:12px;padding:6px 14px}.projects-grid{grid-template-columns:repeat(2,1fr);gap:10px}.project-item{padding:20px 14px}.project-icon svg{width:28px;height:28px}.project-title{font-size:14px}.project-desc{font-size:12px}.comms-grid{grid-template-columns:1fr}.comms-divider{display:none}.email-row-inline{flex-direction:column!important;gap:14px!important}.email-submit{width:100%}.contact-item{padding:12px 16px;font-size:13px}}:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}input:focus-visible+label,button:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.radio-container{--main-color: #fff;--main-color-opacity: rgba(255, 255, 255, .08);--total-radio: 3;display:flex;flex-direction:column;position:relative;padding-left:.5rem}.radio-container input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.radio-container .glider-container{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(0deg,#0000,#1b1b1b,#0000);width:1px}.radio-container .glider-container .glider{position:relative;height:calc(100% / var(--total-radio));width:100%;background:linear-gradient(0deg,rgba(0,0,0,0) 0%,var(--main-color) 50%,rgba(0,0,0,0) 100%);transition:transform .5s cubic-bezier(.37,1.95,.66,.56)}.radio-container .glider-container .glider:before{content:"";position:absolute;height:60%;width:300%;top:50%;transform:translateY(-50%);background:var(--main-color);filter:blur(10px)}.radio-container .glider-container .glider:after{content:"";position:absolute;left:0;height:100%;width:150px;background:linear-gradient(90deg,var(--main-color-opacity) 0%,rgba(0,0,0,0) 100%)}.radio-container label{cursor:pointer;padding:1rem;position:relative;color:#ffffff80;transition:all .3s ease-in-out}.radio-container input:checked+label{color:var(--main-color)}.radio-container input:nth-of-type(1):checked~.glider-container .glider{transform:translateY(0)}.radio-container input:nth-of-type(2):checked~.glider-container .glider{transform:translateY(100%)}.radio-container input:nth-of-type(3):checked~.glider-container .glider{transform:translateY(200%)}.radio-container input:nth-of-type(4):checked~.glider-container .glider{transform:translateY(300%)}.radio-container input:nth-of-type(5):checked~.glider-container .glider{transform:translateY(400%)}.radio-container input:nth-of-type(6):checked~.glider-container .glider{transform:translateY(500%)}.radio-container input:nth-of-type(7):checked~.glider-container .glider{transform:translateY(600%)}.radio-container input:nth-of-type(8):checked~.glider-container .glider{transform:translateY(700%)}.radio-container input:nth-of-type(9):checked~.glider-container .glider{transform:translateY(800%)}.radio-container input:nth-of-type(10):checked~.glider-container .glider{transform:translateY(900%)}.glass-radio-group{--bg: rgba(255, 255, 255, .06);--text: #999;display:flex;position:relative;background:var(--bg);border-radius:1rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 1px 1px 4px #ffffff26,inset -1px -1px 6px #0000004d,0 4px 12px #00000026;overflow:hidden;width:100%}.glass-radio-group input{display:none}.glass-radio-group label{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem 0;cursor:pointer;color:var(--text);position:relative;z-index:2;transition:color .3s ease-in-out}.glass-radio-group label svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}.glass-radio-group label:hover{color:#ccc}.glass-radio-group input:checked+label{color:#fff}.glass-glider{position:absolute;top:0;bottom:0;width:25%;border-radius:1rem;z-index:1;background:linear-gradient(135deg,#ffffff26,#ffffff59);box-shadow:0 0 16px #ffffff26,0 0 8px #ffffff1a inset;transition:transform .5s cubic-bezier(.37,1.95,.66,.56),background .4s ease-in-out,box-shadow .4s ease-in-out}#glass-mail:checked~.glass-glider{transform:translate(0)}#glass-chat:checked~.glass-glider{transform:translate(100%)}#glass-link:checked~.glass-glider{transform:translate(200%)}#glass-phone:checked~.glass-glider{transform:translate(300%)}.content{display:flex;flex-direction:column;justify-content:flex-start;gap:15px;width:300px;height:100px;position:relative;overflow:hidden;border-radius:14px}.content:before{content:"";position:absolute;left:0%;top:50%;transform:translateY(-50%);bottom:0;width:40px;height:96px;background-image:linear-gradient(90deg,#0000001c,transparent);z-index:2;border-radius:10px 0 0 10px}.content:after{content:"";position:absolute;right:0%;top:50%;transform:translateY(-50%);bottom:0;width:40px;height:96px;background-image:linear-gradient(-90deg,#0000001c,transparent);z-index:9;border-radius:0 10px 10px 0}.basic-marquee{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.basic-marquee .button{transition:all .3s ease}.basic-marquee .button:hover{transform:scale(1.1);cursor:pointer}.basic-marquee-1{animation:marquee 15s linear infinite}.basic-marquee-2{animation:marquee 21s linear infinite}.benefits{display:flex;flex-direction:column;justify-content:center;gap:15px;min-width:900px;height:100%;white-space:nowrap;overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0}@keyframes marquee{0%{transform:translate(-10%)}to{transform:translate(-50%)}}.basic-marquee svg{width:40px}.basic-marquee button{background-color:transparent;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center}.cls-1{fill:#1ab7ea}.cls-1,.cls-2{fill-rule:evenodd}.cls-2{fill:#fff}.cls-3{fill:#ee8208;fill-rule:evenodd}.cls-4{fill:#fff}.cls-5,.cls-6{fill-rule:evenodd}.cls-5{fill:#48dd55}.cls-6{fill:#fff}.cls-7{fill:#0a66c2}.cls-7,.cls-8{fill-rule:evenodd}.cls-8{fill:#fff}.cls-9{fill:#10b7f4}.cls-9,.cls-10{fill-rule:evenodd}.cls-10{fill:#fff}.cls-11{fill:#1da1f2}.cls-11,.cls-12{fill-rule:evenodd}.cls-12{fill:#fff}.cls-13{fill:#ea4c89}.cls-13,.cls-14{fill-rule:evenodd}.cls-14{fill:#fff}.cls-15{fill:#1769ff}.cls-15,.cls-16{fill-rule:evenodd}.cls-16{fill:#fff}.cls-17{fill:#f26522}.cls-17,.cls-18{fill-rule:evenodd}.cls-18{fill:#fff}@media (prefers-reduced-motion: reduce){.basic-marquee-1,.basic-marquee-2{animation:none}}