*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#1b1030;color:#fff4d6}
header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#2a1a48}header img{width:36px}h1{font-size:20px;margin:0}
main{max-width:760px;margin:auto;padding:12px}.card{background:#2a1a48;border-radius:14px;padding:12px;margin-bottom:12px}
video,canvas.pv{width:100%;max-height:45vh;background:#000;border-radius:10px;display:block}
button,select,.btn{background:#ff7a1a;color:#1b1030;border:0;border-radius:10px;padding:10px 12px;font-weight:700;font-size:15px;margin:3px;cursor:pointer}
button.alt{background:#4b3478;color:#fff4d6}button:disabled{opacity:.4}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
#tl{position:relative;height:34px;margin:10px 0}#seek{width:100%;position:absolute;top:8px}
.tick{position:absolute;top:0;width:3px;height:10px;background:#ffd23f;font-size:10px}
.tick span{position:absolute;top:-2px;left:4px;color:#ffd23f}
#marks{list-style:none;padding:0;margin:0}#marks li{display:flex;align-items:center;gap:6px;background:#3a2760;border-radius:10px;padding:6px;margin:6px 0}
#marks img{width:72px;border-radius:6px}#marks input{width:52px;padding:6px;border-radius:6px;border:0;font-size:15px}
#marks li.drag{opacity:.5}.t{font-size:13px;flex:1}.small{font-size:12px;opacity:.8}input[type=range]{flex:1}
label{margin-right:8px}#file{display:none}a.dl{color:#ffd23f;display:block;margin-top:6px}