/* The Notation side of cantai.app (home, /plans, /audiodemos, /about, /faq, /downloads, /dorico, /sibelius).
   Notation is paper and ink; Cantai for DAWs is the screen. Paper and ink are /daw's Sticky Lyrics band.
   Loaded after each page's own stylesheet, so where both style the same thing these rules win. */
.cx {
    --paper: #f1ece2; --paper-rule: rgba(23, 25, 30, .14); --paper-ink: #17191e; --paper-2: #5d5a52;
    --paper-teal: #2f6f64;                      /* teal that reads on paper: 4.9:1 */
    --v-ease: cubic-bezier(.25, .46, .45, .94);
}
/* ================= paper ================= */

/* ---------- paper band ---------- */
.cx .nx-paper { background: var(--paper); color: var(--paper-ink); }
.cx .nx-paper a:not(.nx-btn) { color: inherit; }
.cx .nx-paper ::selection { background: rgba(47, 111, 100, .22); }
/* ---------- the header over paper (notation.js) ---------- */
.cx-hdr .cap, .cx-hdr .cap :is(.product a, nav.links > a, nav.links > button, .signin) { transition-timing-function: cubic-bezier(0, 0, .2, 1); }
.cx-hdr .cap { transition-property: background-color, box-shadow, color; transition-duration: .3s; }
html.nx-hdr-paper .cx-hdr .cap { color: var(--paper-ink, #17191e); background-color: rgb(241 236 226 / .72); box-shadow: inset 0 0 0 1px rgb(23 25 30 / .09), 0 8px 24px -16px rgb(23 25 30 / .28); }
html.nx-hdr-paper .cx-hdr.scrolled .cap { background-color: rgb(241 236 226 / .86); }
html.nx-hdr-paper .cx-hdr .product { background: rgb(23 25 30 / .06); }
html.nx-hdr-paper .cx-hdr .product .thumb { background: rgb(23 25 30 / .1); }
html.nx-hdr-paper .cx-hdr .product a { color: rgb(23 25 30 / .55); }
html.nx-hdr-paper .cx-hdr .product a[aria-current], html.nx-hdr-paper .cx-hdr .product a:hover { color: #17191e; }
html.nx-hdr-paper .cx-hdr nav.links > :is(a, button), html.nx-hdr-paper .cx-hdr .signin { color: rgb(23 25 30 / .68); }
html.nx-hdr-paper .cx-hdr nav.links > :is(a:hover, a[aria-current], button:hover, button[aria-expanded="true"]), html.nx-hdr-paper .cx-hdr .signin:hover { color: #17191e; }
html.nx-hdr-paper .cx-hdr .try { background: #17191e; color: #f1ece2; }
html.nx-hdr-paper .cx-hdr .try:hover { background: #000; }
/* ---------- the oldest version each app needs, under its logo in the hero ---------- */
.cx .hosts .nx-ver { font: 500 11px/1 var(--ui); letter-spacing: .02em; color: currentColor; opacity: .62; margin-left: 2px; }
.cx .hosts li .nx-ver { display: block; margin: 4px 0 0; text-align: center; }
html.nx-hdr-paper .cx-hdr .burger i::before, html.nx-hdr-paper .cx-hdr .burger i::after { background: rgb(23 25 30 / .85); }
html.nx-hdr-paper .cx-hdr .burger:is(:hover, [aria-expanded="true"]) { background: rgb(23 25 30 / .06); }


/* ================= waveform list — Spitfire BBC SO: full width, real waveforms, no covers ================= */
.cx .v-wavelist { margin: 0; }
.cx .v-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; }
.cx .v-ghost { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(241, 245, 249, .2); color: var(--fg); font: 500 14px/1 var(--ui); text-decoration: none; transition: border-color .16s var(--v-ease), background-color .16s var(--v-ease); }
.cx .v-ghost:hover { border-color: rgba(241, 245, 249, .5); background: rgba(241, 245, 249, .04); }
.cx .v-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line2); }
.cx .v-row { --p: 0; display: grid; grid-template-columns: 40px minmax(170px, 250px) minmax(0, 1fr) 96px; align-items: center; gap: 22px; padding: 20px 0; border-top: 1px solid var(--line2); }
.cx .v-play { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 245, 249, .42); background: transparent; color: var(--fg); cursor: pointer; transition: background-color .16s var(--v-ease), border-color .16s var(--v-ease), color .16s var(--v-ease); }
.cx .v-play:hover { border-color: var(--fg); }
.cx .v-row.on .v-play { background: var(--fg); border-color: var(--fg); color: var(--page); }
.cx .v-play svg { margin-left: 1px; }
.cx .v-row.on .v-play svg { margin-left: 0; }
.cx .v-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cx .v-t { font: 500 24px/1.1 var(--serif); color: var(--fg); }
.cx .v-d { font: 400 13px/1.35 var(--ui); color: var(--fg2); }
.cx .v-wf { position: relative; height: 56px; cursor: pointer; outline-offset: 4px; border-radius: 2px; }
.cx .v-wf-base, .cx .v-wf-on { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.cx .v-wf i { flex: 1 1 0; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 1px; background: rgba(241, 245, 249, .26); }
.cx .v-wf-on { clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.cx .v-wf-on i { background: var(--fg); }
.cx .v-row.cur .v-wf-base i { background: rgba(241, 245, 249, .32); }
.cx .v-wf-ph { position: absolute; top: -6px; bottom: -6px; left: calc(var(--p) * 100%); width: 1px; background: var(--fg); opacity: 0; transition: opacity .2s; }
.cx .v-row.cur .v-wf-ph { opacity: .9; }
.cx .v-wf:hover .v-wf-base i { background: rgba(241, 245, 249, .4); }
.cx .v-time { font: 400 13px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--fg2); text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
    .cx .v-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px 14px; padding: 16px 0 18px; }
    .cx .v-wf { grid-row: 2; grid-column: 1 / -1; height: 40px; }
    .cx .v-time { grid-row: 1; grid-column: 3; align-self: start; padding-top: 6px; }
    .cx .v-wf i { flex-basis: 0; }
    .cx .v-wf-base i:nth-child(2n), .cx .v-wf-on i:nth-child(2n) { display: none; }
    .cx .v-t { font-size: 21px; }
}
.cx .v-ad { margin-top: 40px; }

/* Inside these paper bands the site's navy tokens turn to ink, so whatever sits there (lines under a
   button, links) reads on paper without its own paper styles. */
.cx :is(.e-fine, .e-letter) {
    --fg: #17191e; --fg2: #5d5a52; --fg3: #4a4740; --ink: #17191e; --muted: #5d5a52;
    --a200: #2f6f64; --a300: #2f6f64; --line: rgba(23, 25, 30, .14); --line2: rgba(23, 25, 30, .14); --line3: rgba(23, 25, 30, .24);
}
/* ================= manifesto: one flat teal chapter (NY Phil), written by the scroll (Daylight) ================= */
.cx .e-manifesto { background: var(--t400); color: #0b1120; padding: 112px 0 124px; }
.cx .e-manifesto .e-rule { height: 1px; margin: 0 0 44px; background: currentColor; opacity: .5; transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms cubic-bezier(.87, 0, .13, 1); }
.cx .e-manifesto.in .e-rule { transform: none; }
.cx .e-mf-line { margin: 0; max-width: 23ch; font: 500 clamp(38px, 5.6vw, 80px)/1.02 var(--serif); letter-spacing: -.022em; color: #0b1120; text-wrap: balance; }
.cx .e-mf-line .w { opacity: var(--o, .15); }
@media (prefers-reduced-motion: reduce) {
    .cx .e-mf-line .w { opacity: 1; }
    .cx .e-manifesto .e-rule { transform: none; transition: none; }
}
@media (max-width: 700px) {
    .cx .e-manifesto { padding: 72px 0 80px; }
    .cx .e-manifesto .e-rule { margin-bottom: 28px; }
}
html .cx .story-steps.e-index { gap: 0; min-height: 0; }
html .cx .story-steps.e-index::before, html .cx .story-steps.e-index::after { display: none; }
html .cx .e-index .sstep { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 22px 0 20px; border-radius: 0; background: none; border-top: 1px solid var(--line2); }
html .cx .e-index .sstep:last-child { border-bottom: 1px solid var(--line2); }
html .cx .e-index .sstep:hover, html .cx .e-index .sstep.on { background: none; }
html .cx .e-index .sstep::after { display: none; }
html .cx .e-index .sstep .sn { width: auto; height: auto; padding-top: 14px; justify-content: flex-start; border: 0; border-radius: 0; background: none; font: 500 13px/1 var(--ui); font-variant-numeric: tabular-nums; color: rgb(241 245 249 / .38); scale: 1; transition: color .3s; }
html .cx .e-index .sstep:is(.on, .done) .sn { color: var(--fg); background: none; border: 0; scale: 1; }
html .cx .e-index .sstep h3 { position: relative; justify-self: start; padding-bottom: 8px; font: 400 clamp(30px, 3vw, 42px)/1.08 var(--serif); letter-spacing: -.012em; color: rgb(241 245 249 / .36); transition: color .3s; }
html .cx .e-index .sstep:is(.on, .done) h3 { color: var(--fg); }
html .cx .e-index .sstep.done h3 { color: rgb(241 245 249 / .72); }
html .cx .e-index .sstep h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--a400); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s cubic-bezier(.25, .1, .25, 1); }
html .cx .e-index .sstep.on h3::after, html .cx .e-index .sstep.done h3::after { transform: scaleX(1); }
html.story-scroll .cx .e-index .sstep.on h3::after { transform: scaleX(var(--story-in, 0)); transition: none; }
html .cx .e-index .sstep p { font-size: 16px; color: var(--fg3); max-width: 38ch; }
.cx #how .story-cap .lbl { font: 500 13px/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: var(--fg); }
@media (max-width: 980px) {
    html .cx .story-steps.e-index { gap: 0 14px; }
    html .cx .e-index .sstep { display: block; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: none; overflow: visible; }
    html .cx .e-index .sstep:last-child { border-bottom: 0; }
    html .cx .e-index .sstep .sn { display: block; padding: 0 0 6px; font-size: 11.5px; }
    html .cx .e-index .sstep h3 { font-size: 19px; line-height: 1.12; padding-bottom: 6px; }
    html .cx .e-index .sstep.on { border-color: var(--line2); background: none; }
}
/* ================= what composers say ================= */
.cx .e-words { padding: 120px 0 112px; }
@media (max-width: 700px) {
    .cx .e-words { padding: 80px 0 72px; }
}
/* ================= fine: the end of a score, on paper ================= */
.cx .e-fine { padding: 120px 0 96px; }
.cx .e-fine .closing-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 32px 64px; align-items: end; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.cx .e-fine .closing-in h2 { font: 500 clamp(48px, 7.4vw, 112px)/.92 var(--serif); letter-spacing: -.024em; color: var(--paper-ink); max-width: 14ch; }
.cx .e-fine .closing-in p { margin-top: 22px; max-width: 44ch; color: var(--paper-2); font-size: 17px; }
.cx .e-fine .closing-acts { gap: 10px; }
.cx .e-fine .closing-acts .btn { height: 52px; border-radius: 10px; box-shadow: none; background: transparent; border-color: var(--paper-ink); color: var(--paper-ink); }
.cx .e-fine .closing-acts .btn:hover { background: rgba(23, 25, 30, .06); }
.cx .e-fine .closing-acts .btn.pri { background: var(--paper-ink); color: var(--paper); }
.cx .e-fine .closing-acts .btn.pri:hover { background: #000; }
.cx .e-fine .closing-ms { color: var(--paper-2); }
.cx .e-fine .closing-ms:hover { color: var(--paper-ink); }
.cx .e-fine .fermata { display: none; }
/* the last system: five rules drawn left to right, a thin and a thick barline, a fermata, "Fine" */
.cx .e-end { position: relative; height: 36px; margin-top: 72px; }
.cx .e-end i { position: absolute; left: 0; right: 0; height: 1px; background: var(--paper-ink); transform-origin: 0 50%; }
.cx .e-end i:nth-child(1) { top: 0; }
.cx .e-end i:nth-child(2) { top: 9px; }
.cx .e-end i:nth-child(3) { top: 18px; }
.cx .e-end i:nth-child(4) { top: 27px; }
.cx .e-end i:nth-child(5) { top: 36px; }
.cx .e-end b { position: absolute; top: 0; height: 37px; background: var(--paper-ink); }
.cx .e-end b.thin { right: 9px; width: 1.4px; }
.cx .e-end b.thick { right: 0; width: 5px; }
.cx .e-end svg { position: absolute; right: -10px; bottom: 50px; width: 28px; height: 14px; fill: var(--paper-ink); overflow: visible; }
.cx .e-end em { position: absolute; right: 30px; bottom: 46px; font: italic 500 24px/1 var(--serif); color: var(--paper-ink); }
@media (prefers-reduced-motion: no-preference) {
    .cx .e-end:not(.in) i { transform: scaleX(0); }
    .cx .e-end:not(.in) :is(b, svg, em) { opacity: 0; }
    .cx .e-end.in i { transition: transform 700ms cubic-bezier(.87, 0, .13, 1); }
    .cx .e-end.in i:nth-child(2) { transition-delay: 60ms; }
    .cx .e-end.in i:nth-child(3) { transition-delay: 120ms; }
    .cx .e-end.in i:nth-child(4) { transition-delay: 180ms; }
    .cx .e-end.in i:nth-child(5) { transition-delay: 240ms; }
    .cx .e-end.in :is(b, svg, em) { transition: opacity .5s ease-out .8s; }
    .cx .e-end.in em { transition-delay: 1s; }
}
@media (max-width: 860px) {
    .cx .e-fine { padding: 80px 0 72px; }
    .cx .e-fine .closing-in { grid-template-columns: 1fr; padding: 0; }
    .cx .e-end { margin-top: 56px; }
}
/* ================= deckle edge: the paper's bottom is torn, not cut (Arc's 60×81 mask seam) ================= */
.cx .e-deckle {
    -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cpath d='M0 0H160V7.0 L156 5.0 L153 8.2 L148 9.0 L143 7.7 L138 4.7 L134 9.4 L130 6.6 L124 7.3 L119 7.0 L112 5.6 L105 7.9 L102 4.8 L97 8.4 L90 4.9 L86 6.2 L79 7.8 L75 6.1 L71 7.9 L68 10.6 L65 8.1 L58 10.5 L51 8.4 L47 5.0 L40 4.6 L34 4.8 L30 7.0 L24 4.4 L20 10.2 L17 6.6 L14 9.6 L11 8.5 L5 10.5 L0 7.0Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cpath d='M0 0H160V7.0 L156 5.0 L153 8.2 L148 9.0 L143 7.7 L138 4.7 L134 9.4 L130 6.6 L124 7.3 L119 7.0 L112 5.6 L105 7.9 L102 4.8 L97 8.4 L90 4.9 L86 6.2 L79 7.8 L75 6.1 L71 7.9 L68 10.6 L65 8.1 L58 10.5 L51 8.4 L47 5.0 L40 4.6 L34 4.8 L30 7.0 L24 4.4 L20 10.2 L17 6.6 L14 9.6 L11 8.5 L5 10.5 L0 7.0Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 17px), 200px 18px; mask-size: 100% calc(100% - 17px), 200px 18px;
    -webkit-mask-position: top, bottom left; mask-position: top, bottom left;
    -webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
}
/* ================= /about: the founder's message as a letter on paper ================= */
.cx .e-letter { padding: 112px 0 120px; }
.cx .e-letter-in { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 40px clamp(40px, 7vw, 120px); align-items: start; }
.cx .e-from { position: sticky; top: 104px; margin: 0; }
.cx .e-from img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; filter: grayscale(.15); }
.cx .e-from figcaption { margin-top: 12px; font: 400 13.5px/1.45 var(--ui); color: var(--paper-2); }
.cx .e-from figcaption b { display: block; font-weight: 600; color: var(--paper-ink); }
.cx .e-from figcaption a { color: var(--paper-ink); text-underline-offset: 3px; }
.cx .e-letter-body { max-width: 62ch; }
.cx .e-letter-body h2 { margin: 0 0 36px; font: 500 clamp(34px, 3.6vw, 48px)/1.05 var(--serif); letter-spacing: -.018em; color: var(--paper-ink); }
.cx .e-letter-body .e-prose p { margin: 0; font: 500 21px/1.56 var(--serif); color: var(--paper-ink); text-wrap: pretty; }
.cx .e-letter-body .e-prose p + p { margin-top: 18px; text-indent: 1.6em; }
.cx .e-letter-body .e-prose p:first-child::first-letter { float: left; margin: .06em .05em 0 0; font: 500 4.35em/.78 var(--serif); color: var(--paper-teal); }
.cx .e-sig { margin: 34px 0 0; font: italic 500 30px/1 var(--serif); color: var(--paper-ink); }
.cx .e-ps { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--paper-rule); font: 400 15px/1.55 var(--ui); color: var(--paper-2); }
.cx .e-ps a { color: var(--paper-ink); text-underline-offset: 3px; }
@media (max-width: 860px) {
    .cx .e-letter { padding: 72px 0 80px; }
    .cx .e-letter-in { grid-template-columns: 1fr; }
    .cx .e-from { position: static; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
    .cx .e-from figcaption { margin-top: 0; }
    .cx .e-letter-body .e-prose p { font-size: 19.5px; }
}


/* strips on /plans */
.cx .s-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; }
.cx .s-strip p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg3); max-width: 720px; }
.cx .s-strip p b { color: var(--fg); }
.cx .s-strip small { display: block; margin-top: 4px; font-size: 13px; color: var(--fg2); }
.cx .s-strip .btn { flex: none; }
/* /dorico, /sibelius: the next step before the manual */
.cx .s-guide-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.cx .s-guide-cta span { font-size: 14px; color: var(--fg2); }
.cx .s-guide-end { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================= titles and windows ================= */

.cx .nx-tt h1, .cx .nx-tt h2 { font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.cx .nx-tt h2 { font-size: clamp(34px, 3.9vw, 52px); line-height: 1.02; max-width: 24ch; }
.cx .nx-tt h1 { font-size: clamp(48px, 6.4vw, 88px); line-height: .94; max-width: 18ch; }
.cx .nx-tt > p { margin-top: 20px; max-width: 56ch; }
.cx .nx-tt-mark { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 500 14px/1 var(--ui); color: var(--fg2); }
.cx .nx-tt-mark b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1.25px solid currentColor; font: 600 19px/1 var(--serif); color: var(--fg); }
/* No window chrome: the plugin is the only real window. */
.cx .nx-bare.win { box-shadow: none; border-color: rgb(255 255 255 / .1); }
.cx .nx-bare .tbar { background: transparent; }
.cx .nx-bare .tbar .ttl { position: static; transform: none; font-weight: 500; }
body.cx-glow.nx-flat { background: var(--page); }
body.nx-flat .cx :is(.btn, .ctas .go, .ctas .alt, .closing-acts .btn) { box-shadow: none; }


/* ================= one heading system: rehearsal mark, roman title, grey lede ================= */
.cx .nx-tt > .nx-tt-mark { margin: 0 0 20px; }
.cx .nx-tt .u-lede, .cx .page-top.nx-tt > p:not(.nx-tt-mark) { margin: 18px 0 0; max-width: 56ch; font: 400 17px/1.55 var(--ui); color: var(--fg2); text-wrap: pretty; }
.cx .page-top.nx-tt h1 { margin: 0; }
@media (max-width: 700px) {
    .cx .nx-tt .u-lede { font-size: 15.5px; }
}
/* ================= home · the Cantai UI singing (score-session.js) ================= */
.cx .ss { position: relative; margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "page page" "tr plug" "cap plug"; grid-template-rows: auto auto 1fr; column-gap: 40px; align-items: start; }
.cx .ss-page { grid-area: page; }
.cx .ss-tr { grid-area: tr; }
.cx .ss-cap { grid-area: cap; }
.cx .ss-page { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 3px; padding: 30px 36px 76px; }
.cx .ss-head { min-height: 0; }
.cx .ss-tt { margin: 0; font: italic 500 30px/1 var(--serif); letter-spacing: -.01em; color: var(--paper-ink); }
.cx .ss-sub { margin: 8px 0 0; font: 400 13px/1.4 var(--ui); color: var(--paper-2); }
.cx .ss-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(23, 25, 30, .25) transparent; }
.cx .ss-svg { display: block; overflow: visible; max-width: none; }
.cx .ss-svg .stf { stroke: rgba(23, 25, 30, .5); stroke-width: 1; }
.cx .ss-svg .bl { stroke: var(--paper-ink); stroke-width: 1.1; }
.cx .ss-svg .lg { stroke: var(--paper-ink); stroke-width: 1.1; }
.cx .ss-svg .nh { fill: var(--paper-ink); transition: fill .12s, stroke .12s; }
.cx .ss-svg .nh.hollow { fill: none; stroke: var(--paper-ink); stroke-width: 1.7; }
.cx .ss-svg .stem { stroke: var(--paper-ink); stroke-width: 1.15; transition: stroke .12s; }
.cx .ss-svg .dt, .cx .ss-svg .acc-f { fill: var(--paper-ink); transition: fill .12s; }
.cx .ss-svg .acc { stroke: var(--paper-ink); fill: none; transition: stroke .12s; }
.cx .ss-svg .clef { font-family: 'Noto Music', 'Bravura Text', 'Apple Symbols', 'Segoe UI Symbol', serif; fill: var(--paper-ink); }
.cx .ss-svg .c8 { font: italic 600 11px var(--serif); fill: var(--paper-ink); text-anchor: middle; }
.cx .ss-svg .tup { stroke: var(--paper-ink); stroke-width: .9; fill: none; }
.cx .ss-svg .tn { font: italic 600 11.5px var(--serif); fill: var(--paper-ink); text-anchor: middle; }
.cx .ss-svg .ly { font: 500 15px var(--serif); fill: var(--paper-ink); transition: fill .12s, opacity .3s; }
.cx .ss-svg .hy, .cx .ss-svg .ext { stroke: var(--paper-ink); stroke-width: .9; transition: opacity .3s; }
.cx .ss-svg .ss-part { cursor: pointer; outline: none; }
.cx .ss-svg .ss-part .nm { font: 500 12.5px var(--ui); fill: var(--paper-ink); text-anchor: end; }
.cx .ss-svg .ss-part .vc { font: 600 11.5px var(--ui); fill: var(--paper-2); text-anchor: end; transition: fill .15s; }
.cx .ss-svg .ss-part:hover .vc, .cx .ss-svg .ss-part:focus-visible .vc, .cx .ss-svg .ss-part.on .vc { fill: var(--paper-teal); }
.cx .ss-svg .ss-part:focus-visible .nm { text-decoration: underline; }
.cx .ss-svg .lit .nh { fill: var(--paper-teal); }
.cx .ss-svg .lit .nh.hollow { fill: none; stroke: var(--paper-teal); }
.cx .ss-svg .lit .stem, .cx .ss-svg .lit .acc { stroke: var(--paper-teal); }
.cx .ss-svg .lit :is(.dt, .acc-f) { fill: var(--paper-teal); }
.cx .ss-svg .ly.lit { fill: var(--paper-teal); }
.cx .ss-svg .beam, .cx .ss-svg .flag, .cx .ss-svg .brk { fill: var(--paper-ink); transition: fill .12s; }
.cx .ss-svg .bn { font: italic 500 12px var(--serif); fill: var(--paper-2); }
.cx .ss-svg .ctx :is(.nh, .flag, .dt, .acc-f) { fill: rgba(23, 25, 30, .3); }
.cx .ss-svg .ctx :is(.stem, .acc, .lg) { stroke: rgba(23, 25, 30, .3); }
.cx .ss-svg .ly.ctx { fill: rgba(23, 25, 30, .35); }
.cx .ss-svg .lit .flag { fill: var(--paper-teal); }
.cx .ss-svg .phd { stroke: var(--paper-teal); stroke-width: 1.5; opacity: 0; transition: opacity .25s; }
/* "The written notes": nobody sings the words */
.cx .ss.ss-notes.ss-playing .ss-svg :is(.ly, .hy, .ext) { opacity: .3; }
/* The real plugin window (static/site/plugin-ui = CantAI-VST/web-ui built as is), 520×470 like Dorico's, scaled to
   its column; it overlaps the page's blank bottom margin only, never the music. Not clickable: here a voice
   change wouldn't change what you hear. */
