.soniq-beat{--pink:#d733f6;--blue:#00b5ff;--lime:#d9ff55;--purple:#7b61ff;--bg:#090d15;--panel:#101722;--line:#2b3443;--text:#f4f7fb;--muted:#c3cad5;box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:24px;border:1px solid #252d39;border-radius:18px;background:linear-gradient(180deg,#0d131d,#080c13);color:var(--text);font-family:inherit;overflow:hidden}.soniq-beat *{box-sizing:border-box}.sb-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.sb-header h2{margin:0;font-size:27px;line-height:1.2}.sb-header p{margin:7px 0 0;color:var(--muted);font-size:13px}.sb-brand-soniq{color:#fff}.sb-brand-beat{color:var(--blue)}.sb-main-play{display:block;width:100%;height:48px;margin:0 0 14px;border:1px solid var(--blue);border-radius:10px;background:#0b1822;color:#fff;font-size:21px;cursor:pointer;box-shadow:0 0 18px rgba(0,181,255,.18)}.sb-main-play.is-playing{background:var(--blue);color:#061018}.sb-controls{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:13px;background:#0d141e}.sb-control{display:flex;flex-direction:column;gap:6px;min-width:105px}.sb-control>span{font-size:12px;color:#e7ebf2}.sb-control select,.sb-stepper{height:38px;border:1px solid #394555;border-radius:8px;background:#151d29;color:#fff}.sb-control select{padding:0 10px}.sb-stepper{display:flex;align-items:center;overflow:hidden}.sb-stepper button{width:34px;height:100%;border:0;background:transparent;color:#fff;font-size:19px;cursor:pointer}.sb-stepper strong{min-width:42px;text-align:center;font-size:15px}.sb-wide{min-width:190px;flex:1}.sb-wide span{display:flex;justify-content:space-between}.sb-wide input{width:100%;accent-color:var(--blue)}.sb-presets{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:15px 0}.sb-presets>span{font-size:12px;color:#e7ebf2;margin-right:4px}.sb-presets button,.sb-bottom button,.sb-tempo-quick button{border:1px solid #3a4657;background:#121a25;color:#f4f7fb;border-radius:7px;padding:7px 11px;font-size:11px;cursor:pointer}.sb-presets button:hover,.sb-bottom button:hover,.sb-tempo-quick button:hover{border-color:var(--blue);color:#fff}.sb-grid-wrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border:1px solid #303b4c;border-radius:15px;background:linear-gradient(180deg,#0c131d,#080d14);padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 24px rgba(0,0,0,.18)}.sb-grid{--sb-label-width:96px;--sb-cell-width:34px;min-width:max-content}.sb-row{display:grid;grid-template-columns:var(--sb-label-width) 1fr;gap:8px;margin-bottom:7px;align-items:stretch}.sb-cells{display:grid;grid-template-columns:repeat(var(--sb-steps,16),var(--sb-cell-width));grid-template-rows:repeat(2,34px);gap:4px}.sb-label{grid-row:1 / span 2;display:flex;align-items:center;justify-content:flex-start;width:var(--sb-label-width);min-width:var(--sb-label-width);padding:0 9px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#dfe6ef;border-radius:7px;background:#101824;border:1px solid #202b39;white-space:nowrap;overflow:hidden}.sb-cell{width:var(--sb-cell-width);min-width:var(--sb-cell-width);height:34px;border:1px solid #293545;border-radius:6px;background:linear-gradient(180deg,#151e2a,#101721);cursor:pointer;transition:transform .08s,background .12s,border-color .12s,box-shadow .12s;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}.sb-cell:hover{transform:translateY(-1px);border-color:#526174;background:#1a2533}.sb-cell.beat{border-left:2px solid #647286;background:linear-gradient(180deg,#182230,#111923)}.sb-cell.active{background:var(--blue);border-color:#68d7ff;box-shadow:0 0 12px rgba(0,181,255,.24),inset 0 1px 0 rgba(255,255,255,.22)}.sb-cell.playing{outline:2px solid var(--lime);outline-offset:1px;box-shadow:0 0 14px rgba(217,255,85,.28)}.sb-row[data-drum="snare"] .sb-cell.active{background:var(--pink);border-color:#f078ff;box-shadow:0 0 12px rgba(215,51,246,.2)}.sb-row[data-drum="hat"] .sb-cell.active{background:var(--lime);border-color:#efffb0;box-shadow:0 0 10px rgba(217,255,85,.18)}.sb-row[data-drum="openhat"] .sb-cell.active{background:#8fcf36;border-color:#c8f76d}.sb-row[data-drum="kick"] .sb-cell.active{background:var(--purple);border-color:#aa99ff;box-shadow:0 0 12px rgba(123,97,255,.2)}.sb-row[data-drum="crash"] .sb-cell.active{background:#ff9f43;border-color:#ffd08a;box-shadow:0 0 13px rgba(255,159,67,.22)}.sb-row[data-drum="ride"] .sb-cell.active{background:#3cc7a4;border-color:#8bf0d5}.sb-bottom{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.sb-save{border-color:var(--blue)!important}.sb-practice{margin-top:18px;padding:14px;border:1px solid #283344;border-radius:12px;background:#0d141e;display:flex;justify-content:space-between;align-items:center;gap:15px}.sb-practice strong{display:block;font-size:12px;color:var(--lime);margin-bottom:4px}.sb-practice span{font-size:11px;color:#d7dde6}.sb-tempo-quick{display:flex;gap:5px;flex-wrap:wrap}.sb-tempo-quick button{padding:6px 9px}@media(max-width:650px){.soniq-beat{padding:16px;border-radius:13px}.sb-header h2{font-size:23px}.sb-header p{font-size:12px}.sb-main-play{width:100%;height:48px}.sb-row{gap:6px}.sb-cells{grid-template-columns:repeat(var(--sb-steps,16),var(--sb-cell-width));grid-template-rows:repeat(2,34px);gap:4px}.sb-cell{height:34px}.sb-label{font-size:9px;padding:0 5px}.sb-practice{align-items:flex-start;flex-direction:column}.sb-control{min-width:calc(50% - 8px)}.sb-wide{min-width:100%;}.sb-grid{min-width:max-content;--sb-label-width:72px;--sb-cell-width:28px}.sb-grid-wrap{padding:8px}.sb-cell:hover{transform:none}}