.sidebar { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:900px; margin:0 auto; padding:25px 32px }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:32px; font-weight:580; letter-spacing:-2.5px; width:max-content; line-height:1 }
.brand-dot { color:var(--accent); margin-left:-10px }
.brand-mark { display:flex; align-items:center; gap:3px; height:28px; margin-right:3px }
.brand-mark i { display:block; width:3px; border-radius:5px; background:var(--accent); height:12px }
.brand-mark i:nth-child(2) { height:25px }.brand-mark i:nth-child(3) { height:18px }.brand-mark i:nth-child(4) { height:9px }
.sidebar nav { display:flex; gap:2px; padding:4px; background:var(--pill-bg); border-radius:100px }
.nav-item { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); padding:11px 20px; border-radius:100px; border:1px solid transparent; font-size:12px; min-height:44px; white-space:nowrap }
.nav-item svg { width:17px; height:17px }@media(hover:hover) { .nav-item:hover { background:var(--accent-soft); color:var(--text) } }.nav-item.active { background:#fcfcf6; color:#264834; border-color:#d7ddcd }
.nav-indicator { display:none }
.header-utilities { display:flex; align-items:center; gap:14px }
#saved-nav { padding:8px 12px; gap:8px; font-size:12px; min-height:44px; border-radius:10px }
.saved-count { display:grid; place-items:center; width:21px; height:21px; font-size:10px; border-radius:50%; background:#e5eadb; color:#4c6246 }
.about-button { font-size:0; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:1px solid var(--line); border-radius:50% }.about-button svg { width:17px }
.compact-about { display:none }
main { max-width:760px; margin:0 auto; padding:44px 32px 26px }
.page-header { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; margin-bottom:34px }
.page-header h1 { font-family:var(--serif); font-size:clamp(32px,3.4vw,44px); font-weight:400; letter-spacing:-1.4px; line-height:1.08; margin:0 0 10px; max-width:650px; text-wrap:balance }
.page-header p:not(.page-kicker) { font-size:13px; color:var(--muted); line-height:1.6; margin:0 }
.header-actions { flex-shrink:0; justify-content:center }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#718b50; flex-shrink:0 }
.studio-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:30px }
.panel { border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:none }
.player { --text:#eef1e4; --muted:#afbdac; --line:#ffffff20; --accent:#e3e9bd; --accent-soft:#ffffff10; --panel:#18352d; --art-url:url('./art/drift.svg'); display:flex; flex-direction:column; position:relative; overflow:hidden; background:var(--panel); color:var(--text); border:1px solid #18352d; padding:26px 32px 25px; transition:background-color 1.2s ease,border-color 1.2s ease }
/* Each sound has its own illustration and the card takes that illustration's ground. */
.player[data-art="tide"] { --panel:#19333b; --art-url:url('./art/tide.svg'); border-color:#19333b }
.player[data-art="ember"] { --panel:#493e32; --art-url:url('./art/ember.svg'); border-color:#493e32 }
.player[data-art="rain"] { --panel:#233a42; --art-url:url('./art/rain.svg'); border-color:#233a42 }
.player[data-art="jazz"] { --panel:#3b2e33; --art-url:url('./art/jazz.svg'); border-color:#3b2e33 }
.player[data-art="piano"] { --panel:#1e2c33; --art-url:url('./art/piano.svg'); border-color:#1e2c33 }
.player[data-art="marimba"] { --panel:#34301f; --art-url:url('./art/marimba.svg'); border-color:#34301f }
.player[data-art="night"] { --panel:#1f2340; --art-url:url('./art/night.svg'); border-color:#1f2340 }
.player[data-art="fountain"] { --panel:#1c3536; --art-url:url('./art/fountain.svg'); border-color:#1c3536 }
.player[data-art="birds"] { --panel:#31402e; --art-url:url('./art/birds.svg'); border-color:#31402e }
.player[data-art="pink"] { --panel:#3f2f35; --art-url:url('./art/pink.svg'); border-color:#3f2f35 }
.player[data-art="brown"] { --panel:#3a2c22; --art-url:url('./art/brown.svg'); border-color:#3a2c22 }
.player-heading { display:flex; align-items:center; justify-content:space-between; z-index:1; position:relative }
.player-heading .icon-button { color:#e7eadc; border:1px solid #e0e7cf33; background:#1a302526; width:44px; height:44px; min-width:44px; min-height:44px; padding:8px }
@media(hover:hover) { .player-heading .icon-button:hover { background:#ffffff20 } }
/* The illustration sits on its own layer so it can drift on the compositor; the card never repaints for it. */
.artwork { height:260px; margin:-62px -32px -2px; flex-shrink:0; position:relative; overflow:hidden }
.artwork:before { content:''; position:absolute; inset:0; background:var(--art-url) center/cover no-repeat; will-change:transform }
.artwork:after { content:''; position:absolute; inset:0; background:linear-gradient(#112d2830,transparent 28%,transparent 78%,var(--panel)) } /* taste-skill-ignore: scrim that lets the painting meet the card */
.track-info { text-align:center; position:relative; padding-top:4px }
.track-info h2 { font-family:var(--serif); font-size:40px; font-weight:400; letter-spacing:-1px; margin:0 0 10px }
.track-info p { font-size:11px; letter-spacing:.2px; color:#c0cdbb; margin:0 }.middle-dot { padding:0 9px; color:#91a18e }
.waveform-wrap { height:37px; width:min(65%,280px); margin:21px auto 18px }#waveform { display:block; width:100%; height:100% }
.transport { display:flex; align-items:center; justify-content:center; gap:27px }
.play-button { width:66px; height:66px; border:1px solid #f3f5db; border-radius:50%; background:#e3e9bd; display:grid; place-items:center; color:#1e382b; position:relative; isolation:isolate }
@media(hover:hover) { .play-button:hover { transform:scale(1.045); background:#f1f3d6 } }
.play-glyph { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid #294331; margin-left:3px }
/* While playing a soft halo breathes behind the button: a scaled disc, so it costs the compositor and not a repaint. */
.play-button:before { content:''; position:absolute; inset:-1px; z-index:-1; border-radius:50%; background:#dbe6bb; opacity:0; pointer-events:none }
.playing .play-button:before { animation:breathe 5.5s ease-in-out infinite }
@keyframes breathe { 0%,100% { transform:scale(1); opacity:0 } 50% { transform:scale(1.42); opacity:.08 } }
:is(.playing,.starting) .play-glyph { width:13px; height:16px; border:0; border-left:4px solid #294331; border-right:4px solid #294331; margin:0 }
.secondary-control { color:#d2dcc5; border:1px solid #ffffff16 }.secondary-control svg { width:17px; height:17px }
.session-state { text-align:center; font-size:11px; color:#b8c7ae; margin:19px 0 24px; min-height:16px; line-height:1.6 }
.session-progress { height:3px; background:#ffffff1f; border-radius:10px; overflow:hidden; flex-shrink:0 }#session-fill { display:block; height:100%; width:100%; background:#dce8b9; transform-origin:left; transform:scaleX(var(--progress,0)); transition:transform .25s linear; border-radius:10px }
.player-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10px; color:#b7c5b0; margin-top:13px }
/* Apple Health heart line (iPhone app): the heart beats at the reading it shows, a quick swell and a slower fall. */
.heart-line { display:inline-flex; align-items:center; gap:5px }.heart-line svg { width:12px; height:12px; stroke-width:1.7; animation:heart-beat var(--beat,1s) cubic-bezier(.2,.7,.3,1) infinite }
@keyframes heart-beat { 0%,100% { opacity:.55; transform:scale(1) } 12% { opacity:1; transform:scale(1.16) } 40% { opacity:.8; transform:scale(1) } }
/* Before Health is on, the heart waits quietly in the footer; one tap connects it. */
.heart-connect { display:grid; place-items:center; width:44px; height:44px; margin:-16px 0; border:0; border-radius:50%; background:none; color:#b7c5b0; opacity:.6; transition:opacity .18s ease-out }.heart-connect svg { width:14px; height:14px; stroke-width:1.7 }
@media(hover:hover) { .heart-connect:hover { opacity:1 } }
@media(prefers-reduced-motion:reduce) { .heart-line svg { animation:none } }
.time-display { font-variant-numeric:tabular-nums; color:#e3e8d4; font-size:11px }
.mixer { padding:26px 26px 20px }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:12px }.section-top h2 { font-size:19px; font-weight:550; letter-spacing:-.6px; margin:0 }.section-top .text-button { font-size:11px; color:var(--muted) }
.section-description { color:var(--muted); font-size:12px; line-height:1.5; margin:6px 0 24px }
.setting-group { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0 }
.setting-group label { font-size:12px; font-weight:500; display:flex; align-items:center; gap:7px; white-space:nowrap }
.setting-group svg { width:15px; height:15px; color:var(--muted) }
.setting-group select { min-width:0; width:auto; max-width:67%; padding:10px; font-size:12px; min-height:40px }
.session-style-group { padding-top:0; border-top:0 }.mixer .section-top { margin-bottom:12px }.timer-group { border-bottom:1px solid var(--line); margin-bottom:24px; padding-bottom:19px }
.control-section { margin-bottom:25px }.control-label { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; font-weight:500; margin-bottom:14px }
.control-label output { background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; padding:4px 7px; border-radius:5px; min-width:36px; text-align:center }
.pulse-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:15px; padding:4px; background:var(--pill-bg); border-radius:11px }
.pulse-presets button { border:1px solid transparent; border-radius:8px; padding:8px 2px; color:var(--muted); line-height:1.35; min-width:0; min-height:44px; display:flex; flex-direction:column; justify-content:center; align-items:center }
.pulse-presets button { font-size:12px; font-weight:500 }
@media(hover:hover) { .pulse-presets button:hover { background:var(--accent-soft) } }.pulse-presets button[aria-pressed="true"] { background:var(--pill-on); border-color:var(--line); color:var(--accent) }
.custom-sound { margin:0 0 19px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:17px 0 }
.custom-sound > summary { list-style:none; cursor:pointer; font-size:12px; color:var(--text); display:flex; align-items:center; justify-content:space-between; min-height:24px }.custom-sound > summary::-webkit-details-marker { display:none }.custom-sound > summary span { font-size:19px; font-weight:300; transition:transform .3s }.custom-sound[open] > summary { margin-bottom:25px }.custom-sound[open] > summary span { transform:rotate(45deg) }
.custom-sound { margin-top:4px }
.custom-sound[open] > :not(summary) { animation:arrive .4s cubic-bezier(.2,.7,.2,1) both }
.mixer-toggle { display:inline-flex; align-items:center; gap:10px; padding:0; min-height:44px; letter-spacing:inherit; text-align:left }.mixer-toggle span { width:7px; height:7px; margin-top:-3px; border:solid var(--muted); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .3s,margin .3s }.mixer-toggle[aria-expanded="true"] span { transform:rotate(-135deg); margin-top:4px }
.mixer-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),opacity .4s }.mixer-inner { min-height:0; overflow:clip; overflow-clip-margin:6px }
.mixer.folded .mixer-body { grid-template-rows:0fr; opacity:0 }.mixer.folded .mixer-inner { overflow:hidden }.mixer.folded .section-top { margin-bottom:14px }.section-top { transition:margin .4s }
.volume-row { display:flex; align-items:center; gap:12px; padding:1px 0 }.volume-row .icon-button { width:44px; height:44px; min-width:44px; min-height:44px; padding:7px; border:1px solid var(--line); color:var(--accent) }.volume-row svg { width:18px }.volume-row output { font-size:11px; color:var(--muted); width:32px; text-align:right; flex-shrink:0 }.volume-row input { flex:1; min-width:0 }
.sound-section { margin-top:4px }.section-heading { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; margin-bottom:14px }.section-heading h2 { font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-.5px; margin:0 }.section-heading p { font-size:12px; line-height:1.6; color:var(--muted); margin:0; transition:opacity .3s }
.sound-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px }
.sound-tile { display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px 2px 11px; border:1px solid transparent; border-radius:18px; text-align:center; min-width:0; min-height:44px; transition:background-color .35s,border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1) }
@media(hover:hover) { .sound-tile:hover { background:var(--accent-soft); transform:translateY(-2px) } }.sound-tile.selected { background:var(--panel); border-color:var(--line) }
.tile-art { width:48px; height:48px; border-radius:50%; background:#dfe4d6 center/cover; transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .35s }
.sound-tile.selected .tile-art { transform:scale(1.06); box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--accent) }
.tile-art[data-art="drift"] { background-image:url('./art/drift.svg') }.tile-art[data-art="tide"] { background-image:url('./art/tide.svg') }.tile-art[data-art="ember"] { background-image:url('./art/ember.svg') }.tile-art[data-art="rain"] { background-image:url('./art/rain.svg') }.tile-art[data-art="jazz"] { background-image:url('./art/jazz.svg') }.tile-art[data-art="piano"] { background-image:url('./art/piano.svg') }.tile-art[data-art="marimba"] { background-image:url('./art/marimba.svg') }.tile-art[data-art="night"] { background-image:url('./art/night.svg') }.tile-art[data-art="fountain"] { background-image:url('./art/fountain.svg') }.tile-art[data-art="birds"] { background-image:url('./art/birds.svg') }.tile-art[data-art="pink"] { background-image:url('./art/pink.svg') }.tile-art[data-art="brown"] { background-image:url('./art/brown.svg') }
.tile-text { display:flex; flex-direction:column; gap:3px; min-width:0; max-width:100% }.tile-name { font-size:12px; font-weight:500; color:var(--text); overflow-wrap:anywhere }.tile-tag { display:none; font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.page-footer { display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin-top:40px; padding:22px 0 0; border-top:1px solid var(--line) }.page-footer>span { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); margin-right:auto }.page-footer .text-button { font-size:11px; min-height:44px }.page-footer svg { width:15px; height:15px }.page-footer .small-icon { width:12px }
.creator-credit { width:100%; margin:5px 0 0; text-align:center; font-size:11px; line-height:1.6; color:var(--muted) }.creator-credit a { color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.keyboard-hint { text-align:center; color:var(--muted); font-size:9px; letter-spacing:.2px; margin-top:18px }.keyboard-hint span { padding:0 12px }
.saved-item { display:flex; gap:12px; align-items:center; border-top:1px solid var(--line); padding:16px 0 }.saved-item .load-mix { text-align:left; flex:1; font-size:16px; min-width:0; min-height:44px; overflow-wrap:anywhere }.saved-item small { display:block; color:var(--muted); font-size:11px; margin-top:7px; line-height:1.5 }.saved-item .text-button { font-size:11px; min-height:44px }

#toast { position:fixed; bottom:calc(25px + env(safe-area-inset-bottom,0px)); left:50%; transform:translate(-50%,20px); background:#2b4938; color:#f4f5e5; padding:15px 22px; border-radius:13px; font-size:12px; line-height:1.5; width:max-content; max-width:min(calc(100vw - 32px),520px); box-shadow:0 10px 36px #16302430; z-index:10; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s }#toast.visible { opacity:1; transform:translate(-50%,0) }
@media(max-width:1050px) { .sidebar { padding:22px 32px }.header-utilities { gap:8px }.sidebar nav { gap:0 }.nav-item { padding:10px 15px }main { padding:36px 32px 24px }.mixer { padding:24px 22px }.player { padding-left:26px; padding-right:26px }.artwork { margin-left:-26px; margin-right:-26px; height:240px } }
@media(max-width:760px) {
  .sidebar { display:grid; grid-template-columns:1fr auto; gap:21px; padding:23px 24px 0; border:0 }.brand { font-size:36px }.header-utilities { grid-column:2; grid-row:1 }.sidebar nav { grid-column:1/-1; grid-row:2; width:100%; justify-content:center }.nav-item { flex:1; min-height:44px; font-size:13px }.about-button { display:none }#saved-nav { padding:8px 0; font-size:11px }.saved-count { width:20px; height:20px }
  main { padding:30px 24px 25px }.page-header { gap:18px; margin-bottom:26px }.page-header h1 { font-size:36px; max-width:440px; letter-spacing:-1.2px }.page-header p:not(.page-kicker) { font-size:13px }.page-kicker { margin-bottom:14px; font-size:9px }.header-actions { justify-content:center }.studio-grid { grid-template-columns:minmax(0,1fr); gap:22px }.player { padding:24px 26px }.artwork { height:250px; margin-top:-60px }.track-info h2 { font-size:38px }.mixer { padding:26px }.control-label { font-size:13px }.setting-group label { font-size:13px }.setting-group select { font-size:13px; min-height:44px }.sound-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:76px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -24px; padding:0 24px; gap:2px }.sound-grid::-webkit-scrollbar { display:none }.sound-tile { scroll-snap-align:start }.page-footer { gap:12px 20px; margin-top:28px; justify-content:flex-start }.page-footer>span { width:100%; margin-bottom:2px; line-height:1.6 }.creator-credit { text-align:left }.keyboard-hint { display:none }.compact-about { display:flex; margin-top:12px; font-size:11px }.section-description { font-size:12px }
}
@media(max-width:380px) { .sidebar { padding-left:18px; padding-right:18px }main { padding-left:18px; padding-right:18px }.page-header h1 { font-size:32px }.player { padding-left:22px; padding-right:22px }.artwork { margin-left:-22px; margin-right:-22px; height:230px }.mixer { padding:22px }.tile-art { width:46px; height:46px }.setting-group label { font-size:12px }.setting-group select { font-size:12px } }

.more-sounds { display:flex; flex-direction:column; align-items:center; margin-top:10px }
.more-toggle { font-size:11px; color:var(--muted); padding:8px 14px; min-height:44px; border-radius:100px; letter-spacing:.2px }.more-toggle:after { content:'+'; margin-left:7px; display:inline-block; transition:transform .4s }@media(hover:hover) { .more-toggle:hover { color:var(--text) } }
.more-list { display:flex; justify-content:center; gap:8px; max-height:0; opacity:0; overflow:hidden; visibility:hidden; transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility 0s .5s }
.more-sounds.open .more-list { max-height:64px; opacity:1; visibility:visible; transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s .05s }.more-sounds.open .more-toggle:after { transform:rotate(45deg) }
@media(hover:hover) { .more-sounds:hover .more-list,.more-sounds:focus-within .more-list { max-height:64px; opacity:1; visibility:visible; transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s .05s }.more-sounds:hover .more-toggle:after { transform:rotate(45deg) } }
.sound-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; margin:6px 0; border:1px solid var(--line); border-radius:100px; font-size:12px; color:var(--text); min-height:44px; transition:background-color .3s,border-color .3s }.sound-chip .tile-art { width:26px; height:26px }@media(hover:hover) { .sound-chip:hover { background:var(--accent-soft) } }.sound-chip.selected { background:var(--panel); border-color:var(--accent) }.sound-chip.selected .tile-art { transform:none; box-shadow:none }

/* Quieter layout: the player leads, everything else steps back. */
:root { --ease-calm:cubic-bezier(.2,.7,.2,1); --ease-soft:cubic-bezier(.4,0,.2,1) }
main { max-width:640px; padding-top:20px }
.sidebar { max-width:760px; padding-top:22px; padding-bottom:22px }
.brand { font-size:26px; letter-spacing:-1.6px }.brand-mark { height:22px }.brand-mark i:nth-child(2) { height:20px }.brand-mark i:nth-child(3) { height:15px }
.sidebar nav { background:transparent; padding:0 }.nav-item { padding:8px 14px; min-height:44px; font-size:12px }.nav-item.active { box-shadow:none; border-color:transparent; background:var(--accent-soft); color:var(--text) }
.icon-nav { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; gap:4px }#focus-enter { background:none; border-color:transparent; color:inherit; box-shadow:none }@media(hover:hover) { #focus-enter:hover { background:var(--accent-soft) } }.icon-nav svg { width:17px; height:17px }#saved-nav { width:auto; padding:0 10px; border-radius:100px }
.saved-count { width:auto; height:auto; background:none; font-size:11px; color:var(--muted) }
.player { padding:22px 28px 22px }.artwork { height:200px; margin:-58px -28px 0 }.artwork:before { background-position:50% 18% }
.player-heading { justify-content:flex-end; gap:8px }
.track-info h2 { font-size:34px; margin-bottom:6px }
.waveform-wrap { margin:16px auto 14px }
.secondary-control { width:44px; height:44px; min-width:44px; min-height:44px; padding:8px; opacity:.7; transition:opacity .3s,background-color .3s,transform .3s var(--ease-calm) }.secondary-control:focus-visible { opacity:1 }@media(hover:hover) { .secondary-control:hover { opacity:1 } }
.session-state { margin:14px 0 20px }.session-progress { height:2px }
.player-footer { justify-content:space-between }
.sound-section { margin-top:-6px }
.sound-tile.selected { background:none; border-color:transparent }@media(hover:hover) { .sound-tile:hover { background:none } }
.mixer { transition:background-color .5s var(--ease-soft),border-color .5s var(--ease-soft),padding .5s var(--ease-soft) }
.mixer.folded { background:none; border-color:transparent; padding:0 4px }
.mixer.folded .section-top { margin-bottom:4px }
.section-top h2 { font-size:15px; font-weight:500; letter-spacing:-.2px }
.reset-mix { display:block; margin:4px auto 12px; font-size:11px; color:var(--muted); min-height:44px }
.page-footer { justify-content:center; gap:4px 22px; margin-top:44px; padding-top:20px }.page-footer .text-button { font-size:11px; color:var(--muted); min-height:44px }@media(hover:hover) { .page-footer .text-button:hover { color:var(--text) } }.page-footer svg { width:13px; height:13px }
#about-dialog .creator-credit { text-align:left; margin:0 }
@media(max-width:760px) { .sidebar { padding:18px 20px 0 }main { padding:18px 16px 24px }.player { padding:20px 22px }.artwork { height:180px; margin:-56px -22px 0 }.track-info h2 { font-size:30px }.sidebar nav .nav-item svg { display:none }.sidebar nav .nav-item { font-size:13px }.sound-grid { margin:0 -16px; padding:0 16px }.page-footer { gap:2px 16px } }

/* Motion: slow, soft, and only on transform, opacity and colour. */
@keyframes rise { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
.sidebar,.player,.sound-section,.mixer,.page-footer { animation:rise .7s var(--ease-calm) both }
.player { animation-delay:.05s }.sound-section { animation-delay:.12s }.mixer { animation-delay:.18s }.page-footer { animation-delay:.24s }
.sound-tile { animation:rise .55s var(--ease-calm) both }
.sound-tile:nth-child(2) { animation-delay:.15s }.sound-tile:nth-child(3) { animation-delay:.18s }.sound-tile:nth-child(4) { animation-delay:.21s }.sound-tile:nth-child(5) { animation-delay:.24s }.sound-tile:nth-child(6) { animation-delay:.27s }.sound-tile:nth-child(7) { animation-delay:.3s }.sound-tile:nth-child(8) { animation-delay:.33s }.sound-tile:nth-child(9) { animation-delay:.36s }.sound-tile:nth-child(10) { animation-delay:.39s }.sound-tile:nth-child(11) { animation-delay:.42s }.sound-tile:nth-child(12) { animation-delay:.45s }.sound-tile:first-child { animation-delay:.12s }
.sound-tile:active .tile-art { transform:scale(.92); transition-duration:.08s }
@media(hover:hover) { .sound-tile:hover .tile-art { transform:scale(1.06) } }
.play-button { transition:transform .35s var(--ease-calm),background-color .3s,box-shadow .4s }.play-button:active { transform:scale(.94); transition-duration:.08s }
.player { transform:scale(.995); transition:background-color 1.2s ease,border-color 1.2s ease,transform .9s var(--ease-calm),box-shadow .9s var(--ease-calm) }
.player.playing { transform:none }
@keyframes softIn { from { opacity:0; filter:blur(4px) } to { opacity:1; filter:none } }
.title-in { animation:softIn .7s var(--ease-calm) both }
/* A new sound's illustration settles in over the card's own tint change, instead of cutting. */
@keyframes art-in { from { opacity:0 } }
.artwork.art-in { animation:art-in .9s var(--ease-calm) both }
.player.playing .artwork:before { animation:drift 24s ease-in-out infinite alternate }
@keyframes drift { from { transform:scale(1.04) translate(0,0) } to { transform:scale(1.08) translate(1.5%,-2%) } }
body { transition:background-color 1.2s ease }
#toast { transition:opacity .45s var(--ease-soft),transform .55s var(--ease-calm) }
.more-list .sound-chip { transform:translateY(-4px); transition:transform .5s var(--ease-calm),background-color .3s,border-color .3s }
.more-sounds.open .sound-chip { transform:none }
@media(hover:hover) { .more-sounds:hover .sound-chip { transform:none } }
@media(prefers-reduced-motion:reduce) { .player { transform:none }.artwork:before { animation:none!important } }
/* Press feedback: a quick give under the finger, a slow and easy return. */
:is(.nav-item,.session-kind button,.picker-toggle,.pulse-presets button,.sound-chip,.account-row,.mini-open,.focus-view-header button,.world-select,#focus-play,.text-button):active { transform:scale(.97); transition-duration:.08s }
:is(.pulse-presets button,.sound-chip,.text-button) { transition:background-color .3s,color .3s,border-color .3s,transform .4s var(--ease-calm) }
/* While a tap is being honoured the transport keeps its full weight; dimming would read as a stutter. */
.transport-busy :is(.transport button,.mini-play,#focus-play):disabled { opacity:1 }
.starting .play-button { transform:none }

/* What people see first: the kind of session. Everything else opens on hover or tap. */
.session-panel { display:flex; flex-direction:column; align-items:center; gap:12px; margin:4px 0 -6px; animation:rise .9s var(--ease-calm) .14s both }
.session-kind { display:inline-flex; gap:2px; padding:4px; background:var(--pill-bg); border-radius:100px }
.session-kind button { padding:9px 20px; min-height:44px; border-radius:100px; font-size:13px; color:var(--muted); transition:background-color .35s var(--ease-soft),color .35s,box-shadow .35s,transform .4s var(--ease-calm) }
@media(hover:hover) { .session-kind button:hover { color:var(--text) } }
.session-kind button[aria-pressed="true"] { background:var(--pill-on); color:var(--text) }
.session-fields { display:flex; justify-content:center; min-height:46px; align-items:center }
.session-fields .timer-group { padding:0; gap:12px; border:0; margin:0 }.session-fields .timer-group label { font-size:12px; color:var(--muted); font-weight:400 }.session-fields .minutes-field { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted) }.session-fields .timer-group input { width:72px; text-align:center; border-radius:100px; padding:8px 6px; min-height:44px; font-size:15px; font-variant-numeric:tabular-nums; background:transparent; border:1px solid var(--line); color:var(--text) }
.session-fields .pomodoro-fields { display:flex; gap:18px; align-items:center }.session-fields .pomodoro-fields > div { display:flex; align-items:center; gap:9px }.session-fields .pomodoro-fields label { margin:0; font-size:12px; color:var(--muted); font-weight:400 }.session-fields .pomodoro-fields input { width:64px; text-align:center; border-radius:100px; padding:8px 6px; min-height:44px; font-size:15px; background:transparent }
.session-fields > * { animation:softIn .5s var(--ease-calm) both }
.sound-picker { display:flex; flex-direction:column; align-items:center; margin-top:0 }
.picker-toggle { display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border:1px solid var(--line); border-radius:100px; min-height:46px; font-size:13px; transition:background-color .3s,border-color .3s,transform .4s var(--ease-calm) }
@media(hover:hover) { .picker-toggle:hover { background:var(--accent-soft) } }.picker-toggle .tile-art { width:32px; height:32px }.picker-label { color:var(--muted); font-size:12px }.picker-toggle strong { font-weight:500 }
.picker-chevron { width:7px; height:7px; margin:-3px 2px 0 4px; border:solid var(--muted); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); transition:transform .4s var(--ease-calm),margin .4s }
.picker-panel { display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden; width:100%; transition:grid-template-rows .55s var(--ease-calm),opacity .4s,visibility 0s .55s }.picker-inner { min-height:0; overflow:hidden }
.sound-picker.open .picker-panel { grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .55s var(--ease-calm),opacity .4s .05s }
.sound-picker.open .picker-chevron { transform:rotate(-135deg); margin-top:4px }
@media(hover:hover) and (pointer:fine) { .sound-picker:hover .picker-panel,.sound-picker:focus-within .picker-panel { grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .55s var(--ease-calm),opacity .4s .05s }.sound-picker:hover .picker-chevron { transform:rotate(-135deg); margin-top:4px } }
.picker-inner .sound-grid { grid-template-columns:repeat(6,minmax(0,1fr)); padding-top:16px }
/* Twelve sounds: two rows of six, or four rows of three on a phone and in the desktop side panel. */
.picker-inner .sound-grid { grid-template-columns:repeat(12,minmax(0,1fr)) }.picker-inner .sound-tile { grid-column:span 2 }
.picker-panel .more-list { max-height:none; opacity:1; visibility:visible; transition:none; padding-bottom:6px }
.picker-panel .sound-chip { transform:none }
.picker-panel .sound-tile { animation:none }
.sound-picker.open .sound-tile { animation:rise .5s var(--ease-calm) both }@media(hover:hover) { .sound-picker:hover .sound-tile { animation:rise .5s var(--ease-calm) both } }
.mixer { animation-delay:.3s }
.mixer.folded .section-top { justify-content:center }.mixer.folded .mixer-toggle { color:var(--muted); font-size:13px }
@media(max-width:760px) { .session-kind button { padding:9px 15px }.session-fields .pomodoro-fields { gap:12px }.picker-inner .sound-grid { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row; overflow:visible; margin:0; padding:14px 0 0 }.session-fields .pomodoro-fields input,.session-fields .timer-group input { font-size:16px } }
.picker-panel .sound-chip { white-space:nowrap }.picker-panel .more-list { flex-wrap:wrap }
/* Laptops and wider: the player on the left, the session, sound and settings beside it. */
@media(min-width:1100px) {
  main { max-width:1180px; padding:28px 48px 26px }
  .sidebar { max-width:1180px; padding-left:48px; padding-right:48px }
  .studio-grid { grid-template-columns:minmax(0,1.25fr) minmax(340px,.85fr); grid-template-rows:1fr auto auto auto 1fr; grid-template-areas:"player ." "player session" "player sound" "player mixer" "player ."; column-gap:64px; row-gap:28px; align-items:start; margin-top:12px }
  .studio-grid > .player { grid-area:player; padding:32px 40px }
  .studio-grid > .player .artwork { height:300px; margin:-68px -40px 0 }.studio-grid > .player .artwork:before { background-position:center }
  .picker-toggle .picker-label { display:none }
  .studio-grid > .player .track-info h2 { font-size:48px }
  .studio-grid > .session-panel { grid-area:session; align-items:flex-start; margin:0 }
  .studio-grid > .sound-picker { grid-area:sound; align-items:flex-start }
  .studio-grid > .mixer { grid-area:mixer }
  .session-fields { justify-content:flex-start }
  .session-kind button { padding:10px 24px; font-size:14px }
  .picker-inner .sound-grid { grid-template-columns:repeat(6,minmax(0,1fr)); row-gap:14px }
  .picker-panel .more-list { justify-content:flex-start }
  .mixer.folded .section-top { justify-content:flex-start }
  .mixer.folded { padding:0 }
}
@media(min-width:1500px) { main,.sidebar { max-width:1320px }.studio-grid { column-gap:96px }.studio-grid > .player .artwork { height:340px } }
.about-shortcuts { margin:16px 0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--pill-bg) }
.shortcuts-heading { font-size:13px; font-weight:550; color:var(--muted); margin:0 0 10px }
.shortcuts-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.shortcuts-list li { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text) }
.shortcuts-list kbd { display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:2px 7px; font-family:inherit; font-size:12px; font-weight:500; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:6px }
/* Taste pass: flat surfaces, one soft radius family, nothing under 11px, words at 12px or more. */
.pulse-presets { border-radius:100px }.pulse-presets button { border-radius:100px }
.control-label output { font-size:11px; border-radius:100px; padding:4px 9px }
.track-info p { font-size:13px; color:#c6d2c1 }
.session-state { font-size:13px; color:#c0cdb7 }
.session-state:empty { min-height:0; margin:16px 0 18px }
.player-footer { font-size:11px }.time-display { font-size:12px }
.volume-row output { font-size:11px }
.section-description { font-size:13px; line-height:1.6 }
.keyboard-hint { font-size:11px }
.page-footer { border-top:0; margin-top:56px; padding-top:0 }.page-footer .text-button { font-size:12px }
.compact-about { font-size:12px }
#toast { border-radius:20px; font-size:13px; box-shadow:0 10px 36px #16302424 }
.about-shortcuts { border-radius:16px; border:0 }
.update-banner { border-radius:20px }
@media(min-width:1100px) { .studio-grid { row-gap:32px } }
.page-footer>span { font-size:11px }
.page-title { font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:-.5px; line-height:1.1; margin:0 0 6px }
.artwork { background-color:#2c4a3d }
@media(max-width:360px) { .nav-item { padding:8px 10px }.header-utilities { gap:2px } }
.saved-count[hidden] { display:none }
[data-mode="sleep"] [data-session-kind="pomodoro"]:not([aria-pressed="true"]) { display:none }
[data-mode="relax"] .player .artwork { opacity:.82 }[data-mode="sleep"] .player .artwork { opacity:.6 }