:root{--color-foreground: #f9f8f6;--color-pink: #332c34ff;--color-blue: #c4efff;--color-bg: #faf8f5;--color-text: #2a2a2a;--color-text-light: #6a6a6a}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Mono,monospace;font-weight:300;font-style:normal;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;overflow-x:hidden;position:relative}#bubble-canvas{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:0;pointer-events:auto}main{position:relative;z-index:1;margin:0 auto;pointer-events:none}main *{pointer-events:auto}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4rem 0}.hero h1{font-size:clamp(3rem,8vw,6rem);color:var(--color-foreground)}.projects{padding:6rem 0;background:var(--color-foreground)}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;padding:0 2rem}.projects-item h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1rem;color:var(--color-text)}.projects-item p{font-size:clamp(.95rem,1.8vw,1.1rem);color:var(--color-text-light);line-height:1.7}.projects{padding:6rem 0}.projects h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:3rem;text-align:center;color:var(--color-text)}.projects-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1400px;margin:0 auto;padding:0 2rem;gap:2rem}@media (min-width: 1200px){.projects-list{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.projects-list{grid-template-columns:1fr;padding:0 1rem}}.project-card{background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:0;overflow:hidden;transition:all .3s ease;border:1px solid rgba(0,0,0,.05);position:relative;cursor:pointer}.project-card:hover{transform:translateY(-4px)}.project-card:hover .project-thumbnail{filter:none}.project-card:hover .project-content h3,.project-card:hover .project-content p{animation:chromatic .3s ease-in-out}.project-thumbnail{width:100%;height:200px;object-fit:cover;filter:grayscale(.3);transition:filter .3s ease}.project-content{padding:2rem}.project-content h3{font-size:clamp(1.3rem,2.5vw,1.6rem);margin-bottom:.75rem;color:var(--color-text)}.project-content p{font-size:clamp(.95rem,1.8vw,1.05rem);color:var(--color-text-light);margin-bottom:1.25rem;line-height:1.6}@keyframes chromatic{0%,to{text-shadow:0 0 0 transparent}25%{text-shadow:-2px 0 0 rgba(255,0,0,.5),2px 0 0 rgba(0,255,255,.5)}50%{text-shadow:-3px 0 0 rgba(255,0,0,.7),3px 0 0 rgba(0,255,255,.7)}75%{text-shadow:-2px 0 0 rgba(255,0,0,.5),2px 0 0 rgba(0,255,255,.5)}}.project-card{background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;transition:all .3s ease;border:1px solid rgba(0,0,0,.05)}.project-card h3{font-size:clamp(1.3rem,2.5vw,1.6rem);margin-bottom:.75rem;color:var(--color-text)}.project-card p{font-size:clamp(.95rem,1.8vw,1.05rem);color:var(--color-text-light);margin-bottom:1.25rem;line-height:1.6}.project-link{display:inline-block;font-size:1rem;color:var(--color-pink);text-decoration:none;font-weight:300;transition:transform .2s ease}.project-link:hover{transform:translate(4px)}footer{position:relative;z-index:1;text-align:center;padding:4rem 2rem;color:var(--color-text-light);font-size:clamp(.9rem,1.5vw,1rem);font-weight:300;font-style:italic}.fallback{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;z-index:0}.fallback.hidden{display:none}.fallback-bubble{width:400px;height:400px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c4efffcc,#f1a7fe99);animation:fallbackFloat 4s ease-in-out infinite,fallbackPulse 2s ease-in-out infinite;filter:blur(2px);box-shadow:0 0 60px #f1a7fe66,inset 0 0 60px #ffffff4d}@keyframes fallbackFloat{0%,to{transform:translate(0) scale(1)}50%{transform:translate(20px,-20px) scale(1.05)}}@keyframes fallbackPulse{0%,to{opacity:.8}50%{opacity:1}}@media (max-width: 768px){main{padding:0 1.5rem}.projects-grid{grid-template-columns:1fr;gap:2rem;padding:0 1rem}.projects{padding:3rem 0}.fallback-bubble{width:280px;height:280px}}@media (prefers-reduced-motion: reduce){*{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}}