/* Relaxing Calm Music — the site layer: player, search, page changes, "now in the garden", the pond, learn-to-play. */

/* ---------- smooth page changes (browsers that support it; skipped for reduced motion) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
.dock{view-transition-name:rcm-dock}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- the player that follows you round the site ---------- */
.dock{position:fixed;right:16px;bottom:16px;z-index:150;width:min(380px,calc(100vw - 16px));border-radius:18px;overflow:hidden;
  background:rgba(8,11,9,.94);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
.dock[hidden]{display:none}
.dock-v{position:relative;aspect-ratio:16/9;min-height:200px;background:#000}
.dock-v:empty{display:none}
.dock-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dock[data-mode="slim"] .dock-v{position:absolute;width:1px;height:1px;min-height:0;opacity:0;pointer-events:none;overflow:hidden}
.dock-bar{display:flex;align-items:center;gap:4px;padding:8px 8px 8px 10px}
.dock-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;padding:0 6px}
.dock-t b{font-weight:400;font-size:.86rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-t span{font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-b{flex:none;display:grid;place-items:center;position:relative;width:40px;height:40px;border-radius:50%;border:1px solid transparent;background:none;color:var(--ink-2);cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.dock-b:hover{color:var(--ink);border-color:var(--line-2)}
.dock-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock-pp{background:color-mix(in srgb,var(--acc) 85%,#1b221c);color:#0b100c}
.dock-pp:hover{color:#0b100c;border-color:transparent;background:var(--acc)}
.dock-sleep.on{color:var(--acc)}
.dock-sleep em{position:absolute;right:1px;top:1px;font-style:normal;font-size:.58rem;line-height:1;color:var(--acc)}
.dock-menu{padding:4px 14px 14px;border-top:1px solid var(--line)}
.dock-menu[hidden]{display:none}
.dock-menu p{font-size:.74rem;color:var(--ink-3);margin:10px 0 8px}
.dock-menu div{display:flex;flex-wrap:wrap;gap:6px}
.dock-menu button,.srch-moods button,.learn button,.inst-more button{font:inherit;font-size:.78rem;color:var(--ink-2);background:rgba(236,239,234,.04);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;min-height:36px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.dock-menu button:hover,.srch-moods button:hover,.srch-moods button[aria-pressed="true"],.learn button:hover,.inst-more button:hover,.inst-more button[aria-pressed="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 60%,transparent);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.dock[data-mode="slim"]{width:min(420px,calc(100vw - 16px))}
.dock[data-mode="slim"] .dock-next,.dock[data-mode="slim"] .dock-min,.dock[data-mode="slim"] .dock-sleep:not(.on){display:none}
.dock[data-mode="slim"] .dock-menu{display:none}
html.has-dock .ft{padding-bottom:300px}
html.has-dock-slim .ft{padding-bottom:84px}
@media (max-width:560px){.dock{right:8px;bottom:8px}html.has-dock .ft{padding-bottom:calc(56.25vw + 90px)}}
@media print{.dock,.srch{display:none!important}}

/* ---------- search ---------- */
.sbtn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--ink-2);cursor:pointer;transition:color .3s,border-color .3s}
.sbtn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.sbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media (max-width:860px){.sbtn{width:44px;height:44px;margin-left:auto}}
.srch{width:min(680px,calc(100vw - 24px));max-height:min(80vh,720px);margin:10vh auto auto;padding:0;border-radius:20px;border:1px solid var(--line-2);background:rgba(8,11,9,.97);color:var(--ink);box-shadow:0 40px 90px -20px rgba(0,0,0,.9)}
.srch::backdrop{background:rgba(2,3,2,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.srch-top{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.srch-in{flex:1}
.srch-in input{width:100%;font:inherit;font-size:1.1rem;font-weight:300;color:var(--ink);background:none;border:0;outline:none;padding:10px 0}
.srch-in input::placeholder{color:var(--ink-3)}
.srch-top:focus-within{border-bottom-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.srch-moods{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px 4px}
.srch-out{padding:6px 10px 18px;overflow:auto;max-height:calc(min(80vh,720px) - 170px)}
.srch-out h3{font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:14px 8px 6px}
.srch-out ul{list-style:none;margin:0;padding:0}
.srch-out a,.srch-out button{display:grid;grid-template-columns:34px 1fr;align-items:center;column-gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;border-radius:12px;padding:9px 8px;text-decoration:none;cursor:pointer}
.srch-out a:hover,.srch-out button:hover,.srch-out a:focus-visible,.srch-out button:focus-visible{background:rgba(236,239,234,.05)}
.srch-out .k{grid-row:span 2;text-align:center;color:var(--acc)}
.srch-out .pl{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--acc) 85%,#1b221c);color:#0b100c}
.srch-out .pl svg{width:14px;height:14px}
.srch-out b{font-weight:400;font-size:.95rem}
.srch-out small{font-size:.76rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-empty{color:var(--ink-3);font-size:.9rem;padding:14px 8px}

/* ---------- home: now in the garden ---------- */
.now{margin-top:30px;max-width:560px;padding:16px 18px;border-radius:16px;border:1px solid var(--line-2);background:rgba(4,6,5,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.88rem;color:var(--ink-2)}
.now[hidden]{display:none}
.now p{margin:0}
.now-when{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px!important}
.now-when .k{font-size:.95rem;letter-spacing:.06em;color:var(--acc);margin-right:10px;text-transform:none}
.now-when span:not(.k){text-transform:none;letter-spacing:.02em}
.now-what{font-size:1rem;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.now a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.now-play{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.8rem;color:#0b100c;background:color-mix(in srgb,var(--acc) 85%,#1b221c);border:0;border-radius:999px;padding:7px 14px 7px 10px;min-height:36px;cursor:pointer}
.now-play svg{width:14px;height:14px}
.now-also{margin-top:8px!important;font-size:.8rem;color:var(--ink-3)}
/* the light in the home hero follows the hour */
html[data-hour="dawn"] body[data-accent="moss"] .hero .pool{background:radial-gradient(circle,rgba(242,203,214,.2),transparent 62%)}
html[data-hour="day"] body[data-accent="moss"] .hero .pool{background:radial-gradient(circle,rgba(236,239,224,.2),transparent 62%)}
html[data-hour="dusk"] body[data-accent="moss"] .hero .pool{background:radial-gradient(circle,rgba(235,201,149,.22),transparent 62%)}
html[data-hour="night"] body[data-accent="moss"] .hero .pool{background:radial-gradient(circle,rgba(198,212,230,.17),transparent 62%)}
.ft-install{font:inherit;font-size:.82rem;color:var(--ink-2);background:none;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;margin-top:14px;cursor:pointer}
.ft-install[hidden]{display:none}
.ft-install:hover{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 60%,transparent)}

/* ---------- video covers: the room's picture and a play button; the player loads only on press ---------- */
.yt-cover{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);font:inherit;
  background-color:#060807;background-size:cover;background-position:center}
.yt-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,5,.05),rgba(4,6,5,.55));transition:background .4s}
.yt-cover:hover::before{background:linear-gradient(180deg,rgba(4,6,5,0),rgba(4,6,5,.42))}
.yt-cover .yt-i{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid rgba(236,239,234,.5);background:rgba(4,6,5,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .4s var(--ease),border-color .4s}
.yt-cover .yt-i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--acc)}
.yt-cover:hover .yt-i,.yt-cover:focus-visible .yt-i{transform:scale(1.07);border-color:var(--acc)}
.yt-cover:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.yt-cap{position:absolute;left:14px;bottom:11px;font-size:.7rem;letter-spacing:.04em;color:rgba(236,239,234,.78)}
@media (prefers-reduced-motion:reduce){.yt-cover .yt-i{transition:none}}

/* ---------- the music library (/music) ---------- */
button.pill{font:inherit;font-size:.9rem;cursor:pointer}
.lib-tools{position:sticky;top:76px;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0;margin-bottom:18px;background:rgba(4,6,5,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.lib-q{flex:1 1 240px}
.lib-q input,.lib-sel select{width:100%;font:inherit;font-size:.9rem;color:var(--ink);background:rgba(236,239,234,.04);border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;min-height:44px}
.lib-sel select{width:auto;padding-right:34px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.lib-sel option{background:#0b0e0c;color:var(--ink)}
.lib-q input:focus,.lib-sel select:focus{outline:2px solid var(--acc);outline-offset:2px}
.lib-moods{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.lib-moods button{font:inherit;font-size:.78rem;color:var(--ink-2);background:rgba(236,239,234,.04);border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;min-height:36px;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.lib-moods button:hover,.lib-moods button[aria-pressed="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--acc) 60%,transparent);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.lib-count{margin:0;font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lib-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(14px,1.6vw,22px)}
.lib-card[hidden]{display:none}
.lib-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#060807;cursor:pointer;transition:border-color .3s}
.lib-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82);transition:transform .6s var(--ease),filter .4s}
.lib-play:hover img,.lib-play:focus-visible img{transform:scale(1.04);filter:saturate(1) brightness(.95)}
.lib-play .yt-i{position:absolute;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;border:1px solid rgba(236,239,234,.5);background:rgba(4,6,5,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lib-play .yt-i::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--acc)}
.lib-play:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.lib-d{position:absolute;right:8px;bottom:8px;font-size:.72rem;padding:3px 8px;border-radius:999px;background:rgba(4,6,5,.72);color:var(--ink);font-variant-numeric:tabular-nums}
.lib-eq{position:absolute;left:10px;bottom:10px;display:none;align-items:flex-end;gap:3px;height:16px}
.lib-eq i{width:3px;height:40%;border-radius:1px;background:var(--acc);animation:rcm-eq 1.1s ease-in-out infinite}
.lib-eq i:nth-child(2){animation-delay:-.4s}.lib-eq i:nth-child(3){animation-delay:-.7s}
@keyframes rcm-eq{50%{height:100%}}
.lib-card.is-now .lib-play{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.lib-card.is-now .lib-eq{display:flex}
.lib-card.is-now:not(.playing) .lib-eq i{animation-play-state:paused}
.lib-card.playing .yt-i::after{left:50%;width:12px;height:14px;border:0;border-left:4px solid var(--acc);border-right:4px solid var(--acc);box-sizing:border-box}
.lib-t{margin:10px 2px 2px;font-size:.95rem;font-weight:400;line-height:1.3;color:var(--ink)}
.lib-r{display:inline-block;margin:0 2px;font-size:.78rem;color:var(--ink-3);text-decoration:none}
a.lib-r:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.lib-empty{padding:30px 0;color:var(--ink-2)}
.lib-empty button{font:inherit;color:var(--acc);background:none;border:0;text-decoration:underline;cursor:pointer}
@media (max-width:760px){.lib-tools{top:68px}.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lib-t{font-size:.86rem}.lib-sel{flex:1 1 40%}.lib-sel select{width:100%}
  .lib-moods{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}.lib-moods::-webkit-scrollbar{display:none}.lib-moods button{flex:none}}
@media (prefers-reduced-motion:reduce){.lib-eq i{animation:none;height:70%}.lib-play img{transition:none}}

/* ---------- headings put in order by the build (extras.py): same look as before ---------- */
h2.eyebrow{margin-top:0;line-height:1.65}
[data-legacy] h1.title{font-family:var(--sans)!important;font-weight:200;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.025em;line-height:1.08;color:var(--ink);margin:0;text-transform:none}
[data-legacy] .feat h3.h4,[data-legacy] .tile h3.h4{font-family:var(--sans)!important;font-weight:300;letter-spacing:-.01em;color:var(--ink);font-size:.98rem;margin:10px 0 5px}
[data-legacy] h2.h3,[data-legacy] h3.h4,[data-legacy] h3.h5,[data-legacy] h4.h5{font-family:var(--sans)!important;font-weight:300;letter-spacing:-.01em;color:var(--ink)}

/* ---------- the pond under each instrument: ripples where you play ---------- */
.inst-stage{position:relative}
.inst-pond{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:14px;mix-blend-mode:screen;z-index:2}
.inst-str.next::before{opacity:1;width:2.4px;background:var(--acc);box-shadow:0 0 18px var(--acc),0 0 4px #fff;animation:rcm-glow 1.6s ease-in-out infinite}
.inst-str.next .lb{color:var(--acc)}
.inst-pad.next{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
@keyframes rcm-glow{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.inst-str.next::before{animation:none}}

/* ---------- learn, record, drone, duet ---------- */
.inst-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.inst-more .sep{width:1px;height:22px;background:var(--line-2);margin:0 4px}
.inst-more .rec[aria-pressed="true"]{color:#F2C49B;border-color:rgba(242,196,155,.6);background:rgba(242,196,155,.08)}
.inst-more .rec[aria-pressed="true"]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#E2685C;margin-right:7px;vertical-align:1px}
.learn{margin-top:12px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));background:color-mix(in srgb,var(--acc) 5%,transparent);font-size:.86rem;color:var(--ink-2)}
.learn[hidden]{display:none}
.learn b{color:var(--ink);font-weight:400}
.learn .lyr{display:block;margin:6px 0 10px;color:var(--acc);font-size:1rem}
.learn .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.learn .bar{height:3px;border-radius:2px;background:var(--line);margin-top:10px;overflow:hidden}
.learn .bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .3s}
.learn input{width:100%;margin-top:8px;font:inherit;font-size:.78rem;color:var(--ink-2);background:rgba(0,0,0,.3);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px}