.enter-screen{--hue: 223;--sat: 10%;--hue2: 275;--sat2: 100%;--light2: 65%;--primary: hsl(var(--hue2), var(--sat2), var(--light2));--trans-dur: .3s;--trans-timing: ease-in-out;--trans-timing2: cubic-bezier(.42, -1.84, .42, 1.84);--trans-timing3: cubic-bezier(.42, 0, .42, 1.84);position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(hsl(var(--hue),var(--sat),12%),hsl(var(--hue),var(--sat),3%));display:flex;align-items:center;justify-content:center;z-index:10000;font-size:20px}.power-btn{background-color:transparent;background-image:linear-gradient(hsl(var(--hue),var(--sat),10%),hsl(var(--hue),var(--sat),15%));border:0;border-radius:50%;box-shadow:0 0 0 .125em hsla(var(--hue2),var(--sat2),50%,0),0 0 .25em hsl(var(--hue),var(--sat),5%) inset,0 .125em .125em hsl(var(--hue),var(--sat),25%),0 0 1.5em hsla(var(--hue2),var(--sat2),var(--light2),.15);cursor:pointer;margin:auto;outline:transparent;position:relative;width:10em;height:10em;transition:box-shadow var(--trans-dur) var(--trans-timing);-webkit-tap-highlight-color:transparent}.power-btn:focus-visible{box-shadow:0 0 0 .125em hsla(var(--hue2),var(--sat2),50%,1),0 0 .25em hsl(var(--hue),var(--sat),5%) inset,0 .125em .125em hsl(var(--hue),var(--sat),25%)}.power-btn:before,.power-btn:after{border-radius:inherit;content:"";display:block;position:absolute}.power-btn:before{background-image:linear-gradient(hsl(var(--hue),var(--sat),20%),hsl(var(--hue),var(--sat),10%));box-shadow:0 .75em .75em .25em hsla(var(--hue),0%,0%,.7);top:1.5em;left:1.5em;width:7em;height:7em;transition:box-shadow var(--trans-dur) var(--trans-timing2),transform var(--trans-dur) var(--trans-timing2)}.power-btn:after{background-color:hsl(var(--hue),var(--sat),10%);background-image:linear-gradient(hsla(var(--hue),var(--sat),20%,0),hsl(var(--hue),var(--sat),20%));box-shadow:0 .0625em hsl(var(--hue),var(--sat),25%) inset,0 -.0625em hsl(var(--hue),var(--sat),25%) inset,0 0 .5em hsla(var(--hue2),var(--sat2),var(--light2),.08) inset;top:3em;left:3em;width:4em;height:4em;transition:background-color var(--trans-dur) var(--trans-timing),box-shadow var(--trans-dur) var(--trans-timing),transform var(--trans-dur) var(--trans-timing2)}.power-btn__icon{display:block;position:absolute;top:calc(50% - .75em);left:calc(50% - .75em);width:1.5em;height:1.5em;filter:drop-shadow(0 0 .15em hsla(var(--hue2),var(--sat2),var(--light2),.4));transition:filter var(--trans-dur) var(--trans-timing);z-index:1}.power-btn__icon g{stroke:hsla(var(--hue2),var(--sat2),var(--light2),.5);transition:stroke var(--trans-dur) var(--trans-timing)}.power-btn__sr{overflow:hidden;position:absolute;width:1px;height:1px}.power-btn:hover:before,.power-btn:hover:after,.power-btn:hover .power-btn__icon{transform:scale(.98)}.power-btn:hover:before{box-shadow:0 .375em .375em hsla(var(--hue),0%,0%,.7);transition-timing-function:var(--trans-timing3)}.power-btn:hover:after{background-color:hsl(var(--hue),var(--sat),20%);box-shadow:0 .0625em hsla(var(--hue2),var(--sat2),var(--light2),.5) inset,0 -.0625em hsla(var(--hue2),var(--sat2),var(--light2),.5) inset,0 0 .75em .25em hsla(var(--hue2),var(--sat2),var(--light2),.1) inset;transition-timing-function:var(--trans-timing),var(--trans-timing),var(--trans-timing3)}.power-btn:hover .power-btn__icon{filter:drop-shadow(0 0 .5em var(--primary)) drop-shadow(0 0 1em hsla(var(--hue2),var(--sat2),var(--light2),.4))}.power-btn:hover .power-btn__icon g{stroke:hsl(var(--hue2),var(--sat2),80%)}.power-btn:active:before,.power-btn:active:after,.power-btn:active .power-btn__icon{transform:scale(.95)}.power-btn:active .power-btn__icon{filter:drop-shadow(0 0 .75em var(--primary)) drop-shadow(0 0 1.5em var(--primary)) drop-shadow(0 0 2.5em hsla(var(--hue2),var(--sat2),var(--light2),.5))}.power-btn:active .power-btn__icon g{stroke:hsl(var(--hue2),var(--sat2),90%)}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(#1c1d22,#070708);display:flex;align-items:center;justify-content:center;z-index:9999;overflow:hidden;opacity:1;transition:opacity 5s ease-out}.splash-screen.splash-fade-out{opacity:0}.splash-title{display:flex;align-items:center;justify-content:center;gap:.5em;font-size:clamp(4rem,14vw,14rem);opacity:0;transition:opacity 1s ease-in}.splash-title-visible{opacity:1}.splash-letter{display:inline-block;line-height:1;will-change:opacity,transform,color,text-shadow;transition:font-size .15s ease-out,font-weight .1s,transform .15s ease-out,color .15s ease-out,text-shadow .15s ease-out}.splash-letter:nth-child(1){animation:letter-flicker 3s ease-in-out infinite}.splash-letter:nth-child(2){animation:letter-flicker 2.7s ease-in-out infinite;animation-delay:.3s}.splash-letter:nth-child(3){animation:letter-flicker 3.2s ease-in-out infinite;animation-delay:.7s}.splash-letter:nth-child(4){animation:letter-flicker 2.5s ease-in-out infinite;animation-delay:.5s}@keyframes letter-flicker{0%,to{opacity:1}33%{opacity:.93}66%{opacity:1}78%{opacity:.95}85%{opacity:1}}.maschine{display:flex;align-items:center;justify-content:center;width:100%;height:100dvh;overflow:hidden}.maschine__body{--surface: #1a1a1a;--surface-light: #2a2a2a;--surface-dark: #0e0e0e;--text: #888;--text-dim: #555;--text-bright: #ccc;--accent: #ff6600;--radius: 3px;width:680px;min-width:680px;background:linear-gradient(145deg,#1c1c1c,#111);border-radius:16px;padding:12px 16px 10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 40px #000000e6,0 0 0 1px #ffffff0a inset;font-family:Inter,Helvetica Neue,Arial,sans-serif;-webkit-user-select:none;user-select:none;transform-origin:center center}.maschine__top-btns{display:flex;gap:5px;justify-content:flex-end;padding-right:4px}.maschine__top-btn{width:36px;height:6px;background:linear-gradient(180deg,#3a3a3a,#2a2a2a);border-radius:2px;box-shadow:0 1px 2px #00000080,0 0 0 .5px #ffffff0f inset}.maschine__upper{display:flex;flex-direction:column;gap:6px}.maschine__upper-row{display:flex;gap:10px;align-items:stretch}.maschine__nav{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.maschine__nav-row{display:flex;gap:4px}.maschine__nav-btn{background:var(--surface);border:none;border-radius:var(--radius);color:var(--text);font-size:7px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 6px;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px #0006;white-space:nowrap}.maschine__nav-btn:hover{background:var(--surface-light);color:var(--text-bright)}.maschine__screens{display:flex;gap:8px;flex:1;min-width:0}.maschine__screen{flex:1;background:#0a0a0a;border-radius:5px;padding:6px;min-height:0;display:flex;flex-direction:column;border:1px solid #222}.maschine__screen-header{display:flex;align-items:center;gap:4px;font-size:7px;color:var(--text);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}.maschine__screen-arrow{color:var(--text-dim);font-size:8px}.maschine__screen-title{flex:1;text-align:center;color:var(--text-bright);font-weight:600}.maschine__screen-user{color:var(--text-dim)}.maschine__instruments{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;flex:1}.maschine__instrument{border-radius:3px;display:flex;align-items:flex-end;justify-content:center;padding:2px;font-size:6px;color:#aaa;text-align:center}.maschine__screen-footer{display:flex;justify-content:space-between;font-size:6px;color:var(--text-dim);margin-top:3px;text-transform:uppercase}.maschine__screen-header-right{display:flex;justify-content:space-between;font-size:7px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}.maschine__preset-area{display:flex;gap:6px;flex:1}.maschine__logo-section{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2px}.maschine__logo-icon{font-size:18px;color:var(--accent)}.maschine__logo-text{font-size:13px;font-weight:700;letter-spacing:.15em;color:#fff;text-transform:uppercase}.maschine__preset-list{flex:1;display:flex;flex-direction:column;gap:1px;overflow:hidden}.maschine__preset{font-size:6px;color:var(--accent);padding:1px 3px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.maschine__preset--active{background:var(--accent);color:#000;font-weight:600}.maschine__screen-footer-right{display:flex;justify-content:space-between;font-size:6px;color:var(--text-dim);margin-top:3px;text-transform:uppercase}.maschine__knobs{display:flex;justify-content:space-between;padding:0 2px}.maschine__knob{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.maschine__knob-cap{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3a3a,#1a1a1a);box-shadow:0 2px 6px #0009,0 0 0 1px #ffffff0f inset;position:relative}.maschine__knob-indicator{position:absolute;top:3px;left:50%;transform:translate(-50%);width:2px;height:5px;background:#666;border-radius:1px}.maschine__middle{display:flex;gap:10px;align-items:flex-start}.maschine__encoder-area{display:flex;flex-direction:column;gap:5px;flex-shrink:0}.maschine__encoder-btns-top{display:flex;gap:4px}.maschine__encoder-row{display:flex;align-items:center;gap:8px}.maschine__encoder{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.maschine__encoder-ring{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#333,#1a1a1a);box-shadow:0 3px 10px #000000b3,0 0 0 3px #111,0 0 0 4px #ffffff0a;position:relative}.maschine__encoder-indicator{position:absolute;top:4px;left:50%;transform:translate(-50%);width:2px;height:8px;background:#666;border-radius:1px}.maschine__encoder-side-btns{display:flex;flex-direction:column;gap:3px}.maschine__mode-row{display:flex;gap:4px}.maschine__sm-btn{background:var(--surface);border:none;border-radius:var(--radius);color:var(--text);font-size:6.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 5px;cursor:pointer;box-shadow:0 1px 3px #0006;transition:all .15s;white-space:nowrap}.maschine__sm-btn:hover{background:var(--surface-light);color:var(--text-bright)}.maschine__sm-btn--active{background:#2a2a2a;color:#fff;box-shadow:0 0 6px #ffffff1a,0 1px 3px #0006}.maschine__func-area{flex:1;display:flex;flex-direction:column;gap:6px}.maschine__func-row{display:flex;gap:4px}.maschine__touch-strip{height:5px;background:#111;border-radius:3px;box-shadow:0 1px 2px #00000080 inset,0 0 0 .5px #ffffff0a;overflow:hidden}.maschine__touch-strip-track{width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);border-radius:inherit}.maschine__pad-section{display:flex;gap:4px}.maschine__pad-categories{display:flex;flex-direction:column;justify-content:space-between;padding:4px 0;flex-shrink:0;width:56px}.maschine__pad-category-pair{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.maschine__pad-category{font-size:5.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;text-align:right;padding-right:4px}.maschine__pad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}.maschine__pad{--pad-color: #00e5ff;aspect-ratio:1;border:none;border-radius:8px;cursor:pointer;position:relative;overflow:hidden;transition:all .12s ease;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--pad-color) 85%,white 15%),color-mix(in srgb,var(--pad-color) 100%,black 20%) 55%,color-mix(in srgb,var(--pad-color) 60%,black 40%));box-shadow:0 0 12px color-mix(in srgb,var(--pad-color) 50%,transparent),0 2px 8px #00000080,0 0 0 1px #ffffff0d inset}.maschine__pad:hover{transform:scale(1.03);box-shadow:0 0 20px color-mix(in srgb,var(--pad-color) 70%,transparent),0 0 40px color-mix(in srgb,var(--pad-color) 30%,transparent),0 2px 8px #00000080}.maschine__pad:active{transform:scale(.96);filter:brightness(1.2);box-shadow:0 0 25px color-mix(in srgb,var(--pad-color) 80%,transparent),0 0 50px color-mix(in srgb,var(--pad-color) 40%,transparent)}.maschine__pad-label{position:absolute;bottom:3px;left:4px;font-size:5.5px;color:#00000073;font-weight:600;text-transform:uppercase;pointer-events:none}.maschine__bottom{display:flex;flex-direction:column;gap:6px}.maschine__groups{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.maschine__group-btn{--group-color: #2979ff;border:none;border-radius:5px;padding:4px 0;font-size:8px;font-weight:700;color:#ffffffe6;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:all .12s;background:linear-gradient(180deg,color-mix(in srgb,var(--group-color) 70%,white 10%),color-mix(in srgb,var(--group-color) 80%,black 20%));box-shadow:0 0 8px color-mix(in srgb,var(--group-color) 40%,transparent),0 1px 4px #0006}.maschine__group-btn:hover{box-shadow:0 0 14px color-mix(in srgb,var(--group-color) 60%,transparent),0 1px 4px #0006;filter:brightness(1.15)}.maschine__group-btn:active{transform:scale(.95);filter:brightness(1.25)}.maschine__transport{display:flex;gap:4px}.maschine__transport-btn{flex:1;background:var(--surface);border:none;border-radius:var(--radius);color:var(--text);font-size:6px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:4px 2px;cursor:pointer;box-shadow:0 1px 3px #0006;transition:all .15s}.maschine__transport-btn:hover{background:var(--surface-light);color:var(--text-bright)}.maschine__transport-btn--play{color:#4caf50}.maschine__transport-btn--rec{color:#f44336}.maschine__transport-btn--shift{background:var(--accent);color:#000;font-weight:700}.maschine__transport-btn--shift:hover{filter:brightness(1.15)}.app{width:100%;height:100dvh;margin:0;padding:0;overflow:hidden}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-image:linear-gradient(#1c1d22,#070708);background-color:#070708;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh;background:inherit}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}