@font-face{font-family:Google Sans Code;src:url(/fonts/google-sans-code/static/GoogleSansCode-Regular.ttf)format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Google Sans Code;src:url(/fonts/google-sans-code/static/GoogleSansCode-Bold.ttf)format("truetype");font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Google Sans Code;src:url(/fonts/google-sans-code/static/GoogleSansCode-Italic.ttf)format("truetype");font-style:italic;font-weight:400;font-display:swap}@font-face{font-family:Google Sans Code;src:url(/fonts/google-sans-code/static/GoogleSansCode-BoldItalic.ttf)format("truetype");font-style:italic;font-weight:700;font-display:swap}@font-face{font-family:Noto Sans JP;src:url(/fonts/noto-sans-jp/NotoSansJP-VariableFont_wght.ttf)format("truetype");font-style:normal;font-weight:100 900;font-display:swap}:root{color:#aaa;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#000;font-family:Google Sans Code,Noto Sans JP,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;line-height:1.4}body{margin:0}main{box-sizing:border-box;width:100%;min-height:100dvh;margin:0;padding:8px}h1{border-bottom:1px solid #555;margin:0 0 8px;padding-bottom:8px;font-size:24px}.status{color:#0aa}.transport{flex-wrap:wrap;align-items:center;gap:16px;display:flex}button{font:inherit;color:#0aa;cursor:pointer;background:0 0;border:1px solid #555;padding:8px 16px}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline-offset:4px;outline:2px solid #0aa}.pattern{border-block:1px solid #555;align-items:center;gap:12px;padding:8px 0;display:flex}.pattern label{flex-shrink:0}.pattern input{min-width:0;font:inherit;color:#0aa;background:#000;border:1px solid #555;flex:1;padding:8px}.pattern input:focus-visible{outline-offset:2px;outline:2px solid #0aa}.pattern input[aria-invalid=true]{border-color:#f55}.help{color:#aaa}[data-status=error]{color:#f55}.parameter-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:16px;display:grid}.parameter-grid label{gap:4px;display:grid}.parameter-grid input{box-sizing:border-box;width:100%;font:inherit;color:#aaa;background:0 0;border:1px solid #555;padding:8px}.parameter-grid input:focus-visible{outline-offset:2px;outline:2px solid #0aa}.parameter-grid input[aria-invalid=true]{border-color:#f55}.transport input{width:76px}.transport input,select{font:inherit;color:#aaa;background:#000;border:1px solid #555;padding:8px}.track{margin:12px 0}.track-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.track-actions button{padding:4px 8px;font-size:13px}.parameter-grid[hidden],.parameter-grid label[hidden],.preset-control[hidden],.waveform-control[hidden]{display:none}#help-panel{z-index:5;bottom:var(--keyboard-help-height,2em);height:var(--help-height,50dvh);background:#000;flex-direction:column;display:flex;position:fixed;left:0;right:0}#help-panel[hidden]{display:none}main.help-visible{height:calc(100dvh - var(--help-height,50dvh) - var(--keyboard-help-height,2em));min-height:0;padding-bottom:1em;overflow-y:auto}#help-resize{cursor:ns-resize;touch-action:none;background:#222;border-top:1px solid #0aa;flex:0 0 14px}#help-resize:after{content:"";border-top:3px solid #aaa;width:48px;margin:5px auto;display:block}#help-resize:hover,#help-resize:focus-visible{outline-offset:-2px;background:#033;outline:2px solid #ff5}.help-header{color:#000;background:#0aa;justify-content:space-between;align-items:center;gap:1ch;padding:.3em 1ch;display:flex}.help-header button{flex-shrink:0}.help-scroll{overscroll-behavior:contain;flex:1;min-height:0;scroll-padding-top:1em;overflow-y:auto}kbd{border:1px solid #666;padding:.1rem .3rem}dialog{color:#ddd;background:#171717;border:1px solid #888;max-width:min(90vw,36rem)}dialog::backdrop{background:#000000b3}*{box-sizing:border-box}html{scroll-padding-bottom:0}main{padding:0 0 var(--keyboard-help-height,2em);flex-direction:column;display:flex}h1{color:#000;background:#0aa;border:0;margin:0;padding:0 1ch;font-size:1rem;font-weight:700}h2{color:#ff5;margin:0 0 1em;font-size:1rem}p{margin:0}p:empty{display:none}.transport,.track{margin:0;padding-block:0}.transport{color:#0aa;gap:0;padding-inline:1ch}.transport label{white-space:nowrap;color:#0aa;align-items:center;display:flex}.transport label:focus-within{color:#ff5}button{color:#fff;background:#000;border-color:#aaa;border-radius:0;padding:0 1ch}button:hover:not(:disabled),button:focus-visible{color:#000;background:#0aa}button:disabled{color:#555;opacity:1;border-color:#555}:is(button,input,select,textarea,summary):focus-visible{outline-offset:1px;outline:1px solid #ff5}input,select,textarea{border-radius:0}.transport input{appearance:textfield;width:4ch}.transport input::-webkit-inner-spin-button{appearance:none;margin:0}.transport input::-webkit-outer-spin-button{appearance:none;margin:0}.transport input,select{color:#ff5;padding:0 .5ch}.transport input{height:1lh;line-height:inherit;color:#fff;background:#000;border:0;margin:0;display:block}.transport input:focus-visible{outline:none}.track-workspace{flex-direction:column;flex:1;gap:0;min-width:0;padding:0 1ch;display:flex}#tracks{flex:1;min-width:0}#track-diagnostics .track-diagnostic{color:#f55;overflow-wrap:anywhere;margin:.25em 0}#track-diagnostics:empty{display:none}.track{padding-inline:0}.track[data-selected=true] .track-label{color:#ff5}.pattern{border:0;gap:1ch;padding:0}.pattern label{color:#0aa}.pattern input{color:#fff;border:0;padding:0 .5ch}.track-actions{gap:.25em 1ch;margin:0}.track-actions button{font-size:inherit;padding:0 1ch}.parameters{border:0;padding:0}.parameter-grid{flex-direction:column;gap:.25em;margin-top:.25em;display:flex}.parameter-grid label,.type-control>label,.preset-control>label{align-items:center;gap:1ch;display:flex}.parameter-grid label>span,.type-control>label>span,.preset-control>label>span{flex-shrink:0;min-width:8ch;display:inline-block}.parameter-grid input{color:#ff5;width:18ch;min-width:0;max-width:100%;padding:0 .5ch}#help-title{color:#000;background:#0aa;margin:0;font-size:1.125rem}#help-panel .help-content{box-sizing:border-box;color:#ddd;overflow-wrap:anywhere;max-width:48rem;margin:0 auto;padding:1em clamp(1ch,4vw,3ch) 2em;font-family:Noto Sans JP,sans-serif;font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.8}#help-panel .help-intro{margin-top:0}#help-panel .help-index{border-block:1px solid #555;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em 2ch;padding:1em 0;display:grid}#help-panel .help-index a{color:#0dd;text-underline-offset:.25em}#help-panel .help-section{margin-top:2.5em}#help-panel h3{font:inherit;color:#fff;background:#033;border-left:.3em solid #0aa;margin:0 0 1em;padding:.4em 1ch;scroll-margin-top:3em;font-size:1.2em;font-weight:700}#help-panel h4{font:inherit;color:#0dd;margin:1.5em 0 .5em;font-weight:700}#help-panel p{margin:.75em 0}#help-panel ol{margin:.75em 0;padding-left:2em}#help-panel li{margin-bottom:.5em}#help-panel dl{margin:0}#help-panel dt{color:#fff;font-weight:700}#help-panel dd{margin:0}#help-panel .help-actions{grid-template-columns:minmax(10ch,.3fr) 1fr;gap:.75em 2ch;display:grid}#help-panel .help-examples dt{margin-top:1em}#help-panel .help-examples dd{border-bottom:1px solid #333;margin-top:.25em;padding-bottom:.75em}#help-panel code{color:#ff5;font-family:Google Sans Code,Noto Sans JP,monospace}#help-panel kbd{color:#fff;white-space:nowrap;font-family:Google Sans Code,Noto Sans JP,monospace;font-weight:700}#help-panel kbd:before,#help-panel kbd:after{content:none}@media (width<=480px){#help-panel .help-index{grid-template-columns:1fr}#help-panel .help-actions{grid-template-columns:1fr;gap:.25em}#help-panel .help-actions dd{margin-bottom:.75em}}kbd{font:inherit;color:#ff5;border:0;padding:0}kbd:before{content:"["}kbd:after{content:"]"}dialog{font:inherit;color:#fff;background:#00a;border:3px double #fff;border-radius:0;padding:1em 2ch}dialog button{background:#00a}.command-buttons{gap:.25em 1ch;margin:1em 0}.pattern-input{flex:1;min-width:0;position:relative}.pattern .pattern-editor{width:100%;line-height:inherit;background:0 0;display:block;position:relative}.pattern .pattern-editor::placeholder{color:#aaa;opacity:1}.pattern-highlight-viewport{pointer-events:none;position:absolute;inset:0;overflow:hidden}.pattern-highlight{white-space:pre;color:#0000;width:max-content;min-width:100%;font:inherit;padding:0 .5ch}.pattern-highlight mark{color:#0000;background:#00a}.track[data-error-range]:not([data-error-range=""]) .pattern-editor{color:#0000;caret-color:#fff}.track[data-error-range]:not([data-error-range=""]) .pattern-highlight{color:#fff}.pattern-highlight .pattern-syntax-error{color:#f55}.type-control,.preset-control{margin-top:.25em;display:block;position:relative}.waveform-control{align-items:center;gap:1ch;margin-top:.25em;display:flex}.waveform-control>span{flex-shrink:0;min-width:8ch}.waveform-input{width:18ch;font:inherit;color:#ff5;background:#000;border:0;padding:0 .5ch}.type-input,.preset-input{width:18ch;min-width:0;font:inherit;color:#ff5;background:#000;border:1px solid #555;padding:0 .5ch}.preset-input{width:30ch;max-width:100%}.type-input[aria-invalid=true],.preset-input[aria-invalid=true]{border-color:#f55}.type-suggestions,.preset-suggestions{z-index:5;color:#fff;background:#000;border:1px solid #aaa;min-width:24ch;max-width:min(42ch,90vw);max-height:12em;position:absolute;top:100%;left:0;overflow-y:auto}.type-suggestions[hidden],.preset-suggestions[hidden]{display:none}.type-suggestions button,.preset-suggestions button{text-align:left;border:0;width:100%;display:block}.type-suggestions button[aria-selected=true],.preset-suggestions button[aria-selected=true]{color:#000;background:#0aa}main>p{padding:0 1ch}.header-actions{background:#000;flex-wrap:wrap;gap:.5em 1ch;padding:.25em 1ch;display:flex}.header-actions button{white-space:nowrap;color:#000;background:#fff;border:0;flex-shrink:0}.header-actions button:focus{color:#000;background:#0aa;outline:none}#record-button[aria-pressed=true]{color:#fff;background:#a00}.type-input,.preset-input,.parameter-grid input,.transport input[type=number]{border:0}#parameter-palette{width:min(90vw,48ch)}.parameter-command-line{align-items:center;gap:1ch;display:flex}.parameter-command-input{min-width:0;font:inherit;color:#ff5;background:0 0;border:0;flex:1;padding:0}#parameter-command-options{max-height:12em;margin:.5em 0;overflow-y:auto}#parameter-command-options button{text-align:left;border:0;width:100%;display:block}#parameter-command-options button[aria-selected=true]{color:#000;background:#0aa}#parameter-command-error{color:#f55}.parameter-command-back,.parameter-command-close{margin-top:1em}#save-slots,#pages-dialog{width:min(90vw,72ch)}#pages-dialog button:focus-visible{outline:none}.slot-modes{gap:1ch;margin-bottom:1em;display:flex}.slot-modes button[aria-pressed=true]{color:#000;background:#fff}.save-slot-list{max-height:45dvh;margin-bottom:1em;overflow-y:auto}.save-slot-list button{text-align:left;overflow-wrap:anywhere;border:0;width:100%;display:block}.save-slot-list button[aria-pressed=true]{color:#000;background:#0aa}.slot-error{color:#f55}.slot-actions{flex-wrap:wrap;gap:.5em 1ch;margin-top:1em;display:flex}.effect-suggestions{z-index:30;background:#18212b;border:1px solid #60758a;border-radius:.35rem;min-width:20rem;max-width:min(32rem,90vw);padding:.35rem;position:absolute;top:100%;left:0;box-shadow:0 .4rem 1rem #0008}.effect-suggestions button{text-align:left;color:#eef4fa;background:0 0;border:0;width:100%;padding:.5rem;display:block}.effect-suggestions button[aria-selected=true]{background:#344d65}.pattern-highlight mark.pattern-duration{background:#765000}.pattern-highlight mark.pattern-parameter{background:#465b35}.effect-suggestions{max-height:min(22rem,45vh);overflow-y:auto}.pattern{grid-template-columns:var(--line-number-width,3ch) max-content minmax(0, 1fr);align-items:start;gap:0 1ch;display:grid}.pattern .track-label{white-space:nowrap;grid-area:1/2}.pattern-line-numbers{white-space:pre;text-align:right;color:#777;-webkit-user-select:none;user-select:none;line-height:inherit;grid-area:1/1;margin:0;padding:0}.pattern-input{grid-area:1/3}.pattern .pattern-editor{resize:none;min-height:1lh;font:inherit;color:#0000;line-height:inherit;white-space:pre;overflow-wrap:normal;caret-color:#fff;border:0;margin:0;padding:0 .5ch;overflow:auto hidden}.pattern-highlight,.pattern-highlight mark{color:#fff}.pattern-highlight .pattern-comment{color:#aaa}.pattern .pattern-editor::selection{color:#fff;background:#057}#keyboard-help{z-index:10;padding:.25em 1ch calc(.75em + env(safe-area-inset-bottom,0px));color:#fff;background:#000;border-top:1px solid #333;flex-wrap:wrap;gap:.25em 2ch;font-size:1rem;display:flex;position:fixed;inset:auto 0 0}#keyboard-help span{display:inline-block}#keyboard-help kbd{color:#fff;white-space:nowrap;font-weight:700}.transport{grid-template-columns:var(--line-number-width,3ch) minmax(0, 1fr);align-items:start;gap:1ch;display:grid}.transport-line-number{text-align:right;color:#777;-webkit-user-select:none;user-select:none}.transport-values{flex-wrap:wrap;align-items:center;min-width:0;display:flex}#keyboard-help{align-items:center}#keyboard-help #space-transport{color:#000;white-space:nowrap;background:#fff;border:0;font-size:1rem}#keyboard-help #space-transport:focus,#keyboard-help #space-transport:hover{background:#0aa}#syntax-status{color:#6fa878;margin:.25em 0;font-weight:700}#app{isolation:isolate;position:relative}#music-background{z-index:-1;pointer-events:none;width:100vw;height:100dvh;position:fixed;inset:0}#music-background[hidden]{display:none}#scrolling-waveform{z-index:-1;pointer-events:none;width:100vw;height:100dvh;position:fixed;inset:0}#scrolling-waveform[hidden]{display:none}.transport,#tracks{font-size:var(--code-font-size,16px);line-height:1.9}#beat{color:#fff;width:4ch;line-height:inherit;background:#000;border:0;padding:0}#help-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;background:#101820;border-left:2px solid #0aa;padding:.6em 1ch}