@import"https://fonts.googleapis.com/css2?family=Doto:wght@400;600;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--primary: #FF2222;--primary-glow: rgba(255, 34, 34, .4);--bg-main: #09090b;--bg-surface: #18181b;--bg-card: #27272a;--text-main: #ffffff;--text-sub: #a1a1aa;--border-glass: rgba(255, 255, 255, .1);--glass-bg: rgba(24, 24, 27, .85);--nav-height: 52px}body{margin:0;background-color:var(--bg-main);color:var(--text-main);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-y:auto;overscroll-behavior-y:auto;height:100vh}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}h1{font-size:1.5rem;font-weight:700;margin:0;letter-spacing:-.02em}h2{font-size:1.25rem;font-weight:600;margin:0}h3{font-size:1rem;font-weight:600;margin:0}p{font-size:.875rem;color:var(--text-sub);margin:0}.app-container{position:fixed;top:0;left:0;right:0;bottom:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;z-index:10}.container{padding:16px;flex:1;overflow:hidden;display:flex;flex-direction:column}.results-list{overflow-y:auto;padding-bottom:80px;height:100%}.results-list::-webkit-scrollbar{width:4px}.results-list::-webkit-scrollbar-thumb{background:#333;border-radius:4px}.search-wrapper{background:var(--bg-surface);border:1px solid var(--border-glass);border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}.search-input{background:transparent;border:none;outline:none;font-size:1rem;color:#fff;width:100%}.track-card{background:var(--bg-card);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer}.track-card:active{transform:scale(.98);background:var(--bg-surface)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);background:#09090bf2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-glass);display:flex;justify-content:space-around;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom)}.nav-item{background:none;border:none;color:var(--text-sub);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.65rem;font-weight:500;width:56px;height:100%}.nav-item.active{color:var(--primary)}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn .4s cubic-bezier(.2,.8,.2,1);height:100%;display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:#fff;border:4px solid var(--primary);margin-top:-8px;box-shadow:0 0 10px #00000080}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:#ffffff26;border-radius:2px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:end}.modal-content{background:#1c1c1c;width:100%;border-radius:24px 24px 0 0;padding:24px;border-top:1px solid var(--border-glass)}.music-player{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;justify-content:space-between}.player-swiper{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:center;min-height:0;margin:0}.player-swiper::-webkit-scrollbar{display:none}.swiper-slide{min-width:100%;width:100%;height:100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20px}.album-art-container{width:100%;max-width:300px;aspect-ratio:1/1;position:relative;max-height:35vh;flex-shrink:1;margin-bottom:0}.album-art-img{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 10px 30px #00000080;border:1px solid rgba(255,255,255,.1)}.album-art-placeholder{width:100%;height:100%;border-radius:20px;background:#222;display:flex;justify-content:center;align-items:center}.main-visualizer-canvas{position:absolute;bottom:0;left:0;width:100%;height:60px;border-radius:0 0 20px 20px;-webkit-mask-image:linear-gradient(to top,black,transparent);mask-image:linear-gradient(to top,black,transparent);opacity:.8;pointer-events:none}.analysis-container{width:100%;max-width:340px;background:#0000004d;padding:12px;border-radius:16px;height:260px;max-height:40vh;display:flex;flex-direction:column}.swiper-dots{display:flex;justify-content:center;gap:8px;margin:4px 0 8px;min-height:6px;flex-shrink:0}.dot{width:6px;height:6px;border-radius:50%;background:#444;transition:all .3s}.dot.active{background:var(--primary);width:18px;border-radius:10px}.player-controls-container{flex-shrink:0;width:100%;padding:0 24px 24px;display:flex;flex-direction:column;align-items:center;background:transparent}.player-meta{text-align:center;margin-bottom:8px;width:100%}@keyframes glitch{0%{text-shadow:2px 0 red,-2px 0 blue}2%{text-shadow:2px 0 red,-2px 0 blue}4%{text-shadow:none}to{text-shadow:none}}.player-meta h2{font-family:Doto,sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:.05em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;transition:all .3s ease;animation:glitch .5s cubic-bezier(.25,.46,.45,.94) both infinite;animation:glitch .6s ease-in-out}@keyframes glitch{0%{transform:translate(0);text-shadow:none}20%{transform:translate(-2px,2px);text-shadow:2px 2px red,-2px -2px blue}40%{transform:translate(-2px,-2px);text-shadow:2px -2px red,-2px 2px blue}60%{transform:translate(2px,2px);text-shadow:-2px 2px red,2px -2px blue}80%{transform:translate(2px,-2px);text-shadow:-2px -2px red,2px 2px blue}to{transform:translate(0);text-shadow:none}}.progress-container{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:16px}.time-text{font-size:.75rem;color:#888;width:40px;font-variant-numeric:tabular-nums}.controls-row{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:320px}.btn-control{background:transparent;border:none;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;border-radius:50%}.btn-control:active{transform:scale(.9)}.btn-control.small{width:40px;height:40px;color:#888}.btn-control.small.active-shuffle{color:var(--primary)}.btn-control.medium{width:56px;height:56px}.play-btn{width:72px;height:72px;background:var(--primary);color:#000;border-radius:50%;box-shadow:0 8px 24px #00e5ff40}@media (max-height: 700px){.album-art-container{max-height:30vh}.analysis-container{max-height:35vh}.player-controls-container{padding-bottom:16px}.play-btn{width:60px;height:60px}.btn-control.medium{width:48px;height:48px}.progress-container{margin-bottom:12px}}.marquee-container{overflow:hidden;white-space:nowrap;position:relative;max-width:100%;height:32px;line-height:32px;display:flex;align-items:center;justify-content:center;-webkit-mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent)}.marquee-content{display:inline-block;padding-left:0}.marquee-content.animate{padding-left:100%;animation:marquee 10s linear infinite}.marquee-content.animate-reverse{padding-right:100%;animation:marquee-reverse 10s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes marquee-reverse{0%{transform:translate(-100%)}to{transform:translate(0)}}.marquee-content.animate-pingpong{animation:pingpong 23s linear infinite;padding-left:0}@keyframes pingpong{0%{transform:translate(0)}2%{transform:translate(0)}45%{transform:translate(var(--scroll-dist))}58%{transform:translate(var(--scroll-dist))}98%{transform:translate(0)}to{transform:translate(0)}}.marquee-content.clean{animation:glitch .5s ease-in-out}.marquee-content.full-pingpong{animation:glitch .5s ease-in-out,pingpong 23s linear infinite}@keyframes glitch{0%{transform:skew(0);opacity:1}20%{transform:skew(-10deg);opacity:.8}40%{transform:skew(10deg);opacity:1}60%{transform:skew(-5deg);opacity:.9}80%{transform:skew(5deg);opacity:1}to{transform:skew(0);opacity:1}}