.beat-mixer-shell{width:min(100%,1480px);min-width:0;min-height:100dvh;padding:var(--sp-4);flex-direction:column;margin:0 auto;display:flex}.beat-mixer-topbar{flex:none}.beat-mixer-grid{align-items:stretch;gap:var(--sp-4);grid-template-columns:minmax(0,1fr) minmax(360px,1.1fr) minmax(0,1fr);min-width:0;display:grid}.beat-deck,.beat-master-panel{gap:var(--sp-4);min-width:0;padding:var(--sp-4);border:var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);flex-direction:column;display:flex}.beat-deck>*,.beat-master-panel>*{flex-shrink:0}.beat-deck-a{--beat-deck:var(--blue);--beat-deck-soft:var(--blue-soft)}.beat-deck-b{--beat-deck:var(--pink);--beat-deck-soft:var(--pink-soft)}.beat-master-panel{container:beat-master/inline-size}.beat-deck-heading,.beat-master-heading{align-items:center;gap:var(--sp-3);min-width:0;padding-bottom:var(--sp-3);border-bottom:var(--rule-soft);display:flex}.beat-card-chip{border:var(--rule);border-radius:var(--r-md);background:var(--beat-deck,var(--white));width:32px;height:32px;color:var(--ink);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--fw-bold);flex:none;place-items:center;line-height:1;display:inline-grid}.beat-deck-heading>span:not(.beat-card-chip),.beat-master-heading>span:not(.beat-card-chip){min-width:0;color:var(--ink);font-family:var(--font-sans);font-size:var(--text-xl);font-weight:var(--fw-bold);letter-spacing:var(--tracking-tight);text-overflow:ellipsis;white-space:nowrap;flex:auto;line-height:1.1;overflow:hidden}.beat-deck-heading>strong,.beat-master-heading>strong{border:var(--rule);border-radius:var(--r-pill);background:var(--white);min-height:26px;color:var(--ink);font-size:var(--text-xs);font-weight:var(--fw-bold);white-space:nowrap;flex:none;align-items:center;gap:6px;padding:0 10px;line-height:1;display:inline-flex}.beat-deck-heading>strong:before,.beat-master-heading>strong:before{border:var(--rule);border-radius:var(--r-pill);content:"";background:0 0;flex:none;width:8px;height:8px}.beat-deck.is-loaded .beat-deck-heading>strong,.beat-master-heading.is-ready>strong{background:var(--live)}.beat-deck.is-loaded .beat-deck-heading>strong:before,.beat-master-heading.is-ready>strong:before{background:var(--ink)}.beat-deck-upload{align-content:center;justify-items:center;gap:var(--sp-1);width:100%;min-width:0;min-height:136px;padding:var(--sp-4) var(--sp-3);border:var(--bw) dashed var(--ink);border-radius:var(--r-lg);background:var(--white);color:var(--ink);text-align:center;transition:background-color var(--dur-1) linear;display:grid}.beat-deck-upload:hover:not(:disabled){background:var(--beat-deck-soft)}.beat-deck-upload-icon{width:44px;height:44px;margin-bottom:var(--sp-2);border:var(--rule);border-radius:var(--r-md);background:var(--white);box-shadow:var(--shadow-xs);color:var(--ink);transition:background-color var(--dur-1) linear;place-items:center;display:grid}.beat-deck-upload:hover:not(:disabled) .beat-deck-upload-icon{background:var(--beat-deck)}.beat-deck-upload strong{width:100%;min-width:0;font-size:var(--text-md);font-weight:var(--fw-bold);overflow-wrap:anywhere;line-height:1.25}.beat-deck-upload small{color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--fw-medium);line-height:1.3}.beat-deck.is-loaded .beat-deck-upload{align-content:center;place-items:center start;gap:2px var(--sp-3);min-height:0;padding:var(--sp-3);text-align:left;border-style:solid;grid-template-columns:44px minmax(0,1fr)}.beat-deck.is-loaded .beat-deck-upload-icon{background:var(--beat-deck);grid-row:1/span 2;margin:0}.beat-deck.is-loaded .beat-deck-upload strong{font-size:var(--text-lg);letter-spacing:var(--tracking-tight);text-overflow:ellipsis;white-space:nowrap;align-self:end;overflow:hidden}.beat-deck.is-loaded .beat-deck-upload small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;align-self:start}.beat-deck-upload:disabled{border-color:var(--grey-ink);background:var(--surface-muted);color:var(--grey-ink);cursor:progress}.beat-deck-upload:disabled .beat-deck-upload-icon{border-color:var(--grey-ink);background:var(--grey);box-shadow:none;color:var(--grey-ink)}.beat-deck-upload:disabled small{color:var(--grey-ink)}.beat-deck-platter{min-height:240px;padding:var(--sp-5);border-radius:var(--r-md);background:var(--surface-muted);flex:1 1 0;place-items:center;display:grid;container-type:size}.beat-deck-platter>span{aspect-ratio:1;border:var(--rule);background:var(--white);width:min(100cqw,100cqh,260px);box-shadow:var(--shadow);border-radius:50%;place-items:center;display:grid;position:relative}.beat-deck-platter>span:before,.beat-deck-platter>span:after{border:1px solid var(--line-soft);content:"";border-radius:50%;position:absolute}.beat-deck-platter>span:before{inset:9%}.beat-deck-platter>span:after{inset:21%}.beat-deck-platter i{z-index:1;aspect-ratio:1;border:var(--rule);background:var(--beat-deck-soft);width:34%;transition:background-color var(--dur-2) linear;border-radius:50%;position:relative}.beat-deck.is-loaded .beat-deck-platter i{background:var(--beat-deck)}.beat-deck-platter i:before,.beat-deck-platter i:after{background:var(--ink);content:"";position:absolute;left:50%}.beat-deck-platter i:before{width:var(--bw);height:22%;margin-left:calc(var(--bw) / -2);border-radius:1px;top:12%}.beat-deck-platter i:after{border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;top:50%}.beat-deck.is-spinning .beat-deck-platter i{animation:3.6s linear infinite beat-platter-spin}@keyframes beat-platter-spin{to{transform:rotate(360deg)}}.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader{gap:var(--sp-2);min-width:0;display:grid}.beat-deck-volume>span,.beat-master-volume>span{min-width:0;color:var(--ink);font-size:var(--text-sm);font-weight:var(--fw-bold);align-items:center;gap:6px;line-height:1.2;display:flex}.beat-master-volume>span>svg{color:var(--text-muted)}.beat-deck-volume>span>strong,.beat-master-volume>span>strong,.beat-crossfader>span>small{min-height:22px;padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--surface-muted);color:var(--ink);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);letter-spacing:-.01em;white-space:nowrap;flex:none;align-items:center;margin-left:auto;line-height:1;display:inline-flex}.beat-deck-volume:has(input:disabled)>span{color:var(--text-faint)}.beat-master-volume:has(input:disabled)>span{color:var(--text-faint)}.beat-master-volume:has(input:disabled)>span>svg{color:var(--text-faint)}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]{--beat-fill:var(--ink);--beat-thumb-w:var(--range-thumb);--beat-at:calc(var(--beat-thumb-w) / 2 + (100% - var(--beat-thumb-w)) * var(--beat-value,0));--beat-fill-layer:linear-gradient(90deg, var(--beat-fill) 0 var(--beat-at), transparent var(--beat-at));display:block}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]::-webkit-slider-runnable-track{background:var(--beat-fill-layer), var(--range-empty)}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]::-moz-range-track{background:var(--beat-fill-layer), var(--range-empty)}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]::-moz-range-progress{background:0 0}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]:disabled{--beat-fill:var(--grey)}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]:disabled::-webkit-slider-runnable-track{border-color:var(--grey-ink)}:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control,.beat-crossfader) input[type=range]:disabled::-moz-range-track{border-color:var(--grey-ink)}.beat-deck-volume input[type=range]:not(:disabled){--beat-fill:var(--beat-deck)}.beat-monitor{gap:var(--sp-3);grid-template-columns:minmax(0,1.45fr) minmax(min(184px,52%),1fr);min-width:0;display:grid}.beat-monitor>*{min-width:0}.beat-monitor .monitor-spectrum canvas{height:56px}@container beat-master (max-width:300px){.beat-monitor{grid-template-columns:minmax(0,1fr)}}.beat-timeline-control>span{justify-content:space-between;align-items:baseline;gap:var(--sp-3);min-width:0;display:flex}.beat-timeline-control strong,.beat-timeline-control small{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1}.beat-timeline-control strong{color:var(--ink);font-size:var(--text-xl)}.beat-timeline-control small{color:var(--text-muted);font-size:var(--text-xs)}.beat-timeline-control:has(input:disabled) strong{color:var(--text-faint)}.beat-transport{gap:var(--sp-3);grid-template-columns:minmax(0,1fr) auto;display:grid}.beat-transport button{min-height:var(--ctl-lg)}.beat-transport .transport-button{font-size:var(--text-md)}.beat-transport .transport-button:not(:disabled){background:var(--primary)}.beat-crossfader{--beat-cap-w:18px;--beat-cap-h:30px;--beat-row:36px;grid-template-columns:36px minmax(0,1fr) 36px;grid-template-rows:auto var(--beat-row) auto;gap:var(--sp-1) var(--sp-2);padding:var(--sp-3);border:var(--rule);border-radius:var(--r-md);background:var(--surface-muted)}.beat-crossfader>span{justify-content:space-between;align-items:center;gap:var(--sp-3);min-width:0;margin-bottom:var(--sp-1);grid-area:1/1/auto/-1;display:flex}.beat-crossfader>span>strong{color:var(--ink);font-size:var(--text-sm);font-weight:var(--fw-bold);line-height:1.2}.beat-crossfader>span>small{background:var(--white)}.beat-crossfader-labels{grid-area:2/1/span 2/-1;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none;align-items:center;display:grid}.beat-crossfader-labels b{border:var(--rule);border-radius:var(--r-pill);width:36px;height:28px;color:var(--ink);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-bold);grid-row:1;place-items:center;line-height:1;display:inline-grid}.beat-crossfader-labels b:first-child{background:var(--blue);grid-column:1}.beat-crossfader-labels b:last-child{background:var(--pink);grid-column:3}.beat-crossfader-labels i{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-2xs);font-style:normal;font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);grid-area:2/2;justify-self:center;line-height:1}.beat-crossfader:has(input:disabled) .beat-crossfader-labels b{border-color:var(--grey-ink);background:var(--grey);color:var(--grey-ink)}.beat-crossfader input[type=range]{--beat-thumb-w:var(--beat-cap-w);--beat-lo:calc(var(--beat-thumb-w) / 2 + (100% - var(--beat-thumb-w)) * min(var(--beat-value,.5), .5));--beat-hi:calc(var(--beat-thumb-w) / 2 + (100% - var(--beat-thumb-w)) * max(var(--beat-value,.5), .5));--beat-fill-layer:linear-gradient(90deg, transparent 0 var(--beat-lo), var(--beat-fill) var(--beat-lo) var(--beat-hi), transparent var(--beat-hi));--beat-detent:linear-gradient(90deg, transparent calc(50% - 1px), var(--beat-detent-ink,var(--ink)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));height:var(--beat-row);background:var(--beat-detent) center / 100% calc(var(--range-track) + 10px) no-repeat;grid-area:2/2;align-self:center}.beat-crossfader.leans-a input[type=range]:not(:disabled){--beat-fill:var(--blue)}.beat-crossfader.leans-b input[type=range]:not(:disabled){--beat-fill:var(--pink)}.beat-crossfader input[type=range]:disabled{--beat-detent-ink:var(--grey-ink)}.beat-crossfader input[type=range]::-webkit-slider-runnable-track{background:var(--beat-detent), var(--beat-fill-layer), var(--range-empty)}.beat-crossfader input[type=range]::-moz-range-track{background:var(--beat-detent), var(--beat-fill-layer), var(--range-empty)}.beat-crossfader input[type=range]::-webkit-slider-thumb{width:var(--beat-cap-w);height:var(--beat-cap-h);margin-top:calc((var(--range-track) - var(--beat-cap-h)) / 2 - var(--bw));border-radius:var(--r-sm);background-color:var(--white);background-image:var(--beat-cap-line)}.beat-crossfader input[type=range]::-moz-range-thumb{width:calc(var(--beat-cap-w) - 4px);height:calc(var(--beat-cap-h) - 4px);border-radius:var(--r-sm);background-color:var(--white);background-image:var(--beat-cap-line)}.beat-crossfader input[type=range]{--beat-cap-line:linear-gradient(90deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px))}.beat-crossfader input[type=range]:hover:not(:disabled)::-webkit-slider-thumb{background-color:var(--yellow);background-image:var(--beat-cap-line)}.beat-crossfader input[type=range]:active:not(:disabled)::-webkit-slider-thumb{background-color:var(--yellow);background-image:var(--beat-cap-line)}.beat-crossfader input[type=range]:hover:not(:disabled)::-moz-range-thumb{background-color:var(--yellow)}.beat-crossfader input[type=range]:disabled::-webkit-slider-thumb{background-color:var(--grey);background-image:none}.beat-crossfader input[type=range]:disabled::-moz-range-thumb{background-color:var(--grey);background-image:none}.beat-export-button{width:100%;min-height:var(--ctl-lg);font-size:var(--text-md);margin-top:auto}.beat-mixer-status{min-height:2.9em;margin-top:calc(var(--sp-1) * -1);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-semibold);overflow-wrap:anywhere;text-align:center;line-height:1.45}@media (max-width:1100px){.beat-mixer-grid{gap:var(--sp-3);grid-template-columns:minmax(0,1fr) minmax(320px,1.2fr) minmax(0,1fr)}.beat-deck-platter{padding:var(--sp-4)}}@media (min-width:901px) and (min-height:820px){.beat-mixer-grid{flex:1 0 auto;max-height:900px}.beat-monitor{flex:1 1 0;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-height:196px}.beat-monitor .monitor-spectrum{grid-template-rows:auto minmax(0,1fr);align-content:stretch;min-height:0}.beat-monitor .monitor-spectrum canvas{height:100%;min-height:56px}}@media (min-width:901px) and (max-height:819px){.beat-deck,.beat-master-panel{gap:var(--sp-3)}.beat-deck-upload{min-height:120px}.beat-deck-platter{min-height:200px}}@media (max-width:900px){.beat-mixer-shell{width:min(100%,720px);padding:var(--sp-3)}.beat-mixer-grid{gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}.beat-deck{align-items:start;gap:var(--sp-4);grid-template:"head head""upload platter"1fr"volume platter"/minmax(0,1fr) 200px;display:grid}.beat-deck-heading{grid-area:head}.beat-deck-upload{grid-area:upload}.beat-deck-platter{min-height:0;padding:var(--sp-4);grid-area:platter;align-self:stretch}.beat-deck-volume{grid-area:volume}}@media (max-width:820px),(hover:none) and (pointer:coarse){:is(.beat-deck-volume,.beat-master-volume,.beat-timeline-control) input[type=range]{--range-thumb:24px;--range-track:12px;height:44px}.beat-crossfader{--beat-cap-w:22px;--beat-cap-h:34px;--beat-row:44px}.beat-crossfader input[type=range]{--range-track:12px}.beat-transport button,.beat-export-button{min-height:var(--ctl-lg)}}@media (max-width:560px){.beat-deck{align-items:center;gap:var(--sp-3) var(--sp-4);padding:var(--sp-3);grid-template:"head head""upload upload""platter volume"/88px minmax(0,1fr)}.beat-master-panel{padding:var(--sp-3)}.beat-deck-platter{background:0 0;min-height:88px;padding:0}.beat-monitor{grid-template-columns:minmax(0,1fr)}.beat-deck-platter>span{box-shadow:var(--shadow-sm)}.beat-deck-platter>span:after{display:none}.beat-deck-upload{min-height:120px}.beat-transport{gap:var(--sp-2)}}@media (prefers-reduced-motion:reduce){.beat-deck.is-spinning .beat-deck-platter i{animation:none}}.beat-deck input[type=file]:focus-visible+.beat-deck-upload{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.not-found-shell{width:min(560px, calc(100% - 2 * var(--sp-4)));min-height:100dvh;padding:var(--sp-10) 0;text-align:center;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;display:flex}.not-found-mark{width:56px;height:56px;margin-bottom:var(--sp-5);border:var(--rule);border-radius:var(--r-lg);background:var(--accent);box-shadow:var(--shadow-sm);color:var(--ink);flex:none;place-items:center;display:grid}.not-found-shell .not-found-code{color:var(--ink);font-family:var(--font-display);font-size:var(--text-hero);font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);letter-spacing:-.04em;line-height:.9}.not-found-shell h1{margin-top:var(--sp-4);font-size:var(--text-3xl);text-wrap:balance}.not-found-shell>span{max-width:40ch;margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--text-lg);text-wrap:pretty;font-weight:450;line-height:1.6}.not-found-action{margin-top:var(--sp-8)}@media (max-width:560px){.not-found-shell h1{font-size:var(--text-2xl)}.not-found-shell>span{font-size:1rem}.not-found-action{width:100%}}