:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e9eef7;background:#101b29;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:22px}.panel{width:min(100%,620px);padding:30px;border:1px solid #35475b;border-radius:22px;background:#1b2b3e;box-shadow:0 18px 55px #0005}header{display:flex;gap:16px;align-items:center;margin-bottom:26px}.logo{width:56px;height:56px;border-radius:16px;background:#304e73;display:grid;place-items:center;font-size:32px}h1{font-size:28px;margin:0}header p,.hint,footer{color:#b0c0d1}header p{margin:5px 0 0;font-size:14px}section{padding:18px 0;border-top:1px solid #34465a}.keys{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-weight:600;font-size:14px}select{display:block;margin-top:9px;width:100%;border:1px solid #50647b;border-radius:9px;padding:12px;color:inherit;background:#263a50;font-size:16px}.line{display:flex;justify-content:space-between;align-items:center}.space{margin-top:23px}output{font-variant-numeric:tabular-nums;font-weight:700;color:#a9d4ff}input[type=range]{width:100%;accent-color:#83bdff;margin:15px 0 3px}.hint{font-size:13px;line-height:1.5;margin:12px 0 0}.playback{text-align:center}.route{font-size:18px;font-weight:700;margin-bottom:18px}.actions{display:flex;gap:12px;justify-content:center}button{font:inherit;font-weight:700;border:0;border-radius:11px;padding:13px 32px;cursor:pointer;background:#8dc4ff;color:#102136}button:disabled{opacity:.4;cursor:default}#stop{background:#364b62;color:#fff}#status{min-height:23px;margin-top:16px;color:#c6d4e2}footer{font-size:12px;line-height:1.5;margin-top:10px}@media(max-width:440px){body{padding:10px}.panel{padding:20px 17px}h1{font-size:24px}.keys{gap:10px}button{padding:13px 22px}}