/* The app's theme, Lantern: a night you go down into, and the light comes from the work. Each
   device's screen carries data-theme="lantern" (index.html); the paper tokens in proto.css are what
   it is laid over. A theme is tokens: colours, faces, radii, the grounds and their light. The
   meanings never move: honey the way forward, sage free, lake AI, one red for where you are now;
   the track colours stay one per track kind.

   The idea, said once: the ground is layered darkness that deepens as the page goes down (deeper is
   darker, as a session goes), and nothing on it is lit from outside. What you work on gives the
   light: a family's colour runs along its divider like a beam, a phrase you point at is lit from
   under, the one you hold glows, the clips on the timeline are lanterns in their colours, the way
   forward is honey and breathes. Every glow is a function of the clock (--glow, --turn, set by
   K.glow on the app and on the way forward), never a CSS animation. Precise first: hairlines, small
   radii, one sans in two widths, a mono for numbers. */

/* ---- Lantern: tokens ----------------------------------------------------------------------- */
[data-theme="lantern"] {
  /* the grounds, from the deepest up: each layer one step lighter, the same cool green-black as
     the night version of the brand, so the app is the night the videos are watched in */
  --abyss: #050908;
  --bg: #101b19;
  --paper: var(--bg);
  --wash: #14211f;
  --sheet: #182725;
  --panel: #1c2c29;
  --raise: #223430;
  --line: #253733;
  --line-2: #354a45;
  --ink: #f2eee6;
  --soft: #cdd2cb;
  --muted: #bac5c0;
  --deep: #f2eee6;
  --deep-2: #ffffff;
  --panel-line: #30443f;
  --panel-text: #f2eee6;
  --panel-dim: #b6c0bb;
  --night: var(--abyss);
  --night-2: #111d1b;
  --night-muted: #acb8b3;
  --stage: linear-gradient(180deg, #0b1412, var(--abyss) 180px);
  --signal-text: #ff8a63;
  /* the companions, luminous on the night: each a soft ground and a light ink for words on it */
  --go: #ffb43c; --go-soft: #2a2010; --go-ink: #ffd592;
  --free: #6fd394; --free-soft: #0f2519; --free-ink: #a6ecc0;
  --ai: #4cb0f0; --ai-soft: #0c2233; --ai-ink: #a8dafc;
  /* the families, music and sounds, and how words are said: lanterns in the dark. Honey is the way
     forward alone, so nothing else is orange: the way down starts at dusk (violet, the induction),
     goes through the tide (the deepener) and the orchid (the suggestion, never a red), and comes back at dawn (shell,
     pale). How words are said is moonlight: a cool pale light under the words, never warm */
  /* depth is one hue, dusk: a ramp from the pale of waking (--depth-0) to the dusk of the deepest
     (--depth-1), the one colour of every depth chart. A part's family is its place on that ramp: the
     induction going down, the deepener deeper, the suggestion at the bottom, the return pale again */
  --depth-0: #eceaff; --depth-1: #8f80ff;
  /* a session's picture is tinted by what it is for, its own colour apart from depth */
  --cover-tide: #3fd6bb; --cover-clay: #aaa4ff; --cover-rose: #df9cea; --cover-shell: #f4d9cf; --cover-mauve: #b6a8d2;
  --clay: #c4bdff; --tide: #a99dff; --rose: #9a8cff; --shell: #e2deff; --mauve: #b6a8d2; --fern: #aec98a;
  --ember: #c9d4ff; --ember-soft: #1c2236; --ember-ink: #dbe2ff;
  /* the five voices are people, not meanings: pale silvers of the light, none honey, none red, none
     as vivid as a family; a lane and its clips are told apart by their tint and their name */
  --voice-1: #ece6da; --voice-2: #c6bdf2; --voice-3: #a9cfe2; --voice-4: #e6c3d4; --voice-5: #b4bec8;
  /* one sans in two widths: narrowed for what is said and named, full width for what is read */
  --serif: "Instrument Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --round: 0.62;
  --pill: 10px;
  --hair: inset 0 1px 0 rgb(255 255 255 / 0.045);
  --lift: var(--hair), 0 1px 0 rgb(0 0 0 / 0.4), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  --title-track: -0.022em;
  /* what is said and named: the sans narrowed and set heavier; every title takes it through --display */
  --display: 600 semi-condensed;
  /* the light the work gives: warm white, a little of it */
  --lamp: 242 238 230;
}

/* ---- the ground: darker as it goes down, a faint warm light above that breathes with the clock */
[data-theme] .app {
  background:
    radial-gradient(1400px 560px at 50% -260px, rgb(255 196 120 / calc(0.035 + 0.03 * var(--glow, 0))), transparent 72%),
    linear-gradient(180deg, #152321 0, #101b19 560px, #0c1514 100%);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
}
[data-theme] .statusbar.is-night, [data-theme] .statusbar { background: #142221; color: var(--ink); }

/* ---- the bar: glass over the night, a hairline under it ------------------------------------ */
[data-theme] .appbar { background: color-mix(in srgb, #111d1b 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); box-shadow: 0 -3px 0 #111d1b; }
[data-theme] .appbar-brand { font: 600 18px/1 var(--sans); font-stretch: 88%; letter-spacing: -0.01em; }
[data-theme] .appbar-link { font-size: 14.5px; color: var(--soft); }
[data-theme] .appbar-you { font-size: 14px; text-decoration-color: var(--line-2); }
[data-theme] :is(.appbar-signin, .appbar-credits) { border-color: var(--line-2); background: var(--wash); box-shadow: var(--hair); }
[data-theme] .appbar-credits b { font: 500 13.5px/1 var(--mono); color: var(--ink); }
[data-theme] .appbar-credits span { font-size: 12.5px; color: var(--muted); }
/* the profile at the top right: the balance and who you are, one key; it opens the profile menu */
[data-theme] .appbar-me { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 5px 4px 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--wash); box-shadow: var(--hair); color: var(--ink); cursor: pointer; font-size: 12.5px; }
[data-theme] .appbar-me:hover, [data-theme] .appbar-me.is-on { border-color: #4a625c; background: var(--sheet); }
[data-theme] .appbar-me b { font: 500 13.5px/1 var(--mono); color: var(--ai-ink); }
[data-theme] .appbar-me > span:not(.appbar-av) { color: var(--muted); margin-right: 3px; white-space: nowrap; }
[data-theme] .appbar-me b { white-space: nowrap; }
@container app (max-width: 699px) {
  [data-theme] .appbar-me { padding-left: 10px; }
  [data-theme] .appbar-me > span:not(.appbar-av) { display: none; }
}
[data-theme] .appbar-av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--raise); color: var(--ink); font: 600 14px/1 var(--sans); }
[data-theme] .me-scrim { position: absolute; inset: 0; z-index: 18; }
[data-theme] .me { position: absolute; top: 116px; right: 10px; z-index: 19; display: grid; width: min(320px, calc(100% - 28px)); padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--panel), var(--sheet)); box-shadow: var(--hair), 0 24px 60px rgb(0 0 0 / 0.65); color: var(--ink); font: 400 15px/1.4 var(--sans); }
@container app (min-width: 700px) { [data-theme] .me { top: 70px; right: 40px; } }
[data-theme] .me-who { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 8px 12px; font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
[data-theme] .me-credits { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; padding: 12px; border-radius: 9px; background: var(--ai-soft); }
[data-theme] .me-credits > div { display: grid; gap: 2px; }
[data-theme] .me-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-ink); }
[data-theme] .me-n { font: 500 26px/1.1 var(--mono); color: var(--ai-ink); }
[data-theme] .me-soon { font-size: 12.5px; color: var(--ai-ink); }
[data-theme] .me-credits .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
[data-theme] .me-row { min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 400 15px var(--sans); }
[data-theme] .me-row:hover { background: var(--raise); }
[data-theme] .me-row:last-child { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--soft); }

/* ---- type ---------------------------------------------------------------------------------- */
[data-theme] .label { font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; color: var(--muted); }
[data-theme] .cu-title { font-size: 34px; line-height: 1.04; }
[data-theme] .st-q { font-size: 32px; line-height: 1.06; }
[data-theme] .st-field { font: 400 20px/1.45 var(--sans); }
[data-theme] :is(.sv-line-text, .ad-line-text, .st-line) { font-family: var(--sans); font-size: 17px; }
@container app (min-width: 700px) {
  [data-theme] .cu-title { font-size: 52px; }
  [data-theme] .ad-top .cu-title { font-size: 40px; }
  [data-theme] .st-q { font-size: 56px; }
  [data-theme] .st-build-title { font-size: 34px; }
}

/* ---- the controls: precise keys, a hairline and a light from inside ------------------------- */
/* the one style of a secondary action that is not a key: a quiet underlined word */
[data-theme] .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--soft); font: 500 14px/1.2 var(--sans); text-decoration: underline; text-decoration-color: rgb(var(--lamp) / 0.4); text-underline-offset: 0.24em; cursor: pointer; }
[data-theme] .link:hover { color: var(--ink); text-decoration-color: var(--soft); }
[data-theme] .btn { min-height: 46px; padding: 11px 20px; border-radius: 11px; font: 600 15.5px/1.2 var(--sans); letter-spacing: 0.002em; }
/* a plain key: neutral glass of the lamp's light over the night, never tinted green, so it is never
   read as free (sage) when what it does costs */
