@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Rajdhani:wght@500;600;700&display=swap";
:root{--blue:#4e7cf6;--blue-soft:#91a9e8;--amber:#f2a03c;--metal:#14171e;--ink:#030407;--line:#252b35;--label:#7b8595}*{box-sizing:border-box}html,body{color:#e5e8ee;background:#010204;min-height:100%;margin:0}button,input{font:inherit}button{color:inherit}.stage{background:radial-gradient(circle at 50% 0,#101725,#020307 54%,#000);justify-content:center;align-items:flex-start;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(115deg,#0b0d12,#1c2029 38%,#090b0f 70%,#161920);border:1px solid #2c313b;width:1320px;height:790px;display:flex;position:absolute;inset:0 auto auto 0;overflow:hidden;box-shadow:0 28px 60px #000,inset 0 1px #ffffff0f}.machine:after{content:"";pointer-events:none;opacity:.18;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");position:absolute;inset:0}.body{flex-direction:column;flex:1;min-width:0;display:flex}.rack-ear{z-index:2;background:linear-gradient(90deg,#07080b,#252932 48%,#08090c);border-color:#030405;flex-direction:column;flex:none;justify-content:space-around;align-items:center;width:28px;display:flex}.rack-ear.left{border-right:1px solid #333842}.rack-ear.right{border-left:1px solid #333842}.rack-ear i{background:radial-gradient(circle at 38% 35%,#737985,#252a31 30%,#020305 67%);border-radius:50%;width:9px;height:9px;box-shadow:0 1px 2px #000}.header{z-index:1;background:linear-gradient(#1b1e26,#0b0d12);border-bottom:2px solid #050609;flex:none;justify-content:space-between;align-items:center;height:62px;padding:0 15px;display:flex;box-shadow:inset 0 1px #ffffff0f,0 3px 8px #000}.brand,.transport{align-items:center;gap:12px;display:flex}.brand-badge{background:#05070b;border:1px solid #29303b;width:72px;height:43px;padding:2px;overflow:hidden;box-shadow:inset 0 0 8px #000,0 1px #ffffff0f}.brand-badge img{object-fit:contain;width:100%;height:100%}.brand-title{border-left:1px solid #333842;padding-left:12px}.brand-title strong{letter-spacing:-.03em;font-size:25px;font-style:italic;display:block}.brand-title em{color:var(--blue-soft);font-style:italic}.brand-title span{color:#5d687a;letter-spacing:.22em;margin-top:-3px;font:500 7px DM Mono;display:block}.transport button,.selected-strip>button{letter-spacing:.12em;cursor:pointer;background:linear-gradient(#191d26,#080a0e);border:1px solid #272d38;height:31px;font:700 8px DM Mono;box-shadow:inset 0 1px #ffffff0d,0 2px 3px #000}.transport button{width:65px}.transport button.lit{color:#a9bfff;border-color:#3456ad;box-shadow:inset 0 0 12px #183371,0 0 8px #4e7cf64d}.tempo{background:#05070b;border:1px solid #202631;grid-template-columns:42px 34px 1fr;align-items:center;gap:5px;width:148px;height:39px;padding:4px 7px;display:grid}.tempo small{color:#596579;font:500 7px DM Mono}.tempo b{color:var(--blue-soft);font:500 15px DM Mono}input[type=range]{appearance:none;height:3px;accent-color:var(--blue);background:#242a34}.midi-led{color:#637087;background:#07090d;border:1px solid #20252e;align-items:center;gap:7px;height:31px;padding:0 10px;font:500 8px DM Mono;display:flex}.midi-led i,.provenance i{background:#263044;border-radius:50%;width:7px;height:7px;box-shadow:inset 0 1px 2px #000}.midi-led i.on{background:var(--blue);box-shadow:0 0 8px var(--blue)}.workspace{z-index:1;flex:1;grid-template-columns:245px minmax(0,1fr) 272px;gap:7px;min-height:0;padding:7px;display:grid}.panel{background:linear-gradient(135deg,#11141b,#07090d 60%);border:1px solid #080a0e;box-shadow:inset 0 1px #ffffff09,inset 0 0 18px #00000073,0 2px 6px #000}.panel-head{border-bottom:1px solid #171c25;justify-content:space-between;align-items:center;height:34px;padding:0 10px;display:flex}.panel-head span,.pad-toolbar span{letter-spacing:.19em;color:#8791a3;font-size:10px;font-weight:700}.panel-head 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-head.amber span:before{background:var(--amber);box-shadow:0 0 7px var(--amber)}.panel-head small,.pad-toolbar small{letter-spacing:.12em;color:#4b5668;font:500 6px DM Mono}.library{flex-direction:column;min-height:0;display:flex}.collection-tabs{border-bottom:1px solid #141922;grid-template-columns:1fr 1fr;gap:2px;padding:5px;display:grid}.collection-tabs button{color:#596579;letter-spacing:.08em;cursor:pointer;background:#090b10;border:1px solid #171c25;min-height:27px;font-size:8px;font-weight:700}.collection-tabs button.active{color:#a9bfff;background:linear-gradient(#15244a,#091021);border-color:#3155ae;box-shadow:inset 0 0 9px #102753}.kit-list{scrollbar-color:#2c3e67 #07090d;scrollbar-width:thin;flex:1;min-height:0;padding:4px;overflow-y:auto}.kit-list button{cursor:pointer;text-align:left;background:0 0;border:0;border-bottom:1px solid #171b23;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;min-height:58px;padding:6px 8px;display:flex;position:relative}.kit-list button:hover{background:#0d1119}.kit-list button.selected{box-shadow:inset 3px 0 var(--blue);background:linear-gradient(90deg,#102149,#0a0e16)}.kit-list small{color:#4b5b75;letter-spacing:.12em;font:500 6px DM Mono}.kit-list strong{letter-spacing:.02em;color:#aeb6c4;margin:2px 0;font-size:11px}.kit-list span{color:#5e697b;font-size:8px}.provenance{background:#080a0e;border-top:1px solid #1a1f28;flex:none;align-items:center;gap:8px;height:47px;padding:0 9px;display:flex}.provenance i{background:var(--amber);box-shadow:0 0 7px var(--amber)}.provenance i.green{background:#5fcf91;box-shadow:0 0 7px #5fcf91}.provenance small,.provenance b{letter-spacing:.1em;font:500 6px DM Mono;display:block}.provenance small{color:#4c5769}.provenance b{color:#a07e58;margin-top:3px}.center{grid-template-rows:83px 1fr 72px;gap:7px;min-width:0;display:grid}.kit-display{background:radial-gradient(circle at 20%,#101a30,#04070c 55%),linear-gradient(#080b11,#020305);justify-content:space-between;align-items:center;padding:9px 15px;display:flex}.kit-display small,.chain small,.selected-strip small{letter-spacing:.15em;color:#50617c;font:500 7px DM Mono}.kit-display h1{letter-spacing:.01em;color:#d5d9e1;margin:2px 0 0;font-size:22px;font-weight:600}.kit-display p{color:#6d788b;margin:0;font-size:9px}.chain{border-left:1px solid #1c2534;width:225px;padding:7px 10px}.chain b{color:#9bb2ec;margin:4px 0;font-size:11px;display:block}.chain span{color:#505c6f;font:500 6px DM Mono}.pad-section{min-height:0;padding:7px}.pad-toolbar{justify-content:space-between;align-items:center;height:35px;padding:0 4px 6px;display:flex}.pad-toolbar small{margin-top:2px;display:block}.bank-switch{gap:3px;display:flex}.bank-switch button{color:#566174;cursor:pointer;background:#080a0e;border:1px solid #1f2631;width:65px;height:25px;font-size:8px;font-weight:700}.bank-switch button.active{color:#aec2f8;border-color:#3155ae;box-shadow:inset 0 0 10px #102753}.bank-switch button.active.amber{color:#ffc77c;border-color:#86541e;box-shadow:inset 0 0 10px #4c2b0c}.pads{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:5px;height:calc(100% - 35px);display:grid}.pad{text-align:left;cursor:pointer;background:linear-gradient(145deg,#262b34,#0b0d12 62%);border:2px solid #050609;border-radius:4px;min-width:0;padding:8px 9px;transition:transform 60ms,border-color 80ms,filter 80ms;position:relative;overflow:hidden;transform:translateY(0);box-shadow:inset 0 1px #ffffff17,inset 0 -7px 13px #050609,0 3px 5px #000}.pad:after{content:"";pointer-events:none;border:1px solid #ffffff06;border-radius:2px;position:absolute;inset:5px}.pad>span{color:#4a5362;font:500 7px DM Mono;position:absolute;top:6px;right:7px}.pad-glyph{stroke:#6f7885;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;opacity:.28;filter:drop-shadow(0 1px #000);width:49px;height:38px;position:absolute;bottom:7px;right:7px}.pad.amber .pad-glyph{stroke:#a97a45}.pad.hit .pad-glyph{opacity:.7;stroke:#9db7ff;filter:drop-shadow(0 0 4px #4e7cf6b3)}.pad.amber.hit .pad-glyph{stroke:#ffc57e;filter:drop-shadow(0 0 4px #f2a03cb3)}.pad strong{z-index:1;letter-spacing:.08em;color:#aeb5c0;margin-top:7px;font-size:13px;display:block;position:relative}.pad small{color:#555f70;margin-top:3px;font:500 6px DM Mono;display:block}.pad i{background:#314b89;width:12px;height:2px;position:absolute;bottom:6px;left:8px;box-shadow:0 0 3px #4e7cf666}.pad.amber i{background:#86541e;box-shadow:0 0 3px #f2a03c66}.pad.selected{border-color:#344c7e}.pad.hit{filter:brightness(1.55);border-color:var(--blue);transform:translateY(2px);box-shadow:inset 0 0 18px #4e7cf647,0 1px 2px #000}.pad.amber.hit{border-color:var(--amber);box-shadow:inset 0 0 18px #f2a03c40,0 1px 2px #000}.selected-strip{grid-template-columns:190px 1fr 80px;align-items:center;gap:10px;padding:7px 11px;display:grid}.selected-strip strong,.selected-strip span{display:block}.selected-strip strong{color:#c7ccd5;font-size:14px}.selected-strip span{color:#596579;font:500 7px DM Mono}.selected-strip>button{width:75px}.waveform{background:#03060b;border:1px solid #121a28;align-items:center;gap:2px;height:44px;padding:0 8px;display:flex;overflow:hidden}.waveform i{opacity:.65;background:linear-gradient(#6b91ee,#1b3c82);flex:1;width:2px;max-height:38px}.processor{flex-direction:column;min-height:0;padding-bottom:8px;display:flex}.macro-grid{grid-template-columns:repeat(3,1fr);gap:7px 3px;padding:13px 8px 8px;display:grid}.knob-unit{flex-direction:column;align-items:center;display:flex}.knob-unit>span{letter-spacing:.12em;color:#697589;text-transform:uppercase;margin-bottom:5px;font-size:8px;font-weight:700}.knob{cursor:ns-resize;background:radial-gradient(circle at 43% 34%,#3d424c 0 8%,#181b22 22%,#07080c 60%,#1b1e25 69%,#050609 73%);border:1px solid #050608;border-radius:50%;width:56px;height:56px;position:relative;box-shadow:0 5px 7px #000,inset 0 1px 2px #ffffff21}.knob:before{content:"";z-index:-1;background:conic-gradient(from 225deg,var(--blue)0 48%,transparent 49% 100%);opacity:.65;border:1px solid #262c36;border-radius:50%;position:absolute;inset:-5px}.knob.amber:before{background:conic-gradient(from 225deg,var(--amber)0 38%,transparent 39% 100%)}.knob i{border-radius:50%;position:absolute;inset:5px}.knob i:after{content:"";width:2px;height:12px;box-shadow:0 0 5px var(--blue);background:#8dadff;border-radius:2px;position:absolute;top:1px;left:50%;transform:translate(-50%)}.knob.amber i:after{box-shadow:0 0 5px var(--amber);background:#ffbd6b}.knob-unit b{color:#7895dc;margin-top:4px;font:500 8px DM Mono}.knob-unit:has(.amber) b{color:#c78638}.bus-display{background:radial-gradient(circle at 40% 20%,#0e1728,#03060b 65%);border:1px solid #151c28;margin:5px 9px 8px;padding:9px}.bus-display small{color:#4d5c73;letter-spacing:.14em;font:500 6px DM Mono}.bus-display b{color:#9fb5ec;margin:4px 0 8px;font-size:10px;display:block}.chain-nodes{align-items:center;display:flex}.chain-nodes span{color:#60708a;font:500 5px DM Mono}.chain-nodes i{background:#2b4d9f;flex:1;height:1px;margin:0 3px}.meters{flex:1;grid-template-columns:1fr 1fr;gap:8px;min-height:0;margin:0 9px;display:grid}.meters>div{text-align:center;flex-direction:column;display:flex}.meters small{color:#596579;letter-spacing:.12em;margin-bottom:4px;font:500 6px DM Mono}.meter{background:repeating-linear-gradient(0deg,#05070a 0 4px,#0c1016 5px 6px);border:1px solid #131923;flex:1;min-height:70px;position:relative;overflow:hidden;box-shadow:inset 0 0 9px #000}.meter i{background:linear-gradient(0deg,#315dcb 0 65%,#db8d31 84%,#e85e52);transition:height .12s;position:absolute;inset:auto 7px 3px;box-shadow:0 0 7px #4e7cf666}.meter span{z-index:1;text-align:right;color:#596579;height:33.33%;padding:2px;font:500 5px DM Mono;display:block;position:relative}.swing{border-top:1px solid #1b2029;margin:8px 9px 0;padding:7px 8px}.swing>div{justify-content:space-between;display:flex}.swing span,.swing b{color:#647087;font:500 7px DM Mono}.swing b{color:#d49446}.swing input{width:100%}footer{z-index:1;background:linear-gradient(#12151b,#07080b);border-top:1px solid #242933;flex:none;grid-template-columns:220px 1fr 145px;align-items:center;height:29px;padding:0 10px;display:grid}footer>span{color:#515c6d;letter-spacing:.1em;font:500 6px DM Mono}footer>span:last-child{text-align:right}footer div{justify-content:center;gap:4px;display:flex}footer b{color:#63718a;border:1px solid #1d2430;padding:3px 5px;font:500 5px DM Mono}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}}