*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background-color .5s ease,color .5s ease}img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}a{color:inherit;text-decoration:none}ul{list-style:none}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}:root,:root[data-theme=dark]{--bg: #000000;--bg-vignette: rgba(0,0,0,.6);--surface: #030303;--surface-90: rgba(3,3,3,.95);--surface-card: #121212;--border: rgba(255,255,255,.08);--border-soft: rgba(255,255,255,.06);--border-strong: rgba(255,255,255,.18);--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-dim: #52525b;--chip-bg: rgba(255,255,255,.04);--chip-bg-strong: rgba(255,255,255,.08);--inverse-bg: #ffffff;--inverse-text: #09090b;--shadow-lg: 0 20px 60px rgba(0,0,0,.8);--shadow-md: 0 20px 50px rgba(0,0,0,.7);--shadow-nav: 0 24px 80px rgba(0,0,0,.4)}:root[data-theme=light]{--bg: #f0f2f5;--bg-vignette: rgba(255,255,255,.6);--surface: rgba(255,255,255,.92);--surface-90: rgba(255,255,255,.9);--surface-card: #ffffff;--border: rgba(0,0,0,.1);--border-soft: rgba(0,0,0,.06);--border-strong: rgba(0,0,0,.2);--text-primary: #18181b;--text-secondary: #52525b;--text-muted: #71717a;--text-dim: #a1a1aa;--chip-bg: rgba(0,0,0,.04);--chip-bg-strong: rgba(0,0,0,.08);--inverse-bg: #18181b;--inverse-text: #ffffff;--shadow-lg: 0 8px 30px rgba(0,0,0,.08);--shadow-md: 0 8px 30px rgba(0,0,0,.06);--shadow-nav: 0 24px 60px rgba(0,0,0,.12)}.beams-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%;display:block}:root[data-theme=light] .beams-canvas{opacity:.18;filter:invert(1)}.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at center,transparent 40%,var(--bg-vignette) 100%);transition:background .5s ease}.page{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:1152px;margin:0 auto;padding:0 1.25rem 13rem}@media (min-width: 640px){.page{padding-left:2rem;padding-right:2rem}}@media (min-width: 768px){.page{padding-bottom:7rem}}@media (min-width: 1024px){.page{padding-left:2.5rem;padding-right:2.5rem}}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0 2rem}@media (min-width: 768px){.site-header{padding:2rem 0 3rem}}.brand{display:flex;align-items:center;gap:.75rem;cursor:pointer}.brand-mark{width:2.25rem;height:2.25rem;border-radius:.75rem;background:var(--chip-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;backdrop-filter:blur(12px);overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:11px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;line-height:1}.brand-role{font-size:9px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;margin-top:2px}.header-actions{display:flex;align-items:center;gap:.625rem}.status-pill{display:flex;align-items:center;gap:.5rem;background:var(--chip-bg);border:1px solid var(--border);backdrop-filter:blur(12px);border-radius:999px;padding:.5rem 1rem;font-size:11px;font-weight:600;color:var(--text-secondary);transition:all .2s ease}.status-dot-wrap{position:relative;display:flex;height:6px;width:6px}.status-dot-ping{position:absolute;inset:0;border-radius:999px;opacity:.75;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}.status-dot{position:relative;display:inline-flex;border-radius:999px;height:6px;width:6px}.icon-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;background:var(--chip-bg);border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);backdrop-filter:blur(12px);transition:all .2s ease}.icon-btn:hover,.status-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}.icon-btn svg{width:16px;height:16px}.hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:2rem 0}.hero-grid{display:grid;grid-template-columns:1fr;gap:3.5rem;align-items:center}@media (min-width: 1024px){.hero-grid{grid-template-columns:repeat(12,1fr);gap:2.5rem}}.hero-copy{text-align:center}@media (min-width: 1024px){.hero-copy{grid-column:span 7;text-align:left}}.headline{font-size:2.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}@media (min-width: 640px){.headline{font-size:3rem}}@media (min-width: 768px){.headline{font-size:3.75rem}}@media (min-width: 1024px){.headline{align-items:flex-start}}.headline-line{display:inline-flex;flex-wrap:wrap}.headline-line.muted{color:var(--text-muted)}.letter{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(24px);animation:letterIn .6s ease forwards;animation-delay:calc(var(--i) * 28ms)}@keyframes letterIn{to{opacity:1;filter:blur(0);transform:translateY(0)}}.subtitle{font-size:.875rem;max-width:32rem;margin:0 auto 2.25rem;line-height:1.7;color:var(--text-muted);font-weight:500}@media (min-width: 640px){.subtitle{font-size:1rem}}@media (min-width: 1024px){.subtitle{margin-left:0;margin-right:0}}.subtitle .word{display:inline-block;margin-right:.28em;opacity:0;filter:blur(6px);transform:translateY(24px);animation:letterIn .6s ease forwards;animation-delay:calc(var(--i) * 40ms)}.hero-actions{display:flex;align-items:center;gap:.75rem;justify-content:center;opacity:0;transform:translateY(20px);animation:fadeUp .6s ease .9s forwards}@media (min-width: 1024px){.hero-actions{justify-content:flex-start}}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}.btn-primary{display:flex;align-items:center;gap:.625rem;background:var(--inverse-bg);color:var(--inverse-text);padding:.75rem 1.5rem;border-radius:.75rem;font-size:.875rem;font-weight:700;transition:box-shadow .2s ease}.btn-primary:hover{box-shadow:0 0 30px #ffffff40}:root[data-theme=light] .btn-primary:hover{box-shadow:0 0 30px #0003}.btn-primary svg{width:16px;height:16px;transition:transform .2s ease}.btn-primary:hover svg{transform:translate(2px)}.btn-secondary{display:flex;align-items:center;gap:.5rem;background:var(--chip-bg);border:1px solid var(--border);padding:.75rem 1.25rem;border-radius:.75rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);backdrop-filter:blur(12px);transition:all .2s ease}.btn-secondary:hover{border-color:var(--border-strong);color:var(--text-primary)}.hero-card-col{display:flex;justify-content:center;opacity:0;transform:translateY(30px) scale(.95);animation:fadeUp .7s ease .3s forwards}@media (min-width: 1024px){.hero-card-col{grid-column:span 5;justify-content:flex-end}}.hero-card-perspective{perspective:1000px;width:100%;max-width:420px}.glow-wrap{position:relative;border-radius:1.25rem;padding:1.5px;overflow:hidden;background:linear-gradient(var(--surface),var(--surface));transform-style:preserve-3d;will-change:transform}.glow-wrap:before{content:"";position:absolute;inset:-50%;z-index:0;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.5) 60deg,transparent 140deg,transparent 360deg);animation:spin 5s linear infinite}:root[data-theme=light] .glow-wrap:before{background:conic-gradient(from 0deg,transparent 0deg,rgba(0,0,0,.3) 60deg,transparent 140deg,transparent 360deg)}@keyframes spin{to{transform:rotate(360deg)}}.glow-inner{position:relative;z-index:1;border-radius:calc(1.25rem - 1.5px);background:var(--surface);box-shadow:var(--shadow-lg);padding:1.5rem;backdrop-filter:blur(24px);transform-style:preserve-3d}.profile-card-row{display:flex;align-items:center;justify-content:space-between;transform:translateZ(28px)}.profile-id{display:flex;align-items:center;gap:.875rem}.avatar-wrap{position:relative;width:3rem;height:3rem;flex-shrink:0}.avatar-frame{width:100%;height:100%;border-radius:.75rem;overflow:hidden;border:1px solid var(--border);background:var(--chip-bg);box-shadow:0 1px 2px #0003}.avatar-frame img{width:100%;height:100%;object-fit:cover}.avatar-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;background:linear-gradient(135deg,#3f3f46,#18181b);color:#fff}.status-dot-abs{position:absolute;bottom:-2px;right:-2px;width:.875rem;height:.875rem;border-radius:999px;border:2px solid var(--surface);transition:background-color .5s ease}.status-dot-abs .status-dot-ping{border-radius:999px}.profile-name-row{display:flex;align-items:center;gap:.375rem}.profile-name{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);line-height:1.2}.verified-badge{width:1rem;height:1rem;color:var(--text-primary);flex-shrink:0}.profile-handle{font-size:11px;color:var(--text-muted);font-weight:500}.profile-actions{display:flex;align-items:center;gap:.5rem}.badge-icons{display:flex;align-items:center;gap:.375rem}.mini-badge{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.5rem;background:var(--chip-bg);border:1px solid var(--border);color:var(--text-secondary);font-size:10px}img.mini-badge{padding:4px;object-fit:contain}.ext-link-btn{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.75rem;background:var(--chip-bg);border:1px solid var(--border);color:var(--text-secondary);transition:all .2s ease}.ext-link-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.ext-link-btn svg{width:16px;height:16px}.profile-activity{margin-top:.875rem;padding-top:.875rem;border-top:1px solid var(--border-soft);font-size:11px;color:var(--text-muted);display:none}.profile-activity.visible{display:block}.spotify-now-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1ed760;margin-bottom:.5rem}.spotify-now-row{display:flex;align-items:center;gap:.625rem}.spotify-now-cover{width:2.25rem;height:2.25rem;border-radius:.5rem;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px #00000059;background:var(--chip-bg-strong)}.spotify-now-info{flex:1;min-width:0}.spotify-now-title{font-size:12px;font-weight:700;color:var(--text-primary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-now-artist{font-size:10px;color:var(--text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-now-icon{width:16px;height:16px;color:#1ed760;flex-shrink:0;display:flex}.spotify-now-icon svg{width:100%;height:100%}.stats-wrap{display:flex;justify-content:center;width:100%;margin-top:3.5rem}@media (min-width: 768px){.stats-wrap{margin-top:5rem}}.stats-bar{width:100%;max-width:56rem;background:var(--surface-90);border:1px solid var(--border);backdrop-filter:blur(24px);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow-md);display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;opacity:0;transform:translateY(30px);animation:fadeUp .7s ease .5s forwards}@media (min-width: 768px){.stats-bar{grid-template-columns:repeat(4,1fr);gap:0;padding:1.25rem 2rem}}.stat-item{display:flex;align-items:center;gap:.875rem;justify-content:center}@media (min-width: 768px){.stat-item{justify-content:flex-start}.stat-item:not(:first-child){border-left:1px solid var(--border-soft);padding-left:2rem}}.stat-icon{width:2.5rem;height:2.5rem;border-radius:.75rem;flex-shrink:0;background:var(--chip-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.stat-icon svg{width:18px;height:18px}.stat-value{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}.stat-label{font-size:11px;color:var(--text-muted);font-weight:500}.section{padding:6rem 0 2rem;scroll-margin-top:6rem}.section-head{text-align:center;margin-bottom:3rem}.section-kicker{font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted)}.section-title{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin-top:.5rem}.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}.reveal.in-view{opacity:1;transform:translateY(0)}.projects-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 640px){.projects-grid{grid-template-columns:repeat(2,1fr)}}.project-card{background:var(--chip-bg);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:.875rem;transition:all .25s ease;text-decoration:none;overflow:hidden}.project-card:hover{border-color:var(--border-strong);transform:translateY(-3px)}.project-thumb{width:2.75rem;height:2.75rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff}.project-thumb-img{width:calc(100% + 3rem);height:auto;margin:-1.5rem -1.5rem 0;aspect-ratio:5 / 3;background:var(--chip-bg-strong);border-radius:0}.project-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}.project-title{font-size:1rem;font-weight:700}.project-desc{font-size:.8125rem;color:var(--text-muted);line-height:1.6;flex:1}.project-tags{display:flex;flex-wrap:wrap;gap:.375rem}.tag{font-size:10px;font-weight:600;padding:.25rem .5rem;border-radius:.375rem;background:var(--chip-bg-strong);color:var(--text-secondary);border:1px solid var(--border)}.project-link-arrow{display:flex;align-items:center;gap:.375rem;font-size:12px;font-weight:600;color:var(--text-secondary)}.project-link-arrow svg{width:13px;height:13px}.about-content{max-width:42rem;margin:0 auto;text-align:center}.about-text{font-size:.9375rem;line-height:1.8;color:var(--text-muted);margin-bottom:1.75rem}.skills-wrap{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.skill-chip{font-size:12px;font-weight:600;padding:.5rem .875rem;border-radius:.625rem;background:var(--chip-bg);border:1px solid var(--border);color:var(--text-secondary)}.site-footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:1.25rem;justify-content:space-between;align-items:center;font-size:12px;width:100%}@media (min-width: 640px){.site-footer{flex-direction:row}}.footer-copy{color:var(--text-dim);letter-spacing:.05em;font-family:ui-monospace,monospace;font-size:10px}.footer-socials{display:flex;align-items:center;gap:.5rem}.social-btn{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background:var(--chip-bg);border:1px solid var(--border-soft);color:var(--text-muted);transition:all .2s ease}.social-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.social-btn svg{width:14px;height:14px}.bottom-nav-wrap{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);z-index:50;pointer-events:none}.bottom-nav{display:flex;align-items:center;gap:.25rem;background:var(--surface-90);border:1px solid var(--border);backdrop-filter:blur(24px);padding:.5rem;border-radius:999px;box-shadow:var(--shadow-nav);pointer-events:auto;opacity:0;transform:translateY(40px) scale(.95);animation:fadeUp .7s ease 1.1s forwards}.nav-btn{position:relative;display:flex;align-items:center;height:2.25rem;padding:0 .875rem;border-radius:999px;color:var(--text-muted);transition:color .2s ease;gap:.5rem}.nav-btn svg{width:18px;height:18px}.nav-btn span{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transition:all .25s ease}.nav-btn.active{color:var(--text-primary);background:var(--chip-bg-strong);border:1px solid var(--border)}.nav-btn.active span{max-width:100px;opacity:1}.nav-btn:hover{color:var(--text-primary)}.player-wrap{position:fixed;bottom:6.5rem;left:0;right:0;display:flex;justify-content:center;z-index:50;pointer-events:none}@media (min-width: 768px){.player-wrap{bottom:1.5rem;left:auto;right:1.5rem;justify-content:flex-end}}.player-card{width:260px;pointer-events:auto;border-radius:.75rem;overflow:hidden;background:var(--surface-card);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:12px;opacity:0;transform:translateY(20px) scale(.92);animation:fadeUp .7s ease 1.3s forwards}.player-top{display:flex;align-items:center;padding:.625rem .625rem .375rem;gap:.625rem}.player-cover{position:relative;width:44px;height:44px;border-radius:.375rem;overflow:hidden;background:var(--chip-bg-strong);flex-shrink:0;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.player-cover img{width:100%;height:100%;object-fit:cover}.player-meta{flex:1;min-width:0;padding-right:.25rem}.player-title-row{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin-bottom:2px}.player-song-title{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-heart{width:14px;height:14px;color:var(--text-muted);flex-shrink:0;cursor:pointer;transition:transform .15s ease,color .15s ease}.player-heart.liked{color:#1ed760;fill:#1ed760}.player-heart:hover{transform:scale(1.1)}.player-artist{font-size:10px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-progress-row{padding:0 .75rem .25rem;display:flex;align-items:center;gap:.5rem}.player-time{font-size:9px;font-weight:500;width:20px;color:var(--text-muted);font-variant-numeric:tabular-nums}.player-time.right{text-align:right}.progress-track{position:relative;flex:1;height:12px;display:flex;align-items:center;cursor:pointer}.progress-bg{width:100%;height:4px;background:var(--chip-bg-strong);border-radius:999px;overflow:hidden;pointer-events:none}.progress-fill{height:100%;background:var(--text-primary);border-radius:999px;width:0%;transition:background-color .15s ease}.progress-track:hover .progress-fill{background:#1ed760}.progress-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.progress-thumb{position:absolute;height:10px;width:10px;background:var(--text-primary);border-radius:999px;box-shadow:0 1px 3px #0006;transform:scale(0);transition:transform .15s ease;pointer-events:none;left:-5px}.progress-track:hover .progress-thumb{transform:scale(1)}.player-controls-row{display:flex;align-items:center;justify-content:space-between;padding:.25rem .75rem .75rem}.vol-group{position:relative;display:flex;align-items:center}.player-ctrl-btn{color:var(--text-muted);padding:.25rem;transition:color .15s ease}.player-ctrl-btn:hover{color:var(--text-primary)}.player-ctrl-btn svg{width:14px;height:14px}.vol-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%);height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:all .25s ease;padding-bottom:.5rem;z-index:20}.vol-group:hover .vol-popup{height:80px;opacity:1;pointer-events:auto}.vol-slider-box{background:var(--surface-card);border:1px solid var(--border);border-radius:999px;padding:.5rem 0;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}.vol-slider-inner{height:50px;display:flex;align-items:center;justify-content:center;width:1.5rem}.vol-input{transform:rotate(-90deg);width:46px;height:4px;background:var(--chip-bg-strong);border-radius:999px;cursor:pointer}.vol-input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--text-primary);border-radius:999px;cursor:pointer}.vol-input::-moz-range-thumb{width:10px;height:10px;background:var(--text-primary);border-radius:999px;border:none;cursor:pointer}.center-controls{display:flex;align-items:center;gap:.75rem}.play-btn{width:1.75rem;height:1.75rem;border-radius:999px;background:var(--inverse-bg);color:var(--inverse-text);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #0000004d;transition:transform .15s ease}.play-btn:hover{transform:scale(1.06)}.play-btn svg{width:14px;height:14px}.spacer-22{width:22px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}