[data-theme] .btn-primary { background: linear-gradient(180deg, rgb(var(--lamp) / 0.13), rgb(var(--lamp) / 0.07)); border-color: rgb(var(--lamp) / 0.2); color: var(--ink); box-shadow: var(--hair), 0 1px 2px rgb(0 0 0 / 0.5); }
[data-theme] .btn-primary:hover { background: linear-gradient(180deg, rgb(var(--lamp) / 0.19), rgb(var(--lamp) / 0.11)); border-color: rgb(var(--lamp) / 0.3); }
[data-theme] .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
[data-theme] .btn-ghost:hover { background: var(--wash); }
[data-theme] .btn-quiet { color: var(--ink); text-decoration-color: var(--line-2); }
/* the way forward is honey lit from inside, dark words on it; it glows from the clock */
[data-theme] .btn-go { background: radial-gradient(120% 160% at 50% 0%, #ffd27c 0, var(--go) 52%, #e8941c 100%); color: #1a1204; border-color: rgb(255 214 140 / 0.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 18px -4px rgb(255 180 60 / 0.5); }
[data-theme] .btn-go:hover { background: radial-gradient(120% 160% at 50% 0%, #ffdc94 0, #ffbd52 52%, #f09d26 100%); }
[data-theme] .btn-glow { color: #1a1204; border-color: rgb(255 214 140 / 0.55);
  background: radial-gradient(120% 160% at 50% 0%, rgb(255 226 160 / 0.9) 0, transparent 60%), conic-gradient(from var(--turn, 0deg), var(--go) 0deg, #ffe0a0 60deg, var(--go) 140deg, #e48a12 250deg, var(--go) 360deg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 calc(14px + 30px * var(--glow, 0)) calc(1px + 5px * var(--glow, 0)) rgb(255 176 50 / calc(0.22 + 0.3 * var(--glow, 0))); }
[data-theme] .btn-glow:hover { background: radial-gradient(120% 160% at 50% 0%, rgb(255 236 186 / 0.95) 0, transparent 60%), conic-gradient(from var(--turn, 0deg), #ffbe55 0deg, #ffe6b0 60deg, #ffbe55 140deg, #ee9a26 250deg, #ffbe55 360deg); }
[data-theme] .btn-free { background: linear-gradient(180deg, #86e0a7, var(--free)); color: #04140b; border-color: rgb(166 236 192 / 0.45); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35); }
[data-theme] .btn-free:hover { background: linear-gradient(180deg, #97e8b5, #7ad99d); }
[data-theme] .btn-ai { background: linear-gradient(180deg, #6cc1f5, var(--ai)); color: #04131f; border-color: rgb(168 218 252 / 0.45); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0 18px -6px rgb(76 176 240 / 0.6); }
[data-theme] .btn-ai:hover { background: linear-gradient(180deg, #82cbf7, #5ab8f2); }
[data-theme] .btn[disabled] { opacity: 0.4; }
[data-theme] :is(.ai-badge, .free-badge) { padding: 2px 8px 2px 7px; border-radius: 6px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.02em; }
[data-theme] .ai-badge { background: color-mix(in srgb, var(--ai) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 32%, transparent); }
[data-theme] .ai-badge::before { box-shadow: 0 0 6px var(--ai); }
[data-theme] .free-badge { background: color-mix(in srgb, var(--free) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--free) 30%, transparent); }

[data-theme] .chip { border-radius: 10px; border-color: var(--line-2); background: var(--wash); box-shadow: var(--hair); }
[data-theme] .chip:hover { border-color: #46605a; background: var(--sheet); }
[data-theme] .chip.is-on { border-color: rgb(var(--lamp) / 0.75); background: color-mix(in srgb, var(--ink) 11%, var(--sheet)); color: var(--ink); box-shadow: 0 0 0 1px rgb(var(--lamp) / 0.25), 0 0 22px -6px rgb(var(--lamp) / 0.35); }
[data-theme] :is(.chip.is-on small, .cu-len.is-on span, .cu-len.is-on small) { color: var(--soft); border-color: var(--line-2); }
[data-theme] .field { border-color: var(--line-2); background: var(--abyss); color: var(--ink); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.5); }
[data-theme] .field:focus { outline: 1.5px solid rgb(var(--lamp) / 0.6); outline-offset: 2px; }
[data-theme] .field::placeholder { color: #7f8c87; }

/* the depth chart: one line lit on the dusk ramp over a faint ground, a hairline at each part, the
   names in one row under it, the part playing in ink */
[data-theme] .curve-area { fill: color-mix(in srgb, var(--depth-1) 7%, transparent); }
[data-theme] .curve-line { stroke-width: 2; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--depth-1) 55%, transparent)); }
[data-theme] .curve-tick { stroke: var(--line); }
[data-theme] .curve-labels { height: 15px; margin-top: 6px; font: 400 10.5px/15px var(--mono); letter-spacing: 0.02em; color: var(--muted); }
[data-theme] .curve-labels .is-now { color: var(--ink); }
[data-theme] .curve-labels span { transform: translateX(-50%); }
[data-theme] .curve-labels.is-numbered span { font-variant-numeric: tabular-nums; }

[data-theme] .toast { background: var(--raise); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--hair), 0 16px 40px rgb(0 0 0 / 0.6); }
[data-theme] .sheet { background: linear-gradient(180deg, var(--panel), var(--sheet) 220px); border: 1px solid var(--line-2); box-shadow: var(--hair), 0 30px 80px rgb(0 0 0 / 0.7); }
[data-theme] .sheet-scrim { background: rgb(2 5 4 / 0.66); }

/* ---- the raised panels the paper look drew in deep green: glass of the theme, light words ---- */
[data-theme] :is(.cu-dock, .cu-gen, .ad-make, .cu-listen, .lb-empty, .sp-ask, .sh-card, .wi-final, .pd-next) {
  --deep: var(--panel); --paper: var(--panel-text);
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, #1d2d2a, #172624);
  box-shadow: var(--lift);
}
[data-theme] :is(.cu-dock, .cu-gen, .ad-make) :is(.cu-dock-k, .cu-dock-meter, .cu-dock-price small, .cu-gen-free, .cu-gen-fine, .ad-make small, .cu-dock-see) { color: var(--panel-dim); }
[data-theme] :is(.cu-dock, .cu-gen) .cu-seg { background: var(--line-2); }
[data-theme] :is(.cu-dock, .cu-gen) .cu-seg i { background: var(--free); box-shadow: 0 0 6px var(--free); }
[data-theme] :is(.cu-dock-see, .cu-gen-head) { border-color: var(--panel-line); }
[data-theme] .ad-make-k, [data-theme] .cu-dock-studio span:last-child { color: var(--free-ink); }
[data-theme] :is(.cu-dock, .cu-gen, .ad-make) .btn-primary { color: var(--panel-text); }
[data-theme] .cu-dock { background: color-mix(in srgb, #1c2c29 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--hair), 0 -10px 40px rgb(0 0 0 / 0.55), 0 10px 0 10px #070c0b; }
[data-theme] .cu-sheet-gen { background: var(--sheet); box-shadow: 0 -12px 24px color-mix(in srgb, var(--sheet) 90%, transparent); }

/* the dashed and hover lines the paper look drew in sand */
[data-theme] :is(.st-hint:hover, .cu-idea, .cu-blue-wish.is-empty p, .sv-line-main:hover .sv-line-edit, .sv-foot-btn, .cu-guide-starter, .sv-spot.is-next) { border-color: var(--line-2); }
[data-theme] .st-awake { border-top-color: var(--line-2); }
[data-theme] .sv-more { text-decoration-color: var(--line-2); }
[data-theme] .st-field::placeholder { color: #7f8c87; }
[data-theme] .st-build-title .is-unread { color: var(--line-2); }
[data-theme] .cu-mode-off[disabled] { color: var(--line-2); }
[data-theme] :is(.si-kept-top .free-badge, .si-kept-list li, .lb-credits .btn, .pw-about-p .ai-badge, .pw-plan-more, .pw-pack.is-on, .pw-custom.is-on, .lp-cue:hover) { background: var(--sheet); }
[data-theme] :is(.cm-del, .lb-sheet-warn) { background: var(--ember-soft); color: var(--ember-ink); }
[data-theme] :is(.ad-take.is-on .label, .ad-take.is-on .ad-take-name) { color: var(--soft); }
[data-theme] .ad-take.is-on .ad-take-play { background: var(--ink); color: var(--bg); }
[data-theme] .ad-take.is-on .ad-take-wave { fill: var(--ink); opacity: 0.6; }
[data-theme] .sv-deeper-art { background: var(--abyss); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme] :is(.sv-block, .cu-blue, .ad-card, .cu-voice, .cu-pulse, .card) { box-shadow: var(--lift); }
[data-theme] .sv-block { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--sheet)), var(--sheet) 150px); box-shadow: inset 2px 0 0 var(--c), var(--lift); }

/* ======================================================================================== */
/* The start: one question over the night, the input a lamp that breathes                    */
/* ======================================================================================== */
[data-theme] .st-top { gap: 18px; }
[data-theme] .st-top > .label { color: var(--muted); }
[data-theme] .st-q { max-width: 15em; }
/* the input, the page's hero: a thin ring of the lamp's light turning with the clock, the halo
   breathing, the dark well inside. Honey is kept for the way forward under it */
[data-theme] .st-ask { padding: 1.5px; border-radius: 18px;
  background: conic-gradient(from var(--turn, 0deg), rgb(var(--lamp) / 0.12) 0deg, rgb(var(--lamp) / 0.85) 70deg, rgb(var(--lamp) / 0.12) 150deg, var(--line-2) 230deg, rgb(var(--lamp) / 0.12) 360deg);
  box-shadow: 0 0 calc(30px + 40px * var(--glow, 0)) calc(-6px + 6px * var(--glow, 0)) rgb(var(--lamp) / calc(0.07 + 0.09 * var(--glow, 0))); }
[data-theme] .st-field { min-height: 132px; padding: 20px 22px; border: 0; border-radius: 16.5px; background: radial-gradient(120% 90% at 50% 0%, #121e1c, var(--abyss)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03); }
[data-theme] .st-field:focus { outline: 0; }
[data-theme] .st-hints { gap: 12px; }
[data-theme] .st-hint { min-height: 42px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: color-mix(in srgb, var(--wash) 70%, transparent); color: var(--soft); font: 400 14.5px/1.3 var(--sans); box-shadow: var(--hair); }
[data-theme] .st-hint:hover { border-color: #4a625c; background: var(--sheet); color: var(--ink); box-shadow: var(--hair), 0 0 20px -8px rgb(var(--lamp) / 0.4); }
/* the hint taken stays lit as chosen, in the lamp's light: its words are in the field */
[data-theme] .st-hint.is-on { border-color: rgb(var(--lamp) / 0.75); background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); color: var(--ink); box-shadow: 0 0 0 1px rgb(var(--lamp) / 0.25), 0 0 22px -6px rgb(var(--lamp) / 0.4); }
[data-theme] .st-hint.is-on::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 0; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); }
/* the way forward, under the wish: the AI's proposal lights honey once the wish says something; the
   way by hand is a plain key beside it. Neither outshouts the input */
[data-theme] .st-ways { margin-top: 4px; }
[data-theme] .st-hints { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
[data-theme] .st-way-act { align-items: center; }
[data-theme] .st-way-act .btn { margin: 0; }
[data-theme] .st-then { font-size: 14px; line-height: 1.5; color: var(--muted); }
[data-theme] .st-way p { color: var(--muted); font-size: 14px; }
[data-theme] .st-way .free-badge, [data-theme] .st-way .ai-badge { background: transparent; }
/* the styles: a lantern dot each, a hairline between */
[data-theme] .st-h2 { font-size: 26px; }
[data-theme] .st-sub { color: var(--soft); }
[data-theme] .st-style-list li { border-top-color: var(--line); padding: 16px 0 14px; }
[data-theme] .st-style-list i { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; box-shadow: 0 0 10px var(--c), 0 0 2px var(--c); }
[data-theme] .st-style-list b { font: 600 18px/1.25 var(--sans); font-stretch: 88%; }
[data-theme] .st-style-list span { color: var(--soft); font-size: 14px; }
/* the AI building it */
[data-theme] .st-doing { border-radius: 12px; background: color-mix(in srgb, var(--ai) 10%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 28%, transparent); }
[data-theme] .st-doing i { box-shadow: 0 0 0 calc(2px + 5px * var(--glow, 0)) rgb(76 176 240 / calc(0.35 - 0.25 * var(--glow, 0))), 0 0 12px var(--ai); }
[data-theme] .st-row { border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 9%, var(--sheet)), var(--sheet) 60%); box-shadow: inset 2px 0 0 var(--c), var(--hair); }
[data-theme] .st-line { font: 400 18px/2 var(--sans); }
[data-theme] .st-build-wish q { font: italic 400 18px/1.45 var(--sans); }
@container app (min-width: 700px) {
  [data-theme] .st { gap: 64px; padding-top: 72px; }
  [data-theme] .st-field { font-size: 24px; padding: 22px 26px; min-height: 140px; }
}

/* ======================================================================================== */
/* The simple editor: a script read in the dark, its parts each a beam of their colour          */
/* ======================================================================================== */
[data-theme] .cu-head { gap: 8px; }
[data-theme] .cu-from { color: var(--muted); }
[data-theme] .cu-from b { color: var(--soft); }
[data-theme] .cu-others { color: var(--muted); }
[data-theme] .cu-rename { min-height: 40px; padding: 3px 12px 3px 10px; border-color: var(--line-2); border-radius: 10px; background: transparent; color: var(--soft); box-shadow: none; }
[data-theme] .cu-rename:hover { background: var(--wash); color: var(--ink); }
/* the mode: a recessed track, the mode you are in a lit key in it */
[data-theme] .cu-mode { padding: 3px; border-radius: 12px; background: var(--abyss); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 4px rgb(0 0 0 / 0.5); min-height: 42px; }
[data-theme] :is(.cu-mode-on, .cu-mode-off) { min-height: 36px; padding: 5px 16px; border-radius: 9px; font-size: 14px; }
[data-theme] .cu-mode-on { background: linear-gradient(180deg, #2a3e39, var(--raise)); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 1px 3px rgb(0 0 0 / 0.6); }
[data-theme] .cu-mode-off { color: var(--muted); }

/* the settings: one console strip, recessed; each setting a cell of its own, its name above its value,
   a hairline between; the open one lit from under */
[data-theme] .cs-bar { gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--abyss) 80%, transparent); box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.45); }
[data-theme] .cs-pill { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 3px; min-height: 58px; padding: 8px 14px 9px; border: 0; border-radius: 9px; text-align: left; white-space: normal; font: 500 15px/1.25 var(--sans); color: var(--ink); }
[data-theme] .cs-pill + .cs-pill:not(.cs-ai)::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
[data-theme] .cs-pill:hover { background: var(--wash); }
[data-theme] .cs-pill:hover::before, [data-theme] .cs-pill.is-open::before, [data-theme] .cs-pill:hover + .cs-pill::before, [data-theme] .cs-pill.is-open + .cs-pill::before { opacity: 0; }
[data-theme] .cs-pill.is-open { background: linear-gradient(180deg, var(--panel), var(--raise)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 -2px 0 rgb(var(--lamp) / 0.8), 0 6px 18px -6px rgb(var(--lamp) / 0.3); }
[data-theme] .cs-k { grid-column: 1 / -1; font: 500 12px/1.2 var(--sans); letter-spacing: 0.01em; text-transform: none; color: var(--muted); }
[data-theme] .cs-pill b { font-weight: 500; overflow-wrap: normal; }
[data-theme] .cs-caret { align-self: center; border-color: var(--muted); }
[data-theme] .cs-ai { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-inline: 14px 16px; background: color-mix(in srgb, var(--ai) 13%, transparent); color: var(--ai-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 35%, transparent); }
[data-theme] .cs-ai:hover { background: color-mix(in srgb, var(--ai) 20%, transparent); }
[data-theme] .cs-ai.is-open { background: color-mix(in srgb, var(--ai) 18%, transparent); box-shadow: inset 0 0 0 1px var(--ai), 0 0 20px -6px var(--ai); }
[data-theme] .cs-spark { color: var(--ai); }
[data-theme] .cs-panel { border-color: var(--line-2); border-radius: 14px; background: linear-gradient(180deg, var(--panel), var(--sheet)); box-shadow: var(--lift); }
/* a panel opened from the bar: a head row (what it is, a few words, its close key), then one grid for
   what is in it, three across (two on a phone), the pulse and the notes the whole width */
[data-theme] .cs-head { display: flex; align-items: center; gap: 12px; margin: -6px -8px 12px 0; }
[data-theme] .cs-head .cs-say { flex: 1; min-width: 0; padding: 0; font-size: 13.5px; color: var(--soft); }
[data-theme] .cs-head .cs-x { position: static; flex: none; width: 36px; height: 36px; margin-left: auto; }
[data-theme] .cs-head + .cs-body > :first-child { padding-right: 0; }
[data-theme] :is(.cu-tracks, .cu-voices) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@container app (max-width: 699px) {
  [data-theme] :is(.cu-tracks, .cu-voices) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-theme] .cs-plus { display: none; }
}
[data-theme] .cs-panel.is-ai { border-color: color-mix(in srgb, var(--ai) 45%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ai) 50%, transparent), var(--lift); }
[data-theme] .cs-x:hover, [data-theme] .cx-x:hover, [data-theme] .cu-guide-close:hover, [data-theme] .sv-spot-x:hover { background: var(--raise); }
/* a desktop keeps the strip one row, every cell as wide as its value; a phone lays the cells out two
   to a row, so nothing is ever cut or out of sight, and the AI key takes a row of its own */
@container app (min-width: 700px) {
  [data-theme] .cs-bar { flex-wrap: wrap; row-gap: 4px; }
  [data-theme] .cs-pill { flex: none; padding-inline: 12px; }
  [data-theme] .cs-pill b { white-space: nowrap; }
  [data-theme] .cs-ai { min-height: 50px; padding-inline: 12px 14px; font-size: 14.5px; }
}
@container app (max-width: 699px) {
  [data-theme] .cs-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-inline: 0; padding: 4px; overflow: visible; border-radius: 13px; border-inline: 1px solid var(--line); }
  [data-theme] .cs-pill { min-height: 56px; line-height: 1.25; }
  [data-theme] .cs-pill + .cs-pill:not(.cs-ai)::before { content: none; }
  [data-theme] .cs-pill:nth-child(odd):not(.cs-ai)::after { content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
  [data-theme] .cs-pill:nth-child(n+3):not(.cs-ai) { border-top: 1px solid var(--line); border-radius: 0; }
  [data-theme] .cs-pill.is-open { border-radius: 9px; }
  [data-theme] .cs-ai { grid-column: 1 / -1; justify-content: center; min-height: 48px; margin: 4px 0 0; }
}

/* the voices, the sound, the length: keys of the same strip */
/* the voices: a card each, its own colour on its initial, its character in a line, and five seconds of
   it to hear across its foot; the one chosen lit by the lamp */
[data-theme] .cu-voice { flex-direction: column; align-items: stretch; border-color: var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--wash), var(--bg)); box-shadow: var(--hair); }
[data-theme] .cu-voice:hover { border-color: #46605a; }
[data-theme] .cu-voice.is-on { border-color: rgb(var(--lamp) / 0.7); background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 9%, var(--sheet)), var(--sheet)); box-shadow: 0 0 0 1px rgb(var(--lamp) / 0.25), 0 0 24px -8px rgb(var(--lamp) / 0.4); }
[data-theme] .cu-voice-pick { flex: 1 1 auto; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 14px 14px 10px; }
[data-theme] .cu-voice-mono { width: 36px; height: 36px; background: color-mix(in srgb, var(--v) 10%, var(--bg)); color: var(--v); font: 600 17px/1 var(--sans); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v) 45%, transparent); }
[data-theme] .cu-voice.is-on .cu-voice-mono { background: var(--v); color: var(--abyss); box-shadow: 0 0 14px -2px var(--v); }
[data-theme] .cu-voice-text b { font-size: 18px; }
[data-theme] .cu-voice-text b small { font: 500 11px/1 var(--sans); letter-spacing: 0.01em; text-transform: none; color: var(--soft); }
[data-theme] .cu-voice-text > span { font-size: 13.5px; color: var(--soft); }
[data-theme] .cu-hear { justify-content: flex-start; gap: 10px; margin: 0 14px 14px; padding: 6px 12px 6px 10px; border-color: var(--line-2); border-radius: 8px; background: var(--abyss); color: var(--ink); font: 500 12px/1 var(--mono); }
[data-theme] .cu-hear .cu-wave { flex: 1 1 auto; width: auto; height: 16px; opacity: 0.5; }
[data-theme] .cu-hear:hover { border-color: #46605a; }
[data-theme] .cu-hear.is-on { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, var(--abyss)) calc(var(--heard) * 100%), var(--abyss) 0); border-color: var(--ink); }
[data-theme] .cu-hear.is-on .cu-wave { opacity: 0.9; }
@container app (max-width: 699px) {
  [data-theme] .cu-voice-pick { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 8px; }
  [data-theme] .cu-voice-mono { width: 30px; height: 30px; font-size: 15px; }
  [data-theme] .cu-hear { margin: 0 12px 12px; }
}
[data-theme] .cu-len { border-color: var(--line-2); border-radius: 10px; background: var(--wash); }
[data-theme] .cu-len b { font: 600 26px/1 var(--sans); font-stretch: 86%; }
[data-theme] .cu-len.is-on { border-color: rgb(var(--lamp) / 0.75); background: color-mix(in srgb, var(--ink) 11%, var(--sheet)); color: var(--ink); box-shadow: 0 0 22px -6px rgb(var(--lamp) / 0.35); }
[data-theme] .cu-len small { color: var(--ai-ink); border-color: var(--line-2); }
[data-theme] .cu-switch-knob { background: var(--abyss); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-theme] .cu-switch-knob::after { background: var(--soft); }
[data-theme] .cu-pulse { border-color: var(--line-2); border-radius: 12px; background: var(--wash); }
[data-theme] .cu-pulse.is-on .cu-switch-knob { background: var(--free); box-shadow: 0 0 12px -2px var(--free); }
[data-theme] .cu-pulse.is-on .cu-switch-knob::after { background: #04140b; }

/* a part: a thin divider that is a beam of its family's colour, fading as it goes right */
[data-theme] .cx-script { gap: 40px; }
[data-theme] .cx-sec { border-bottom: 0; padding-bottom: 1px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent) 30%, color-mix(in srgb, var(--c) 8%, transparent) 75%, transparent) left bottom / 100% 1px no-repeat; }
[data-theme] .cx-sec-kind { gap: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; color: color-mix(in srgb, var(--c) 45%, var(--ink)); }
[data-theme] .cx-sec-kind i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px var(--c), 0 0 2px var(--c); }
[data-theme] .cx-sec-name { font: 600 19px/1.25 var(--sans); font-stretch: 88%; letter-spacing: -0.01em; }
[data-theme] .cx-sec-facts { font: 400 11.5px/1.4 var(--mono); color: var(--muted); }
[data-theme] .cx-sec-facts > span + span::before { color: var(--line-2); }
[data-theme] .cx-sec-main:hover .cx-sec-name, [data-theme] .cx-sec.is-open .cx-sec-name { text-decoration: none; text-shadow: 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); }
[data-theme] .cx-sec.is-open { background-size: 100% 2px; }
[data-theme] .cx-sec-ai { min-height: 30px; border-color: color-mix(in srgb, var(--ai) 35%, transparent); border-radius: 8px; color: var(--ai-ink); font: 500 11px/1 var(--mono); letter-spacing: 0.06em; }
[data-theme] .cx-sec-ai:hover, [data-theme] .cx-sec-ai.is-on { border-color: var(--ai); background: color-mix(in srgb, var(--ai) 14%, transparent); box-shadow: 0 0 16px -6px var(--ai); }
[data-theme] .cx-sec-tools { border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, var(--sheet)), var(--sheet) 50%); box-shadow: inset 2px 0 0 var(--c), var(--hair); }
[data-theme] .cx-sec-tools.is-ai { background: linear-gradient(90deg, color-mix(in srgb, var(--ai) 10%, var(--sheet)), var(--sheet) 60%); box-shadow: inset 2px 0 0 var(--ai), var(--hair); }
[data-theme] .cx-stepper { border-color: var(--line-2); border-radius: 9px; background: var(--wash); }
[data-theme] .cx-stepper:not(:disabled):hover { background: var(--raise); }
[data-theme] .cx-lead { color: var(--soft); }

