:root{--bg:#161826;--panel:#1f2235;--panel-2:#2a2e46;--line:#0f1120;--text:#e2e4f0;--muted:#8a8fae;--accent:#4fd1c5;--step:#33385a;--step-alt:#3e4469;--led:#4fd1c5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;margin:0}#app{flex-direction:column;gap:12px;max-width:1200px;margin:0 auto;padding:16px;display:flex}button,select,input{font:inherit;color:var(--text)}button,select{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:4px;padding:4px 10px}button:hover,select:hover{border-color:#4a507a}button:disabled{opacity:.6;cursor:progress}button.small{padding:4px 8px}button.danger{color:#ff8f8f}input[type=number],input:not([type]){background:var(--line);border:1px solid var(--line);border-radius:4px;width:64px;padding:3px 6px}input:not([type]){width:160px}input[type=range]{width:110px;accent-color:var(--accent)}input[type=color]{background:0 0;border:none;width:36px;height:24px;padding:0}.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-wrap:wrap;gap:8px;padding:8px;display:flex}.group{border-right:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;min-width:0;padding:0 8px;display:flex}.group:last-child{border-right:none}.field{color:var(--muted);align-items:center;gap:6px;display:flex}.field output{min-width:36px;color:var(--text);font-variant-numeric:tabular-nums}.play{width:40px;font-size:16px}.play.active{background:var(--accent);color:#0b1a1a}.channels{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px;overflow-x:auto}.row{border-radius:4px;grid-template-columns:18px 28px 28px 120px 1fr;align-items:center;gap:8px;padding:3px 4px;display:grid}.row.selected{background:#ffffff0d}.led{background:#11131f;border-radius:50%;width:14px;height:14px;padding:0}.led.on{background:var(--led);box-shadow:0 0 6px var(--led)}.knob{border:1px solid var(--line);cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 50% 35%,#5a6090,#262a44);border-radius:50%;width:24px;height:24px;position:relative}.knob:after{content:"";background:var(--text);transform-origin:50% 10px;width:2px;height:9px;transform:rotate(var(--angle));border-radius:1px;margin-left:-1px;position:absolute;top:2px;left:50%}.name{text-align:left;white-space:nowrap;text-overflow:ellipsis;border-left:4px solid var(--ch);overflow:hidden}.row.selected .name{border-color:var(--ch);background:#4a507a}.steps{gap:3px;min-width:0;display:flex}.step{background:var(--step);border:1px solid var(--line);cursor:pointer;touch-action:none;border-radius:3px;flex:1 0 18px;max-width:34px;height:30px}.step.alt{background:var(--step-alt)}.step.beat{margin-left:4px}.presets{gap:4px;display:flex}.step.on{background:color-mix(in srgb, var(--ch) calc(var(--vel,1) * 100%), #222)}.step.playhead{outline-offset:-2px;outline:2px solid #fff}.grid-footer{padding:8px 4px 0}.segmented{display:flex}.segmented button{border-radius:0}.segmented button:first-child{border-radius:4px 0 0 4px}.segmented button:last-child{border-radius:0 4px 4px 0;margin-left:-1px}.segmented button.active{background:var(--accent);color:#0b1a1a}.song{background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;display:flex}.song-head{align-items:baseline;gap:10px;width:100%;display:flex}.song-head h3{margin:0}.song-pos{font-variant-numeric:tabular-nums;color:var(--accent);margin-left:auto}.song-list{flex-wrap:wrap;gap:6px;width:100%;margin:0;padding:0;list-style:none;display:flex}.song-item{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:6px;align-items:center;gap:4px;padding:4px 6px;display:flex}.song-item.current{border-color:#5d6494}.song-item.playing{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.song-item .num{color:var(--muted);text-align:right;min-width:14px}.song-item .repeats{text-align:center;font-variant-numeric:tabular-nums;min-width:28px}.song-item select{max-width:130px}.lower{grid-template-columns:1fr 280px;gap:12px;display:grid}.editor,.settings{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px}h3{margin:0 0 8px;font-size:13px;font-weight:600}.tabs{gap:4px;margin-bottom:8px;display:flex}.tab.active{background:var(--accent);color:#0b1a1a}.bars{background:var(--line);cursor:crosshair;touch-action:none;border-radius:4px;gap:3px;height:140px;padding:4px;display:flex;position:relative}.bars.bipolar:before{content:"";border-top:1px dashed #4a507a;position:absolute;top:50%;left:0;right:0}.bar{flex:1;position:relative}.fill{background:var(--ch);border-radius:2px;position:absolute;left:0;right:0}.bar.off .fill{opacity:.3}.settings{flex-direction:column;gap:10px;display:flex}.actions{flex-wrap:wrap;gap:6px;margin-top:auto;display:flex}.hint{color:var(--muted);margin:0}button,select,.knob,.led{touch-action:manipulation}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ad-slot{max-width:1200px;min-height:100px;margin:24px auto;padding:0 16px}.ad-slot .ad-label{color:var(--muted);margin-bottom:4px;font-size:11px;display:block}.ad-slot.preview{color:var(--muted);border:2px dashed #4a507a;border-radius:8px;justify-content:center;align-items:center;display:flex}.site-footer{border-top:1px solid var(--panel-2);max-width:1200px;color:var(--muted);-webkit-user-select:text;user-select:text;margin:0 auto;padding:16px 16px 32px;font-size:12px}.site-footer p{margin:0 0 8px}.site-footer nav{flex-wrap:wrap;gap:6px 16px;display:flex}.site-footer a{color:var(--muted)}.readout{font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;z-index:10;background:#0f1120eb;border:1px solid #4a507a;border-radius:999px;padding:6px 14px;transition:opacity .15s,transform .15s;position:fixed;top:16px;left:50%;transform:translate(-50%,-8px)}.readout.show{opacity:1;transform:translate(-50%)}@media (width<=800px){#app{padding:12px 16px 24px}.site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.ad-in-view .play{display:none}.lower{grid-template-columns:1fr}.group{border-right:none;padding:0}.lower,.editor{min-width:0}.play{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;border-radius:50%;width:60px;height:60px;font-size:22px;position:fixed;box-shadow:0 4px 14px #00000080}.toolbar .group:first-child{display:contents}.channels{overflow-x:visible}.row{grid-template-columns:26px 32px 32px 1fr;grid-template-areas:"led pan vol name""steps steps steps steps";row-gap:6px;padding:6px 4px}.row .led{grid-area:led;width:22px;height:22px}.row .knob{width:30px;height:30px}.row .knob:after{transform-origin:50% 13px}.row .name{grid-area:name;padding:6px 10px}.steps{grid-area:steps;grid-template-columns:repeat(var(--cols), 1fr);touch-action:none;gap:3px;display:grid}.step{max-width:none;height:36px}.step.beat{margin-left:0}.bars{height:120px}.song-item{flex-wrap:wrap;width:100%}.song-item select{flex:1 0 calc(100% - 24px);max-width:none}.song-item .num{min-width:16px}.song-item .num~button:first-of-type{margin-left:20px}}