:root{--pad-inactive:#1c1d21;--pad-active:#f04040;--pad-selected:#cbf040;--text:#6b6375;--text-h:#08060d;--bg:#101113;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}body{margin:0}#root{text-align:center;box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}.center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}.pads-column{flex-direction:column;display:flex}.pads-row{flex-direction:row;display:flex}.logo{width:550px}.logo-wiggle{animation:.4s infinite wiggle}@keyframes wiggle{0%{opacity:1;transform:skew(24deg)}10%{opacity:.8;transform:skew(-8deg)}20%{opacity:.5;transform:skew(55deg)}30%{opacity:.2;transform:skew(-60deg)}40%{opacity:1;transform:skew(29deg)}50%{opacity:.5;transform:skew(-60deg)}60%{opacity:.3;transform:skew(3deg)}70%{opacity:.9;transform:skew(-2deg)}80%{opacity:.4;transform:skew(1deg)}90%{opacity:.2;transform:skew(10deg)}to{opacity:.8;transform:skew(0)}}.pad-square{fill:#28292d;stroke:var(--pad-inactive);stroke-width:1px;rx:10px;transition:stroke .3s}.pad-square:hover{stroke:var(--pad-selected);cursor:pointer}.blink-playing{stroke:var(--pad-active)}.blink-pause{animation:.8s infinite blinking}@keyframes blinking{0%{stroke:var(--pad-inactive)}to{stroke:var(--pad-active)}}