:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f0f2f7;background:#0b1019;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{max-width:940px;margin:auto;padding:24px}
header,.brand,.titleline,.transport{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-size:19px;justify-content:flex-start}
.brand span{font-size:12px;color:#a6b1c4;font-weight:400}
.connection{color:#b0bdd0;font-size:12px;margin:14px 0 0;line-height:1.6}
.connection.connected{color:#72dfb5}
.connection.offline{color:#f2bf95}
.tag{border:1px solid #43516a;color:#c3cee0;border-radius:40px;padding:7px 12px;font-size:12px;white-space:nowrap}
.hero{padding:62px 0 34px}
.eyebrow{color:#52d6a1;font-weight:800;letter-spacing:2px;font-size:12px}
.hero h1{font-size:clamp(31px,5vw,53px);line-height:1.14;margin:12px 0}
.hero em{color:#52d6a1;font-style:normal}
.hero>p:last-child{color:#b0bbcd;max-width:680px;line-height:1.6}
.panel{background:#141c2a;border:1px solid #293549;border-radius:18px;padding:25px;margin-bottom:18px}
h2{font-size:20px;margin:0 0 20px}
h3{font-size:16px;margin:0 0 12px}
button,.upload label{background:#48c997;color:#07150f;border:0;padding:12px 17px;border-radius:10px;font-weight:750;cursor:pointer;font-size:14px;line-height:1.4}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,.upload:focus-within label{outline:3px solid #98f1cf;outline-offset:3px}
.secondary{background:#273449;color:#e3ebf8}
input:not([type=checkbox]):not([type=range]):not([type=file]){background:#0b1019;border:1px solid #52627b;color:#f0f2f7;border-radius:8px;padding:12px;font:inherit;min-width:0}
input:disabled{opacity:.6}
input[type=range],input[type=checkbox]{accent-color:#48c997}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.download-section>label{display:block;font-size:14px;margin-top:14px}
.url-entry,.library-entry{display:flex;align-items:center;gap:10px;margin-top:8px}
.url-entry input,.library-entry select{width:100%;flex:1;min-width:0}
.url-entry button,.library-entry button{flex-shrink:0}
.library-entry select{background:#0b1019;border:1px solid #52627b;color:#f0f2f7;border-radius:8px;padding:12px;font:inherit;font-size:14px}
select:focus-visible{outline:3px solid #98f1cf;outline-offset:3px}
.import-section{border-top:1px solid #2d394d;padding-top:22px;margin-top:23px}
.import-section .titleline{margin-bottom:15px;flex-wrap:wrap}
.import-section .titleline h3{margin:0}
#libraryStatus{margin-bottom:0}
#filename,.muted,.hint,footer,.format-hint{color:#b0bdd0;font-size:13px;line-height:1.6}
.upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload input:disabled+label{opacity:.45;cursor:not-allowed}
.upload label{display:inline-block}
#filename{overflow-wrap:anywhere}
.format-hint{font-size:12px;margin:8px 0 17px}
#retryPoll{margin:8px 0 0 8px}
#status{min-height:22px;margin-bottom:0;overflow-wrap:anywhere}
.titleline h2{margin:0}
.current-file{margin:12px 0 20px;overflow-wrap:anywhere}
.transport{justify-content:flex-start;flex-wrap:wrap}
.transport span{margin-left:auto;font-variant-numeric:tabular-nums;color:#c1cde0}
#seek{width:100%;margin:20px 0}
.download-save{display:inline-block;padding:12px 17px;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none}
.export-actions{display:flex;gap:10px;flex-wrap:wrap}
#exportDownload{margin:0 0 20px}
#exportStatus:empty{display:none}
.save-help{margin:8px 0 20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.stats>div{background:#0d1420;padding:18px;border-radius:12px}
.stats small{display:block;color:#a6b6cd;margin-bottom:8px;font-size:12px;line-height:1.5}
.stats strong{font-size:27px}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:14px;line-height:1.5}
.controls label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.controls input[type=range]{width:130px}
.loop{border-top:1px solid #2d394d;margin-top:26px;padding-top:20px}
.loop button{margin:4px 4px 4px 0}
.loop label{margin:0 10px;font-size:14px;white-space:nowrap;display:inline-block}
.offset{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;line-height:1.5}
.offset input{width:100px!important;padding:8px!important}
.hint{margin-top:20px}
footer{text-align:center;padding:20px;line-height:1.8}
@media(max-width:650px){main{padding:13px}.panel{padding:17px}.hero{padding-top:35px}.controls{grid-template-columns:1fr}.brand span{display:none}.brand{font-size:16px}.tag{font-size:11px;padding:7px 9px}.stats{gap:6px}.stats>div{padding:10px}.stats strong{font-size:21px}.titleline{align-items:flex-start}.transport span{width:100%;margin:2px 0 0}.offset{flex-wrap:wrap}#process{max-width:100%}#retryPoll{margin-left:0}.url-entry,.library-entry{flex-wrap:wrap}.url-entry button,.library-entry button{width:100%}}

/* Touch controls and narrow Android screens. */
.pwa-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
main{padding-bottom:max(24px,env(safe-area-inset-bottom))}
button,.upload label,select{min-height:48px;touch-action:manipulation}
input[type=range]{min-height:44px}input[type=checkbox]{width:20px;height:20px}
select{max-width:100%}header,.titleline{flex-wrap:wrap}
@media(max-width:400px){.panel{padding:14px}.stats small{font-size:11px}.stats strong{font-size:20px}.stats>div{padding:8px}.hero h1{font-size:30px}.export-actions button{width:100%}}

input[type=file]{display:block;max-width:100%;margin:10px 0 22px;color:#b0bdd0}label{line-height:1.6}a{color:#78e3bb}details{margin-top:22px;line-height:1.7}summary{cursor:pointer;font-weight:700}.notice{position:sticky;bottom:10px;padding:15px;background:#172e28;border:1px solid #48c997;border-radius:12px;z-index:2;font-size:14px}.file-button{display:inline-block;cursor:pointer;padding:12px 17px;border-radius:10px;font-size:14px;font-weight:700}.export-actions{margin:18px 0}#download{margin-top:15px}.controls input[type=number]{max-width:110px}.library-entry select{min-height:48px}.panel>label{display:block}select{overflow:hidden}.controls{margin:22px 0}button:disabled{cursor:default}@media(max-width:450px){.titleline button{width:100%}.notice{font-size:13px}.transport button{flex:1}.export-actions>*{width:100%;text-align:center}}