:root{--sl-ivory:#08090b;--sl-cream:#ffffff0f;--sl-sand:#77736c;--sl-terracotta:#d9a441;--sl-ink:#f5f0e8;--sl-ink-soft:#a6a3a0;--sl-sage:#91a85b;--sl-warm-white:#111318}body.light-mode,.light-mode{--sl-ivory:#f7f4ee;--sl-cream:#e7e1d8;--sl-sand:#8a8680;--sl-terracotta:#c88a32;--sl-ink:#191919;--sl-ink-soft:#66635f;--sl-sage:#7a8b6f;--sl-warm-white:#fff}body{background-color:var(--sl-ivory);transition:background-color .3s}.sl-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}.sl-hero{background:var(--sl-warm-white);text-align:center;border-bottom:1px solid var(--sl-cream);padding:3rem 1.5rem 2.5rem}.sl-eyebrow{font-family:var(--app-font-ui,"DM Sans", sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--sl-terracotta);margin-bottom:.5rem;font-size:.7rem;font-weight:700}.sl-title{color:var(--sl-ink);margin-bottom:.75rem;font-family:Dancing Script,cursive;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;line-height:1.15}.sl-sub{font-family:var(--app-font-body,"Inter", sans-serif);color:var(--sl-ink-soft);font-size:.95rem}.sl-filters{background:var(--sl-warm-white);border-bottom:1px solid var(--sl-cream);z-index:40;padding:1rem 0;position:sticky;top:64px}.sl-filter-row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.sl-search-wrap{flex:1;min-width:200px;position:relative}.sl-search-icon{color:var(--sl-sand);pointer-events:none;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.sl-search{border:1px solid var(--sl-cream);background:var(--sl-warm-white);width:100%;font-family:var(--app-font-ui,"DM Sans", sans-serif);color:var(--sl-ink);border-radius:8px;outline:none;padding:.6rem .75rem .6rem 2.5rem;font-size:.85rem;transition:border-color .2s}.sl-search:focus{border-color:var(--sl-terracotta)}.sl-filter-group{gap:.5rem;display:flex}.sl-select{border:1px solid var(--sl-cream);background:var(--sl-warm-white);font-family:var(--app-font-ui,"DM Sans", sans-serif);color:var(--sl-ink);cursor:pointer;border-radius:8px;outline:none;padding:.5rem .75rem;font-size:.8rem;transition:border-color .2s}.sl-select:focus{border-color:var(--sl-terracotta)}.sl-active-filters{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.sl-grid-section{background:var(--sl-ivory);padding:2rem 0 4rem}.sl-grid-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.sl-count{font-family:var(--app-font-ui,"DM Sans", sans-serif);color:var(--sl-ink-soft);font-size:.8rem;font-weight:600}.sl-clear-btn{font-family:var(--app-font-ui,"DM Sans", sans-serif);color:var(--sl-terracotta);cursor:pointer;background:0 0;border:none;font-size:.75rem;font-weight:600;text-decoration:underline}.sl-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;display:grid}.sl-card{background:var(--sl-warm-white);border:1px solid var(--sl-cream);border-radius:10px;flex-direction:column;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;overflow:hidden}.sl-card:hover{box-shadow:var(--app-shadow-hover,0 8px 28px #0000001a);border-color:var(--sl-sand);transform:translateY(-2px)}.sl-card-preview{background:linear-gradient(135deg, var(--sl-ivory), var(--sl-cream));border-bottom:1px solid var(--sl-cream);height:80px;position:relative;overflow:hidden}.sl-card-notes{position:absolute;inset:0}.sl-mini-note{background:var(--sl-terracotta);opacity:.4;border-radius:50%;width:6px;height:6px;position:absolute}.sl-card-key{color:var(--sl-ink-soft);background:#fffc;border-radius:4px;padding:.15rem .4rem;font-family:DM Sans,sans-serif;font-size:.6rem;font-weight:700;position:absolute;top:.5rem;right:.5rem}.sl-card-body{flex:1;padding:1rem}.sl-card-title{color:var(--sl-ink);margin-bottom:.25rem;font-family:DM Serif Display,Georgia,serif;font-size:1.05rem;line-height:1.2}.sl-card-composer{color:var(--sl-ink-soft);margin-bottom:.5rem;font-family:DM Sans,sans-serif;font-size:.75rem}.sl-card-meta{flex-wrap:wrap;gap:.35rem;display:flex}.sl-badge{text-transform:uppercase;letter-spacing:.04em;border-radius:4px;padding:.15rem .45rem;font-family:DM Sans,sans-serif;font-size:.6rem;font-weight:700}.sl-badge-beginner{color:#065f46;background:#ecfdf5}.sl-badge-intermediate{color:#92400e;background:#fef3c7}.sl-badge-advanced{color:#991b1b;background:#fee2e2}.sl-badge-cat{background:var(--sl-cream);color:var(--sl-ink-soft)}.sl-badge-sargam{color:#5b21b6;background:#f5f3ff}.sl-card-footer{border-top:1px solid var(--sl-cream);padding:.75rem 1rem}.sl-card-cta{color:var(--sl-terracotta);font-family:DM Sans,sans-serif;font-size:.75rem;font-weight:700}.sl-empty{text-align:center;padding:3rem}.sl-empty-text{color:var(--sl-ink-soft);margin-bottom:1rem;font-family:DM Sans,sans-serif;font-size:1rem}@media (width<=640px){.sl-hero{padding:3rem 1rem 2rem}.sl-filter-group{width:100%}.sl-select{flex:1}.sl-grid{grid-template-columns:1fr}.sl-filters{top:56px}}