.playalong-page{--playalong-page-accent: var(--bs-primary);--bs-secondary-color: color-mix(in srgb, var(--bs-body-color) 78%, transparent)}.playalong-page [id]{scroll-margin-top:5rem}.playalong-page .jm-breadcrumb{margin-bottom:1rem}.playalong-hero{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:1.75rem 3rem;padding:clamp(1.25rem,3vw,2.5rem);border:1px solid var(--jm-border-soft);border-radius:var(--bs-border-radius-xl);background:var(--jm-panel-gradient);box-shadow:var(--jm-shadow-soft)}.playalong-hero h1{max-width:26ch;margin:1rem 0 .75rem;font-size:clamp(1.65rem,3vw,2.65rem);line-height:1.15;letter-spacing:-0.035em;overflow-wrap:anywhere}.playalong-hero__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;color:var(--bs-secondary-color);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.playalong-chip{padding:.3rem .6rem;border:1px solid var(--jm-border-soft);border-radius:999px;font-size:.65rem;letter-spacing:.03em}.playalong-hero__intro{max-width:62ch;margin-bottom:0;color:var(--bs-secondary-color);font-size:1rem;line-height:1.65}.playalong-hero__actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1rem}.playalong-hero__actions>.btn-primary{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem}.playalong-hero__actions .social-share{border:0;padding:0;margin:0}.playalong-hero__actions .social-share__trigger{color:var(--bs-body-color);border-color:var(--jm-border-soft);background:rgba(0,0,0,0);box-shadow:none}.playalong-hero__back{color:var(--bs-secondary-color);font-size:.85rem;text-underline-offset:.2em}.playalong-tags{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem}.playalong-tags a{color:var(--bs-secondary-color);font-size:.75rem;text-decoration:none}.playalong-tags a::before{content:"#";opacity:.6}.playalong-tags a:hover{color:var(--bs-primary);text-decoration:underline}.playalong-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 3rem;margin:0;padding-top:1.2rem;border-top:1px solid var(--jm-border-soft)}.playalong-facts dt{margin-bottom:.3rem;color:var(--bs-secondary-color);font-size:.7rem;font-weight:500}.playalong-facts dd{margin:0;font-size:1.2rem;font-weight:650;font-variant-numeric:tabular-nums}.playalong-facts dd span{font-size:.7rem;font-weight:500;color:var(--bs-secondary-color)}.playalong-section-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;padding:1rem 0;margin-bottom:1rem;border-bottom:1px solid var(--jm-border-soft)}.playalong-section-nav a{padding:.4rem 0;color:var(--bs-secondary-color);font-size:.8rem;font-weight:600;text-decoration:none}.playalong-section-nav a:first-child,.playalong-section-nav a:hover{color:var(--bs-primary)}.playalong-section-nav a:focus-visible{outline:2px solid var(--bs-primary);outline-offset:4px;border-radius:2px}.playalong-section{margin-bottom:2rem}.playalong-player{min-width:0}.playalong-section__title{margin:0 0 1.2rem;font-size:1.15rem;font-weight:650;letter-spacing:-0.02em}.playalong-panel{min-width:0;padding:clamp(1.1rem,2.5vw,1.75rem);border:1px solid var(--jm-border-soft);border-radius:var(--bs-border-radius-xl);background:var(--bs-body-bg)}.playalong-context-grid{display:grid;grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);align-items:start;gap:1.25rem;margin-bottom:2rem}.playalong-context-grid--single{grid-template-columns:minmax(0, 1fr)}.playalong-notes .ql-editor{padding:0;min-height:0;line-height:1.8;overflow-wrap:anywhere}.playalong-notes .ql-editor>:last-child{margin-bottom:0}.playalong-notes details{border-top:1px solid var(--jm-border-soft);padding-top:1rem}.playalong-resources{display:grid;gap:.65rem;margin:0;padding:0;list-style:none}.playalong-resources a{display:flex;align-items:center;gap:.85rem;padding:.85rem;border:1px solid var(--jm-border-soft);border-radius:var(--bs-border-radius-lg);color:var(--bs-body-color);text-decoration:none}.playalong-resources a:hover{border-color:var(--bs-primary);background:var(--bs-tertiary-bg)}.playalong-resources a:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}.playalong-resources__icon{flex:0 0 auto;color:var(--bs-primary)}.playalong-resources__label{flex:1;min-width:0;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}.playalong-resources__label small{display:block;margin-top:.2rem;color:var(--bs-secondary-color);font-size:.65rem;letter-spacing:.05em;font-weight:500}.playalong-source-details,.playalong-guide-disclosure{padding:1rem 0;border-top:1px solid var(--jm-border-soft);color:var(--bs-secondary-color);font-size:.85rem}.playalong-source-details summary,.playalong-guide-disclosure summary{width:fit-content;cursor:pointer;font-weight:600}.playalong-source-details summary:focus-visible,.playalong-guide-disclosure summary:focus-visible{outline:2px solid var(--bs-primary);outline-offset:4px}.playalong-source-details .experience-shell,.playalong-guide-disclosure .experience-shell{color:var(--bs-body-color)}.playalong-discovery{background:var(--jm-panel-gradient)}.playalong-discovery .list-group-item{background:rgba(0,0,0,0)}.playalong-guide-steps{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:1.5rem;padding-top:1.5rem}.playalong-guide-steps h2{margin:.6rem 0;color:var(--bs-body-color)}.playalong-guide-steps p{margin-bottom:0;line-height:1.7}.playalong-guide-steps__number{color:var(--bs-primary);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}@media(max-width: 767.98px){.playalong-hero{grid-template-columns:minmax(0, 1fr);gap:1.25rem}.playalong-hero h1{max-width:none}.playalong-hero__actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.75rem 1rem}.playalong-context-grid{grid-template-columns:minmax(0, 1fr)}.playalong-guide-steps{grid-template-columns:minmax(0, 1fr)}.playalong-facts{gap:1rem 2rem}.playalong-facts>div{display:flex;align-items:baseline;gap:.6rem}.playalong-section-nav{gap:.25rem 1.15rem}}.playalong-studio{--playalong-surface: color-mix(in srgb, var(--bs-body-bg) 82%, #101820 18%);--playalong-panel: color-mix(in srgb, var(--bs-body-bg) 88%, #1f2933 12%);--playalong-panel-strong: color-mix(in srgb, var(--bs-body-bg) 78%, #111827 22%);--playalong-border: color-mix(in srgb, var(--bs-border-color) 72%, #0f172a 28%);--playalong-accent: #19a7a8;--playalong-warm: #d69b37;--playalong-muted: var(--bs-secondary-color);position:relative;display:grid;gap:1rem;padding:clamp(1rem,2vw,1.35rem);border:1px solid var(--playalong-border);border-radius:8px;color:var(--bs-emphasis-color);background:linear-gradient(180deg, color-mix(in srgb, var(--playalong-surface) 96%, #ffffff 4%), var(--playalong-surface)),var(--bs-body-bg);box-shadow:0 1rem 2.5rem rgba(15,23,42,.12)}.playalong-studio__header,.playalong-studio__control-deck,.playalong-track-strip{border:1px solid var(--playalong-border);border-radius:8px;background:var(--playalong-panel)}.playalong-studio__header{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:1rem;padding:1rem}.playalong-studio__title-block{min-width:0}.playalong-studio__title{margin:0;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.15}.playalong-studio__subtitle{margin-top:.2rem;overflow:hidden;color:var(--playalong-muted);font-size:.88rem;text-overflow:ellipsis;white-space:nowrap}.playalong-studio__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.playalong-studio__play,.playalong-studio__stop{min-width:5.2rem;font-weight:700}.playalong-studio__badge{display:inline-flex;align-items:center;min-height:2.25rem;padding-inline:.65rem;border:1px solid color-mix(in srgb, var(--playalong-accent) 36%, var(--playalong-border));border-radius:999px;color:color-mix(in srgb, var(--playalong-accent) 72%, var(--bs-emphasis-color));font-size:.78rem;font-weight:700;background:color-mix(in srgb, var(--playalong-accent) 12%, transparent)}.playalong-timeline{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:.75rem;padding:.65rem .85rem;border:1px solid var(--playalong-border);border-radius:8px;background:var(--playalong-panel-strong)}.playalong-timeline__time{min-width:3.2rem;font-family:var(--bs-font-monospace);font-size:.78rem;color:var(--playalong-muted);white-space:nowrap}.playalong-timeline__seek{min-width:0}.playalong-studio__control-deck{display:grid;grid-template-columns:minmax(0, 1fr) minmax(10rem, 0.28fr) minmax(10rem, 0.28fr);gap:.85rem;padding:.85rem}.playalong-loop-panel,.playalong-key-panel,.playalong-tempo-panel{min-width:0;padding:.85rem;border:1px solid color-mix(in srgb, var(--playalong-border) 82%, transparent);border-radius:8px;background:color-mix(in srgb, var(--bs-body-bg) 84%, var(--playalong-panel-strong) 16%)}.playalong-loop-panel{display:grid;gap:.85rem}.playalong-loop-panel__header,.playalong-loop-panel__actions,.playalong-loop-panel__fields{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}.playalong-loop-panel__header{justify-content:space-between}.playalong-loop-panel__toggle{margin:0;font-weight:700}.playalong-loop-panel__status{overflow:hidden;color:var(--playalong-muted);font-family:var(--bs-font-monospace);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.playalong-number-field{display:grid;gap:.25rem;min-width:7.5rem;margin:0;color:var(--playalong-muted);font-size:.74rem;font-weight:700}.playalong-number-field .form-control{font-family:var(--bs-font-monospace)}.playalong-tempo-panel{display:flex;align-items:center;justify-content:center}.playalong-key-panel{display:grid;align-content:center;gap:.7rem}.playalong-key-panel__field{display:grid;gap:.35rem;margin:0;color:var(--playalong-muted);font-size:.72rem;font-weight:800;text-transform:uppercase}.playalong-key-panel__status{min-height:1.25rem;overflow:hidden;color:color-mix(in srgb, var(--bs-emphasis-color) 78%, var(--playalong-warm));font-family:var(--bs-font-monospace);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.playalong-process-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-top:-0.15rem;margin-bottom:.8rem}.playalong-process-status{flex:1 1 16rem;min-height:1.4rem;color:color-mix(in srgb, var(--bs-emphasis-color) 76%, var(--playalong-accent));font-family:var(--bs-font-monospace);font-size:.76rem;font-weight:700}.playalong-process-button{flex:0 0 auto;min-width:8.5rem}.playalong-process-progress{display:grid;gap:.4rem;margin-top:-0.35rem;padding:.15rem .05rem .75rem}.playalong-process-progress[hidden]{display:none}.playalong-process-progress__label{color:var(--playalong-muted);font-family:var(--bs-font-monospace);font-size:.72rem;font-weight:700}.playalong-process-progress__bar{display:block;overflow:hidden;height:.42rem;border-radius:999px;background:color-mix(in srgb, var(--playalong-border) 55%, transparent)}.playalong-process-progress__bar>span{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg, var(--playalong-accent), var(--playalong-warm));transition:width .22s ease}.playalong-studio--processing .playalong-mixer-grid,.playalong-studio--processing .playalong-studio__control-deck,.playalong-studio--processing .playalong-timeline{pointer-events:none}.playalong-knob-control{--sandbox-knob-size: 3rem;--sandbox-knob-bg: color-mix(in srgb, var(--bs-body-bg) 76%, #1f2937 24%);--sandbox-knob-border: color-mix(in srgb, var(--playalong-border) 70%, var(--playalong-accent) 30%);--sandbox-knob-fg: var(--bs-emphasis-color);--sandbox-knob-accent: var(--playalong-accent);display:grid;grid-template-rows:auto auto minmax(0, 1fr);justify-items:center;gap:.35rem;min-width:5.4rem;margin:0;text-align:center}.playalong-knob-control--tempo{--sandbox-knob-size: 3.5rem;--sandbox-knob-accent: var(--playalong-warm);min-width:7.5rem}.playalong-knob-control__label{overflow:hidden;max-width:100%;color:var(--playalong-muted);font-size:.72rem;font-weight:800;line-height:1.1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.playalong-knob-control__readout{min-height:1.05rem;font-family:var(--bs-font-monospace);font-size:.72rem;color:color-mix(in srgb, var(--bs-emphasis-color) 78%, var(--playalong-accent));white-space:nowrap}.playalong-knob-control .sandbox-ui-range-knob{grid-template-columns:minmax(0, 1fr);justify-items:center;gap:.45rem}.playalong-knob-control .sandbox-ui-range-knob__value{font-size:.68rem}.playalong-mixer-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));gap:.85rem}.playalong-track-strip{display:grid;grid-template-rows:auto minmax(6.9rem, 1fr) auto;gap:.8rem;min-width:0;padding:.9rem;background:linear-gradient(180deg, color-mix(in srgb, var(--playalong-panel) 96%, #ffffff 4%), var(--playalong-panel)),var(--playalong-panel);transition:border-color .16s ease,opacity .16s ease,transform .16s ease}.playalong-track-strip:hover{border-color:color-mix(in srgb, var(--playalong-accent) 42%, var(--playalong-border));transform:translateY(-1px)}.playalong-track-strip__identity{min-width:0;padding-bottom:.65rem;border-bottom:1px solid color-mix(in srgb, var(--playalong-border) 78%, transparent)}.playalong-track-strip__name{overflow:hidden;font-weight:800;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.playalong-track-strip__meta{overflow:hidden;margin-top:.15rem;color:var(--playalong-muted);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}.playalong-track-strip__controls{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));align-items:start;justify-items:center;gap:.65rem}.playalong-track-strip__switches{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:.45rem}.playalong-switch{margin:0}.playalong-switch span{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:2rem;padding-inline:.5rem;border:1px solid var(--playalong-border);border-radius:6px;color:var(--playalong-muted);font-size:.75rem;font-weight:800;text-transform:uppercase;cursor:pointer;background:color-mix(in srgb, var(--bs-body-bg) 84%, var(--playalong-panel-strong) 16%)}.playalong-switch .btn-check:checked+span{border-color:color-mix(in srgb, var(--playalong-warm) 56%, var(--playalong-border));color:color-mix(in srgb, var(--playalong-warm) 70%, var(--bs-emphasis-color));background:color-mix(in srgb, var(--playalong-warm) 14%, transparent)}.playalong-switch--key .btn-check:checked+span{border-color:color-mix(in srgb, var(--playalong-accent) 52%, var(--playalong-border));color:color-mix(in srgb, var(--playalong-accent) 74%, var(--bs-emphasis-color));background:color-mix(in srgb, var(--playalong-accent) 12%, transparent)}.playalong-switch .btn-check:focus-visible+span{outline:2px solid color-mix(in srgb, var(--playalong-accent) 54%, transparent);outline-offset:2px}.playalong-settings-panel{display:grid;gap:1rem}.playalong-settings-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem}.playalong-settings-panel__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(12rem, 0.7fr);gap:.75rem}.playalong-settings-panel__actions{display:flex;flex-wrap:wrap;gap:.5rem}.playalong-settings-panel__status{min-height:1.25rem}.sandbox-bottom-toolbar-host[data-sandbox-bottom-toolbar=playalong-multitrack-transport] .sandbox-bottom-toolbar-host__content{width:min(100%,980px);margin-inline:auto}.playalong-bottom-transport{display:flex;align-items:center;gap:.75rem;width:100%;min-width:0}.playalong-bottom-transport__controls{display:inline-flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:.35rem}.playalong-bottom-transport__button{min-width:4.25rem;height:2.35rem}.playalong-bottom-transport__play{min-width:4.75rem;height:2.65rem}.playalong-bottom-transport__summary{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:.15rem .75rem;min-width:0;flex:1 1 auto;align-items:center}.playalong-bottom-transport__title{min-width:0;overflow:hidden;font-size:.92rem;font-weight:700;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.playalong-bottom-transport__time{font-family:var(--bs-font-monospace);font-size:.78rem;color:var(--bs-secondary-color);white-space:nowrap}.playalong-bottom-transport__seek{grid-column:1/-1}.playalong-bottom-transport__meta{grid-column:1/-1;display:grid;grid-template-columns:minmax(8rem, auto) minmax(7rem, auto) minmax(8rem, 0.35fr);align-items:center;gap:.35rem .75rem;min-width:0}.playalong-bottom-transport__loop,.playalong-bottom-transport__key,.playalong-bottom-transport__tempo-label{min-width:0;overflow:hidden;font-size:.78rem;line-height:1.2;color:var(--bs-secondary-color);text-overflow:ellipsis;white-space:nowrap}.playalong-bottom-transport__key{grid-column:1/-1}.playalong-bottom-transport__tempo{min-width:7.5rem}.playalong-bottom-transport__meta .sandbox-ui-range-knob{--sandbox-knob-size: 2.1rem;--sandbox-knob-accent: #d69b37;grid-template-columns:var(--sandbox-knob-size) minmax(3rem, auto)}.playalong-bottom-transport__status{grid-column:1/-1;min-width:0;overflow:hidden;font-size:.78rem;line-height:1.2;color:var(--bs-secondary-color);text-overflow:ellipsis;white-space:nowrap}@media(max-width: 767.98px){.playalong-studio{padding:.75rem}.playalong-studio__header,.playalong-studio__control-deck,.playalong-timeline{grid-template-columns:minmax(0, 1fr)}.playalong-studio__actions,.playalong-loop-panel__header{justify-content:flex-start}.playalong-mixer-grid{grid-template-columns:minmax(0, 1fr)}.playalong-track-strip{grid-template-rows:auto auto auto}.playalong-track-strip__controls{grid-template-columns:repeat(2, minmax(0, 1fr))}.playalong-track-strip__switches{grid-template-columns:repeat(3, minmax(0, 1fr))}.playalong-settings-panel__grid{grid-template-columns:minmax(0, 1fr)}.playalong-bottom-transport{align-items:flex-start;gap:.55rem}.playalong-bottom-transport__summary{grid-template-columns:minmax(0, 1fr);gap:.1rem}.playalong-bottom-transport__meta{grid-template-columns:minmax(0, 1fr)}.playalong-bottom-transport__button,.playalong-bottom-transport__play{min-width:3.75rem;height:2.2rem}}
