:root{--primary:#fafc20 ;--bg-color:#242424;--bg-active:#1a1a1a;--fg-color:#fffc;--shadow-color:#000;box-sizing:border-box;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--fg-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;accent-color:var(--primary);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--primary:#c22;--bg-color:#f9f9f9;--bg-active:#dcdcdc;--fg-color:#000c;--shadow-color:#fff}}*{box-sizing:inherit;margin:0;padding:0}:focus-visible{box-shadow:inset 0 0 0 .125rem var(--primary);outline:none}a{color:var(--primary);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:inherit}body{flex-direction:column;align-items:center;height:100vh;margin:0;display:flex}h1{text-align:center;pointer-events:none;text-shadow:0 0 .125rem var(--shadow-color);margin-top:-2rem;font-size:clamp(2rem,4vw + 1rem,3rem);line-height:1.1}.flex-col{flex-direction:column;gap:.5rem;display:flex}.flex-fill{flex:1}#app{flex-flow:column;place-content:stretch flex-start;align-items:stretch;gap:1rem;width:100%;max-width:40rem;max-height:100vh;display:flex;overflow:clip}button{background-color:var(--bg-active);cursor:pointer;border:.0625rem solid #0000;border-radius:.5rem;padding:.5em 1em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:var(--primary)}button.btn--icon{aspect-ratio:1;fill:currentColor;color:var(--fg-color);border-radius:99rem;justify-content:center;align-items:center;padding:1rem;line-height:1;display:flex}button .btn__play{display:block}button .btn__stop{display:none}button.btn--playing .btn__play{display:none}button.btn--playing .btn__stop{display:block}.controls{white-space:nowrap;text-overflow:ellipsis;flex:none;gap:1rem;padding:0 .5rem;display:flex;overflow:hidden}.controls input,.controls label{width:100%}.controls .volume{flex:0 0 5rem}.controls .position{overflow:hidden}.controls #title.title--error{color:#e05;font-style:italic}.list{padding:0 .5rem;overflow:hidden auto}.list section{content-visibility:auto}.list h3{background-color:var(--bg-active);box-shadow:0 0 0 .25rem var(--bg-color);border-radius:.5rem;margin:0 0 .25rem;padding:.5rem 1rem;font-weight:700;line-height:1.5rem;position:sticky;top:0}.list a{cursor:pointer;color:inherit;border-radius:.5rem;justify-content:space-between;margin:0 0 .25rem;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s;display:flex}.list a span{opacity:.5;font-variant-numeric:tabular-nums}.list a:hover{background-color:var(--bg-active)}.list a:active{box-shadow:inset 0 0 0 .125rem var(--primary)}.list a.active{background-color:var(--bg-active);color:var(--primary)}