@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Rajdhani:wght@500;600;700&display=swap";
:root{--blue:#4e7cf6;--blue2:#90abef;--amber:#f2a03c;--metal:#151820;--line:#252b35;--dim:#5d687a}*{box-sizing:border-box}html,body{color:#e7eaf0;background:#010204;min-height:100%;margin:0}button,input{font:inherit}button{color:inherit}.stage{background:radial-gradient(circle at 50% 0,#142039,#03050a 55%,#000);justify-content:center;width:100vw;height:100vh;font-family:Rajdhani,sans-serif;display:flex;overflow:auto}.scale-shell{flex:none;position:relative}.machine{transform-origin:0 0;background:linear-gradient(120deg,#101218,#242832 42%,#090b0f 75%,#171a21);border:1px solid #303641;width:1340px;height:920px;display:flex;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 30px 70px #000,inset 0 1px #ffffff12}.machine:after{content:"";pointer-events:none;z-index:9;opacity:.15;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");position:absolute;inset:0}.rack-ear{z-index:2;background:linear-gradient(90deg,#07080b,#242934 52%,#08090c);border-color:#343944;flex-direction:column;flex:none;justify-content:space-around;align-items:center;width:27px;display:flex}.rack-ear:first-child{border-right:1px solid #343944}.rack-ear:last-child{border-left:1px solid #343944}.rack-ear b{background:radial-gradient(circle at 35% 33%,#737985,#222730 35%,#020305 70%);border-radius:50%;width:9px;height:9px;box-shadow:0 1px 3px #000}.body{z-index:1;flex-direction:column;flex:1;min-width:0;display:flex}header{background:linear-gradient(#1c2029,#0b0d12);border-bottom:2px solid #050609;flex:none;justify-content:space-between;align-items:center;height:58px;padding:0 15px;display:flex;box-shadow:inset 0 1px #ffffff0f,0 3px 7px #000}.brand,.header-tools{align-items:center;gap:10px;display:flex}.logo{background:#05070b;border:1px solid #29303b;width:68px;height:40px;padding:2px;overflow:hidden;box-shadow:inset 0 0 8px #000}.logo img{object-fit:contain;width:100%;height:100%}.brand>div:last-child{border-left:1px solid #363b45;padding-left:11px}.brand h1{letter-spacing:-.03em;margin:0;font-size:24px;font-style:italic}.brand h1 em{color:var(--blue2)}.brand span{letter-spacing:.2em;color:#586478;margin-top:-2px;font:500 6px DM Mono;display:block}.load,.header-tools>button,.source-actions button,.wave-footer button,.slice-actions button{letter-spacing:.12em;cursor:pointer;background:linear-gradient(#1a1e26,#080a0e);border:1px solid #28303b;justify-content:center;align-items:center;height:29px;padding:0 11px;font:500 7px DM Mono;display:flex;box-shadow:inset 0 1px #ffffff0d,0 2px 3px #000}.load input{display:none}.header-tools>button.active{color:#abc1fb;border-color:#3155ae;box-shadow:inset 0 0 11px #102753}.tempo{background:#05070b;border:1px solid #202631;grid-template-columns:42px 31px 1fr;align-items:center;gap:4px;width:138px;height:36px;padding:3px 6px;display:grid}.tempo small{color:#556174;font:500 6px DM Mono}.tempo b{color:var(--blue2);font:500 13px DM Mono}input[type=range]{appearance:none;height:3px;accent-color:var(--blue);background:#252b35}.status{color:#637087;background:#07090d;border:1px solid #202631;align-items:center;gap:7px;height:29px;padding:0 9px;font:500 7px DM Mono;display:flex}.status i{background:var(--blue);width:6px;height:6px;box-shadow:0 0 7px var(--blue);border-radius:50%}.sample-strip{background:linear-gradient(90deg,#080b11,#111722 50%,#07090d);border-bottom:1px solid #050609;flex:none;justify-content:space-between;align-items:center;height:48px;padding:0 13px;display:flex}.sample-strip small,.sample-strip strong,.sample-strip span{display:inline-block}.sample-strip small{color:#536178;letter-spacing:.14em;font:500 6px DM Mono}.sample-strip strong{color:#a9b9df;margin-left:10px;font:500 10px DM Mono}.sample-strip span{color:#4e5b70;margin-left:13px;font:500 6px DM Mono}.source-actions{gap:3px;display:flex}.source-actions button{height:24px;padding:0 8px;font-size:6px}.workspace{flex:1;grid-template-columns:214px minmax(0,1fr) 250px;gap:7px;min-height:0;padding:7px;display:grid}.panel{background:linear-gradient(135deg,#11141b,#07090d 62%);border:1px solid #080a0e;box-shadow:inset 0 1px #ffffff09,inset 0 0 18px #00000080,0 2px 6px #000}.panel-title{border-bottom:1px solid #171c25;justify-content:space-between;align-items:center;height:34px;padding:0 9px;display:flex}.panel-title span{letter-spacing:.17em;color:#8792a5;font-size:9px;font-weight:700}.panel-title span:before{content:"";background:var(--blue);width:6px;height:6px;box-shadow:0 0 7px var(--blue);border-radius:50%;margin-right:7px;display:inline-block}.panel-title.amber span:before{background:var(--amber);box-shadow:0 0 7px var(--amber)}.panel-title small{color:#4d596c;letter-spacing:.1em;font:500 6px DM Mono}.chop-panel,.edit-panel{flex-direction:column;min-height:0;display:flex}.mode-buttons{flex-direction:column;gap:3px;padding:6px;display:flex}.mode-buttons button{text-align:left;color:#707b8d;letter-spacing:.09em;cursor:pointer;background:#090b10;border:1px solid #171c25;grid-template-rows:19px 12px;grid-template-columns:13px 1fr;align-items:center;min-height:47px;padding:5px 7px;font-size:9px;font-weight:700;display:grid;position:relative}.mode-buttons button>i{background:#253048;border-radius:50%;grid-row:1/3;width:6px;height:6px}.mode-buttons button small{color:#465266;letter-spacing:.08em;font:500 5px DM Mono}.mode-buttons button.selected{color:#aec2f8;box-shadow:inset 3px 0 var(--blue);background:linear-gradient(90deg,#11234c,#080d18);border-color:#3155ae}.mode-buttons button.selected>i{background:var(--blue);box-shadow:0 0 6px var(--blue)}.sensitivity{border-top:1px solid #1a202a;border-bottom:1px solid #1a202a;margin:2px 8px 8px;padding:8px}.sensitivity>div{justify-content:space-between;display:flex}.sensitivity span,.sensitivity b{color:#606d82;font:500 7px DM Mono}.sensitivity b{color:#94ace8}.sensitivity input{width:100%}.switches{grid-template-columns:1fr;gap:3px;padding:0 8px 8px;display:grid}.switches button,.play-modes button{color:#566174;letter-spacing:.08em;cursor:pointer;background:#080a0e;border:1px solid #1a2029;align-items:center;gap:7px;height:29px;font:500 6px DM Mono;display:flex}.switches button i{background:#283043;border-radius:50%;width:6px;height:6px;margin-left:6px}.switches button.on{color:#9eb5ee;border-color:#2b4683}.switches button.on i{background:var(--blue);box-shadow:0 0 6px var(--blue)}.switches button.on.amber{color:#d59c57;border-color:#664119}.switches button.on.amber i{background:var(--amber);box-shadow:0 0 6px var(--amber)}.analysis{background:radial-gradient(circle at 30% 0,#101a2d,#04070c 70%);border:1px solid #151d29;margin:auto 8px 8px;padding:9px}.analysis>small{color:#536178;letter-spacing:.14em;font:500 6px DM Mono}.analysis p{color:#6a7689;min-height:42px;font-size:8px;line-height:1.35}.analysis>div{color:#4e596c;grid-template-columns:1fr 28px;gap:4px;font:500 6px DM Mono;display:grid}.analysis b{color:#7e96d1}.center{grid-template-rows:290px 1fr;gap:7px;min-width:0;display:grid}.wave-panel{background:linear-gradient(#050910,#020408);grid-template-rows:22px 1fr 30px;min-height:0;display:grid}.timeline{border-bottom:1px solid #101722;justify-content:space-between;padding:6px 7px 0;display:flex}.timeline span{color:#47556b;font:500 5px DM Mono}.waveform{cursor:crosshair;min-height:0;position:relative;overflow:hidden}.grid-lines{background:repeating-linear-gradient(90deg,#0000 0 calc(12.5% - 1px),#101a28 calc(12.5% - 1px) 12.5%),linear-gradient(#0000 49.5%,#152235 50%,#0000 50.5%);position:absolute;inset:0}.selection{background:linear-gradient(90deg,#4e7cf626,#4e7cf609);border-left:1px solid #799df88c;border-right:1px solid #799df866;position:absolute;top:0;bottom:0}.wave-bars{opacity:.82;align-items:center;gap:1px;display:flex;position:absolute;inset:4px 0}.wave-bars i{background:linear-gradient(#7d9bea,#3156ae);flex:1;min-width:1px;max-height:100%;box-shadow:0 0 2px #4e7cf638}.marker{cursor:ew-resize;background:#517cef;border:0;width:1px;padding:0;position:absolute;top:0;bottom:0;box-shadow:0 0 3px #4e7cf6a6}.marker.amber{background:#d98c34;box-shadow:0 0 3px #f2a03c99}.marker b{color:#b7c8f4;background:#172a57;border:1px solid #426bd0;justify-content:center;align-items:center;min-width:17px;height:14px;font:500 6px DM Mono;display:flex;position:absolute;top:4px;left:1px}.marker.amber b{color:#e4b273;background:#3c270f;border-color:#8b581e}.marker.selected b{filter:brightness(1.5);box-shadow:0 0 7px}.playhead{pointer-events:none;background:#f3f5fb;width:1px;position:absolute;top:0;bottom:0;box-shadow:0 0 5px #fff}.playhead:before{content:"";border-top:6px solid #fff;border-left:4px solid #0000;border-right:4px solid #0000;position:absolute;top:0;left:-3px}.wave-footer{border-top:1px solid #111924;justify-content:space-between;align-items:center;padding:0 7px;display:flex}.wave-footer>span{color:#65748d;font:500 6px DM Mono}.wave-footer>div{gap:2px;display:flex}.wave-footer button{height:20px;padding:0 6px;font-size:5px}.pads-section{grid-template-rows:auto 1fr;gap:0;min-height:0;display:grid;overflow:hidden}.pads-head{background:#080a0e;border-bottom:1px solid #151b24;grid-template-columns:1fr auto 1.1fr;align-items:center;gap:8px;padding:6px 8px;display:grid}.pads-head>div>span,.pads-head>div>small,.pads-head b{display:block}.pads-head>div:first-child>span{color:#8994a7;letter-spacing:.14em;font-size:9px;font-weight:700}.pads-head>div:first-child>span:before{content:"";background:var(--blue);width:6px;height:6px;box-shadow:0 0 7px var(--blue);border-radius:50%;margin-right:7px;display:inline-block}.pads-head small,.pads-head>div:last-child>span{color:#4e5a6d;letter-spacing:.08em;margin-top:3px;font:500 5px DM Mono}.pads-head b{color:#91a9e8;font:500 8px DM Mono}.pad-banks{grid-template-columns:repeat(5,28px);gap:3px;display:grid}.pad-banks button{color:#586479;cursor:pointer;background:#090b10;border:1px solid #1b2230;height:22px;padding:0;font:500 7px DM Mono}.pad-banks button.filled{color:#7f91b5;border-color:#2a3548}.pad-banks button.active{color:#b3c7fa;background:#102047;border-color:#3659ad;box-shadow:inset 0 0 7px #183574,0 0 4px #4e7cf647}.pads{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(8,1fr);gap:4px;min-height:0;padding:5px;display:grid}.pads>button{text-align:left;cursor:pointer;background:linear-gradient(145deg,#262b34,#0a0c11 64%);border:2px solid #050609;border-radius:3px;min-width:0;padding:6px;transition:transform 60ms,filter 60ms;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff14,inset 0 -7px 12px #050609,0 3px 4px #000}.pads>button:disabled{opacity:.35;cursor:default}.pads>button>span{color:#566173;font:500 6px DM Mono;position:absolute;top:4px;right:5px}.pads>button strong{color:#aab2bf;letter-spacing:.05em;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:8px;display:block;overflow:hidden}.pads>button small{color:#596579;margin-top:2px;font:500 5px DM Mono;display:block}.pads>button>i{background:#3e64c1;width:10px;height:2px;position:absolute;bottom:5px;left:6px}.pads>button.amber>i{background:#9a6226}.pads>button.selected{border-color:#3b5793}.pads>button.playing{filter:brightness(1.55);border-color:var(--blue);transform:translateY(2px);box-shadow:inset 0 0 15px #4e7cf64d,0 1px 2px #000}.pads>button.amber.playing{border-color:var(--amber);box-shadow:inset 0 0 15px #f2a03c40,0 1px 2px #000}.mini-wave{opacity:.38;align-items:center;gap:1px;height:30px;margin:10px 2px 2px;display:flex}.mini-wave i{background:#6487df;flex:1;width:1px}.mini-wave.active{opacity:.85;filter:drop-shadow(0 0 3px var(--blue))}.slice-name{border-bottom:1px solid #171c25;padding:9px 10px}.slice-name small,.slice-name strong,.slice-name span{display:block}.slice-name small{color:#526078;letter-spacing:.12em;font:500 6px DM Mono}.slice-name strong{color:#c3c9d3;margin:3px 0;font-size:13px}.slice-name span{color:#596579;font:500 6px DM Mono}.knobs{grid-template-columns:repeat(3,1fr);gap:8px 2px;padding:10px 7px;display:grid}.knob-unit{flex-direction:column;align-items:center;display:flex}.knob-unit>span{color:#6c7789;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;font-size:7px;font-weight:700}.knob{cursor:ns-resize;background:radial-gradient(circle at 42% 34%,#424752 0 7%,#181b22 22%,#07080c 61%,#1b1e25 69%,#050609 74%);border:1px solid #050608;border-radius:50%;width:48px;height:48px;position:relative;box-shadow:0 4px 6px #000,inset 0 1px #ffffff1f}.knob:before{content:"";z-index:-1;background:conic-gradient(from 225deg,var(--blue)0 45%,transparent 46% 100%);opacity:.65;border:1px solid #252c36;border-radius:50%;position:absolute;inset:-4px}.knob.amber:before{background:conic-gradient(from 225deg,var(--amber)0 40%,transparent 41% 100%)}.knob i{border-radius:50%;position:absolute;inset:5px}.knob i:after{content:"";width:2px;height:10px;box-shadow:0 0 4px var(--blue);background:#9db6f5;position:absolute;top:1px;left:50%;transform:translate(-50%)}.knob.amber i:after{box-shadow:0 0 4px var(--amber);background:#ffc075}.knob-unit>b{color:#7f99d8;margin-top:3px;font:500 7px DM Mono}.play-modes{grid-template-columns:1fr 1fr;gap:3px;padding:0 8px 8px;display:grid}.play-modes button{justify-content:center}.play-modes button.on{color:#a7bcf3;border-color:#2f4c8e;box-shadow:inset 0 0 9px #102753}.play-modes button.on.amber{color:#e0a761;border-color:#71471b;box-shadow:inset 0 0 9px #43270d}.envelope{background:#04070c;border:1px solid #151d29;margin:0 8px 8px;padding:7px}.envelope small{color:#536178;letter-spacing:.1em;font:500 6px DM Mono}.envelope svg{width:100%;height:57px}.envelope path{fill:none;stroke:#668be7;stroke-width:1.5px;filter:drop-shadow(0 0 3px #4e7cf673)}.envelope path.base{stroke:#202b3c;filter:none}.slice-actions{grid-template-columns:1fr 1fr;gap:3px;margin:auto 8px 8px;display:grid}.slice-actions button{height:25px;padding:0;font-size:6px}.character-strip{flex:none;grid-template-columns:190px repeat(4,75px) 1fr 100px;align-items:center;gap:5px;height:105px;margin:0 7px 7px;padding:8px 12px;display:grid}.character-title small,.character-title strong,.character-title span{display:block}.character-title small{color:#536178;letter-spacing:.14em;font:500 6px DM Mono}.character-title strong{color:#bdc5d2;margin:3px 0;font-size:15px}.character-title span{color:#5d697c;font-size:8px}.signal-flow{align-items:center;padding:0 8px;display:flex}.signal-flow span{color:#5b6980;font:500 5px DM Mono}.signal-flow i{background:#3156a9;flex:1;height:1px;margin:0 4px}.output{grid-template-columns:28px 18px 1fr;align-items:center;gap:5px;display:grid}.output small,.output b{color:#596579;font:500 6px DM Mono}.output>div{background:repeating-linear-gradient(0deg,#05070a 0 4px,#10141b 5px 6px);border:1px solid #151b24;height:62px;position:relative;overflow:hidden}.output>div i{background:linear-gradient(#d88a34,#315dca 35%);transition:height .1s;position:absolute;inset:auto 3px 2px}.keyboard-section{background:linear-gradient(120deg,#101319,#06080c);flex:none;grid-template-columns:225px 1fr;gap:8px;height:110px;margin:0 7px 7px;padding:7px;display:grid}.keyboard-head{background:#080a0e;border:1px solid #151b24;flex-direction:column;justify-content:space-between;padding:7px 9px;display:flex}.keyboard-head>div>span,.keyboard-head>div>small,.keyboard-head b{display:block}.keyboard-head>div:first-child>span{color:#8994a7;letter-spacing:.16em;font-size:9px;font-weight:700}.keyboard-head>div:first-child>span:before{content:"";background:var(--blue);width:6px;height:6px;box-shadow:0 0 7px var(--blue);border-radius:50%;margin-right:7px;display:inline-block}.keyboard-head small,.keyboard-head>div:last-child>span{color:#4e5a6d;letter-spacing:.08em;margin-top:4px;font:500 5px DM Mono}.keyboard-head b{color:#91a9e8;font:500 8px DM Mono}.keyboard-bed{background:#000;border:7px solid #07080b;border-bottom-width:5px;min-width:0;position:relative;overflow:hidden;box-shadow:inset 0 5px 8px #000,0 1px #ffffff0d}.white-keys{gap:1px;height:100%;display:flex}.white-key{cursor:pointer;background:linear-gradient(90deg,#bfc1c1,#fafafa 20%,#e9e9e7 68%,#a7a9a8);border:1px solid #777b80;border-top:0;border-radius:0 0 3px 3px;flex:1;min-width:0;height:100%;position:relative;box-shadow:inset 0 -8px 10px #00000029,inset 1px 0 #fffc}.white-key span{color:#52575d;font:500 4px DM Mono;position:absolute;bottom:3px;left:50%;transform:translate(-50%)}.white-key b{color:#5c6d91;font:500 6px DM Mono;position:absolute;top:39%;left:50%;transform:translate(-50%)}.white-key.bank-active{background:linear-gradient(90deg,#b8bec9,#f4f6fb 20%,#dfe5f1 68%,#9da7b8)}.white-key.blue{box-shadow:inset 0 -4px #4e7cf6,inset 0 -9px 12px #4e7cf626}.white-key.amber{box-shadow:inset 0 -4px #d88932,inset 0 -9px 12px #f2a03c24}.white-key.selected{filter:brightness(.9)}.white-key.playing{filter:brightness(.76);transform:translateY(2px);box-shadow:inset 0 -7px 12px #4e7cf673}.black-keys{pointer-events:none;position:absolute;inset:0}.black-key{pointer-events:auto;z-index:2;cursor:pointer;background:linear-gradient(90deg,#040507,#30343b 43%,#08090c 78%,#010203);border:1px solid #030405;border-radius:0 0 3px 3px;height:61%;position:absolute;top:0;box-shadow:inset 0 -7px 6px #000,2px 3px 4px #000000bf}.black-key b{color:#68748c;font:500 5px DM Mono}.black-key.bank-active{background:linear-gradient(90deg,#05070c,#35415b 43%,#0a0e18 78%,#010203);border-color:#2d3f68}.black-key.blue{box-shadow:inset 0 -3px #436bd0,inset 0 -8px 8px #000,2px 3px 4px #000000bf}.black-key.amber{box-shadow:inset 0 -3px #a66a28,inset 0 -8px 8px #000,2px 3px 4px #000000bf}.black-key.selected{border-color:#557bd6}.black-key.playing{filter:brightness(1.6);transform:translateY(2px)}footer{color:#505c6e;letter-spacing:.08em;background:linear-gradient(#12151b,#07080b);border-top:1px solid #242a34;flex:none;grid-template-columns:250px 1fr 205px;align-items:center;height:25px;padding:0 11px;font:500 5px DM Mono;display:grid}footer div{text-align:center}footer span:last-child{text-align:right}.status i.on{background:var(--blue);box-shadow:0 0 7px var(--blue)}.status i:not(.on){box-shadow:none;background:#2a3140}.knob-unit.disabled{opacity:.38}.knob-unit.disabled .knob{cursor:not-allowed}.source-actions button:disabled,.slice-actions button:disabled,.wave-footer button:disabled{opacity:.35;cursor:not-allowed}.engine-error{color:#f2a03c;letter-spacing:.08em;background:#2a1208;border-bottom:1px solid #5a2a12;flex:none;padding:4px 13px;font:500 8px DM Mono}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}}