@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-ext-wght-normal-BOFOeGcA.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-wght-normal-Xz1IZZA0.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-cyrillic-wght-normal-Dvxsihut.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-greek-wght-normal-DL7QRZyv.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-vietnamese-wght-normal-usUDDRr7.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-ext-wght-normal-Ch3YOpNY.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:DM Sans Variable,sans-serif;color:#342c40;background:var(--bg);transition:background-color .3s;font-synthesis:none;--bg:#eee9f3;--text:#342c40;--muted:#80758c;--line:#d8cee2;--shell-top:#faf5ff;--shell-mid:#d9cbe8;--shell-bottom:#afa0c4;--shell-text:#59466d;--control:#9480a8;color-scheme:light}:root[data-theme=dark]{--bg:#1b1723;--text:#eee7f6;--muted:#a398b3;--line:#3d334a;--shell-top:#655275;--shell-mid:#3c2f4c;--shell-bottom:#261e32;--shell-text:#ded1ed;--control:#b09cc3;color-scheme:dark;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:transparent;transition:color .3s}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ad8ed6;outline-offset:5px}button{touch-action:manipulation}#app{max-width:1440px;margin:auto;padding:0 64px}main{display:flex;flex-direction:column;align-items:center;padding:40px 0;gap:0;width:100%}.stage{width:100%;perspective:1400px;display:flex;justify-content:center;padding:20px 12px 35px;position:relative}.stage:after{content:"";position:absolute;bottom:5px;left:12%;right:12%;height:60px;background:#2b163d;filter:blur(24px);opacity:.2;border-radius:50%;z-index:-1}.device{width:470px;padding:32px 35px 21px;border-radius:32px;position:relative;transform:rotateX(4deg) rotateY(-3deg) rotate(0);background:linear-gradient(140deg,var(--shell-top) 0%,var(--shell-mid) 65%,var(--shell-bottom) 100%);box-shadow:inset 0 2px 2px #fff9,inset 2px 0 2px #fff7,inset -2px -2px 3px #0003,7px 12px 0 -2px var(--shell-bottom),8px 14px 0 -2px #756286,15px 28px 30px #0003,35px 55px 60px #0002;color:var(--shell-text);transform-style:flat}.device:before{content:"";position:absolute;inset:2px;border:1px solid #fff3;border-radius:30px;pointer-events:none;background:linear-gradient(125deg,#fff2,transparent 40%,#fff1 70%,transparent)}.device-header{display:flex;align-items:center;justify-content:space-between;margin:3px 2px 28px}.device-brand{font-family:Manrope Variable,sans-serif;font-size:26px;font-weight:800;letter-spacing:-1.8px;text-shadow:0 1px 1px #fff4}.device-brand span{display:block;font-family:DM Sans Variable,sans-serif;text-transform:uppercase;font-size:7px;letter-spacing:1.65px;font-weight:500;margin-top:2px}.power{font-size:7px;font-weight:700;letter-spacing:1.5px;display:flex;align-items:center;gap:7px}.power>span{width:5px;height:5px;border-radius:50%;background:#a2f2ad;box-shadow:0 0 8px #88ed99,inset 0 1px 1px #fff7}.power.sounding>span{background:#ffb35c;box-shadow:0 0 8px #ff922e,inset 0 1px 1px #fff7}.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:17px 15px;background:linear-gradient(140deg,#736181,#c5b3d5);padding:14px;border-radius:16px;box-shadow:inset 0 3px 7px #0008,0 1px 1px #fff8}.pad{border:0;padding:0;border-radius:12px;background:#b47791;position:relative;min-width:0;box-shadow:0 5px #a36c84,0 7px 6px #0009;transform:translateY(-2px);transition:transform 90ms,box-shadow 90ms}.pad-face{display:flex;flex-direction:column;padding:8px 8px 9px;border-radius:12px;background:linear-gradient(150deg,#ffe5ed,#efb9cc 14%,#dfa4ba 75%,#f6cedc);border:1px solid #ffffff30;box-shadow:inset 0 1px 1px #ffffff50,inset -1px -1px 2px #000a}.led-screen{display:flex;align-items:center;justify-content:center;position:relative;height:81px;border-radius:5px;background:radial-gradient(ellipse at 40% 10%,color-mix(in srgb,var(--pad-color) 15%,#0c1515),#0c1213 80%);box-shadow:inset 0 2px 5px #000,0 1px #fff2;overflow:hidden;color:var(--pad-color);border:1px solid #0008}.led-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff1b,transparent 45%,#ffffff04 46%,transparent 70%),repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#0005 2px,#0005 3px);pointer-events:none}.pixel-cat{width:64px;height:64px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--pad-color) 40%,transparent));opacity:1}.pad-caption{display:flex;justify-content:space-between;align-items:center;margin-top:9px;color:#553343;font-size:8.5px;letter-spacing:.05px;gap:2px;white-space:nowrap}.pad-caption kbd{font:500 8px DM Sans Variable,sans-serif;color:#765264}.pad:active,.pad.playing{transform:translateY(3px);box-shadow:0 1px #a36c84,0 2px 3px #0007}.pad.playing .pixel-cat{opacity:1}.pad:hover .pad-face{background:linear-gradient(150deg,#fff0f5,#f5c8d8 25%,#eab5c9 75%,#ffe0eb)}.device-controls{display:flex;justify-content:space-between;align-items:center;margin:28px 3px 22px;gap:28px}#stop{border:1px solid #0003;border-radius:5px;background:linear-gradient(#ffffff15,#00000010);box-shadow:inset 0 1px #fff4,0 2px 2px #0002;padding:9px 11px;display:flex;gap:8px;align-items:center;font-size:7px;font-weight:700;letter-spacing:1.2px;color:var(--shell-text)}#stop:active{transform:translateY(1px)}.stop-icon{width:5px;height:5px;background:var(--shell-text);border-radius:1px}.volume{display:flex;align-items:center;gap:12px;flex:1}.volume svg{width:13px;height:13px;fill:none;stroke:var(--shell-text);stroke-width:1.5}.volume input{width:100%;height:4px;appearance:none;background:linear-gradient(#9376aa,#664d80);border-bottom:1px solid #fff5;border-radius:4px;cursor:pointer}.volume input::-webkit-slider-thumb{appearance:none;width:14px;height:19px;border-radius:4px;background:linear-gradient(90deg,#cbb7dd,#f0e4fa 40%,#ac91c2);border:1px solid #7e6297;box-shadow:0 2px 3px #0005,inset 0 1px #fff9}.volume input::-moz-range-thumb{width:14px;height:19px;border-radius:4px;background:#cbb7dd;border:1px solid #7e6297}.volume output{font-size:8px;font-variant-numeric:tabular-nums;min-width:14px}.device-bottom{border-top:1px solid #947ba740;padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-size:5.5px;letter-spacing:1.15px;opacity:.75}.speaker{height:16px;width:60px;background-image:radial-gradient(circle,#45314f 1px,transparent 1.3px);background-size:4px 4px;opacity:.6}.screw{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ded1eb,#917ba4);box-shadow:inset 0 1px 1px #fff9,0 1px 1px #0004}.screw:after{content:"";position:absolute;top:3px;left:1px;right:1px;height:1px;background:#685476;transform:rotate(-35deg)}.screw-tl{top:18px;left:19px}.screw-tr{top:18px;right:19px}.screw-bl{bottom:18px;left:19px}.screw-br{bottom:18px;right:19px}@keyframes cat-bob{to{transform:translateY(-2px)}}@media(max-width:1050px){#app{padding:0 36px}.device{width:420px;padding:30px 28px 20px}.pads{gap:15px 11px;padding:12px}.led-screen{height:70px}.pixel-cat{width:57px;height:57px}.pad-caption{font-size:7.5px}}@media(max-width:780px){#app{padding:0 24px}main{padding:24px 0;gap:0}.stage{padding:18px 5px 32px}.device{transform:rotateX(3deg) rotateY(-2deg) rotate(0);width:min(420px,100%)}}@media(max-width:420px){#app{padding:0 19px}.device{padding:26px 22px 19px;border-radius:26px}.pads{padding:10px;gap:14px 10px}.pad-face{padding:6px 6px 8px}.led-screen{height:63px}.pixel-cat{width:53px;height:53px}.pad-caption{font-size:7px}.device-header{margin-bottom:22px}.device-brand{font-size:23px}.device-controls{gap:20px}.device-bottom{font-size:4.5px;letter-spacing:.7px}.speaker{width:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}:root[data-theme=light] .led-screen{background:radial-gradient(ellipse at 40% 10%,#fffdfd,#f0e5ed 80%);box-shadow:inset 0 2px 5px #70536b30,0 1px #fff9;border-color:#b997aa80;color:var(--cat-light)}:root[data-theme=light] .led-screen:after{background:linear-gradient(125deg,#ffffff60,transparent 45%),repeating-linear-gradient(0deg,transparent 0,transparent 2px,#72526812 2px,#72526812 3px)}:root[data-theme=light] .pixel-cat{filter:drop-shadow(0 1px 1px #70536b25);opacity:1}:root[data-theme=dark] .led-screen{background:linear-gradient(145deg,#292035,#1e1729);color:var(--pad-color)}:root[data-theme=dark] .pixel-cat,:root[data-theme=dark] .pad.playing .pixel-cat{filter:none}.device-brand{display:flex;align-items:center;gap:9px}.device-logo{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}.device-bottom{opacity:1;gap:10px}.theme-switch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);width:132px;height:31px;padding:3px;border-radius:7px;background:linear-gradient(#211828,#40304d);border:1px solid #281d3280;box-shadow:inset 0 2px 4px #0008,0 1px #fff5;isolation:isolate}.theme-switch button{position:relative;z-index:2;border:0;background:none;color:#d8c9e5;padding:0;font-size:7px;letter-spacing:.5px;font-weight:700;border-radius:4px}.theme-switch button[aria-pressed=true]{color:#553343;text-shadow:0 1px #fff7}.switch-thumb{position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border:1px solid #bd93a9;border-radius:4px;background:linear-gradient(100deg,#caa4bb,#ffe5ef 45%,#e5bcd0 75%,#bd91aa);box-shadow:inset 0 1px 1px #fff,0 2px 3px #0007;transition:transform .14s ease}.theme-switch[data-position=system] .switch-thumb{transform:translate(100%)}.theme-switch[data-position=dark] .switch-thumb{transform:translate(200%)}.theme-switch,.theme-switch button{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.theme-switch.dragging,.theme-switch.dragging button{cursor:grabbing}.theme-switch.dragging .switch-thumb{transition:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:420px){.theme-switch{width:114px}.device-logo{width:24px;height:24px}.device-bottom{gap:7px}}@media(min-width:1051px){.device{width:720px}}.page-controls{display:flex;align-items:center;justify-content:space-between;margin:-12px 3px 16px;gap:12px}#page-label{font-size:7px;font-weight:700;letter-spacing:1.4px}.page-navigation{display:flex;align-items:center;gap:7px}.page-arrow{display:flex;align-items:center;justify-content:center;width:26px;height:27px;padding:7px;border:1px solid #4a354e80;border-radius:6px;background:linear-gradient(145deg,#ae90ab,#8d6f8d);color:#342b3c;box-shadow:inset 0 1px 1px #ffffff40,inset 0 -1px 2px #0002,0 2px #614c68,0 3px 3px #0003;transition:transform 90ms,box-shadow 90ms}.page-arrow:hover{background:linear-gradient(145deg,#bca0b9,#9b7c9b)}.page-arrow:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0002,0 1px 1px #0003}.page-arrow svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.page-lcd{padding:5px 7px;border:1px solid #26302b;border-radius:3px;background:repeating-linear-gradient(0deg,#00000008 0 1px,transparent 1px 3px),linear-gradient(140deg,#b9c5a4,#93a884);color:#273e2d;font:700 11px ui-monospace,monospace;letter-spacing:1px;box-shadow:inset 0 1px 3px #0005,0 1px #fff5;text-shadow:0 0 2px #314a3240}