:root{color-scheme:dark;font:18px/1.6 system-ui,sans-serif;background:#10151a;color:#edf3fa}body{margin:0}body>a{display:block;padding:8px 24px}main{max-width:760px;margin:auto;padding:24px}a{color:#a9e8e7}section{padding:20px 0;border-top:1px solid #647482}h1{font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.2}label{display:block;margin-top:12px}input,select,textarea,button{font:inherit;color:inherit;max-width:100%;box-sizing:border-box;background:#1e2a35;border:1px solid #879aa9;border-radius:5px;padding:10px}input,select,textarea{display:block;width:100%;margin:8px 0}button{min-height:48px;cursor:pointer;border-color:#a9e8e7}button:disabled{opacity:.5;cursor:default}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}*:focus-visible{outline:3px solid #ffe482;outline-offset:4px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #647482}.table-wrap{overflow:auto}li{margin:12px 0}

html{scroll-padding-top:1rem}details{border:1px solid #647482;border-radius:5px;padding:12px;margin:16px 0}summary{cursor:pointer;font-weight:600}#controller{scroll-margin-top:1rem}#midi-status{border-left:3px solid #a9e8e7;padding-left:12px}#midi-last{font-variant-numeric:tabular-nums}button,input,select{scroll-margin:1rem}@media(max-width:480px){main{padding:16px}}