html,body,#root{margin:0;height:100%}: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}}*{box-sizing:border-box}:root{--bg: #1B1C1E;--text: #ffffff;--box: #232426;--box-elev: #252527;--box-img: #2A2A2C;--border-weak: rgba(255, 255, 255, .05);--border-mid: rgba(255, 255, 255, .1);--muted: rgba(255, 255, 255, .7);--btn-neutral: #F3F3F3;--btn-neutral-hover: #E6E6E6;--btn-neutral-active: #CFCFCF;--wave-bg: #17181a}html[data-theme=light]{--bg: #FFFFFF;--text: #111111;--box: #ebebeb;--box-elev: #F5F5F7;--box-img: #EEEEEE;--border-weak: rgba(0, 0, 0, .06);--border-mid: rgba(0, 0, 0, .12);--muted: rgba(0, 0, 0, .65);--btn-neutral: #dbdbdb;--btn-neutral-hover: #E6E6E6;--btn-neutral-active: #CFCFCF;--wave-bg: #F4F4F6}.subtitle{color:var(--muted)}.input,.select{border:1px solid var(--border-mid);background:color-mix(in srgb,var(--bg),#000 20%);color:var(--text)}.grid .card{background:var(--box-elev);border:1px solid var(--border-weak);box-shadow:0 1px 2px #0006,0 6px 12px #00000059,inset 0 1px #ffffff0a,inset 0 -1px #00000073}.grid .card:hover{background-color:color-mix(in srgb,var(--box-elev),#fff 5%)}.card-img-container{background:var(--box-img);border:1px solid var(--border-weak)}.card p{color:var(--muted)}.region{background:var(--bg);border:1px solid var(--border-weak);color:var(--text)}.region:hover{background-color:color-mix(in srgb,var(--box),#d1d0d0 6%)}.tip{color:var(--muted)}.loading-screen{background:color-mix(in srgb,var(--bg),transparent 30%)}.loading-card{background:var(--box);border:1px solid var(--border-weak);color:var(--text)}#waveform{background:var(--wave-bg)}html,body,#root{height:auto;margin:0}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.app{min-height:100vh;width:100vw;overflow-x:hidden}.page{width:100%;max-width:none;padding:72px 24px 32px;margin:0 auto}.header{text-align:center;margin-bottom:24px}.logo-container{display:flex;justify-content:center;cursor:pointer}.logo-container img{height:88px;width:auto}.title{font-size:48px;font-weight:800;letter-spacing:-.02em;margin:0}.subtitle{margin-top:6px;color:var(--muted);font-size:14px}.title-sm{color:var(--text)}.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 auto 16px;max-width:1100px}.input{flex:1 1 420px;padding:12px 14px;border-radius:12px;border:1px solid var(--border-mid);background:color-mix(in srgb,var(--bg),#000 20%);color:var(--text)}.select{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--bg),#000 20%);color:var(--text)}.browser{width:100%;margin:0 auto;max-width:1100px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.card{padding:10px;background-color:#000;border:1px solid rgba(255,255,255,.03)}.card-inset{width:100%;display:flex;align-items:center;gap:14px}.grid .card{position:relative;background:var(--box-elev);border-radius:10px;border:1px solid var(--border-weak);box-shadow:0 1px 2px #0006,0 6px 12px #00000059,inset 0 1px #ffffff0a,inset 0 -1px #00000073;transition:box-shadow .15s ease,transform .15s ease}.grid .card:hover{background-color:color-mix(in srgb,var(--box-elev),#fff 5%);transform:translateY(-3px);box-shadow:0 4px 8px #00000073,0 10px 20px #0006}.card-image-container:hover img{transform:scale(1.02);filter:contrast(1.05) brightness(.98)}.card-song{height:100%}.card h4{margin:0 0 4px;font-size:18px;font-weight:600}.card p{margin:0;font-size:13px;color:var(--muted)}.btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:var(--btn-neutral);color:#1c1c1e;cursor:pointer}.btn:hover{background:var(--btn-neutral-hover);box-shadow:0 0 8px #ffffff1a}.btn:active{background:var(--btn-neutral-active)}.player{width:100%;max-width:none;margin:0 auto}.player-bar{display:flex;gap:12px;align-items:center;margin-bottom:12px}.pill{font-size:12px;color:#ffffffb3;border:1px solid rgba(255,255,255,.1);padding:4px 8px;border-radius:999px}.player-card{width:100%;border:1px solid var(--border-weak);box-shadow:inset 0 1px 3px #ffffff0d,inset 0 -2px 6px #00000080;box-shadow:0 1px 4px #0006;background:var(--box);color:var(--text);border-radius:12px;padding:20px}.player h2{color:var(--text)}.artist{color:var(--muted);margin-top:4px;font-size:14px}.playBtn{background-color:var(--box);color:var(--text)}.playBtn:hover{background-color:var(--btn-neutral-hover)}.playBtn:active{background-color:var(--btn-neutral-active)}.backBtn,.playBtn{background-color:var(--box);color:var(--text);border:1px solid var(--border-mid);box-shadow:0 4px 16px #0003}.backBtn:hover,.playBtn:hover{background-color:color-mix(in srgb,var(--box),#fff 10%);color:var(--text);box-shadow:0 4px 16px #0003}.backBtn:active,.playBtn:active{background-color:color-mix(in srgb,var(--box),#000 5%);color:var(--text)}.time-transport{display:flex;justify-content:space-between;align-items:center;color:#ffffffb3;font-size:14px;margin-top:10px}.wave{width:100%;border-radius:8px;padding:5px 5px 0;border:1px solid rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px #ffffff05,inset 0 2px 4px #00000059,inset 0 -2px 4px #00000059,inset 0 1px #ffffff06,inset 0 -1px #ffffff05}#waveform{background:var(--bg);isolation:auto;filter:none;transform:none;will-change:auto}#waveform ::part(region){background-color:transparent!important}#waveform ::part(regions-container){mix-blend-mode:multiply;z-index:auto!important;pointer-events:none}#waveform ::part(canvases){clip-path:none!important;-webkit-clip-path:none!important}#waveform ::part(progress){display:none!important}#waveform ::part(cursor){box-shadow:1px 0 3px #000}.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px;margin-bottom:20px}.region{aspect-ratio:1 / 1;padding:5px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;font-size:20px;font-weight:600;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--border-weak);color:var(--text);box-shadow:0 1px 2px #0006;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.region:hover{background-color:color-mix(in srgb,var(--box),#fff 6%);box-shadow:0 4px 4px #0006;transform:translateY(-2px)}.region.active{box-shadow:0 4px 4px #0006;transform:translateY(-2px)}.region .name{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.region svg{display:block}.region-text{display:inline-block;transform:translateY(-1px)}.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px}.region{aspect-ratio:1 / 1}.region.large{grid-column:span 1;aspect-ratio:1 / 1}.region.small{grid-column:span 1}.region .range{display:none}.back-tip{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.tip{text-align:center;font-size:12px;color:var(--muted)}.ghost{background-color:transparent;border:transparent}.loading-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg),transparent 30%);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:999}.loading-card{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;background:var(--box);border:1px solid var(--border-weak);color:var(--text);box-shadow:0 2px 4px #0000008c,0 6px 12px #00000073,0 12px 24px #00000040;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.loading-card{object-fit:cover;transform:translateZ(0);transition:transform .14s ease,filter .14s ease}.loading-card img{display:block;border-radius:10px;width:100%;height:100%;object-fit:cover;transform:translateZ(0);transition:transform .14s ease,filter .14s ease}.card-img-container{height:100px;width:100px;display:flex;justify-content:center;align-items:center;border-radius:10px;background:var(--box-img);border:1px solid var(--border-weak);box-shadow:0 1px 2px #00000073,0 4px 10px #00000059;overflow:hidden}.card-img-container img{display:block;width:100%;height:100%;object-fit:cover;transform:translateZ(0);transition:transform .14s ease,filter .14s ease}.red{color:#eb4a5a88}.card{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid #ffffff1a;background:var(--box-elev);border-radius:16px}.loading-card img{margin:0;padding:0;height:100px;width:100px}.loading-card h2{margin:0 0 4px;font-size:18px;font-weight:600}.loading-card p{margin:0;font-size:13px}.theme-toggle{position:fixed;top:16px;right:16px;z-index:1000;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--border-mid);background:var(--box);color:var(--text)!important;box-shadow:0 4px 16px #0003;cursor:pointer;font-size:22px;line-height:1}.theme-toggle:hover{background:color-mix(in srgb,var(--box),#fff 6%)}.theme-toggle svg{width:1em;height:1em;display:block;fill:currentColor!important;stroke:none!important;opacity:1!important}.theme-toggle svg *{fill:currentColor!important;stroke:none!important;opacity:1!important}