@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#ececf6;font-synthesis:none;--line:#252532;--muted:#8d8c9f;--purple:#9274ff;--cyan:#4de1df;--pink:#ed65ad;background:#0a0a11;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 76% -10%,#242043 0,#0000 32%),radial-gradient(circle at 12% 65%,#17162b 0,#0000 35%),#0a0a11;min-width:320px;margin:0}.app-shell{max-width:1500px;margin:auto;padding:0 42px 30px}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;height:82px;display:flex}.brand,.transport,.header-actions,.panel-head,.panel-tools,.hero-meta,.meter-head,.meter-foot,.synth-status,.sequencer-foot,.swing,.status{align-items:center;display:flex}.brand{gap:12px}.logo-mark{color:#fff;background:linear-gradient(135deg,#ad8aff,#6153e7);border-radius:10px;place-items:center;width:34px;height:34px;display:grid;box-shadow:0 0 24px #705bef55}.brand-name{letter-spacing:-.7px;font-size:18px;font-weight:800}.brand-name span{color:#a991ff}.eyebrow,.panel-label,.display-label,.section-title{letter-spacing:1.2px;color:#858396;font:500 10px DM Mono,monospace}.eyebrow{margin-top:3px;font-size:8px}.live-dot,.footer-dot,.signal-dot,.status>span,.tiny-dot{background:#58dec9;border-radius:50%;display:inline-block}.live-dot{width:4px;height:4px;margin:0 3px 1px}.transport{gap:9px}.play-btn,.ghost-button,.icon-button,.wave-select button{color:#cfcde0;cursor:pointer;background:#171720;border:1px solid #30303e;font:600 12px Manrope;transition:all .2s}.play-btn{color:#fff;background:#8067ec;border-color:#a28dff;border-radius:8px;align-items:center;gap:7px;padding:9px 14px;display:flex;box-shadow:0 0 16px #775cf333}.play-btn:hover,.play-btn.active{background:#967bff;transform:translateY(-1px)}.icon-button{border-radius:8px;place-items:center;width:34px;height:34px;padding:0;display:grid}.icon-button:hover,.ghost-button:hover{color:#fff;border-color:#696280}.transport-rule{border-left:1px solid #343340;height:25px;margin:0 8px}.bpm-control{color:#858396;align-items:center;gap:8px;font:10px DM Mono;display:flex}.bpm-control input{color:#f0eff8;text-align:center;background:#171720;border:0;border-radius:5px;outline:none;width:45px;padding:7px 4px;font:12px DM Mono}.volume-control{color:#8e8d9d;align-items:center;gap:7px;font-size:11px;display:flex}.volume-control input{width:78px}.volume-control span{color:#b9b7c8;width:28px;font:10px DM Mono}.header-actions{gap:10px}.status{color:#908ea1;gap:7px;font:10px DM Mono}.status>span{width:6px;height:6px}.status-pulse{animation:1.4s infinite pulse;box-shadow:0 0 0 5px #54dcc022}.hero{justify-content:space-between;align-items:end;padding:56px 2px 45px;display:flex}.kicker{color:#8a87a0;letter-spacing:1.4px;align-items:center;gap:9px;font:10px DM Mono;display:flex}.kicker svg{color:var(--purple)}.kicker span{color:#403d53}h1{letter-spacing:-2.5px;margin:16px 0 10px;font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.1}h1 em{color:#a18cff;font-style:normal}p{color:#8f8da0;margin:0;font-size:13px}.hero-meta{color:#626174;gap:12px;font:9px DM Mono}.mini-wave{align-items:center;gap:3px;height:25px;display:flex}.mini-wave i{background:#6055a5;border-radius:3px;width:2px;height:12px;animation:1.1s ease-in-out infinite alternate wave}.mini-wave i:nth-child(2n){height:20px;animation-delay:.2s}.mini-wave i:nth-child(3n){height:7px;animation-delay:.45s}.workspace-grid{grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:18px;display:grid}.panel{background:linear-gradient(145deg,#14141eeb,#101018eb);border:1px solid #292936;border-radius:13px;overflow:hidden;box-shadow:0 18px 50px #00000016}.sequencer-panel{min-height:360px}.panel-head{justify-content:space-between;gap:12px;padding:22px 23px 19px}.panel-head h2{letter-spacing:-.5px;margin:7px 0 0;font-size:17px}.panel-tools{gap:9px}.pattern-pill{color:#9c99ac;border:1px solid #2d2d3b;border-radius:5px;padding:8px 10px;font:10px DM Mono}.tiny-dot{width:5px;height:5px;margin-right:5px}.ghost-button{border-radius:6px;align-items:center;gap:7px;padding:8px 10px;font-size:10px;display:flex}.sequencer-scroll{padding:0 18px;overflow-x:auto}.step-grid{grid-template-columns:82px repeat(16,minmax(28px,1fr));gap:6px;min-width:670px;display:grid}.row-spacer{height:20px}.step-number{color:#696778;text-align:center;padding-bottom:7px;font:9px DM Mono;transition:all .2s}.step-number.now{color:#c2b7ff}.seq-row{display:contents}.track-name{color:#aaa8b7;align-items:center;gap:8px;padding:11px 0;font-size:10px;display:flex}.track-icon{border-radius:5px;place-items:center;width:20px;height:20px;font:500 8px DM Mono;display:grid}.track-icon.violet{color:#b8a9ff;background:#6f5bc51c;border:1px solid #735de155}.track-icon.pink{color:#f5a2cb;background:#d7598d1c;border:1px solid #d7598d55}.track-icon.cyan{color:#8ae9e6;background:#31c4c21c;border:1px solid #31c4c255}.step-cell{cursor:pointer;background:#181821;border:1px solid #2c2c3b;border-radius:5px;height:33px;padding:0;transition:all .18s;position:relative}.step-cell:hover{border-color:#635f76;transform:scale(1.07)}.step-cell span{background:#3b3a48;border-radius:50%;width:5px;height:5px;margin:auto;transition:all .2s;display:block}.step-cell.on.violet{background:linear-gradient(145deg,#6e55bf,#44328d);border-color:#8970e5;box-shadow:0 0 13px #7454db44}.step-cell.on.pink{background:linear-gradient(145deg,#c35491,#7d315e);border-color:#e779ad;box-shadow:0 0 13px #e25a9c44}.step-cell.on.cyan{background:linear-gradient(145deg,#329eab,#216d81);border-color:#51d3d1;box-shadow:0 0 13px #39ced044}.step-cell.on span{background:#fff;box-shadow:0 0 8px #fff}.step-cell.playing{outline-offset:2px;outline:1px solid #b7aaff;animation:.35s stepFlash}.sequencer-foot{color:#777687;border-top:1px solid #252532;gap:22px;margin:22px 23px 17px;padding-top:15px;font:9px DM Mono}.sequencer-foot kbd{color:#c0bde0;background:#242331;border:1px solid #363447;border-radius:3px;margin-right:5px;padding:3px 5px}.swing{gap:9px;margin-left:auto}.swing-bars{align-items:center;gap:2px;display:flex}.swing-bars i{background:#514b7f;width:3px;height:11px}.swing-bars i:nth-child(2n){background:#7565bf;height:17px}.swing strong{color:#a49dcb;font-weight:400}.synth-panel{padding-bottom:24px}.synth-status{color:#7b798c;gap:6px;font:9px DM Mono}.signal-dot{width:5px;height:5px}.synth-display{background:linear-gradient(120deg,#1b1830,#161627);border:1px solid #312b50;border-radius:8px;justify-content:space-between;align-items:center;margin:0 23px 21px;padding:15px 16px;display:flex}.display-label{font-size:8px}.synth-display strong{color:#ddd9f1;margin-top:5px;font-size:14px;display:block}.display-wave{color:#a796fb;letter-spacing:-5px;opacity:.8;font-size:23px}.control-section{padding:0 23px 16px}.section-title{color:#777489;border-bottom:1px solid #272634;padding-bottom:9px;font-size:9px}.section-title span{float:right;color:#575467}.wave-select{grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px;display:grid}.wave-select button{color:#7f7d8f;background:#181821;border-radius:5px;padding:8px 4px;font-size:9px}.wave-select button.selected{color:#dcd4ff;background:#332a5b;border-color:#7665c5}.sliders{grid-template-columns:1fr 1fr;gap:17px 14px;padding:0 23px;display:grid}.slider-control{color:#8e8b9e;grid-template-columns:50px 1fr 35px;align-items:center;gap:8px;font-size:10px;display:grid}.slider-control output{text-align:right;color:#aaa6be;font:9px DM Mono}.range-wrap{align-items:center;height:14px;display:flex;position:relative}.range-line{pointer-events:none;background:#302e3c;border-radius:3px;height:2px;position:absolute;left:0;right:0}.slider-control input{z-index:1;accent-color:#9274ff;background:0 0;width:100%;position:relative}.bottom-grid{grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px;display:grid}.keyboard-panel{padding-bottom:23px}.keyboard-hint{color:#6f6c7e;font:9px DM Mono}.keyboard-hint b{color:#b2aec7;border:1px solid #3b394a;border-radius:3px;margin-left:4px;padding:3px 5px}.keys{gap:5px;padding:2px 23px 0;display:flex}.piano-key{color:#aba8b9;cursor:pointer;background:linear-gradient(#2c2b38,#1b1b26);border:1px solid #3a3949;border-radius:5px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:7px;height:74px;padding-bottom:9px;transition:all .12s;display:flex;box-shadow:0 5px #12121a}.piano-key:hover,.piano-key.pressed{color:#fff;background:linear-gradient(#7361c9,#483993);transform:translateY(3px);box-shadow:0 2px #12121a}.piano-key span{font-size:13px;font-weight:600}.piano-key small{color:#747184;font:9px DM Mono}.piano-key.pressed small{color:#c8beff}.meter-panel{padding:22px 23px}.meter-head{justify-content:space-between}.meter-head svg{color:#7669ba}.meters{gap:12px;margin-top:31px;display:grid}.meter-label{color:#858293;align-items:center;gap:10px;font:10px DM Mono;display:flex}.meter-track{flex:1;gap:3px;display:flex}.meter-track i{background:#29283b;border-radius:1px;flex:1;height:17px}.meter-track i:nth-child(-n+14){background:#574f96}.meter-track i:nth-child(n+11):nth-child(-n+18){background:#8575d0}.meter-track i.hot{background:#d76c9e}.meter-foot{color:#5f5d6e;justify-content:space-between;margin:10px 0 0 20px;font:8px DM Mono}footer{color:#595768;justify-content:space-between;padding:27px 2px 0;font:9px DM Mono;display:flex}.footer-dot{width:5px;height:5px;margin-right:6px}.footer-sep{color:#393747;margin:0 4px}@keyframes pulse{50%{box-shadow:0 0 0 5px #54dcc000}}@keyframes stepFlash{50%{filter:brightness(1.5);transform:scale(1.1)}}@keyframes wave{to{transform:scaleY(.5)}}@media (width<=1050px){.app-shell{padding:0 24px 25px}.topbar{flex-wrap:wrap;height:auto;min-height:76px;padding:15px 0}.header-actions{margin-left:auto}.workspace-grid,.bottom-grid{grid-template-columns:1fr}.synth-panel{min-height:unset}}@media (width<=650px){.app-shell{padding:0 14px 20px}.transport{order:3;justify-content:space-between;width:100%;padding-top:8px}.transport-rule,.header-actions .icon-button{display:none}.status{font-size:8px}.hero{padding:39px 2px 30px;display:block}.hero-meta{margin-top:20px}.panel-head{padding:18px 16px}.sequencer-foot{flex-wrap:wrap;gap:9px;margin:18px 16px 14px}.swing{width:100%;margin:3px 0 0}.sliders{grid-template-columns:1fr;gap:15px;padding:0 16px}.control-section{padding:0 16px 16px}.synth-display{margin-left:16px;margin-right:16px}.keys{gap:3px;padding:2px 10px 0}.piano-key{height:70px}.piano-key small{font-size:8px}.meter-panel{padding:18px 16px}footer{flex-wrap:wrap;gap:12px;font-size:8px}.brand-name{font-size:17px}}button{position:relative;overflow:hidden}button:active{animation:.28s ease-out buttonPulse}button:focus-visible{outline-offset:3px;outline:2px solid #a795ff}.eyebrow{color:#f1edff;text-shadow:0 0 8px #9b84ff99;white-space:nowrap;height:16px;font-size:0;font-weight:900;line-height:16px;animation:2.4s ease-in-out infinite studioShimmer}.eyebrow:before{content:"Web Synth Sequencer";letter-spacing:1.1px;color:inherit;font:900 10px DM Mono,monospace;display:inline-block}.slider-control output,.volume-control strong,.swing strong,.meter-label>strong{font-weight:700}.swing input{accent-color:#9274ff;width:72px}.meter-track i{background:#29283b!important}.meter-track i.lit{background:#574f96!important}.meter-track i.lit:nth-child(n+11):nth-child(-n+18){background:#8575d0!important}.meter-track i.hot.lit{background:#d76c9e!important}@keyframes buttonPulse{0%{transform:scale(1)}45%{transform:scale(1.07);box-shadow:0 0 0 5px #9274ff2e,0 0 18px #9274ff66}to{transform:scale(1)}}@keyframes studioShimmer{0%,to{opacity:.78;filter:brightness(.95)}50%{opacity:1;filter:brightness(1.45);text-shadow:0 0 5px #fff,0 0 13px #a48cff,0 0 23px #7259e8}}