/* "Also by Doseedo" — the card row stamped by scripts/seo/stamp-also-by.mjs
 * (markup in scripts/seo/also-by.mjs): under the conversion template's More
 * ways band on a converter page, above the footer everywhere else.
 * A paper band: on a converter page the bands around it are tinted.
 *
 * Panels on ground: each card is a surface on the page's paper, 4px round, no
 * outlines; a line survives only on an affordance (a chip, a button). The
 * section title is the site's: Helvetica bold, caps, a CSS-set period.
 * Everything is scoped under .dsd-also and sets its own margins, so the
 * guide, converter and capability shells (each with its own h2/h3/ul rules)
 * render it the same. */

.dsd-also {
  display: block; margin: 0; padding: 56px 0 32px;
  /* the row is as wide as the WINDOW (100vw); where a scrollbar takes room,
     that is wider than the page, so clip it rather than scroll the page */
  overflow-x: clip;
  background: var(--paper, #eeedea); color: var(--ink, #15181c);
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  text-align: left;
}
.dsd-also *, .dsd-also *::before, .dsd-also *::after { box-sizing: border-box; }
.dsd-also-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* head: title + one line, the arrows on the right */
.dsd-also-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.dsd-also .dsd-also-title {
  margin: 0 0 8px; padding: 0; border: 0;
  font-family: var(--head, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: clamp(22px, 3vw, 28px); line-height: 1.15; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink, #15181c);
}
.dsd-also .dsd-also-title::before { content: none; }
.dsd-also .dsd-also-title::after { content: '.'; }
.dsd-also .dsd-also-sub {
  margin: 0; max-width: 64ch; font-size: 15.5px; line-height: 1.5;
  color: var(--ink-soft, rgba(21,24,28,.7));
}
.dsd-also-nav { display: flex; gap: 8px; flex-shrink: 0; }
.dsd-also-nav[hidden] { display: none; }
.dsd-also-arrow {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; margin: 0;
  font: 600 16px/1 var(--head, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--ink, #15181c); background: var(--surface, #f7f6f3);
  border: 1px solid var(--rule, rgba(21,24,28,.14)); border-radius: 4px; cursor: pointer;
  transition: border-color .12s, opacity .12s;
}
.dsd-also-arrow:hover { border-color: var(--ink, #15181c); }
.dsd-also-arrow:disabled { opacity: .35; cursor: default; border-color: var(--rule, rgba(21,24,28,.14)); }

/* the row: a horizontal scroller as wide as the WINDOW, its first card on the
   wrap's left edge (the padding is the wrap's own inset), so the cards run off
   the right edge of the screen instead of being cut at the text column. */
.dsd-also { --dsd-also-inset: max(24px, calc(50vw - 566px)); }
/* inside a converter page the row shares the page's 1000px measure, so its
   title lines up with the More ways band above it */
.cv-page .dsd-also { --dsd-also-inset: max(24px, calc(50vw - 476px)); }
.cv-page .dsd-also-wrap { max-width: 1000px; }
.dsd-also .dsd-also-cta-arrow { margin: 0; }
.dsd-also .dsd-also-row {
  display: flex; gap: 14px; list-style: none;
  width: 100vw; margin: 26px 0 0 calc(50% - 50vw);
  padding: 2px var(--dsd-also-inset) 24px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--dsd-also-inset);
  scrollbar-width: thin; scrollbar-color: rgba(21,24,28,.28) transparent;
  -webkit-overflow-scrolling: touch;
}
.dsd-also-row::-webkit-scrollbar { height: 6px; }
.dsd-also-row::-webkit-scrollbar-thumb { background: rgba(21,24,28,.24); border-radius: 3px; }
.dsd-also-row::-webkit-scrollbar-track { background: transparent; }

.dsd-also .dsd-also-card {
  flex: 0 0 352px; max-width: 352px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  margin: 0; padding: 14px 16px 18px;
  background: var(--surface, #f7f6f3); border-radius: 4px;
  list-style: none;
}
.dsd-also .dsd-also-card::before, .dsd-also .dsd-also-card::marker { content: none; }

/* text */
.dsd-also .dsd-also-kicker {
  display: flex; align-items: center; gap: 7px; margin: 0 0 7px;
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 500;
  color: var(--ink-mute, rgba(21,24,28,.62));
}
.dsd-also .dsd-also-kicker::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--dsd-also-c, #e3bc55); flex-shrink: 0;
}
.dsd-also .dsd-also-h3 {
  margin: 0 0 8px; padding: 0;
  font-family: var(--head, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.005em;
  text-transform: none; color: var(--ink, #15181c);
}
.dsd-also .dsd-also-h3::after, .dsd-also .dsd-also-h3::before { content: none; }
.dsd-also .dsd-also-h3 a { color: inherit; text-decoration: none; }
.dsd-also .dsd-also-h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsd-also .dsd-also-desc {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft, rgba(21,24,28,.7));
}
/* chips + button: pinned to the card's bottom, so a row of cards lines up
   whether or not a card has chips */
.dsd-also .dsd-also-foot { margin-top: auto; padding-top: 14px; }
.dsd-also .dsd-also-foot > .dsd-also-cta:first-child { margin-top: 0; }
.dsd-also .dsd-also-tagh {
  margin: 0 0 6px; padding-top: 0;
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-mute, rgba(21,24,28,.62));
}
.dsd-also .dsd-also-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dsd-also .dsd-also-tags li { display: block; margin: 0; padding: 0; list-style: none; line-height: 1; }
.dsd-also .dsd-also-tags li::before, .dsd-also .dsd-also-tags li::marker { content: none; }
.dsd-also .dsd-also-tags a, .dsd-also .dsd-also-tags span {
  display: inline-block; padding: 3px 7px; border-radius: 3px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-soft, rgba(21,24,28,.7));
  border: 1px solid var(--rule, rgba(21,24,28,.14)); text-decoration: none;
}
.dsd-also .dsd-also-tags a:hover { color: var(--ink, #15181c); border-color: var(--ink, #15181c); }
.dsd-also .dsd-also-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
  padding: 10px 14px; border-radius: 3px;
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--paper, #eeedea); background: var(--ink, #15181c); text-decoration: none;
  transition: opacity .12s;
}
.dsd-also .dsd-also-cta:hover { opacity: .86; }

/* one colour per product family, shown on the kicker's square */
#also-film, #also-ads { --dsd-also-c: #e3bc55; }
#also-stems { --dsd-also-c: #ff8ab9; }
#also-mcp, #also-compose { --dsd-also-c: #5fa8f0; }
#also-holiday, #also-catalog { --dsd-also-c: #e8836a; }
#also-instruments, #also-realistic { --dsd-also-c: #63e9a5; }
#also-lyrics, #also-restore { --dsd-also-c: #b48ad8; }

/* ── the previews ─────────────────────────────────────────────────────── */
.dsd-also .dsd-also-media {
  position: relative; display: block; height: 142px; margin: 0 0 13px; padding: 0;
  border-radius: 3px; overflow: hidden; background: var(--surface-2, #e3e1dc);
  list-style: none;
}

/* a film: its poster, the demo itself on hover (also-by.js) */
.dsd-also .dsd-also-film { background: #0d0f12; color: #fff; text-decoration: none; }
.dsd-also-film img, .dsd-also-film video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.dsd-also-film video { opacity: 0; transition: opacity .25s; }
.dsd-also-film.is-playing video { opacity: 1; }
.dsd-also-film::after {
  content: ''; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.72));
}
.dsd-also-film-play {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.92); color: #15181c;
}
.dsd-also-film-play svg { width: 11px; height: 11px; fill: currentColor; }
.dsd-also-film-play .dsd-also-ic-pause { display: none; }
.dsd-also-film-cap {
  position: absolute; left: 46px; right: 10px; bottom: 15px; z-index: 1;
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* stems on a timeline */
.dsd-also .dsd-also-lanes { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.dsd-also-lane { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; height: 17px; }
.dsd-also-lane span, .dsd-also-rollrow span, .dsd-also-specrow span {
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-mute, rgba(21,24,28,.62));
  white-space: nowrap;
}
.dsd-also-lane i { position: relative; display: block; height: 100%; }
.dsd-also-lane b { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.dsd-also-lane b.is-audio {
  background: #ff8ab9 repeating-linear-gradient(90deg, rgba(180,58,114,.55) 0 1.5px, transparent 1.5px 3.5px) center / 100% 55% no-repeat;
}
.dsd-also-lane b.is-midi {
  background: #63e9a5 repeating-linear-gradient(90deg, rgba(23,138,84,.7) 0 5px, transparent 5px 9px) center / 100% 3px no-repeat;
}
.dsd-also-daws { display: flex; gap: 5px; margin-top: auto; padding-left: 66px; }
.dsd-also-daws span {
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600;
  padding: 3px 6px; border-radius: 2px; background: var(--ink, #15181c); color: var(--paper, #eeedea);
}

/* an agent's turn */
.dsd-also .dsd-also-chat { background: #15181c; color: #eeedea; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.dsd-also .dsd-also-chat p { margin: 0; }
.dsd-also .dsd-also-ask {
  align-self: flex-end; max-width: 88%; padding: 7px 9px; border-radius: 6px 6px 2px 6px;
  background: #eeedea; color: #15181c; font-size: 12px; line-height: 1.35;
}
.dsd-also .dsd-also-step {
  display: flex; align-items: baseline; gap: 7px; font-size: 11px; line-height: 1.3; color: rgba(238,237,234,.72);
}
.dsd-also .dsd-also-step::before { content: '✓'; color: #63e9a5; font-weight: 700; }
.dsd-also code {
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace); font-size: 10.5px;
  color: #8ec6fb; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; white-space: nowrap;
}
.dsd-also-step span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a piano roll, two parts */
.dsd-also .dsd-also-roll { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.dsd-also-rollrow { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: stretch; height: 44px; }
.dsd-also-rollrow span { align-self: center; }
.dsd-also-rollrow i {
  position: relative; display: block; border-radius: 2px;
  background: var(--surface, #f7f6f3) repeating-linear-gradient(to bottom, transparent 0 6.6px, rgba(21,24,28,.05) 6.6px 7.3px);
}
.dsd-also-rollrow b { position: absolute; height: 14%; min-height: 5px; border-radius: 2px; }
.dsd-also-rollrow b.is-midi { background: #2fbf7c; }
.dsd-also-rollrow b.is-audio { background: #4a96e0; }
.dsd-also .dsd-also-rolltool { margin: 0; display: flex; gap: 7px; align-items: baseline; font-size: 11px; color: var(--ink-mute, rgba(21,24,28,.62)); }
.dsd-also .dsd-also-rolltool code { color: var(--accent, #1d4c7a); }

/* recordings to play */
.dsd-also .dsd-also-tracks { padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; margin: 0 0 14px; }
.dsd-also .dsd-also-tracks li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 2px; list-style: none; }
.dsd-also .dsd-also-tracks li::before, .dsd-also .dsd-also-tracks li::marker { content: none; }
.dsd-also-play {
  width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: var(--ink, #15181c); color: var(--paper, #eeedea); cursor: pointer;
}
.dsd-also-play svg { width: 11px; height: 11px; fill: currentColor; }
.dsd-also-track { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink, #15181c); }
.dsd-also-track b { font-size: 13.5px; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsd-also-track span { font-size: 11.5px; color: var(--ink-mute, rgba(21,24,28,.62)); }
.dsd-also-track:hover b { text-decoration: underline; text-underline-offset: 2px; }

/* element tiles that play their instrument */
.dsd-also .dsd-also-tiles { padding: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 6px; }
.dsd-also-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  margin: 0; padding: 6px 7px; min-width: 0; border: 0; border-radius: 3px; cursor: pointer; text-align: left;
  background: var(--dsd-tile, rgba(126,195,168,.38)); color: var(--ink, #15181c);
  transition: background .12s, color .12s;
}
.dsd-also-tile:nth-child(4n+2) { --dsd-tile: rgba(232,131,106,.32); }
.dsd-also-tile:nth-child(4n+3) { --dsd-tile: rgba(227,188,85,.42); }
.dsd-also-tile:nth-child(4n+4) { --dsd-tile: rgba(95,168,240,.3); }
.dsd-also-tile b { font-family: var(--head, 'Helvetica Neue', Helvetica, Arial, sans-serif); font-size: 19px; line-height: 1; font-weight: 700; }
.dsd-also-tile b::before { content: attr(data-sym); }
.dsd-also-tile span {
  margin-top: 3px; max-width: 100%; font-family: var(--mono, 'JetBrains Mono', Menlo, monospace);
  font-size: 8px; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsd-also-tile-ic { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 14px; height: 14px; }
.dsd-also-tile-ic svg { width: 9px; height: 9px; fill: currentColor; opacity: .55; }
.dsd-also-tile:hover { background: rgba(21,24,28,.14); }

/* playing state, shared by every play control */
.dsd-also .dsd-also-ic-pause { display: none; }
.dsd-also [aria-pressed="true"] .dsd-also-ic-play { display: none; }
.dsd-also [aria-pressed="true"] .dsd-also-ic-pause { display: inline; }
.dsd-also-tile[aria-pressed="true"] { background: var(--ink, #15181c); color: var(--paper, #eeedea); }
.dsd-also-tile[aria-pressed="true"] .dsd-also-tile-ic svg { opacity: 1; }
.dsd-also-play[aria-pressed="true"] { background: var(--accent, #1d4c7a); }

/* a lyric swapped on the take */
.dsd-also .dsd-also-lyric { padding: 14px 12px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.dsd-also-wave { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 2px; border-radius: 2px; background: #ff8ab9; }
.dsd-also-wave b { flex: 1; min-height: 3px; border-radius: 1px; background: rgba(180,58,114,.7); }
.dsd-also .dsd-also-words { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink, #15181c); }
.dsd-also-swap { white-space: nowrap; }
.dsd-also-swap s { color: var(--ink-mute, rgba(21,24,28,.62)); text-decoration-thickness: 1.5px; margin-right: 4px; }
.dsd-also-swap em { font-style: normal; font-weight: 600; padding: 1px 4px; border-radius: 2px; background: rgba(99,233,165,.55); }

/* a vocal's spectrum, before and after */
.dsd-also .dsd-also-restore { padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.dsd-also-specrow { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dsd-also-spec { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.dsd-also-spec b { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.dsd-also-spec.is-before b { background: rgba(21,24,28,.3); }
.dsd-also-spec.is-after b { background: #b48ad8; }
.dsd-also-spec.is-before::after {
  content: '8 kHz'; position: absolute; top: 0; bottom: 0; left: 66.6%; padding-left: 5px;
  border-left: 1.5px dashed rgba(21,24,28,.45);
  font-family: var(--mono, 'JetBrains Mono', Menlo, monospace); font-size: 8.5px; color: var(--ink-mute, rgba(21,24,28,.62));
}

/* focus, for every control in the block */
.dsd-also a:focus-visible, .dsd-also button:focus-visible { outline: 2px solid var(--accent, #1d4c7a); outline-offset: 2px; }

@media (max-width: 700px) {
  .dsd-also { padding: 44px 0 20px; }
  .dsd-also { --dsd-also-inset: 16px; }
  .dsd-also-wrap { padding: 0 16px; }
  .dsd-also .dsd-also-row { margin-top: 20px; padding-bottom: 20px; gap: 12px; }
  .dsd-also .dsd-also-card { flex-basis: min(84vw, 340px); }
  .dsd-also-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dsd-also-film video { transition: none; }
}