*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:#0b1220;color:#f4f7fb;font:16px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}a{color:#91b7ff;text-decoration:none}a:hover{text-decoration:underline}h1{font-size:32px;letter-spacing:-.8px;margin:12px 0}h2{font-size:20px;margin:0 0 12px}.muted{color:#9ca9bf;margin:7px 0 20px}.small{font-size:13px}.hint{font-size:13px;color:#9ca9bf}.container{max-width:880px;margin:0 auto;padding:22px 18px 68px}.narrow{max-width:460px}.top{margin-bottom:26px;display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.headline{margin-bottom:24px}.badge{font-size:12px;letter-spacing:1.7px;font-weight:700;color:#71f1c8}.panel{background:#131e30;border:1px solid #2b3950;border-radius:18px;padding:24px;margin-bottom:18px;box-shadow:0 10px 34px rgba(0,0,0,.12)}label{font-weight:600;display:block;margin-bottom:9px}input[type=password]{width:100%;padding:14px;border-radius:10px;border:1px solid #50607a;background:#0b1321;color:#fff;margin-bottom:16px;font-size:17px}input[type=file]{max-width:100%;color:#cbd7eb}.button{border:0;border-radius:11px;padding:12px 20px;background:#60d8b7;color:#08211c;font-size:14px;font-weight:750;cursor:pointer}.button.secondary{background:#2a3950;color:#eaf1ff}.text-button{background:transparent;border:0;color:#9db8ed;cursor:pointer;font-size:14px}.upload-form{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.alert{padding:12px 16px;background:#45262a;border:1px solid #bc7676;border-radius:10px;margin:15px 0}.alert.success{background:#173629;border:1px solid #377f5b}.live-status{display:flex;align-items:center;gap:10px}.dot{display:inline-block;width:9px;height:9px;background:#8692aa;border-radius:50%}.dot.online{background:#59e4b2;box-shadow:0 0 12px #59e4b2}.track-list{display:grid;gap:10px}.track-row{background:#0f1929;border:1px solid #24334b;padding:14px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.track-name{min-width:0;display:flex;gap:12px;align-items:center;overflow-wrap:anywhere;flex:1 1 200px}.track-number{font-size:12px;font-weight:800;color:#83a1c8}.track-actions{display:flex;gap:5px;flex-wrap:wrap}.track-actions form{margin:0}.mini-button{padding:7px 10px;font-size:12px;border-radius:7px;background:#26364c;color:#dce8ff;border:1px solid #42516a;cursor:pointer}.mini-button.primary{background:#1a5445;color:#adffe2}.mini-button.danger{color:#ffaaa9}.mini-button:disabled{opacity:.3;cursor:not-allowed}.empty{color:#9ca9bf;padding:26px;text-align:center;background:#101a2a;border-radius:10px}.count{font-size:13px;color:#a8b8d3;font-weight:normal}footer{color:#647895;text-align:center;font-size:13px;margin:22px 0}code{color:#9de3cd}.player-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:26px 16px}.player-card{max-width:430px;width:100%;border:1px solid #293a52;background:linear-gradient(160deg,#18283e,#101927);padding:38px 22px 24px;border-radius:24px;text-align:center;box-shadow:0 22px 60px #0004}.vinyl{display:flex;align-items:center;justify-content:center;font-size:75px;width:165px;height:165px;margin:34px auto 20px;background:radial-gradient(circle at 50% 50%,#274d4d 0 17%,#0d121f 18% 32%,#273b4d 34% 35%,#0d121f 36% 100%);border:6px solid #253449;border-radius:50%;color:#70eac2;box-shadow:0 14px 26px #0006}.player-card h1{font-size:26px}.current{min-height:48px;color:#bbcadf;margin:0 0 17px}.player-card audio{display:block;width:100%;margin:18px auto}.player-card .button{margin-top:6px}.subtle-link{font-size:13px;color:#7296b8;margin:25px 0}@media(max-width:540px){.container{padding:18px 14px 50px}.panel{padding:19px 14px}.headline h1{font-size:26px}.track-row{display:block}.track-name{margin-bottom:12px}.player-card{padding:34px 18px 24px}}

/* Generative sound controller; intentionally ES5 / old Safari friendly. */
.synth-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;flex-wrap:wrap}
.synth-heading h2{margin:8px 0}
.pill{font-size:12px;border:1px solid #38516b;background:#1b2a41;color:#9dc8de;border-radius:100px;padding:6px 12px;max-width:100%}
.synth-presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 20px}
.synth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.synth-group{min-width:0;border-radius:14px;border:1px solid #293e55;background:#0f1b2c;padding:18px}
.synth-general{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.synth-general .control{min-width:260px;flex:1;max-width:400px}
.synth-group .toggle{display:flex;align-items:center;gap:10px;color:#b3f0df;font-size:16px;margin:0 0 15px}
.synth-group input[type=checkbox]{width:19px;height:19px;accent-color:#65daba}
.synth-group .control{margin-bottom:16px}
.synth-group .control label{font-size:13px;color:#b6c6da;display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px}
.synth-group output{color:#7df1ca;white-space:nowrap}
.synth-group input[type=range]{width:100%;accent-color:#65daba;cursor:pointer;margin:8px 0 0}
.synth-group input[type=number],.synth-group select{display:block;min-width:0;width:100%;padding:10px 12px;border:1px solid #50607a;background:#18283c;color:#edf6ff;border-radius:9px;font-size:14px}
.synth-group .hint{display:block;font-size:11px;margin-top:6px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.synth-footer{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin:18px 0 8px}
.synth-footer #synth-save-state{flex:1}
@media(max-width:750px){.synth-grid{grid-template-columns:1fr}.synth-general .control{min-width:180px}}

/* iOS 12 Safari does not support `gap` in flex containers: retain visual separation. */
.top > *, .live-status > *, .track-actions > *, .synth-presets > *, .synth-footer > *, .synth-heading > *, .synth-general > * {margin-right:8px}
.synth-presets > *, .synth-footer > * {margin-bottom:8px}