:root { --ink: #080612; --violet: #805cff; --pink: #ff68c7; --cyan: #62e7ff; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); }
body { color: white; font-family: "Trebuchet MS", "Segoe UI", sans-serif; overflow: hidden; }
button { font: inherit; }

.scene { --mouse-x: 50%; --mouse-y: 50%; --tilt-x: 0deg; --tilt-y: 0deg; --drift-x: 0px; --drift-y: 0px; position: fixed; inset: 0; isolation: isolate; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 48%,rgba(40,25,91,.8) 0,rgba(11,8,28,.86) 26%,transparent 58%),linear-gradient(145deg,#05040b 0%,#0b0819 52%,#05040c 100%); perspective: 900px; }
.scene::before { content: ""; position: absolute; inset: -25%; z-index: -4; opacity: .6; background-image: linear-gradient(rgba(151,116,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(151,116,255,.045) 1px,transparent 1px); background-size: 52px 52px; transform: perspective(500px) rotateX(58deg) translateY(37%) scale(1.3); mask-image: radial-gradient(ellipse,black 0%,transparent 62%); }
.aurora { position: absolute; z-index: -3; width: 52vw; height: 52vw; border-radius: 50%; filter: blur(90px); opacity: .16; animation: breathe 9s ease-in-out infinite alternate; }
.aurora-one { top: -32vw; left: -15vw; background: var(--violet); }
.aurora-two { right: -23vw; bottom: -34vw; background: var(--pink); animation-delay: -4s; }
.cursor-light { position: absolute; z-index: -1; left: var(--mouse-x); top: var(--mouse-y); width: min(54vw,680px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle,rgba(126,93,255,.2) 0,rgba(255,87,199,.08) 28%,transparent 67%); filter: blur(8px); transition: left .12s linear,top .12s linear; }
.heart { --blush: 0; position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform .18s ease-out; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px,3vh,30px); color: rgba(218,209,255,.55); font-size: 9px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; }
.eyebrow b { font: inherit; white-space: nowrap; }
.eyebrow span { width: 24px; height: 1px; background: currentColor; }
.boop-count { min-height: 11px; transition: opacity .3s ease,transform .3s ease; }
.boop-count.is-hidden { opacity: 0; transform: translateY(5px); }
.uwu { position: relative; appearance: none; border: 0; padding: 0 .08em .14em; color: transparent; cursor: pointer; background: transparent; font-family: "Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-size: clamp(110px,22vw,310px); font-weight: 900; line-height: .72; letter-spacing: -.12em; transform-style: preserve-3d; filter: drop-shadow(0 26px 42px rgba(14,4,34,.75)); transition: transform .35s cubic-bezier(.2,.9,.3,1.4),filter .35s ease; animation: hover 5s ease-in-out infinite; }
.uwu:hover { filter: drop-shadow(0 30px 54px rgba(255,88,200,.28)); }
.uwu:active { transform: scale(.91) translateZ(15px); }
.uwu:focus-visible { outline: 2px solid var(--cyan); outline-offset: 22px; border-radius: 30%; }
.uwu-face,.uwu-shadow { display: block; white-space: nowrap; }
.uwu-face { position: relative; z-index: 2; color: #fff; background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),#fff 0,#e8dfff 22%,transparent 48%),linear-gradient(155deg,#fff 8%,#cdbaff 34%,#9f7eff 52%,#ff91d3 78%,#fff 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); text-shadow: 0 0 12px rgba(255,255,255,.35),0 0 32px rgba(147,102,255,.45),0 0 74px rgba(255,81,195,.28); }
.uwu-shadow { position: absolute; inset: .065em auto auto .035em; z-index: 0; color: #7d4cff; -webkit-text-stroke: .035em #4d238d; opacity: .55; filter: blur(1px); transform: translateZ(-30px); }
.blush { position: absolute; z-index: 4; top: 58%; width: .26em; height: .105em; border-radius: 50%; pointer-events: none; opacity: calc(var(--blush) * .92); background: radial-gradient(ellipse,rgba(255,73,160,.95) 0%,rgba(255,92,179,.7) 38%,transparent 74%); filter: blur(calc(2px + var(--blush) * 8px)); transform: scale(calc(.55 + var(--blush) * .75)); transition: opacity .12s linear,filter .12s linear,transform .12s linear; box-shadow: 0 0 calc(18px + var(--blush) * 34px) rgba(255,59,157,.8); }
.blush-left { left: 13%; } .blush-right { right: 9%; }
.shine { position: absolute; z-index: 5; left: 22%; top: -11%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 12px 4px rgba(255,255,255,.65),0 0 34px 12px rgba(98,231,255,.3); animation: twinkle 2.8s ease-in-out infinite; }
.shine::before,.shine::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: white; transform: translate(-50%,-50%); }
.shine::before { width: 250%; height: 1px; } .shine::after { width: 1px; height: 250%; }
.whisper { margin: clamp(25px,5vh,48px) 0 0; color: rgba(229,220,255,.56); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10px; letter-spacing: .32em; text-transform: lowercase; transition: color .3s,transform .3s; }
.is-booped .whisper { color: #ff9dda; transform: scale(1.12); }
.is-booped .uwu { animation: boop .52s cubic-bezier(.2,.8,.3,1),hover 5s .52s ease-in-out infinite; }
.orbit { position: absolute; z-index: 1; left: 50%; top: 50%; border: 1px solid rgba(176,144,255,.12); border-radius: 50%; pointer-events: none; transform-style: preserve-3d; }
.orbit-outer { width: min(76vw,940px); aspect-ratio: 1.85; animation: orbit 24s linear infinite; }
.orbit-inner { width: min(49vw,590px); aspect-ratio: 1.65; animation: orbitReverse 17s linear infinite; }
.orbit i { position: absolute; left: 7%; top: 14%; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 12px 4px var(--pink),0 0 34px 10px rgba(255,104,199,.25); }
.orbit-inner i { left: 81%; top: 82%; box-shadow: 0 0 12px 4px var(--cyan),0 0 34px 10px rgba(98,231,255,.2); }
.specks { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate(var(--drift-x),var(--drift-y)); transition: transform .5s ease-out; }
.specks span { position: absolute; display: block; border-radius: 50%; background: #fff; opacity: .25; box-shadow: 0 0 8px #c5aaff; animation: float linear infinite; }
.hint { position: absolute; z-index: 5; left: 50%; bottom: clamp(22px,5vh,52px); margin: 0; translate: -50% 0; color: rgba(206,194,235,.36); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.grain { position: absolute; inset: 0; z-index: 10; opacity: .035; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.65) .45px,transparent .6px); background-size: 4px 4px; }
@keyframes hover { 0%,100% { transform: translateY(-4px) translateZ(30px); } 50% { transform: translateY(7px) translateZ(42px); } }
@keyframes breathe { to { transform: scale(1.25) translate(7%,5%); opacity: .28; } }
@keyframes twinkle { 0%,100% { transform: scale(.25) rotate(0); opacity: .35; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 65% { transform: scale(.55) rotate(90deg); opacity: .65; } }
@keyframes orbit { from { transform: translate(-50%,-50%) rotate(-8deg); } to { transform: translate(-50%,-50%) rotate(352deg); } }
@keyframes orbitReverse { from { transform: translate(-50%,-50%) rotate(18deg); } to { transform: translate(-50%,-50%) rotate(-342deg); } }
@keyframes float { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 20% { opacity: .35; } 80% { opacity: .2; } 100% { transform: translateY(-70px) scale(1.1); opacity: 0; } }
@keyframes boop { 0% { transform: scale(1) translateZ(30px); } 40% { transform: scale(.86) translateZ(0); } 72% { transform: scale(1.12) translateZ(65px); } 100% { transform: scale(1) translateZ(30px); } }
@media (max-width: 640px) { .uwu { font-size: clamp(96px,34vw,180px); } .orbit-outer { width: 130vw; } .orbit-inner { width: 82vw; } .hint { letter-spacing: .13em; font-size: 8px; } }
@media (pointer: coarse) { .cursor-light { left: 50%; top: 45%; } .hint { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .heart,.specks { transition: none; } }