/* the words: read in the dark at an even light; a phrase you point at is lit from under, the one
   you hold glows, so the unit of change is always the phrase */
/* the script reads as phrases: set close inside one (a wrapped line stays part of its phrase), the
   rhythm carried by the space between lines, a wrapped line balanced with the one above it */
[data-theme] .cx-par { font: 400 22px/1.46 var(--sans); color: rgb(var(--lamp) / 0.94); letter-spacing: -0.003em; text-wrap: balance; }
[data-theme] .cx-chip { border-radius: 5px; }
/* a phrase pointed at: a soft tint a few pixels round its words and a light underline, no outline (an
   outline is for what is held) */
[data-theme] .cx-chip:hover { background: linear-gradient(rgb(var(--lamp) / 0.5), rgb(var(--lamp) / 0.5)) left bottom / 100% 1px no-repeat, rgb(var(--lamp) / 0.07); box-shadow: 0 0 0 5px rgb(var(--lamp) / 0.07); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* the one held: lit in its words like a stroke of light, so a phrase that wraps stays one shape over
   both lines, never two boxes */
[data-theme] .cx-chip.is-on { background: rgb(var(--lamp) / 0.2); color: #fff; box-shadow: none; border-radius: 3px; text-shadow: 0 0 16px rgb(var(--lamp) / 0.55); }
[data-theme] .cx-chip.is-over { background: rgb(var(--lamp) / 0.16); box-shadow: 0 0 0 3px rgb(var(--lamp) / 0.16), 0 0 0 4.5px var(--ink); }
[data-theme] .cx-w.is-sel, [data-theme] .cx-cut.is-sel { background: rgb(var(--lamp) / 0.28); }
[data-theme] .cx-line.is-mine { color: var(--free-ink); }
[data-theme] .cx-line.is-yours { color: var(--ai-ink); }
[data-theme] .cx-dot { box-shadow: 0 0 6px var(--v); }
[data-theme] .cx-type { border-bottom-color: var(--ink); background: rgb(var(--lamp) / 0.08); }
[data-theme] .cx-ghost { border-radius: 7px; background: var(--ink); color: var(--bg); }
/* what a phrase can do, under the pointer: one glass bar of keys docked on the phrase's first word,
   inside the column; the silence drawn above the line steps aside for it, so it never sits on a rule.
   The phrase pointed at is outlined in the lamp's light, the unit of change drawn as a shape */
[data-theme] .cx-hints { left: -5px; gap: 2px; padding: 2px; bottom: calc(100% + 9px); border-radius: 10px; background: linear-gradient(180deg, #2a3e3a, #213330); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 26px rgb(0 0 0 / 0.6); }
[data-theme] .cx-hints::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
[data-theme] .cx-hint-b { min-height: 24px; padding: 0 9px; border-radius: 6px; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--sans); box-shadow: none; }
[data-theme] .cx-hint-b:hover { background: rgb(var(--lamp) / 0.1); }
[data-theme] .cx-hint-b.is-ai { background: color-mix(in srgb, var(--ai) 16%, transparent); color: var(--ai-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 40%, transparent); }
[data-theme] .cx-hint-b.is-ai:hover { background: color-mix(in srgb, var(--ai) 26%, transparent); color: #fff; }
[data-theme] .cx-band:has(+ .cx-line .cx-chip:hover) > :is(i, .cx-band-s) { visibility: hidden; }
[data-theme] .cx-sec:has(+ .cx-par > .cx-line:first-child .cx-chip:hover) { background-size: 0 0; }
/* a pause pointed at says what a click does in the row under its line, at the column's left edge,
   where the silence after the line is drawn: never over a word of the script. The silence between two
   lines says it there too, its seconds standing at its right */
[data-theme] .cx-par { position: relative; }
[data-theme] .cx-lhint { position: absolute; left: 0; z-index: 12; display: none; margin-top: -5px; pointer-events: none; }
[data-theme] .cx-line:has(.cx-ps:hover:not(.is-open)) + .cx-lhint { display: block; }
[data-theme] .cx.is-dragging .cx-lhint { display: none; }
[data-theme] .cx-lhint > span { display: inline-block; }
[data-theme] :is(.cx-hint, .cx-lhint > span) { padding: 5px 10px 5px 8px; border-radius: 8px; background: var(--raise); color: var(--ink); font: 500 13px/1.3 var(--sans); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px rgb(0 0 0 / 0.6); }
[data-theme] .cx-lhint > span::before { content: "\2191"; margin-right: 6px; color: var(--muted); }
[data-theme] .cx-hint { display: none; }
[data-theme] .cx-band .cx-hint { top: 50%; bottom: auto; left: 0; right: auto; transform: translateY(-50%); }
[data-theme] .cx-band:hover:not(.is-open) .cx-hint { display: block; }
[data-theme] .cx-band i:last-of-type { flex: 0 0 18px; }
/* the silence after a line: a dashed floor across the column, its seconds at its centre */
/* a pause, one notation everywhere: its seconds with their "s", small and quiet in the mono, over a
   dashed hairline as long as the silence; inside a line between two phrases, and as a rule between
   two lines. Light enough to read through; lit when pointed at; sage when set by hand */
/* inside a line it is inline, glued to the phrases on both sides, so a line never breaks at a pause */
[data-theme] .cx-gap.cx-ps:not(.is-long), [data-theme] .cx-ps.is-ro { display: inline; }
[data-theme] .cx-gap.cx-ps, [data-theme] .cx-ps.is-ro { width: var(--pw); margin: 0 0.22em; padding: 0 max(3px, calc((var(--pw) - 1.5em) / 2)); border: 0; border-radius: 4px; background: linear-gradient(90deg, var(--line-2) 50%, transparent 0) left 62% / 4px 1px repeat-x; box-shadow: none; color: var(--muted); }
[data-theme] .cx-ps-s { padding: 0; background: none; color: inherit; font: 500 11px/1 var(--mono); letter-spacing: 0; vertical-align: 0.42em; }
[data-theme] .cx-ps.is-set { background-image: linear-gradient(90deg, color-mix(in srgb, var(--free) 70%, transparent) 50%, transparent 0); color: var(--free-ink); }
[data-theme] .cx-gap.cx-ps:hover { background-color: rgb(var(--lamp) / 0.08); color: var(--ink); }
[data-theme] .cx-ps.is-open { background-color: rgb(var(--lamp) / 0.1); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(var(--lamp) / 0.8), 0 0 18px -4px rgb(var(--lamp) / 0.35); }
[data-theme] .cx-ps.is-long { margin: 4px 0; }
[data-theme] .cx-band { color: var(--muted); font: 500 11px/1 var(--mono); border-radius: 7px; }
[data-theme] .cx-band i { border-top: 1px dashed var(--line-2); }
[data-theme] .cx-band:hover, [data-theme] .cx-band.is-open { background: rgb(var(--lamp) / 0.05); }
[data-theme] .cx-band.is-open { box-shadow: inset 0 0 0 1.5px rgb(var(--lamp) / 0.7); }
[data-theme] .cx-band.is-set i { border-top-color: color-mix(in srgb, var(--free) 65%, transparent); }
[data-theme] .cx-end { border-color: var(--line-2); border-radius: 8px; }
[data-theme] .cx-adv { color: var(--muted); }
[data-theme] .cx-adv:hover { color: var(--ink); }
/* how it is said: the ember bracket, with a little of its own light */
[data-theme] .cx-mark { 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; }
[data-theme] .cx-note { font: 500 12px/1.35 var(--sans); color: var(--ember-ink); }
[data-theme] .cx-note.is-open { border-color: var(--ember); border-radius: 9px; background: var(--panel); }
[data-theme] .cx-other { border-left-width: 2px; color: var(--soft); }
/* what can be done with the words selected: a glass popover over the script */
[data-theme] .cx-tools { gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, #22332f, #1a2926); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 60px -10px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.4); }
[data-theme] :is(.cx-pick, .cx-lv, .cx-voice, .cx-mini) { min-height: 32px; padding: 2px 11px; border-color: var(--line-2); border-radius: 8px; background: var(--wash); color: var(--soft); font: 500 13px/1.2 var(--sans); }
[data-theme] :is(.cx-pick, .cx-lv, .cx-voice, .cx-mini):hover { border-color: #4a625c; background: var(--raise); color: var(--ink); }
[data-theme] .cx-pick.is-on { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 16%, transparent); color: var(--ember-ink); box-shadow: 0 0 16px -6px var(--ember); }
[data-theme] .cx-lv { border-radius: 0; }
[data-theme] .cx-lv:first-child { border-radius: 8px 0 0 8px; }
[data-theme] .cx-lv:last-child { border-radius: 0 8px 8px 0; }
[data-theme] .cx-lv.is-on { border-color: rgb(var(--lamp) / 0.75); background: color-mix(in srgb, var(--ink) 14%, var(--sheet)); color: var(--ink); z-index: 1; }
[data-theme] .cx-voice.is-on { border-color: var(--v); background: color-mix(in srgb, var(--v) 16%, var(--bg)); color: var(--ink); box-shadow: 0 0 14px -6px var(--v); }
[data-theme] .cx-own { border-color: var(--line-2); border-radius: 8px; background: var(--abyss); }
[data-theme] .cx-ask { border-top-color: var(--line); }
/* the popover is an instrument, not a form: the words selected at its head, then one row of how they are
   said, then the AI in a line of its own (an outline of lake, never louder than the way forward), then
   More, folded; every key in it one style */
[data-theme] .cx-tools { grid-template-columns: minmax(0, 1fr); }
[data-theme] .cx-head { display: flex; align-items: flex-start; gap: 10px; }
[data-theme] .cx-said { flex: 1; min-width: 0; font: 400 15px/1.35 var(--sans); color: var(--ink); quotes: "\201C" "\201D"; }
[data-theme] .cx-said::before, [data-theme] .cx-said::after { color: var(--muted); }
[data-theme] .cx-head .cx-x { margin: -4px -4px 0 0; }
[data-theme] .cx-tone { gap: 6px; }
[data-theme] .cx-own-tone { flex: 1 1 9em; width: auto; min-width: 8em; min-height: 32px; font-size: 13.5px; }
[data-theme] .cx-tools .cx-ask { padding-top: 10px; }
[data-theme] .cx-more-row { gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
[data-theme] .cx-ask .btn { min-height: 34px; padding: 4px 6px 4px 14px; gap: 10px; font-size: 14px; }
[data-theme] .cx-ask .ai-badge { background: none; box-shadow: none; padding: 0 4px 0 0; }
@container app (max-width: 699px) {
  [data-theme] .cx-tools .cx-ask { flex-wrap: wrap; row-gap: 8px; }
  [data-theme] .cx-tools .cx-ask-field { flex: 1 1 calc(100% - 30px); min-width: 0; }
  [data-theme] .cx-tools .cx-ask .btn { flex: 1 1 100%; min-height: 40px; }
  [data-theme] .cx-dock .cx-ask .btn { padding-left: 12px; gap: 6px; }
  [data-theme] .cx-dock .cx-own-tone { flex-basis: 100%; }
  [data-theme] .cx-dock .cx-tone { gap: 5px; }
  [data-theme] .cx-dock .cx-tone .cx-pick { padding-inline: 9px; }
  [data-theme] .cx-dock .cx-said { font-size: 14px; }
}
[data-theme] .cx-fold small { font: 400 12px/1 var(--mono); color: var(--muted); }
[data-theme] .cx-fold .cx-caret { width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
[data-theme] .cx-fold.is-open .cx-caret { margin-top: 3px; transform: rotate(-135deg); }
[data-theme] .cx-fold.is-open { border-color: #4a625c; background: var(--raise); color: var(--ink); }
[data-theme] .cx-more-body { display: grid; gap: 8px; }
[data-theme] .cx-more-body .cx-row { flex-wrap: nowrap; align-items: flex-start; }
[data-theme] .cx-k { flex: none; width: 74px; padding-top: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
[data-theme] .cx-set { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
[data-theme] .cx-voice.cx-pick { padding-inline: 9px 11px; }
[data-theme] .cx-voice.cx-pick.is-on { border-color: var(--v); background: color-mix(in srgb, var(--v) 16%, var(--bg)); color: var(--ink); box-shadow: 0 0 14px -6px var(--v); }
/* the AI as an outline of lake: it is there, priced, and never outshines honey */
[data-theme] .btn-ai-line { background: color-mix(in srgb, var(--ai) 8%, transparent); border-color: color-mix(in srgb, var(--ai) 55%, transparent); color: var(--ai-ink); box-shadow: none; }
[data-theme] .btn-ai-line:hover { background: color-mix(in srgb, var(--ai) 16%, transparent); border-color: var(--ai); }
[data-theme] .cx-review { border-radius: 12px; background: color-mix(in srgb, var(--ai) 10%, var(--sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 30%, transparent); }
[data-theme] .cx-chip.is-ai { background: color-mix(in srgb, var(--ai) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai) 18%, transparent); text-shadow: 0 0 14px color-mix(in srgb, var(--ai) 70%, transparent); }

/* the plan and Generate beside the script: two glass panels, the plan's line of light */
[data-theme] .cu-blue { border-color: var(--line); border-radius: 16px; background: linear-gradient(180deg, #1b2b28, #162422); }
[data-theme] .cu-blue-head .label:first-child { color: var(--soft); }
[data-theme] .cu-blue-open { color: var(--ink); text-decoration-color: var(--line-2); }
[data-theme] :is(.cu-axis-x, .cu-axis-y, .cu-axis-cap) { color: var(--muted); font-family: var(--mono); }
[data-theme] .sv-strip { gap: 3px; height: 4px; }
[data-theme] .sv-strip i { border-radius: 2px; box-shadow: 0 0 8px -1px var(--c); }
[data-theme] .sv-plan-sound { border-top-color: var(--line); }
[data-theme] .sv-plan-curve { height: auto; }
[data-theme] .sv-plan .curve-labels { margin-top: 8px; }
[data-theme] .cu-pin i { background: var(--ink); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px var(--ink); }
[data-theme] .cu-pin em { background: var(--ink); color: var(--bg); border-radius: 6px; }
[data-theme] .cu-facts { border-color: var(--line); }
[data-theme] .cu-gen { border-radius: 16px; padding: 18px; gap: 12px; }
[data-theme] .cu-gen-head { font: 600 19px/1.2 var(--sans); font-stretch: 88%; }
[data-theme] .cu-dock-meter { font-family: var(--mono); }
[data-theme] .sv-deeper { border-color: var(--line); border-radius: 16px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--rose) 11%, transparent), transparent 65%), var(--sheet); }
[data-theme] .sv-deeper-later { color: var(--muted); }

/* the palette and the spots, in both views */
[data-theme] .sv-spot { border-color: var(--line); border-radius: 16px; background: var(--wash); }
[data-theme] .sv-pal { border-radius: 12px; background: var(--sheet); box-shadow: var(--hair); }
[data-theme] :is(.sv-tab, .ad-tab) { border-color: var(--line-2); border-radius: 9px; background: var(--bg); color: var(--soft); }
[data-theme] :is(.sv-tab, .ad-tab):hover { background: var(--wash); color: var(--ink); }
[data-theme] :is(.sv-tab, .ad-tab).is-on { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 14%, var(--bg)); color: var(--ink); box-shadow: 0 0 18px -8px var(--c); }
[data-theme] :is(.sv-tab, .ad-tab) i { border-radius: 50%; box-shadow: 0 0 6px var(--c); }
[data-theme] .pk-style { border-left-width: 2px; }
[data-theme] .pk-style-name { color: color-mix(in srgb, var(--c) 45%, var(--ink)); font-weight: 500; letter-spacing: 0.12em; }
[data-theme] .pk-kit { border-top-color: var(--line); }
[data-theme] .pk-name { font-size: 19px; }
[data-theme] :is(.sv-ask, .ad-ask, .ad-made) { border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 9%, var(--sheet)), var(--sheet)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ai) 45%, transparent), var(--hair); }
[data-theme] :is(.sv-hand, .ad-hand, .ad-ours, .sv-write, .ad-write) { border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--free) 8%, var(--sheet)), var(--sheet)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--free) 40%, transparent), var(--hair); }
[data-theme] :is(.sv-ask, .sv-hand, .ad-ask, .ad-hand, .ad-made, .ad-ours) .field { background: var(--abyss); }
[data-theme] .sv-foot-btn { border-radius: 9px; color: var(--soft); }
[data-theme] .sv-foot-btn:hover { background: var(--wash); }

/* the guide: a chat over the work */
[data-theme] .cu-msg-you p { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-theme] .cu-msg-guide p { background: color-mix(in srgb, var(--ai) 12%, var(--sheet)); color: var(--ai-ink); font: 400 17px/1.35 var(--sans); }
[data-theme] .cu-guide-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai) 18%, transparent), 0 0 12px var(--ai); }
[data-theme] .cu-guide-foot { border-top-color: var(--line); }
[data-theme] .cu-guide-starter { border-radius: 9px; }

