/* Customize, the simple mode (and the parts advanced borrows: head, meter, generate) */
.cu { padding: 14px 20px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
/* room under the page for the dock: its exact height, measured by the shell (--dock-room) */
.cu-end { height: var(--dock-room, 130px); }

/* the head: their title, where it came from, the mode */
.cu-head { display: grid; gap: 6px; }
.cu-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cu-title { color: var(--ink); font: var(--display, 400) 36px/1.06 var(--serif); letter-spacing: var(--title-track, -0.01em); text-wrap: balance; overflow-wrap: anywhere; }
/* naming: a plain field, opened by Rename */
.cu-name { display: grid; gap: 8px; }
.cu-name-field { font: 400 26px/1.2 var(--serif); }
.cu-name-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cu-name-row .btn-primary { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.cu-caret { display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; vertical-align: -0.12em; background: var(--deep); }
.cu-from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; color: var(--muted); }
.cu-from svg { width: 16px; height: 16px; flex: none; }
.cu-from b { font-weight: 500; color: var(--soft); }
.cu-rename { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; min-height: 44px; padding: 3px 12px 3px 9px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--sheet); color: var(--deep); font-size: 12.5px; cursor: pointer; }
/* every tap target is at least 44 px, drawn that size, not only a hit area around a smaller pill */
.cu-rename svg { width: 14px; height: 14px; }

