html{height:120%}body{font-family:'Inter','Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,#0f2027 0%,#2c5364 100%);position:relative;overflow-x:hidden}body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;opacity:0.18;background:url('data:image/svg+xml;utf8,<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg"><g stroke="%2300ADB5" stroke-width="1.2" opacity="0.5"><rect x="20" y="20" width="80" height="40" rx="8" fill="none"/><rect x="120" y="60" width="100" height="30" rx="6" fill="none"/><rect x="250" y="30" width="60" height="60" rx="10" fill="none"/><rect x="350" y="80" width="120" height="40" rx="12" fill="none"/><rect x="100" y="200" width="180" height="60" rx="16" fill="none"/><rect x="320" y="220" width="80" height="30" rx="8" fill="none"/><rect x="420" y="160" width="100" height="50" rx="14" fill="none"/></g><g stroke="%2300c6c6" stroke-width="1" opacity="0.3"><line x1="60" y1="0" x2="60" y2="400"/><line x1="300" y1="0" x2="300" y2="400"/><line x1="500" y1="0" x2="500" y2="400"/><line x1="0" y1="100" x2="600" y2="100"/><line x1="0" y1="300" x2="600" y2="300"/></g></svg>');background-size:cover;background-repeat:no-repeat;background-position:center;pointer-events:none;animation:bgMove 18s linear infinite alternate}@keyframes bgMove{0%{background-position:0% 0%}100%{background-position:100% 100%}}body>*{position:relative;z-index:1}.header{position:fixed;top:0;left:0;right:0;z-index:101;background:rgba(15,32,39,0.85);color:#fff;padding:10px;opacity:1;box-shadow:none;border-radius:18px;display:flex;align-items:center}body{background-color:#f8f9f8}body .main-content{padding-top:0;padding-bottom:0}.header a{text-decoration:none;color:#fff}.header .download a{color:#00ADB5}.download a{background-color:#f0faf0;padding:5px 10px;border-radius:5px;transition:all 0.3s ease}.download a:hover{background-color:#e0f0e0;transform:translateY(-1px)}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 8px}.card{background:transparent;border:1.5px solid #00ADB5;border-radius:32px;box-shadow:none;backdrop-filter:none;padding:48px 32px 40px 32px;width:100%;text-align:center;position:relative;margin:0 auto;overflow:hidden}.card::before{display:none}.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;margin-bottom:18px;box-shadow:0 2px 8px rgba(0,173,181,0.10);background:#e0f7fa;display:inline-block}.title{font-size:2.1rem;font-weight:800;color:#00ADB5;margin-bottom:10px;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,173,181,0.10)}.desc{color:white;font-size:1.15rem;margin-bottom:28px;text-shadow:0 1px 4px rgba(0,173,181,0.08)}.btn{background:linear-gradient(90deg,#00ADB5 60%,#00c6c6 100%);color:#fff;border:none;border-radius:16px;padding:18px 0;font-size:1.25rem;font-weight:700;width:100%;margin-bottom:24px;box-shadow:0 2px 8px rgba(0,173,181,0.10);transition:background 0.2s,transform 0.2s;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}.btn:active{transform:scale(0.98)}.btn:disabled{opacity:0.7;cursor:not-allowed}.sound-wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:32px;margin:0 auto 10px auto;width:60px}.sound-wave-bar{width:6px;border-radius:4px;background:#00ADB5;animation:sound-wave 1.2s ease-in-out infinite}.sound-wave-bar:nth-child(1){height:16px;animation-delay:0s}.sound-wave-bar:nth-child(2){height:24px;animation-delay:0.2s}.sound-wave-bar:nth-child(3){height:32px;animation-delay:0.4s}.sound-wave-bar:nth-child(4){height:24px;animation-delay:0.6s}.sound-wave-bar:nth-child(5){height:16px;animation-delay:0.8s}@keyframes sound-wave{0%,100%{transform:scaleY(0.5)}50%{transform:scaleY(1.2)}}.listening{color:#00ADB5;font-size:1.05rem;margin-bottom:10px;font-weight:500}.result{border-radius:20px;box-shadow:0 2px 8px rgba(0,173,181,0.06);text-align:left;color:#e0f7fa}.result-title{color:#00ADB5;font-size:1.5rem;font-weight:700;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,173,181,0.10)}.feedback{font-size:1.08rem;color:#e0f7fa;line-height:1.6}.badges{display:flex;gap:10px;margin-bottom:10px}.badge{background:#e0f7fa;color:#00ADB5;border-radius:12px;padding:6px 14px;font-size:0.98rem;font-weight:600;display:flex;align-items:center;gap:6px}.try-again{margin-top:10px;background:none;border:1.5px solid #00ADB5;color:#00ADB5;border-radius:12px;padding:8px 24px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:background 0.2s,color 0.2s}.try-again:hover{background:#00ADB5;color:#fff}@media (max-width:600px){.card{padding:28px 6vw 24px 6vw;border-radius:18px}.result{border-radius:12px}}.ai-bubble{position:relative;margin-left:14px;background:#e0f7fa;color:#00ADB5;border-radius:18px 18px 18px 4px;padding:10px 18px;font-size:1.08rem;box-shadow:0 2px 8px rgba(0,173,181,0.10);max-width:260px;text-align:left;z-index:2;display:inline-block}.ai-bubble:before{content:'';position:absolute;left:-13px;top:16px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:14px solid #e0f7fa}.accent-mic{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:2em;font-weight:bold;color:#00ADB5;background:#e0f7fa;border-radius:50%;box-shadow:0 2px 8px rgba(0,173,181,0.10)}.mic-relative{position:relative;display:flex;flex-direction:column;align-items:center}#accent-mic,.accent-mic{z-index:2;position:relative}#wave{position:absolute;left:50%;top:100%;transform:translateX(-50%);z-index:1;width:220px;margin-top:4px}#wave-canvas{width:220px;height:40px;display:block;margin:0 auto}.loading-spinner{display:inline-block;width:24px;height:24px;border:3px solid #e0f7fa;border-top:3px solid #00ADB5;border-radius:50%;animation:spin 1s linear infinite;vertical-align:middle;margin-right:8px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#accent-bars{margin-top:8px}.btn-download{background:linear-gradient(90deg,#00c6c6 60%,#00ADB5 100%)}