@container app (min-width: 700px) {
  [data-theme] .cu-desk { gap: 80px; padding-top: 48px; }
  [data-theme] .cu-main { gap: 72px; }
  [data-theme] .cu-main > .cs { margin: -28px 0 -40px; }
}
@container app (min-width: 1500px) {
  [data-theme] .cx-par { font-size: 24px; line-height: 1.45; }
}
@container app (max-width: 699px) {
  [data-theme] .cx-par { font-size: 19.5px; line-height: 1.45; }
  [data-theme] .cx-script { gap: 32px; }
}

/* ======================================================================================== */
/* Advanced: the timeline is the deepest ground, its clips lanterns in their colours            */
/* ======================================================================================== */
[data-theme] .ad-top .cu-title { line-height: 1.04; }
[data-theme] .ad-make { border-radius: 16px; }
[data-theme] .ad-stage { --paper: var(--ink); border-radius: 18px; background: var(--abyss); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 40px 90px -30px rgb(0 0 0 / 0.9); }
[data-theme] .ad-stage .label { color: var(--muted); }
[data-theme] .ad-stage-sum { font: 600 19px/1.2 var(--sans); font-stretch: 88%; }
[data-theme] .ad-play { border-color: var(--line-2); border-radius: 10px; background: var(--wash); }
[data-theme] .ad-play svg { background: var(--ink); color: var(--abyss); border-radius: 7px; }
[data-theme] .ad-row { border-top-color: rgb(255 255 255 / 0.05); }
[data-theme] .ad-th-top b { font: 600 14px/1.2 var(--sans); }
[data-theme] .ad-th small { color: var(--muted); }
[data-theme] .ad-sw { border-radius: 50%; width: 8px; height: 8px; box-shadow: 0 0 8px var(--c); }
[data-theme] .ad-ruler { color: var(--muted); font-family: var(--mono); }
/* the depth: each block's region a faint glow of its colour, the line over it lit */
/* each block's region a faint light of its colour, so the lit line over it leads */
[data-theme] .ad-region-tick { stroke: rgb(255 255 255 / 0.07); }
[data-theme] .ad-blk { border-radius: 8px; }
[data-theme] .ad-blk:hover { background: rgb(var(--lamp) / 0.045); }
[data-theme] .ad-blk.is-on { box-shadow: inset 0 0 0 1px rgb(var(--lamp) / 0.85), 0 0 26px -6px color-mix(in srgb, var(--depth-1) 60%, transparent); background: color-mix(in srgb, var(--depth-1) 8%, transparent); }
[data-theme] .ad-blk-name { font: 600 13px/1.15 var(--sans); }
[data-theme] .ad-blk { padding-bottom: 4px; }
[data-theme] .ad-blk-kind { font-family: var(--mono); color: var(--muted); }
/* the clips: each one a sound you can see, in its voice's tint, never a solid slab: a dark body, its
   own waveform and edge in the voice's colour, its first words over it where it is wide enough; the clip
   in hand ringed in the lamp's light and named beside it */
