:root,[data-theme=light]{--bg:#f8fafc;--surface:#ffffff;--text:#0f172a;--muted:#475569;--border:#cbd5e1;--accent:#4f46e5;--accent-2:#06b6d4;--glow:rgba(79,70,229,0.25)}[data-theme=dark]{--bg:#020617;--surface:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--border:#334155;--accent:#818cf8;--accent-2:#22d3ee;--glow:rgba(129,140,248,0.35)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 0 0,var(--glow),transparent 45%),radial-gradient(circle at 100% 0,rgba(34,211,238,.12),transparent 40%),var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}.site-header{justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:-webkit-sticky;position:sticky;top:0;z-index:20}.site-header,.site-header nav{display:flex;align-items:center}.site-header nav{gap:1rem}.nav-link{position:relative;color:var(--text);text-decoration:none;font-weight:600;padding:.25rem 0}.nav-link-line{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform-origin:left;scale:0 1}.nav-link:focus-visible .nav-link-line,.nav-link:hover .nav-link-line{scale:1 1;transition:scale .35s cubic-bezier(.16,1,.3,1)}.brand{color:var(--text);font-weight:700;text-decoration:none}.theme-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:.35rem .8rem;cursor:pointer}.page{max-width:1080px;margin:0 auto;padding:2rem 1.25rem 4rem}.hero-block{position:relative;overflow:hidden;padding:2rem 0 3rem}.hero-block h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;margin:.5rem 0 1rem;max-width:18ch}.hero-title-words{display:flex;flex-wrap:wrap;gap:.2em .28em;perspective:900px}.hero-word{display:inline-block;transform-origin:50% 100%}.hero-copy{color:var(--muted);max-width:62ch}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--accent-2)}.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.7rem 1.2rem;text-decoration:none;font-weight:600}.btn-primary{background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff}.btn-secondary{border:1px solid var(--border);color:var(--text);background:var(--surface)}.locale-row,.tech-row{display:flex;flex-wrap:wrap;gap:.5rem}.pill,.tech-pill{border-radius:999px;padding:.35rem .75rem;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:.875rem}.hero-glow{position:absolute;border-radius:999px;pointer-events:none;filter:blur(2px)}.hero-glow-a{right:-10%;top:-20%;width:320px;height:320px;background:radial-gradient(circle,var(--glow),transparent 70%)}.hero-glow-b{left:-5%;bottom:-30%;width:260px;height:260px;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%)}.hero-grid{position:absolute;inset:-20% -10%;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(circle at 50% 40%,black,transparent 70%);mask-image:radial-gradient(circle at 50% 40%,black,transparent 70%);pointer-events:none}.showcase-wrap{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}.showcase-intro h2{font-size:clamp(1.5rem,3vw,2.25rem);max-width:22ch;margin:.35rem 0 1.5rem}.showcase-grid{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.showcase-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.25rem 1.35rem;min-height:100%}.showcase-tag{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);margin-bottom:.5rem}.glow-card-layer{position:absolute;inset:0;pointer-events:none;opacity:.9}.marquee-shell{overflow:hidden;margin-top:2.5rem;padding:.75rem 0;border-block:1px solid var(--border);-webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}.marquee-track{display:flex;gap:2rem;width:max-content;white-space:nowrap}.marquee-item{font-weight:700;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}.portfolio-layout{max-width:920px;overflow-x:clip}.portfolio-page{display:flex;flex-direction:column;gap:.5rem}.portfolio-dev-banner{--banner-pad:clamp(1.5rem,4vw,2.25rem);position:relative;margin:-.5rem -1rem 2rem;padding:var(--banner-pad);border-radius:20px;border:1px solid var(--border);background:radial-gradient(ellipse 80% 60% at 0 0,rgba(97,218,251,.14),transparent 55%),radial-gradient(ellipse 70% 50% at 100% 100%,var(--glow),transparent 50%),var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -28px rgba(15,23,42,.35);overflow:hidden}.portfolio-dev-banner-diagram{position:relative;z-index:1;width:calc(100% + 2 * var(--banner-pad));max-width:none;margin:1.5rem calc(-1 * var(--banner-pad)) calc(-1 * var(--banner-pad));box-sizing:border-box}.portfolio-dev-banner:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 24px,rgba(97,218,251,.04) 0,rgba(97,218,251,.04) 25px);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,black,transparent 85%);mask-image:linear-gradient(180deg,black,transparent 85%)}.portfolio-dev-banner-grid{position:relative;z-index:1;display:grid;grid-gap:1.75rem;gap:1.75rem;align-items:center}@media (min-width:840px){.portfolio-dev-banner-grid{grid-template-columns:1fr min(380px,42%)}}.portfolio-dev-banner-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.portfolio-dev-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .65rem;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent)}.portfolio-dev-badge-react{color:#61dafb;border-color:color-mix(in srgb,#61dafb 35%,var(--border));background:color-mix(in srgb,#61dafb 12%,var(--surface))}.portfolio-dev-badge-route{color:var(--muted);font-family:ui-monospace,Cascadia Code,monospace;text-transform:none;letter-spacing:.02em}.react-atom-icon{flex-shrink:0}.portfolio-dev-banner h1{font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.05;margin:0 0 .5rem}.portfolio-dev-headline{font-size:1.2rem;color:var(--accent-2);margin:0 0 .75rem;font-weight:600}.portfolio-dev-summary{color:var(--muted);max-width:52ch;font-size:.98rem;line-height:1.55}.portfolio-dev-actions{margin-top:1.1rem}.portfolio-cv-download{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text);font-size:.92rem;font-weight:600;text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease}.portfolio-cv-download:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent);transform:translateY(-1px)}.skills-public-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:.85rem;gap:.85rem}.skills-public-card{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--border);background:var(--surface)}.skills-public-icon{object-fit:contain;padding:6px;background:color-mix(in srgb,var(--border) 35%,transparent)}.skills-public-fallback,.skills-public-icon{width:40px;height:40px;flex-shrink:0;border-radius:10px}.skills-public-fallback{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-2)}.skills-public-body strong{display:block;font-size:.98rem}.skills-public-body p{margin:.25rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.45}.react-lifecycle-panel{border-radius:14px;border:1px solid color-mix(in srgb,#61dafb 22%,var(--border));background:color-mix(in srgb,var(--bg) 65%,#020617);font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.68rem;overflow:hidden}[data-theme=light] .react-lifecycle-panel{background:color-mix(in srgb,var(--bg) 80%,#0f172a);color:#e2e8f0}.react-lifecycle-panel-header{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-bottom:1px solid color-mix(in srgb,#61dafb 15%,var(--border));background:rgba(0,0,0,.25)}.react-lifecycle-dots span{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;background:#64748b}.react-lifecycle-dots span:first-child{background:#f87171}.react-lifecycle-dots span:nth-child(2){background:#fbbf24}.react-lifecycle-dots span:nth-child(3){background:#4ade80}.react-lifecycle-panel-title{flex:1 1;color:#94a3b8}.react-lifecycle-panel-pill{padding:.15rem .45rem;border-radius:6px;background:color-mix(in srgb,#61dafb 18%,transparent);color:#61dafb;font-size:.62rem;font-weight:700}.react-lifecycle-body{display:grid;grid-gap:.75rem;gap:.75rem;padding:.75rem}@media (min-width:520px){.react-lifecycle-body{grid-template-columns:1fr 1fr}}.react-lifecycle-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;max-height:220px;overflow-y:auto;scrollbar-width:thin}.react-lifecycle-step{display:flex;gap:.45rem;align-items:flex-start;padding:.35rem .4rem;border-radius:8px;opacity:.45;transition:opacity .35s ease,background .35s ease}.react-lifecycle-step[data-past=true]{opacity:.65}.react-lifecycle-step[data-active=true]{opacity:1;background:color-mix(in srgb,#61dafb 12%,transparent)}.react-lifecycle-step-rail{position:relative;width:8px;margin-top:.35rem;flex-shrink:0}.react-lifecycle-step-pulse{display:block;width:8px;height:8px;border-radius:50%;background:#61dafb}.react-lifecycle-step-title{display:block;font-weight:700;color:#e2e8f0;font-size:.7rem}.react-lifecycle-step-detail{display:block;color:#64748b;font-size:.62rem;line-height:1.35;margin-top:.1rem}.react-lifecycle-stage{position:relative;min-height:200px;border-radius:10px;border:1px dashed color-mix(in srgb,#61dafb 25%,var(--border));padding:.65rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.react-lifecycle-code{display:flex;flex-direction:column;gap:.25rem}.react-lifecycle-code-comment{color:#64748b}.react-lifecycle-code code{color:#7dd3fc;font-size:.65rem;word-break:break-word}.react-lifecycle-demo-mount{display:flex;justify-content:center;align-items:center;min-height:4rem;margin-top:.5rem}.lifecycle-demo-chip{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.45rem .6rem;border-radius:10px;border:1px solid color-mix(in srgb,#61dafb 40%,var(--border));background:color-mix(in srgb,#61dafb 10%,var(--surface));box-shadow:0 0 24px color-mix(in srgb,#61dafb 25%,transparent)}.lifecycle-demo-chip-label{color:#61dafb;font-weight:700}.lifecycle-demo-chip-meta{color:#94a3b8;font-size:.6rem}.lifecycle-demo-flag{font-size:.58rem;padding:.1rem .35rem;border-radius:4px;background:#334155;color:#64748b;transition:background .2s,color .2s}.lifecycle-demo-flag[data-on=true]{background:color-mix(in srgb,#4ade80 35%,#334155);color:#bbf7d0}.react-lifecycle-fiber-ring{position:absolute;right:-20px;bottom:-20px;width:100px;height:100px;border:1px solid color-mix(in srgb,#61dafb 20%,transparent);border-radius:50%;opacity:.35;pointer-events:none}.react-lifecycle-fiber-ring span{position:absolute;top:0;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#61dafb}.react-lifecycle-simple{position:relative;z-index:1;width:100%;margin-top:0;padding:1rem var(--banner-pad,1.25rem) .85rem;border-radius:0;border:none;border-top:1px solid color-mix(in srgb,#61dafb 18%,var(--border));background:color-mix(in srgb,var(--bg) 55%,transparent)}.react-lifecycle-simple-title{margin:0 0 .85rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.react-lifecycle-simple-title span{color:#61dafb}.react-lifecycle-simple-flow{position:relative;min-height:8.5rem;padding-bottom:.25rem}.react-lifecycle-simple-wires{position:absolute;inset:0;width:100%;height:100%;color:color-mix(in srgb,#61dafb 75%,var(--muted));pointer-events:none}.react-lifecycle-simple-loop-caption{position:absolute;left:50%;bottom:.15rem;transform:translateX(-50%);display:flex;align-items:center;gap:.45rem;margin:0;font-size:.68rem;font-weight:700;color:var(--muted);pointer-events:none;white-space:nowrap}.react-lifecycle-simple-loop-from{color:var(--text)}.react-lifecycle-simple-loop-arrow{color:#61dafb;font-size:.85rem}.react-lifecycle-simple-loop-to{color:#61dafb}.react-lifecycle-simple-track{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:.35rem;gap:.35rem;width:100%;padding-top:.15rem}.react-lifecycle-simple-col{display:flex;justify-content:center;min-width:0}.react-lifecycle-simple-node{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;max-width:7.5rem;padding:.45rem .4rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);opacity:.5;transition:opacity .35s ease,border-color .35s ease;text-align:center}.react-lifecycle-simple-node[data-past=true]{opacity:.75;border-color:color-mix(in srgb,#61dafb 25%,var(--border))}.react-lifecycle-simple-node[data-active=true]{opacity:1;border-color:color-mix(in srgb,#61dafb 55%,var(--border));background:color-mix(in srgb,#61dafb 8%,var(--surface))}.react-lifecycle-simple-node-num{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.65rem;font-weight:800;color:#0f172a;background:#61dafb}.react-lifecycle-simple-node-label{font-size:clamp(.65rem,1.8vw,.78rem);font-weight:700;color:var(--text)}.react-lifecycle-simple-node-back{margin-top:.15rem;font-size:.58rem;font-weight:800;letter-spacing:.02em;color:#61dafb;padding:.12rem .35rem;border-radius:6px;background:color-mix(in srgb,#61dafb 14%,transparent);border:1px dashed color-mix(in srgb,#61dafb 45%,var(--border))}.react-lifecycle-simple-col[data-update=true] .react-lifecycle-simple-node{padding-bottom:.35rem}@media (max-width:520px){.react-lifecycle-simple-flow{min-height:9.5rem}.react-lifecycle-simple-node-back{font-size:.52rem}}.react-lifecycle-simple-hint{margin:.65rem 0 0;padding-top:.65rem;border-top:1px dashed color-mix(in srgb,#61dafb 20%,var(--border));font-size:.82rem;color:var(--muted);line-height:1.45}.react-lifecycle-simple-hint strong{color:var(--text)}.portfolio-draft-hint{padding:1rem 1.1rem;border-radius:12px;border:1px dashed var(--border);color:var(--muted);background:var(--surface);margin-bottom:1.5rem}.portfolio-hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:.25rem 0}.headline{font-size:1.25rem;color:var(--accent-2)}.summary{color:var(--muted);max-width:65ch}.portfolio-section{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.portfolio-section h2{position:relative;display:inline-flex;flex-direction:column;gap:.35rem;margin:0 0 1rem}.section-title-rule{display:block;height:3px;width:100%;transform-origin:left}.hero-accent-line,.section-title-rule{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}.hero-accent-line{margin-top:1.25rem;height:4px;width:min(120px,40%)}.project-grid,.timeline{display:grid;grid-gap:1rem;gap:1rem}.project-card,.timeline-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem}.timeline-card{position:relative;padding-left:1.5rem}.timeline-dot{position:absolute;left:.35rem;top:1.15rem;width:8px;height:8px;border-radius:999px;background:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 25%,transparent)}.tech-pill-skill{cursor:default}.project-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.meta{color:var(--muted);font-size:.9rem}.contact-list{list-style:none;padding:0;margin:0;display:grid;grid-gap:.5rem;gap:.5rem}.contact-list li{display:flex;gap:.75rem}.contact-list span{color:var(--muted);min-width:5rem;text-transform:capitalize}.empty-state{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem}.empty-orb{position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:999px;background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.back-link{margin-top:2rem}.rich-html ul{margin:.5rem 0;padding-left:1.25rem}.rich-html p{margin:0 0 .5rem}.empty-meta{color:var(--muted);font-size:.9rem}@property --card-focus{syntax:"<number>";inherits:false;initial-value:0}.carousel-3d{margin:1.25rem 0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;max-width:100%;overflow-x:clip}.carousel-3d-viewport{height:clamp(440px,58vh,520px);position:relative;width:100%;max-width:100%;overflow:hidden;perspective:920px;perspective-origin:50% 46%;padding-top:1.25rem;box-sizing:border-box}.carousel-3d-stage{transform-style:preserve-3d;transform:rotateX(11deg)}.carousel-3d-ring,.carousel-3d-stage{width:100%;height:100%;position:relative}.carousel-3d-ring{transform-style:preserve-3d}.carousel-3d-floor{position:absolute;left:4%;right:4%;bottom:10%;height:48%;transform:rotateX(78deg) translateZ(-120px);transform-style:preserve-3d;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent) 28%,transparent) 0,color-mix(in srgb,var(--accent-2) 14%,transparent) 42%,transparent 78%);opacity:1;pointer-events:none;filter:blur(1px)}.carousel-3d-floor:before{content:"";position:absolute;inset:18% 22%;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent-2) 18%,transparent) 0,transparent 70%);transform:translateZ(-40px)}.carousel-3d-card{--card-focus:0;position:absolute;left:50%;top:52%;width:min(340px,calc(100% - 1.5rem));margin-left:calc(min(340px, calc(100% - 1.5rem)) / -2);margin-top:-135px;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform,opacity;border:1px solid color-mix(in srgb,var(--accent) calc(var(--card-focus) * 60%),var(--border));box-shadow:0 calc(22px + var(--card-focus) * 18px) calc(48px + var(--card-focus) * 32px) color-mix(in srgb,var(--glow) calc(35% + var(--card-focus) * 65%),transparent),0 calc(2px + var(--card-focus) * 14px) calc(8px + var(--card-focus) * 24px) rgb(15 23 42/.18),0 0 0 calc(var(--card-focus) * 1px) color-mix(in srgb,var(--accent) 40%,transparent);background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 92%,var(--accent) 8%),var(--surface));border-radius:16px;padding:1.1rem 1.2rem}.carousel-3d-card h3{font-size:calc(1rem + var(--card-focus) * .35rem)}.carousel-3d-card *{pointer-events:none}.carousel-3d-chrome{position:absolute;left:0;right:0;bottom:0;z-index:25;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.65rem .75rem .85rem;pointer-events:none;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 0,color-mix(in srgb,var(--bg) 55%,transparent) 55%,transparent 100%)}.carousel-3d-controls{display:flex;align-items:center;justify-content:center;gap:1rem;pointer-events:auto}.carousel-3d-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.1rem;cursor:pointer;transition:transform .2s ease,border-color .2s ease}.carousel-3d-btn:hover{transform:scale(1.06);border-color:var(--accent)}.carousel-3d-dots{display:flex;gap:.45rem}.carousel-3d-dot{width:10px;height:10px;border-radius:999px;border:none;background:var(--border);cursor:pointer;padding:0;transition:transform .25s ease,background .25s ease}.carousel-3d-dot.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2));transform:scale(1.25)}.carousel-3d-caption{text-align:center;color:var(--muted);font-size:.9rem;margin:0;min-height:1.35rem;pointer-events:none}@media (max-width:720px){.carousel-3d-viewport{height:clamp(400px,56vh,480px);padding-top:1rem}.carousel-3d-chrome{padding:.5rem .5rem .65rem}.carousel-3d-card{top:54%;margin-top:-118px}}