.document-sequencer{--ds-dark:#35442c;--ds-muted:#59644e;--ds-line:#aeb7a0;position:relative;min-width:0;padding:23px;background:#e7eadd;border:1px solid var(--ds-line);color:#1d2819;overflow:clip}
.ds-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;font:12px/1.5 var(--font-mono);letter-spacing:.035em;color:var(--ds-muted)}
.ds-topline>span:last-child{white-space:nowrap}
.ds-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:end;margin:20px 0}
.ds-intro h3{font:700 24px/1.12 var(--font-sans);letter-spacing:-.035em}
.ds-intro h3>span{color:#5b6d44}
.ds-intro>p{font:14px/1.65 var(--font-sans);color:var(--ds-muted);max-width:190px}
.ds-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}
.ds-clip{position:relative;min-width:0;padding:9px 11px 10px;background:#fbfcf5;border:1px solid #a4ae96;box-shadow:0 3px 0 #c4cbb8;text-align:left;border-radius:2px;touch-action:none;cursor:grab;transition:background .18s,border-color .18s,transform .18s;user-select:none;-webkit-user-select:none}
.ds-clip:hover{background:#f7ffe6;border-color:#718553;transform:translateY(-2px)}
.ds-clip[aria-pressed=true]{background:#edf7d5;border-color:#526b32;outline:2px solid #697e48;outline-offset:2px}
.ds-clip.is-placed{background:#d9e2ca;border-color:#a0af8b;box-shadow:0 2px 0 #bcc7ac}
.ds-clip-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:19px;font:12px var(--font-mono);color:var(--ds-muted)}
.ds-handle{display:flex;width:32px;height:34px;margin:-8px -8px -8px 0;justify-content:center;align-items:center;font:22px/1 var(--font-sans);color:#69795b;cursor:grab;touch-action:none}
.ds-clip>strong{display:block;font:600 14px/1.3 var(--font-sans);margin:7px 0 12px;letter-spacing:-.015em}
.ds-clip-action{display:flex;justify-content:space-between;gap:4px;font:12px/1.4 var(--font-mono);color:var(--ds-muted)}
.ds-clip-action>span{font:14px/1 var(--font-sans)}
.ds-timeline{border-top:1px solid var(--ds-line);padding-top:11px}
.ds-ruler{display:grid;grid-template-columns:85px 1fr;gap:10px;padding:0 26px 8px 0;font:12px/1.5 var(--font-mono);color:var(--ds-muted)}
.ds-ruler>div{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;text-align:center}
.ds-ruler>div>span:nth-child(even){opacity:.65}
.ds-track{display:grid;grid-template-columns:85px minmax(0,1fr) 16px;gap:10px;align-items:center;position:relative;padding:6px 0;border-top:1px solid #c6cdbb}
.ds-track-label{display:flex;flex-direction:column;gap:2px}
.ds-track-label>strong{font:600 14px/1.3 var(--font-sans)}
.ds-track-label>span{font:12px/1.5 var(--font-mono);color:var(--ds-muted)}
.ds-slot{position:relative;min-width:0;width:100%;height:52px;padding:0;background:transparent;border:1px dashed #9daa8c;border-radius:2px;transition:border-color .18s,background .18s;isolation:isolate}
.ds-step-grid{height:100%;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:4px}
.ds-step{display:block;background:#d9dfcf;border:1px solid transparent;border-radius:1px}
.ds-step.ds-hit{background:#cbd5bc}
.ds-drop-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(90deg,#e7eadd30,#e7eaddf2 24%,#e7eaddf2 76%,#e7eadd30);font:12px/1.5 var(--font-mono);letter-spacing:.02em}
.ds-drop-label>span{font:16px/1 var(--font-sans)}
.ds-track.is-selected .ds-slot{outline:2px solid #738a50;outline-offset:2px;background:#eff9df}
.ds-track.is-drop-target .ds-slot{background:#edf9d8;border-color:#4f692f;outline:3px solid #718c43;outline-offset:2px}
.ds-track.is-filled .ds-slot{border:1px solid #a0af8b}
.ds-track.is-filled .ds-drop-label{display:none}
.ds-track.is-filled .ds-step.ds-hit{background:#7b9355;border-color:#718749}
.ds-track[data-ds-track=visible].is-filled .ds-step.ds-hit{background:#a47450;border-color:#936441}
.ds-track[data-ds-track=prove].is-filled .ds-step.ds-hit{background:#a2ad7c;border-color:#8c9b62}
.ds-step.is-playing{outline:2px solid #3e502c;outline-offset:1px}
.ds-track.is-sounding .ds-step.ds-hit.is-playing{background:#d2ed8b;border-color:#526d2d}
.ds-remove{position:relative;width:16px;height:24px;padding:0;background:transparent;font:18px/1 var(--font-sans);color:#65734f}
.ds-remove:hover{color:#1d2819;background:#cfdbc0}
.ds-transport{display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--ds-line)}
.ds-play{display:flex;align-items:center;gap:8px;padding:7px 0;background:transparent;font:600 14px var(--font-sans);white-space:nowrap}
.ds-play>span:first-child{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--ds-dark);color:#f7faef;font:14px/1 var(--font-sans);border-radius:50%}
.ds-play:disabled{opacity:.45;cursor:default}
.ds-transport>[data-ds-progress]{font:12px/1 var(--font-mono);color:var(--ds-muted);margin-left:auto}
.ds-sound{font:14px var(--font-sans);padding:5px 0;background:none;border-bottom:1px solid #9aa988;color:var(--ds-muted);white-space:nowrap}
.ds-sound[aria-pressed=true]{color:#293d1d;border-color:#4f6a2d}
.ds-insight{padding:18px 0 16px;min-height:105px}
.ds-insight>span{display:block;font:13px/1.65 var(--font-mono);letter-spacing:.025em;color:#4b6134;text-transform:uppercase}
.ds-insight>p{font:14px/1.65 var(--font-sans);margin-top:7px;max-width:420px}
.ds-complete{padding:0 0 17px}
.ds-complete>span{display:block;font:12px/1.5 var(--font-mono);letter-spacing:.035em;color:var(--ds-muted)}
.ds-complete>strong{display:block;font:650 23px/1.2 var(--font-sans);letter-spacing:-.035em;margin:8px 0 12px}
.ds-complete>a{display:inline-flex;margin-top:7px;align-items:center;gap:15px;font:600 14px/1.6 var(--font-sans);padding-bottom:3px;border-bottom:1px solid #5d7144}
.ds-complete>a:hover{color:#476422}
.ds-complete>a>span{font-size:15px}
.ds-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--ds-line);padding-top:12px;font:14px/1.5 var(--font-sans);color:var(--ds-muted)}
.ds-bottom>button{font:14px var(--font-sans);white-space:nowrap;padding:4px 0;background:transparent;color:var(--ds-muted)}
.ds-bottom>button:disabled{opacity:.4;cursor:default}
.ds-bottom>button:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px}
.document-sequencer button:focus-visible,.document-sequencer a:focus-visible{outline:2px solid #395820;outline-offset:4px}
.document-sequencer.is-dragging{user-select:none;-webkit-user-select:none}
.ds-drag-ghost{position:fixed;z-index:1000;pointer-events:none;background:#f4f9e8;border:1px solid #526b32;box-shadow:0 9px 25px #1722112b;padding:12px 16px;font:600 14px/1.5 var(--font-sans);color:#22361a;transform:rotate(-3deg);width:172px;border-radius:2px}
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ds-guide{display:flex;align-items:center;gap:11px;margin:0 0 15px;font:14px/1.55 var(--font-sans);color:#435b2d}
.ds-guide>span:first-child{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:30px;border:1px solid #9dac87;border-radius:3px;background:#f0f5e7;font:20px/1 var(--font-sans)}
.ds-guide strong{font-weight:650}
.ds-clip.is-next{border-color:#6b834b}
.ds-track.is-next:not(.is-filled) .ds-drop-label{color:#385121;font-weight:600}
.ds-track.is-next:not(.is-filled) .ds-slot{border-color:#789257;background:#edf2e2}
.document-sequencer.is-dragging .ds-clip[aria-pressed=true]{opacity:.55;cursor:grabbing}
.document-sequencer.is-dragging .ds-track.is-selected .ds-drop-label{background:#edf7d8}
.ds-track.is-drop-target .ds-drop-label{background:#e7f2d4}
.ds-track.is-drop-target:not(.is-selected) .ds-slot{outline-color:#a38b50}
@media(max-width:1100px) and (min-width:761px){.document-sequencer{padding:18px}.ds-intro{display:block;margin-block:16px}.ds-intro h3{font-size:23px}.ds-intro h3 br{display:none}.ds-intro h3>span{display:block}.ds-intro>p{max-width:none;margin-top:10px}.ds-clips{gap:7px}.ds-clip{padding:9px}.ds-clip>strong{font-size:13px}.ds-ruler{grid-template-columns:79px minmax(0,1fr);gap:8px;padding-right:24px}.ds-track{grid-template-columns:79px minmax(0,1fr) 16px;gap:8px}.ds-track-label>strong{font-size:13px}.ds-transport{gap:10px}.ds-transport>[data-ds-progress]{display:none}.ds-sound{margin-left:auto}}
@media(max-width:760px){.document-sequencer{padding:19px;margin-bottom:27px}.ds-topline{font-size:12px;flex-wrap:wrap;gap:4px 12px}.ds-intro{gap:16px;margin:18px 0}.ds-intro h3{font-size:24px}.ds-intro>p{font-size:13px}.ds-clips{gap:8px;margin-bottom:14px}.ds-clip{padding:9px}.ds-clip>strong{font-size:14px}.ds-ruler{grid-template-columns:83px minmax(0,1fr);gap:9px;padding-right:25px}.ds-track{grid-template-columns:83px minmax(0,1fr) 16px;gap:9px}.ds-track-label>strong{font-size:13px}.ds-slot{height:50px}.ds-step-grid{gap:3px}.ds-ruler>div{gap:3px}.ds-insight{min-height:110px}.ds-insight>p{font-size:14px}.ds-transport{gap:10px}.ds-bottom{font-size:12px}}
@media(max-width:450px){.document-sequencer{padding:17px 13px}.ds-intro{display:block}.ds-intro h3{font-size:23px}.ds-intro h3 br{display:none}.ds-intro h3>span{display:block}.ds-intro>p{max-width:none;margin-top:9px}.ds-clips{gap:6px}.ds-clip{padding:8px}.ds-clip>strong{font-size:13px;margin-bottom:10px;min-height:34px}.ds-clip-action{font-size:12px;gap:2px}.ds-clip-action>span{display:none}.ds-ruler{grid-template-columns:88px minmax(0,1fr);gap:7px;padding-right:23px}.ds-track{grid-template-columns:88px minmax(0,1fr) 16px;gap:7px}.ds-track-label>strong{font-size:12px}.ds-transport>[data-ds-progress]{display:none}.ds-sound{margin-left:auto}.ds-bottom>span{max-width:175px}.ds-topline{font-size:12px}}
@media(prefers-reduced-motion:reduce){.document-sequencer *{transition:none!important;animation:none!important}.ds-clip:hover{transform:none}.ds-drag-ghost{transform:none}}