:root{color:#f7f5ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#10111b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#10111b;min-height:100%}body{min-width:320px;min-height:100%;margin:0}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #fff2a6}.app-shell{width:min(100%,740px);min-height:100vh;padding:max(27px, env(safe-area-inset-top)) 15px calc(30px + env(safe-area-inset-bottom));background:radial-gradient(circle at 93% 0,#ef777f40,#0000 21rem),radial-gradient(circle at 0 28%,#64bed229,#0000 22rem),#10111b;margin:0 auto}.hero{padding:8px 7px 25px}.eyebrow,.section-topline span,.sequencer-heading p{color:#aaaabf;letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:10px;font-weight:850}.eyebrow{align-items:center;gap:8px;display:flex}.status-dot{background:#74768a;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 3px #74768a1f}.status-dot.is-ready{background:#b7f087;box-shadow:0 0 15px #b7f087}.hero-row{justify-content:space-between;align-items:end;gap:16px;margin-top:10px;display:flex}h1,h2,p{margin:0}h1{color:#f9f7ff;letter-spacing:-.075em;font-size:clamp(42px,12vw,68px);line-height:.88}h1 span{color:#ffbd89}.hero p:not(.eyebrow){color:#b4b5c7;max-width:365px;margin-top:14px;font-size:15px;line-height:21px}.share-button,.small-button,.tap-button,.preset-buttons button,.section-topline button,.mute-button{cursor:pointer;border:0}.share-button{color:#e6e6ee;background:#212231e6;border:1px solid #3e4054;border-radius:12px;flex:none;align-items:center;gap:6px;min-height:42px;padding:9px 12px;font-size:12px;font-weight:800;display:inline-flex}.share-button span{color:#ffc698;font-size:17px;line-height:0}.transport-card,.sequencer-card{background:#1c1d2beb;border:1px solid #3d3f52;border-radius:22px;box-shadow:0 20px 44px #00000038}.transport-card{grid-template-columns:minmax(0,1fr) auto;gap:13px;padding:17px;display:grid}.play-button{color:#271820;cursor:pointer;background:#ffbd89;border:0;border-radius:15px;justify-content:center;align-items:center;gap:10px;min-height:61px;font-size:16px;font-weight:900;display:flex;box-shadow:0 10px 22px #ffaa782e}.play-button.is-playing{color:#fff6ee;background:#d85e67;box-shadow:0 10px 22px #d85e6733}.play-icon{font-size:14px}.tempo-readout{background:#171824;border:1px solid #44465d;border-radius:15px;align-content:center;justify-items:center;width:78px;display:grid}.tempo-readout strong{color:#fbf6ff;letter-spacing:-.08em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;line-height:24px}.tempo-readout span{color:#a5a6b7;letter-spacing:.13em;margin-top:4px;font-size:9px;font-weight:850}.transport-actions{grid-column:1/-1;grid-template-columns:41px 1fr 41px;gap:8px;display:grid}.small-button,.tap-button{color:#e7e5ec;background:#252636;border:1px solid #414359;border-radius:11px;min-height:39px;font-weight:800}.small-button{color:#ffc698;font-size:21px;line-height:1}.tap-button{color:#d6d6e4;letter-spacing:.04em;font-size:12px}.range-control{grid-column:1/-1;display:block}.range-control span{color:#c9c8d6;justify-content:space-between;font-size:12px;display:flex}.range-control b{font-weight:800}.range-control em{color:#ffa56f;font-style:normal;font-weight:800}.range-control input{accent-color:#ff996b;cursor:pointer;width:100%;height:27px;margin:2px 0 -2px;display:block}.swing-control em{color:#91dce0}.swing-control input{accent-color:#82dce3}.preset-section{margin:19px 3px}.section-topline{justify-content:space-between;align-items:center;margin-bottom:9px;display:flex}.section-topline button{color:#bfc0ce;background:0 0;padding:5px 1px;font-size:11px;font-weight:800}.preset-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;display:grid}.preset-buttons button{color:#d6d5e0;background:#242536;border:1px solid #3b3d51;border-radius:11px;min-height:39px;font-size:12px;font-weight:800}.preset-buttons button:active,.share-button:active,.small-button:active,.tap-button:active,.play-button:active,.mute-button:active{transform:translateY(1px)}.sequencer-card{padding:17px 12px 14px;overflow:hidden}.sequencer-heading{justify-content:space-between;align-items:flex-start;gap:10px;padding:0 5px 14px;display:flex}.sequencer-heading p{color:#ffb27a;font-size:10px}h2{color:#faf8ff;letter-spacing:-.04em;margin-top:4px;font-size:21px;line-height:24px}.bar-key{color:#9496a8;white-space:nowrap;align-items:center;gap:5px;margin-top:10px;font-size:10px;display:flex}.bar-key i{background:#ffb27a;border-radius:3px;width:18px;height:3px;display:block}.step-numbers,.pad-grid{grid-template-columns:repeat(16,minmax(0,1fr));column-gap:2px;display:grid}.step-numbers{padding:0 1px 8px}.step-numbers span{color:#76788b;text-align:center;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;position:relative}.step-numbers .is-downbeat{color:#ffc091;font-weight:900}.step-numbers .is-group-end:after,.pad.is-group-end:after{z-index:2;content:"";background:#505266;border-radius:2px;width:2px;position:absolute;top:-1px;bottom:-1px;right:-1px}.track{border-top:1px solid #4c4e6275;padding:7px 1px}.track:first-child{border-top:0}.track-controls{align-items:center;gap:8px;min-height:25px;padding:0 4px 5px;display:flex}.track-name{color:#dbdae4;white-space:nowrap;align-items:center;gap:6px;min-width:84px;font-size:11px;font-weight:850;display:inline-flex}.track-name i{background:var(--track-color);width:7px;height:7px;box-shadow:0 0 8px var(--track-color);border-radius:50%;display:block}.mute-button{color:#aaabba;background:#242535;border:1px solid #484a60;border-radius:7px;min-height:22px;padding:2px 7px;font-size:9px;font-weight:850}.mute-button.is-muted{color:#ffc4c4;background:#4a2f3a;border-color:#a4616a}.volume-control{flex:1;min-width:55px;display:block}.volume-control input{width:100%;height:18px;accent-color:var(--track-color);cursor:pointer;margin:0;display:block}.pad{cursor:pointer;background:#20212f;border:1px solid #45475e;border-radius:5px;min-width:0;min-height:29px;transition:background 80ms,border-color 80ms,box-shadow 80ms,transform 80ms;position:relative}.pad.is-on{border-color:var(--track-color);background:var(--track-color);box-shadow:inset 0 0 0 1px #ffffff40, 0 0 9px color-mix(in srgb, var(--track-color) 45%, transparent)}.pad.is-current{box-shadow:inset 0 0 0 2px #fff2bd,0 0 12px #fff0bc99}.pad.is-on.is-current{filter:brightness(1.22)}.pad:active{transform:scale(.93)}.status-message{color:#bbbccc;text-align:center;min-height:22px;margin:17px 7px 0;font-size:12px;line-height:18px}footer{color:#77798d;text-align:center;margin:6px 18px 0;font-size:10px;line-height:15px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width>=560px){.app-shell{padding-left:24px;padding-right:24px}.transport-card{grid-template-columns:minmax(0,1.3fr) 96px minmax(155px,.9fr);align-items:center}.transport-actions{grid-area:1/3}.range-control{grid-column:auto}.sequencer-card{padding:22px 19px 18px}.pad{min-height:33px}}@media (width<=360px){.app-shell{padding-left:10px;padding-right:10px}.sequencer-card{padding-left:9px;padding-right:9px}.track-name{min-width:74px;font-size:10px}.track-controls{gap:5px}.mute-button{padding-left:5px;padding-right:5px}.pad{border-radius:4px;min-height:27px}}