:root{color-scheme:dark;--bg: #0f0f10;--card: #1e1e20;--card-soft: #252527;--card-hover: #29292c;--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .13);--text: #f5f5f7;--muted: #b8b8bd;--muted-2: #888890;--gold: #ffd166;--gold-2: #f5c542;--gold-soft: rgba(255, 209, 102, .14);--shadow: 0 24px 80px rgba(0, 0, 0, .34);--body-background: radial-gradient(circle at top left, rgba(255, 209, 102, .08), transparent 34rem), linear-gradient(145deg, #121212 0%, #0d0d0e 58%, #151514 100%);--heading: #ffffff;--strong: #ececef;--surface: #202023;--surface-muted: #242427;--surface-strong: #2b2b2e;--nav-bg: rgba(37, 37, 39, .98);--thumb-bg: linear-gradient(135deg, rgba(255, 209, 102, .22), transparent 54%), linear-gradient(160deg, #131416, #252527);--overlay-bg: rgba(0, 0, 0, .48);--radius-lg: 20px;--radius-md: 16px;--radius-sm: 12px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{color-scheme:light;--bg: #f4f2ed;--card: #ffffff;--card-soft: #f5f1e8;--card-hover: #fbf8f1;--line: rgba(22, 22, 22, .1);--line-strong: rgba(22, 22, 22, .16);--text: #1c1b1a;--muted: #5c5a56;--muted-2: #817b70;--gold: #b98612;--gold-2: #d59a1a;--gold-soft: rgba(185, 134, 18, .12);--shadow: 0 24px 70px rgba(44, 35, 18, .12);--body-background: radial-gradient(circle at top left, rgba(185, 134, 18, .11), transparent 34rem), linear-gradient(145deg, #fbfaf7 0%, #f0eee8 58%, #ffffff 100%);--heading: #171615;--strong: #26231f;--surface: #fbfaf7;--surface-muted: #f1eee7;--surface-strong: #ede8dc;--nav-bg: rgba(248, 245, 239, .98);--thumb-bg: linear-gradient(135deg, rgba(185, 134, 18, .16), transparent 54%), linear-gradient(160deg, #f6f2e9, #ffffff);--overlay-bg: rgba(233, 230, 221, .76)}*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;background:var(--body-background);color:var(--text);transition:background .24s ease,color .24s ease}button,a{font:inherit}button{border:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.site-shell{position:relative;width:100%;min-height:100vh;padding:56px 24px}.portfolio-layout{position:relative;display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:28px;width:min(100%,1200px);margin:0 auto;align-items:start}.sidebar-card,.content-card{background:linear-gradient(145deg,#ffffff06,#fff0),var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.sidebar-card{position:sticky;top:32px;overflow:hidden;padding:28px;animation:panelRise .52s cubic-bezier(.2,.8,.2,1) both}.profile-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.avatar-frame{width:158px;aspect-ratio:1;padding:0;border-radius:24px;background:transparent;border:0;box-shadow:none}.avatar-frame img{width:100%;height:100%;object-fit:cover;border-radius:18px;transition:transform .36s ease,filter .36s ease}.avatar-frame:hover img{filter:contrast(1.05);transform:scale(1.035)}.profile-copy{width:100%}.name-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}.name-row h2{margin:0;color:var(--heading);font-size:1.7rem;line-height:1.18;letter-spacing:0}.role-stack{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:16px}.role-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;margin:0;min-width:142px;min-height:25px;padding:5px 12px;color:var(--strong);background:var(--surface-strong);border:1px solid var(--line);border-radius:8px;font-size:.72rem;font-weight:700;line-height:1.3;text-align:center}.role-badge.secondary{color:var(--strong);background:var(--surface-strong)}.sidebar-divider{width:100%;height:1px;margin:28px 0;background:var(--line)}.contact-preview{display:grid;gap:16px}.contact-row{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;min-width:0}a.contact-row{transition:transform .18s ease,color .18s ease}a.contact-row:hover{color:var(--gold);transform:translate(2px)}.contact-icon,.social-link,.service-icon,.timeline-section-icon,.contact-card-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--gold);background:linear-gradient(145deg,#ffffff12,#ffffff04);border:1px solid var(--line);box-shadow:0 10px 24px #0003}.contact-icon{width:42px;height:42px;border-radius:12px}.contact-text{display:grid;min-width:0;gap:4px}.contact-text small,.contact-card-copy small{color:var(--muted-2);font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.contact-text strong{min-width:0;overflow-wrap:anywhere;color:var(--strong);font-size:.88rem;line-height:1.3}.social-row{display:flex;justify-content:center;gap:10px;margin-top:28px}.social-link{width:38px;height:38px;border-radius:11px;color:var(--muted);transition:transform .18s ease,color .18s ease,border-color .18s ease,background .18s ease}.social-link svg,.service-icon svg,.contact-card-icon svg,.contact-icon svg,.timeline-section-icon svg,.skill-logo{transition:transform .22s ease}.social-link:hover{color:var(--gold);border-color:#ffd16647;background:var(--gold-soft);transform:translateY(-2px)}.content-card{position:relative;min-height:780px;overflow:hidden;padding:70px 38px 42px;animation:panelFade .52s 90ms ease both}.content-card:before{content:none}.utility-controls{position:fixed;top:18px;left:18px;display:flex;align-items:center;gap:0;overflow:hidden;padding:4px;background:var(--nav-bg);border:1px solid var(--line);border-radius:999px;box-shadow:0 18px 45px #00000038;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:1000}.utility-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:30px;height:27px;padding:0 8px;color:var(--muted);background:transparent;border:0;border-radius:999px;cursor:pointer;transition:color .18s ease,background .18s ease,border-color .18s ease,transform .14s ease}.utility-button:hover{color:var(--gold);background:var(--gold-soft);transform:translateY(-1px)}.utility-button:active{transform:scale(.96)}.language-button span{font-size:.7rem;font-weight:850}.top-nav{position:absolute;top:0;right:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;max-width:min(100%,500px);padding:0 0 0 18px;background:var(--nav-bg);border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 var(--radius-lg) 0 var(--radius-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto;z-index:20}.nav-link{position:relative;min-height:58px;padding:0 18px;color:var(--muted);background:transparent;cursor:pointer;overflow:hidden;font-size:.93rem;font-weight:700;transition:color .18s ease,background .18s ease,transform .14s ease}.nav-link:after{content:"";position:absolute;left:50%;bottom:10px;width:5px;height:5px;background:var(--gold);border-radius:999px;opacity:0;transform:translate(-50%) scale(0);transition:opacity .18s ease,transform .18s ease}.nav-link:hover,.nav-link.active{color:var(--gold)}.nav-link.active{background:transparent}.nav-link.active:after{opacity:1;transform:translate(-50%) scale(1);box-shadow:0 0 16px #ffd1666b}.nav-link:active{transform:scale(.96)}.tab-panel{position:relative;z-index:1;animation:contentFade .24s ease}[data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .56s ease,transform .56s cubic-bezier(.2,.8,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease,color .18s ease;transition-delay:var(--reveal-delay, 0ms)}[data-reveal].is-visible{opacity:1;transform:translateZ(0)}.section-title{margin-bottom:28px}.section-title h1{margin:0;color:var(--heading);font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;letter-spacing:0}.section-title span{display:block;width:48px;height:5px;margin-top:15px;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:999px;transform-origin:left;animation:underlineGrow .52s .12s cubic-bezier(.2,.8,.2,1) both}.about-copy{display:grid;gap:16px}.about-copy p,.timeline-content p,.project-info p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.75}.content-section{margin-top:34px}.section-heading{margin:0 0 20px;color:var(--heading);font-size:1.45rem;line-height:1.2;letter-spacing:0}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.service-card,.contact-card,.project-card{background:linear-gradient(145deg,#ffffff0b,#ffffff03),var(--surface);border:1px solid var(--line);transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.service-card{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;min-height:154px;padding:22px;border-radius:var(--radius-md);overflow:hidden}.service-card:before,.contact-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.075) 44%,transparent 66%);transform:translate(-105%);transition:transform .52s ease}.service-card:hover:before,.contact-card:hover:before{transform:translate(105%)}.service-card>*,.contact-card>*{position:relative;z-index:1}.service-card:hover,.contact-card:hover,.project-card:hover{background:linear-gradient(145deg,#ffd1660f,#ffffff05),var(--card-hover);border-color:#ffd16633;box-shadow:0 18px 48px #00000038;transform:translateY(-4px)}.service-card:hover .service-icon svg,.contact-card:hover .contact-card-icon svg,.contact-row:hover .contact-icon svg,.social-link:hover svg{transform:translateY(-1px) scale(1.08)}.service-icon,.timeline-section-icon,.contact-card-icon{width:50px;height:50px;border-radius:14px}.service-card h3{margin:0 0 9px;color:var(--heading);font-size:1.04rem;letter-spacing:0}.service-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}.skill-cloud{display:flex;flex-wrap:wrap;gap:10px}.skill-pill{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:8px 13px;color:var(--strong);background:var(--surface-muted);border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:700;transition:color .18s ease,border-color .18s ease,background .18s ease}.skill-logo{flex:0 0 auto;color:var(--gold)}.skill-pill:hover{color:var(--gold);background:var(--gold-soft);border-color:#ffd16638;transform:translateY(-2px)}.skill-pill:hover .skill-logo{transform:rotate(-6deg) scale(1.12)}.resume-stack{display:grid;gap:38px}.timeline-heading{display:flex;align-items:center;gap:14px;margin-bottom:24px}.timeline-heading h2{margin:0;color:var(--heading);font-size:1.35rem;letter-spacing:0}.timeline-list{position:relative;display:grid;gap:26px;margin:0;padding:0 0 0 65px;list-style:none}.timeline-list:before{content:"";position:absolute;top:-24px;bottom:4px;left:25px;width:1px;background:#ffffff1f}.timeline-item{position:relative}.timeline-dot{position:absolute;top:8px;left:-47px;width:15px;height:15px;background:var(--gold);border:4px solid var(--card);border-radius:50%;box-shadow:0 0 0 5px #ffd16612;transition:transform .22s ease,box-shadow .22s ease}.timeline-item:hover .timeline-dot{transform:scale(1.12);box-shadow:0 0 0 7px #ffd16621,0 0 20px #ffd16647}.timeline-content{min-width:0}.timeline-content h3{margin:0 0 7px;color:var(--heading);font-size:1.05rem;line-height:1.35;letter-spacing:0}.timeline-subtitle{color:var(--strong);font-weight:700}.timeline-meta{display:grid;gap:4px;margin:8px 0 12px}.timeline-meta span{display:inline-flex;align-items:center;min-height:0;padding:0;color:var(--gold);background:transparent;border:0;border-radius:0;font-size:.86rem;font-weight:500}.timeline-content ul,.project-info ul{display:grid;gap:9px;margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem;line-height:1.65}.timeline-content li::marker,.project-info li::marker{color:var(--gold)}.portfolio-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}.filter-button{min-height:38px;padding:8px 13px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:800;transition:color .18s ease,background .18s ease,border-color .18s ease}.filter-button:hover,.filter-button.active{color:var(--gold);background:var(--gold-soft);border-color:#ffd1662e}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:30px}.project-card{position:relative;display:grid;gap:10px;padding:0;background:transparent;border:0;border-radius:14px}.project-card:hover{background:transparent;border-color:transparent;box-shadow:none;transform:translateY(-3px)}.project-thumb{position:relative;display:grid;place-items:center;aspect-ratio:16 / 9;min-height:0;overflow:hidden;background:var(--thumb-bg);border-radius:14px;border:1px solid var(--line)}.api-window{width:min(82%,210px);min-height:112px;overflow:hidden;background:#0e0e0feb;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 28px 70px #00000059;transform:perspective(900px) rotateX(3deg) rotateY(-5deg);transition:transform .26s ease}.project-card:hover .api-window{transform:perspective(900px) rotateX(0) rotateY(0) scale(1.04)}.project-image{width:100%;height:100%;object-fit:cover;transition:transform .26s ease}.project-card:hover .project-image{transform:scale(1.04)}.api-topbar{display:flex;gap:5px;padding:8px 10px;background:#242427;border-bottom:1px solid var(--line)}.api-topbar span{width:7px;height:7px;border-radius:50%;background:var(--muted-2)}.api-topbar span:first-child{background:#ff6868}.api-topbar span:nth-child(2){background:var(--gold)}.api-topbar span:nth-child(3){background:#63d08b}.api-body{display:grid;gap:6px;padding:10px}.api-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}.api-title strong{font-size:.72rem;letter-spacing:0}.api-title em{color:var(--gold);font-size:.62rem;font-style:normal;font-weight:900}.api-row{height:6px;border-radius:999px;background:#ffffff1f}.api-row.gold{width:66%;background:#ffd166ad}.api-row.wide{width:88%}.api-row.short{width:48%}.endpoint-row{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;min-height:24px;padding:5px 7px;background:#ffffff0f;border:1px solid rgba(255,255,255,.07);border-radius:9px}.endpoint-row span{color:#111;background:var(--gold);border-radius:6px;padding:3px 4px;font-size:.54rem;font-weight:950;text-align:center}.endpoint-row strong{min-width:0;overflow:hidden;color:#e8e8ea;font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}.endpoint-row.muted span{color:#fff;background:#ffffff38}.project-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;gap:8px;align-content:center;color:#fff;background:var(--overlay-bg);opacity:0;transition:opacity .22s ease}.project-card:hover .project-overlay{opacity:1}.project-eye{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;color:var(--gold);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 42px #00000042;transform:scale(.9);transition:transform .18s ease,color .18s ease,background .18s ease}.project-card:hover .project-eye{transform:scale(1)}.project-overlay span:not(.project-eye){color:var(--gold);font-size:.9rem;font-weight:850}.project-info{display:grid;gap:2px;padding:0 8px}.project-info span{color:var(--muted-2);font-size:.9rem;font-weight:700}.project-info h2{margin:0;color:var(--heading);font-size:1rem;font-weight:600;letter-spacing:0}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.contact-card{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 20px;align-items:center;gap:14px;min-height:92px;padding:18px;border-radius:var(--radius-md);overflow:hidden}div.contact-card{grid-template-columns:52px minmax(0,1fr)}.contact-card-copy{display:grid;min-width:0;gap:6px}.contact-card-copy strong{min-width:0;overflow-wrap:anywhere;color:var(--heading);font-size:.95rem;line-height:1.35}.contact-arrow{color:var(--muted-2);transition:color .18s ease,transform .18s ease}.contact-card:hover .contact-arrow{color:var(--gold);transform:translate(2px,-2px)}@media(max-width:1020px){.site-shell{padding:32px 18px}.portfolio-layout{grid-template-columns:1fr}.sidebar-card{position:static}.profile-head{display:grid;grid-template-columns:132px minmax(0,1fr);text-align:left}.avatar-frame{width:132px}.name-row{justify-content:flex-start}.role-stack{align-items:flex-start}.contact-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.social-row{justify-content:flex-start}.content-card{min-height:700px}.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.site-shell{padding-bottom:92px}.content-card{padding:30px 24px}.top-nav{position:fixed;top:auto;right:auto;bottom:12px;left:50%;justify-content:center;width:max-content;max-width:calc(100vw - 24px);padding:0 8px;overflow-x:auto;flex-wrap:nowrap;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 54px #0000006b;transform:translate(-50%);z-index:999}.nav-link{flex:0 0 auto;min-height:54px;padding:0 16px;font-size:.84rem}.contact-grid{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:minmax(0,1fr);justify-content:center;width:100%;max-width:none;margin:0 auto;gap:28px}.service-grid,.contact-preview{grid-template-columns:1fr}}@media(max-width:560px){.site-shell{padding:18px 12px 118px}.sidebar-card,.content-card{border-radius:18px}.sidebar-card{padding:20px}.profile-head{grid-template-columns:1fr;justify-items:center;text-align:center}.name-row{justify-content:center}.avatar-frame{width:142px}.role-stack{align-items:center}.social-row{justify-content:center}.content-card{padding:24px 18px 42px;min-height:640px}.utility-controls{top:12px;left:12px}.section-title{margin-bottom:24px}.section-title h1{font-size:2rem}.service-card,.contact-card{grid-template-columns:46px minmax(0,1fr);padding:16px}a.contact-card{grid-template-columns:46px minmax(0,1fr) 18px}.service-icon,.timeline-section-icon,.contact-card-icon{width:44px;height:44px;border-radius:13px}.timeline-list{padding-left:58px}.timeline-list:before{left:22px}.timeline-dot{left:-43px}.timeline-content h3{font-size:1rem}.project-thumb{min-height:0}.project-info{padding:0}.api-window{width:82%}.project-info ul{display:none}}@keyframes panelRise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes panelFade{0%{opacity:0}to{opacity:1}}@keyframes contentFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes underlineGrow{0%{opacity:0;transform:scaleX(.35)}to{opacity:1;transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}[data-reveal]{opacity:1!important;transform:none!important}}