:root{font-family:Arial,Helvetica,sans-serif;color:#242d27;background:#f5f1e8;--green:#244b3b;--line:#d9dcd0;--muted:#667165;--accent:#bb4829}*{box-sizing:border-box}body{margin:0;padding-bottom:120px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:none;color:inherit;min-height:42px;padding:10px 13px;border-radius:7px}button:hover{background:#e3e6d9}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit}input,select{border:1px solid var(--line);border-radius:7px;background:#fffdf7;padding:12px;min-width:0;color:inherit}input[type=range]{padding:0;accent-color:var(--green)}[hidden]{display:none!important}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}header{height:86px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:16px 4%;gap:14px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:25px;font-weight:700;letter-spacing:-1px}.brand span{display:grid;place-items:center;background:var(--green);color:white;width:43px;height:43px;border-radius:50%;font:32px Georgia}.brand i{font-size:10px;color:var(--accent)}header select{max-width:180px}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1560px;margin:auto}.sidebar{padding:30px 22px;border-inline-end:1px solid var(--line)}nav{display:grid;gap:8px;margin-bottom:35px}nav button{text-align:start;font-weight:600}.active{background:#e1e6d8!important;color:var(--green);box-shadow:inset 3px 0 var(--green)}[dir=rtl] .active{box-shadow:inset -3px 0 var(--green)}.local-note{font-size:12px;color:var(--muted);line-height:1.7}.primary{background:var(--green);color:white}.primary:hover{background:#37664c}.outline{border:1px solid var(--line);background:#fffcf6}main{min-width:0;padding:0 4%}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:45px 0;border-bottom:1px solid var(--line)}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}h1{font:clamp(32px,4.2vw,62px)/1.12 Georgia,serif;letter-spacing:-1.5px;max-width:650px;margin:15px 0 28px;overflow-wrap:anywhere}.art{display:grid;grid-template-columns:1fr 1fr;gap:10px;transform:rotate(2deg);max-width:360px;margin:auto}.art img{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover}.library{padding:32px 0}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}h2{font:30px Georgia,serif;margin:0;overflow-wrap:anywhere}.heading>span{font-size:12px;color:var(--muted)}.tools{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.tools input{flex:1;min-width:160px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.card{min-width:0}.cover{position:relative;aspect-ratio:1;background:#e2e4d7;border-radius:9px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.cover button{position:absolute;background:#fffdf4ee;border-radius:50%;bottom:10px;inset-inline-end:10px;font-size:18px}.card h3{font-size:15px;margin:12px 0 5px;overflow-wrap:anywhere}.card p{font-size:12px;color:var(--muted);margin:5px 0}.card-actions{display:flex;gap:2px;flex-wrap:wrap;margin-top:8px}.card-actions button{padding:8px;font-size:17px}.card-actions button[aria-pressed=true]{color:var(--accent)}.playlist-card{padding:24px 18px;text-align:start;background:#e6e8dc;border:1px solid var(--line);min-height:150px}.playlist-card strong{display:block;font:25px Georgia;overflow-wrap:anywhere}.playlist-card span{display:block;margin-top:12px;font-size:12px;color:var(--muted)}.rows{display:grid;gap:8px}.track-row{display:flex;align-items:center;gap:12px;padding:10px;background:#fffaf1;border:1px solid var(--line);border-radius:8px}.track-row img{width:48px;height:48px;object-fit:cover;border-radius:5px}.track-row .row-title{flex:1;min-width:0;text-align:start;overflow-wrap:anywhere}.track-row small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.row-actions{display:flex;flex-wrap:wrap}.row-actions button{padding:7px;font-size:17px}.playing{outline:2px solid var(--green);outline-offset:3px}footer{display:flex;justify-content:space-between;gap:15px;padding:28px 0;font-size:12px;color:var(--muted);flex-wrap:wrap}.player{position:fixed;inset-inline:0;bottom:0;z-index:20;background:#fffcf7f5;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.3fr .65fr;gap:24px;padding:12px 4% max(14px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}.now{display:flex;align-items:center;gap:12px;min-width:0}.now img{width:54px;height:54px;border-radius:6px}.now>div{min-width:0}.now strong,.now span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.now span{font-size:11px;color:var(--muted);margin-top:6px}.transport{display:flex;justify-content:center;align-items:center;gap:6px}.play-main{background:var(--green);color:white;width:44px;border-radius:50%;font-size:20px}.transport button[aria-pressed=true]{color:var(--accent);background:#ece9d9}.timeline{display:flex;align-items:center;gap:8px;font-size:10px;margin-top:4px}.timeline input{width:100%}.volume{display:flex;align-items:center;justify-content:end;gap:12px}.volume input{width:min(120px,100%)}#status{position:fixed;z-index:50;bottom:130px;inset-inline-start:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:9px;max-width:90%;padding:12px 20px;box-shadow:0 5px 30px #0002}#status:empty{display:none}[dir=rtl] #status{transform:translateX(50%)}dialog{width:min(540px,92vw);border:1px solid var(--line);border-radius:12px;padding:24px;background:#fffcf7;color:inherit;max-height:85vh}dialog::backdrop{background:#16281b88}dialog h2{font-size:25px}#modal-body{margin:20px 0;line-height:1.6}#modal-body input,#modal-body select{width:100%}.modal-actions{display:flex;justify-content:end;gap:8px}#install-banner{padding:18px 4%;background:#e3ead9;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line)}#install-banner>div{flex:1}#install-banner p{margin:6px 0;font-size:12px}
@media(min-width:1450px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1050px){.layout{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:25px 15px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{gap:20px}.player{gap:12px;grid-template-columns:1fr 1.3fr}.volume{display:none}}
@media(max-width:680px){body{padding-bottom:155px}header{height:74px;padding:12px 5%}.brand{font-size:22px}.brand span{width:36px;height:36px;font-size:28px}header select{max-width:135px;padding:9px;font-size:13px}.layout{display:block}.sidebar{border:0;padding:0 5%}.sidebar nav{display:flex;overflow-x:auto;margin:0;padding:12px 0;gap:4px}.sidebar nav button{font-size:12px;flex:1;padding:9px;white-space:nowrap;text-align:center}.sidebar>.outline{font-size:11px;margin-bottom:8px}.local-note{margin:0 0 10px;font-size:11px}.hero{grid-template-columns:1.2fr 1fr;gap:15px;padding:24px 0}.hero h1{font-size:30px;letter-spacing:-.5px;margin:12px 0 18px}.eyebrow{font-size:9px;letter-spacing:1px}.art{gap:6px;transform:none}.art img{border-radius:5px}.hero .primary{font-size:12px}.library{padding:24px 0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}h2{font-size:26px}.tools{gap:8px}.tools input{width:100%;flex-basis:100%}.tools button{font-size:12px}.card h3{font-size:13px}.card-actions button{min-width:38px}.track-row{gap:7px;padding:7px}.track-row img{width:35px;height:35px}.row-title{font-size:12px;padding:5px}.row-actions button{padding:5px;min-width:28px;font-size:15px}.player{grid-template-columns:1fr;padding:10px 5% max(12px,env(safe-area-inset-bottom));gap:5px}.now img{width:35px;height:35px}.now strong{font-size:12px}.now>div{flex:1}.controls{display:flex;flex-direction:column}.transport{position:absolute;inset-inline-end:4%;top:8px;gap:0}.transport button{padding:7px;min-width:31px;font-size:15px}.transport .play-main{width:36px}.now{padding-inline-end:175px;min-height:43px}.now>button{display:none}.timeline{margin-top:10px}.timeline input{min-height:24px}#status{bottom:145px}#install-banner{padding:14px 5%;display:grid;grid-template-columns:1fr auto;gap:9px}#install-banner>div{grid-column:1/-1}#install-banner .primary{font-size:12px}#install-banner p{display:none}.playlist-card{padding:20px 12px}.playlist-card strong{font-size:21px}footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}