dialog.music-recognition-screen{--audio-level:0;position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 47%,#e9faf1 0%,#f7fcf9 36%,#fff 70%);color:#192b25;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;font-family:inherit}
dialog.music-recognition-screen::backdrop{background:#fff}.music-recognition-screen[open]{display:flex;flex-direction:column}.music-recognition-screen header{display:flex;align-items:center;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top)) 28px 20px}.recognition-brand{display:flex;align-items:center;gap:10px}.recognition-brand-mark{display:grid;place-items:center;width:32px;height:32px;object-fit:contain;background:transparent;border:0;border-radius:0}.music-recognition-screen header strong{font-size:17px;font-weight:650;letter-spacing:-.5px}.music-recognition-screen button{font:inherit;cursor:pointer}.music-recognition-screen header button{width:40px;height:40px;border:1px solid #e6ece8;border-radius:50%;background:#ffffffa8;font-size:27px;line-height:1;color:#6e7c74}.music-recognition-screen button:focus-visible{outline:3px solid #12ad64;outline-offset:5px}
.music-recognition-screen main{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 64px;text-align:center}.recognition-eyebrow{font-size:12px;font-weight:600;letter-spacing:1px;color:#3a9a6b;margin-bottom:18px}.music-recognition-screen h1{font-size:clamp(25px,4vw,36px);font-weight:650;letter-spacing:-1.5px;line-height:1.4;margin:0 0 12px}.music-recognition-screen main>p{font-size:14px;color:#829087;line-height:1.8;margin:0}
.recognition-orbit{position:relative;display:grid;place-items:center;isolation:isolate;width:310px;height:310px;margin:32px 0 0}.recognition-orbit::before{content:'';position:absolute;inset:19%;border-radius:50%;filter:blur(30px);background:#3adf8c32;transform:scale(calc(1 + var(--audio-level)*.7));transition:transform .1s}.recognition-orbit i{position:absolute;border:1px solid #16b86c14;border-radius:50%;width:100%;height:100%;background:linear-gradient(145deg,#ffffff70,#bcefd51a);box-shadow:inset 0 1px 1px #fff}.recognition-orbit i:nth-child(2){width:246px;height:246px;border-color:#1bb86b1f;background:#e2f6eb48}.recognition-orbit i:nth-child(3){width:184px;height:184px;border-color:#17b56829;background:linear-gradient(145deg,#f6fffbb0,#c5efda6b)}.recognition-orbit button{position:relative;display:grid;place-items:center;width:122px;height:122px;border:1px solid #ffffff90;border-radius:50%;background:linear-gradient(145deg,#41d98c,#04b565 72%);color:#fff;box-shadow:0 12px 32px #0ab76935,inset 0 2px 3px #ffffff7a;transform:scale(calc(1 + var(--audio-level)*.08));transition:box-shadow .2s,transform .12s}.recognition-orbit button:hover{box-shadow:0 16px 40px #0ab76950,inset 0 2px 3px #ffffff7a}.recognition-orbit svg{width:48px;height:48px;filter:drop-shadow(0 2px 2px #008b4030)}.recognition-orbit-spark{position:absolute;top:35px;right:59px;width:9px;height:9px;background:#5dd9a1;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 10px #37bd7250}
.recognition-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:40px;margin-top:4px}.recognition-wave b{display:block;width:3px;height:4px;border-radius:4px;background:#b7d6c5;transition:height .09s}.music-recognition-screen.is-recording .recognition-wave b{background:#1cbf73}.music-recognition-screen [data-recognition-count]{min-height:23px;font-size:12px;font-variant-numeric:tabular-nums;color:#5c8d73;margin-top:9px}.music-recognition-screen .recognition-hint{font-size:12px;margin-top:27px;color:#8c9a91}.music-recognition-screen [data-recognition-message]{max-width:400px;margin-top:16px;color:#657c6e}.music-recognition-screen [data-recognition-message]:empty{display:none}.music-recognition-screen footer{display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;color:#98a69d;padding:18px 20px calc(25px + env(safe-area-inset-bottom))}.music-recognition-screen footer span{font-size:11px;color:#a8bdb0}.music-recognition-screen.is-listening .recognition-orbit i{animation:recognition-ripple 2.4s ease-in-out infinite}.music-recognition-screen.is-listening .recognition-orbit i:nth-child(2){animation-delay:.4s}.music-recognition-screen.is-listening .recognition-orbit i:nth-child(3){animation-delay:.8s}.music-recognition-screen.is-recognizing .recognition-orbit-spark{animation:recognition-search 2s ease-in-out infinite}
@keyframes recognition-ripple{50%{transform:scale(.94);opacity:.5}}@keyframes recognition-search{50%{opacity:.25;transform:scale(.6)}}@media(prefers-reduced-motion:reduce){.music-recognition-screen.is-listening .recognition-orbit i,.music-recognition-screen.is-recognizing .recognition-orbit-spark{animation:none}.recognition-orbit button,.recognition-wave b{transition:none}}@media(max-width:600px){.music-recognition-screen header{padding-left:20px;padding-right:20px}.music-recognition-screen main{padding-bottom:38px}.recognition-orbit{width:280px;height:280px}.recognition-orbit i:nth-child(2){width:224px;height:224px}.recognition-orbit i:nth-child(3){width:172px;height:172px}.recognition-orbit button{width:116px;height:116px}}@media(max-height:650px){.music-recognition-screen main{padding:12px 20px}.recognition-eyebrow{margin-bottom:10px}.recognition-orbit{width:208px;height:208px;margin:12px 0 0}.recognition-orbit i:nth-child(2){width:170px;height:170px}.recognition-orbit i:nth-child(3){width:136px;height:136px}.recognition-orbit button{width:98px;height:98px}.music-recognition-screen .recognition-hint{margin-top:12px}.music-recognition-screen footer{padding-top:12px}}
/* The listening scene resolves into the discovered album in the same dialog. */
.recognition-result[hidden]{display:none}.recognition-result{width:min(100%,380px);display:flex;flex-direction:column;align-items:center;gap:22px}.is-matched main{padding-top:18px;padding-bottom:28px}.is-matched .recognition-eyebrow,.is-matched main>h1,.is-matched [data-recognition-description],.is-matched .recognition-orbit,.is-matched .recognition-wave,.is-matched [data-recognition-count],.is-matched .recognition-hint,.is-matched [data-recognition-message]{display:none}.recognition-found-badge{display:flex;align-items:center;gap:7px;color:#087f4d;font-size:14px;font-weight:650;letter-spacing:-.3px;animation:recognition-found-in .55s ease both}.recognition-found-badge svg{width:23px;height:23px;padding:5px;border-radius:50%;background:#dff4e8;box-sizing:border-box}.recognition-result-card{display:flex;flex-direction:column;align-items:center;gap:25px;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent}.recognition-cover{display:grid;place-items:center;position:relative;isolation:isolate;width:min(65vw,258px);aspect-ratio:1;border-radius:23px;background:linear-gradient(145deg,#d9eee3,#8ac4a9);box-shadow:0 22px 50px -14px #205b493b,0 0 0 1px #fff inset;animation:recognition-cover-reveal .85s cubic-bezier(.16,1,.3,1) both;overflow:hidden}.recognition-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.recognition-cover img[hidden]{display:none}.recognition-cover-fallback{font-size:76px;color:#fff9}.recognition-cover-shine{position:absolute;inset:-50%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 37%,#ffffff36 48%,transparent 59%);transform:translateX(-70%);animation:recognition-cover-shine 1.3s .2s ease-out both}.recognition-result-copy{display:flex;flex-direction:column;gap:8px;max-width:100%;animation:recognition-found-in .65s .14s ease both}.recognition-result-copy strong{font-size:clamp(26px,6vw,36px);line-height:1.2;letter-spacing:-1.1px;font-weight:700;overflow-wrap:anywhere}.recognition-result-copy>span{font-size:16px;line-height:1.5;color:#50695c;overflow-wrap:anywhere}.recognition-result-copy small{font-size:12px;color:#89998f;line-height:1.4;overflow-wrap:anywhere}.recognition-result-action{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:min(100%,300px);box-sizing:border-box;min-height:54px;border-radius:18px;background:#078952;color:white;font-size:15px;font-weight:650;box-shadow:0 8px 20px #087d4820;animation:recognition-found-in .65s .25s ease both;transition:background .2s,transform .2s}.recognition-result-action>svg{width:20px;height:20px}.recognition-result-action>span{margin-left:auto;font-size:18px;position:absolute;right:20px}.recognition-result-card:hover .recognition-result-action{background:#067646}.recognition-result-card:active .recognition-result-action{transform:scale(.98)}.recognition-again{padding:10px 18px;border:0;background:transparent;color:#718579;font-size:13px;animation:recognition-found-in .6s .35s ease both}.recognition-result-card:focus-visible{border-radius:24px}.is-matched{background:radial-gradient(ellipse at 50% 36%,#dff6e8 0%,#f4faf6 44%,#fff 80%)!important}
@keyframes recognition-cover-reveal{from{opacity:0;transform:translateY(35px) scale(.78) rotate(-7deg);filter:blur(10px)}to{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}}@keyframes recognition-found-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes recognition-cover-shine{to{transform:translateX(70%)}}
@media(max-width:600px){.is-matched main{padding:12px 25px 22px}.recognition-result{gap:20px}.recognition-result-card{gap:23px}.recognition-cover{border-radius:20px}.is-matched footer{padding-bottom:calc(18px + env(safe-area-inset-bottom))}.recognition-result-action{width:100%}}
@media(max-height:700px){.is-matched header{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:8px}.recognition-result{gap:13px}.recognition-cover{width:min(50vw,190px)}.recognition-result-card{gap:16px}.recognition-result-copy strong{font-size:27px}.recognition-again{padding:6px 14px}.is-matched footer{padding-top:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.recognition-found-badge,.recognition-cover,.recognition-cover-shine,.recognition-result-copy,.recognition-result-action,.recognition-again{animation:none}.recognition-cover-shine{display:none}.recognition-result-action{transition:none}}
@media(max-width:600px) and (min-height:701px) and (max-height:800px){.recognition-result{gap:16px}.recognition-cover{width:min(58vw,220px)}.recognition-result-card{gap:18px}.recognition-result-copy{gap:6px}.recognition-result-copy strong{font-size:29px}.recognition-again{padding:8px 16px}}
@media(max-height:650px){.is-matched main{padding-top:8px;padding-bottom:8px}.recognition-cover{width:min(46vw,160px)}}

.recognition-screen-content{display:contents}.recognition-screen-content[hidden],[data-recognition-loading][hidden]{display:none!important}