.cx .ss-plugin { grid-area: plug; position: relative; z-index: 2; width: 430px; margin-top: -56px; border-radius: 12px; overflow: hidden; background: #0b1120; border: 1px solid rgba(241, 245, 249, .14); box-shadow: 0 24px 48px -24px rgba(4, 8, 16, .8); }
.cx .ss-bar { position: relative; display: flex; align-items: center; height: 28px; padding: 0 12px; background: #1c2534; border-bottom: 1px solid rgba(0, 0, 0, .4); }
.cx .ss-bar .lights { display: inline-flex; gap: 6px; }
.cx .ss-bar .lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cx .ss-bar .lights i:nth-child(2) { background: #febc2e; }
.cx .ss-bar .lights i:nth-child(3) { background: #28c840; }
.cx .ss-pt { position: absolute; left: 50%; transform: translateX(-50%); font: 500 12px/1 var(--ui); color: rgba(232, 237, 242, .78); white-space: nowrap; }
.cx .ss-pv { --k: .827; position: relative; width: 100%; aspect-ratio: 520 / 470; overflow: hidden; pointer-events: none; }
.cx .ss-pv iframe { position: absolute; left: 0; top: 0; width: 520px; height: 470px; border: 0; transform: scale(var(--k)); transform-origin: 0 0; background: #0b1120; }
.cx .ss-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.cx .ss-play { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(241, 245, 249, .32); background: transparent; color: var(--fg); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.cx .ss-play:hover { border-color: rgba(241, 245, 249, .6); background: rgba(241, 245, 249, .05); }
.cx .ss-play[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.cx .ss-play .i-stop, .cx .ss-play[aria-pressed="true"] .i-play { display: none; }
.cx .ss-play[aria-pressed="true"] .i-stop { display: block; }
.cx .ss.ss-wait .ss-play { opacity: .6; }
.cx .ss-play:focus-visible { outline: 2px solid var(--a400); outline-offset: 3px; }
.cx .ss-tx { display: grid; gap: 3px; margin: 0; }
.cx .ss-now { font: 600 15px/1.2 var(--ui); color: var(--fg); }
.cx .ss-time { font: 400 13px/1.2 var(--ui); font-variant-numeric: tabular-nums; color: var(--fg2); }
.cx .ss-mode { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 10px; border: 1px solid var(--line2); }
.cx .ss-mode button { height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: var(--fg2); font: 500 13.5px/1 var(--ui); cursor: pointer; transition: color .15s, background-color .15s; }
.cx .ss-mode button:hover { color: var(--fg); }
.cx .ss-mode button[aria-checked="true"] { background: rgba(241, 245, 249, .1); color: var(--fg); }
.cx .ss-cap { margin: 14px 0 0; max-width: 78ch; font: 400 13.5px/1.55 var(--ui); color: var(--fg2); }
@media (max-width: 980px) {
    .cx .ss { grid-template-columns: minmax(0, 1fr); grid-template-areas: "page" "plug" "tr" "cap"; }
    .cx .ss-page { padding-bottom: 60px; }
    .cx .ss-plugin { width: min(430px, 100%); margin: -44px 0 0 auto; }
}
@media (max-width: 760px) {
    .cx .ss { margin-top: 40px; }
    .cx .ss-page { padding: 18px 0 12px 14px; }
    .cx .ss-tt { font-size: 24px; }
    .cx .ss-page { padding: 18px 0 52px 14px; }
    .cx .ss-plugin { width: 100%; margin-top: -36px; }
    .cx .ss-mode { margin-left: 0; width: 100%; }
    .cx .ss-mode button { flex: 1; padding: 0 8px; }
}
/* ================= home · the renders, as their own section ================= */
.cx .u-listen { padding-top: 40px; }
.cx .u-listen .v-head { align-items: end; margin-bottom: 28px; }
.cx .u-listen .v-head .nx-tt h2 { max-width: 20ch; }
@media (max-width: 700px) {
    .cx .u-listen { padding-top: 64px; }
}
/* ================= home · the score in "How it works" is paper too ================= */
.cx .score-win.u-paper-score {
    --ink: #17191e; --fg: #17191e; --fg2: #5d5a52; --fg3: #4a4740; --line: rgba(23, 25, 30, .14); --line2: rgba(23, 25, 30, .14); --line3: rgba(23, 25, 30, .2);
    --a200: #2f6f64; --a300: #2f6f64; --page: #f1ece2; --pg: #f1ece2; --rgb: 47, 111, 100; --ph: #2f6f64;
    background: var(--paper); border-color: transparent; color: var(--paper-ink);
}
.cx .score-win.u-paper-score .tbar { background: transparent; border-bottom: 1px solid var(--paper-rule); color: var(--paper-2); }
.cx .score-win.u-paper-score .tbar .ttl { color: var(--paper-ink); }
.cx .score-win.u-paper-score .sw-head { border-color: var(--paper-rule); }
.cx .score-win.u-paper-score .sc .stf, .cx .score-win.u-paper-score:is([data-at="2"], [data-at="3"]) .sc .stf { stroke: rgba(23, 25, 30, .5); }
.cx .score-win.u-paper-score .sc .bl { stroke: var(--paper-ink); }
.cx .score-win.u-paper-score .sc .phd { stroke: var(--paper-teal); filter: none; stroke-width: 1.5; }
.cx .score-win.u-paper-score .pbtn { color: var(--paper-ink); border-color: rgba(23, 25, 30, .25); background: transparent; }
.cx .score-win.u-paper-score .pst { border-color: var(--paper-rule); color: var(--paper-2); }
.cx .score-win.u-paper-score .muted { color: var(--paper-2); }
.cx .score-win.u-paper-score .voice { background: rgba(23, 25, 30, .05); border-color: rgba(23, 25, 30, .14); }
/* ================= the quotes: an automatic carousel with depth =================
   Depth from Framer's wheel (the card behind at ~.75 scale and blur 1.5px), the neighbours peeking at the
   sides from Apple TV (no autoplay with reduced motion), the text coming in from Mercury (up 5px in 300ms),
   the timer from Sonner (pauses on hover, focus or a hidden tab and resumes from what was left). Side cards
   turn only 16deg: they are there to be seen, not read. */
.cx .e-words { overflow: clip; }
.cx .u-words-h { margin-bottom: 8px; }
.cx .u-deck { position: relative; }
.cx .u-stage { position: relative; height: clamp(360px, 34vw, 420px); perspective: 1400px; perspective-origin: 50% 40%; }
.cx .u-card { position: absolute; left: 50%; top: 0; width: min(720px, 76%); margin: 0; padding: 44px 48px 40px; border-radius: 6px; background: #121c2b; border: 1px solid rgba(241, 245, 249, .1);
    transform-origin: 50% 50%; transform: translateX(-50%) translateX(var(--x, 0)) translateZ(var(--z, 0)) rotateY(var(--ry, 0deg)); opacity: var(--o, 1); filter: blur(var(--b, 0px));
    transition: transform 600ms cubic-bezier(.2, 1, .4, 1), opacity 400ms cubic-bezier(.25, .1, .25, 1), filter 400ms cubic-bezier(.25, .1, .25, 1); cursor: pointer; }
.cx .u-card[data-pos="0"] { --x: 0px; --z: 0px; --ry: 0deg; --o: 1; --b: 0px; z-index: 3; cursor: default; }
.cx .u-card[data-pos="1"] { --x: 44%; --z: -240px; --ry: -16deg; --o: .45; --b: 1.5px; z-index: 2; }
.cx .u-card[data-pos="-1"] { --x: -44%; --z: -240px; --ry: 16deg; --o: .45; --b: 1.5px; z-index: 2; }
.cx .u-card[data-pos="0"].u-in :is(blockquote, figcaption) { animation: u-rise 300ms cubic-bezier(.25, .1, .25, 1) 180ms both; }
.cx .u-card[data-pos="0"].u-in figcaption { animation-delay: 260ms; }
.cx .u-qm { display: block; height: .42em; font: 500 120px/.8 var(--serif); color: var(--a400); }
.cx .u-card blockquote { margin: 18px 0 0; font: 400 clamp(22px, 2.3vw, 30px)/1.22 var(--serif); letter-spacing: -.008em; color: var(--fg); text-wrap: pretty; }
.cx .u-card figcaption { margin-top: 24px; font: 400 14px/1.45 var(--ui); color: var(--fg2); }
.cx .u-card figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--fg); }
.cx .u-deck-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.cx .u-dots { display: flex; gap: 6px; }
.cx .u-dots button { display: grid; gap: 8px; width: 64px; min-height: 44px; align-content: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.cx .u-dots button span { font: 500 12px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--fg2); transition: color .15s; }
.cx .u-dots button i { position: relative; display: block; height: 2px; background: rgba(241, 245, 249, .18); overflow: hidden; }
.cx .u-dots button i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cx .u-dots button[aria-current="true"] span { color: var(--fg); }
.cx .u-pause { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line2); background: none; color: var(--fg2); font: 500 12.5px/1 var(--ui); cursor: pointer; }
.cx .u-pause:hover { color: var(--fg); }
@media (max-width: 760px) {
    .cx .u-stage { height: 420px; perspective: 900px; }
    .cx .u-card { width: 84%; padding: 30px 24px 26px; }
    .cx .u-card[data-pos="1"] { --x: 30%; --z: -200px; }
    .cx .u-card[data-pos="-1"] { --x: -30%; --z: -200px; }
    .cx .u-qm { font-size: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .cx .u-card { transition: none; }
    .cx .u-card[data-pos="0"].u-in :is(blockquote, figcaption) { animation: none; }
}
/* ================= /plans ================= */
.cx .u-rows { margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); }
.cx .u-rows li { display: block; padding: 13px 0; border-bottom: 1px solid var(--line2); font-size: 14.5px; line-height: 1.5; color: var(--fg3); }
.cx .u-edu { display: inline-block; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--fg); font-weight: 600; text-underline-offset: 3px; }
.cx .u-edu:hover { color: var(--a300); background: none; }
.cx .s-strip.u-strip { padding: 16px 0; border: 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); border-radius: 0; }
/* ================= the closing (partials/closing.html), the same on every page ================= */
.cx .u-fine .closing-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 32px 64px; align-items: end; }
.cx .u-fine .closing-acts { display: grid; gap: 10px; }
.cx .u-fine .closing-acts .btn { height: 52px; font-size: 15px; }
.cx .u-fine .closing-ms { margin-top: 4px; font-size: 13.5px; text-align: center; text-decoration: none; }
.cx .u-fine h2 { margin: 0; }
.cx .u-fine.u-cont { padding-top: 0; }
.cx .u-fine.u-cont .closing-in { padding-top: 72px; border-top: 1px solid var(--paper-rule); }
.cx .e-letter:has(+ .u-cont) { padding-bottom: 72px; }
@media (max-width: 860px) {
    .cx .u-fine .closing-in { grid-template-columns: 1fr; }
    .cx .u-fine.u-cont .closing-in { padding-top: 48px; }
}
/* ================= /about · Richard's track in the site's own player ================= */
.cx .u-sc { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "play txt tm" "wave wave wave" "src src src"; gap: 16px 16px; align-items: center; padding: 22px 0 18px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.cx .u-sc-play { grid-area: play; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(241, 245, 249, .32); background: transparent; color: var(--fg); cursor: pointer; transition: background-color .15s, border-color .15s; }
.cx .u-sc-play:hover { border-color: rgba(241, 245, 249, .6); background: rgba(241, 245, 249, .05); }
.cx .u-sc-play[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.cx .u-sc-play .i-pause, .cx .u-sc-play[aria-pressed="true"] .i-play { display: none; }
.cx .u-sc-play[aria-pressed="true"] .i-pause { display: block; }
.cx .u-sc-play:disabled { opacity: .5; cursor: progress; }
.cx .u-sc-txt { grid-area: txt; min-width: 0; }
.cx .u-sc-t { margin: 0; font: 500 26px/1.05 var(--serif); letter-spacing: -.01em; color: var(--fg); }
.cx .u-sc-s { margin: 6px 0 0; font: 400 13.5px/1.4 var(--ui); color: var(--fg2); }
.cx .u-sc-tm { grid-area: tm; margin: 0; font: 400 13px/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--fg2); }
.cx .u-sc-tm .u-sc-cur { color: var(--fg); }
.cx .u-sc-tm .u-sc-cur::after { content: " / "; color: var(--fg2); }
.cx .u-sc-wave { grid-area: wave; position: relative; height: 56px; cursor: pointer; outline: none; }
.cx .u-sc-wave canvas { display: block; width: 100%; height: 100%; }
.cx .u-sc-wave:focus-visible { outline: 2px solid var(--a400); outline-offset: 4px; }
.cx .u-sc-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--fg); opacity: 0; transition: opacity .2s; }
.cx .u-sc.on .u-sc-ph, .cx .u-sc.started .u-sc-ph { opacity: 1; }
.cx .u-sc-src { grid-area: src; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--ui); color: var(--fg2); text-decoration: none; }
.cx .u-sc-src img { display: block; width: 100px; height: auto; }
.cx .u-sc-src:hover { color: var(--fg); }
.cx .u-sc-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: 0; top: 0; }
.cx .u-sc-hide iframe { width: 300px; height: 166px; border: 0; }
/* No widget answer, or the browser kept it silent: SoundCloud's own player takes the place. */
.cx .u-sc.u-sc-off { display: block; padding: 0; border: 0; }
.cx .u-sc.u-sc-off > :not(.u-sc-hide) { display: none; }
.cx .u-sc.u-sc-off .u-sc-hide { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; }
.cx .u-sc.u-sc-off .u-sc-hide iframe { width: 100%; height: 166px; }
/* ================= no glow under any button, the plan cards' included ================= */
.cx .plans .plan .btn, .cx .plans .plan.other .btn.pri, .cx .plans .plan .btn:hover { box-shadow: none; }
.cx .plans.swipe > .plan.is-on, .cx .plans.swipe > .plan.other.is-on { box-shadow: none; }
/* ================= "Featured in": its own band, the outlets as names you read ================= */
.cx .u-press { padding: 8px 0 120px; }
.cx .u-press-k { margin: 0 0 18px; font: 500 13px/1 var(--ui); letter-spacing: 0; color: var(--fg2); }
.cx .u-press ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.cx .u-press li + li { border-left: 1px solid var(--line2); }
.cx .u-press a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 152px; height: 100%; padding: 26px 24px 24px; color: var(--fg); text-decoration: none; transition: background-color .16s cubic-bezier(.25, .46, .45, .94); }
.cx .u-press a:hover { background: rgba(241, 245, 249, .035); }
.cx .u-press-n { font: 500 clamp(24px, 2.1vw, 31px)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.cx .u-press-t { font: 400 13px/1.3 var(--ui); color: var(--fg2); }
.cx .u-press-go { position: absolute; top: 22px; right: 20px; font: 400 15px/1 var(--ui); color: var(--fg2); transition: transform .16s cubic-bezier(.25, .46, .45, .94), color .16s; }
.cx .u-press a:hover .u-press-go { color: var(--fg); transform: translate(2px, -2px); }
.cx .u-press a:focus-visible { outline: 2px solid var(--a400); outline-offset: -2px; }
@media (max-width: 980px) {
    .cx .u-press ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx .u-press li + li { border-left: 0; }
    .cx .u-press li:nth-child(even) { border-left: 1px solid var(--line2); }
    .cx .u-press li:nth-child(n + 3) { border-top: 1px solid var(--line2); }
}
@media (max-width: 560px) {
    .cx .u-press { padding-bottom: 80px; }
    .cx .u-press ul { grid-template-columns: 1fr; }
    .cx .u-press li:nth-child(even) { border-left: 0; }
    .cx .u-press li + li { border-top: 1px solid var(--line2); }
    .cx .u-press a { min-height: 0; flex-direction: row; align-items: baseline; padding: 18px 28px 18px 0; }
    .cx .u-press-n { font-size: 22px; }
    .cx .u-press-go { top: 22px; right: 0; }
}
.cx .e-words { padding-bottom: 72px; }
@media (min-width: 1081px) {
    .cx .plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
    .cx .plans > .plan { grid-row: span 7; display: grid; grid-template-rows: subgrid; padding: 24px 26px 22px; }
    .cx .plans > .plan > .body { display: contents; }
    .cx .plans > .plan > .body > .btn { align-self: end; }
    .cx .plans > .plan > .body > .fine { align-self: end; }
}
/* ================= /audiodemos: room between the last row and the paper ================= */
.cx .u-before-fine { padding-bottom: 120px; }
@media (max-width: 700px) {
    .cx .u-before-fine { padding-bottom: 80px; }
}
@keyframes u-rise { from { opacity: 0; transform: translateY(5px); } }