:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#10121a;color:#f4f3fa}*{box-sizing:border-box}body{margin:0}main{max-width:560px;margin:auto;padding:28px 20px}.eyebrow{font-size:10px;letter-spacing:2px;color:#ada0f8;font-weight:700}h1{font-size:40px;letter-spacing:-2px;margin:10px 0}h1 span{font-size:13px;color:#9cf2cc;margin-left:12px;vertical-align:middle}p,footer{color:#a3a5b5;line-height:1.5}section{background:#1b1e2a;border:1px solid #303344;border-radius:20px;padding:20px;margin:24px 0}h2{font-size:21px;margin:8px 0 10px;overflow-wrap:anywhere}label{display:block;font-size:13px;margin:22px 0 8px}#code{width:100%;border:1px solid #44445a;border-radius:12px;background:#10121a;color:white;padding:16px;font-size:32px;letter-spacing:12px;text-align:center;font-family:monospace}button{font:inherit;cursor:pointer;background:#b6a4ff;color:#171122;border:0;border-radius:12px;padding:15px;font-weight:650;min-height:52px;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}form button{width:100%;margin-top:14px}.live{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:10px;letter-spacing:1px;color:#b6a4ff}.quiet{background:transparent;color:#bcb9ce;padding:0 8px;font-size:12px;min-height:32px}.player{background:#12151f;border-radius:12px;padding:15px}.caption{font-size:9px;letter-spacing:1.4px;color:#9f9bb3;font-weight:700}.player p{font:11px ui-monospace,monospace;margin:10px 0}progress{width:100%;accent-color:#b6a4ff;height:5px}.selection{padding:16px 2px 12px}.selection p{margin:6px 0 0;font-size:14px;color:#e8e5f2;overflow-wrap:anywhere}.transport{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}.stop{background:#502831;color:#ffd2d9}.fade{background:#38312b;color:#ffdaaa}.fade-setting{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px;background:#141720;border-radius:10px}.fade-setting label{margin:0;font-size:12px;white-space:nowrap}.fade-setting input{min-width:50px;width:100%;accent-color:#b6a4ff}.fade-setting output{min-width:30px;text-align:right;font:13px ui-monospace,monospace;color:#d8ccff}.explain{font-size:11px;margin:12px 0;line-height:1.5}.list-head{display:flex;justify-content:space-between;margin-top:24px;color:#b4afc5;font-size:10px;letter-spacing:.5px}.list-head span:last-child{color:#868297;letter-spacing:0}.track{width:100%;display:grid;grid-template-columns:22px 1fr 16px;text-align:left;align-items:center;gap:10px;background:#252838;color:#f4f3fa;margin-top:9px;padding:14px 12px;font-size:13px;overflow-wrap:anywhere}.track.selected{outline:1px solid #b6a4ff;background:#373049}.number{font:11px ui-monospace,monospace;color:#b6a4ff}.indicator{color:#a9edcf;text-align:center}footer{font-size:11px;text-align:center}button:focus-visible,input:focus-visible{outline:3px solid #9cf2cc;outline-offset:3px}#hint{font-size:11px;min-height:17px}.warning{font-size:11px;color:#ffcf9b}[hidden]{display:none!important}@media(max-width:360px){main{padding:20px 12px}section{padding:16px}.transport{gap:6px}.transport button{padding:12px 8px;font-size:14px}}