*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #08081a;--text: #ffffff;--text-secondary: rgba(255, 255, 255, .6);--text-muted: rgba(255, 255, 255, .45);--accent: #b38bff}html,body,#root{width:100%;min-height:100dvh}html{background:var(--bg)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}.app{background:var(--bg)}.site-credits{padding-bottom:calc(3vh + env(safe-area-inset-bottom))}.app{width:100%;min-height:100vh;position:relative;padding-bottom:8vh}.hero-header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vh 16px 5vh;text-align:center;z-index:1}.hero-header .logo-tagline{position:relative;z-index:1}.hero-stars{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.star-layer{position:absolute;top:0;right:0;bottom:0;left:0;will-change:transform}.hero-stars:before,.hero-stars:after{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(700px 560px at -10% 10%,rgba(255,220,100,.09),transparent 75%),radial-gradient(800px 620px at 110% 0%,rgba(120,180,255,.06),transparent 75%),radial-gradient(750px 600px at 105% 110%,rgba(255,140,180,.06),transparent 75%);animation:nebula-drift 22s ease-in-out infinite alternate}.hero-stars:after{animation-duration:34s;animation-direction:alternate-reverse;opacity:.6}@keyframes nebula-drift{0%{transform:translate(0) scale(1)}to{transform:translate(-4%,3%) scale(1.1)}}.hero-star{position:absolute;width:var(--s, 2px);height:var(--s, 2px);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff9;opacity:0;animation:star-twinkle var(--twinkle, 4s) ease-in-out infinite,star-drift var(--drift, 40s) ease-in-out infinite alternate;animation-delay:var(--delay, 0s),var(--delay, 0s)}@keyframes star-twinkle{0%,to{opacity:.2}50%{opacity:1}}@keyframes star-drift{0%{transform:translate(0)}to{transform:translate(var(--dx, -40px),var(--dy, 20px))}}.logo{font-family:var(--title-font, "Permanent Marker", "Inter", cursive);font-weight:400;font-size:clamp(4rem,20vw,10rem);line-height:1;letter-spacing:.01em;margin:0;position:relative;max-width:100%;z-index:1}.logo-text{position:relative;display:inline-block;padding:.16em .24em;background:linear-gradient(92deg,#ffd84a,#fff35f,#ffee7a,#ffd84a,#ffc533);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:calc(var(--logo-chroma-offset, 3px) * -1) 0 rgba(255,120,60,var(--logo-chroma-alpha, .55)),var(--logo-chroma-offset, 3px) 0 rgba(255,220,100,var(--logo-chroma-alpha, .55));filter:drop-shadow(0 0 var(--logo-glow-inner-blur, 8px) rgba(255,220,80,var(--logo-glow-inner-alpha, .5))) drop-shadow(0 0 var(--logo-glow-outer-blur, 18px) rgba(255,200,60,var(--logo-glow-outer-alpha, .3)));animation:refract-shift var(--logo-shift-speed, 9s) ease-in-out infinite}.sparkle{position:absolute;border-radius:50%;background:#fff;opacity:0;pointer-events:none;animation-name:sparkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes refract-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.logo-tagline{margin-top:18px;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}.about{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:2vh 24px}.about h2{font-family:var(--about-font, "Inter", sans-serif);font-size:clamp(1.5rem,3.2vw,2rem);font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-bottom:20px}.about-heading .hi{display:inline-block;transform-origin:75% 100%;animation:hi-wave var(--hi-wave-speed, 2.6s) ease-in-out infinite}@keyframes hi-wave{0%,60%,to{transform:rotate(0)}10%{transform:rotate(calc(var(--hi-wave-angle, 14deg) * -1))}20%{transform:rotate(calc(var(--hi-wave-angle, 14deg) * .86))}30%{transform:rotate(calc(var(--hi-wave-angle, 14deg) * -.71))}40%{transform:rotate(calc(var(--hi-wave-angle, 14deg) * .57))}50%{transform:rotate(calc(var(--hi-wave-angle, 14deg) * -.29))}}.about-heading .name{position:relative;display:inline-block;white-space:nowrap;padding:0 2px}.about-heading .name:before{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:var(--kymer-highlight-height, .45em);background:linear-gradient(92deg,color-mix(in srgb,var(--kymer-highlight-color, #f472b6) calc(var(--kymer-highlight-alpha, .55) * 60%),transparent),color-mix(in srgb,var(--kymer-highlight-color, #f472b6) calc(var(--kymer-highlight-alpha, .55) * 100%),transparent),color-mix(in srgb,var(--kymer-highlight-color, #f472b6) calc(var(--kymer-highlight-alpha, .55) * 60%),transparent));background-size:200% 100%;border-radius:4px;z-index:-1;animation:name-sweep var(--kymer-sweep-speed, 4s) ease-in-out infinite}@keyframes name-sweep{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.about-heading .brand{color:inherit}.about .lead{font-size:1.05rem;line-height:1.65;color:var(--text-secondary);margin-bottom:28px}.work{list-style:none;display:grid;gap:14px;margin-bottom:24px}.work li{padding:16px 18px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);font-size:.98rem;line-height:1.55;color:var(--text-secondary)}.work li strong{color:var(--text);font-weight:600}.cv-link{font-size:.95rem;color:var(--text-muted)}.cv-link a{position:relative;display:inline-block;text-decoration:none;font-weight:500;background:linear-gradient(92deg,#ffd84a,#fff6a0,#ffee7a,#ffd84a,#ffc533);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 12px rgba(255,220,90,.45),0 0 28px rgba(255,200,60,.25);border-bottom:1px solid rgba(255,216,74,.45);animation:link-shimmer 4s ease-in-out infinite;transition:filter .2s,border-color .2s}.cv-link a:hover{filter:brightness(1.15);border-bottom-color:#fff6a0cc}@keyframes link-shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes sparkle{0%,to{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.2)}55%{opacity:1;transform:scale(1)}}.pig-section{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:4vh 24px 2vh;text-align:center}.pig-section h2{font-family:var(--pig-font, "Audiowide", "Inter", sans-serif);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:.04em;line-height:1.3;margin-bottom:24px}.pig-heading{display:inline-block;background:linear-gradient(92deg,#ffd84a,#ffe27a 30%,#ffb87a,#ff9ec4 80%,#ff7eb3);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(255,200,100,.25),0 0 36px rgba(255,130,180,.12);animation:refract-shift 8s ease-in-out infinite}.input-touch{display:none}.input-mouse{display:inline}@media(pointer:coarse){.input-mouse{display:none}.input-touch{display:inline}}.canvas-container{position:relative;width:100%;max-width:480px;aspect-ratio:1 / .72;margin:0 auto;overflow:hidden;clip-path:inset(0)}.canvas-square{width:100%;aspect-ratio:1 / 1}.canvas-container canvas{touch-action:pan-y!important}.debug-toggle{position:fixed;top:10px;right:10px;z-index:200;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#00000073;color:#ffffffd9;font-size:14px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s,color .15s}.debug-toggle:hover{background:#000000b3;color:#fff}.debug-menu{position:fixed;top:10px;right:10px;z-index:200;width:320px;max-height:calc(100vh - 20px);overflow-y:auto;border-radius:10px;background:#0c0c1aeb;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;box-shadow:0 12px 40px #00000080}.debug-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;background:#0c0c1af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1}.debug-header strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#ffffffd9}.debug-header-actions{display:flex;gap:6px;align-items:center}.debug-reset,.debug-close{border:1px solid rgba(255,255,255,.12);background:transparent;color:#ffffffb3;padding:3px 8px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;transition:background .15s,color .15s}.debug-close{width:22px;height:22px;padding:0;font-size:14px;line-height:1}.debug-reset:hover,.debug-close:hover{background:#ffffff14;color:#fff}.debug-section{border-bottom:1px solid rgba(255,255,255,.05)}.debug-section:last-child{border-bottom:none}.debug-section-head{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;color:#ffffffd9;padding:8px 12px;cursor:pointer;font-family:inherit;font-size:11px;text-align:left}.debug-section-head:hover{background:#ffffff0a}.debug-section-head strong{font-weight:600;letter-spacing:.04em}.debug-section-body{padding:4px 12px 10px;display:flex;flex-direction:column;gap:6px}.debug-row{display:grid;grid-template-columns:1fr 110px 38px;align-items:center;gap:8px;font-size:10.5px;color:#ffffffb3}.debug-row-toggle{grid-template-columns:1fr auto}.debug-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.debug-row input[type=range]{width:100%;accent-color:#ffd84a}.debug-row input[type=checkbox]{accent-color:#ffd84a;width:14px;height:14px}.debug-value{text-align:right;font-variant-numeric:tabular-nums;color:#ffffff8c}.debug-select{grid-column:2 / span 2;background:#ffffff0f;color:#ffffffd9;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:3px 6px;font-size:10.5px;font-family:inherit;width:100%}.debug-select:focus{outline:none;border-color:#ffd84a99}.debug-fps{font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.04em;padding:3px 7px;border-radius:4px;background:#ffffff0a;margin-right:2px}.contact-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#040410b8;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:fade-in .18s ease-out both}.contact-backdrop.is-closing{animation:fade-out .32s ease-out both;pointer-events:none}.contact-backdrop.is-sending{animation:fade-out .4s ease-out .05s both;pointer-events:none}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.contact-form{position:relative;width:min(460px,100%);background:#141428eb;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 28px 24px;color:var(--text);box-shadow:0 20px 80px #00000080,0 0 60px #ffdc5014;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;backface-visibility:hidden}.contact-form.is-sending{animation:form-fade-out .45s ease-out .25s both;pointer-events:none}.contact-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-secondary);font-size:1.4rem;line-height:1;cursor:pointer;transition:color .15s,background .15s}.contact-close:hover{color:#fff;background:#ffffff14}.contact-title{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}.contact-sub{font-size:.92rem;color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.contact-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.contact-field>span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.contact-field input,.contact-field textarea{font-family:inherit;font-size:.95rem;color:var(--text);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;outline:none;resize:vertical;transition:border-color .15s,background .15s}.contact-field textarea{min-height:110px;line-height:1.5}.contact-field input::placeholder,.contact-field textarea::placeholder{color:#ffffff59}.contact-field input:focus,.contact-field textarea:focus{border-color:#ffd84a80;background:#ffffff12}.contact-send{position:relative;width:100%;padding:13px 20px;border-radius:100px;border:none;margin-top:6px;background:linear-gradient(92deg,#ffd84a,#ffc533);color:#1a1405;font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 24px #ffc83c40;transition:filter .2s,box-shadow .2s,transform .15s;isolation:isolate}.send-clip{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}.contact-send:hover{filter:brightness(1.12);box-shadow:0 6px 32px #ffdc508c}.contact-send:active{transform:translateY(1px)}.contact-send:disabled{opacity:.6;cursor:default}.send-label{position:relative;z-index:2}.send-sheen{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translate(-130%);transition:transform .7s ease;pointer-events:none;z-index:1}.contact-send:hover .send-sheen{transform:translate(130%)}.send-sparkles{position:absolute;top:-22px;right:-16px;bottom:-22px;left:-16px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:3}.contact-send:hover .send-sparkles{opacity:1}.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none}.contact-envelope{position:fixed;left:50%;top:50%;font-size:80px;z-index:200;pointer-events:none;color:#fff;filter:drop-shadow(0 0 16px rgba(255,220,80,.6));animation:envelope-fly 1.8s cubic-bezier(.5,0,.75,.6) forwards}@keyframes envelope-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)}28%{opacity:1;transform:translate(-40%,-55%) scale(1.05) rotate(8deg)}to{opacity:1;transform:translate(120vw,-90vh) scale(.4) rotate(45deg);filter:drop-shadow(0 0 28px rgba(255,255,255,.95))}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes form-fade-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(14px) scale(.92)}}.speech-bubble{position:relative;background:#141432d9;color:#fff;padding:8px 18px 10px;border-radius:999px;font-family:var(--bubble-font, "Bagel Fat One", "Outfit", sans-serif);font-size:clamp(.7rem,2.5vw,1rem);font-weight:400;line-height:1.25;letter-spacing:.3px;width:max-content;max-width:calc(100vw - 32px);text-align:center;border:2px solid rgba(255,255,255,.15);filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));transform-origin:50% 0%;pointer-events:none;white-space:nowrap;animation-fill-mode:both}.speech-bubble{will-change:transform,opacity;backface-visibility:hidden;transform-origin:50% 0%}.speech-bubble.enter-swing{animation:bubbleSwingIn var(--bubble-enter-duration, .5s) ease-out both}.speech-bubble.enter-pop{animation:bubblePopIn var(--bubble-enter-duration, .5s) ease-out both}.speech-bubble.enter-drop{animation:bubbleDropIn var(--bubble-enter-duration, .5s) ease-out both}.speech-bubble.enter-slide{animation:bubbleSlideIn var(--bubble-enter-duration, .5s) ease-out both}.speech-bubble.enter-wobble{animation:bubbleWobbleIn var(--bubble-enter-duration, .5s) ease-out both}.bubble-letter{display:inline-block;opacity:0;animation:letterTypeIn .22s ease-out both;animation-delay:var(--delay, 0s)}@keyframes letterTypeIn{0%{opacity:0}to{opacity:1}}@keyframes bubbleSwingIn{0%{opacity:0;transform:translateY(-14px) rotate(-6deg) scale(.96)}60%{opacity:1;transform:translateY(2px) rotate(2.5deg) scale(1.02)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes bubblePopIn{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes bubbleDropIn{0%{opacity:0;transform:translateY(-40px) scale(.85)}70%{opacity:1;transform:translateY(6px) scale(1.04)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes bubbleSlideIn{0%{opacity:0;transform:translate(-30px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes bubbleWobbleIn{0%{opacity:0;transform:scale(.5) rotate(-12deg)}40%{opacity:1;transform:scale(1.1) rotate(8deg)}70%{transform:scale(.97) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(0)}}@media(max-width:600px){.hero-header{padding:5vh 28px 4vh}.about{padding:1vh 28px 2vh}.pig-section{padding:3vh 28px 2vh}.site-credits{padding-left:28px;padding-right:28px}.canvas-container{max-height:50vh}.hero-stars:before,.hero-stars:after{background:radial-gradient(800px 620px at 110% 0%,rgba(120,180,255,.06),transparent 75%),radial-gradient(750px 600px at 105% 110%,rgba(255,140,180,.06),transparent 75%)}}.site-credits{text-align:center;padding:2.5vh 20px 3vh;font-size:.78rem;color:#ffffff52;letter-spacing:.02em}.site-credits a{color:#ffffff80;text-decoration:underline;text-decoration-color:#fff3;text-underline-offset:2px;transition:color .15s}.site-credits a:hover{color:#ffdc64cc}