@import"https://fonts.googleapis.com/css2?family=Pacifico&family=Source+Sans+3:wght@300;400;500;600&display=swap";:root{--color-bg-primary: #0a1428;--color-accent: #0070FF;--color-foreground: #FFFFFF;--color-light-gray: #E0E0E0;--color-speech-bubble: rgba(255, 255, 255, .95);--color-speech-text: #1a1a1a;--font-handwriting: "Pacifico", cursive;--font-body: "Source Sans 3", sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--duration-fast: .3s;--duration-medium: .6s;--duration-slow: 1s;--easing-smooth: cubic-bezier(.4, 0, .2, 1);--stick-figure-height: 80px;--speech-bubble-max-width: 280px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--color-bg-primary);color:var(--color-foreground);overflow:hidden;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}a{color:var(--color-accent);text-decoration:none;transition:opacity var(--duration-fast) var(--easing-smooth)}a:hover{opacity:.8}.handwriting{font-family:var(--font-handwriting)}.body-text{font-family:var(--font-body)}.stick-figure{position:absolute;bottom:180px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.stick-figure .arm{transform-origin:25px 28px}.street-container{position:absolute;bottom:240px;left:0;right:0;width:100%;height:20px}.street{width:100%;height:100%}.conversation-bubble{position:absolute;max-width:var(--speech-bubble-max-width);background:var(--color-speech-bubble);border-radius:20px;padding:var(--spacing-md) var(--spacing-lg);box-shadow:0 4px 12px #00000026;z-index:10;transition:opacity .4s ease-out;min-height:60px;display:flex;align-items:center}.conversation-bubble.left{left:25%;transform:translate(-50%)}.conversation-bubble.right{left:75%;transform:translate(-50%)}.bubble-content{position:relative;display:flex;align-items:flex-start;gap:10px}.bubble-picture{width:50px;height:50px;min-width:50px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.1)}.bubble-text{margin:0;font-size:1.1rem;color:var(--color-speech-text);line-height:1.4;word-wrap:break-word;font-family:var(--font-body);font-weight:400;flex:1}.bubble-tail{position:absolute;bottom:-15px;width:0;height:0;border-style:solid}.left-tail{left:30px;border-width:15px 15px 0 0;border-color:var(--color-speech-bubble) transparent transparent transparent}.right-tail{right:30px;border-width:15px 0 0 15px;border-color:var(--color-speech-bubble) transparent transparent transparent}.conversation-bubble{top:15%}.contact-links{position:absolute;top:40px;right:40px;display:flex;gap:var(--spacing-xl);align-items:center;justify-content:center;z-index:20}@media(max-width:768px){.contact-links{left:50%;right:auto;top:20px;transform:translate(-50%)}}.contact-link{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);transition:all var(--duration-fast) var(--easing-smooth);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.contact-link:hover{background:#ffffff1a;border-color:var(--color-accent);transform:translateY(-4px);opacity:1}.contact-username{font-size:.9rem;font-weight:500;color:var(--color-foreground)}.animation-container{position:relative;width:100%;height:100%;overflow:hidden}@media(max-width:768px){.animation-container{zoom:.65}}.start-button{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);padding:18px 50px;font-size:20px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;z-index:20;font-family:"Source Sans 3",sans-serif;box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(102,126,234,.6);animation:bounce 2s ease-in-out infinite,glow 2s ease-in-out infinite;transition:all .3s ease}.start-button:hover{box-shadow:0 0 30px #667eeacc,0 0 50px #764ba299,0 0 80px #667eea66;text-shadow:0 0 15px rgba(255,255,255,.8),0 0 30px rgba(102,126,234,.8);transform:translate(-50%,-50%) scale(1.05)}.start-button:active{transform:translate(-50%,-50%) scale(.98);box-shadow:0 0 15px #667eea99,0 0 30px #764ba266,0 0 45px #667eea33}@keyframes bounce{0%,to{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-20px)}}@keyframes glow{0%,to{box-shadow:0 0 20px #667eea99,0 0 40px #764ba266,0 0 60px #667eea33;text-shadow:0 0 10px rgba(255,255,255,.5),0 0 20px rgba(102,126,234,.6)}50%{box-shadow:0 0 30px #667eeacc,0 0 60px #764ba299,0 0 90px #667eea66;text-shadow:0 0 15px rgba(255,255,255,.8),0 0 30px rgba(102,126,234,.8)}}.app{width:100%;height:100%;position:relative}