:root{--red:#b7342d;--ink:#30332f;--lcd:#c3cd9f;--dark:#202526}*{box-sizing:border-box}body{margin:0;background:#222729;color:#ddd;font:12px 'Segoe UI','Microsoft Yahei',sans-serif;background-image:radial-gradient(ellipse at 50% 20%,#485151,transparent 70%);min-height:100vh;padding:30px 3.5vw}header{display:flex;justify-content:space-between;align-items:center;max-width:1440px;margin:0 auto 26px;color:#97a3a3;letter-spacing:2px}header b{font-size:25px;color:#e1e3dd;letter-spacing:6px}header span{font-size:10px;margin-left:16px}header small{font-size:10px}header i{display:inline-block;width:6px;height:6px;background:#b6c5a1;border-radius:50%;margin-right:10px}.machine{position:relative;max-width:1440px;margin:auto;color:var(--ink);padding:27px 30px 24px;border:2px solid #d7d8ce;border-radius:9px;background:repeating-linear-gradient(0deg,#ffffff05 0px,#00000004 1px,#ffffff05 2px),linear-gradient(115deg,#d9d9cf,#b6b8b0 53%,#d1d2c9);box-shadow:0 4px 0 #777c78,0 10px 0 #171c1e,0 28px 40px #0008,inset 0 0 9px #fff9}.screw{position:absolute;width:17px;height:17px;text-align:center;line-height:14px;border-radius:50%;background:linear-gradient(125deg,#f5f4e8,#797b71);border:1px solid #77796f;color:#484a41;box-shadow:0 1px 2px #444;font-size:18px;transform:rotate(20deg)}.tl{top:10px;left:10px}.tr{top:10px;right:10px}.bl{bottom:10px;left:10px}.br{bottom:10px;right:10px}.topline{display:flex;align-items:center;justify-content:space-between;padding:0 9px 20px;color:#73786e;letter-spacing:1.2px;font-size:9px}.topline strong{font-size:30px;letter-spacing:7px;color:#575e55;font-style:italic}.topline em{font-size:18px;font-weight:400;color:var(--red)}h2{font-size:10px;font-weight:600;letter-spacing:1px;color:#843e37;margin:0 0 17px}button,select,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:4px}button{background:linear-gradient(#394040,#222829);border:1px solid #171d1d;color:#d1d3c9;box-shadow:inset 0 2px 1px #65706a,0 3px 0 #1118;border-radius:4px;padding:9px 12px;letter-spacing:.4px;font-size:10px}button:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #0008}button.active{background:linear-gradient(#cc5145,#9f3026);color:#fff;box-shadow:inset 0 2px 1px #ed8570,0 3px 0 #631a17}button:disabled{opacity:.45;cursor:default}.upper{display:grid;grid-template-columns:230px minmax(290px,1fr) 340px;border-top:1px solid #91968b;border-bottom:1px solid #91968b}.soundselect{padding:26px 25px 22px 4px}.soundselect h2{text-align:center}#tracks{display:grid;grid-template-columns:repeat(8,1fr);gap:15px 5px}.track{background:none;border:0;box-shadow:none;border-radius:0;font-size:9px;color:#454a41;padding:0;letter-spacing:0;text-align:center}.track i{display:block;width:10px;height:10px;border-radius:50%;margin:0 auto 8px;background:radial-gradient(circle at 35% 30%,#a85951,#441e1b);border:1px solid #662e26;box-shadow:0 1px 2px #fff8}.track.selected i{background:#ff5041;box-shadow:0 0 6px #ec403c}.track.selected{color:#942d25;font-weight:bold}.track.muted{opacity:.35}.trackactions{display:flex;justify-content:center;gap:12px;margin:24px 0}.master{display:block;text-align:center;font-size:9px;color:#646c61;letter-spacing:1px}.master input{display:block;width:120px;margin:14px auto;accent-color:#454d47;height:3px}.displaycase{background:linear-gradient(120deg,#22282a,#121719);padding:23px;border-left:1px solid #767c71;border-right:1px solid #767c71;box-shadow:inset 0 1px 9px #000a}.display{background:var(--lcd);color:#303d2e;padding:15px;box-shadow:inset 1px 2px 9px #252f25aa;font-family:'Courier New',monospace;border:3px solid #0e1414;min-height:245px;position:relative}.display:after{content:'';pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#1a30120a 3px)}.lcdhead,.lcdfoot{display:flex;justify-content:space-between;font-size:11px}.lcdhead{border-bottom:1px solid #6c7959;padding-bottom:8px}#lcdTempo{font-weight:bold}h1{font-size:23px;margin:13px 0 0;letter-spacing:-1px}canvas{display:block;width:100%;height:68px;image-rendering:pixelated}#lcdValues{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;font-size:10px}#lcdValues span{display:flex;justify-content:space-between;padding-right:6px}#lcdValues b{font-size:12px}.lcdfoot{margin-top:12px;border-top:1px solid #7a8566;padding-top:8px;font-size:10px}.displaylabel{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:17px;color:#848e87;font-size:8px;letter-spacing:1px}.displaylabel b{color:#c15343;font-size:10px}.data{padding:26px 4px 20px 24px}.datahead{display:flex;align-items:baseline;justify-content:space-between}.datahead select{background:transparent;border:0;border-bottom:1px solid #949c8e;padding:0 0 4px;font-size:10px;max-width:125px}#knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 16px;margin-top:10px}.knobcell{text-align:center;position:relative}.knob{display:block;width:48px;height:48px;padding:0;border-radius:50%;border:2px solid #202624;background:radial-gradient(circle at 35% 25%,#4e5552,#252b29 75%);box-shadow:inset 0 2px 1px #8b928a,0 3px 0 #858a7e,0 5px 6px #282c2966;position:relative;margin:auto;touch-action:none;cursor:ns-resize}.knob:after{content:'';position:absolute;left:21px;top:4px;width:3px;height:12px;background:#ececda;transform-origin:1.5px 18px;transform:rotate(var(--angle));box-shadow:0 0 1px #fff}.knobcell.locked .knob:after{background:#ff6e52}.knobcell small{display:block;font-size:8px;letter-spacing:.6px;margin:10px 0 4px}.knobcell output{font:11px 'Courier New',monospace;font-weight:bold;color:#5c6358}.knobcell.locked output{color:var(--red)}.datafoot{display:flex;gap:10px;margin-top:21px;justify-content:center}.datafoot button{font-size:9px;padding:7px 9px}.middle{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid #91968b}.patternsection h2{margin-bottom:8px}#patterns{display:flex;gap:8px}#patterns button{width:42px;padding:8px}#patterns button.pending{outline:1px dashed var(--red);outline-offset:3px}.tempo{display:flex;gap:15px}.tempo label{display:flex;flex-direction:column;gap:6px;font-size:8px;letter-spacing:1px}.tempo input{background:#b8beb0;border:1px solid #929a8c;border-radius:2px;padding:6px;width:65px;font:16px 'Courier New',monospace}.transport{display:flex;gap:12px}.transport button{width:64px;height:40px;font-size:19px}#play{background:linear-gradient(#d25044,#a63127);box-shadow:inset 0 2px 1px #ed8570,0 3px 0 #631a17}#stop{background:linear-gradient(#eeeee0,#bfc2b2);color:#30372f;border-color:#8d9485}.kitactions{display:flex;gap:9px}.kitactions button{font-size:9px}.sequencer{padding:22px 4px 0}.seqhead,.seqfoot{display:flex;justify-content:space-between;gap:10px}.seqhead span,.seqfoot{font-size:10px;color:#686f62}.seqhead h2{margin-bottom:20px}#steps{display:grid;grid-template-columns:repeat(16,1fr);gap:10px}.step{position:relative;padding:0;height:52px;margin-top:14px;background:linear-gradient(130deg,#414845,#242b29);border-radius:4px}.step:before{content:'';position:absolute;left:calc(50% - 4px);top:-16px;width:7px;height:7px;background:#793b30;border-radius:50%;box-shadow:0 1px 1px #fff8}.step.on:before{background:#f5523e;box-shadow:0 0 5px #e34223}.step.selected{outline:1px solid #515c50;outline-offset:4px}.step.current{background:#b14d3e;box-shadow:inset 0 2px 2px #ffab87,0 3px 0 #642d25}.step small{position:absolute;top:58px;left:0;right:0;font:10px 'Courier New',monospace;color:#4c5649}.step.locked:after{content:'◆';color:#edb874;font-size:10px}.seqfoot{margin-top:34px;font-size:9px}.seqfoot span:last-child{white-space:nowrap}footer{max-width:1440px;margin:22px auto;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#97a19b}footer button{background:none;box-shadow:none;color:#adb8ae;border:1px solid #566057;padding:7px 10px}#status{color:#bfcaaf}@media(min-width:1500px){body{padding-top:7vh}.upper{grid-template-columns:260px minmax(350px,1fr) 380px}.knob{width:54px;height:54px}.knob:after{left:24px;transform-origin:1.5px 21px}.display{min-height:270px}canvas{height:90px}}@media(max-width:1100px){body{padding:20px 16px}.upper{grid-template-columns:180px minmax(270px,1fr) 290px}.data{padding-left:15px}.soundselect{padding-right:15px}#tracks{grid-template-columns:repeat(4,1fr);gap:10px}#knobs{gap:20px 9px}.displaycase{padding:15px}.kitactions{flex-direction:column}header span{display:none}#steps{gap:7px}.topline{font-size:8px}}@media(max-width:820px){.machine{padding:25px 16px}.upper{grid-template-columns:150px 1fr}.data{grid-column:1/-1;padding:20px 0;border-top:1px solid #929a8c}.datahead{justify-content:center;gap:30px}#knobs{grid-template-columns:repeat(8,1fr);gap:7px}.datafoot{margin-top:16px}.displaycase{border-right:0}.soundselect{padding-right:12px}.middle{gap:12px;flex-wrap:wrap}.topline span{display:none}.topline{justify-content:center}#steps{grid-template-columns:repeat(8,1fr);gap:35px 10px}.seqhead span{max-width:210px;text-align:right}.kitactions{flex-direction:row}.seqfoot span:last-child{display:none}footer{flex-wrap:wrap}header small{font-size:8px}}@media(max-width:460px){body{padding:15px 8px}.machine{padding:25px 13px}.upper{grid-template-columns:1fr}.soundselect{padding:16px 0}#tracks{grid-template-columns:repeat(8,1fr)}.trackactions{margin:14px 0 0}.master{display:none}.displaycase{border:0}.data{padding-bottom:15px}#knobs{grid-template-columns:repeat(4,1fr);gap:16px}.topline strong{font-size:24px}.display{min-height:220px}.displaylabel{font-size:7px}.transport button{width:50px}.tempo{gap:8px}.middle{justify-content:center}header small{display:none}.seqhead span{font-size:9px;max-width:150px}.seqfoot{line-height:1.6}.step{height:40px}.step small{top:45px}#steps{gap:30px 8px}.seqfoot{margin-top:27px}}

@media(max-width:460px){.topline strong{font-size:21px;letter-spacing:3px}header b{font-size:20px;letter-spacing:3px}}

/* Panel depth and LCD backlight. */
.topline strong{font-style:normal;color:#60665e;text-shadow:0 1px 1px #ffffffd9,0 -1px 1px #535b5266;letter-spacing:5px}
.topline em{font-style:normal}
.machine{border-top-color:#f4f4e9;border-left-color:#e6e7dc;border-right-color:#91998c;border-bottom-color:#828b7f;box-shadow:inset 0 2px 2px #fff9,inset 2px 0 5px #fff5,inset -2px -3px 6px #434d4566,0 2px 0 #e4e5da,0 6px 0 #737c72,0 11px 0 #141a18,0 22px 35px #0009,0 45px 75px #0005;background:repeating-linear-gradient(0deg,#ffffff06 0px,#00000005 1px,#ffffff06 2px),radial-gradient(ellipse at 25% 0%,#f0f0e3aa,transparent 65%),linear-gradient(115deg,#d9d9cf,#adb3a8 58%,#cdd1c5)}
.upper,.middle{border-bottom-color:#828d7c;box-shadow:0 1px 0 #f5f7e077}
h2,.topline>span,.knobcell small{ text-shadow:0 1px 0 #f5f5e777}
button{box-shadow:inset 0 2px 1px #a2aca066,inset 1px 0 1px #88948144,inset 0 -3px 3px #0007,0 2px 0 #131a16,0 4px 5px #28332270}
.track{box-shadow:none;text-shadow:0 1px 0 #f5f5e777}
.knob{background:radial-gradient(ellipse at 32% 15%,#626b60,#3d463d 40%,#232b26 78%);border-color:#283128;box-shadow:inset 0 2px 2px #b8c0a77a,inset 2px 0 3px #73826966,inset -2px -3px 4px #080f0bd9,0 2px 0 #929c88,0 4px 0 #354132,2px 7px 7px #1b251e77}
.step{background:linear-gradient(125deg,#4e594d,#303b31 55%,#222c24);box-shadow:inset 0 2px 1px #abb5a580,inset 2px 0 2px #74836c55,inset -2px -3px 3px #08120bbb,0 2px 0 #141e16,1px 4px 5px #29352280}
.displaycase{background:linear-gradient(130deg,#353c3b 0%,#1c2424 18%,#101818 70%,#242d2b);border:1px solid #687268;box-shadow:inset 0 2px 2px #9aa89a55,inset 2px 0 2px #85948744,inset -2px -3px 4px #000d,0 1px 0 #eef2d677;padding:25px}
.display{background:radial-gradient(ellipse at 50% 40%,#cbd9a8 0%,#b9cb99 62%,#aabb89 100%);color:#344633;border:4px solid #101b16;border-radius:3px;box-shadow:inset 0 2px 5px #192d2277,inset 0 -2px 6px #56724133,0 0 2px 1px #b8db8a66,0 0 10px #b4d98730,0 0 25px #a5d67915;text-shadow:1px 1px 0 #607c3c22}
.display:before{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(135deg,#f8ffe511,transparent 45%,#273e1708);z-index:1}
.display:after{background-image:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#29431a0d 2px,#29431a0d 3px),repeating-linear-gradient(90deg,transparent 0px,transparent 2px,#29431a08 2px,#29431a08 3px)}
.lcdhead{font-weight:bold;border-bottom-color:#50683d}.lcdfoot{border-top-color:#50683d}
#lcdValues b{background:#365033;color:#c2d3a1;padding:1px 3px;font-weight:normal}
.displaylabel{text-shadow:0 -1px 0 #000}
@media(max-width:460px){.topline strong{letter-spacing:3px}.displaycase{padding:18px}}

.choker{display:flex;justify-content:center;align-items:center;gap:10px;font-size:9px;letter-spacing:1px;margin:0 0 17px;color:#5b6556}.choker select{background:#bbc2b0;border:1px solid #919c86;padding:4px 8px;font-size:11px}.seqfoot #hint{line-height:1.6}@media(max-width:460px){.choker{margin:13px 0 0}}