.arrangement-timeline { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: .75rem; color: var(--ReadableOnBackground, #111); background: var(--Background, #fff); font-family: inherit; text-shadow: none; text-align: left; }
.arrangement-timeline *, .arrangement-timeline *::before, .arrangement-timeline *::after { box-sizing: border-box; text-shadow: none; }
.arrangement-timeline p, .arrangement-timeline h3 { margin: .5rem 0; overflow-wrap: anywhere; }
.arrangement-timeline button, .arrangement-timeline input { min-height: 44px; min-width: 44px; max-width: 100%; font: inherit; color: var(--ReadableOnMain, #111); background: var(--Main, #eee); border: 1px solid currentColor; border-radius: min(var(--BorderRadius, .5rem), .75rem); padding: .5rem; }
.arrangement-timeline button { cursor: pointer; }
.arrangement-timeline button:disabled, .arrangement-timeline input:disabled { opacity: .65; cursor: not-allowed; }
.arrangement-timeline :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.arrangement-timeline > label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.arrangement-timeline input[type=checkbox] { width: 44px; height: 44px; flex: 0 0 44px; }
.arrangement-scroll { overflow-x: auto; overscroll-behavior-x: contain; width: 100%; max-width: 100%; padding: .35rem; border: 1px solid currentColor; border-radius: .5rem; }
.arrangement-sections { display: flex; align-items: stretch; gap: .75rem; list-style: none; padding: 0; margin: 0 0 .75rem; width: max-content; min-width: 100%; }
.arrangement-section { display: flex; flex-direction: column; gap: .5rem; flex: 0 0 280px; width: 280px; padding: .75rem; border: 1px solid currentColor; border-radius: .5rem; background: var(--Background, #fff); color: var(--ReadableOnBackground, #111); overflow-wrap: anywhere; }
.arrangement-section.is-current { border-width: 3px; padding: calc(.75rem - 2px); }
.arrangement-section.is-current > strong::before { content: '▶ '; }
.arrangement-section.is-drop-target { outline: 3px dashed currentColor; outline-offset: -7px; }
.arrangement-handles, .arrangement-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.arrangement-handle { touch-action: none; user-select: none; cursor: grab !important; }
.arrangement-handle.is-dragging { cursor: grabbing !important; outline: 3px dashed currentColor; }
.arrangement-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.arrangement-fields label { display: block; min-width: 0; font-size: .85em; }
.arrangement-fields input { display: block; width: 100%; margin-top: .25rem; }
.arrangement-preview { display: grid; gap: .5rem; font-size: .85em; }
.arrangement-preview-bars { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.arrangement-preview-bars > span { display: inline-block; font: 10px/1.5 monospace; letter-spacing: 1px; border: 1px solid currentColor; border-radius: .2rem; padding: .15rem; max-width: 100%; overflow-wrap: anywhere; }
.arrangement-preview-bars [data-preview-slot] { font-style: normal; }
.arrangement-preview-bars .is-subdivision { opacity: .7; }
.arrangement-preview-bars [data-sound-override=true] { text-decoration: underline; }
.arrangement-preview-bars [data-slices]:not([data-slices="1"]) { border-bottom: 1px dotted currentColor; }
.arrangement-ruler { display: flex; gap: 4px; width: max-content; padding: .25rem 0; }
.arrangement-ruler button { flex: 0 0 44px; width: 44px; }
.arrangement-ruler [aria-pressed=true] { border-width: 3px; font-weight: bold; text-decoration: underline; }
@media(max-width: 420px) { .arrangement-timeline { padding: .375rem; } .arrangement-section { flex-basis: 256px; width: 256px; padding: .5rem; } .arrangement-section.is-current { padding: calc(.5rem - 2px); } }