.cu-mode { display: inline-flex; padding: 2px; border-radius: var(--pill, 999px); background: var(--wash); flex: none; min-height: 44px; }
.cu-mode-on, .cu-mode-off { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 15px; border-radius: var(--pill, 999px); font-size: 14px; line-height: 1.2; }
.cu-mode-on { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgb(27 26 36 / 0.12); font-weight: 500; }
.cu-mode-off { position: relative; border: 0; background: none; color: var(--muted); cursor: pointer; }
.cu-mode-off:not([disabled]):hover { color: var(--ink); }
.cu-mode-off[disabled] { color: #bcb6a9; cursor: not-allowed; }

/* the investment meter */
.cu-meter-bar { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
.cu-seg { height: 5px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.cu-seg i { display: block; height: 100%; background: var(--free); transform-origin: left center; }
.cu-head-label { display: inline-flex; align-items: center; gap: 8px; }

/* the moment after sign-in: what they tried is kept, said in the head, in the flow */
.cu-kept { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: var(--pill, 999px); background: var(--free-soft); color: var(--free-ink); }
.cu-kept-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--free); color: #fff; }
.cu-kept-icon svg { width: 14px; height: 14px; }
.cu-kept b { font-weight: 600; }

/* sections */
.cu-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* the AI on the whole session: their words, typed or said */
.cu-wish-field { min-height: 108px; font-size: 17px; line-height: 1.45; }
.cu-wish-typing { white-space: pre-wrap; color: var(--ink); }
.cu-heard { display: inline-grid; vertical-align: -3px; margin-right: 6px; color: var(--deep); }
.cu-heard svg { width: 18px; height: 18px; }
.cu-wish-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cu-mic { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 48px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--sheet); cursor: pointer; font-size: 15px; font-weight: 500; color: var(--deep); }
.cu-mic svg { width: 20px; height: 20px; }
.cu-mic .ai-badge { margin-left: 2px; }
.cu-wish-row { flex-wrap: wrap; }
.cu-wish-row .btn { flex: 1 1 auto; padding-inline: 16px; }
/* a version not kept yet: its words came with it, and are not called saved */
/* listening: the words they have stay in sight, and say that what is said now replaces them */
.cu-listen-was { display: grid; gap: 4px; padding: 10px 12px; border-radius: calc(14px * var(--round, 1)); background: rgb(255 255 255 / 0.07); }
.cu-listen-was .label { color: #b9cbc1; }
.cu-listen-was q { font: 400 17px/1.35 var(--serif); color: var(--paper); overflow-wrap: anywhere; }
.cu-listen-was small { font-size: 12.5px; color: #cfdcd4; }
.cu-ai-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cu-ideas { display: grid; gap: 8px; }
/* two by two on a phone, so the first card fits above the dock */
.cu-ideas-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cu-idea { min-height: 44px; padding: 6px 12px; border: 1px dashed #c4bba9; border-radius: calc(14px * var(--round, 1)); background: none; color: var(--soft); font-size: 13.5px; line-height: 1.25; text-align: left; cursor: pointer; }
@container app (min-width: 700px) {
  .cu-ideas-list { display: flex; flex-wrap: wrap; }
  .cu-idea { padding: 8px 14px; border-radius: var(--pill, 999px); font-size: 14px; }
}
.cu-idea:hover { border-style: solid; color: var(--ink); background: var(--sheet); }

.cu-listen { display: grid; gap: 14px; padding: 18px; border-radius: calc(20px * var(--round, 1)); background: var(--deep); color: var(--paper); }
.cu-listen-top { display: flex; align-items: center; gap: 8px; }
.cu-listen-top .label { color: #cfdcd4; }
.cu-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.cu-listen-wave { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.cu-listen-wave i { flex: none; width: 4px; height: 100%; border-radius: 3px; background: #9fd0b8; transform-origin: center; }
.cu-listen-say { font: 400 19px/1.3 var(--serif); color: #e7efe9; }
.cu-listen .btn-quiet { color: #cfdcd4; }
.cu-listen .btn-primary { background: var(--paper); color: var(--deep); }


/* 3 voice */
.cu-voices { display: grid; gap: 8px; }
.cu-voice { position: relative; display: flex; align-items: center; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.cu-voice.is-on { border-color: var(--deep); box-shadow: 0 0 0 1px var(--deep); }
.cu-voice-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0 12px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.cu-voice-mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wash); color: var(--deep); font: var(--display, 400) 21px/1 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-voice.is-on .cu-voice-mono { background: var(--deep); color: var(--paper); }
.cu-voice-text { display: grid; gap: 1px; min-width: 0; }
.cu-voice-text b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font: var(--display, 400) 21px/1.15 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-voice-text b small { white-space: nowrap; font: 400 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cu-voice-text > span { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.cu-hear { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 0 8px; padding: 7px 11px 7px 8px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--paper); color: var(--deep); font: 400 11.5px/1 var(--mono); cursor: pointer; }
.cu-hear > svg:first-child { width: 14px; height: 14px; }
.cu-wave { display: block; fill: currentColor; }
.cu-hear .cu-wave { width: 30px; height: 14px; opacity: 0.55; }


/* 5 length */
.cu-lengths { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cu-len { display: grid; justify-items: center; gap: 0; padding: 10px 4px 9px; border: 1px solid var(--line); border-radius: calc(16px * var(--round, 1)); background: var(--sheet); cursor: pointer; }
.cu-len[disabled] { opacity: 0.45; cursor: not-allowed; }
.cu-len b { font: var(--display, 400) 28px/1 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-len span { font-size: 12px; color: var(--muted); }
.cu-len small { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); width: 86%; text-align: center; font: 400 10px/1.2 var(--mono); color: var(--ai-ink); }
.cu-len.is-on { background: var(--deep); border-color: var(--deep); color: var(--paper); }
.cu-len.is-on span, .cu-len.is-on small { color: #c5d3cb; border-color: #3d5a4e; }
.cu-len.is-on small { color: #b9d4e4; }

/* the blueprint */
.cu-blue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: calc(22px * var(--round, 1)); background: var(--sheet); border: 1px solid var(--line); }
.cu-blue-head { display: flex; justify-content: space-between; gap: 12px; }
.cu-blue-head > .label:last-child { white-space: nowrap; }
.cu-blue-title { font: var(--display, 400) 25px/1.1 var(--serif); letter-spacing: var(--title-track, normal); text-wrap: balance; }
.cu-blue-fig { margin: 0; display: grid; gap: 4px; }
.cu-axis-cap { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cu-blue-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; }
.cu-axis-y { display: flex; flex-direction: column; justify-content: space-between; height: 92px; padding: 4px 0; font: 400 10px/1 var(--mono); color: var(--muted); text-align: right; }
.cu-axis-x { display: flex; justify-content: space-between; margin-top: 4px; font: 400 10px/1 var(--mono); color: var(--muted); }
.cu-blue-curve { display: grid; min-width: 0; }
/* the svg and the pin on it share one box, exactly the curve's height: the pin's place is a share of it */
.cu-blue-svg { position: relative; height: 92px; }
.cu-blue-svg .curve { display: block; height: 92px; }
.cu-blue-curve .curve-labels span { font-size: 9.5px; }
.cu-pin { position: absolute; width: 0; height: 0; }
.cu-pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px var(--deep); }
.cu-pin.is-woven i { background: var(--ai); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px var(--ai); }
.cu-pin.is-woven em { background: var(--ai-ink); }
.cu-pin em { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 3px 8px; border-radius: var(--pill, 999px); background: var(--deep); color: var(--paper); font: normal 400 10.5px/1.2 var(--mono); white-space: nowrap; }
.cu-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line); }
.cu-facts div { min-width: 0; }
.cu-facts dt { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cu-facts dd { margin: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-facts .cu-facts-wide { grid-column: 1 / -1; }
.cu-facts .cu-facts-wide dd { white-space: normal; }
.cu-blue-wish { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.cu-blue-wish q { font: italic 400 21px/1.3 var(--serif); color: var(--deep); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.cu-blue-wish.is-empty p { padding: 10px 12px; border: 1px dashed #c4bba9; border-radius: calc(12px * var(--round, 1)); font-size: 14px; color: var(--muted); }
.cu-blue-lines { display: grid; gap: 6px; }
.cu-blue-line { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; font: 400 17px/1.3 var(--serif); }
.cu-blue-tag { text-align: right; font: 400 10.5px/1.9 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--deep); }
.cu-blue-wish.is-woven .label { color: var(--ai-ink); }
.cu-yours { display: grid; gap: 8px; padding: 4px 0 2px 14px; border-left: 2px solid var(--ai); }
.cu-yours-line { font: 400 19px/1.3 var(--serif); color: var(--ai-ink); text-wrap: pretty; }
.cu-blue-ai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 6px; padding: 12px; border-radius: calc(14px * var(--round, 1)); background: var(--ai-soft); font-size: 13.5px; line-height: 1.4; color: var(--ai-ink); }
.cu-blue-line.is-mine > span:last-child { color: var(--free-ink); }
.cu-blue-free { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* the ask: the dock on a phone, kept low so the editor above it stays in reach */
.cu-dock { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 8px 10px 0 16px; border-radius: calc(22px * var(--round, 1)); background: var(--deep); color: var(--paper); box-shadow: 0 16px 40px rgb(27 26 36 / 0.3), 0 10px 0 10px var(--paper); }
.cu-dock-k { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #b9cbc1; }
.cu-dock-meter { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: #b9cbc1; }
.cu-dock-meter .cu-meter-bar { flex: 1; gap: 3px; }
.cu-dock-meter > span { white-space: nowrap; }
.cu-dock-meter .cu-meter-bar { min-width: 60px; }
.cu-dock .cu-seg, .cu-gen .cu-seg { height: 4px; background: #3a574b; }
.cu-dock .cu-seg i, .cu-gen .cu-seg i { background: #9fd0b8; }
.cu-dock-see { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin: 0 -10px 0 -16px; padding: 0 16px; border: 0; border-top: 1px solid #3a574b; background: none; color: #cfdcd4; font: 400 12.5px/1.25 var(--sans); text-align: left; cursor: pointer; }
.cu-dock-see span:first-child { color: var(--paper); text-decoration: underline; text-underline-offset: 0.22em; }
.cu-dock-see span:last-child { text-align: right; }
.cu-dock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
/* while the first card is in view the dock is one slim row: the price and Generate (the shell marks the layer) */
.layer[data-slim] .cu-dock-see, .layer[data-slim] .cu-dock-price small { display: none; }
.layer[data-slim] .cu-dock-row { padding-bottom: 8px; }
.cu-dock-price { display: grid; gap: 2px; min-width: 0; }
.cu-dock-price small { font-size: 11.5px; line-height: 1.3; color: #cfdcd4; }
.cu-dock-studio { justify-content: space-between; min-height: 15px; }
.cu-dock-studio span:last-child { color: #9fd0b8; }
.cu-dock .btn { flex: none; padding-inline: 18px; }
.cu-dock .btn-primary, .cu-gen .btn-primary { background: none; border: 1px solid #5d7a6d; color: var(--paper); box-shadow: none; }
.cu-dock .btn-primary:hover, .cu-gen .btn-primary:hover { background: rgb(255 255 255 / 0.06); }

/* the blueprint as a sheet on a phone */
.cu-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; color: var(--ink); font: 400 16px/1.55 var(--sans); }
.cu-sheet p, .cu-sheet h3, .cu-sheet h2 { margin: 0; }
.cu-sheet-title { font: var(--display, 400) 28px/1.1 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-sheet .cu-blue { padding: 0; border: 0; background: none; }
.cu-sheet .cu-pin i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--deep); }
.cu-sheet-gen { position: sticky; bottom: -28px; display: grid; gap: 8px; margin: 0 -20px -28px; padding: 14px 20px 22px; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -12px 24px rgb(244 239 231 / 0.9); }
.cu-sheet-gen .btn-primary, .cu-sheet-gen .btn-go { width: 100%; }
.cu-sheet-gen .btn-quiet { justify-self: center; }

/* the ask beside the editor on a desktop */
.cu-gen { display: grid; gap: 12px; padding: 18px; border-radius: calc(22px * var(--round, 1)); background: var(--deep); color: var(--paper); }
.cu-gen-free { font-size: 13.5px; color: #cfdcd4; }
.cu-gen .btn { width: 100%; }
.cu-gen-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #3a574b; font: var(--display, 400) 19px/1.2 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-gen-fine { font-size: 12px; color: #9fb5aa; text-align: center; }
/* ---- the script: one text to read, every phrase a chip to play with ---- */
.cx-script { position: relative; display: grid; gap: 30px; margin-top: 4px; }
.cx-block { display: grid; gap: 12px; min-width: 0; }
/* a section is a thin divider: its kind in its colour, its name, how deep, its pulse, its own voice */
.cx-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.cx-sec-main { display: flex; flex: 1 1 12em; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; min-height: 40px; padding: 6px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.cx-sec-kind { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.cx-sec-kind i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.cx-sec-name { font: 500 17px/1.25 var(--serif); }
.cx-sec-facts { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.cx-sec-facts > span + span::before { content: "·"; margin: 0 8px; color: var(--line); }
.cx-sec-voice { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); }
.cx-sec-here { color: var(--free-ink); }
.cx-sec-main:hover .cx-sec-name, .cx-sec.is-open .cx-sec-name { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 0.25em; }
.cx-adv { min-height: 32px; padding: 2px 0; border: 0; background: none; color: var(--muted); font: 400 11.5px/1.3 var(--mono); text-decoration: underline dotted; text-underline-offset: 0.3em; cursor: pointer; }
.cx-adv:hover { color: var(--ink); }
.cx-sec-tools { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: calc(16px * var(--round, 1)); background: var(--wash); box-shadow: inset 3px 0 0 var(--c); }
.cx-said { font-size: 14px; line-height: 1.5; color: var(--soft); }
.cx-said b { font-weight: 500; color: var(--ink); }
.cx-said q { font-style: italic; color: var(--ink); }
.cx-len { font: 400 12px/1 var(--mono); color: var(--muted); }
.cx-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cx-step b { min-width: 64px; font: 500 16px/1.2 var(--serif); text-align: center; }
.cx-step small { flex-basis: 100%; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cx-stepper { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); color: var(--ink); font: 400 20px/1 var(--sans); cursor: pointer; }
.cx-stepper:disabled { opacity: 0.35; cursor: default; }
.cx-sec-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the words: plain flowing text at rest; a phrase shows itself as a chip on hover and when selected */
.cx-par { font: 400 21px/1.75 var(--serif); color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.cx-line.is-mine { color: var(--free-ink); }
.cx-line.is-yours { color: var(--ai-ink); }
/* a chip wrapped over two rows is one: its tint and outline run open across the break */
.cx-chip { border-radius: 4px; box-decoration-break: slice; -webkit-box-decoration-break: slice; cursor: grab; }
.cx-chip:not(.is-on) { user-select: none; -webkit-user-select: none; }
.cx-chip:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 9%, transparent); }
.cx-chip.is-on { background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 7%, transparent), 0 0 0 4.5px color-mix(in srgb, var(--ink) 75%, transparent); cursor: text; }
/* in a chip selected, words are selected as in any text */
.screen-box .cx-chip.is-on, .screen-box .cx-chip.is-on [data-act] { -webkit-user-select: text; user-select: text; }
.cx-chip.is-grab { opacity: 0.4; }
.cx-chip.is-over { background: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent), 0 0 0 5px var(--ink); }
/* loudness is the size of the letters, at full contrast */
.cx-chip.is-soft { font-size: 0.82em; }
.cx-chip.is-loud { font-size: 1.24em; font-weight: 650; }
.cx-w { border-radius: 3px; }
.cx-chip.is-on .cx-w { cursor: pointer; }
.cx-w.is-sel, .cx-cut.is-sel { background: color-mix(in srgb, var(--ink) 26%, transparent); }
.cx-dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--v); vertical-align: 0.08em; }
/* between two words of a chip: a click splits it, the place shows itself on hover */
.cx-cut { position: relative; cursor: col-resize; }
.cx-cut:hover::after { content: ""; position: absolute; left: 50%; top: 0.1em; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
/* between two chips: a click types there, a chip held lands there. A space that ends a row takes no
   room, so each place has a reach of its own, wider while a chip is held */
.cx-gap { position: relative; cursor: text; }
.cx-gap::before { content: ""; position: absolute; top: -0.2em; bottom: -0.2em; left: -5px; right: -5px; }
.cx.is-dragging .cx-gap::before { left: -16px; right: -16px; }
.cx-gap:hover::after { content: ""; position: absolute; left: 50%; top: 0.15em; bottom: 0; width: 1.5px; background: var(--muted); }
.cx-gap.is-drop::after { content: ""; position: absolute; left: 50%; top: 0.2em; bottom: 0.1em; width: 1.5px; margin-left: -0.75px; background: var(--muted); }
.cx-gap.is-over::after { width: 4px; margin-left: -2px; top: 0; bottom: -0.1em; border-radius: 2px; background: var(--ink); }
.cx.is-dragging, .cx.is-dragging * { cursor: grabbing; }
.cx-type { min-width: 6ch; max-width: 100%; padding: 0 4px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font: inherit; line-height: 1.3; outline: none; field-sizing: content; }
/* the chip held, where the pointer is: drawn by the shell, input only */
.cx-ghost { position: absolute; z-index: 60; max-width: 320px; padding: 3px 10px; border-radius: 8px; background: var(--ink); color: var(--paper); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }

/* how it is said: a bracket under exactly its words, row by row (the mark's background, cut where the
   row breaks: the ends only where the stretch starts and ends), the direction under its start. A
   bracket around another lies under it */
.cx-mark { --low: calc(0.14em + var(--deep, 0) * 5px); padding-bottom: var(--low); box-decoration-break: slice; -webkit-box-decoration-break: slice;
  background: linear-gradient(var(--ember), var(--ember)) left bottom / 100% 1.5px no-repeat, linear-gradient(var(--ember), var(--ember)) left bottom / 1.5px 6px no-repeat, linear-gradient(var(--ember), var(--ember)) right bottom / 1.5px 6px no-repeat; }
/* the place a direction hangs from: from the top of its first word down past what it says, so only a
   row a direction hangs under grows to make room for it; a row with none keeps the text's own spacing */
.cx-at { --room: calc(var(--low) + 5px + 17px); position: relative; display: inline; line-height: 1.3; vertical-align: calc(-1 * var(--room)); }
.cx-note { position: absolute; left: 0; top: calc(100% - 17px); z-index: 2; display: flex; align-items: baseline; gap: 6px; max-width: 18em; font: 400 12px/1.35 var(--sans); color: var(--ember-ink); white-space: nowrap; }
.cx-note-text { overflow: hidden; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; cursor: pointer; }
.cx-note.is-long:not(.is-open) .cx-note-text::before { content: "▸ "; }
.cx-note.is-open { z-index: 5; width: 22em; max-width: 80vw; padding: 6px 10px 8px; border: 1px solid var(--ember); border-radius: 10px; background: var(--sheet); white-space: normal; box-shadow: var(--lift); }
.cx-more { flex: none; padding: 0; border: 0; background: none; color: var(--muted); font: 400 11px/1.3 var(--mono); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
/* a voice: its dot and its name where it takes over; where the part's own voice comes back, its dot alone, quiet */
.cx-who { margin-right: 0.3em; white-space: nowrap; }
.cx-who.is-back .cx-dot { width: 0.36em; height: 0.36em; opacity: 0.6; vertical-align: 0.14em; }
.cx-who-name { margin-left: 0.3em; font: 500 0.55em/1 var(--sans); color: var(--v); vertical-align: 0.2em; white-space: nowrap; }
/* a line said at the same time on a voice of its own: read in its colour, changed in Advanced */
.cx-other { display: block; margin: 4px 0 8px; padding-left: 12px; border-left: 3px solid var(--v); font-size: 0.85em; line-height: 1.6; color: var(--soft); }
.cx-other > .cx-dot { display: none; }
.cx-other .cx-note { font-size: 11.5px; }
.cx-other .cx-adv { display: block; min-height: 0; margin-top: 2px; }
.cx-rest { font-style: italic; color: var(--soft); }
.cx-end { margin-left: 8px; padding: 1px 10px; border: 1px dashed var(--line); border-radius: var(--pill, 999px); background: none; color: var(--muted); font: 400 13px/1.7 var(--sans); vertical-align: middle; white-space: nowrap; cursor: pointer; }
.cx-end:hover { border-style: solid; color: var(--ink); }
.cx-end.is-drop { padding: 4px 18px; border-color: var(--soft); color: var(--soft); }
.cx-end.is-over { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }

/* what can be done with the words selected: one small bar floating at the selection */
.cx-tools { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--panel-line, var(--line)); border-radius: calc(14px * var(--round, 1)); background: var(--panel, var(--sheet)); color: var(--ink); font: 400 14px/1.3 var(--sans); box-shadow: 0 14px 34px rgb(0 0 0 / 0.38); }
.cx-par > .cx-tools { width: min(560px, 100%); margin: 6px 0 14px; }
.cx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cx-row > .cx-pal { flex: 1; }
.cx-pal, .cx-seg, .cx-voices { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-row-2 { gap: 6px 14px; }
.cx-pick, .cx-lv, .cx-voice, .cx-mini { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--paper); color: var(--soft); font: 400 13px/1.2 var(--sans); cursor: pointer; }
.cx-pick:hover, .cx-lv:hover, .cx-voice:hover, .cx-mini:hover { border-color: var(--soft); color: var(--ink); }
.cx-pick.is-on { border-color: var(--ember); background: var(--ember-soft); color: var(--ember-ink); }
.cx-pick.is-own { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-seg { gap: 0; }
.cx-lv { border-radius: 0; margin-left: -1px; }
.cx-lv:first-child { border-radius: var(--pill, 999px) 0 0 var(--pill, 999px); margin-left: 0; }
.cx-lv:last-child { border-radius: 0 var(--pill, 999px) var(--pill, 999px) 0; }
.cx-lv.is-on { position: relative; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cx-loud-soft { font-size: 11.5px; }
.cx-loud-loud { font-size: 15px; font-weight: 650; }
.cx-voice { padding-inline: 8px 10px; }
.cx-voice.is-on { border-color: var(--v); background: color-mix(in srgb, var(--v) 22%, var(--paper)); color: var(--ink); }
.cx-own { width: 100%; min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 14px/1.3 var(--sans); }
.cx-own::placeholder { color: var(--muted); }
.cx-tools .limit { margin-top: -4px; }
.cx-mini { color: var(--ink); }
.cx-arrow { min-width: 34px; justify-content: center; padding: 2px 8px; font-size: 15px; }
.cx-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: auto; border: 0; border-radius: 50%; background: none; color: var(--soft); font: 400 20px/1 var(--sans); cursor: pointer; }
.cx-x:hover { background: var(--wash); color: var(--ink); }
.cx-fine { margin-left: auto; }
.cx-tools .sv-why { margin: 0; }
/* on a phone the bar is the dock, over the bottom of the screen in reach of the thumb */
.layer > .cx-dock { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 30; padding: 10px 10px 12px; pointer-events: auto; }
.cx-dock .cx-pick, .cx-dock .cx-lv, .cx-dock .cx-voice, .cx-dock .cx-mini { min-height: 34px; }
@container app (max-width: 699px) {
  .cx-par { font-size: 19px; line-height: 1.7; }
  .cx-sec-name { font-size: 16px; }
}


@container app (min-width: 700px) {
  /* the editor breathes: wide margins, a column for the words, the plan and Generate beside it */
  .cu-desk { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 72px; align-items: start; max-width: 1220px; padding: 40px 40px 96px; }
  .cu-main { display: grid; gap: 80px; min-width: 0; }
  .cu-side { position: sticky; top: 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
  .cu-side > * { min-width: 0; }
  .cu-gen .cu-dock-meter { flex-wrap: wrap; }
  .cu-gen .cu-dock-meter > span { white-space: normal; }
  .cu-title { font-size: 54px; }
  .cu-lengths { gap: 10px; }
  .cu-blue-side { gap: 10px; padding: 16px; }
  .cu-blue-side .cu-blue-title { display: none; }
  .cu-blue-side .cu-blue-svg, .cu-blue-side .cu-blue-svg .curve { height: 64px; }
  .cu-blue-side .curve, .cu-blue-side .cu-axis-y { height: 64px; }
  .cu-blue-side .cu-facts { padding: 8px 0; gap: 6px 14px; }
  .cu-blue-side .cu-blue-wish q { font-size: 17px; }
  .cu-blue-side .cu-yours { gap: 5px; }
  .cu-blue-side .cu-yours-line { font-size: 16.5px; line-height: 1.25; }
  .cu-blue-side .cu-blue-free { font-size: 12.5px; }
  .cu-gen { gap: 8px; padding: 14px 16px 12px; }
  .cu-gen-head { padding-top: 10px; }
  .cu-gen-free { font-size: 13px; }
  .cu-blue-side .cu-blue-wish.is-empty p { padding: 8px 12px; font-size: 13px; }
}

/* how fast, which language, the pulse, the ending: by hand, free */
.cu-opt { display: grid; gap: 8px; }
.cu-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-opt-chips .chip { min-height: 44px; padding: 7px 13px; }
.cu-opt-note { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.cu-hear.is-on { background: linear-gradient(90deg, var(--sheet) calc(var(--heard) * 100%), var(--paper) 0); border-color: var(--deep); }
.cu-blue-open { min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; background: none; color: var(--deep); font: 400 13px/1 var(--sans); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }
.cu-blue-head { align-items: center; }
/* the name and its Rename on one line: the wish's own buttons stay above the dock on the first screen */
.cu-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cu-title-row .cu-rename { flex: none; margin: 2px 0 0; }
.cu-wish-row { flex-wrap: nowrap; }
.cu-wish-row .btn { flex: 1 1 auto; min-width: 0; padding-inline: 14px; }

/* Say it, in words, on every width: the label over its price, so the row keeps room for Use these words */
.cu-mic-t { display: grid; justify-items: start; gap: 1px; line-height: 1.15; }
.cu-mic .cu-mic-t .ai-badge { margin-left: -2px; padding: 0 6px; font-size: 10.5px; }
.cu-blue-open { white-space: nowrap; flex: none; }
/* in the sheet its own title names the plan */
.cu-sheet .cu-blue-head { display: none; }

.cu-hear { min-height: 44px; }

/* a new version beside the ones they have */
.cu-others { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cu-others-link { min-width: 56px; min-height: 44px; margin: -12px 0; padding: 0 6px; vertical-align: baseline; border: 0; background: none; color: var(--deep); font: inherit; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }

/* the guide: two short questions, as a chat */
.cu-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cu-guide p { margin: 0; }
.cu-guide-head { display: flex; align-items: center; gap: 10px; }
.cu-guide-head .label { margin-left: auto; }
.cu-guide-who { display: inline-flex; align-items: center; gap: 8px; font: var(--display, 400) 22px/1.1 var(--serif); letter-spacing: var(--title-track, normal); }
.cu-guide-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ai); box-shadow: 0 0 0 4px var(--ai-soft); }
.cu-guide-close { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: none; color: var(--soft); font: 400 26px/1 var(--sans); cursor: pointer; }
.cu-guide-close:hover { background: var(--wash); color: var(--ink); }
.cu-guide-lead { font-size: 14px; line-height: 1.45; color: var(--muted); }
.cu-guide-thread { display: grid; gap: 8px; }
.cu-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 86%; }
.cu-msg p { padding: 9px 14px; border-radius: calc(18px * var(--round, 1)); font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
.cu-msg-you { justify-self: end; }
.cu-msg-you p { border-bottom-right-radius: 6px; background: var(--deep); color: var(--paper); }
.cu-msg-guide { justify-self: start; }
.cu-msg-guide .cu-guide-dot { margin-top: 14px; }
.cu-msg-guide p { border-bottom-left-radius: 6px; background: var(--ai-soft); color: var(--ai-ink); font: 400 18px/1.3 var(--serif); }
.cu-guide-answer { display: grid; gap: 8px; padding-top: 4px; }
.cu-guide-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-guide-starter { min-height: 44px; padding: 8px 14px; border: 1px dashed #c4bba9; border-radius: var(--pill, 999px); background: none; color: var(--soft); font: 400 14.5px/1.2 var(--sans); cursor: pointer; }
.cu-guide-starter:hover { border-style: solid; background: var(--sheet); color: var(--ink); }
.cu-guide-label { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cu-guide-row { display: flex; gap: 8px; }
.cu-guide-field { flex: 1; min-width: 0; }
.cu-guide-row .btn { flex: none; }
.cu-guide-foot { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.cu-guide-foot .btn-quiet { justify-self: start; min-height: 44px; padding-inline: 0; }
@container app (max-width: 699px) {
  .cu-wish-field { min-height: 80px; }
  /* the AI step and its price on one row, so the first card fits above the dock */
}
.cu-others.cu-kept { color: var(--free-ink); }
/* the last question says what its answer starts; skip says it too, with its price, and Not now spends nothing */
.cu-guide-then { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--soft); }
.cu-guide-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cu-guide-skip .btn-quiet { padding-inline: 0; }
.cu-guide-later { min-height: 44px; margin-left: auto; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }

/* ---- the parts as cards: the build view of a session the AI proposed (start) ---- */
.sv-block { position: relative; display: grid; gap: 16px; padding: 24px 26px 16px 30px; border: 1px solid var(--line); border-radius: calc(22px * var(--round, 1)); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, var(--sheet)), var(--sheet) 132px); box-shadow: inset 4px 0 0 var(--c); }
.sv-block.is-focus { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.sv-block-head { display: grid; gap: 6px; }
.sv-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-kind > i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.sv-kind .label { color: color-mix(in srgb, var(--c) 40%, var(--ink)); }
.sv-name { font: var(--display, 400) 30px/1.08 var(--serif); letter-spacing: var(--title-track, normal); }
.sv-said { font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.sv-said b { font-weight: 500; color: var(--ink); }
.sv-said q { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink); }
/* a block that refers to an image or an anchor no block before it set up: said plainly, never refused */
.sv-refs { margin-top: 8px; padding: 9px 12px; border-radius: calc(12px * var(--round, 1)); background: var(--go-soft); color: var(--go-ink); font-size: 14px; line-height: 1.45; }
.sv-left { font-size: 13.5px; line-height: 1.45; color: var(--signal-text); }
/* every line says it can be changed, quietly and always: a phone has no hover */
/* every line keeps room above each row for a direction's name, so a line with a band reads like the others */
.sv-write { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-radius: calc(16px * var(--round, 1)); background: var(--free-soft); }
.sv-write .field { background: var(--sheet); }
.sv-write .limit { grid-column: 1 / -1; }
.sv-write .btn { min-height: 44px; padding: 8px 16px 8px 12px; font-size: 15px; }
@container app (max-width: 699px) {
  /* a narrow screen stacks the field above its button, so the words are never cut */
  .sv-write { grid-template-columns: minmax(0, 1fr); }
  .sv-write .btn { justify-self: start; }
}
.sv-foot-btn { min-height: 40px; padding: 6px 15px; border: 1px dashed var(--line); border-radius: var(--pill, 999px); background: none; color: var(--soft); font: 400 14px/1.2 var(--sans); cursor: pointer; }
.sv-foot-btn:hover { border-style: solid; background: var(--sheet); color: var(--ink); }
.sv-foot-btn.is-on { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.sv-sum { font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* a spot between two blocks: the palette, the AI for this spot, a block by hand */
.sv-spot { display: grid; gap: 22px; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: calc(24px * var(--round, 1)); background: var(--wash); }
.sv-spot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sv-spot-title { margin-top: 2px; font: var(--display, 400) 26px/1.1 var(--serif); letter-spacing: var(--title-track, normal); }
.sv-spot-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: none; color: var(--soft); font: 400 26px/1 var(--sans); cursor: pointer; }
.sv-spot-x:hover { background: var(--sheet); color: var(--ink); }
.sv-pal { display: grid; gap: 12px; padding: 18px 20px 8px; border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.sv-pal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-pal-sub { font-size: 14px; line-height: 1.45; color: var(--soft); }
.sv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 14px 4px 11px; border: 1px solid var(--line); border-radius: var(--pill, 999px); background: var(--paper); color: var(--soft); font-size: 14px; cursor: pointer; }
.sv-tab i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.sv-tab.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* the palette of good stuff, in both views: a family, its styles with why each works, its blocks */
.pk { display: grid; gap: 6px; }
.pk-fam { margin: 2px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pk-style { display: grid; padding: 14px 0 4px 16px; border-left: 3px solid var(--c); }
.pk-style + .pk-style { margin-top: 10px; }
.pk-style-head { display: grid; gap: 3px; padding-bottom: 6px; }
.pk-style-name { font: 400 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.pk-note { font-size: 14px; line-height: 1.45; color: var(--ink); }
.pk-why { font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.pk-why b { margin-right: 4px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pk-kit { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); }
.pk-kit > * { grid-column: 1; }
.pk-kit .btn { grid-column: 2; grid-row: 1 / 4; align-self: center; min-height: 44px; padding: 8px 20px; font-size: 15px; }
.pk-name { font: var(--display, 400) 21px/1.15 var(--serif); letter-spacing: var(--title-track, normal); }
.pk-kit-why { font-size: 14px; line-height: 1.45; color: var(--soft); }
.pk-kit small { font: 400 11px/1.4 var(--mono); color: var(--muted); }
.sv-why { font-size: 13.5px; line-height: 1.4; color: var(--signal-text); }
.sv-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sv-ask, .sv-hand { display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: calc(18px * var(--round, 1)); }
.sv-ask { background: var(--ai-soft); }
.sv-hand { background: var(--free-soft); }
.sv-ask .field, .sv-hand .field { background: var(--sheet); }
.sv-ask > .btn, .sv-hand > .btn { justify-self: start; }
.sv-ask > p, .sv-hand > p { font-size: 14px; line-height: 1.45; color: var(--soft); }
.sv-way-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.sv-way-head b { font: var(--display, 400) 21px/1.2 var(--serif); letter-spacing: var(--title-track, normal); }
@container app (min-width: 700px) {
  .sv-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the offer of the advanced view, once, after a first change: in the flow, never over the work */
.sv-deeper { display: grid; gap: 10px; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: calc(22px * var(--round, 1)); background: linear-gradient(160deg, color-mix(in srgb, var(--rose) 14%, var(--sheet)), var(--sheet) 70%); }
.sv-deeper-top { display: flex; align-items: center; gap: 14px; }
.sv-deeper-top b { font: var(--display, 400) 22px/1.15 var(--serif); letter-spacing: var(--title-track, normal); }
.sv-deeper-art { display: grid; align-content: center; gap: 4px; flex: none; width: 64px; height: 44px; padding: 0 8px; border-radius: calc(10px * var(--round, 1)); background: var(--night); }
.sv-art-lane { position: relative; height: 5px; }
.sv-art-lane i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--c); }
.sv-art-lane i.is-bed { background: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.sv-art-lane i.is-cue { top: 0.5px; bottom: auto; width: 4px; height: 4px; border-radius: 1px; transform: rotate(45deg); }
.sv-deeper-say { font-size: 14px; line-height: 1.5; color: var(--soft); }
.sv-deeper-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sv-deeper-row .btn { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.sv-deeper-later { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 400 14px/1 var(--sans); text-decoration: underline; text-underline-offset: 0.22em; cursor: pointer; }

/* the short plan beside the editor: the depth over the blocks in their colours */
.sv-plan { display: grid; gap: 0; margin: 0; }
.sv-plan-curve { height: 76px; }
.sv-strip { display: flex; gap: 2px; height: 7px; margin: 8px 1.33% 0; }
.sv-strip i { min-width: 2px; border-radius: 2px; background: var(--c); }
.sv-plan .cu-axis-x { margin-top: 8px; }
.sv-plan-sound { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }

/* the background: the sound under the voice, and the pulse in it */
.cu-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cu-tracks .chip { padding: 10px 13px; }
.cu-tracks .chip small { line-height: 1.3; margin-top: 1px; }
.cu-pulse { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.cu-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.cu-switch-knob { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--pill, 999px); background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.cu-switch-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sheet); box-shadow: 0 1px 2px rgb(27 26 36 / 0.25); }
.cu-pulse.is-on .cu-switch-knob { background: var(--free); box-shadow: none; }
.cu-pulse.is-on .cu-switch-knob::after { left: 21px; }
.cu-switch-text { display: grid; gap: 1px; }
.cu-switch-text b { font-weight: 500; font-size: 15.5px; }
.cu-switch-text small { font: 400 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cu-pulse.is-on .cu-switch-text small { color: var(--free-ink); }
@container app (min-width: 700px) {
  .cu-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* a wide screen: the script and its dividers share one column that grows with the screen, a generous
   measure, the plan and Generate right beside it */
@container app (min-width: 1500px) {
  .cu-desk { grid-template-columns: minmax(0, clamp(760px, 54cqw, 1160px)) minmax(380px, 440px); justify-content: center; gap: 64px; max-width: none; padding: 40px 56px 96px; }
  .cx-par { font-size: 23px; }
  .cu-blue-side .cu-blue-svg, .cu-blue-side .cu-blue-svg .curve, .cu-blue-side .curve, .cu-blue-side .cu-axis-y { height: 104px; }
}
@container app (max-width: 699px) {
  .pk-kit { grid-template-columns: minmax(0, 1fr); }
  .pk-kit .btn { grid-column: 1; grid-row: auto; justify-self: start; min-height: 40px; margin-top: 6px; }
}

/* ---- the settings of the whole session: one bar over the script, each opened in place under it ---- */
@container app (min-width: 700px) {
  /* the bar belongs to the script under it: closer to it than the head is */
  .cu-main > .cs { margin: -36px 0 -52px; }
}
.cs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 0; border-block: 1px solid var(--line); }
.cs-pill { display: inline-flex; align-items: baseline; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--pill, 999px); background: none; color: var(--ink); font: 400 14.5px/40px var(--sans); white-space: nowrap; cursor: pointer; }
.cs-pill:hover { background: var(--wash); }
.cs-pill.is-open { border-color: var(--line); background: var(--sheet); }
.cs-k { font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cs-pill b { font-weight: 500; }
.cs-caret { align-self: center; width: 6px; height: 6px; margin: -3px 0 0 1px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.cs-pill.is-open .cs-caret { margin-top: 3px; transform: rotate(-135deg); }
.cs-ai { align-items: center; margin-left: auto; padding-inline: 10px 14px; background: var(--ai-soft); color: var(--ai-ink); }
.cs-ai:hover { background: color-mix(in srgb, var(--ai) 22%, var(--ai-soft)); }
.cs-ai.is-open { border-color: var(--ai); background: var(--ai-soft); }
.cs-spark { display: inline-grid; }
.cs-spark svg { width: 15px; height: 15px; }
.cs-panel { position: relative; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.cs-panel.is-ai { border-color: color-mix(in srgb, var(--ai) 40%, var(--line)); box-shadow: inset 3px 0 0 var(--ai); }
.cs-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--soft); font: 400 24px/1 var(--sans); cursor: pointer; }
.cs-x:hover { background: var(--wash); color: var(--ink); }
.cs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cs-say { max-width: 62ch; padding-right: 40px; font-size: 14px; line-height: 1.45; color: var(--soft); }
.cs-body > .cu-opt-chips:first-child, .cs-body > .cu-tracks:first-child { padding-right: 40px; }
/* the AI on the whole session: their words, then written in */
.cu-ai-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cu-ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-right: 40px; }
.cu-ai-head b { font: var(--display, 400) 20px/1.2 var(--serif); letter-spacing: var(--title-track, normal); color: var(--ink); }
.cu-ai-mark { display: inline-grid; color: var(--ai); }
.cu-ai-mark svg { width: 18px; height: 18px; }
.cu-ai-sub { font-size: 14px; line-height: 1.45; color: var(--soft); }
.cu-ai-sub b { font-weight: 500; color: var(--ink); }
.cx-sec-tools.is-ai { background: var(--ai-soft); box-shadow: inset 3px 0 0 var(--ai); }
.cx-ask-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cx-ask-box .cu-ai-head { padding-right: 0; }
.cx-ask-box .field { background: var(--sheet); }
.cx-ask-row { display: flex; justify-content: flex-end; }
@container app (max-width: 699px) {
  /* a phone keeps the bar one row, scrolled sideways, so the script starts on the first screen */
  .cs-bar { flex-wrap: nowrap; margin-inline: -20px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
  .cs-bar::-webkit-scrollbar { display: none; }
  .cs-pill { min-height: 44px; line-height: 44px; }
  .cs-ai { margin-left: 0; }
  .cs-panel { padding: 14px 14px 16px; }
  /* the AI's own row wraps: Say it beside its price, the writing under it, whole */
  .cu-ai-panel .cu-wish-row { flex-wrap: wrap; justify-content: flex-end; }
  .cu-ai-panel .cu-ai-row { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-end; }
  .cu-ai-panel .cu-ai-row .btn { flex: 1 1 auto; }
  .cu-ai-panel .cu-mic { margin-right: auto; }
  /* a pause in the dock: the stepper and Free on one row, what it is under them */
  .cx-dock .cx-gt-note { flex-basis: 100%; order: 3; }
}

/* ---- the pauses: every chip is said, then a pause; the silence after a line is a band ---- */
.cx-lead { font-size: 14.5px; line-height: 1.5; color: var(--soft); }
/* the pause between two chips: as wide as it is long, its seconds on a dotted line */
.cx-gap.cx-ps { display: inline-block; width: var(--pw); margin: 0 0.3em; line-height: 1.2; border-radius: 6px; cursor: pointer; color: var(--muted); text-align: center; white-space: nowrap; background: radial-gradient(circle, color-mix(in srgb, var(--muted) 70%, transparent) 0.9px, transparent 1.3px) left 55% / 5px 5px repeat-x; }
.cx-ps-s { padding: 0 3px; background: var(--paper); font: 400 10.5px/1 var(--mono); vertical-align: 0.35em; }
.cx-ps.is-set { color: var(--free-ink); background-image: radial-gradient(circle, var(--free) 1px, transparent 1.4px); }
.cx-ps.is-set .cx-ps-s { font-weight: 600; }
.cx-gap.cx-ps:hover, .cx-ps.is-open { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.cx-ps:hover .cx-ps-s, .cx-ps.is-open .cx-ps-s { background: none; }
.cx-ps.is-open { box-shadow: 0 0 0 1.5px var(--ink); }
.cx-gap.cx-ps:not(.is-drop):not(.is-over)::after { content: none; }
/* a long pause in a line is a row of its own */
.cx-ps.is-long { display: flex; align-items: center; width: auto; height: 24px; margin: 2px 0; padding: 0; }
.cx-ps.is-long .cx-ps-s { margin: 0 auto; vertical-align: 0; }
/* read only, on the lanes of Advanced */
.cx-ps.is-ro { display: inline-block; width: var(--pw); margin: 0 0.18em; line-height: 1.2; color: var(--muted); text-align: center; white-space: nowrap; border-bottom: 1.5px dotted color-mix(in srgb, var(--muted) 60%, transparent); }
.cx-ps.is-ro.is-set { color: var(--free-ink); border-bottom-color: var(--free); }
.cx-ps.is-ro .cx-ps-s { background: none; vertical-align: 0.15em; }
/* the silence after a line: a quiet band, as tall as it is long */
.cx-band { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: var(--bh); margin: 2px 0; padding: 0 2px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 400 10.5px/1 var(--mono); cursor: pointer; }
.cx-band i { flex: 1; height: 0; border-top: 1px dashed var(--line); }
.cx-band-s { flex: none; }
.cx-band:hover, .cx-band.is-open { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.cx-band:hover i, .cx-band.is-open i { border-color: var(--soft); }
.cx-band.is-open { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cx-band.is-set { color: var(--free-ink); }
.cx-band.is-set i { border-top-color: color-mix(in srgb, var(--free) 60%, var(--line)); }
/* what a pause can do, under the pointer: shown on hover, never in the way of a click */
.cx-hint { position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 12; display: none; padding: 3px 9px; border-radius: var(--pill, 999px); background: var(--ink); color: var(--paper); font: 400 11.5px/1.4 var(--sans); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.cx-band .cx-hint { bottom: auto; top: 50%; left: auto; right: 0; transform: translateY(-50%); }
.cx-ps:hover:not(.is-open) .cx-hint, .cx-band:hover:not(.is-open) .cx-hint { display: block; }
.cx.is-dragging .cx-hint { display: none; }
/* what a phrase can do, under the pointer: its words, how it is said, the AI */
.cx-chip { position: relative; }
.cx-hints { position: absolute; left: -4px; bottom: 100%; z-index: 12; display: none; gap: 2px; padding: 0 0 5px; white-space: nowrap; }
.cx-chip:hover > .cx-hints { display: flex; }
.cx-hint-b { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 0; border-radius: var(--pill, 999px); background: var(--ink); color: var(--paper); font: 400 12px/1 var(--sans); cursor: pointer; }
.cx-hint-b::before { content: attr(data-g) "\00a0" attr(data-label); }
.cx-hint-b:hover { background: var(--soft); }
.cx-hint-b.is-ai { background: var(--ai); color: #fff; }
.cx-hint-b.is-ai:hover { background: var(--ai-ink); color: var(--ink); }
.cx-chip.is-soft > .cx-hints, .cx-chip.is-loud > .cx-hints { font-size: 21px; }
/* words the AI just changed, waiting for keep or undo */
.cx-chip.is-ai { background: color-mix(in srgb, var(--ai) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai) 16%, transparent); }
/* a pause opened: its length, a join, words there */
.cx-gt-k { flex: 1; min-width: 0; font-size: 13.5px; color: var(--soft); }
.cx-gt-k q { font-family: var(--serif); font-style: italic; color: var(--ink); }
.cx-gt-time { gap: 6px 12px; }
.cx-gt-time .cx-step b { min-width: 56px; font-size: 17px; }
.cx-gt-note { flex: 1 1 12em; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* the AI, asked in a sentence, priced beside it */
.cx-ask { flex-wrap: nowrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cx-ask-mark { display: inline-grid; flex: none; color: var(--ai); }
.cx-ask-mark svg { width: 16px; height: 16px; }
.cx-ask-field { flex: 1 1 auto; min-width: 0; width: auto; }
.cx-ask .btn { flex: none; min-height: 34px; padding: 4px 14px; font-size: 14px; }
.cx-ask .ai-badge { flex: none; }
@container app (max-width: 699px) {
  .cx-ask { flex-wrap: wrap; }
  .cx-ask-field { flex-basis: calc(100% - 30px); }
}
/* what the AI changed, said where it is: keep or undo */
.cx-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: min(560px, 100%); margin: 6px 0 14px; padding: 10px 12px; border-radius: calc(14px * var(--round, 1)); background: var(--ai-soft); color: var(--ai-ink); font: 400 14px/1.4 var(--sans); }
.cx-review p { flex: 1 1 16em; margin: 0; }
.cx-review q { font-family: var(--serif); font-style: italic; color: var(--ink); }
.cx-review-acts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cx-review-acts .btn { min-height: 36px; padding: 4px 16px; font-size: 14px; }
.cx-block > .cx-review { margin: 0; }
/* the AI on a section, beside its name */
.cx-sec-ai { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px 0 8px; border: 1px solid color-mix(in srgb, var(--ai) 35%, var(--line)); border-radius: var(--pill, 999px); background: none; color: var(--ai-ink); font: 400 11.5px/1 var(--mono); letter-spacing: 0.04em; cursor: pointer; }
.cx-sec-ai svg { width: 13px; height: 13px; color: var(--ai); }
.cx-sec-ai:hover, .cx-sec-ai.is-on { border-color: var(--ai); background: var(--ai-soft); }

/* a suggestion for the editor, by Generate: a quiet link, the box it opens, and the thanks */
.cu-suggest-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
.cu-suggest-link:hover { color: var(--ink); }
.cu-suggest-link svg { flex: none; width: 18px; height: 18px; }
.cu-suggest.is-open { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: calc(18px * var(--round, 1)); background: var(--sheet); }
.cu-suggest-l { display: grid; gap: 8px; }
.cu-suggest-l .field { min-height: 96px; resize: vertical; }
.cu-suggest-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cu-suggest-fine { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cu-suggest.is-thanks { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px 8px 8px; border-radius: var(--pill, 999px); background: var(--free-soft); color: var(--free-ink); font-size: 14px; width: fit-content; }
.cu-suggest.is-thanks b { font-weight: 600; }

/* a block moved: Earlier and Later in its tools, and on a desktop its divider dragged. The grip says
   it can be held; while one is held, the others take it, a line in its family colour where it lands */
.cx-move svg { width: 18px; height: 18px; }
.cx-grip { display: inline-grid; place-items: center; width: 14px; margin-left: -4px; align-self: center; color: var(--muted); cursor: grab; }
.cx-grip svg { width: 16px; height: 16px; }
.cx-sec-main[data-grab]:hover .cx-grip { color: var(--ink); }
.cx-sec.is-held { outline: 1px dashed var(--c); outline-offset: 2px; border-radius: 8px; }
.cx-script .cx-sec.is-drop { position: relative; border-radius: 8px; background-color: color-mix(in srgb, var(--c) 7%, transparent); }
.cx-script .cx-sec.is-over-before { box-shadow: inset 0 3px 0 var(--c); background-color: color-mix(in srgb, var(--c) 16%, transparent); }
.cx-script .cx-sec.is-over-after { box-shadow: inset 0 -3px 0 var(--c); background-color: color-mix(in srgb, var(--c) 16%, transparent); }
.cx-script.is-moving .cx-sec-main { cursor: grabbing; }

/* the session's one estimate, before Generate: about how many credits, and why about, a tap away */
/* the estimate: one line; why it is about opens over the page, never moving it */
.cu-est { position: relative; padding-top: 10px; border-top: 1px dashed #3a574b; }
.cu-est-main { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cu-est-n { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; }
.cu-est-n b { font: 600 17px/1 var(--sans); }
.cu-est-k { color: #cfdcd4; }
.cu-est-q { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font: 600 12px/1 var(--sans); opacity: 0.8; }
.cu-est-why { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 12px 14px; border: 1px solid #3a574b; border-radius: 12px; background: #13201d; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.75); font-size: 13px; line-height: 1.45; }
/* in the dock it opens over the screen above the whole dock, as wide as it */
.cu-est.is-up { position: static; padding-top: 0; border-top: 0; }
.cu-est.is-up .cu-est-why { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; }
.cu-dock .cu-est-n { font-size: 13px; }
[data-theme] .cu-est { border-color: var(--panel-line); }
[data-theme] :is(.cu-gen, .ad-make, .cu-sheet-gen, .cu-dock) .cu-est-k { color: var(--panel-dim); }
[data-theme] .cu-est-why { border-color: var(--panel-line); background: var(--sheet); color: var(--soft); }
[data-theme] .cu-est-n b { color: var(--ink); }