*{box-sizing:border-box}html{font-family:Arial,Helvetica,sans-serif;color:#f4f6fa;background:#101820;font-size:16px}body{margin:0}main{max-width:1100px;margin:auto;padding:32px 28px}header{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}h1{font-size:26px;letter-spacing:-.6px;margin:0}header p{font-size:15px;color:#b9c7d5;margin:0}.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}.track{border:3px solid transparent;border-radius:20px;color:#fff;text-align:left;padding:24px;min-height:230px;display:flex;flex-direction:column;position:relative;transition:filter .15s,transform .15s}.track:active{transform:scale(.98)}.track:disabled{opacity:.55}.blue{background:#1260c4}.orange{background:#ae4619}.purple{background:#6946b5}.track.selected{border-color:white;box-shadow:0 0 0 4px #ffffff22}.number{font-size:16px;font-weight:bold;opacity:.8}.name{font-size:34px;font-weight:700;margin-top:auto;margin-bottom:14px}.hint{font-size:16px}.player{margin-top:24px;background:#1d2935;border:1px solid #344251;border-radius:20px;padding:26px}.playing{display:flex;justify-content:space-between;gap:14px;margin-bottom:18px}#now{font-size:20px;font-weight:700}#state{color:#b9c7d5;align-self:center;font-size:15px}input[type=range]{width:100%;height:48px;accent-color:#87bbff;cursor:pointer;margin:0}input:disabled{cursor:default}.times{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:#c8d3df;font-size:16px}.controls{display:flex;align-items:center;gap:38px;margin-top:22px}#pause{min-width:145px;min-height:58px;border:0;border-radius:12px;background:#f3f7fc;color:#152130;font-weight:bold;font-size:18px}#pause:disabled{opacity:.45}.volume{max-width:330px;flex:1}.volume span{display:flex;justify-content:space-between;font-size:16px}.volume output{color:#b9c7d5}footer{font-size:14px;color:#9baebf;margin-top:24px;text-align:center}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:5px}@media(max-width:650px){main{padding:24px 18px}header{display:block;margin-bottom:20px}header p{margin-top:10px}.buttons{gap:12px}.track{min-height:205px;padding:16px 12px;border-radius:16px}.name{font-size:25px}.hint{font-size:14px}.player{padding:20px}.controls{gap:24px}#pause{min-width:116px}.playing{flex-direction:column;gap:8px}#state{align-self:flex-start}}@media(max-width:380px){.buttons{grid-template-columns:1fr}.track{min-height:125px}.name{margin-top:12px}}
/* Eight recordings: two columns in portrait, four in landscape. */
main{padding:24px;max-width:1200px}header{margin-bottom:20px}.buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.track{min-height:150px;padding:18px;border-radius:16px;justify-content:space-between}.name{font-size:23px;line-height:1.2;margin:0 0 16px;overflow-wrap:break-word}.teal{background:#086b69}.player{position:sticky;bottom:12px;padding:18px 22px;box-shadow:0 8px 30px #0005}.playing{margin-bottom:2px;flex-wrap:wrap}#now{overflow-wrap:anywhere}.controls{margin-top:10px}.hint{font-size:14px}#pause{min-height:52px}
@media(max-width:800px){main{padding:20px 18px}.buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.track{min-height:128px;padding:16px}.name{font-size:22px}.player{margin-top:16px;padding:16px 20px}.playing{flex-direction:row}#now{font-size:18px}#state{font-size:14px}.controls{gap:24px}header{display:block}header p{margin-top:8px}}
@media(max-width:420px){.name{font-size:19px}.track{min-height:150px;padding:12px}.player{position:static}.playing{flex-direction:column}.controls{gap:18px}#pause{min-width:95px}}
@media(max-height:500px){.player{position:static}}

header{display:flex;align-items:center;justify-content:space-between;gap:20px}header h1{line-height:1.25}.load-indicator{display:block;width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:#ff5b61;box-shadow:0 0 0 5px #ff5b611a}.load-indicator.loaded{background:#39d98a;box-shadow:0 0 0 5px #39d98a1a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}