.character-display{text-align:center;padding:40px 20px}.character{display:inline-block;position:relative;transition:transform .3s ease}.character.speaking{animation:bounce .5s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.character-image{width:300px;height:auto;border-radius:20px;box-shadow:0 10px 40px #00000026;transition:box-shadow .3s ease}.character.speaking .character-image{box-shadow:0 10px 50px #667eea66}.speaking-indicator{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:flex-end}.sound-wave{width:4px;height:20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px;animation:wave .6s ease-in-out infinite}.sound-wave:nth-child(1){animation-delay:0s}.sound-wave:nth-child(2){animation-delay:.2s}.sound-wave:nth-child(3){animation-delay:.4s}@keyframes wave{0%,to{height:10px;opacity:.5}50%{height:30px;opacity:1}}.character-status{margin-top:40px;font-size:16px;color:#6b7280;font-weight:500}@media (max-width: 768px){.character-image{width:220px}.character-status{margin-top:30px;font-size:14px}}.control-panel{margin-top:30px;padding:25px;background:#f9fafb;border-radius:15px;border:1px solid #e5e7eb}.control-panel h2{font-size:20px;margin-bottom:20px;color:#111827}.control-panel h3{font-size:16px;margin-bottom:12px;color:#374151;font-weight:600}.preset-buttons{margin-bottom:25px}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.preset-button{padding:15px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px #667eea33}.preset-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #667eea4d}.preset-button:active:not(:disabled){transform:translateY(0)}.preset-button:disabled{opacity:.5;cursor:not-allowed}.custom-input form{display:flex;gap:10px}.text-input{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;transition:border-color .3s ease}.text-input:focus{outline:none;border-color:#667eea}.text-input:disabled{background:#f3f4f6;cursor:not-allowed}.submit-button{padding:12px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.submit-button:disabled{opacity:.5;cursor:not-allowed}.warning-message{margin-top:15px;padding:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px;text-align:center}@media (max-width: 768px){.button-grid{grid-template-columns:1fr}.custom-input form{flex-direction:column}.submit-button{width:100%}}.location-display{margin-top:30px;padding:20px;background:#fff;border-radius:12px;border:2px solid #e5e7eb}.location-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.header-buttons{display:flex;gap:8px}.location-header h3{font-size:18px;color:#111827;margin:0}.refresh-button{padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s ease;color:#374151;font-weight:500}.refresh-button:hover{background:#e5e7eb;border-color:#9ca3af}.auto-mode-button{padding:8px 16px;background:#fef3c7;border:1px solid #fbbf24;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s ease;color:#92400e;font-weight:500}.auto-mode-button:hover{background:#fde68a;border-color:#f59e0b}.manual-mode-notice{padding:10px 12px;background:#fef3c7;border:1px solid #fbbf24;border-radius:8px;color:#92400e;font-size:13px;margin-bottom:15px;font-weight:500}.location-info{display:flex;flex-direction:column;gap:12px}.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#f9fafb;border-radius:8px}.info-label{font-size:14px;color:#6b7280;font-weight:500}.info-value{font-size:14px;color:#111827;font-weight:600;font-family:Courier New,monospace}.location-error{padding:12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;font-size:14px}.location-loading{padding:20px;text-align:center;color:#6b7280;font-size:14px}.test-locations{margin-top:20px;padding-top:20px;border-top:2px dashed #e5e7eb}.test-locations h4{font-size:14px;color:#6b7280;margin:0 0 12px;font-weight:500}.test-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.test-location-button{padding:10px 12px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;font-size:13px;cursor:pointer;transition:all .2s ease;color:#4338ca;font-weight:500}.test-location-button:hover{background:#e0e7ff;border-color:#a5b4fc;transform:translateY(-1px);box-shadow:0 2px 4px #4338ca1a}.test-location-button:active{transform:translateY(0)}.test-location-button:disabled{background:#e5e7eb;border-color:#d1d5db;color:#9ca3af;cursor:not-allowed;opacity:.6}.test-location-button:disabled:hover{background:#e5e7eb;border-color:#d1d5db;transform:none;box-shadow:none}.cooldown-notice{padding:8px 12px;background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;color:#92400e;font-size:12px;text-align:center;margin-bottom:10px;font-weight:500}@media (max-width: 768px){.info-row{flex-direction:column;align-items:flex-start;gap:4px}.test-buttons{grid-template-columns:1fr 1fr}}.app{background:#fff;border-radius:20px;box-shadow:0 10px 50px #0003;overflow:hidden;min-height:600px}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 30px;display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:24px;font-weight:700}.status-indicator{display:flex;align-items:center;gap:8px;font-size:14px}.status-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s infinite}.status-dot.connected{background-color:#4ade80}.status-dot.disconnected{background-color:#f87171}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.app-main{padding:30px}.auto-guide-notification{background:#4caf50e6;color:#fff;padding:12px 20px;border-radius:8px;margin:10px 0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;box-shadow:0 2px 8px #0003;animation:slideIn .3s ease-out}.notification-icon{font-size:20px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.app-footer{background:#f3f4f6;padding:15px 30px;text-align:center;color:#6b7280;font-size:14px}.dev-controls{margin-top:20px;padding-top:20px;border-top:1px dashed #ccc}.cooldown-reset-btn{background:#ff9800;color:#fff;border:none;padding:8px 16px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.cooldown-reset-btn:hover{background:#f57c00}@media (max-width: 768px){.app-header h1{font-size:20px}.app-main{padding:20px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;max-width:800px;margin:0 auto;padding:20px}