.search-wrap{max-width:1208px;margin:auto;padding-bottom:12px}#search{width:calc(100% - 48px);margin-bottom:8px}#search:focus-within{outline:2px solid #0c879b50}#search input{padding:8px 0}#types{display:flex;align-items:center;gap:6px;padding:0 24px}#types button{padding:5px 13px;border-radius:18px;font-size:13px;color:#687984}#types button.selected{background:#e0f4f5;color:#0f7f8e;font-weight:700}.live-dot{font-size:12px;color:#75878e;margin-left:auto}.live-dot:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#36a97f;margin-right:6px}.hero{margin-bottom:34px}.hero h1{font-size:clamp(36px,5vw,56px);line-height:1.16}.hero small{opacity:.9}.badge{font-size:15px}.badge strong{font-size:21px;margin-right:5px}.badge .stat-label{opacity:1;margin:0}.featured{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;gap:18px;scrollbar-width:thin}.card{flex:0 0 260px;scroll-snap-align:start}.card .art{height:146px;padding:0;overflow:hidden}.card .art img{width:100%;height:100%;object-fit:cover}.cardbody h3{min-height:26px}.card .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.art span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#dc2227cc;color:white;font-size:13px}.chips{margin-top:24px}.artist .avatar{font-size:20px;font-weight:700}.eyebrow{font-size:10px;letter-spacing:1.4px;color:#43909b;font-weight:800}.heading h2{margin-top:3px}#count{font-size:13px;color:#68818b;white-space:nowrap}.row{transition:box-shadow .15s;gap:10px}.row:hover{box-shadow:0 2px 12px #0c697611;border-color:#acced3}.song-icon{width:40px;height:42px;flex-shrink:0;background:#e9f7f7;border-radius:12px;display:grid;place-items:center;color:#1596a7;font-size:24px}.row .open{min-width:0;padding:0}.row strong{line-height:1.4;font-size:16px}.row .meta{display:block;font-size:12px;margin-top:5px}.open-label{display:block;color:#208d9b;font-size:11px;margin-top:5px}.row-yt{padding:5px 8px;border-radius:8px;background:#fff0ee;color:#d65146;font-size:13px}#status{color:#337d8a;font-size:14px;margin:0 0 15px}#status:empty{display:none}#status.error{background:#fff3dd;color:#8b681c;padding:15px;border-radius:12px}#status button{color:#0b8393;text-decoration:underline;font-weight:650}#results.loading{opacity:.45;pointer-events:none}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin:26px 0}.pagination[hidden]{display:none}.pagination button{padding:9px 16px;background:white;border:1px solid #dce7ea;border-radius:10px;color:#0f8292;font-size:14px}.pagination button:disabled{opacity:.35;cursor:default}#page-label{font-size:13px;color:#6a7b84}.source-note{display:flex;align-items:center;gap:15px;padding:18px 20px;margin-top:25px;background:#e9f3f4;border:1px solid #dcecee;border-radius:16px;color:#59747d;font-size:12px}.source-note strong{color:#2c6c78;font-size:13px}.source-note p{margin:4px 0 0}.source-note a{white-space:nowrap}.connection-icon{font-size:28px;color:#188796}#query-trail{margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}#query-trail:empty{display:none}#query-trail button{font-size:12px;background:#eaf3f4;border-radius:15px;padding:4px 12px;color:#398995}#reader{width:min(1180px,98vw);height:95dvh;max-height:95dvh;overflow:hidden;border-radius:20px;padding:0}#reader[open]{display:flex;flex-direction:column}.reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 22px 8px}.reader-head h2{font-size:23px;margin-top:2px}.reader-head p{margin:4px 0 0;font-size:12px}#close{font-size:30px;line-height:1;padding:7px 10px}.reader-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 22px 10px;font-size:13px}.reader-actions a,.reader-actions button{padding:7px 12px;border-radius:9px;border:1px solid #deebec;color:#17899a}.reader-actions #youtube{background:#d9584f;color:white;border-color:#d9584f}.frame-note{font-size:11px;color:#778b92;margin:0;padding:4px 22px 8px;border-bottom:1px solid #e7ecef}#frame-wrap{flex:1;min-height:0;background:#f7f9fb}#source-frame{height:100%;width:100%;border:0;background:white}.dark #types button{color:#a7bcc4}.dark #types button.selected,.dark .source-note,.dark #query-trail button{background:#1e363f}.dark .source-note strong{color:#a8dce1}.dark .source-note{border-color:#29434b;color:#aac2c9}.dark .pagination button{background:#1a2933;border-color:#30414b;color:#7cd1dc}.dark .song-icon{background:#213c43}.dark .row-yt{background:#422e32}.dark #status{color:#7bc5cd}.dark #status.error{background:#46391e;color:#efd19a}.dark .reader-actions a,.dark .reader-actions button{border-color:#36515b;color:#91d4dd}@media(min-width:900px){.hero br{display:none}}@media(max-width:650px){.card{flex-basis:210px}.card .art{height:120px}.hero{padding:32px 16px}.hero p{max-width:290px;margin:0 auto 16px}.badge{font-size:12px}.badge strong{font-size:17px}.live-dot{font-size:0}.live-dot:before{width:7px;height:7px}.source-note{align-items:flex-start;padding:15px;gap:12px}.source-note a{font-size:0}.source-note a:after{content:'↗';font-size:20px}.row{padding:13px 12px}.row .save{padding:3px}.row .open{padding-right:2px}.row-yt{padding:5px}.song-icon{display:none}#reader{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.reader-head{padding:12px 15px 6px}.reader-actions{padding:0 15px 8px;gap:7px;font-size:11px}.frame-note{padding:4px 15px 7px;font-size:10px}.reader-head h2{font-size:20px}.heading{gap:9px}#count{font-size:12px}.pagination{gap:12px}.pagination button{padding:8px 10px;font-size:13px}}
#catalog-frame-panel{border:1px solid #d8e7ea;border-radius:16px;overflow:hidden;background:white}#catalog-frame-panel[hidden]{display:none}.catalog-frame-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#edf7f8;font-size:12px;color:#4c7b85}.catalog-frame-toolbar strong{color:#167f8f}.catalog-frame-toolbar a{margin-left:auto;white-space:nowrap}.catalog-frame-toolbar span{flex:1}#catalog-frame{display:block;width:100%;height:85dvh;min-height:650px;border:0;background:white}.dark .catalog-frame-toolbar{background:#203942;color:#bad5dc}.dark .catalog-frame-toolbar strong{color:#88d2dc}@media(max-width:650px){.catalog-frame-toolbar{flex-wrap:wrap;padding:10px 12px;gap:5px 8px}.catalog-frame-toolbar span{order:3;flex-basis:100%;font-size:11px}#catalog-frame{height:85dvh;min-height:580px}}