: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: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--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-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--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);--breakpoint-sm: 480px;--breakpoint-md: 640px;--breakpoint-lg: 768px;--breakpoint-xl: 1024px;--breakpoint-2xl: 1200px;--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%);--radius-xs: 2px;--radius-pill: 50px;--radius-nav-pill: 48px;--radius-nav-link: 20px;--radius-social: 6px;--radius-tag: 12px;--blur-background: 100px;--blur-backdrop: 12px;--blur-backdrop-light: 10px;--blur-backdrop-medium: 8px;--blur-project-image: 2px;--nav-max-width: 400px;--nav-indicator-width: 20px;--nav-indicator-height: 2px;--content-max-width: 1200px;--hero-max-width: 700px;--hero-description-max-width: 500px;--project-scene-max-width: 700px;--project-image-max-width: 800px;--spotify-panel-min-height: 80px;--spotify-album-size: 48px;--particle-dot-size: 3px;--particle-small-size: 6px;--particle-medium-size: 10px;--particle-large-size: 16px;--music-visualizer-height: 200px;--gradient-large: 800px;--gradient-medium: 700px;--gradient-small: 600px;--gradient-mobile-large: 400px;--gradient-mobile-medium: 350px;--gradient-mobile-small: 300px;--panel-border-width: 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)}*,*: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;height:100vh}.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: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 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:-.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:-.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%}}: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)}}