[data-theme] .ad-clip { top: 16px; bottom: 16px; display: flex; flex-direction: column; justify-content: center; min-width: 4px; padding: 0; border-radius: 5px; background: color-mix(in srgb, var(--c) 6%, var(--abyss)); background-clip: padding-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); font-family: var(--sans); line-height: 1.2; }
[data-theme] .ad-clip-wave { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; padding: 8px 1px; fill: var(--c); opacity: 0.85; }
[data-theme] .ad-clip.is-wide .ad-clip-text { flex: none; padding: 0 7px; font: 500 11.5px/1.25 var(--sans); color: var(--ink); }
[data-theme] .ad-clip:hover { filter: none; background: color-mix(in srgb, var(--c) 26%, var(--abyss)); background-clip: padding-box; }
[data-theme] .ad-clip.is-on { z-index: 2; background: color-mix(in srgb, var(--c) 32%, var(--abyss)); background-clip: padding-box; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--c), 0 0 20px -2px rgb(var(--lamp) / 0.5); }
[data-theme] .ad-clip.is-on .ad-clip-wave { opacity: 1; }
[data-theme] .ad-clip.is-dir { box-shadow: inset 0 -2px 0 var(--ember), inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }
[data-theme] .ad-clip.is-on.is-dir { box-shadow: inset 0 -2px 0 var(--ember), inset 0 0 0 1px var(--c), 0 0 20px -2px rgb(var(--lamp) / 0.5); }
[data-theme] .ad-clip-tag { position: absolute; top: auto; bottom: calc(100% - 4px); z-index: 5; width: max-content; max-width: 420px; padding: 6px 10px; border-radius: 7px; background: var(--abyss); box-shadow: inset 0 0 0 1px rgb(var(--lamp) / 0.35), 0 6px 18px rgb(0 0 0 / 0.6); color: var(--ink); font: 500 13px/1.3 var(--sans); white-space: normal; pointer-events: none; }
[data-theme] .ad-clip-tag.is-held { box-shadow: inset 0 0 0 1px rgb(var(--lamp) / 0.7), 0 6px 18px rgb(0 0 0 / 0.6); }
/* a block too narrow for its name across names it standing up, whole */
[data-theme] .ad-bed { border-radius: 6px; border-right-color: var(--abyss); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), color-mix(in srgb, var(--c) 10%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 0 18px -8px var(--c); }
[data-theme] .ad-bed-name { border-radius: 6px; background: color-mix(in srgb, var(--abyss) 85%, transparent); font: 500 12.5px/1.2 var(--sans); }
[data-theme] .ad-bed-wave { opacity: 0.3; }
[data-theme] .ad-cue span { border-radius: 6px; font: 500 12.5px/1.2 var(--sans); }
[data-theme] .ad-cue i { box-shadow: 0 0 8px var(--c); }
[data-theme] .ad-entrain-lane line { filter: drop-shadow(0 0 2px var(--c)); }
[data-theme] .ad-hz { color: var(--muted); }
[data-theme] .ad-fader-fill { box-shadow: 0 0 6px -1px var(--c); }
[data-theme] .ad-fader-thumb { background: linear-gradient(180deg, #fff, var(--ink)); }
/* the playhead: a line of the lamp's light, never red (red is Gami's eye alone), drawn under every
   label: the words over the timeline sit above it, each with a halo of the night around its letters */
[data-theme] .ad-playhead:not(.ad-playhead-close) { top: 26px; }
[data-theme] .ad-playhead { z-index: 0; width: 1.5px; background: rgb(var(--lamp) / 0.85); box-shadow: 0 0 8px rgb(var(--lamp) / 0.45); }
[data-theme] .ad-playhead::before { top: -3px; left: -5px; width: 11px; height: 11px; border-radius: 3px; background: var(--ink); transform: rotate(45deg); box-shadow: 0 0 10px rgb(var(--lamp) / 0.6); }
[data-theme] .ad-playhead-close { background: rgb(var(--lamp) / 0.5); box-shadow: none; }
[data-theme] .ad-playhead-close::before { background: rgb(var(--lamp) / 0.7); box-shadow: none; }
[data-theme] :is(.ad-blk, .ad-ruler span, .ad-bed-name, .ad-cue span, .ad-cl) { z-index: 1; }
[data-theme] :is(.ad-lane-empty, .ad-hz) { position: relative; z-index: 1; }
[data-theme] :is(.ad-blk-name, .ad-blk-kind, .ad-ruler span, .ad-hz, .ad-lane-empty) { text-shadow: 0 0 2px var(--abyss), 0 0 4px var(--abyss), 0 0 6px var(--abyss); }
[data-theme] .ad-stage :is(.ad-mini, .ad-icon) { border-color: var(--line-2); background: var(--wash); color: var(--ink); }
[data-theme] .ad-stage .ad-mini:hover { background: var(--raise); }
[data-theme] .ad-stage .ad-mini.is-on { border-color: var(--ink); background: var(--ink); color: var(--abyss); }
[data-theme] .ad-stage .free-badge { color: var(--free-ink); }
[data-theme] .ad-explain { border-radius: 12px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme] .ad-explain p { color: var(--soft); }
[data-theme] .ad-what { border-color: var(--line-2); }
[data-theme] .ad-close { border-top-color: var(--line); }
[data-theme] .ad-cl-bar { border-radius: 3px; box-shadow: 0 0 10px -2px var(--c); }
[data-theme] .ad-cl.is-on .ad-cl-bar { box-shadow: 0 0 0 2px var(--abyss), 0 0 0 3.5px var(--ink), 0 0 14px var(--c); }
[data-theme] .ad-cl-text { font: 400 17px/1.5 var(--sans); }
[data-theme] .ad-c:hover { background: rgb(var(--lamp) / 0.08); box-shadow: 0 0 0 3px rgb(var(--lamp) / 0.08); }
[data-theme] .ad-c.is-on { background: rgb(var(--lamp) / 0.2); box-shadow: none; text-shadow: 0 0 14px rgb(var(--lamp) / 0.5); }
[data-theme] .ad-cl-dir { color: var(--muted); font-family: var(--mono); }
[data-theme] .ad-new-lane { border-radius: 9px; }
/* under the timeline: the palette and the block in focus, glass on the night */
[data-theme] .ad-card { border-color: var(--line); border-radius: 16px; background: linear-gradient(180deg, #1a2a27, var(--sheet) 200px); }
[data-theme] .ad-focus { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 70%, transparent), var(--lift); }
[data-theme] .ad-focus-k > i { border-radius: 50%; box-shadow: 0 0 8px var(--c); }
[data-theme] .ad-focus-name { font-size: 34px; }
[data-theme] .ad-ctl { border-color: var(--line); }
[data-theme] :is(.ad-mini, .ad-chip, .ad-lock, .ad-remove, .ad-icon) { border-color: var(--line-2); border-radius: 9px; background: var(--wash); color: var(--ink); }
[data-theme] :is(.ad-mini, .ad-chip):hover { background: var(--raise); }
[data-theme] :is(.ad-mini, .ad-chip).is-on { border-color: rgb(var(--lamp) / 0.75); background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); color: var(--ink); }
[data-theme] .ad-line.is-open, [data-theme] .ad-line-main:hover { background: var(--wash); }
[data-theme] .ad-line-text { font: 400 18px/1.7 var(--sans); }
[data-theme] .ad-word:hover { background: var(--raise); }
[data-theme] .ad-word.is-picked { background: var(--ink); color: var(--bg); }
[data-theme] .ad-dir { border-color: var(--line-2); border-radius: 9px; background: var(--wash); }
[data-theme] .ad-dir.is-on { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 14%, transparent); }
[data-theme] .ad-band { background: color-mix(in srgb, var(--ember) 18%, transparent); }
[data-theme] .ad-snd { border-color: var(--line); background: var(--bg); }
[data-theme] .ad-take { border-color: var(--line-2); border-radius: 10px; background: var(--wash); }
[data-theme] .ad-take.is-on { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, var(--sheet)); color: var(--ink); }
[data-theme] .ad-note { border-radius: 12px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme] .ad-read-blocks i, [data-theme] .ad-read-tracks i { border-radius: 50%; box-shadow: 0 0 8px var(--c); }
[data-theme] :is(.ad-read-blocks b, .ad-read-tracks b, .ad-read-name) { font-weight: 600; font-stretch: 88%; }
[data-theme] .ad-read-line { font: 400 18px/1.65 var(--sans); }

/* ======================================================================================== */
/* The ground goes as deep as the session: under each part the night darkens from how deep it  */
/* starts to how deep it ends, the full width of the screen, and lightens again on the way back */
/* ======================================================================================== */
[data-theme] .cx-block {
  border-image: linear-gradient(180deg, rgb(1 3 3 / calc(var(--d0, 0) * 0.82)), rgb(1 3 3 / calc(var(--d1, 0) * 0.82))) fill 0 / 0 / 20px 100vw; }
@container app (max-width: 699px) {
  [data-theme] .cx-block { border-image-outset: 16px 100vw; }
}
[data-theme] .ad-stage-sum { font-weight: 500; font-stretch: 100%; letter-spacing: -0.005em; word-spacing: 0.06em; }

/* ======================================================================================== */
/* The rest of the app, in the same night: honey only on the way forward, the plain panels   */
/* glass, a choice lit by the lamp, and what belongs to someone else (Stripe, a mail) as is  */
/* ======================================================================================== */
/* a part lent into a raised panel keeps the night under it */
[data-theme] .pub { --paper: var(--bg); --deep: var(--ink); }
[data-theme] .pub-reel { background: var(--abyss); }
[data-theme] .pub-reel::after { background: color-mix(in srgb, var(--ai) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 35%, transparent); }
[data-theme] .pub-checking { border-color: color-mix(in srgb, var(--ai) 60%, transparent); box-shadow: 0 0 30px -12px var(--ai); }
[data-theme] .pub-mark { background: var(--raise); color: var(--ink); }
[data-theme] .pub-rule { border-left-color: var(--ink); background: var(--wash); }
[data-theme] .app .pub-rule .label { color: var(--soft); }
[data-theme] .pub-tile { background: var(--wash); border-color: var(--line-2); }
[data-theme] .pub-tile.is-on .pub-radio { background: var(--abyss); }

