:root{--color-bg-deep: #0a0b0f;--color-bg-dark: #1a1c24;--color-bg-mid: #2d3142;--color-bg-light: #4f5d75;--color-bg-accent: #8b956d;--color-surface-dark: #1e2328;--color-surface-base: #2a2f36;--color-surface-elevated: #363d47;--color-surface-light: #4a5568;--color-text-primary: #f7fafc;--color-text-secondary: #e2e8f0;--color-text-tertiary: #cbd5e0;--color-text-accent: #ffd700;--color-text-muted: #a0aec0;--color-accent-primary: #f6e05e;--color-accent-secondary: #ed8936;--color-accent-tertiary: #d69e2e;--color-border-light: rgba(247, 250, 252, .1);--color-border-medium: rgba(247, 250, 252, .2);--color-border-strong: rgba(247, 250, 252, .3);--color-border-accent: rgba(246, 224, 94, .4);--color-shadow-light: rgba(0, 0, 0, .2);--color-shadow-medium: rgba(0, 0, 0, .4);--color-shadow-strong: rgba(0, 0, 0, .6);--color-shadow-accent: rgba(246, 224, 94, .3);--color-particle-warm: rgba(246, 224, 94, .6);--color-particle-cool: rgba(139, 149, 109, .4);--color-particle-neutral: rgba(247, 250, 252, .3);--color-particle-primary: var(--color-particle-warm);--color-particle-secondary: var(--color-particle-cool);--color-particle-tertiary: var(--color-particle-neutral);--space-1: clamp(.25rem, .2rem + .2vw, .3rem);--space-2: clamp(.5rem, .4rem + .4vw, .6rem);--space-3: clamp(.75rem, .6rem + .6vw, .9rem);--space-4: clamp(1rem, .8rem + .8vw, 1.2rem);--space-5: clamp(1.25rem, 1rem + 1vw, 1.5rem);--space-6: clamp(1.5rem, 1.2rem + 1.2vw, 1.8rem);--space-8: clamp(2rem, 1.6rem + 1.6vw, 2.4rem);--space-10: clamp(2.5rem, 2rem + 2vw, 3rem);--space-12: clamp(3rem, 2.4rem + 2.4vw, 3.6rem);--space-16: clamp(4rem, 3.2rem + 3.2vw, 4.8rem);--space-20: clamp(5rem, 4rem + 4vw, 6rem);--space-24: clamp(6rem, 4.8rem + 4.8vw, 7.2rem);--space-32: clamp(8rem, 6.4rem + 6.4vw, 9.6rem);--breakpoint-xs: 360px;--breakpoint-sm: 480px;--breakpoint-md: 640px;--breakpoint-lg: 768px;--breakpoint-xl: 1024px;--breakpoint-2xl: 1200px;--breakpoint-3xl: 1440px;--container-sm: 20rem;--container-md: 28rem;--container-lg: 32rem;--container-xl: 36rem;--container-2xl: 42rem;--layer-background: -1;--layer-base: 0;--layer-content: 1;--layer-elevated: 10;--layer-overlay: 20;--layer-modal: 30;--layer-tooltip: 40;--layer-navigation: 50;--layer-particles: 5;--radius-xs: clamp(2px, 1px + .5vw, 3px);--radius-sm: clamp(4px, 2px + 1vw, 6px);--radius-md: clamp(8px, 4px + 2vw, 12px);--radius-lg: clamp(12px, 6px + 3vw, 18px);--radius-xl: clamp(16px, 8px + 4vw, 24px);--radius-full: 9999px;--radius-pill: 50px;--radius-nav-pill: 48px;--radius-nav-link: 20px;--radius-social: 6px;--radius-tag: 12px;--blur-subtle: 1px;--blur-light: 2px;--blur-medium: 4px;--blur-strong: 8px;--dof-near: 0px;--dof-mid: 2px;--dof-far: 6px;--glow-subtle: 0 0 10px;--glow-medium: 0 0 20px;--glow-strong: 0 0 30px;--color-bg-primary: var(--color-bg-deep);--color-bg-secondary: var(--color-bg-dark);--color-bg-radial-center: var(--color-bg-light);--color-bg-radial-mid: var(--color-bg-mid);--color-bg-radial-outer: var(--color-bg-dark);--color-bg-radial-edge: var(--color-bg-deep);--color-surface: var(--color-surface-base);--color-surface-elevated: var(--color-surface-elevated);--color-border: var(--color-border-medium);--color-border-strong: var(--color-border-strong);--color-block-bg: var(--color-surface-base);--color-block-border: var(--color-border-accent);--color-block-shadow: var(--color-shadow-medium);--color-link: var(--color-accent-primary);--color-link-hover: var(--color-accent-secondary);--duration-fast: .15s;--duration-medium: .3s;--duration-slow: .6s;--ease-out: cubic-bezier(.25, .46, .45, .94);--ease-in-out: cubic-bezier(.645, .045, .355, 1);--color-social-hover-bg: rgba(246, 224, 94, .15);--color-social-hover-bg-subtle: rgba(246, 224, 94, .05);--color-social-hover-bg-home: rgba(0, 0, 0, .05);--color-nav-hover-bg: rgba(246, 224, 94, .1);--color-nav-active-bg: rgba(246, 224, 94, .15);--color-nav-active-indicator: var(--color-accent-primary);--color-contrast-high: var(--color-text-primary);--color-contrast-medium: var(--color-text-secondary);--color-contrast-low: var(--color-text-tertiary);--focus-outline-color: var(--color-accent-primary);--focus-outline-width: 2px;--focus-outline-offset: 2px;--focus-outline-style: solid;--transform-hover-lift: translateY(-1px);--transform-hover-lift-strong: translateY(-2px);--transform-center: translate(-50%, -50%);--blur-background: 100px;--blur-backdrop: 12px;--blur-backdrop-light: 10px;--blur-backdrop-medium: 8px;--blur-project-image: 2px;--nav-max-width: clamp(300px, 80vw, 400px);--nav-indicator-width: 20px;--nav-indicator-height: 2px;--content-max-width: clamp(320px, 90vw, 1200px);--hero-max-width: clamp(280px, 85vw, 700px);--hero-description-max-width: clamp(240px, 80vw, 500px);--project-scene-max-width: clamp(300px, 85vw, 700px);--project-image-max-width: clamp(280px, 90vw, 800px);--spotify-panel-min-height: clamp(60px, 15vw, 80px);--spotify-album-size: clamp(40px, 10vw, 48px);--particle-dot-size: clamp(2px, .5vw, 3px);--particle-small-size: clamp(4px, 1vw, 6px);--particle-medium-size: clamp(8px, 2vw, 10px);--particle-large-size: clamp(12px, 3vw, 16px);--music-visualizer-height: clamp(120px, 25vw, 200px);--gradient-large: clamp(400px, 80vw, 800px);--gradient-medium: clamp(350px, 70vw, 700px);--gradient-small: clamp(300px, 60vw, 600px);--gradient-mobile-large: clamp(300px, 90vw, 400px);--gradient-mobile-medium: clamp(280px, 85vw, 350px);--gradient-mobile-small: clamp(250px, 80vw, 300px);--panel-border-width: clamp(1px, .2vw, 2px);--panel-border-style: solid;--panel-border-color: var(--color-border-accent);--panel-inner-border: 1px solid var(--color-border-light);--panel-shadow-base: 0 4px 12px var(--color-shadow-medium), 0 2px 4px var(--color-shadow-light), inset 0 1px 0 rgba(246, 224, 94, .1);--panel-shadow-elevated: 0 8px 24px var(--color-shadow-strong), 0 4px 8px var(--color-shadow-medium), inset 0 1px 0 rgba(246, 224, 94, .15);--tilt-shift-near: blur(0px) brightness(1.05);--tilt-shift-mid: blur(0px) brightness(1);--tilt-shift-far: blur(.5px) brightness(.98);--atmospheric-glow: 0 0 20px rgba(246, 224, 94, .3), 0 0 40px rgba(246, 224, 94, .1);--subtle-glow: 0 0 10px rgba(246, 224, 94, .2);--home-max-width: clamp(320px, 95vw, 1000px);--home-gap: clamp(var(--space-4), 4vw, var(--space-12));--home-padding: clamp(var(--space-3), 3vw, var(--space-8));--nav-clearance-xs: 80px;--nav-clearance-sm: 100px;--nav-clearance-md: 120px;--nav-clearance-lg: 160px;--nav-clearance-xl: 160px;--nav-clearance-2xl: 180px;--nav-clearance-small-height-xs: 70px;--nav-clearance-small-height-sm: 90px;--nav-clearance-small-height-md: 110px;--nav-clearance-small-height-lg: 140px;--nav-clearance-tiny-height-xs: 60px;--nav-clearance-tiny-height-sm: 80px;--nav-clearance-tiny-height-md: 100px;--nav-clearance-landscape: 70px;--nav-clearance-minimal: 50px;--grid-gap: clamp(var(--space-4), 3vw, var(--space-8));--grid-margin: clamp(var(--space-4), 5vw, var(--space-6));--panel-padding-sm: clamp(var(--space-3), 3vw, var(--space-4));--panel-padding-md: clamp(var(--space-4), 4vw, var(--space-6));--panel-padding-lg: clamp(var(--space-6), 5vw, var(--space-8));--panel-padding-xl: clamp(var(--space-8), 6vw, var(--space-12))}@supports (container-type: inline-size){.container-responsive{container-type:inline-size}}.hidden-mobile{display:none}.hidden-tablet,.hidden-desktop{display:block}@media (min-width: var(--breakpoint-md)){.hidden-mobile{display:block}.hidden-tablet{display:none}}@media (min-width: var(--breakpoint-xl)){.hidden-desktop{display:none}.hidden-tablet{display:block}}.text-center-mobile{text-align:center}@media (min-width: var(--breakpoint-md)){.text-center-mobile{text-align:left}}.flex-col-mobile{flex-direction:column}@media (min-width: var(--breakpoint-md)){.flex-col-mobile{flex-direction:row}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100vh;line-height:var(--leading-normal);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-secondary);background-color:var(--color-bg-primary)}ul,ol{list-style:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}a{color:var(--color-link);transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--color-link-hover)}a:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:2px}code,pre{font-family:var(--font-mono);font-size:var(--text-sm)}pre{padding:var(--space-4);background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:4px;overflow-x:auto}code{padding:var(--space-1) var(--space-2);background-color:var(--color-bg-secondary);border-radius:2px}pre code{padding:0;background-color:transparent}blockquote{padding-left:var(--space-6);border-left:3px solid var(--color-accent-primary);font-style:italic;color:var(--color-text-tertiary)}hr{border:none;border-top:1px solid var(--color-border);margin:var(--space-8) 0}.no-scroll{overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skip-to-content{position:absolute;top:var(--space-4);left:var(--space-4);padding:var(--space-3) var(--space-4);background-color:var(--color-surface-elevated);color:var(--color-text-primary);font-weight:var(--weight-semibold);border:2px solid var(--color-accent-primary);border-radius:4px;z-index:9999;transform:translateY(-200%);transition:transform var(--duration-fast) var(--ease-out);text-decoration:none}.skip-to-content:focus{transform:translateY(0);outline:3px solid var(--color-accent-primary);outline-offset:2px}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:2px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:2px}[role=button]:focus-visible,[role=link]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:2px}:focus:not(:focus-visible){outline:none}.panel{background:var(--color-surface-base);border:var(--panel-border-width) var(--panel-border-style) var(--panel-border-color);box-shadow:var(--panel-shadow-base);position:relative;overflow:hidden;border-radius:var(--radius-md)}.panel:before{content:"";position:absolute;inset:4px;border:var(--panel-inner-border);border-radius:calc(var(--radius-md) - 4px);pointer-events:none;z-index:1}.panel:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(246,224,94,.05) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(139,149,109,.03) 0%,transparent 50%);opacity:.6;pointer-events:none;mix-blend-mode:overlay;z-index:2}.panel--elevated{background:var(--color-surface-elevated);border-color:var(--color-accent-primary);box-shadow:var(--panel-shadow-elevated);filter:var(--tilt-shift-near);padding:2em}.panel--elevated:before{border-color:#f6e05e4d}.panel--elevated:after{background:radial-gradient(circle at 25% 25%,rgba(246,224,94,.08) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(139,149,109,.05) 0%,transparent 50%),var(--atmospheric-glow)}.panel>:global(*){position:relative;z-index:3}.depth-near{filter:var(--tilt-shift-near);z-index:var(--layer-elevated)}.depth-mid{filter:var(--tilt-shift-mid);z-index:var(--layer-content)}.depth-far{filter:var(--tilt-shift-far);z-index:var(--layer-base)}.atmospheric-glow{box-shadow:var(--atmospheric-glow)}.subtle-glow{box-shadow:var(--subtle-glow)}:root{--font-display: "Crimson Text", "Georgia", serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "Fira Code", "Consolas", monospace;--text-xs: clamp(.7rem, .65rem + .2vw, .75rem);--text-sm: clamp(.8rem, .75rem + .25vw, .875rem);--text-base: clamp(.9rem, .85rem + .3vw, 1rem);--text-lg: clamp(1rem, .95rem + .35vw, 1.125rem);--text-xl: clamp(1.1rem, 1rem + .5vw, 1.25rem);--text-2xl: clamp(1.3rem, 1.2rem + .75vw, 1.5rem);--text-3xl: clamp(1.6rem, 1.4rem + 1vw, 1.875rem);--text-4xl: clamp(1.9rem, 1.7rem + 1.25vw, 2.25rem);--text-5xl: clamp(2.4rem, 2.1rem + 1.5vw, 3rem);--text-6xl: clamp(2.8rem, 2.4rem + 2vw, 3.75rem);--leading-tight: clamp(1.1, 1.1 + .1vw, 1.2);--leading-normal: clamp(1.4, 1.4 + .1vw, 1.5);--leading-relaxed: clamp(1.6, 1.6 + .15vw, 1.75);--weight-light: 300;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-black: 900}.text-display-1{font-family:var(--font-display);font-size:var(--text-6xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text-primary);text-shadow:0 2px 4px var(--color-shadow-light);letter-spacing:clamp(-.03em,-.02em + -.01vw,-.02em)}.text-display-2{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text-primary);text-shadow:0 1px 3px var(--color-shadow-light);letter-spacing:clamp(-.02em,-.015em + -.005vw,-.01em)}.text-display-3{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:var(--weight-semibold);line-height:var(--leading-tight);color:var(--color-text-primary);text-shadow:0 1px 2px var(--color-shadow-light)}.text-heading-1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text-primary);text-shadow:0 1px 2px var(--color-shadow-light)}.text-heading-2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-normal);color:var(--color-text-primary)}.text-heading-3{font-family:var(--font-body);font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-normal);color:var(--color-text-primary)}.text-body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-normal);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}.text-body-large{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--weight-normal);line-height:var(--leading-relaxed);color:var(--color-text-secondary)}.text-body-small{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-normal);line-height:var(--leading-normal);color:var(--color-text-tertiary)}.text-accent{color:var(--color-accent-primary);text-shadow:0 0 8px rgba(246,224,94,.3)}.text-accent-secondary{color:var(--color-accent-secondary);text-shadow:0 0 6px rgba(237,137,54,.3)}.text-mono{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-normal);line-height:var(--leading-normal);color:var(--color-text-secondary);background-color:var(--color-surface-dark);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.text-link{color:var(--color-accent-primary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out),text-shadow var(--duration-fast) var(--ease-out);position:relative}.text-link:hover{color:var(--color-accent-secondary);text-shadow:0 0 8px rgba(246,224,94,.4)}.text-link:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px;border-radius:var(--radius-sm)}.text-atmospheric{background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-accent-primary) 50%,var(--color-text-primary) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 200%;animation:atmosphericShimmer 3s ease-in-out infinite}@keyframes atmosphericShimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.text-responsive-sm{font-size:var(--text-sm)}.text-responsive-base{font-size:var(--text-base)}.text-responsive-lg{font-size:var(--text-lg)}.text-responsive-xl{font-size:var(--text-xl)}.text-responsive-2xl{font-size:var(--text-2xl)}.text-responsive-3xl{font-size:var(--text-3xl)}.leading-responsive-tight{line-height:var(--leading-tight)}.leading-responsive-normal{line-height:var(--leading-normal)}.leading-responsive-relaxed{line-height:var(--leading-relaxed)}@media (max-width: var(--breakpoint-xs)){.text-display-1,.text-display-2,.text-display-3{line-height:1.2;letter-spacing:-.01em}.text-body,.text-body-large,.text-body-small{line-height:1.6}}@media (min-width: var(--breakpoint-2xl)){.text-display-1{letter-spacing:-.03em}.text-display-2{letter-spacing:-.02em}.text-heading-1,.text-heading-2{letter-spacing:-.01em}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.text-display-1,.text-display-2,.text-display-3{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--duration-fast: .2s;--duration-medium: .4s;--duration-slow: .6s;--duration-slower: 1s;--duration-cinematic: 1.5s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-smooth: cubic-bezier(.25, .1, .25, 1);--ease-atmospheric: cubic-bezier(.16, 1, .3, 1);--ease-cinematic: cubic-bezier(.25, .46, .45, .94);--parallax-far: .2;--parallax-mid: .5;--parallax-near: .8;--parallax-foreground: 1}@keyframes atmospheric-fade-in{0%{opacity:0;transform:translateY(.5rem) scale(.98);filter:blur(1px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0px)}}@keyframes gentle-float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-3px) translate(1px)}50%{transform:translateY(-6px) translate(-1px)}75%{transform:translateY(-3px) translate(1px)}}@keyframes atmospheric-glow{0%,to{box-shadow:var(--subtle-glow)}50%{box-shadow:var(--atmospheric-glow)}}@keyframes depth-entrance{0%{opacity:0;transform:translateY(1rem) scale(.95);filter:var(--tilt-shift-far)}to{opacity:1;transform:translateY(0) scale(1);filter:var(--tilt-shift-near)}}@keyframes panel-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-atmospheric-fade{animation:atmospheric-fade-in var(--duration-slow) var(--ease-atmospheric)}.animate-gentle-float{animation:gentle-float 4s var(--ease-smooth) infinite}.animate-atmospheric-glow{animation:atmospheric-glow 3s var(--ease-smooth) infinite}.animate-depth-entrance{animation:depth-entrance var(--duration-cinematic) var(--ease-cinematic)}.animate-panel-shimmer:before{background:linear-gradient(90deg,transparent,rgba(246,224,94,.1),transparent);background-size:200% 100%;animation:panel-shimmer 2s ease-in-out infinite}.animate-stagger-1{animation-delay:.1s}.animate-stagger-2{animation-delay:.2s}.animate-stagger-3{animation-delay:.3s}.animate-stagger-4{animation-delay:.4s}.transition-atmospheric{transition:opacity var(--duration-medium) var(--ease-atmospheric),transform var(--duration-medium) var(--ease-atmospheric),filter var(--duration-medium) var(--ease-atmospheric)}.transition-depth{transition:filter var(--duration-slow) var(--ease-cinematic),transform var(--duration-slow) var(--ease-cinematic)}.transition-glow{transition:box-shadow var(--duration-medium) var(--ease-smooth),text-shadow var(--duration-medium) var(--ease-smooth)}.transition-panel{transition:background-color var(--duration-medium) var(--ease-atmospheric),border-color var(--duration-medium) var(--ease-atmospheric),box-shadow var(--duration-medium) var(--ease-atmospheric)}.hover-lift{transition:transform var(--duration-fast) var(--ease-out)}.hover-lift:hover{transform:translateY(-2px)}.hover-glow{transition:box-shadow var(--duration-medium) var(--ease-smooth),filter var(--duration-medium) var(--ease-smooth)}.hover-glow:hover{box-shadow:var(--atmospheric-glow);filter:brightness(1.05)}.hover-depth{transition:filter var(--duration-medium) var(--ease-atmospheric)}.hover-depth:hover{filter:var(--tilt-shift-near)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}[data-parallax],[data-mouse-reactive]{transform:none!important}.animate-gentle-float,.animate-atmospheric-glow{animation:none!important}.hover-lift:hover{transform:none}.hover-glow:hover{box-shadow:var(--subtle-glow)}}