.composition-staff{background:#fff}
.score-tab-line{stroke:#9494a2;stroke-width:1}
.score-tab-digit{font:700 16px system-ui;fill:#17173e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.score-layer-heading{font:600 13px system-ui;fill:#686879}
.score-bol{font:700 14px system-ui;fill:#17173e;paint-order:stroke;stroke:#fff;stroke-width:3px}
.score-layer-event.is-current text{fill:#9b5300;text-decoration:underline;text-decoration-thickness:2px}
.composition-staff .event.is-current .head{stroke:#b66b00;stroke-width:3px}
.composition-staff .event.is-current .lane-value{fill:#9b5300;text-decoration:underline;text-decoration-thickness:2px}
.score-layer-event.is-current .score-active-box{stroke:#c97700;stroke-width:2;fill:#fff2d9}
.score-active-box{fill:transparent;stroke:none}
.score-rhythm-boundary{stroke:#8b8ba4;stroke-width:1;stroke-dasharray:2 3}
.score-rhythm-boundary.is-vibhag{stroke:#484867;stroke-width:1.5;stroke-dasharray:none}
.score-tab-tie{stroke:#22224b;fill:none;stroke-width:1.5}
.orientation-control,.tabla-view-head [role=group]{display:inline-flex;gap:4px}
.orientation-control button,.tabla-view-head button{min-width:44px;min-height:44px;padding:6px 10px;border:1px solid #b8b8c6;border-radius:9px;background:#fff;color:#24244b;font:inherit}
.orientation-control button[aria-pressed=true],.tabla-view-head button[aria-pressed=true]{background:#25255f;color:#fff}
#guitarFretboard[data-orientation=left]{transform:scaleX(-1)}
#guitarFretboard[data-orientation=left] .guitar-fret-number{transform:translateX(-50%) scaleX(-1)}
#guitarFretboard[data-orientation=left] .guitar-note-marker{transform:translate(-50%,-50%) scaleX(-1)}
#guitarFretboard[data-orientation=left] .guitar-note-marker.is-playing{transform:translate(-50%,-50%) scaleX(-1) scale(1.13)}
.tabla-view{box-sizing:border-box;max-width:100%;min-width:0;margin:12px 0;padding:12px;border:1px solid #d8d8e2;border-radius:16px;background:#fff}
.tabla-view[hidden]{display:none}
.tabla-view-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tabla-drums{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,28px);max-width:620px;margin:auto}
.tabla-drums figure{min-width:0;flex:1;margin:8px 0}
.tabla-drums [data-drum=bayan]{flex:1.2}
.tabla-view[data-orientation=left] .tabla-drums{flex-direction:row-reverse}
.tabla-drums figcaption{display:flex;flex-direction:column;text-align:center;min-height:62px;font-size:14px;overflow-wrap:anywhere}
.tabla-drums [data-bol]{min-height:24px;color:#56566d}
.tabla-drums svg{display:block;width:100%;height:auto;overflow:visible}
.tabla-drums circle{stroke:#b6a690;stroke-width:2;fill:#ece6db}
.tabla-drums [data-zone=edge]{fill:#f8f2e7}.tabla-drums [data-zone=inner]{fill:#fffaf0}.tabla-drums [data-zone=syahi]{fill:#303044;stroke:#44445a}
.tabla-drums .is-playing [data-bol]{font-weight:800;text-decoration:underline;color:#915200}
.tabla-drums .is-playing svg{outline:2px solid #d38b29;outline-offset:-3px;border-radius:50%}
.tabla-drums circle.is-struck{fill:#f2ab47;stroke:#965800;stroke-width:4}
.tabla-view-status{min-height:20px;font-size:13px;color:#686879;margin:0;text-align:center}
.viewer-displays{flex-wrap:wrap}.viewer-displays [data-view]{min-width:44px;min-height:44px}
@media(prefers-reduced-motion:reduce){.tabla-view *,.score-layer-event *{transition:none!important;animation:none!important}}

.tabla-view-modes{display:flex;gap:6px;margin:10px 0}
.tabla-view-modes button{font:inherit;min-height:44px;padding:6px 12px;border:1px solid #b8b8c6;border-radius:9px;background:white;color:#24244b}
.tabla-view-modes button[aria-pressed=true]{background:#25255f;color:white}
.tabla-drums[hidden],.tabla-hit-strip[hidden]{display:none}
.tabla-hit-strip{display:flex;gap:8px;overflow-x:auto;position:relative;max-width:100%;padding:6px 2px 12px;overscroll-behavior-x:contain}
.tabla-hit-event{flex:0 0 auto;border:2px solid #dddde7;border-radius:10px;padding:8px;color:#24244b}
.tabla-hit-event>div{display:flex;gap:8px;margin-top:6px}
.tabla-hit-event small{display:block;font-size:13px;color:#686879}
.tabla-single-hit{display:flex;flex-direction:column;align-items:center;padding:6px;min-width:46px}
.tabla-single-hit strong{font-size:18px}
.tabla-hit-event.is-current{border-color:#c97700;background:#fff2d9}

.tabla-strike-label{display:none;font:800 26px system-ui;fill:white;paint-order:stroke;stroke:#303044;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.tabla-view[data-mode=hits] .tabla-strike-label{display:block}
.tabla-view[data-mode=hits] [data-bol]{visibility:hidden}
.tabla-view[data-mode=hits] .tabla-drums .is-playing svg{outline-width:4px}

/* A bol is an indivisible token; subdivisions occupy separate rows. */
.tala-unbroken-bol{display:inline-block;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.tala-display-subdivision{display:block;min-height:1.5em;line-height:1.5;white-space:normal;overflow-wrap:normal!important;word-break:normal!important}
.chord-tala-cycle{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
/* One musical group per row; never wrap its last matra below the others. */
.chord-tala-group{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);width:100%;flex:0 0 100%;overflow-x:auto}
.chord-tala-group>span{min-width:0;align-content:start;padding:6px 3px}
.chord-tala-group b,.poly-tala-cycle i{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.tabla-view[data-mode=hits] .tabla-strike-label{display:none}
.tabla-strike-points{display:none;pointer-events:none}
.tabla-view[data-mode=hits] .tabla-strike-points{display:block}
.tabla-drums .tabla-contact-halo{fill:#ffce69;stroke:#8c4800;stroke-width:2;opacity:.8}
.tabla-drums .tabla-contact-point{fill:#b94405;stroke:white;stroke-width:2}
.tabla-strike-points text{font:800 17px system-ui;fill:#512900;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round}

/* Shared horizontal scrolling remains available for all display rows. */
.composition-score-scroll{min-height:44px;flex-shrink:0}
.composition-score-scroll input{min-height:44px;padding:0}
.composition-score-scroll input::-moz-range-track{height:7px;border-radius:10px;background:#e9ae5c}
.composition-score-scroll input::-moz-range-thumb{width:22px;height:22px;border:2px solid white;border-radius:50%;background:var(--teal)}

.sequence-length-recovery{box-sizing:border-box;width:min(540px,calc(100% - 24px));max-height:85dvh;overflow:auto;border:1px solid #d9d9e5;border-radius:16px;padding:20px;color:#211e48;background:white}
.sequence-length-recovery::backdrop{background:#16132b80}
.sequence-length-recovery h2{font-size:1.15rem;margin:0 0 12px}
.sequence-length-recovery p{line-height:1.45;margin:0 0 12px}
.sequence-length-recovery section{padding:14px 0;border-top:1px solid #dedde7}
.sequence-length-recovery button{width:100%;white-space:normal;min-height:44px;padding:10px;font:inherit}