/* the honey that was decoration is the lamp's now: the way forward keeps it alone */
[data-theme] :is(.in-title i, .ex-cta .ex-cta-title i) { color: var(--ink); }
[data-theme] :is(.ex-cta, .in-keep, .in-way.is-go) { background: radial-gradient(120% 90% at 0% 0%, rgb(var(--lamp) / 0.07), transparent 60%), linear-gradient(180deg, var(--panel), var(--sheet)); color: var(--soft); border: 1px solid var(--line-2); box-shadow: var(--lift); }
[data-theme] :is(.ex-cta .label, .in-copy-state, .in-go-badge, .in-dock-say span, .in-dock-fine, .ex-from, .ex-tree-wish, .wi-lin-wish, .wi-lin-card.is-fork .label, .ex-rank li:first-child .ex-rank-n, .lb-plan-note b, .is-offer .lb-plan-k, .cm-badge-pill span) { color: var(--soft); }
[data-theme] .in-keep-lead b { color: var(--ink); }
[data-theme] :is(.in-copy-state, .in-go-badge) { background: var(--raise); }
[data-theme] :is(.ex-item.is-fork .ex-item-foot, .lb-pay-ic.is-plan, .ex-people li:nth-child(4n+1) .avatar, .wi-faces .avatar:nth-child(1), .wi-people li:nth-child(4n+1) .avatar, .cm-badge.has-suggest .cm-badge-pill, .cm-pill-suggest, .wi-lin-card.is-fork) { background: var(--raise); color: var(--ink); }
[data-theme] :is(.cm-pill-suggest, .wi-lin-card.is-fork) { border-color: var(--line-2); }
[data-theme] :is(.ex-rank-body i) { background: var(--ink); opacity: 0.5; }
[data-theme] .ex-tree-kids li::before, [data-theme] .ex-tree-kids li:not(:last-child)::after { border-color: var(--line-2); }
[data-theme] .cm-tip svg { color: var(--soft); }
[data-theme] :is(.sv-refs, .ad-refs) { background: var(--wash); color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme] .in-dock { border-top-color: var(--line-2); background: color-mix(in srgb, var(--panel) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* the credits: the plan the better deal, said by a lamp-lit card and its tag; a choice lit by the lamp */
[data-theme] .pw-plan { border: 1px solid var(--line-2); background: radial-gradient(110% 80% at 0% 0%, rgb(var(--lamp) / 0.08), transparent 55%), linear-gradient(180deg, var(--panel), var(--sheet)); box-shadow: var(--lift); }
[data-theme] .pw-plan:hover { border-color: #46605a; }
[data-theme] :is(.pw-plan.is-on, .pw-pack.is-on, .pw-custom.is-on) { border-color: rgb(var(--lamp) / 0.75); box-shadow: 0 0 0 1px rgb(var(--lamp) / 0.3), 0 0 26px -8px rgb(var(--lamp) / 0.45); }
[data-theme] .pw-plan.is-on { background: radial-gradient(110% 80% at 0% 0%, rgb(var(--lamp) / 0.12), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--ink) 7%, var(--panel)), var(--sheet)); }
[data-theme] :is(.pw-pack.is-on, .pw-custom.is-on) { background: color-mix(in srgb, var(--ink) 9%, var(--sheet)); }
[data-theme] .pw-tag { background: var(--ink); color: var(--abyss); }
[data-theme] .pw-plan .pw-way-k { color: var(--soft); }
/* a radio reads as a radio: the ones not chosen an empty ring, the one chosen a ring with its dot */
[data-theme] .pw-radio { border: 1.5px solid var(--muted); background: transparent; }
[data-theme] .is-on > .pw-radio { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4.5px, transparent 5px); box-shadow: 0 0 10px -2px rgb(var(--lamp) / 0.5); }
[data-theme] .pw-pack.is-on .pw-radio { background: radial-gradient(circle, var(--ink) 0 3.5px, transparent 4px); }
/* every pack the same three lines: the price, the credits, what of them is bonus */
[data-theme] .pw-pack-credits em { display: block; margin-top: 1px; }
[data-theme] .pw-plan-facts li { text-wrap: balance; }
[data-theme] .pw-plan-more { background: var(--wash); color: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme] .pw-plan-more b { color: var(--ink); }
[data-theme] .pw-plan-facts { border-top-color: var(--line-2); }
[data-theme] :is(.pw-pack, .pw-custom) { background: var(--wash); border-color: var(--line-2); }
[data-theme] .pw-pack:hover { border-color: #46605a; }
[data-theme] .pw-custom-input:focus { border-bottom-color: var(--ink); }
[data-theme] .pw-dock { background: color-mix(in srgb, var(--panel) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line-2); box-shadow: var(--hair), 0 -10px 40px rgb(0 0 0 / 0.55); }
[data-theme] .pd-ring { stroke: var(--ink); filter: drop-shadow(0 0 6px rgb(var(--lamp) / 0.6)); }
[data-theme] .pd-next-t .label, [data-theme] .pd-next-bill { color: var(--panel-dim); }
[data-theme] .lb-plan.is-offer { border: 1px solid var(--line-2); background: radial-gradient(110% 80% at 0% 0%, rgb(var(--lamp) / 0.08), transparent 55%), var(--sheet); }
[data-theme] .lb-plan-tag { background: var(--ink); color: var(--abyss); }

/* Stripe's checkout is Stripe's page: its own light look and its own dark button, never the app's tokens */
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) { --deep: #1d1d22; --deep-2: #33333b; --paper: #fff; --ink: #1d1d22; --soft: #4a4950; --muted: #4f4e55; --line: #e3e1dc; --sheet: #fff; --wash: #f7f6f3; background: #fff; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) .co-pay:disabled { background: #e7e5e0; color: #8a8991; }

/* a mail as it arrives in their inbox: the mail's own light page */
[data-theme] .si-mail { --ink: #1d1d22; --soft: #4a4950; --muted: #4f4e55; --line: #e3e1dc; --paper: #f7f6f3; --sheet: #fff; color: #1d1d22; background: #fff; }

/* a chosen key in a set of two or three: lit by the lamp, its small words still read */
[data-theme] .sh-kinds { background: var(--abyss); border-color: var(--line); box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5); }
[data-theme] .sh-kind.is-on { background: linear-gradient(180deg, #2a3e39, var(--raise)); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 1px 3px rgb(0 0 0 / 0.6); }
[data-theme] .sh-kind.is-on small { color: var(--soft); }
[data-theme] :is(.lp-pill, .lp-cue) { background: color-mix(in srgb, var(--raise) 94%, transparent); color: var(--ink); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--hair), 0 12px 30px -10px rgb(0 0 0 / 0.7); }
[data-theme] :is(.lp-pill, .lp-cue):hover { background: var(--raise); }
[data-theme] .lp-pill-fill { background: rgb(var(--lamp) / 0.12); }

/* the library: a session's card is the night with its plan drawn in light */
[data-theme] .lb-art { position: relative; min-height: 150px; padding: 16px; overflow: hidden; background: var(--abyss); align-items: end; }
[data-theme] .lb-art > .lb-curve { position: absolute; inset: 0; height: auto; min-height: 0; }
[data-theme] .lb-art > .lb-play { position: relative; z-index: 1; align-self: end; background: rgb(9 16 15 / 0.62); border-color: rgb(var(--lamp) / 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme] .lb-time { z-index: 1; top: 12px; right: 12px; padding: 4px 8px; border-radius: 6px; background: rgb(5 9 8 / 0.72); color: var(--ink); font: 500 11.5px/1 var(--mono); }
[data-theme] .lb-sheet-warn { background: var(--wash); color: var(--soft); box-shadow: inset 2px 0 0 var(--signal-text); }
/* deleting is said in the eye's colour, never filled with it: the eye stays the one red thing */
[data-theme] .btn-signal { background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: color-mix(in srgb, var(--signal) 60%, transparent); color: var(--signal-text); }
[data-theme] .btn-signal:hover { background: color-mix(in srgb, var(--signal) 20%, transparent); }

/* what is yours, written in: a sage beam down its side, not a green slab */
[data-theme] .si-kept { background: linear-gradient(90deg, color-mix(in srgb, var(--free) 10%, var(--sheet)), var(--sheet) 70%); box-shadow: inset 2px 0 0 var(--free), var(--hair); }
[data-theme] .ge-ready .player { border-color: var(--line-2); box-shadow: var(--lift); }

/* sage means free and nothing else: counts and the studio's mark are plain light */
[data-theme] :is(.sp-stat-forks, .sp-stat-listens) { background: var(--wash); color: var(--soft); }
[data-theme] :is(.sp-stat-forks, .sp-stat-listens) :is(svg, b) { color: var(--ink); }
[data-theme] .ex-craft { color: var(--soft); }
[data-theme] .ex-craftcard { background: var(--wash); }
[data-theme] .ex-craftcard p { color: var(--soft); }

/* the slow beat is the music's, drawn in its colour as in the editor */
[data-theme] .bt-wave path { stroke: var(--mauve); }
[data-theme] :is(.bt-hz .label, .bt-phase-hz) { color: var(--mauve); }
[data-theme] .bt-phase-depth { white-space: nowrap; }

/* a dot riding the plan is the playhead: lamp light, never red */
[data-theme] .curve-dot, [data-theme] .lp-dock .curve-dot { --dot: var(--ink); --ring: var(--bg); filter: drop-shadow(0 0 5px rgb(var(--lamp) / 0.8)); }
[data-theme] .lp-example { margin-top: 18px; font-size: 11.5px; }
/* lane words sit on a small night chip, so the playhead passes behind them, never through */
[data-theme] .ad-desk :is(.ad-hz, .ad-lane-empty) { background: rgb(5 9 8 / 0.92); padding: 3px 6px; border-radius: 4px; }

/* a destructive act is outlined in the warning colour, never a filled warm button beside honey */
[data-theme] .lb-confirm { background: color-mix(in srgb, var(--signal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 60%, transparent); color: var(--signal-text); }
[data-theme] .lb-confirm:hover { background: color-mix(in srgb, var(--signal) 20%, transparent); }

/* the checkout drawn as Stripe draws it, its greys deep enough to read (AAA on white) */
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) :is(.co-row-note, .co-legal, .co-or, .co-test, .co-static svg) { color: #4f4e55; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) :is(.co-brands i, .co-field-label, .co-test code) { color: #4f4e55; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) :is(.co-secure, .co-row-bonus span:last-child) { color: #1f5139; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) .co-test span { color: #66511f; }
[data-theme] .lp-cue .lp-ring { background: rgb(var(--lamp) / 0.1); }
[data-theme] .lp-hero :is(.appbar-brand, .appbar-back, .appbar-you, .appbar-signin, .appbar-credits) { color: var(--ink); }
/* no dawn in Lantern: the night opens into the lit page below, a lamp rising behind the words */
[data-theme] .lp-dawn { background: radial-gradient(60% 50% at 50% 40%, rgb(var(--lamp) / 0.1), transparent 70%), linear-gradient(to bottom, var(--night), var(--bg)); }
[data-theme] .lp-dawn p { color: var(--ink); text-shadow: 0 0 40px rgb(var(--lamp) / 0.35); }
[data-theme] .lp-dawn p i { color: var(--soft); }

/* readable on the night: the guide's words in lake ink, numbers dark on lake, Apple's button its own black */
[data-theme] .lp-bubble { color: var(--ai-ink); }
[data-theme] :is(.lp-mark, .lp-ln-n) { color: #04131f; border-color: var(--bg); }
[data-theme] .sp-family-n { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-theme] .si-apple { background: #000; border-color: var(--line-2); color: #fff; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) :is(.co-top, .co-what-label) { color: #4f4e55; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) .co-test span { color: #5a4619; }
[data-theme] .lp-steps li.is-on span { color: #04131f; }
[data-theme] .lp-steps li.is-on.is-hand span { color: #0b1f14; }
[data-theme] .lp-av { background: #c9c7bd; color: #101b19; }
[data-theme] .cx-pick.is-on { color: #fff; }

/* in the close lane the words paint over the playhead, which passes behind them */
[data-theme] .ad-close-lane > * { position: relative; z-index: 1; }
[data-theme] .ad-close-lane :is(.ad-c, .ad-c *) { text-shadow: 0 0 3px var(--abyss), 0 0 6px var(--abyss); }
/* the maker and the original are read whole: the line wraps rather than cut */
[data-theme] .ex-rank-body span { white-space: normal; overflow: visible; text-wrap: pretty; }
[data-theme] .cm-metrics span { white-space: normal; overflow: visible; }
[data-theme] .app:is([data-screen="checkout"], [data-screen="portal"]) :is(.co-what-total small, .co-row-then, .co-method-row .co-method-head span:last-child) { color: #4f4e55; }

/* the listening dock in its band: glass on the night, its words and its play key in full ink */
[data-theme] .lp-dock { background: var(--wash); border-color: var(--line-2); color: var(--ink); box-shadow: var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme] .lp-dock-pp { background: var(--ink); color: var(--abyss); }
[data-theme] .lp-dock-pp:hover { background: #fff; }
[data-theme] .lp-dock-time { color: var(--soft); }

/* ======================================================================================== */
/* One grid: every screen sits in the same container, the same gutter and the same width, so */
/* the left edge never jumps from page to page; a one-column flow is a narrower column of it,  */
/* centred                                                                                    */
/* ======================================================================================== */
[data-theme] .app { --gut: 20px; --gw: 1280px; --gw-narrow: 840px; }
@container app (min-width: 700px) { [data-theme] .app { --gut: 56px; } }
[data-theme] .wrap { width: 100%; max-width: calc(var(--gw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
[data-theme] :is(.st, .si, .pd, .cm-thread, .lg, .ge-desk.is-alone).wrap { max-width: calc(var(--gw-narrow) + 2 * var(--gut)); }
@container app (min-width: 700px) {
  /* the studio's timeline runs the grid's full width, its parts on the same edges */
  [data-theme] :is(.ad-top, .ad-below, .ad-below-2, .ad-desk > .ad-back, .ad-stage) { margin-inline: max(var(--gut), calc((100% - var(--gw)) / 2)); }
  [data-theme] .cu-desk { grid-template-columns: minmax(0, 1fr) 400px; justify-content: stretch; gap: 64px; }
  [data-theme] .ge-desk.is-alone { grid-template-columns: minmax(0, 1fr); }
  [data-theme] .st-top { max-width: none; }
}
@container app (min-width: 1500px) { [data-theme] .cu-desk { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; } }
@container app (min-width: 700px) { [data-theme] .lp-stage { max-width: calc(var(--gw) + 2 * var(--gut)); padding-inline: var(--gut); } }

/* ======================================================================================== */
/* One button system: honey the way forward, lake what the AI does, one neutral key of the     */
/* lamp's glass for everything else that acts, a ghost for the way back; play is that key too, */
/* round. Nothing is ever filled cream, and every sheet closes with the same key               */
/* ======================================================================================== */
[data-theme] .app .btn.btn-primary,
[data-theme] :is(.player-play, .lb-play, .lp-dock-pp, .lp-play-disc, .ad-take-play, .lp-hero-pp) {
  background: linear-gradient(180deg, rgb(var(--lamp) / 0.15), rgb(var(--lamp) / 0.08)); border: 1px solid rgb(var(--lamp) / 0.22); color: var(--ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.5); }
[data-theme] .app .btn.btn-primary:hover,
[data-theme] :is(.player-play, .lb-play, .lp-dock-pp, .ad-take-play, .lp-hero-pp):hover { background: linear-gradient(180deg, rgb(var(--lamp) / 0.22), rgb(var(--lamp) / 0.12)); border-color: rgb(var(--lamp) / 0.34); }
[data-theme] .ad-take.is-on .ad-take-play { background: rgb(var(--lamp) / 0.24); color: var(--ink); }
[data-theme] .ad-play svg { background: rgb(var(--lamp) / 0.16); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--lamp) / 0.24); }
/* the one close key of every sheet, panel and popover: a square of the same glass, its cross drawn */
[data-theme] :is(.lb-close, .cs-x, .cx-x, .cu-guide-close, .sv-spot-x) {
  display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--wash); color: var(--soft); font: 400 20px/1 var(--sans); box-shadow: var(--hair); cursor: pointer; }
[data-theme] :is(.lb-close, .cs-x, .cx-x, .cu-guide-close, .sv-spot-x):hover { background: var(--raise); color: var(--ink); border-color: #4a625c; }
[data-theme] .lb-close { top: 18px; right: 18px; }

/* a destructive act is never red: red is Gami's eye alone. It is said by its words, a bin before them,
   and a second, deliberate step; the key is the neutral one's outline, never filled, never warm */
[data-theme] :is(.lb-confirm, .btn-signal, .lb-danger) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1.5px solid rgb(var(--lamp) / 0.55); color: var(--ink); box-shadow: none; }
[data-theme] :is(.lb-confirm, .btn-signal, .lb-danger):hover { background: rgb(var(--lamp) / 0.08); border-color: var(--ink); }
[data-theme] :is(.lb-confirm, .lb-danger) svg { width: 18px; height: 18px; flex: none; }
[data-theme] .lb-danger { border-radius: 11px; }
[data-theme] .lb-sheet-warn { background: var(--wash); color: var(--soft); box-shadow: inset 2px 0 0 var(--muted); }
[data-theme] .lb-gone li::before { background: var(--muted); }
[data-theme] .lb-typed { border-color: var(--line-2); }
/* what was refused is said plainly in full ink, marked by a ring with a stop in it, never in red */
[data-theme] { --signal: #f2eee6; --signal-text: #f2eee6; }
[data-theme] :is(.why, .sv-why, .ad-why, .limit.is-over, .pw-custom-note.is-warn, .sv-left, .ad-left-out)::before {
  content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 0.45em; border: 1.5px solid currentColor; border-radius: 50%;
  font: 700 0.72em/1 var(--mono); vertical-align: 0.1em; }
[data-theme] .cu-rec { background: var(--ai); box-shadow: 0 0 8px var(--ai); }
[data-theme] .pub-then { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }

/* ======================================================================================== */
/* The script's hero: the session itself. Gami whole and turning slowly behind it; once it plays */
/* the title is as large as before it played, then each line takes it over, and under the words */
/* the plan you are inside, play and pause, where you are and how long it goes                  */
/* ======================================================================================== */
/* the hero's words are lit, never the ground: --paper is the dark ground in Lantern, and the hero draws
   its title and words in --paper, so inside it --paper is the ink, AAA on the night */
[data-theme] .lp-hero { background: radial-gradient(70% 60% at 50% 42%, #18302a 0%, #0c1715 58%, var(--abyss) 100%); --paper: var(--ink); }
/* Gami behind the session, faint in its folds and never in its eye: the eye keeps its red at every
   size; it never stands behind the words. On a phone, whose title fills the width, it rises from the
   lower corner under them; on a wider screen it stands in a side band (--gami wide) that no title or
   spoken line reaches: they wrap before it, and on a narrow window they are set smaller */
[data-theme] .lp-hero-gami { position: absolute; left: -46px; right: auto; top: auto; bottom: -52px; width: auto; height: auto; opacity: 1; transform: none; pointer-events: none; }
[data-theme] .lp-hero-gami svg { display: block; width: 190px; height: auto; transform-origin: 61.23% 60.25%; }
[data-theme] .lp-hero-gami svg path { opacity: 0.13; }
[data-theme] .lp-hero-gami svg circle { filter: drop-shadow(0 0 6px rgb(228 87 46 / 0.55)); }
[data-theme] .lp-line.lp-line-title { font: var(--display) 1em/1 var(--sans); font-style: normal; letter-spacing: var(--title-track); color: var(--ink); }
/* the line spoken and the title before it fit the room between the session's name and the player
   (half the screen less the band over it): the longer the line (--n characters), the smaller it is set,
   as n characters need room in proportion to n times the size squared; never larger than its own size */
[data-theme] .lp-line { font-size: min(34px, calc((50cqh - 140px) * 1.4 / sqrt(var(--n, 1)))); }
[data-theme] .lp-line.lp-line-title { font-size: min(50px, calc((50cqh - 140px) * 1.54 / sqrt(var(--n, 1)))); }
/* the words and the plan are one group at the middle of the screen: the line just over the player */
[data-theme] .lp-words { place-items: end center; padding-bottom: calc(50cqh + 10px); }
[data-theme] .lp-hero-plan { position: absolute; left: 0; right: 0; bottom: calc(50cqh - 150px); margin-inline: auto; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; width: calc(100% - 32px); max-width: 860px; padding: 14px 16px 12px; border: 1px solid var(--line-2); border-radius: 18px; background: color-mix(in srgb, #0f1b19 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--hair), 0 30px 60px -30px rgb(0 0 0 / 0.9); }
[data-theme] .lp-hero-pp { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; }
[data-theme] .lp-hero-pp svg { width: 22px; height: 22px; }
[data-theme] .lp-hero-curve { position: relative; min-width: 0; }
[data-theme] .lp-hero-curve .curve { display: block; width: 100%; height: 56px; }
[data-theme] .lp-hero-where { grid-column: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 14px; }
[data-theme] .lp-hero-where .label { color: var(--muted); }
[data-theme] .lp-hero-where b { font-weight: 600; color: var(--ink); }
[data-theme] .lp-hero-time { margin-left: auto; font: 400 12.5px/1 var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
[data-theme] .lp-hero .lp-cue { bottom: 18px; }
@container app (min-width: 700px) {
  [data-theme] .lp-hero { --gami: min(30cqh, 18cqw, 230px); }
  [data-theme] .lp-hero-gami { left: auto; right: 2.5%; top: 21%; bottom: auto; }
  [data-theme] .lp-hero-gami svg { width: var(--gami); }
  [data-theme] .lp-hero :is(.lp-title, .lp-line) { max-width: min(1040px, calc(100cqw - 2 * (2.5cqw + var(--gami) + 24px))); }
  [data-theme] .lp-hero .lp-title { font-size: min(104px, 8.4cqw); }
  [data-theme] .lp-line { font-size: min(58px, calc((50cqh - 162px) * 1.96 / sqrt(var(--n, 1)))); }
  [data-theme] .lp-line.lp-line-title { font-size: min(112px, 9cqw, calc((50cqh - 162px) * 2.16 / sqrt(var(--n, 1)))); line-height: 0.95; }
  [data-theme] .lp-words { padding-bottom: calc(50cqh + 14px); }
  [data-theme] .lp-hero-plan { grid-template-columns: auto minmax(0, 1fr) 210px; grid-template-rows: auto; bottom: calc(50cqh - 152px); gap: 20px; padding: 16px 22px 14px 16px; }
  [data-theme] .lp-hero-pp { grid-row: auto; width: 60px; height: 60px; }
  [data-theme] .lp-hero-curve .curve { height: 64px; }
  [data-theme] .lp-hero-where { grid-column: 3; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 18px; }
  [data-theme] .lp-hero-time { margin-left: 0; font-size: 13px; }
}
/* the app bar stays over the whole script, the hero and every chapter, as on every other page */
[data-theme] .lp-bar { position: sticky; top: 0; z-index: 6; height: 0; }
[data-theme] .lp-bar > .appbar { position: relative; }
/* the example lines are all there to read; the one the AI has written so far is numbered in lake */
[data-theme] .lp-ln { background: var(--sheet); border-color: var(--line); }
[data-theme] .lp-ln.is-on { border-color: var(--line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--ai) 6%, var(--sheet)), var(--sheet)); }
[data-theme] .lp-ln:not(.is-on) .lp-ln-n { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1px var(--line-2); }
[data-theme] .lp-ln:not(.is-on) .lp-ln-t { color: var(--soft); }
[data-theme] .lp-ln:not(.is-on) .lp-ln-t em { background: transparent; box-shadow: none; color: var(--soft); }
/* on a phone the dock names where the session is in plain words, whole, beside the time */
@container app (max-width: 699px) {
  [data-theme] .lp-dock-phase { overflow: visible; font: 500 12px/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-overflow: clip; }
}
/* every chapter keeps the bar's height free at its top, so the bar never covers a word of it */
[data-theme] .lp-stage { padding-top: 76px; }
/* both columns start together under the bar: the copy and what it shows top-aligned, never centred apart */
@container app (min-width: 700px) {
  [data-theme] .lp-stage { padding-top: 104px; align-items: start; }
  [data-theme] .lp-show { height: auto; justify-content: flex-start; }
  [data-theme] .lp-craft { justify-content: flex-start; }
  [data-theme] .lp-craft .lp-example { margin-top: 14px; }
  [data-theme] .lp-chat { height: min(560px, calc(100cqh - 210px)); }
  [data-theme] .lp-craft .lp-ln { padding-block: 9px; }
  [data-theme] .lp-craft .lp-ln-t { font-size: 18.5px; }
}
@container app (max-width: 699px) {
  [data-theme] .lp-stage { padding-top: 70px; gap: 10px; }
  [data-theme] .lp-r { height: 27px; }
  [data-theme] .lp-card-line { font-size: 16.5px; margin-bottom: 4px; }
  [data-theme] .lp-tune { gap: 6px; }
  [data-theme] .lp-craft :is(.lp-ln, .lp-mark):nth-child(n+2) { display: none; }
}
[data-theme] .lp-msg-you { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ======================================================================================== */
/* Every session its own picture (K.art): its kind's hue over the night, its sound's texture, */
/* its plan folded like paper, and the depth line lit along the folds                         */
/* ======================================================================================== */
[data-theme] .art { display: block; width: 100%; height: 100%; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--h) 30%, #0b1513), color-mix(in srgb, var(--h) 8%, #08100f) 55%, #050908); }
[data-theme] .art-tex { opacity: 0.2; }
[data-theme] .art-line { stroke-width: 1.8; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--depth-1) 60%, transparent)); }
[data-theme] .art-dot { --dot: var(--ink); --ring: var(--abyss); filter: drop-shadow(0 0 5px rgb(var(--lamp) / 0.8)); }
[data-theme] .card { position: relative; }
[data-theme] .card-art, [data-theme] .ex-item .card-art { position: relative; height: 150px; padding: 0; overflow: hidden; background: var(--abyss); border-bottom: 1px solid var(--line); }
[data-theme] .card-min { z-index: 1; top: 12px; right: 12px; padding: 4px 8px; border-radius: 6px; background: rgb(5 9 8 / 0.72); color: var(--ink); font: 500 11.5px/1 var(--mono); }
/* pointed at, a card lifts its picture and offers to play it there and then */
[data-theme] .card-play { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: none; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgb(9 16 15 / 0.62); border: 1px solid rgb(var(--lamp) / 0.5); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.6); }
[data-theme] .card-play:hover { background: rgb(9 16 15 / 0.8); border-color: var(--ink); }
[data-theme] .card-play svg { width: 20px; height: 20px; margin-left: 2px; }
[data-theme] .card:hover .card-play { display: grid; }
[data-theme] .card:hover .art { filter: brightness(1.18) saturate(1.1); }
[data-theme] .ex-item:has(.card:hover) { border-color: #46605a; box-shadow: 0 0 0 1px rgb(var(--lamp) / 0.12), var(--lift); }
[data-theme] .card:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line-2); }

/* a session's numbers: one even row of three cells, the heart the one that can be pressed */
[data-theme] .sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--wash); overflow: hidden; box-shadow: var(--hair); }
[data-theme] .sp-stats > .sp-stat { justify-content: center; gap: 6px; min-width: 0; min-height: 46px; padding: 6px 8px; border: 0; border-radius: 0; background: transparent; color: var(--soft); white-space: nowrap; }
[data-theme] .sp-stats > .sp-stat + .sp-stat { border-left: 1px solid var(--line); }
[data-theme] .sp-stats > .sp-stat :is(svg, b) { color: var(--ink); }
[data-theme] .sp-stats > button.sp-stat:hover { background: var(--sheet); }
[data-theme] .sp-stats > button.sp-stat.is-on { background: rgb(var(--lamp) / 0.1); color: var(--ink); box-shadow: inset 0 -2px 0 rgb(var(--lamp) / 0.7); }
[data-theme] .bt-art { position: relative; margin: 0; height: 200px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--abyss); box-shadow: var(--lift); }
[data-theme] .bt-art figcaption { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 7px 10px; border-radius: 8px; background: rgb(5 9 8 / 0.72); font-size: 13px; color: var(--ink); }
[data-theme] .bt-art figcaption .label { color: var(--soft); }
/* the session made: its own picture first, its name on it, then the player */
[data-theme] .ge-art { position: relative; margin: 0 0 4px; height: 220px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--abyss); box-shadow: var(--lift), 0 0 60px -30px var(--h, transparent); }
[data-theme] .ge-art figcaption { position: absolute; left: 18px; top: 16px; display: grid; gap: 6px; max-width: 70%; padding: 10px 12px; border-radius: 10px; background: rgb(5 9 8 / 0.72); }
[data-theme] .ge-art figcaption b { font: 600 22px/1.15 var(--sans); font-stretch: 88%; color: var(--ink); }
[data-theme] .ge-art figcaption .label { color: var(--soft); }
/* the hero's player rides the foot of the picture: play, the part playing, the time */
[data-theme] .ge-art.ge-hero { height: 300px; }
[data-theme] .ge-hero-play { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 40px; background: rgb(5 9 8 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-theme] .ge-hero-play .player-play { width: 52px; height: 52px; }
[data-theme] .ge-hero-now { display: grid; gap: 4px; }
[data-theme] .ge-hero-now b { font: 600 16px/1.1 var(--sans); color: var(--ink); }
[data-theme] .ge-hero-now span { font: 400 12.5px/1 var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
@container app (max-width: 699px) { [data-theme] .ge-art.ge-hero { height: 240px; } [data-theme] .ge-hero-play { left: 12px; bottom: 12px; } }
@container app (max-width: 699px) { [data-theme] .ge-art { height: 200px; } [data-theme] .ge-art figcaption { left: 12px; top: 12px; gap: 4px; padding: 8px 10px; } [data-theme] .ge-art figcaption b { font-size: 17px; } }

/* ======================================================================================== */
/* The mark: one slot on every page, the same place with or without a way back, 36 px, the    */
/* wordmark beside it wherever it fits, a little of the lamp's light behind its darker folds,  */
/* never a ring, never a sticker                                                             */
/* ======================================================================================== */
[data-theme] .appbar-back.is-none { visibility: hidden; pointer-events: none; }
[data-theme] .appbar-brand { gap: 10px; }
[data-theme] .appbar-brand .gami { flex: none; border-radius: 50%; background: radial-gradient(circle at 61% 60%, rgb(var(--lamp) / 0.22), rgb(var(--lamp) / 0.07) 52%, transparent 72%); }
[data-theme] .appbar.is-in .appbar-brand > span { display: inline; }
[data-theme] .appbar-narrow { display: none; }
@container app (max-width: 699px) {
  [data-theme] .appbar { gap: 8px; padding-inline: 14px; }
  [data-theme] .appbar-brand { gap: 8px; font-size: 17px; }
  [data-theme] .appbar.is-in .appbar-wide { display: none; }
  [data-theme] .appbar.is-in .appbar-narrow { display: inline; }
  [data-theme] .appbar-credits { padding-inline: 10px; }
  [data-theme] .appbar-you { padding-inline: 4px; }
}
/* payment done: Gami alone in the lamp's light, no ring round it */
[data-theme] .si-ring { border: 0; background: radial-gradient(circle at 61% 60%, rgb(var(--lamp) / 0.14), transparent 68%); }
[data-theme] .si-ring > svg { width: 44px; height: 44px; }
[data-theme] .pd-mark > svg { display: none; }
[data-theme] .pd-mark { width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle at 61% 60%, rgb(var(--lamp) / 0.16), transparent 68%); }
[data-theme] :is(.pw-art, .in-copy-curve) { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); }
[data-theme] .in-copy-curve { height: 96px; }
@container app (min-width: 700px) { [data-theme] .pw-session .pw-art { height: 130px; } }
[data-theme] .lp-msg-you .lp-hl.is-lit { background: rgb(var(--lamp) / 0.1); box-shadow: 0 0 0 3px rgb(var(--lamp) / 0.1), inset 0 -1.5px 0 var(--ink); color: #fff; }
[data-theme] .lp-built { color: var(--soft); }
/* the rows of choices on the script page show whole chips only, so nothing fades out half read */
[data-theme] :is(.lp-chips, .lp-dimrow) { -webkit-mask-image: none; mask-image: none; }

/* ======================================================================================== */
/* One key for every act: honey the way forward, one neutral key of the lamp's glass for       */
/* everything else (the way back too), one AI key outlined in lake with what it spends inside  */
/* it; what a key opens is said as help text under it, never a second line inside it          */
/* ======================================================================================== */
[data-theme] .btn { min-height: 46px; padding: 11px 20px; border-radius: 11px; }
[data-theme] .btn.btn-ghost { background: linear-gradient(180deg, rgb(var(--lamp) / 0.15), rgb(var(--lamp) / 0.08)); border: 1px solid rgb(var(--lamp) / 0.22); color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.5); }
[data-theme] .btn.btn-ghost:hover { background: linear-gradient(180deg, rgb(var(--lamp) / 0.22), rgb(var(--lamp) / 0.12)); border-color: rgb(var(--lamp) / 0.34); }
[data-theme] :is(.btn.btn-ai, .btn.btn-ai-line) { background: color-mix(in srgb, var(--ai) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ai) 58%, transparent); color: var(--ai-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ai) 22%, transparent); }
[data-theme] :is(.btn.btn-ai, .btn.btn-ai-line):hover { background: color-mix(in srgb, var(--ai) 18%, transparent); border-color: var(--ai); color: #fff; }
[data-theme] :is(.btn.btn-ai, .btn.btn-ai-line) .btn-icon { color: var(--ai); }
/* the cost inside the key: after a hairline, in the mono, the same words as everywhere */
[data-theme] .btn .ai-badge { display: inline-flex; align-items: center; margin: 0 -6px 0 4px; padding: 2px 0 2px 12px; border-radius: 0; background: none; box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 30%, transparent); color: inherit; font: 500 11.5px/1 var(--mono); white-space: nowrap; }
[data-theme] .btn .ai-badge::before { display: none; }
[data-theme] .btn-go .ai-badge { box-shadow: inset 1px 0 0 rgb(26 18 4 / 0.3); }
[data-theme] .btn-with { display: inline-grid; justify-items: start; gap: 6px; min-width: 0; max-width: 100%; vertical-align: top; }
[data-theme] .btn-with > .btn { max-width: 100%; }
[data-theme] .btn-help { font: 400 12.5px/1.35 var(--sans); color: var(--muted); text-wrap: pretty; }

/* their words the AI wrote in: neutral ink, a lake mark down their side (lake is AI; sage only free) */
[data-theme] :is(.ge-line.is-yours, .ge-yours) { background: linear-gradient(90deg, color-mix(in srgb, var(--ai) 8%, var(--sheet)), var(--sheet) 70%); box-shadow: inset 2px 0 0 var(--ai), var(--hair); }
[data-theme] :is(.ge-line.is-yours, .ge-yours-line) { color: var(--ink); }
[data-theme] :is(.ge-yours-head .label, .ge-yours-tag) { color: var(--ai-ink); }

/* a short shelf ends with the next one: quieter than the card above it, the same grid */
[data-theme] .lb-more { margin-top: 22px; background: linear-gradient(180deg, color-mix(in srgb, #1d2d2a 60%, transparent), transparent); box-shadow: none; border-style: dashed; border-color: var(--line-2); }
[data-theme] .lb-more .lb-empty-title { font-size: 28px; }
[data-theme] .lb-more .lb-empty-copy p { font-size: 14.5px; color: var(--soft); }

/* a render that stopped shows where: the plan, lit as far as the voice got */
[data-theme] .ge-stopped { display: grid; gap: 14px; margin: 6px 0 0; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--abyss); }
[data-theme] .ge-stopped figcaption { display: grid; gap: 6px; font-size: 14.5px; color: var(--soft); }
[data-theme] .ge-stopped figcaption b { font-weight: 600; color: var(--ink); }
/* what is not voiced yet is the plan unlit: a hairline, no ground; what is voiced is lit on the ramp */
[data-theme] .ge-curve-base .curve-line { filter: none; }
[data-theme] .ge-curve-base .curve-line path { stroke: var(--line-2) !important; stroke-dasharray: 3 4; }
[data-theme] .ge-curve-base .curve-area { fill: transparent; }

/* on a phone every dock and every sheet sits on the bottom edge, the full width: a bar the page
   passes under, never a card floating over it with the page showing below */
@container app (max-width: 699px) {
  [data-theme] .layer > :is(.cu-dock, .cx-dock, .pw-dock) { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding-bottom: 14px; box-shadow: var(--hair), 0 -14px 34px rgb(0 0 0 / 0.55); }
  [data-theme] .layer > .cu-dock { background: color-mix(in srgb, #1c2c29 97%, transparent); padding-bottom: 6px; }
  [data-theme] .layer > .cx-dock { max-height: 78%; overflow-y: auto; padding: 12px 14px 18px; }
  [data-theme] .layer > .pw-dock { padding: 10px 12px 16px 20px; }
}

/* how a stretch is said: a small mark in the line, before its first word, set like a stage direction,
   raised as the pauses are; it never opens a row or moves a word. The bracket lies under the words */
[data-theme] .cx-at { position: relative; display: inline; line-height: inherit; vertical-align: baseline; }
[data-theme] .cx-note { position: relative; top: auto; left: auto; z-index: 2; display: inline-flex; align-items: baseline; gap: 4px; max-width: 14em; margin-right: 0.32em; padding: 1px 6px 2px; border-radius: 5px; background: color-mix(in srgb, var(--ember) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember) 26%, transparent); font: italic 500 12px/1.2 var(--sans); color: var(--ember-ink); vertical-align: 0.42em; white-space: nowrap; }
[data-theme] .cx-note-text { font: inherit; }
[data-theme] .cx-note.is-open { position: absolute; left: 0; top: 1.5em; z-index: 6; display: flex; width: 22em; max-width: 80vw; padding: 6px 10px 8px; border: 1px solid var(--ember); border-radius: 10px; background: var(--panel); font-style: normal; vertical-align: baseline; white-space: normal; }
[data-theme] .cx-ask .cx-ask-field { flex: 1 1 8em; width: 0; }
[data-theme] .cx-ask .btn .ai-badge { margin: 0 -2px 0 2px; padding: 2px 0 2px 10px; box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 30%, transparent); }

/* on a phone the notice comes in under the app bar, never over it */
@container app (max-width: 699px) {
  [data-theme] .layer > .toast { top: 116px; left: 50%; width: 100%; min-height: 40px; padding: 8px 18px; border-width: 0 0 1px; border-radius: 0 0 14px 14px; background: var(--raise); font-size: 13.5px; box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.7); }
}
/* the passkey said where it was added: no notice saying it again */
.screen-box:has(.pd-passkey.is-done) > .layer > .toast { display: none; }
[data-theme] .btn-costed > span:not(.ai-badge, .btn-icon) { white-space: nowrap; }
/* on a phone a key with its cost inside keeps to one line by drawing closer, never by wrapping */
@container app (max-width: 699px) {
  [data-theme] .btn.btn-costed { padding-inline: 14px; gap: 7px; }
  [data-theme] .btn.btn-costed .ai-badge { margin-right: -2px; padding-left: 9px; font-size: 10.5px; }
}
/* keys in a row stand on one line; a key's help text hangs below it without moving its neighbours */
[data-theme] .lb-acts { align-items: flex-start; }