:root{--font-family: "Berkeley Mono", "JetBrains Mono", "SF Mono", Consolas, monospace;--line-height: 1.5rem;--border-thickness: 2px;--text-color: #fff;--text-color-alt: #888;--background-color: #000;--background-color-alt: #111;--accent-color: #fff;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700;font-family:var(--font-family);font-optical-sizing:auto;font-weight:var(--font-weight-normal);font-style:normal;font-variant-numeric:tabular-nums lining-nums;font-size:16px;color-scheme:dark}@media(prefers-color-scheme:light){:root{--text-color: #000;--text-color-alt: #666;--background-color: #fff;--background-color-alt: #eee;--accent-color: #000}}*{box-sizing:border-box}*+*{margin-top:var(--line-height)}.cm-editor *+*{margin-top:0}html{display:flex;width:100%;margin:0;padding:0;flex-direction:column;align-items:center;background:var(--background-color);color:var(--text-color)}body{position:relative;width:100%;margin:0;padding:var(--line-height) 2ch;max-width:min(100ch,round(down,100%,1ch));line-height:var(--line-height);overflow-x:hidden;min-height:100vh}@media screen and (max-width:480px){:root{font-size:14px}body{padding:var(--line-height) 1ch}}#app{display:flex;flex-direction:column;min-height:calc(100vh - var(--line-height) * 2)}.container{display:flex;flex-direction:column;flex:1;margin:0}header{text-align:left;margin:0;padding:0;border-bottom:calc(var(--border-thickness) * 2) solid var(--text-color);padding-bottom:var(--line-height)}header h1{font-size:1.5rem;line-height:var(--line-height);margin:0;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.1ch}header .subtitle{margin:0;font-size:1rem;color:var(--text-color-alt);font-style:italic}.controls{display:flex;align-items:center;gap:2ch;padding:var(--line-height) 0;flex-wrap:wrap;border-bottom:var(--border-thickness) solid var(--text-color);margin:0}.btn{border:var(--border-thickness) solid var(--text-color);padding:calc(var(--line-height) / 2 - var(--border-thickness)) calc(2ch - var(--border-thickness));margin:0;font:inherit;font-weight:var(--font-weight-medium);height:calc(var(--line-height) * 2);width:auto;overflow:visible;background:var(--background-color);color:var(--text-color);line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;text-transform:uppercase;cursor:pointer;border-radius:0}.btn:hover{background:var(--background-color-alt)}.btn:active{transform:translate(2px,2px)}.btn:focus{--border-thickness: 3px;outline:none}.btn-primary{background:var(--text-color);color:var(--background-color)}.btn-primary:hover{background:var(--text-color-alt)}.btn-secondary{background:var(--background-color);color:var(--text-color)}.control-group{display:flex;align-items:center;gap:1ch;font-size:1rem;color:var(--text-color-alt);margin:0}.control-group *{margin:0}.control-group label{font-weight:var(--font-weight-medium);text-transform:uppercase;font-size:.875rem}.control-group input[type=range]{width:12ch;height:var(--line-height);-webkit-appearance:none;appearance:none;background:transparent;border:var(--border-thickness) solid var(--text-color);outline:none;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2ch;height:calc(var(--line-height) - var(--border-thickness) * 2);background:var(--text-color);cursor:pointer;border:none}.control-group input[type=range]::-moz-range-thumb{width:2ch;height:calc(var(--line-height) - var(--border-thickness) * 2);background:var(--text-color);cursor:pointer;border:none;border-radius:0}.control-group input[type=range]:focus{--border-thickness: 3px}.control-group input[type=number]{width:6ch;height:calc(var(--line-height) * 2);padding:0 1ch;font:inherit;font-size:1rem;font-variant-numeric:tabular-nums;background:var(--background-color);color:var(--text-color);border:var(--border-thickness) solid var(--text-color);text-align:center;-moz-appearance:textfield}.control-group input[type=number]::-webkit-outer-spin-button,.control-group input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-group input[type=number]:focus{outline:none;--border-thickness: 3px}.export-group{margin-left:auto}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:hover{transform:none;background:var(--background-color)}#tempo-value{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}.editor{flex:1;border:2px solid #fff;min-height:24rem;margin-top:var(--line-height);overflow:hidden}.editor .cm-editor{height:100%}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--line-height) / 2) 0;font-size:.875rem;color:var(--text-color-alt);border-top:var(--border-thickness) solid var(--text-color);margin-top:0}.status-bar #status{color:var(--text-color);font-weight:var(--font-weight-medium)}.status-bar .shortcuts{color:var(--text-color-alt)}.status-bar .shortcuts kbd{border:1px solid var(--text-color-alt);padding:0 .5ch;font-family:inherit}.help{padding:var(--line-height) 2ch;border:var(--border-thickness) solid var(--text-color);margin-top:var(--line-height)}.help *{margin:0}.help h3{font-size:.875rem;font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:calc(var(--line-height) / 2)}.help ul{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(24ch,1fr));gap:0}.help li{font-size:.875rem;color:var(--text-color-alt);padding:0;line-height:var(--line-height)}.help code{background:var(--background-color-alt);padding:0 .5ch;color:var(--text-color);font-family:inherit;font-weight:var(--font-weight-medium);border:1px solid var(--text-color-alt)}::-webkit-scrollbar{width:1ch;height:var(--line-height)}::-webkit-scrollbar-track{background:var(--background-color)}::-webkit-scrollbar-thumb{background:var(--text-color-alt);border:var(--border-thickness) solid var(--background-color)}::-webkit-scrollbar-thumb:hover{background:var(--text-color)}@media(max-width:60ch){.controls{justify-content:flex-start;gap:1ch}.control-group input[type=range]{width:8ch}.help ul{grid-template-columns:1fr}.status-bar{flex-direction:column;gap:calc(var(--line-height) / 2);text-align:center}}