:root{--screw:radial-gradient(circle,#999 0 3px,#444 3.5px,transparent 4.5px);--blue:linear-gradient(#7a8592,#4f5964)}body{color:#eee;background:#141414;margin:0;padding:12px;font-family:Helvetica Neue,Arial,sans-serif}.credits{color:#888;text-align:center;max-width:1320px;margin:8px auto 0;font-size:11px}.credits a{color:#bbb}.rack{background:#0a0a0a;border-radius:4px;grid-template-columns:minmax(0,1fr) 250px;gap:4px;max-width:1320px;margin:auto;padding:4px;display:grid}@media (width<=980px){.rack,.dev{grid-template-columns:1fr!important}}.row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}label{letter-spacing:.5px;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;display:flex}button,select{font:inherit;font-size:11px}h2{letter-spacing:1px;margin:0 0 10px;font-size:18px;font-style:italic;font-weight:900}.top{color:#1d2329;background:linear-gradient(#97a3b0,#5d6873);border-radius:3px;flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:18px;padding:8px 14px;display:flex}.songcap{color:#7cfc00;text-shadow:0 0 6px #7cfc00;white-space:nowrap;text-overflow:ellipsis;background:#0b1a0b;border:2px inset #333;flex:1;min-width:220px;max-width:520px;padding:6px 10px;font:700 15px Courier New,monospace;overflow:hidden}.songcap:empty{display:none}.logo{color:#e8eef4;text-shadow:0 2px #333;text-align:right;margin-left:auto;font-size:30px;font-style:italic;font-weight:900;line-height:.9}.logo small{color:#3b4652;text-shadow:0 1px #b8c0c8;font-size:26px;display:block}.tp{color:#ddd;cursor:pointer;background:linear-gradient(#555,#222);border:2px solid #111;border-radius:3px;width:54px;height:38px;font-size:18px}.tp.play{color:#143;background:linear-gradient(#c7f05a,#7cb518)}#rectime{min-width:56px;height:24px;font-size:16px;line-height:24px}.tog.recording{color:#fff;background:linear-gradient(#f66,#c11);box-shadow:0 0 8px #f33}.tp.play.on{box-shadow:0 0 10px #c7f05a}.num{align-items:center;gap:2px;display:inline-flex}.num button{cursor:pointer;background:linear-gradient(#eee,#aaa);border:1px solid #111;border-radius:2px;width:22px;height:32px;font-weight:900}.led{color:#ff2a1a;text-align:center;text-shadow:0 0 8px red;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;background:#1a0000;border:2px inset #333;min-width:54px;height:32px;padding:0 4px;font:700 26px Courier New,monospace}.devs{flex-direction:column;gap:4px;min-width:0;display:flex}.dev{grid-template-columns:118px minmax(0,1fr) 128px;gap:4px;display:grid}.box{background:var(--blue);color:#eef;border-radius:3px;padding:8px}.hdr{letter-spacing:1px;border-radius:3px 3px 0 0;align-items:center;gap:8px;margin:-8px -8px 8px;padding:4px 8px;font-size:13px;font-weight:900;display:flex}.led-btn{cursor:pointer;background:#511;border:1px solid #000;border-radius:7px;width:26px;height:14px;padding:0}.led-btn.on{background:radial-gradient(#ff8a80,#e11);box-shadow:0 0 8px #f33}.tog{color:#333;cursor:pointer;background:linear-gradient(#f2f2f2,#bdbdbd);border:1px solid #111;border-radius:2px;padding:4px 6px;font-weight:800}.tog.on{color:#04a;background:linear-gradient(#d9f0ff,#8cc8ff);box-shadow:0 0 6px #8cc8ff}.bankbox .hdr{color:#fff;background:#c8291f}.bank{grid-template-columns:repeat(4,1fr);gap:3px;display:grid}.bank button{color:#333;cursor:pointer;background:linear-gradient(#f0f0f0,#bcbcbc);border:1px solid #111;border-radius:2px;height:26px;font-weight:800}.bank button[data-b]{color:#ddd;background:linear-gradient(#666,#3a3a3a)}.bank button.on[data-n]{color:#06c;background:linear-gradient(#e6f4ff,#9fd0ff)}.bank button.on[data-b]{color:#fff;background:linear-gradient(#f55,#c11)}.bank button[data-s]{grid-column:1/-1;margin-top:4px}.bank button.on[data-s]{background:linear-gradient(#ffc56b,#f39a1e)}.bank button.wait{animation:.25s step-end infinite blink}@keyframes blink{50%{color:#ddd;background:#555}}.panel>h2{cursor:grab;-webkit-user-select:none;user-select:none}.dev.dragging{opacity:.5}.panel>h2:after{content:" ▾";opacity:.6;font-size:12px;font-style:normal}.dev.closed{grid-template-columns:1fr!important}.dev.closed>.bankbox,.dev.closed>.mix,.dev.closed .panel>:not(h2){display:none}.dev.closed .panel{padding:6px 22px}.dev.closed h2{margin:0}.dev.closed h2:after{content:" ▸"}.panel{color:#111;background:var(--screw) 4px 4px/14px 14px no-repeat,var(--screw) right 4px top 4px/14px 14px no-repeat, var(--screw) left 4px bottom 4px/14px 14px no-repeat,var(--screw) right 4px bottom 4px/14px 14px no-repeat,linear-gradient(#e6e6e6,#acacac);border-radius:3px;min-width:0;padding:14px 22px;position:relative}.panel .row>button{color:#eee;cursor:pointer;background:linear-gradient(#555,#222);border:1px solid #000;border-radius:3px;padding:5px 12px;font-weight:700}.knob{--a:0deg;cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 35% 30%,#fff,#a8a8a8 55%,#5e5e5e);border-radius:50%;width:36px;height:36px;position:relative;box-shadow:0 2px 3px #000,0 0 0 3px #0000002e}.knob:after{content:"";transform-origin:50% 125%;width:3px;height:32%;transform:rotate(var(--a));background:#222;border-radius:2px;margin-left:-1.5px;position:absolute;top:10%;left:50%}.knob:focus-visible{outline:2px solid #f39a1e}.fdr{--p:0;cursor:ns-resize;touch-action:none;background:linear-gradient(90deg,#0000 15px,#050505 15px 19px,#0000 19px),repeating-linear-gradient(#0000 0 9px,#00000073 9px 10px) 4px 0/26px 100% no-repeat;flex:none;width:34px;height:110px;position:relative}.fdr:after{content:"";width:30px;height:20px;left:2px;top:calc((1 - var(--p)) * (100% - 20px));background:linear-gradient(#0000 9px,#222 9px 11px,#0000 11px),linear-gradient(#fafafa,#bdbdbd 45%,#8a8a8a 55%,#d6d6d6);border-radius:2px;position:absolute;box-shadow:0 2px 3px #000000b3,inset 0 0 0 1px #00000059}.fdr:focus-visible{outline:2px solid #f39a1e}.seq{background:#1c1c1c;border-radius:3px;grid-template-columns:repeat(16,1fr);gap:3px;margin-top:12px;padding:6px;display:grid}@media (width<=700px){.seq{grid-template-columns:repeat(8,1fr)}}.mods{border-top:1px solid #9a9a9a;margin-top:10px;padding-top:8px}.mods>b{letter-spacing:1px;align-self:center;font-size:11px;font-style:italic}.dbs{gap:10px;display:flex}.dbs select{max-width:78px}.mods .knob{width:30px;height:30px}.mods.off{opacity:.35;pointer-events:none}.step{color:#888;text-align:center;background:#333;border-radius:2px;flex-direction:column;gap:2px;min-width:0;padding:3px;font-size:9px;display:flex}.step.now{box-shadow:inset 0 0 0 2px #f33,0 0 8px #f33}.step select{color:#7cfc00;background:#0b1a0b;border:1px solid #000;width:100%;font-family:Courier New,monospace;font-size:11px;font-weight:700}.step button{color:#ccc;background:#555;border:1px solid #000;border-radius:2px;padding:1px 0;font-size:8px}.step button.on{color:#fff;background:#f33;box-shadow:0 0 5px #f33}.drums{overflow-x:auto}.drow{grid-template-columns:28px 34px repeat(16,minmax(20px,1fr));align-items:center;gap:3px;min-width:560px;margin-bottom:5px;display:grid}.drow b{font-size:11px}.drow .knob{width:26px;height:26px}.drow button{cursor:pointer;border:1px solid #000;border-radius:2px;height:24px;position:relative}.drow button:after{content:"";background:#400;border-radius:50%;width:6px;height:6px;margin-left:-3px;position:absolute;top:3px;left:50%}.drow button.on:after{background:#f22;box-shadow:0 0 6px #f22}.drow button.now{outline-offset:-1px;outline:2px solid #fff}.d808{background:var(--screw) 4px 4px/14px 14px no-repeat,var(--screw) right 4px top 4px/14px 14px no-repeat, var(--screw) left 4px bottom 4px/14px 14px no-repeat,var(--screw) right 4px bottom 4px/14px 14px no-repeat,linear-gradient(#3a3a3a,#1e1e1e);color:#eee}.d808 h2{color:#f39a1e}.d808 .knob{background:radial-gradient(circle at 35% 30%,#ff9a8a,#d42 55%,#701)}.d808 .knob:after{background:#fff}.d808 .drow button{background:#e2531f}.d808 .drow button:nth-of-type(n+5){background:#f39a1e}.d808 .drow button:nth-of-type(n+9){background:#f4d03f}.d808 .drow button:nth-of-type(n+13){background:#efe9d6}.d909{background:var(--screw) 4px 4px/14px 14px no-repeat,var(--screw) right 4px top 4px/14px 14px no-repeat, var(--screw) left 4px bottom 4px/14px 14px no-repeat,var(--screw) right 4px bottom 4px/14px 14px no-repeat,linear-gradient(#d8d8d0,#a5a59b)}.d909 h2{color:#d4560f}.d909 .drow button{background:linear-gradient(#f4f4f4,#cfcfcf)}.d909 .drow button:nth-of-type(4n+1){background:linear-gradient(#ffd9b0,#e8b07a)}.d909 .drow button.on:after{background:#ff8c1a;box-shadow:0 0 6px #ff8c1a}.mix .hdr{color:#1d2a08;background:linear-gradient(#b7e05a,#86b51f)}.mix .row{justify-content:center;gap:8px}.ins,.fxcol{flex-direction:column;gap:4px;display:flex}.fx .hdr{color:#fff;background:linear-gradient(#4b8cf0,#1f5fc9)}.fx.master .hdr{color:#1d2a08;background:linear-gradient(#b7e05a,#86b51f)}.fx .row{gap:10px;margin-bottom:6px}.song textarea{box-sizing:border-box;color:#f93;resize:vertical;background:#111;border:1px solid #000;width:100%;margin-bottom:6px;font:11px/1.3 monospace}.seg{flex-direction:column;gap:2px;display:flex}.meter{background:#111;border:1px solid #000;width:12px;height:110px;position:relative}.meter i{background:linear-gradient(0deg,#3c3 0 70%,#ee3 70% 90%,#f33 90%);position:absolute;bottom:0;left:0;right:0}.meter b{background:#400;width:12px;height:8px;position:absolute;top:-12px;left:0}.meter b.on{background:#f22;box-shadow:0 0 6px #f22}.d909 .drow{grid-template-columns:28px repeat(4,40px) repeat(16,minmax(20px,1fr));min-width:760px}.d808 .drow{grid-template-columns:28px repeat(3,40px) repeat(16,minmax(20px,1fr));min-width:720px}.dk{flex-direction:column;align-items:center;gap:1px;display:flex}.dk i{letter-spacing:.3px;font-size:7px;font-style:normal;font-weight:700}.drow button.off{opacity:.3}.d606{background:linear-gradient(#3a3a3a,#1e1e1e)}.d606 h2,.d606 .drow b{color:#e8e2d0}.d606 .drow button{background:linear-gradient(#e8e2d0,#bdb6a2)}.d606 .drow button.on:after{background:#ff3b2f;box-shadow:0 0 6px #ff3b2f}