:root{color-scheme:light;--ink:#434f3e;--muted:#65685d;--cream:#f6f4ed;--line:#dcdfd3;--green:#505e45}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#fff;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-underline-offset:5px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:3px solid #9c7845;outline-offset:4px}.topbar{padding:24px max(6vw,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--cream);gap:20px}.wordmark{font:36px Georgia,serif;letter-spacing:6px;text-decoration:none}.wordmark span{display:block;font:8px system-ui;letter-spacing:2px;margin-top:6px}.app-link{font-size:13px}.intro{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:65px 5% 55px}.intro img{width:100%;height:auto}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600}.intro h1{font:400 clamp(38px,4.5vw,62px)/1.13 Georgia,serif;margin:18px 0 24px}.intro p{color:var(--muted)}.intro .lede{font-size:20px;max-width:390px}.browse-link{display:inline-block;margin-top:12px;font-size:14px}.workspace{background:var(--cream);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding:55px max(6vw,calc((100vw - 1160px)/2)) 80px;align-items:start}.library-heading h2{font:400 32px/1.25 Georgia,serif;margin:0 0 12px}.library-heading p{font-size:14px;color:var(--muted)}.search-label{font-size:13px;display:block;margin-top:25px;margin-bottom:5px}input[type=search]{width:100%;padding:13px 16px;border:1px solid #bcc4b4;border-radius:8px;background:white;color:var(--ink)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 30px}.filters button{border:1px solid #cdd2c6;background:transparent;border-radius:22px;padding:7px 13px;color:var(--ink);font-size:12px}.filters button[aria-pressed=true]{color:white;background:var(--green);border-color:var(--green)}.collection{margin:28px 0}.collection h3{font-size:17px;font-weight:500;margin-bottom:12px}.track{display:flex;align-items:center;text-align:left;width:100%;gap:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;margin:8px 0;padding:14px 16px;min-height:68px;transition:background .18s,border-color .18s}.track:hover{background:#f0f2e9;border-color:#aab79e}.track[aria-current=true]{background:#e6ebde;border-color:#7c8e6c}.play-icon{width:30px;height:30px;border:1px solid #c9d1c0;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:11px}.track-name{flex:1;font-size:15px}.duration{font-size:12px;color:var(--muted);white-space:nowrap}.player{position:sticky;top:24px;background:white;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center;box-shadow:0 12px 40px #48523c08}.player-flower{height:130px;background:url('lotus.webp') center/contain no-repeat;margin:0 0 20px}.player h2{font:400 28px/1.25 Georgia,serif;margin:16px 0}.player p:not(.eyebrow){font-size:13px;color:var(--muted)}audio{width:100%;margin:18px 0 8px}.player-actions{display:flex;align-items:center;justify-content:space-between;gap:7px}.player-actions button,.player-actions select{color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:6px 9px;min-height:40px}.player-actions label{font-size:11px}.player-actions select{font-size:12px;padding:6px}.player-status{min-height:40px;margin-bottom:0}footer{text-align:center;padding:40px 22px}footer>p:first-child{font:24px Georgia,serif}footer a{font-size:14px}.small{font-size:11px;color:var(--muted);max-width:560px;margin:25px auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:900px){.workspace{gap:24px;grid-template-columns:minmax(0,1fr) 300px;padding-inline:4%}}@media(max-width:650px){.topbar{padding:20px}.wordmark{font-size:28px}.wordmark span{font-size:6px}.app-link{font-size:11px;max-width:100px}.intro{padding:35px 24px;gap:0;grid-template-columns:1fr}.intro img{width:200px;justify-self:end;margin-top:-45px;pointer-events:none}.intro h1{font-size:42px}.intro .lede{font-size:18px}.intro>div{position:relative;z-index:1}.workspace{display:flex;flex-direction:column;padding:30px 20px 40px;gap:24px}.library{width:100%}.player{position:relative;top:auto;width:100%;order:-1;padding:20px}.player-flower{display:none}.player h2{font-size:24px;margin:8px 0}.player h2 br{display:none}.player .eyebrow{margin:0}.player-description{margin:8px}.player audio{margin:8px 0}.player-status{min-height:0}.library-heading h2{font-size:28px}.filters{max-height:150px;overflow-y:auto;padding:3px}.track{padding:13px 12px}.track-name{font-size:14px}.duration{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{transition:none}}
@media(max-width:650px){body{padding-bottom:230px}.player{position:fixed;z-index:5;bottom:0;top:auto;left:0;border-radius:16px 16px 0 0;padding:12px 20px max(12px,env(safe-area-inset-bottom));box-shadow:0 -5px 25px #434f3e12}.player h2{font:500 17px/1.3 system-ui;margin:5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player .eyebrow{font-size:9px}.player #player-description{display:none}.player-status{font-size:11px!important;margin:4px 0 0}.player audio{display:block;margin:4px 0;height:40px}.player-actions{justify-content:center;gap:24px}.intro img{margin-top:0}.workspace{padding-bottom:20px}}

.mobile-collections{display:none}@media(max-width:650px){.filters{display:none}.mobile-collections{display:block;font-size:13px;margin-top:15px}.mobile-collections select{display:block;width:100%;padding:12px;border:1px solid #bcc4b4;border-radius:8px;background:#fff;color:var(--ink);margin-top:5px}}

@media(max-width:650px){body:not(.has-track){padding-bottom:0}body:not(.has-track) .player{display:none}}

.collection-header{display:flex;align-items:center;gap:18px;margin:28px 0 14px}.collection-header h3{margin:0}.collection-art{width:76px;height:76px;object-fit:cover;border-radius:12px}.player-flower{display:block;width:100%;height:190px;object-fit:contain;background:none;margin:0 0 20px;border-radius:12px}@media(max-width:650px){.collection-art{width:64px;height:64px}.player-flower{display:none}}

.topbar .wordmark{display:block;line-height:0}.topbar .wordmark img{display:block;width:190px;height:auto}@media(max-width:650px){.topbar .wordmark img{width:150px}}

/* Follow Safari's visible viewport as its browser bars expand and collapse. */
@media (max-width:650px) {
  body.has-track { padding-bottom: calc(var(--player-height, 230px) + var(--player-bottom, 0px) + 16px); }
  .player {
    bottom: auto;
    top: max(0px, calc(min(100svh, var(--player-viewport-height, 100svh)) - var(--player-height, 230px)));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-height: min(100svh, var(--player-viewport-height, 100svh));
    overflow-y: auto;
  }
}
