.listen{display:flex;flex-direction:column;gap:var(--sp-4);padding-block-end:7rem}.listen.is-playing{padding-block-end:18rem}.listen__controls{position:sticky;inset-block-start:0;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-3);padding-block:var(--sp-3);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.listen__field{display:grid;gap:var(--sp-1)}.listen__field>span{color:var(--text-muted);font-size:var(--fs-caption)}.listen__field input,.listen__field select{inline-size:100%;min-block-size:var(--tap-min,44px);padding-inline:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit}.listen__field input:focus-visible,.listen__field select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.listen__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}.listen__list>li>button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);inline-size:100%;min-block-size:var(--tap-min,44px);padding:var(--sp-3) var(--sp-2);border:0;border-block-end:1px solid var(--hairline);background:transparent;color:var(--text);cursor:pointer;text-align:start;font:inherit}.listen__list>li.is-current>button{color:var(--interactive-text)}.listen__list>li>button:active{background:var(--surface-2,var(--primary-soft))}.listen__num{min-inline-size:2ch;color:var(--text-faint);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:center}.listen__name{display:flex;flex-direction:column;gap:2px;font-weight:var(--fw-medium)}.listen__meta{color:var(--text-faint);font-size:var(--fs-caption);font-weight:400}.listen__empty{padding:var(--sp-6) 0;color:var(--text-muted);text-align:center}.listen__player{position:fixed;inset-inline:0;inset-block-end:calc(5.25rem + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;gap:var(--sp-2);inline-size:min(100% - 1.5rem,44rem);margin-inline:auto;padding:var(--sp-3) var(--sp-4) var(--sp-4);border:1px solid var(--border-gold);border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 97%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg)}.listen__now{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}.listen__now strong{color:var(--interactive-text)}.listen__error,.listen__now span{color:var(--text-muted);font-size:var(--fs-caption)}.listen__error{margin:0;text-align:center}.listen__seek{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-faint);font-size:var(--fs-caption);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.listen__seek input[type=range]{flex:1 1;accent-color:var(--primary);min-block-size:var(--tap-min,44px)}.listen__transport{gap:var(--sp-4)}.listen__mode,.listen__transport{display:flex;align-items:center;justify-content:center}.listen__mode{flex-wrap:wrap;gap:var(--sp-2)}.listen__mode>span{color:var(--text-faint);font-size:var(--fs-caption)}.listen__mode button{min-block-size:32px;padding:var(--sp-1) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;color:var(--text-muted);font:inherit;font-size:var(--fs-caption);cursor:pointer}.listen__mode button.is-active{border-color:var(--primary);background:var(--primary-soft);color:var(--interactive-text);font-weight:var(--fw-medium)}.listen__mode button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}