/* /whats-new: one release, from the tour to the full list (templates/whats-new.html, static/js/whats-new.js).
   Built from the home's own pieces: the hero type (home.css), paper and ink (notation.css),
   the flat teal chapter (.e-manifesto), boxed section letters (.nx-tt-mark) and the "Fine" closing. */

/* ---------- the hero: the first page of a score ---------- */
.cx .wn-hero { padding: 112px 0 64px; }
.cx .wn-tempo { margin: 0 0 28px; font: 500 15px/1 var(--ui); color: var(--paper-2); letter-spacing: .01em; }
.cx .wn-tempo i { font: italic 600 19px/1 var(--serif); color: var(--paper-ink); margin-right: 2px; }
.cx .wn-hero-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: end; }
.cx .wn-hero h1 { --h1: clamp(58px, 8.2vw, 112px); margin: 0; font: 700 var(--h1)/.92 var(--serif); letter-spacing: -2.5px; color: var(--paper-ink); }
.cx .wn-hero h1 .l1 { display: block; }
.cx .wn-hero h1 .l2 { display: block; color: var(--paper-teal); font-style: italic; }
.cx .wn-lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--paper-2); }
.cx .wn-lede b { color: var(--paper-ink); font-weight: 600; }
.cx .wn-ctas { display: flex; gap: 10px; margin-top: 26px; }
.cx .wn-ctas .btn { height: 52px; border-radius: 10px; font-size: 15px; background: transparent; border-color: var(--paper-ink); color: var(--paper-ink); box-shadow: none; }
.cx .wn-ctas .btn:hover { background: rgba(23, 25, 30, .06); }
.cx .wn-ctas .btn.pri { flex: 1 1 auto; background: var(--paper-ink); color: var(--paper); }
.cx .wn-ctas .btn.pri:hover { background: #000; }
.cx .wn-from { margin: 12px 0 0; font-size: 13.5px; color: var(--paper-2); }
.cx .wn-hear { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 22px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--paper-rule); background: none; color: var(--paper-ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.cx .wn-hear .hp { --play-s: 52px; }
.cx .wn-hear b { display: block; font: 600 22px/1.1 var(--serif); }
.cx .wn-hear small { display: block; margin-top: 3px; font-size: 13px; color: var(--paper-2); }

@media (max-width: 860px) {
    .cx .wn-hero { padding: 96px 0 44px; }
    .cx .wn-hero-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cx .wn-hero h1 { --h1: clamp(48px, 14vw, 68px); letter-spacing: -1.5px; }
}

/* ---------- A: the tour ---------- */
.cx .wn-watch { padding-top: 96px; }
.cx .wn-tour { margin-top: 40px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line3); background: var(--page); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cx .wn-tour iframe { display: block; width: 100%; aspect-ratio: 1600 / 1030; border: 0; background: var(--page); }

/* ---------- B: Classical phrasing, in the flat teal chapter (.e-manifesto's colours) ---------- */
.cx .wn-sage { background: var(--t400); color: #0b1120; padding: 112px 0 120px; }
.cx .wn-sage .nx-tt-mark { color: #163a35; }
.cx .wn-sage .nx-tt-mark b { color: #0b1120; }
.cx .wn-sage h2 { margin: 0; font: 500 clamp(38px, 5vw, 68px)/1.02 var(--serif); letter-spacing: -.022em; color: #0b1120; max-width: 16ch; }
.cx .wn-sage-lede { margin: 20px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: #163a35; }
.cx .wn-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.cx .wn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid rgba(11, 17, 32, .25); }
.cx .wn-facts div { padding: 16px 18px 0 0; }
.cx .wn-facts div + div { padding-left: 18px; border-left: 1px solid rgba(11, 17, 32, .25); }
.cx .wn-facts b { display: block; font-weight: 600; font-size: 14.5px; color: #0b1120; }
.cx .wn-facts span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #163a35; }
.cx .wn-sage .wn-crop { box-shadow: 0 30px 70px -34px rgba(11, 17, 32, .7); }
.cx .wn-sage .wn-shot figcaption { color: #163a35; }
.cx .wn-sage .wn-shot figcaption b { color: #0b1120; }
@media (max-width: 900px) {
    .cx .wn-sage { padding: 72px 0 80px; }
    .cx .wn-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 620px) {
    .cx .wn-facts { grid-template-columns: minmax(0, 1fr); }
    .cx .wn-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(11, 17, 32, .25); margin-top: 14px; }
}

/* ---------- the real plugin window, cut down to the one control (Logic's feature tiles, Ableton's device strips) ---------- */
.cx .wn-shot { margin: 0; }
.cx .wn-crop { border-radius: var(--r); overflow: hidden; background: #080d19; }
.cx .wn-crop img { display: block; width: 100%; height: auto; }
/* the list runs on past the tile's edges */
.cx .wn-crop.cut img { -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.cx .wn-crop.page { background: var(--page); box-shadow: inset 0 0 0 1px var(--line2); }
.cx .wn-shot figcaption { margin-top: 16px; max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.cx .wn-shot figcaption b { color: var(--fg); font-weight: 600; }

/* ---------- C: pronunciation; the window left, the words right ---------- */
.cx .wn-feat-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.cx .wn-feat h2 { margin: 0; font: 500 clamp(38px, 5vw, 68px)/1.02 var(--serif); letter-spacing: -.022em; max-width: 14ch; text-wrap: balance; }
.cx .wn-feat .u-lede { margin: 20px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--fg2); }
.cx .wn-points { margin: 32px 0 0; padding: 0; list-style: none; max-width: 46ch; border-top: 1px solid var(--line2); }
.cx .wn-points li { padding: 14px 0; border-bottom: 1px solid var(--line2); font-size: 15.5px; line-height: 1.55; color: var(--fg2); }
.cx .wn-points b { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) { .cx .wn-feat-in { grid-template-columns: minmax(0, 1fr); gap: 40px; } .cx .wn-feat-in > .wn-shot { order: 2; } }

/* ---------- D: vibrato; the slider, and the pitch it gave one held note ---------- */
.cx .wn-vib { background: var(--pg); }
.cx .wn-vib-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: end; }
.cx .wn-vib .wn-crop { background: var(--page); box-shadow: inset 0 0 0 1px var(--line2); }
.cx .wn-trace { margin: 48px 0 0; }
.cx .wn-trace svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx .wn-trace .grid line { stroke: var(--line2); stroke-width: 1; }
.cx .wn-trace .grid line.zero { stroke: rgba(139, 157, 180, .34); }
.cx .wn-trace .grid text { fill: var(--fg2); font: 500 12px var(--ui); font-variant-numeric: tabular-nums; }
.cx .wn-trace .ghost { fill: none; stroke: rgba(241, 245, 249, .2); stroke-width: 1.25; stroke-dasharray: 3 4; transition: opacity .2s; }
.cx .wn-trace .line { fill: none; stroke: var(--fg); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cx .wn-trace .head line { stroke: var(--a400); stroke-width: 1; }
.cx .wn-trace .head circle { fill: var(--a400); }
.cx .wn-trace figcaption { margin-top: 14px; font-size: 15px; color: var(--fg2); }
.cx .wn-trace figcaption b { color: var(--fg); font-weight: 600; }
.cx .wn-vib-ctl { display: flex; align-items: center; gap: 18px 24px; margin-top: 28px; flex-wrap: wrap; }
/* Logic's mode pills: one picture, the white pill is the one you hear */
.cx .wn-seg { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.cx .wn-seg button { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fg2); font: 500 14px var(--ui); white-space: nowrap; cursor: pointer; transition: background-color .1s ease-out, color .1s ease-out; }
.cx .wn-seg button:hover { color: var(--fg); }
.cx .wn-seg button[aria-pressed="true"] { background: var(--fg); color: var(--page); }
.cx .wn-seg button small { margin-left: 6px; font: inherit; opacity: .62; }
.cx .wn-tp { display: flex; flex: 1 1 280px; align-items: center; gap: 14px; min-width: 0; }
.cx .wn-tp .grow { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.cx .wn-tp .track { flex: 1 1 auto; height: 2px; border-radius: 1px; background: var(--line2); overflow: hidden; }
.cx .wn-tp .track i { display: block; width: 0; height: 100%; background: var(--a400); }
.cx .wn-tp .time { font-size: 12.5px; color: var(--fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) { .cx .wn-vib-top { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ---------- E: Isaac ---------- */
.cx .wn-isaac-in { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: center; }
.cx .wn-isaac-pic { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; display: block; }
.cx .wn-isaac h2 { margin: 0; font: 500 clamp(48px, 6.4vw, 88px)/.94 var(--serif); letter-spacing: -.02em; }
.cx .wn-isaac .u-lede { margin: 18px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--fg2); }
.cx .wn-isaac-play { max-width: 420px; margin-top: 28px; border-top-color: var(--line); color: var(--fg); }
.cx .wn-isaac-play small { color: var(--fg3); }
@media (max-width: 760px) { .cx .wn-isaac-in { grid-template-columns: minmax(0, 1fr); gap: 28px; } .cx .wn-isaac-pic { max-width: 300px; } }

/* ---------- F: languages ---------- */
.cx .wn-listen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cx .wn-rows { border-top: 1px solid var(--line2); }
.cx .wn-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 84px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.cx .wn-row .t { font: 500 22px/1.15 var(--serif); }
.cx .wn-row .t em { margin-left: 8px; font: 500 11.5px var(--ui); font-style: normal; letter-spacing: .02em; color: var(--fg2); }
.cx .wn-row .m { font-size: 13px; color: var(--fg2); }
.cx .wn-row .time { font-size: 12.5px; color: var(--fg2); text-align: right; font-variant-numeric: tabular-nums; }
.cx .wn-row .track { height: 2px; margin-top: 8px; border-radius: 1px; background: var(--line2); cursor: pointer; }
.cx .wn-row .track i { display: block; width: 0; height: 100%; background: var(--a400); }
.cx .wn-rplay { --play-s: 44px; }
@media (max-width: 900px) { .cx .wn-listen { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* ---------- G: the window ---------- */
.cx .wn-more figure { margin: 0; }
.cx .wn-win { border-radius: 14px; overflow: hidden; border: 1px solid var(--line3); background: var(--page); }
.cx .wn-win img { display: block; width: 100%; height: auto; }
.cx .wn-more { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 44px; }
.cx .wn-more figcaption { margin-top: 14px; }
.cx .wn-more figcaption b { display: block; font: 600 21px/1.15 var(--serif); }
.cx .wn-more figcaption span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--fg2); }
.cx .wn-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); }
.cx .wn-list li { padding: 18px 0; border-bottom: 1px solid var(--line2); color: var(--fg2); font-size: 16px; line-height: 1.6; }
.cx .wn-list li b { display: block; margin-bottom: 2px; font: 600 21px/1.2 var(--serif); color: var(--fg); }
@media (max-width: 860px) { .cx .wn-more { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- H: the engine (figures from the 3.1.2 test page) ---------- */
.cx .wn-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--line2); }
.cx .wn-three > div { padding: 28px 28px 8px 0; }
.cx .wn-three > div + div { padding-left: 28px; border-left: 1px solid var(--line2); }
.cx .wn-three svg { display: block; width: 100%; height: 150px; margin-bottom: 18px; }
.cx .wn-three h3 { margin: 0 0 4px; font: 600 16px var(--ui); }
.cx .wn-three p { margin: 0; color: var(--fg2); font-size: 14.5px; }
.cx .wn-abt { display: flex; gap: 6px; margin-bottom: 10px; }
.cx .wn-abt button { height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line2); background: transparent; color: var(--fg2); font: 500 12px var(--ui); cursor: pointer; }
.cx .wn-abt button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--page); }
@media (max-width: 900px) { .cx .wn-three { grid-template-columns: minmax(0, 1fr); } .cx .wn-three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line2); } }

/* ---------- I: the list (Linear changelog rows) ---------- */
.cx .wn-groups { margin-top: 36px; border-top: 1px solid var(--line2); }
.cx .wn-groups details { border-bottom: 1px solid var(--line2); }
.cx .wn-groups summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; list-style: none; cursor: pointer; font: 500 22px var(--serif); }
.cx .wn-groups summary::-webkit-details-marker { display: none; }
.cx .wn-groups summary .cnt { margin-left: 10px; font: 400 14px var(--ui); color: var(--fg2); }
.cx .wn-groups summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border: solid var(--fg2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s var(--v-ease); }
.cx .wn-groups details[open] summary::after { transform: rotate(-135deg); }
.cx .wn-groups ul { margin: 0 0 24px; padding: 0; list-style: none; columns: 2; column-gap: 48px; }
.cx .wn-groups li { break-inside: avoid; padding: 6px 0; color: var(--fg2); }
.cx .wn-groups li b { color: var(--fg); font-weight: 600; }
@media (max-width: 720px) { .cx .wn-groups ul { columns: 1; } }

@media (prefers-reduced-motion: reduce) { .cx.wn * { transition: none !important; animation: none !important; } }