[data-beat-maker]{--beat-instrument-width: clamp(4.8rem, 6vw, 6.4rem);--beat-gap: clamp(.12rem, .22vw, .24rem);--beat-grid-dark: #101113;--beat-pad-dark: #292a2d;--beat-pad-accent: #454649;--beat-ruler-dark: #303136}[data-beat-maker] .beat-grid-scroll{background:var(--beat-grid-dark);border:1px solid oklch(100% 0 0 / .08);border-radius:.35rem;overflow-x:auto;padding:1rem;scrollbar-color:#56575b #191a1d}[data-beat-maker] .beat-grid-stack{display:grid;gap:var(--beat-gap);min-width:0;width:100%}[data-beat-maker] .beat-row,[data-beat-maker] .beat-ruler-row{display:grid;gap:var(--beat-gap);grid-template-columns:var(--beat-instrument-width) repeat(32,minmax(0,1fr));min-width:0;width:100%}[data-beat-maker] .beat-row{transition:filter .14s ease}[data-beat-maker] .beat-row-selected{filter:drop-shadow(0 0 .55rem color-mix(in oklch,var(--row-active) 34%,transparent))}[data-beat-maker] .beat-instrument-cell{height:100%;min-width:0}[data-beat-maker] .beat-instrument-trigger,[data-beat-maker] .beat-ruler-spacer{border:0;border-radius:.38rem;height:100%;min-height:0}[data-beat-maker] .beat-step,[data-beat-maker] .beat-ruler-step{aspect-ratio:1 / 1;border:0;border-radius:.38rem;height:auto;min-height:0;width:100%}[data-beat-maker] .beat-instrument-trigger{align-items:center;background:var(--beat-pad-dark);color:#f5f5f6;cursor:pointer;display:flex;justify-content:center;padding:0;position:relative;transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease;width:100%}[data-beat-maker] .beat-instrument-trigger svg{height:clamp(1rem,1.8vw,1.45rem);stroke-width:2.25;width:clamp(1rem,1.8vw,1.45rem)}[data-beat-maker] .beat-row-selected .beat-instrument-trigger,[data-beat-maker] .beat-instrument-trigger:hover{background:var(--row-active);box-shadow:0 0 0 1px color-mix(in oklch,var(--row-active) 58%,transparent);color:#fff}[data-beat-maker] .beat-instrument-trigger:focus-visible,[data-beat-maker] .beat-step:focus-visible{outline:2px solid var(--row-active);outline-offset:2px}[data-beat-maker] .beat-row-number{font-size:clamp(.68rem,1.1vw,.86rem);font-weight:700;left:.28rem;line-height:1;position:absolute;top:.2rem}[data-beat-maker] .beat-status-led{background:#ffffff57;border-radius:999px;bottom:.22rem;display:block;height:.24rem;position:absolute;right:.28rem;width:.24rem}[data-beat-maker] .beat-status-led[data-sample-status=loaded]{background:#ffffffc2}[data-beat-maker] .beat-status-led[data-sample-status=missing],[data-beat-maker] .beat-status-led[data-sample-status=none]{background:#ff0054;box-shadow:0 0 .4rem #ff0054}[data-beat-maker] .beat-step{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--beat-pad-dark);cursor:pointer;padding:0;position:relative;transition:background-color 90ms ease,box-shadow 90ms ease,transform 90ms ease}[data-beat-maker] .beat-step[data-beat-boundary=bar],[data-beat-maker] .beat-step[data-beat-boundary=beat]{background:var(--beat-pad-accent)}[data-beat-maker] .beat-step:hover{box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--row-active) 58%,transparent)}[data-beat-maker] .beat-step-active,[data-beat-maker] .beat-step-active[data-beat-boundary=bar],[data-beat-maker] .beat-step-active[data-beat-boundary=beat]{background:var(--row-active);box-shadow:none}[data-beat-maker] .beat-step-playing{box-shadow:inset 0 0 0 3px #fff,0 0 .75rem #ffffff7a;transform:translateY(-1px)}[data-beat-maker] .beat-ruler-row{margin-top:.44rem}[data-beat-maker] .beat-ruler-spacer,[data-beat-maker] .beat-ruler-step{align-items:center;background:var(--beat-ruler-dark);color:#747781;display:flex;font-size:clamp(.78rem,1.45vw,1.05rem);font-weight:800;justify-content:center;line-height:1}[data-beat-maker] .beat-ruler-step[data-beat-boundary=bar],[data-beat-maker] .beat-ruler-step[data-beat-boundary=beat]{color:#f6f7fb}[data-beat-maker] .beat-sound-panel{border:1px solid color-mix(in oklch,var(--row-active) 42%,oklch(var(--bc) / .12));border-left:4px solid var(--row-active);border-radius:.45rem;background:linear-gradient(135deg,color-mix(in oklch,var(--row-active) 13%,transparent),transparent 34%),oklch(var(--b2) / .34);box-shadow:inset 0 1px oklch(var(--bc) / .06);padding:.75rem}[data-beat-maker] .beat-panel-icon{align-items:center;background:color-mix(in oklch,var(--row-active) 18%,oklch(var(--b3)));border:1px solid color-mix(in oklch,var(--row-active) 58%,transparent);border-radius:.35rem;color:var(--row-active);display:inline-flex;height:2.25rem;justify-content:center;width:2.25rem}[data-beat-maker] .beat-instrument-list{display:grid;gap:.45rem;grid-template-columns:repeat(2,minmax(0,1fr))}[data-beat-maker] .beat-instrument-choice,[data-beat-maker] .beat-sample-card{background:oklch(var(--b1) / .72);border:1px solid oklch(var(--bc) / .14);border-radius:.4rem;color:oklch(var(--bc) / .76);cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,color .12s ease,transform .12s ease}[data-beat-maker] .beat-instrument-choice{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;font-size:.8rem;font-weight:900;gap:.45rem;justify-content:flex-start;line-height:1;min-height:2.5rem;padding:.55rem .65rem;text-align:left}[data-beat-maker] .beat-instrument-choice svg{flex:0 0 auto;height:1rem;width:1rem}[data-beat-maker] .beat-instrument-choice:hover,[data-beat-maker] .beat-instrument-choice-active,[data-beat-maker] .beat-sample-card:hover,[data-beat-maker] .beat-sample-card-active{border-color:var(--row-active);box-shadow:0 0 0 1px color-mix(in oklch,var(--row-active) 42%,transparent),0 0 .55rem color-mix(in oklch,var(--row-active) 22%,transparent);color:oklch(var(--bc))}[data-beat-maker] .beat-instrument-choice-active,[data-beat-maker] .beat-sample-card-active{background:color-mix(in oklch,var(--row-active) 18%,oklch(var(--b1)))}[data-beat-maker] .beat-instrument-choice:focus-visible,[data-beat-maker] .beat-sample-card-button:focus-visible,[data-beat-maker] .beat-sample-pack-link:focus-visible{outline:2px solid var(--row-active);outline-offset:2px}[data-beat-maker] .beat-sample-list{display:grid;gap:.5rem;grid-template-columns:repeat(1,minmax(0,1fr))}[data-beat-maker] .beat-sample-card{align-items:center;cursor:pointer;display:flex;gap:.7rem;min-height:4.6rem;min-width:0;padding:.7rem;text-align:left}[data-beat-maker] .beat-sample-pack-cover{aspect-ratio:1 / 1;border:1px solid oklch(var(--bc) / .14);border-radius:.35rem;flex:0 0 3.2rem;height:3.2rem;-o-object-fit:cover;object-fit:cover;width:3.2rem}[data-beat-maker] .beat-sample-card-copy{display:flex;flex:1 1 auto;flex-direction:column;gap:.22rem;min-width:0}[data-beat-maker] .beat-sample-card-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:flex;min-width:0;padding:0;text-align:left;width:100%}[data-beat-maker] .beat-sample-pack-link{color:color-mix(in oklch,var(--row-active) 74%,oklch(var(--bc)));display:block;font-size:.75rem;font-weight:800;line-height:1.15;min-width:0;overflow:hidden;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-overflow:ellipsis;white-space:nowrap}[data-beat-maker] .beat-sample-pack-link:hover{color:var(--row-active)}[data-beat-maker] .beat-sample-card-active{color:oklch(var(--bc))}[data-beat-maker] [data-export-dialog-box][data-tone=success] [data-export-dialog-title]{color:oklch(var(--su))}[data-beat-maker] [data-export-dialog-box][data-tone=warning] [data-export-dialog-title]{color:oklch(var(--wa))}[data-beat-maker] [data-export-dialog-box][data-tone=error] [data-export-dialog-title]{color:oklch(var(--er))}[data-beat-maker] [data-export-dialog-box][data-tone=info] [data-export-dialog-title]{color:oklch(var(--in))}@media (max-width: 767px){[data-beat-maker]{--beat-instrument-width: 4.8rem;--beat-gap: .28rem}[data-beat-maker] .beat-row,[data-beat-maker] .beat-ruler-row{grid-template-columns:var(--beat-instrument-width) repeat(8,minmax(0,1fr))}[data-beat-maker] .beat-grid-scroll{padding:.7rem}[data-beat-maker] .beat-instrument-trigger svg{height:1.4rem;width:1.4rem}[data-beat-maker] .beat-row-number{font-size:.95rem;left:.48rem;top:.38rem}[data-beat-maker] .beat-ruler-spacer,[data-beat-maker] .beat-ruler-step{font-size:1.05rem}[data-beat-maker][data-active-group="0"] [data-step-group]:not([data-step-group="0"]),[data-beat-maker][data-active-group="1"] [data-step-group]:not([data-step-group="1"]),[data-beat-maker][data-active-group="2"] [data-step-group]:not([data-step-group="2"]),[data-beat-maker][data-active-group="3"] [data-step-group]:not([data-step-group="3"]){display:none}}@media (min-width: 640px){[data-beat-maker] .beat-instrument-list{grid-template-columns:repeat(4,minmax(0,1fr))}[data-beat-maker] .beat-sample-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){[data-beat-maker] .beat-instrument-list{grid-template-columns:repeat(7,minmax(0,1fr))}[data-beat-maker] .beat-sample-list{grid-template-columns:repeat(4,minmax(0,1fr))}}