:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#07080d;--bg-soft:#0d1018;--panel:#fff1;--panel-strong:#ffffff1b;--text:#f4f7fb;--muted:#a4adba;--line:#ffffff21;--accent:#72f6d1;--accent-2:#7aa8ff;--shadow:#00000059;--nav:#07080dc7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f7f8fb;--bg-soft:#edf1f7;--panel:#ffffffc2;--panel-strong:#ffffffeb;--text:#121722;--muted:#5d6776;--line:#1217221f;--accent:#047e69;--accent-2:#315fbd;--shadow:#11182721;--nav:#f7f8fbd1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 15% 5%, #72f6d121, transparent 28rem), radial-gradient(circle at 82% 8%, #7aa8ff24, transparent 30rem), linear-gradient(180deg, var(--bg), var(--bg-soft));color:var(--text);min-width:320px;margin:0}body:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:72px 72px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 72%);mask-image:linear-gradient(#000,#0000 72%)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.scroll-progress{z-index:100;transform-origin:0;background:linear-gradient(90deg, var(--accent), var(--accent-2));height:3px;position:fixed;inset:0 0 auto}.loader{z-index:200;background:var(--bg);align-content:center;place-items:center;gap:18px;display:grid;position:fixed;inset:0}.loader-mark,.brand span{border:1px solid var(--line);background:linear-gradient(135deg, var(--panel-strong), transparent);width:42px;height:42px;color:var(--accent);border-radius:8px;place-items:center;font-weight:800;display:grid}.loader p{color:var(--muted);margin:0}.navbar{z-index:80;border-bottom:1px solid var(--line);background:var(--nav);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);justify-content:space-between;align-items:center;padding:14px clamp(18px,4vw,56px);display:flex;position:sticky;top:0}.brand{letter-spacing:0;align-items:center;gap:12px;font-weight:800;display:inline-flex}.nav-links{border:1px solid var(--line);background:#ffffff09;border-radius:999px;gap:4px;padding:5px;display:flex}.nav-links a{color:var(--muted);border-radius:999px;padding:9px 13px;font-size:.9rem;transition:all .25s}.nav-links a.active,.nav-links a:hover{color:var(--text);background:var(--panel-strong)}.nav-actions{align-items:center;gap:10px;display:flex}.icon-button{border:1px solid var(--line);width:42px;height:42px;color:var(--text);background:var(--panel);cursor:pointer;border-radius:8px;place-items:center;display:grid}.mobile-only,.mobile-menu{display:none}.section{max-width:1180px;margin:0 auto;padding:110px clamp(18px,4vw,34px);position:relative}.alt-section{background:linear-gradient(#0000,#ffffff09,#0000);max-width:none;padding-left:max(clamp(18px,4vw,34px),50vw - 556px);padding-right:max(clamp(18px,4vw,34px),50vw - 556px)}.hero{align-items:center;min-height:calc(100vh - 72px);display:grid;overflow:hidden}.hero-content{z-index:2;width:min(850px,100%);position:relative}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:0;align-items:center;gap:8px;margin:0 0 18px;font-size:.82rem;font-weight:800;display:inline-flex}h1,h2,h3,p{margin-top:0}.hero h1{letter-spacing:0;margin-bottom:8px;font-size:clamp(3.4rem,9vw,7.3rem);line-height:.9}.hero h2{color:var(--muted);margin-bottom:24px;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:650}.hero-copy{max-width:700px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.75}.cta-row,.project-actions{flex-wrap:wrap;gap:12px;margin-top:34px;display:flex}.button{border:1px solid var(--line);border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:48px;padding:0 18px;font-weight:800;transition:transform .25s,background .25s,border-color .25s;display:inline-flex}.button:hover,.skill-card:hover,.project-card:hover{transform:translateY(-4px)}.button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#071017;border-color:#0000}.button.secondary{background:var(--panel-strong)}.button.ghost{color:var(--muted);background:0 0}.button.compact{min-height:42px;padding:0 14px;font-size:.92rem}.hero-visual{opacity:.9;width:min(620px,55vw);position:absolute;inset:90px 0 0 auto}.grid-glow{border:1px solid var(--line);min-height:470px;box-shadow:0 30px 90px var(--shadow);background:linear-gradient(135deg,#72f6d11f,#0000 36%),linear-gradient(45deg,#0000,#7aa8ff1f),repeating-linear-gradient(90deg,#0000 0 34px,#ffffff0d 35px 36px),repeating-linear-gradient(0deg,#0000 0 34px,#ffffff0d 35px 36px);border-radius:14px;position:absolute;inset:50px 0 0;transform:perspective(900px)rotateY(-16deg)rotateX(8deg)}.code-orbit{z-index:3;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--muted);box-shadow:0 18px 50px var(--shadow);border-radius:8px;align-items:center;gap:10px;padding:13px 15px;display:inline-flex;position:absolute}.orbit-one{top:96px;right:24%}.orbit-two{top:340px;right:6%}.scroll-cue{color:var(--muted);align-items:center;gap:8px;display:inline-flex;position:absolute;bottom:34px;left:clamp(18px,4vw,34px)}.section-intro{max-width:780px;margin-bottom:38px}.section-intro h2{letter-spacing:0;margin-bottom:14px;font-size:clamp(2rem,4vw,3.6rem);line-height:1.04}.section-intro p:not(.eyebrow),.about-card p,.project-body p,.experience-card li,.timeline-item p{color:var(--muted);line-height:1.75}.about-grid,.experience-grid,.contact-grid,.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.glass-panel,.skill-card,.project-card,.overview-card,.contact-panel,.contact-form{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 22px 70px var(--shadow);border-radius:14px}.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-card{min-height:230px;padding:26px;transition:all .25s}.overview-card:hover{transform:translateY(-4px)}.overview-card svg{width:30px;height:30px;color:var(--accent);margin-bottom:24px}.overview-card h3{margin-bottom:10px}.overview-card p{color:var(--muted);margin-bottom:0;line-height:1.7}.about-card,.experience-card,.contact-panel,.contact-form{padding:28px}.about-card svg,.experience-card svg{width:34px;height:34px;color:var(--accent);margin-bottom:22px}.skills-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;display:grid}.skill-card{grid-column:span 2;min-height:245px;padding:24px;transition:all .25s}.skill-card:nth-child(5){grid-column:span 4}.card-head{align-items:center;gap:12px;margin-bottom:20px;display:flex}.card-head svg{color:var(--accent)}.card-head h3,.project-body h3,.experience-card h3,.contact-form h3{margin:0;font-size:1.22rem}.skill-pills,.tech-list{flex-wrap:wrap;gap:10px;display:flex}.skill-pills span,.tech-list span{border:1px solid var(--line);color:var(--muted);background:#ffffff0b;border-radius:999px;padding:8px 11px;font-size:.9rem}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.project-card{transition:all .25s;overflow:hidden}.project-preview{background:linear-gradient(135deg,#72f6d124,#7aa8ff14);height:245px;padding:0;overflow:hidden}.project-card.emerald .project-preview{background:linear-gradient(135deg,#71e7a424,#72f6d10f)}.project-cover{object-fit:contain;width:100%;height:100%;display:block}.project-cover.cover-nsync{object-position:center;background:#fff;padding:12px clamp(24px,4vw,56px)}.project-cover.cover-higa{object-fit:cover;object-position:center top;background:#0a1f38}.project-cover.cover-sui{object-fit:cover;object-position:center top;background:#0a1222}.project-cover.cover-cot{background:#f3f5f8}.project-body{padding:26px}.project-tag{text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:800;color:var(--accent)!important}.experience-card ul{margin:20px 0 0;padding-left:20px}.timeline{gap:14px;display:grid;position:relative}.timeline:before{content:"";background:var(--line);width:1px;position:absolute;top:18px;bottom:18px;left:23px}.timeline-item{border:1px solid var(--line);background:var(--panel);border-radius:12px;grid-template-columns:50px 1fr;align-items:center;gap:18px;padding:18px;display:grid;position:relative}.timeline-item span{z-index:1;background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#071017;border-radius:50%;place-items:center;width:46px;height:46px;font-weight:900;display:grid;position:relative}.timeline-item p{color:var(--text);margin:0;font-weight:720}.contact-panel{flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;display:flex}.contact-panel a:not(.button){color:var(--muted);align-items:center;gap:10px;display:inline-flex}.contact-form{gap:16px;display:grid}.contact-form label{color:var(--muted);gap:8px;font-weight:700;display:grid}.contact-form input,.contact-form textarea{border:1px solid var(--line);width:100%;color:var(--text);resize:vertical;background:#ffffff0e;border-radius:8px;outline:none;padding:13px 14px}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent)}.form-success{color:var(--accent);margin:4px 0 0;font-weight:700}.form-error{color:#ff8f8f;margin:4px 0 0;font-weight:700}.footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:18px;padding:30px clamp(18px,4vw,56px);display:flex}.footer p{color:var(--text);margin:0;font-weight:900}@media (width<=980px){.nav-links{display:none}.mobile-only{display:grid}.mobile-menu{border:1px solid var(--line);background:var(--nav);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;gap:4px;padding:12px;display:grid;position:absolute;top:calc(100% + 8px);left:18px;right:18px}.mobile-menu a{color:var(--muted);padding:12px}.hero-visual{opacity:.32;width:78vw}.skills-grid,.project-grid,.about-grid,.experience-grid,.contact-grid,.overview-grid{grid-template-columns:1fr}.skill-card,.skill-card:nth-child(5){grid-column:auto}}@media (width<=640px){.section{padding-top:82px;padding-bottom:82px}.brand{font-size:.94rem}.hero h1{font-size:clamp(3rem,17vw,4.6rem)}.button,.cta-row,.project-actions{width:100%}.code-orbit{display:none}.project-preview{height:205px}.footer{flex-direction:column;align-items:flex-start}}