:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden}.app{min-height:100vh;width:100vw;position:relative;background:#e3f2fd;font-family:Inter,Segoe UI,sans-serif;overflow-x:hidden}.places-section{padding:2rem 0;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,255,255,.2)}.places-title{text-align:center;color:#fff;font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:2rem;font-weight:700;text-shadow:0 0 30px rgba(0,255,255,.5);background:linear-gradient(45deg,#0ff,#f0f,#ff0,#0ff);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:2rem;text-align:center;box-sizing:border-box;position:relative}.main-content h1{display:none}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.main-content p{display:none}.dialogue-button{background:#fff;color:#000;border:none;padding:clamp(1rem,3vw,1.5rem) clamp(2rem,4vw,2.5rem);font-size:clamp(1rem,3vw,1.4rem);font-weight:600;border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-transform:uppercase;letter-spacing:1px;min-width:200px;max-width:90%;position:relative;z-index:1;box-shadow:0 4px 20px #0000001a,0 8px 40px #00000026;animation:none}@keyframes buttonGlow{0%{box-shadow:0 0 30px #00ffff80,0 0 60px #ff00ff4d,inset 0 0 20px #fff3}to{box-shadow:0 0 50px #0ffc,0 0 100px #ff00ff80,inset 0 0 30px #ffffff4d}}.dialogue-button:hover:not(:disabled){transform:translateY(-2px) scale(1.01);background:#f8f8f8;box-shadow:0 6px 25px #00000026,0 12px 50px #0003}.dialogue-button:disabled{opacity:.5;cursor:not-allowed;background:#f0f0f0;color:#999}.dialogue-overlay{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:flex-end;padding:0 0 4rem;animation:slideUpFuturistic .8s cubic-bezier(.175,.885,.32,1.275);background:transparent;cursor:pointer}.dialogue-overlay:before{content:"";position:absolute;inset:0;background:url(/background2.png) center/cover no-repeat;z-index:-1;animation:backgroundFadeIn 2s ease-out 1.2s forwards;opacity:0;filter:blur(8px)}@keyframes backgroundFadeIn{0%{opacity:0;transform:scale(1.15) translateY(20px);filter:blur(8px) brightness(.8)}30%{opacity:.3;transform:scale(1.08) translateY(10px);filter:blur(4px) brightness(.9)}60%{opacity:.7;transform:scale(1.03) translateY(3px);filter:blur(2px) brightness(.95)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1)}}@keyframes slideUpFuturistic{0%{transform:translateY(100%) scale(.8);opacity:0;filter:blur(20px)}50%{transform:translateY(50%) scale(1.1);opacity:.7;filter:blur(5px)}to{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}}.dialogue-overlay.closing{animation:slideDownFuturistic .5s cubic-bezier(.55,.085,.68,.53) forwards}.dialogue-overlay.closing:before{animation:backgroundFadeOut .4s ease-in forwards}@keyframes backgroundFadeOut{0%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1)}to{opacity:0;transform:scale(1.1) translateY(-10px);filter:blur(4px) brightness(.7)}}@keyframes slideDownFuturistic{0%{transform:translateY(0) scale(1);opacity:1;filter:blur(0)}50%{transform:translateY(50%) scale(.9);opacity:.5;filter:blur(10px)}to{transform:translateY(100%) scale(.7);opacity:0;filter:blur(20px)}}.dialogue-container{width:100%;max-width:100vw;display:flex;flex-direction:column;align-items:center;position:relative;cursor:default}.close-button{position:absolute;top:1rem;right:1rem;width:48px;height:48px;background:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;transition:all .2s ease;z-index:1002}.close-button:hover{background:#f5f5f5;transform:scale(1.05)}.close-button svg{width:32px;height:32px;color:#000}.character-portrait{position:absolute;right:2rem;top:-8rem;z-index:1001;animation:characterSlideInFuturistic 1s cubic-bezier(.175,.885,.32,1.275)}.dialogue-overlay.closing .character-portrait{animation:characterSlideOutFuturistic .5s cubic-bezier(.55,.085,.68,.53) forwards}@keyframes characterSlideOutFuturistic{0%{transform:translate(0) scale(1) rotate(0);opacity:1;filter:blur(0)}to{transform:translate(200px) scale(.5) rotate(-180deg);opacity:0;filter:blur(20px)}}@keyframes characterSlideInFuturistic{0%{transform:translate(200px) scale(.5) rotate(180deg);opacity:0;filter:blur(20px)}50%{transform:translate(50px) scale(1.2) rotate(90deg);opacity:.7;filter:blur(5px)}to{transform:translate(0) scale(1) rotate(0);opacity:1;filter:blur(0)}}.character-image-large{width:clamp(250px,30vw,400px);height:clamp(250px,30vw,400px);object-fit:contain;border-radius:30px;animation:speakingFuturistic 1.2s ease-in-out infinite alternate;box-shadow:0 0 50px #0ff9,0 0 100px #f0f6,inset 0 0 30px #ffffff1a;border:3px solid transparent;background:linear-gradient(45deg,#0ff,#f0f,#ff0) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:exclude}@keyframes speakingFuturistic{0%{transform:translateY(0) scale(1) rotate(0);filter:brightness(1) hue-rotate(0deg);box-shadow:0 0 50px #0ff9,0 0 100px #f0f6,inset 0 0 30px #ffffff1a}to{transform:translateY(-10px) scale(1.05) rotate(2deg);filter:brightness(1.2) hue-rotate(20deg);box-shadow:0 0 80px #0ffc,0 0 150px #f0f9,inset 0 0 50px #fff3}}.dialogue-box{background:#fff;border:none;border-radius:30px;padding:clamp(2rem,5vw,3rem);width:100%;max-width:min(95vw,1000px);margin:0 1rem;position:relative;box-shadow:0 0 50px #00ffff4d,0 0 100px #f0f3,inset 0 0 50px #ffffff1a;animation:dialogueGlow 3s ease-in-out infinite alternate}.dialogue-overlay.closing .dialogue-box{animation:dialogueCloseFuturistic .5s cubic-bezier(.55,.085,.68,.53) forwards}@keyframes dialogueCloseFuturistic{0%{transform:scale(1);opacity:1;filter:blur(0);box-shadow:0 0 50px #00ffff4d,0 0 100px #f0f3,inset 0 0 50px #ffffff1a}to{transform:scale(.8);opacity:0;filter:blur(15px);box-shadow:0 0 20px #00ffff1a,0 0 40px #ff00ff0d,inset 0 0 20px #ffffff0d}}.dialogue-box:before{content:"";position:absolute;inset:-4px;border-radius:34px;background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080,red);background-size:300% 300%;animation:rainbowBorder 3s linear infinite;z-index:-1}.dialogue-box:after{content:"";position:absolute;inset:-1px;border-radius:31px;background:#fff;z-index:-1}@keyframes dialogueGlow{0%{box-shadow:0 0 50px #00ffff4d,0 0 100px #f0f3,inset 0 0 50px #ffffff1a}to{box-shadow:0 0 80px #00ffff80,0 0 150px #ff00ff4d,inset 0 0 80px #fff3}}@keyframes rainbowBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.character-container{flex-shrink:0;position:relative;animation:characterBounce 1.2s ease-in-out infinite}@keyframes characterBounce{0%,to{transform:translateY(0)}25%{transform:translateY(-1px)}50%{transform:translateY(-2px)}75%{transform:translateY(-1px)}}.character-image{width:clamp(80px,15vw,140px);height:clamp(80px,15vw,140px);object-fit:contain;border-radius:15px;transition:all .2s ease;animation:speaking .8s ease-in-out infinite alternate}@keyframes speaking{0%{transform:translateY(0) scale(1) rotate(0);filter:brightness(1) contrast(1)}10%{transform:translateY(-1px) scale(1.01) rotate(.5deg);filter:brightness(1.02) contrast(1.01)}20%{transform:translateY(-2px) scale(1.02) rotate(-.3deg);filter:brightness(1.04) contrast(1.02)}30%{transform:translateY(-1px) scale(1.01) rotate(.2deg);filter:brightness(1.03) contrast(1.01)}40%{transform:translateY(-3px) scale(1.03) rotate(-.5deg);filter:brightness(1.06) contrast(1.03)}50%{transform:translateY(-2px) scale(1.02) rotate(.3deg);filter:brightness(1.04) contrast(1.02)}60%{transform:translateY(-1px) scale(1.01) rotate(-.2deg);filter:brightness(1.02) contrast(1.01)}70%{transform:translateY(-2px) scale(1.02) rotate(.4deg);filter:brightness(1.05) contrast(1.02)}80%{transform:translateY(-1px) scale(1.01) rotate(-.1deg);filter:brightness(1.03) contrast(1.01)}90%{transform:translateY(-2px) scale(1.02) rotate(.2deg);filter:brightness(1.04) contrast(1.02)}to{transform:translateY(0) scale(1) rotate(0);filter:brightness(1) contrast(1)}}.character-image.idle{animation:breathing 3s ease-in-out infinite}@keyframes breathing{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.01);filter:brightness(1.02)}}.character-name-container{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;justify-content:flex-start}.character-name-tag{background:linear-gradient(45deg,#0ff,#f0f);color:#fff;padding:.8rem 1.5rem;border-radius:25px;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:700;display:inline-block;border:none;text-shadow:0 0 20px rgba(0,0,0,.5);box-shadow:0 0 30px #0ff9,0 0 60px #f0f6,inset 0 0 20px #ffffff4d;animation:nameGlow 2s ease-in-out infinite alternate;position:relative;z-index:1}@keyframes nameGlow{0%{box-shadow:0 0 30px #0ff9,0 0 60px #f0f6,inset 0 0 20px #ffffff4d}to{box-shadow:0 0 50px #0ffc,0 0 100px #f0f9,inset 0 0 40px #ffffff80}}.voice-icon-button{background:none;color:#666;border:none;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:8px;position:relative;z-index:1}.voice-icon-button:hover{color:#0ff;transform:scale(1.1)}.voice-icon-button.playing{color:#ff6b6b;animation:voiceIconPlaying 1s ease-in-out infinite alternate}.voice-icon-button svg{display:block;width:16px;height:16px}@keyframes voiceIconPlaying{0%{transform:scale(1);opacity:1}to{transform:scale(1.1);opacity:.8}}.dialogue-text{font-size:clamp(1.3rem,3vw,1.8rem);color:#333;line-height:1.6;margin-bottom:2rem;animation:textPulseFuturistic 1s ease-in-out infinite alternate;font-weight:400;text-shadow:0 0 20px rgba(0,0,0,.1);position:relative;z-index:1}@keyframes textPulseFuturistic{0%{opacity:1;transform:scale(1);text-shadow:0 0 20px rgba(0,0,0,.1)}to{opacity:.9;transform:scale(1.02);text-shadow:0 0 30px rgba(0,255,255,.3)}}.user-input-container{position:relative;margin-bottom:.5rem}.user-input-rounded{width:100%;padding:1rem 3.5rem 1rem 1rem;border:2px solid #ccc;border-radius:50px;background:#fff;color:#333;font-size:clamp(1rem,2vw,1.2rem);transition:all .3s ease;outline:none;font-weight:400;position:relative}.user-input-rounded:focus{border-color:#0ff;box-shadow:0 0 10px #00ffff4d;transform:scale(1.01)}.user-input-rounded::placeholder{color:#999;font-style:normal}.user-input-rounded:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed}.user-input-rounded:disabled::placeholder{color:#ccc}.microphone-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;color:#666;border:none;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;padding:10px;z-index:1000}.microphone-icon:hover{color:#0ff;transform:translateY(-50%) scale(1.1)}.microphone-icon.recording{color:#ff6b6b;animation:micRecording 1s ease-in-out infinite alternate}.microphone-icon.disabled{color:#ccc;cursor:not-allowed}.microphone-icon.disabled:hover{color:#ccc;transform:translateY(-50%) scale(1)}.microphone-icon svg{display:block;width:22px;height:22px}@keyframes micRecording{0%{transform:translateY(-50%) scale(1);opacity:1}to{transform:translateY(-50%) scale(1.1);opacity:.8}}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;padding:.8rem;background:#00ffff1a;border-radius:20px;border:1px solid rgba(0,255,255,.3)}.loading-spinner{width:20px;height:20px;border:2px solid rgba(0,255,255,.3);border-top:2px solid #00ffff;border-radius:50%;animation:spin 1s linear infinite}.loading-indicator span{color:#0ff;font-size:.9rem;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes textPulse{0%{opacity:1;transform:scale(1)}to{opacity:.95;transform:scale(1.005)}}@media (max-width: 768px){.dialogue-overlay{padding:0 0 3rem}.character-portrait{right:1rem;top:-5rem}.character-image-large{width:clamp(150px,20vw,200px);height:clamp(150px,20vw,200px)}.dialogue-box{margin:0 .5rem;padding:1rem}.main-content{padding:1rem}.main-content h1{font-size:clamp(1.8rem,6vw,2.5rem)}.main-content p{font-size:clamp(.9rem,3vw,1.2rem)}.dialogue-button{min-width:180px;padding:.8rem 1.5rem}.microphone-icon{right:10px;padding:8px}.microphone-icon svg{width:20px;height:20px}.voice-icon-button{padding:6px}.voice-icon-button svg{width:14px;height:14px}.character-name-container{gap:.8rem}}@media (max-width: 480px){.dialogue-overlay{padding:0 0 2rem}.character-portrait{right:.5rem;top:-4rem}.character-image-large{width:120px;height:120px}.dialogue-box{margin:0 .25rem;padding:.8rem}.main-content{padding:.5rem}.microphone-icon{right:8px;padding:6px}.microphone-icon svg{width:18px;height:18px}.character-name-tag{font-size:1rem;padding:.4rem .8rem}.dialogue-text{font-size:1rem}.voice-icon-button{padding:4px}.voice-icon-button svg{width:12px;height:12px}.character-name-container{gap:.6rem}}
