/* blushed.ai beta: cute, casual, a little flushed. Taken from the logo: porcelain robot, aubergine sticker outlines,
   heartbeat pink, blush marks. */

:root {
  --bg: #FFF3F1;            /* cream */
  --dots: #FFD3E0;          /* the polka dots on the library */
  --paper: #FFFBFC;         /* porcelain: cards, sheets */
  --paper-2: #FFEAF1;       /* soft pink fill */
  --ink: #2A1422;           /* aubergine: text and outlines */
  --ink-2: #6B4C5D;
  --ink-3: #7C5E72;         /* hints, counts, small labels: 4.5:1 or more on every surface */
  --line: #2A1422;          /* sticker outlines */
  --line-soft: #2A142238;
  --line-field: #2A14228C;  /* the edge of a text field: 3:1 against what's around it */
  --shadow: #2A1422;        /* hard sticker shadow */
  --pink: #FF3D7F;          /* heartbeat */
  --on-pink: #2A1422;
  --pink-text: #A8336E;     /* merlot: pink as words (links, labels). Heartbeat is too light for small text on porcelain */
  --blush: #FF86AC;
  --pink-soft: #FFE0EA;
  --scroll: #E9BBCD; --scroll-hover: #DC8FAF;   /* scrollbar thumbs */
  --focus: #FF3D7F;
  --danger: #C2362B;
  --on-danger: #FFFFFF;
  --scrim: #2A142273;
  --font-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-read: "Literata", Georgia, "Iowan Old Style", serif;
  --side: #FFEAF0;          /* the sidebar, a shade under the page */
  --bar-h: 64px;
  --side-w: 256px;
  --rail-w: 76px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --scroll: #573048; --scroll-hover: #7D4467;
  --bg: #1E0C18;
  --dots: #2E1426;
  --paper: #2A1422;
  --paper-2: #3A1B2F;
  --ink: #FCEBF1;
  --ink-2: #D9BCCB;
  --ink-3: #AB8D9E;
  --line: #0B0408;
  --line-soft: #FCEBF12E;
  --line-field: #FCEBF166;
  --shadow: #0B0408;
  --pink-text: var(--pink);
  --pink-soft: #4A1C36;
  --danger: #FF9D7E;
  --on-danger: #2A1422;
  --scrim: #0B0408B3;
  --side: #170911;
  color-scheme: dark;
}
:root:not([data-theme="dark"]) .dark-only, :root[data-theme="dark"] .light-only { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); overflow-y: scroll; scrollbar-gutter: stable; }   /* the scrollbar keeps its room: pages don't jump sideways */
body { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: var(--bg);
       background-image: radial-gradient(var(--dots) 1.5px, transparent 1.8px); background-size: 24px 24px;
       color: var(--ink); font: 400 16px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; }
body.reading { background-image: none; }
a { color: inherit; }
picture { display: contents; }   /* it only picks the file (a still mascot for reduced motion); its <img> is what's laid out */
picture > source { display: none; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 2px solid var(--line); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .005em; margin: 0; }
p { margin: 0; }
.hint { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.error { color: var(--danger); font-size: 14px; font-weight: 700; }
.error:empty, .hint:empty { display: none; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- buttons: pills with a sticker outline that press down ------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
       border: 2px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
       font: 800 15px/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
       box-shadow: 0 3px 0 var(--shadow); transition: transform .08s ease, box-shadow .08s ease, background-color .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--shadow); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.btn.primary { background: var(--pink); color: var(--on-pink); }
.btn.soft { background: var(--pink-soft); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); padding: 0 12px; }
.btn.ghost:hover { color: var(--ink); background: var(--pink-soft); transform: none; }
.btn.ghost:active { transform: none; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 14px; gap: 6px; }
.btn.sm .i { width: 17px; height: 17px; }
.btn.big { height: 54px; padding: 0 28px; font-size: 17px; }
.btn.danger { color: var(--danger); }
.btn > .morph { display: inline-flex; align-items: center; gap: inherit; }   /* its words, as they change (app.js morph) */
.btn:has(> .morph) { overflow: hidden; transition: transform .08s ease, box-shadow .08s ease, background-color .2s, color .2s, border-color .2s; }
#send.stop { background: var(--ink); color: var(--paper); }   /* Stop: not the pink of Send */
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: 0 3px 0 var(--shadow); }
.btn.ghost:disabled { box-shadow: none; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--line);
            border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--shadow);
            transition: transform .08s ease, box-shadow .08s ease; text-decoration: none; }
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--shadow); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }
.icon-btn.sm { width: 36px; height: 36px; }
.icon-btn.flat { border-color: transparent; background: transparent; box-shadow: none; }
.icon-btn.flat:hover { background: var(--pink-soft); transform: none; }

/* ---- the shell: sidebar + page; the sidebar folds into an icon rail while reading -------------------------------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.main-col { display: flex; flex-direction: column; min-width: 0; }
.sidebar { position: sticky; top: 0; z-index: 25; display: flex; flex-direction: column; gap: 20px; height: 100vh; height: 100dvh; overflow-y: auto;
           padding: 20px 14px 0; border-right: 2px solid var(--line); background: var(--side); }
.sidebar > * { flex-shrink: 0; }   /* a tall sidebar scrolls; it never squashes its buttons */
.sidebar .logo { padding: 2px 10px 0; }
.logo { text-decoration: none; }
.logo img { display: block; height: 34px; width: auto; }
.side-group { display: flex; flex-direction: column; gap: 2px; }
.side-title { padding: 0 12px 6px; color: var(--ink-3); font: 900 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.side-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 14px;
             background: transparent; color: var(--ink-2); font: 800 15px/1.2 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.side-item:hover { background: var(--pink-soft); color: var(--ink); }
.side-item[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--shadow); }
.side-item[aria-current="page"] .i { color: var(--pink); }
.side-item .count { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.side-item.recent { min-height: 50px; padding: 6px 12px; }
.side-item.recent .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-item.recent .t b { overflow: hidden; color: var(--ink); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.side-item.recent .t small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.side-item.soon { color: var(--ink-3); cursor: default; }
.side-item.soon:hover { background: transparent; color: var(--ink-3); }
.soon-tag { margin-left: auto; padding: 3px 8px; border: 2px solid var(--line-soft); border-radius: 999px; font: 900 11.5px/1 var(--font-ui);
            letter-spacing: .06em; text-transform: uppercase; }
.side-new { width: 100%; }
/* Settings and Help stay in reach on a short window: the rest of the sidebar scrolls under them, fading out as it goes. */
.side-foot { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: 12px 0 18px; border-top: 2px dashed var(--line-soft); background: var(--side); }
.side-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 2px); height: 20px; pointer-events: none;
                     background: linear-gradient(transparent, var(--side)); }
@media (max-height: 900px) { .sidebar .side-group:has(> [data-soon]) { display: none; } }   /* no room for what's coming */
.rail-mark { display: none; }

/* ---- scrollbars: thin pills in the theme's colors ---------------------------------------------------------------------------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid transparent; border-radius: 999px; background: var(--scroll) padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
}

/* ---- the profile area: a column right of the page on wide screens, so the page sits in the middle of the window ------------ */
.me-rail { display: none; }
@media (min-width: 1400px) {
  body:not(.reading) .shell { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); }
  body:not(.reading) .me-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; height: 100vh; height: 100dvh; overflow-y: auto;
                                padding: 32px 18px 18px 0; }
}
@media (min-width: 900px) and (max-width: 1399px) {   /* no room for it: narrow pages still center on the window, as far as the sidebar allows */
  body:not(.reading) :is(main, .foot).narrow { margin-left: max(0px, calc((100vw - 780px) / 2 - var(--side-w))); margin-right: auto; }
  body:not(.reading) :is(main, .foot).form { margin-left: max(0px, calc((100vw - 1000px) / 2 - var(--side-w))); margin-right: auto; }
}
.me-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: 20px;
           background: var(--paper); box-shadow: 0 3px 0 var(--shadow); }
.me-head { display: flex; align-items: center; gap: 12px; }
.me-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-id small { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.me-name { display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; margin: -5px 0; padding: 0; border: 0; background: none; color: var(--ink);
           font: 900 18px/1.2 var(--font-ui); text-align: left; cursor: pointer; }
.me-name span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.me-name .i { flex: none; width: 15px; height: 15px; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.me-name:hover .i, .me-name:focus-visible .i { opacity: 1; }
.me-name-edit { width: 100%; padding: 4px 8px; font: 900 16px/1.2 var(--font-ui); }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 12px; border-top: 2px dashed var(--line-soft); text-align: center; }
.me-stats b { display: block; font: 900 20px/1.1 var(--font-ui); }
.me-stats small { color: var(--ink-3); font-size: 11.5px; font-weight: 800; }
.me-into { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0 0;
           border-top: 2px dashed var(--line-soft); color: var(--ink-2); font: 700 13px/1.35 var(--font-ui); }
.me-into b { color: var(--ink); text-align: right; }
.me-privacy h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.me-privacy h3 .i { color: var(--pink); }
.me-privacy ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 700; }
.me-privacy li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.me-privacy li b { color: var(--ink); font-size: 12.5px; }
.me-privacy .btn { align-self: flex-start; }
.me-tip { flex-direction: row; align-items: flex-start; }
.me-tip .bot-mini { flex: none; width: 52px; height: auto; }
.me-tip div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-tip p { font-size: 13.5px; line-height: 1.45; }
.linkish { align-self: flex-start; min-height: 32px; margin: -8px 0; padding: 0; border: 0; background: none; color: var(--pink-text); font: 800 13px/1.2 var(--font-ui); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.report-what { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; }
.data-row { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.pairings { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pairing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pairing select { width: auto; min-width: 0; padding: 7px 30px 7px 12px; font-size: 14.5px; font-weight: 700; }
.pairing .amp { color: var(--ink-3); font-weight: 900; }
.data-row small { color: var(--ink-3); font-size: 13px; }
.data-row .actions { flex-wrap: wrap; margin-top: 6px; }
.sync-points { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
/* your account: in Settings, a line and a button; in its dialog, what it has */
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account-row .hint { flex: 1 1 260px; margin: 0; }
.note-line { padding: 10px 14px; border: 2px dashed var(--pink); border-radius: 14px; background: var(--pink-soft); color: var(--ink); font-weight: 700; }
.acct-id { color: var(--ink-2); }
.acct-id b { font: 800 15px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .05em; color: var(--ink); }
.acct-lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; color: var(--ink-2); }
.sync-status { font-weight: 700; }
.code-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: 16px; background: var(--paper-2); }
.code-box code { flex: 1; min-width: 0; font: 800 17px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; }
#sync-code { font: 700 16px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.report-what .check { align-items: flex-start; }
.report-what .check b, .report-what .check small { display: block; }
.report-what .check small { color: var(--ink-3); font-size: 13px; font-weight: 600; line-height: 1.4; }
body.reading .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
body.reading .sidebar { align-items: center; gap: 10px; padding: 14px 10px 0; }
body.reading .sidebar :is(.logo, .side-title, .label, .count, .soon-tag, .full-only) { display: none; }
body.reading .rail-mark { display: block; margin-bottom: 8px; }
body.reading .rail-mark img { display: block; width: 46px; height: auto; }
body.reading .side-item { justify-content: center; width: 48px; height: 48px; padding: 0; }
body.reading .side-new { width: 48px; height: 48px; padding: 0; }
body.reading .side-foot { padding-bottom: 14px; border-top: 0; }
.topbar { display: none; }
.side-scrim { position: fixed; inset: 0; z-index: 24; background: var(--scrim); }
body.reading .foot { display: none; }

main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px 32px 64px; outline: none; }
#view:focus, #view:focus-visible { outline: none; }   /* focused after each page change, for screen readers */
main.narrow { max-width: 780px; }
main.form { max-width: 1000px; }   /* New story, a character, a premise: room to set things up side by side */
body.reading main { max-width: none; padding: 0; }
.foot { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 1120px; margin: 0 auto;
        padding: 20px 32px 32px; color: var(--ink-3); font-size: 13px; text-align: center; }
.foot p { max-width: 560px; }
.foot.narrow { max-width: 780px; }
.foot.form { max-width: 1000px; }
.badge18 { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--line);
           border-radius: 50%; background: var(--paper); color: var(--ink); font: 900 12px/1 var(--font-ui); }

/* ---- cards, pills, avatars, heat ---------------------------------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 2px solid var(--line);
        border-radius: 22px; background: var(--paper); color: inherit; text-decoration: none; box-shadow: 0 4px 0 var(--shadow); }
a.card, button.card { cursor: pointer; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; font: inherit; text-align: left; }
a.card:hover, button.card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 0 var(--shadow); }   /* a sticker, lifted at a tilt */
a.card:active, button.card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--shadow); transition-duration: .08s; }
.card h3 { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere;
           display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* a very long title doesn't stretch its card */
.card .snip { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.card .foot-row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.card.linked { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; }
.card.linked:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 0 var(--shadow); }
.grid > :nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }   /* (every other one leans the other way) */
.card.linked:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--shadow); transition-duration: .08s; }
.card.linked:has(details[open]) { z-index: 5; transform: none; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.card.linked h3 { padding-right: 34px; }
.card .card-menu { position: absolute; top: 10px; right: 10px; z-index: 2; }
.menu-pop > button.armed { color: var(--danger); }
.card.new { align-items: center; justify-content: center; min-height: 170px; border-style: dashed; box-shadow: none;
            background: transparent; color: var(--ink-2); font-weight: 800; text-align: center; }
.card.new:hover { background: var(--pink-soft); color: var(--ink); box-shadow: none; }
.card.new .plus { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--line);
                  border-radius: 50%; background: var(--pink); color: var(--on-pink); box-shadow: 0 3px 0 var(--shadow); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 2px solid var(--line-soft);
        border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.av { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 50%;
      background: var(--av, #FFC2D6); color: #2A1422; font: 400 20px/1 var(--font-display); box-shadow: 0 2px 0 var(--shadow); }
.av.sm { width: 30px; height: 30px; font-size: 14px; box-shadow: none; }
.av.lg { width: 64px; height: 64px; font-size: 30px; box-shadow: 0 3px 0 var(--shadow); }
.avs { display: flex; }
.avs .av { margin-right: -8px; }
.hatch { display: inline-flex; align-items: center; gap: 2px; color: var(--pink); }
.hatch i { display: block; width: 3px; height: 13px; border-radius: 2px; background: currentColor; transform: skewX(-24deg); opacity: .25; }
.hatch i.on { opacity: 1; }
.heat { display: inline-flex; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper);
        box-shadow: 0 3px 0 var(--shadow); }
.heat button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
               background: transparent; color: var(--ink-2); font: 800 14px/1 var(--font-ui); cursor: pointer; }
.heat button:hover { color: var(--ink); background: var(--pink-soft); }
.heat button[aria-pressed="true"] { background: var(--pink); color: var(--on-pink); }
.heat button[aria-pressed="true"] .hatch { color: var(--on-pink); }
.heat.sm { box-shadow: none; }
.heat.sm button { height: 28px; padding: 0 10px; font-size: 13px; gap: 5px; }
@media (hover: none) { .heat.sm button { height: 32px; } }   /* a finger's worth on tablets */

/* ---- page heads and tabs ---------------------------------------------------------------------------------- */
.back { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px -6px; padding: 6px 12px 6px 8px; border-radius: 999px;
        color: var(--ink-2); font-weight: 800; font-size: 14px; text-decoration: none; }
.back:hover { color: var(--ink); background: var(--pink-soft); }
.back .i { width: 18px; height: 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head h1 { font-size: 44px; line-height: 1.05; }
.page-head .sub { margin-top: 8px; color: var(--ink-2); font-weight: 600; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px; border: 2px solid var(--line); border-radius: 999px;
        background: var(--paper); box-shadow: 0 3px 0 var(--shadow); }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px;
          color: var(--ink-2); font-weight: 800; text-decoration: none; }
.tabs a:hover { color: var(--ink); background: var(--pink-soft); }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.tabs .n { color: var(--ink-3); font-size: 12px; }
.tabs a[aria-current="page"] .n { color: inherit; opacity: .8; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; margin: 24px auto; text-align: center; }
.empty img { width: 170px; height: auto; }
.empty h2 { font-size: 30px; }
.empty p { color: var(--ink-2); }

/* ---- forms -------------------------------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .label { font-weight: 800; font-size: 14px; }
.field small, .field .hint { color: var(--ink-3); font-size: 13px; }
input, textarea, select { width: 100%; padding: 11px 14px; border: 2px solid var(--line-field); border-radius: 14px; background: var(--paper);
       color: var(--ink); font: 400 16px/1.45 var(--font-ui); }
textarea { resize: vertical; min-height: 84px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--pink); flex: none; margin: 2px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two.age { grid-template-columns: minmax(0, 1fr) 210px; }   /* room for words: “in her thirties” */
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; text-align: left; cursor: pointer; }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions.center { justify-content: center; }
.roles-edit { display: flex; flex-direction: column; gap: 8px; }
.roles-edit .role { display: flex; gap: 8px; align-items: center; }
.editor-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.editor-head h1 { font-size: 38px; line-height: 1.05; }

/* ---- new story ------------------------------------------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; gap: 22px; }
.step { gap: 16px; padding: 22px; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-head h2 { font-size: 24px; }
.num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid var(--line); border-radius: 50%;
       background: var(--pink); color: var(--on-pink); font: 900 16px/1 var(--font-ui); }
.cast { display: flex; flex-direction: column; gap: 10px; }
.cast-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px dashed var(--line-soft); border-radius: 18px; }
.cast-row.filled { border-style: solid; border-color: var(--line); background: var(--paper-2); }
.cast-row .role { min-width: 0; flex: 1; }
.cast-row .role .role-name { display: block; width: 100%; max-width: 240px; margin: 0 0 2px -6px; padding: 3px 6px; border: 2px solid transparent;
                             border-radius: 8px; background: transparent; box-shadow: none; color: var(--ink-3); font: 900 11.5px/1.3 var(--font-ui);
                             letter-spacing: .08em; text-transform: uppercase; }
.cast-row .role .role-name:hover { border-color: var(--line-soft); }
.cast-row .role .role-name:focus { border-color: var(--pink); background: var(--paper); color: var(--ink); outline: none; }
/* a role to name, if you like: while it's empty, as typed (an input without a placeholder can only go by its first value) */
.cast-row .role .role-name:placeholder-shown:not(:focus), .cast-row .role .role-name:not([placeholder])[value=""]:not(:focus) {
  max-width: 180px; border-style: dashed; border-color: var(--line-field); }
.cast-add { align-self: flex-start; }
/* the sketch editors: an outline to fill in. Its ghost dashes give way to a solid line as it fills (--filled, 0 to 1), and an
   empty field keeps a dashed line of its own. */
.sketch { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 16px; border: 2px dashed var(--line-soft);
        border-radius: 18px; background: var(--paper); }
.sketch::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--line); border-radius: inherit; pointer-events: none;
                opacity: var(--filled, 0); transition: opacity .35s ease; }
.sketch-head { display: flex; align-items: center; gap: 12px; }
.sketch-head .role { flex: 1; min-width: 0; }
.sketch-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sketch-field { display: flex; flex-direction: column; gap: 5px; color: var(--ink-2); font-size: 12.5px; font-weight: 800; }
.sketch-field small { color: var(--ink-3); font-weight: 600; }
.sketch-field :is(input, textarea) { padding: 9px 12px; font-size: 15px; font-weight: 600; transition: border-color .2s, background-color .2s; }
.sketch-field textarea { min-height: 0; }
.sketch-field.unfilled span { color: var(--ink-3); }
.sketch-field.unfilled :is(input, textarea) { border-style: dashed; background: transparent; }
.sketch-more > summary { width: fit-content; margin: -4px 0; padding: 4px 0; color: var(--ink-2); font-size: 13px; font-weight: 900; cursor: pointer; }
.sketch-more[open] { display: flex; flex-direction: column; gap: 12px; }
.sketch-sum, .sketch-empty { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; }
.sketch-sum { border: 2px solid var(--line); background: var(--paper-2); }
.sketch-sum > .i { flex: none; color: var(--pink); }
.sketch-sum-text { flex: 1; min-width: 0; }
.sketch-sum-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; }
.sketch-sum-text small, .cast-row .role .meta { color: var(--ink-3); font-size: 12.5px; font-weight: 700; }
.sketch-empty { border: 2px dashed var(--line-soft); }
.sketch-empty > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sketch-empty small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.sketch-empty .ring, .pick .ring { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 2px dashed var(--line-soft);
                                  border-radius: 50%; color: var(--ink-3); }
.cast-row.editing { padding: 0; border: 0; }
.cast-row .role b + .meta { display: block; }
.title-row { display: flex; gap: 8px; align-items: center; }
.title-row input { flex: 1; min-width: 0; }
.icon-btn.thinking .i { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (max-width: 520px) {
  .sketch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sketch-grid .sketch-field:first-child { grid-column: 1 / -1; }
  .sketch-empty, .sketch-sum { flex-wrap: wrap; }
  .sketch-empty > div, .sketch-sum-text { flex-basis: calc(100% - 60px); }
}
@media (max-width: 520px) {   /* room for the role's whole name: the buttons go on a line of their own */
  .cast-row { flex-wrap: wrap; row-gap: 8px; }
  .cast-row .role { flex: 1 1 calc(100% - 60px); }
  .cast-row [data-pick] { margin-left: 56px; }
  .cast-row .role .role-name { max-width: none; }
}
.cast-row .role b { font-size: 16px; }
.cast-row .ring { display: grid; place-items: center; width: 44px; height: 44px; border: 2px dashed var(--line-soft); border-radius: 50%; color: var(--ink-3); }
.details { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px 16px; align-items: center; }
.details .label { color: var(--ink-2); }

/* ---- the reader ---------------------------------------------------------------------------------------------------- */
.reader-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 16px;
              background: var(--bg); border-bottom: 2px solid var(--line); }
.reader-bar > :not(.title-h) { flex-shrink: 0; }   /* a long title gives way; the buttons keep their size */
.title-h { display: flex; min-width: 0; font: inherit; }   /* the page's heading, for screen readers: the title, as a button to rename it */
.title-btn { all: unset; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: text;
             font: 400 21px/1.2 var(--font-display); }
.title-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.title-input { width: 360px; max-width: 100%; height: 40px; padding: 6px 12px; font-size: 16px; }
/* The end of the story clears the composer however tall it grows (the page keeps its height in --composer-h). A word or a
   link longer than the line wraps instead of running off the page. */
.story { max-width: 720px; margin: 0 auto; padding: 28px 20px calc(var(--composer-h, 146px) + 24px); overflow-wrap: anywhere; }
@media (min-width: 900px) { .story { position: relative; left: calc(var(--rail-w) / -2); } }   /* centered on the window, not beside the rail */
html:has(body.reading) { scroll-padding-bottom: calc(var(--composer-h, 146px) + 8px); }   /* a control tabbed to isn't left under the composer */
.premise-note { margin-bottom: 26px; padding: 12px 16px; border: 2px dashed var(--line-soft); border-radius: 18px; color: var(--ink-2); font-size: 14.5px; }
.premise-note summary { margin: -8px 0; padding: 8px 0; cursor: pointer; font-weight: 900; color: var(--ink); }
.premise-note p { margin-top: 8px; white-space: pre-line; }
.turn { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; scroll-margin-top: 80px; }
.turn.last, .turn.live { min-height: calc(100vh - 106px - var(--composer-h, 146px)); min-height: calc(100dvh - 106px - var(--composer-h, 146px)); }
.chapter-mark { display: flex; align-items: center; gap: 12px; margin: 8px 0 30px; color: var(--ink-3); font-weight: 900; font-size: 12px;
                letter-spacing: .12em; text-transform: uppercase; }
.chapter-mark::before, .chapter-mark::after { content: ""; flex: 1; border-top: 2px dotted var(--line-soft); }
.you { align-self: flex-end; max-width: 88%; padding: 10px 16px; border: 2px solid var(--line); border-radius: 22px 22px 6px 22px;
       background: var(--pink-soft); color: var(--ink); font-size: 15px; line-height: 1.5; box-shadow: 0 3px 0 var(--shadow); white-space: pre-line; }
.you b { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
/* "Continue." is a nudge, not something the reader said: a quiet line where the passage carries on, not a bubble. */
.nudge { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nudge::before, .nudge::after { content: ""; flex: 1; border-top: 1px dashed var(--line-soft); }
.passage { font: 400 18px/1.75 var(--font-ui); }
body.serif .passage { font-family: var(--font-read); font-size: 18.5px; line-height: 1.8; }
.passage p { margin: 0 0 1em; }
.passage p:last-child { margin-bottom: 0; }
.passage q { quotes: none; }   /* the text brings its own quote marks */
body.fx .passage q { color: #D81F63; }
:root[data-theme="dark"] body.fx .passage q { color: var(--blush); }
.passage .w { animation: word-in .55s ease-out both; }
@keyframes word-in { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
.turn-actions { display: flex; gap: 2px; flex-wrap: wrap; margin-left: -10px; opacity: .7; transition: opacity .15s; }   /* always there, quieter until the turn is pointed at */
:root[data-theme="light"] .turn-actions { opacity: .85; }   /* (.7 left their labels at 3.4:1 on light paper; .85 is 4.8) */
.turn:hover .turn-actions, .turn:focus-within .turn-actions, .turn.last .turn-actions { opacity: 1; }
@media (hover: none) { :root[data-theme] .turn-actions { opacity: 1; } }   /* (as specific as the light rule above, and after it) */
.turn.arrived .turn-actions { animation: rise-in .7s ease-out .15s both; }
.turn-actions .by { align-self: center; margin-left: auto; padding: 2px 9px; border: 2px solid var(--line-soft); border-radius: 999px;
                    color: var(--ink-3); font-size: 11.5px; font-weight: 800; }   /* which writer, when it wasn't the regular one */
@keyframes rise-in { from { opacity: 0; transform: translateY(4px); } }
.armed { color: var(--danger) !important; }
.writing { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 800; font-size: 14px; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); animation: hop 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-6px); opacity: 1; } }
.edit-box { display: flex; flex-direction: column; gap: 10px; }
.edit-box textarea { min-height: 240px; font: 400 17px/1.7 var(--font-ui); }
body.serif .edit-box textarea { font-family: var(--font-read); }
/* Try again with a note: "add note?" slides out of Try again when it's pointed at or focused; a touchscreen just shows it.
   It opens a card under the passage for what the writer should do differently. */
.regen { display: inline-flex; align-items: center; }
.add-note { max-width: 0; height: 30px; margin-left: 0; padding: 0; overflow: hidden; white-space: nowrap; opacity: 0;
            border: 0 dashed transparent; border-radius: 999px; background: transparent; color: var(--ink-2);   /* (no width at all, hidden) */
            font: 800 12.5px/1 var(--font-ui); cursor: pointer;
            transition: max-width .25s ease, margin .25s ease, padding .25s ease, opacity .2s ease, border-color .2s ease; }
.regen:hover .add-note, .regen:focus-within .add-note { max-width: 9em; margin-left: 2px; padding: 0 11px; opacity: 1; border-width: 2px; border-color: var(--line-soft); }
.add-note:hover, .add-note:focus-visible { border-color: var(--pink); background: var(--pink-soft); color: var(--ink); }
@media (hover: none) { .add-note { max-width: none; margin-left: 2px; padding: 0 11px; opacity: 1; border-width: 2px; border-color: var(--line-soft); } }
.note-pop { display: flex; flex-direction: column; gap: 8px; max-width: 460px; padding: 12px 14px 14px; border: 2px solid var(--line);
            border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow); animation: note-in .18s ease-out both; }
.note-pop label { color: var(--ink-2); font: 900 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.note-pop textarea { min-height: 52px; font-size: 15px; resize: none; }
.note-pop .actions { display: flex; gap: 8px; }
@keyframes note-in { from { opacity: 0; transform: translateY(-6px); } }
/* A sent message's Edit and Rewind to here float over its top corner when it's pointed at, focused or tapped, so showing
   them moves nothing on the page. */
.you-wrap { position: relative; align-self: flex-end; max-width: 88%; }
.you-wrap > .you { max-width: none; }
.you-actions { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 2; display: flex; gap: 2px; padding: 2px;
               border: 2px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow);
               opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.you-wrap.below .you-actions { top: calc(100% + 6px); bottom: auto; transform: translateY(-4px); }   /* no room above, under the bar */
.you-actions .btn.sm { height: 30px; padding: 0 11px; font-size: 13.5px; }
.you-wrap:hover .you-actions, .you-wrap:focus-within .you-actions, .you-wrap.show .you-actions { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: none) { .you-wrap > .you { cursor: pointer; } }
.edit-box.msg { align-self: flex-end; width: min(88%, 560px); }
.edit-box.msg textarea, body.serif .edit-box.msg textarea { min-height: 64px; font: 400 15px/1.5 var(--font-ui); }
.edit-box.msg .actions { justify-content: flex-end; }
.composer { position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 15; padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
            pointer-events: none; }
.composer-fade { position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 13; height: var(--composer-h, 120px); pointer-events: none;
                 background: linear-gradient(to top, var(--bg) 70%, transparent); }
@media (min-width: 900px) { .composer { padding-right: calc(16px + var(--rail-w)); } }
.composer .box { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 10px 16px;
                 border: 2px solid var(--line); border-radius: 26px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow); pointer-events: auto; }
/* With the memory drawer open beside the story (1000px and up; narrower, it covers the page with a scrim: openMem), the
   story moves left only as far as it must to clear the drawer by 24px, never past the rail, and narrows when even that
   isn't room enough. The composer moves with it, the same width (16px in from each side once it narrows): it stays under
   the story instead of reaching for the drawer. Both measure against the same width (the page right of the rail: the
   story's main, and the composer with no side padding), so one expression places both. */
@media (min-width: 1000px) {
  body:has(.drawer.open) .story { max-width: min(720px, 100% - 504px); left: min(var(--rail-w) / -2, max(-252px, 50% - 864px)); }
  body:has(.drawer.open) .composer { padding-left: 0; padding-right: 0; }
  body:has(.drawer.open) .composer .box { position: relative; max-width: min(720px, 100% - 536px);
                                          left: min(var(--rail-w) / -2, max(-252px, 50% - 864px)); }
}
@media (min-width: 1000px) and (max-width: 1399px) { body:has(.drawer.open) .composer .hint { display: none; } }
.composer textarea { min-height: 50px; max-height: 38vh; max-height: 38dvh; padding: 6px 2px; border: 0; background: transparent; resize: none; box-shadow: none; }
.composer textarea:focus { box-shadow: none; }
.composer .bar { display: flex; align-items: center; gap: 8px; }
.composer .seg.mode { flex: none; }   /* Direct or Write: how the writer reads the message */
.composer .seg.mode button { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
@media (max-width: 560px) { .composer .bar .hint { display: none; } }
.composer .error { padding: 0 6px 2px; font-size: 13.5px; }   /* a Try again that didn't go through */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: flex; flex-direction: column; min-width: 210px; padding: 6px;
            border: 2px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--shadow); }
.menu-pop > button { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
                     color: var(--ink); font: 700 15px/1 var(--font-ui); text-align: left; cursor: pointer; }
.menu-pop > button:hover { background: var(--pink-soft); }
.menu-pop :is(.only-narrow, .only-norail) { display: none; }
@media (max-width: 899px) { .menu-pop .only-norail { display: flex; } }   /* Settings, where the rail with it is hidden */
.menu-heat { align-items: center; gap: 10px; padding: 4px 4px 10px 12px; margin-bottom: 6px; border-bottom: 2px dashed var(--line-soft);
             font: 700 15px/1 var(--font-ui); }   /* phones: the bar has no room for heat */
.menu-heat .heat { margin-left: auto; }

/* ---- memory: everything the writer keeps, all editable -------------------------------------------------------------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; width: min(480px, 100%);
          background: var(--paper); border-left: 2px solid var(--line); box-shadow: -6px 0 0 var(--shadow);
          transform: translateX(calc(100% + 8px)); transition: transform .22s ease; visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px 22px; border-bottom: 2px solid var(--line); }
.drawer-head h2 { font-size: 26px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 22px; }
.drawer-foot { display: flex; align-items: center; gap: 12px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--line); background: var(--paper-2); }
.mem-sec { display: flex; flex-direction: column; gap: 10px; }
.mem-sec > h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.mem-sec > h3 .tag { padding: 3px 9px; border-radius: 999px; background: var(--pink-soft); color: var(--ink-2); font: 900 11.5px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.mem-sec textarea { min-height: 64px; font-size: 14.5px; }
.mem-sec input { font-size: 14.5px; }
.mem-heat { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }   /* heat, at the top: applies at once */
/* how it's written: the reader's rules (saved with the memory), who they play and the settings (both kept at once) */
.mem-sub { display: flex; flex-direction: column; gap: 4px; }
#m-plays { gap: 8px; }
.chip[aria-pressed="true"] { border-color: var(--pink); background: var(--pink); color: var(--on-pink); }
.knob-group { display: flex; flex-direction: column; gap: 10px; }
.knob-group + .knob-group { padding-top: 12px; border-top: 2px dashed var(--line-soft); }
.knob-group h4 { color: var(--ink-2); font: 900 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.knob { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px;
        --track: min(360px, 100cqw - var(--indent) - 100px); }   /* (room beside it for the longest label) */
/* A setting's levels as stops on a track, and a thumb that slides to the chosen one. Each stop's label takes a fifth of
   the width, spread from end to end, so the stops run from a tenth of the way in to a tenth from the end: a track is as
   long as the next however many stops it has. And one width for all of them in a list (--track): what the list's width
   leaves, less the Advanced boxes' indent (--indent), so the ones in a box are no shorter. */
.writing-set, .mem-style { container-type: inline-size; --indent: 32px; }
.mem-style { --indent: 64px; }   /* (Fine-tune, and Advanced in that) */
.notches { position: relative; display: flex; justify-content: space-between; flex: none; width: var(--track); cursor: pointer;
           touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }   /* (a finger slides it sideways, or scrolls the page) */
.notches::before { content: ""; position: absolute; top: 9px; left: 10%; right: 10%; height: 4px; border-radius: 2px; background: var(--line-soft); }
.notches button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 20%; min-width: 0; padding: 0; border: 0;
                  background: none; color: var(--ink-3); font: 800 12px/1.25 var(--font-ui); text-align: center; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.notches button span { width: max-content; max-width: calc(100% + 26px); }   /* a long label reaches past its fifth before it wraps */
.notches i { width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--line-soft); border-radius: 50%; background: var(--paper); transition: border-color .15s ease; }
.notches button:hover { color: var(--ink-2); }
.notches button:hover i { border-color: var(--pink); }
.notches button[aria-checked="true"] { color: var(--ink); cursor: grab; }
.notches .thumb { position: absolute; top: 0; left: calc(10% + 80% * var(--at) / (var(--n) - 1)); width: 22px; height: 22px; margin-left: -11px;
                  border: 2px solid var(--line); border-radius: 50%; background: var(--pink); box-shadow: 0 1px 0 var(--shadow); pointer-events: none;
                  transition: left .34s cubic-bezier(.3, 1.4, .5, 1), transform .15s ease; }
.notches.dragging, .notches.dragging button { cursor: grabbing; }
.notches.dragging .thumb { transform: scale(1.18); transition: transform .15s ease; }   /* held: it follows the pointer, a little bigger */
.notches.dragging button[aria-checked="true"]:not(.near) { color: var(--ink-3); }
.notches.dragging button.near { color: var(--ink); }   /* where it'll come to rest */
.notches button:focus-visible { outline: none; }
.notches:has(button:focus-visible) .thumb { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Spotlight, Never use: On opens the box to type in under the slider, as wide (it unrolls; Off rolls it back up) */
.knob-box { flex: 0 0 100%; display: grid; grid-template-rows: 0fr; margin-top: -6px; visibility: hidden;
            transition: grid-template-rows .26s ease, visibility 0s .26s; }   /* (no row gap while it's shut) */
.knob.on .knob-box { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .26s ease; }
.knob-box > div { justify-self: end; width: calc(var(--track) + 8px); min-height: 0; margin-right: -4px; padding: 0 4px; overflow: hidden; }
.knob-box input { display: block; margin: 8px 0 4px; }   /* (room for its focus ring inside what clips it) */
.writing-set { display: flex; flex-direction: column; gap: 14px; }
.writing-set .adv { margin-top: 2px; }
.knob.plays .pair-chips { flex: none; width: var(--track); }
.step-head .opt { margin-left: auto; color: var(--ink-3); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.adv.sub { margin-top: 4px; }
.knob > span { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 2px solid var(--line); border-radius: 18px; background: var(--paper); }
.seg button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
              font: 800 13px/1 var(--font-ui); cursor: pointer; }
.seg button:hover { color: var(--ink); background: var(--pink-soft); }
.seg button[aria-pressed="true"] { background: var(--pink); color: var(--on-pink); }
@media (hover: none) { .seg button { min-height: 32px; } }
@media (max-width: 720px) {   /* a phone: label over control, every row alike */
  .knob { flex-direction: column; align-items: flex-start; --track: calc(100cqw - var(--indent)); }
  .knob-box { flex: none; align-self: stretch; }   /* (a column: a percentage there would be of its height) */
  .knob-box > div { justify-self: start; margin: 0 0 0 -4px; }
}
.person { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px solid var(--line-soft); border-radius: 18px; background: var(--paper); }
.person-head { display: flex; align-items: center; gap: 10px; }
.person-head input { font-weight: 800; }
.mini { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scene-grid .full { grid-column: 1 / -1; }
.drawer-scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
.adv-head { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 2px dashed var(--line-soft); }
.adv-head h3 { font-size: 19px; }
.adv { border: 2px solid var(--line-soft); border-radius: 18px; background: var(--paper); }
.adv[open] { border-color: var(--line); }
.adv > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 900; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::after { content: ""; width: 9px; height: 9px; margin-left: 4px; border: solid var(--ink-2); border-width: 0 2.5px 2.5px 0;
                        transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.adv[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.adv > summary .count { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: var(--pink-soft); color: var(--ink-2); font-size: 12px; }
.adv > summary:not(:has(.count))::after { margin-left: auto; }
.adv-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }

/* ---- BlushBot: ✨ beside a field writes that field from what's there; the bar writes every field still empty ------------ */
.bot-face { flex: none; width: 96px; }
.bot-face img { display: block; width: 100%; height: auto; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.bot-name { color: var(--pink-text); font: 900 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.fill-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 18px; background: var(--paper-2); }
.steps .fill-bar { margin-bottom: 0; }
.fill-bar .bot-face { width: 62px; }
.fill-bar.thinking .bot-face img { animation: bob 1.1s ease-in-out infinite; }
.fill-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fill-text b { font: 400 20px/1.2 var(--font-display); }
.fill-text small { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.fill-text small .i { width: 15px; height: 15px; vertical-align: -3px; color: var(--pink); }
.fill-bar > .pair-chips { order: 1; flex-basis: 100%; margin: -6px 0 0 78px; }   /* a row of their own, under the words (the face and its gap) */
.fill-bar > .btn { flex: none; }
@media (max-width: 720px) {
  .fill-bar { flex-wrap: wrap; padding: 14px 16px; }
  .fill-bar .bot-face { width: 48px; }
  .fill-bar > .btn { width: 100%; justify-content: center; }
  .fill-bar > .pair-chips { order: 0; margin: 0; }   /* (before the button, as they're read) */
}
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.field-head label, .field-head .label { font-weight: 800; font-size: 14px; }
.sketch-field .field-head { min-height: 26px; }
.sketch-field .field-head label { color: var(--ink-2); font-size: 12.5px; }
.sketch-field.unfilled .field-head label { color: var(--ink-3); }
.spark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%;
         background: transparent; color: var(--pink); cursor: pointer; transition: background-color .15s, border-color .15s; }
.spark:hover { border-color: var(--line-soft); background: var(--pink-soft); }
.spark:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.spark .i { width: 17px; height: 17px; }
.spark.thinking .i { animation: spin 1.1s linear infinite; }
.sketch-head .spark { margin-left: -4px; }
.bot-filled { animation: bot-filled 1.6s ease-out; }   /* what BlushBot just wrote, lit up for a moment */
@keyframes bot-filled { from { border-color: var(--pink); background-color: var(--pink-soft); } }
.btn .dots i { width: 7px; height: 7px; }
.btn.primary .dots i { background: var(--on-pink); }
/* who's in the stories BlushBot sets up: asked once, above its box */
.pair-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pair-chips .label { margin-right: 2px; color: var(--ink-2); }
.chip { min-height: 34px; padding: 0 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
        font: 800 14px/1 var(--font-ui); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.chip:hover { background: var(--pink-soft); }
@media (hover: none) { .chip { min-height: 40px; } }
/* how it works, for a first-timer on Start a story */
.howto { gap: 8px; background: var(--paper-2); }
.howto-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.howto-head h2 { font-size: 22px; }
.howto-head .icon-btn { margin: -6px -10px -6px 0; }
.howto-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 22px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.howto-list b { color: var(--ink); }

/* ---- experimental: speaker colors, scene cards, the climax meter ------------------------------------------------------------- */
:root[data-theme="dark"] .passage q.sp.sp0 { color: #FF8FB8; }
:root[data-theme="dark"] .passage q.sp.sp1 { color: #FFB27A; }
:root[data-theme="dark"] .passage q.sp.sp2 { color: #C9A7FF; }
:root[data-theme="dark"] .passage q.sp.sp3 { color: #7FE0B5; }
:root[data-theme="dark"] .passage q.sp.sp4 { color: #F5D76E; }
:root[data-theme="dark"] .passage q.sp.sp5 { color: #8FC4FF; }
:root[data-theme="light"] .passage q.sp.sp0 { color: #C2185B; }
:root[data-theme="light"] .passage q.sp.sp1 { color: #C2410C; }
:root[data-theme="light"] .passage q.sp.sp2 { color: #7C3AED; }
:root[data-theme="light"] .passage q.sp.sp3 { color: #047857; }
:root[data-theme="light"] .passage q.sp.sp4 { color: #A16207; }
:root[data-theme="light"] .passage q.sp.sp5 { color: #1D4ED8; }
.scene-card { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 4px auto 26px; padding: 8px 18px 8px 12px;
              border: 2px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--shadow); }
.scene-card .i { color: var(--pink); }
.scene-card span { display: flex; flex-direction: column; min-width: 0; }
.scene-card b { overflow: hidden; font-size: 14px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.scene-card small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.meter { flex: none; width: 84px; height: 16px; padding: 2px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper-2); }
/* The bar and the glow ease to each new intensity over --glow-t, which the page sets for each change (longer for bigger ones). */
.meter span { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blush), var(--pink));
              transition: width var(--glow-t, 2s) ease-in-out; }
.glow { position: fixed; inset: 0; z-index: 14; pointer-events: none; opacity: 0; box-shadow: inset 0 0 160px 40px #FF3D7F66;
        transition: opacity var(--glow-t, 2s) ease-in-out; }
.glow-peak { position: absolute; inset: 0; opacity: 0; transition: opacity var(--glow-t, 2s) ease-in-out; }   /* 8 and up */
.glow-peak::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 210px 64px #FF3D7F59; opacity: .6;
                     animation: throb 2.6s ease-in-out infinite; }
@keyframes throb { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- experimental: the writer's text effects ------------------------------------------------------------------------------------ */
/* Each emotion comes at three strengths: --amp is 1 (a touch), 2 or 3 (overwhelming), and every effect scales with it. */
:root { --fx-sultry: #B8235A; --fx-breath: #D81F63; --fx-thought: #6A4FA3; --fx-glow: #FF3D7F59; }
:root[data-theme="dark"] { --fx-sultry: #FFB3CF; --fx-breath: #FF8FB8; --fx-thought: #CDB9F5; --fx-glow: #FF3D7F8C; }
.fx { --amp: 2; }
.fx.lv1 { --amp: 1; }
.fx.lv3 { --amp: 3; }
.fx .wd { display: inline-block; max-width: 100%; }   /* letters move, but a word stays in one piece (unless it's longer than the line) */
.fx .l { display: inline-block; }
/* sultry: slow and smooth, a wave running through the words */
.fx-sultry { color: var(--fx-sultry); font-style: italic; }
.fx-sultry .l { animation: sway calc(2.2s + var(--amp) * .4s) ease-in-out infinite; animation-delay: calc(var(--i) * 110ms - 9s); }
.fx-sultry.lv3 { text-shadow: 0 0 14px var(--fx-glow); }
@keyframes sway { 50% { transform: translateY(calc(var(--amp) * -1.25px)); } }
/* breathless: each letter swells like a breath, faster and fuller as it builds */
.fx-breathless { color: var(--fx-breath); text-shadow: 0 0 calc(var(--amp) * 2.5px) var(--fx-glow); }   /* the glow holds still: only the letters move */
.fx-breathless .l { animation: swell calc(4.2s - var(--amp) * .8s) ease-in-out infinite; animation-delay: calc(var(--i) * 140ms - 9s); }
@keyframes swell { 50% { transform: scale(calc(1 + var(--amp) * .06)); } }
/* scared: a tremble that doesn't stop */
.fx-scared .l { animation: quiver calc(.24s - var(--amp) * .02s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * 25ms); }
.fx-scared.lv3 { opacity: .88; }
@keyframes quiver { from { transform: translate(calc(var(--amp) * -.25px), calc(var(--amp) * -.4px)) rotate(calc(var(--amp) * -.6deg)); }
                    to { transform: translate(calc(var(--amp) * .25px), calc(var(--amp) * .4px)) rotate(calc(var(--amp) * .6deg)); } }
/* shocked: bold, and jolted again every few seconds */
.fx-shocked { font-weight: calc(600 + var(--amp) * 100); }
.fx-shocked.lv3 { font-size: 1.08em; }
.fx-shocked .l { animation: jolt calc(3.4s - var(--amp) * .5s) linear infinite; animation-delay: calc(var(--i) * 14ms); }
@keyframes jolt { 0%, 14%, 100% { transform: none; }
                  2%, 6%, 10% { transform: translate(calc(var(--amp) * -.5px), calc(var(--amp) * .3px)) rotate(calc(var(--amp) * -1.5deg)); }
                  4%, 8%, 12% { transform: translate(calc(var(--amp) * .5px), calc(var(--amp) * -.3px)) rotate(calc(var(--amp) * 1.5deg)); } }
/* tender: softer and quieter, down to a whisper */
.fx-tender { font-style: italic; opacity: calc(1 - var(--amp) * .05); letter-spacing: calc(var(--amp) * .015em); }
.fx-tender.lv2 { font-size: .94em; }
.fx-tender.lv3 { font-size: .88em; }
:root:not([data-theme="dark"]) :is(.fx-tender, .fx-scared.lv3) { opacity: 1; }   /* the light theme's text colors have no contrast to spare */
/* playful: a hop that keeps running through the letters */
.fx-playful .l { animation: bounce calc(2.8s - var(--amp) * .3s) ease-in-out infinite; animation-delay: calc(var(--i) * 45ms); }
@keyframes bounce { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(calc(var(--amp) * -2.2px)) rotate(calc(var(--amp) * -2deg)); } }
/* fierce: heavier and bigger; at full strength it lands like a slam, then keeps a heavy beat */
.fx-fierce { font-weight: calc(600 + var(--amp) * 100); }
.fx-fierce.lv2 { font-size: 1.05em; }
.fx-fierce.lv3 { font-size: 1.12em; letter-spacing: .02em; }
.fx-fierce.lv3 .l { animation: thump 3s ease-in-out infinite; animation-delay: .5s; }
/* The slam lands once, as the passage is written; drawn again later (or scrolled back to), it only keeps the beat. :where()
   adds no weight, so reduced motion still stops it. */
:where(#live) .fx-fierce.lv3 .l { animation: slam .4s cubic-bezier(.2, 1.5, .4, 1) both, thump 3s ease-in-out infinite;
                                  animation-delay: calc(var(--i) * 12ms), .5s; }
@keyframes slam { from { transform: scale(1.6); opacity: 0; } }
@keyframes thump { 0%, 22%, 100% { transform: none; } 8% { transform: scale(1.07); } }
/* ecstatic: a shimmer of light rolling through the letters */
.fx-ecstatic .l { animation: shimmer calc(2.8s - var(--amp) * .45s) ease-in-out infinite; animation-delay: calc(var(--i) * 90ms - 9s); }
.fx-ecstatic.lv3 { font-weight: 800; }
@keyframes shimmer { 50% { transform: translateY(calc(var(--amp) * -1px)) scale(calc(1 + var(--amp) * .035)); filter: brightness(calc(1 + var(--amp) * .18));
                           text-shadow: 0 0 calc(var(--amp) * 3px) currentColor, 0 0 calc(var(--amp) * 9px) var(--fx-glow); } }
.fx-thought { color: var(--fx-thought); font-style: italic; }
.fx-burst { font-weight: 800; }
.fx-burst.long { font-weight: inherit; }
.fx-burst.pop { display: inline-block; animation: pop .5s cubic-bezier(.2, 1.7, .4, 1) both; }
.fx-burst.long.pop { display: inline; animation-name: pop-in; }   /* a sentence keeps wrapping like the text around it */
@keyframes pop { 0% { transform: scale(1.7); opacity: 0; filter: blur(4px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes pop-in { from { opacity: 0; filter: blur(4px); } }
.passage .w.slow { animation-duration: 1.5s; }
.passage q.sp .fx-sultry, .passage q.sp .fx-breathless { color: inherit; }   /* inside a speaker's line, their color wins */
.turn.offscreen .fx .l { animation-play-state: paused; }   /* out of view: held still until it's back */
/* A passage's effects come a few seconds after its words, and fade in over them rather than pop: app.js draws them with
   fx-arrive (looking plain: no effect colors, glows, weights or sizes, no moving letters), then takes it off, so they ease
   into place; with fx-settle the letters start moving from rest, a little after, one after another. */
.passage :is(.fx, q.sp) { transition: color 1.8s ease, text-shadow 1.8s ease, opacity 1.8s ease, letter-spacing 1.8s ease,
                                      font-weight 1.8s ease, font-size 1.8s ease; }
.passage.fx-arrive .fx { color: inherit; text-shadow: none; opacity: 1; letter-spacing: inherit; font-weight: inherit; font-size: inherit; }
.passage.fx-arrive q.sp { color: inherit !important; }   /* (over the speaker and hue colors; the plain quote colors follow) */
body.fx .passage.fx-arrive q.sp { color: #D81F63 !important; }
:root[data-theme="dark"] body.fx .passage.fx-arrive q.sp { color: var(--blush) !important; }
.passage.fx-arrive .fx .l { animation: none; }
.passage.fx-settle .fx .l { animation-delay: calc(1s + var(--i) * 45ms); }
.show-earlier { display: flex; width: fit-content; margin: 4px auto 18px; }
.show-earlier small { color: var(--ink-3); font-weight: 700; }

/* ---- characters' text colors: what each one says and thinks, in the reader's pick. Named hues, drawn for either theme ---- */
.hue-pink { --hue: #D0246E; }  .hue-rose { --hue: #C03546; }  .hue-coral { --hue: #C2410C; }
.hue-gold { --hue: #A16207; }  .hue-mint { --hue: #047857; }  .hue-teal { --hue: #0E7490; }
.hue-sky { --hue: #1D4ED8; }   .hue-lilac { --hue: #7C3AED; } .hue-silver { --hue: #6B6470; }
:root[data-theme="dark"] .hue-pink { --hue: #FF8FB8; }  :root[data-theme="dark"] .hue-rose { --hue: #FF6F86; }
:root[data-theme="dark"] .hue-coral { --hue: #FFA274; } :root[data-theme="dark"] .hue-gold { --hue: #F5D76E; }
:root[data-theme="dark"] .hue-mint { --hue: #7FE0B5; }  :root[data-theme="dark"] .hue-teal { --hue: #5CD5E0; }
:root[data-theme="dark"] .hue-sky { --hue: #8FB8FF; }   :root[data-theme="dark"] .hue-lilac { --hue: #C9A7FF; }
:root[data-theme="dark"] .hue-silver { --hue: #D6D0DA; }
:root[data-theme] body .passage q.sp.hued, .passage .fx-thought.hued { color: var(--hue); }   /* over the speaker and quote colors */
.colors { container-type: inline-size; }
.color-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; }   /* the swatches line up */
.color-row { display: contents; }
.color-row > span { color: var(--ink-2); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.color-row .soon-tag { margin-left: 6px; }
.color-row.off > span { color: var(--ink-3); }   /* not yet: the label reads lighter, the swatches fade */
.color-row.off > .swatches { opacity: .55; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--hue); cursor: pointer;
          outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .15s; }
@media (hover: none) { .swatches { gap: 12px; } .swatch { width: 30px; height: 30px; } }   /* a fingertip each */
.swatch:hover:not(:disabled) { transform: scale(1.12); }
.swatch[aria-checked="true"] { outline-color: var(--ink); }
.swatch.auto { box-shadow: inset 0 0 0 2px var(--line);   /* automatic: no color of their own */
               background: linear-gradient(135deg, transparent calc(50% - 1px), var(--ink-3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.swatch:disabled { cursor: default; }
@container (max-width: 420px) {   /* too narrow for a row each (the memory panel, phones): each label over its swatches */
  .color-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .color-row:not(:last-child) > .swatches { margin-bottom: 7px; }
  .swatches { display: grid; grid-template-columns: repeat(10, minmax(0, 30px)); gap: 4px; }   /* one line: they shrink to fit */
  .swatch { width: 100%; height: auto; aspect-ratio: 1; }
}
@container (max-width: 279px) { .swatches { grid-template-columns: repeat(5, minmax(0, 30px)); gap: 8px; } }   /* narrower still: two lines, none too small to tap */

/* ---- help ---- */
.prose { display: flex; flex-direction: column; gap: 22px; max-width: 700px; }
.prose section { display: flex; flex-direction: column; gap: 8px; }
.prose h2 { font-size: 26px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose strong { color: var(--ink); }
.prose a, .hint a, .foot a { color: var(--pink-text); font-weight: 800; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }

/* ---- the terms and the privacy policy (/terms, /privacy): plain pages in the app's look, readable before the age check -- */
.legal { max-width: 780px; margin: 0 auto; padding: 24px 20px 48px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.legal-head .back { margin: 0 -6px 0 0; }
.legal h1 { font-size: 42px; line-height: 1.05; }
.legal .sub { margin-top: 8px; color: var(--ink-2); font-weight: 600; }
.legal .card { margin-top: 22px; }
.legal main { max-width: none; padding: 0; }   /* (not the app's page column) */
.legal .prose { max-width: none; }
.legal .prose h2 { font-size: 24px; }
.legal-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 28px; font-size: 13.5px; }
.legal-foot a { color: var(--ink-2); font-weight: 800; text-decoration: none; }
.legal-foot a:hover, .legal-foot a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .legal { padding: 18px 16px 40px; } .legal h1 { font-size: 34px; } .legal .prose h2 { font-size: 21px; } }

/* ---- the front door (app.js homeView): a landing page for a visitor who isn't signed in, a home page for one who is ---- */
/* The landing: none of the app around it (no sidebar, profile column or phone bar), the page's own header instead. */
body.landing .shell, body.landing:not(.reading) .shell { grid-template-columns: minmax(0, 1fr); }
body.landing :is(.sidebar, .me-rail, .topbar) { display: none !important; }
.landing { display: flex; flex-direction: column; gap: 72px; }
.land-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.land-nav { display: flex; align-items: center; gap: 8px; }
.land-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.land-kicker { display: inline-block; padding: 6px 13px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper);
               color: var(--ink-2); font: 900 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 0 var(--shadow); }
.land-hero h1 { margin: 20px 0 18px; font-size: 68px; line-height: .98; }
.land-hero h1 em { font-style: normal; color: var(--pink-text); }
.land-hero .lead { max-width: 32em; color: var(--ink-2); font-size: 19px; line-height: 1.55; }
.land-hero .actions { margin-top: 28px; }
.land-hero .hint { margin-top: 16px; font-size: 14px; }
.land-mine { margin-top: 10px; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.land-mine a { color: var(--pink-text); font-weight: 800; }
/* a story as the reader has it: a sticker of a page, BlushBot peeking over its corner */
.land-art { position: relative; padding-top: 44px; }
.land-bot { position: absolute; top: -20px; right: 22px; z-index: 2; width: 116px; }
.land-bot img { display: block; width: 100%; height: auto; }
.land-demo { gap: 14px; padding: 18px 22px 24px; rotate: 1.5deg; }
.land-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 132px 12px 0;
                 border-bottom: 2px dashed var(--line-soft); font: 400 19px/1.2 var(--font-display); }
.land-demo .you { align-self: flex-end; max-width: 88%; font-size: 14.5px; }
.land-demo .passage, body.serif .land-demo .passage { font-size: 16.5px; line-height: 1.7; }
.land-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.land-feat .ic, .home-opt .ic { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--line); border-radius: 15px;
                                background: var(--pink); color: var(--on-pink); box-shadow: 0 3px 0 var(--shadow); }
.land-feat h3 { font-size: 21px; line-height: 1.15; }
.land-feat p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.land-steps h2 { margin-bottom: 24px; font-size: 34px; text-align: center; }
.land-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.land-steps li { display: flex; align-items: flex-start; gap: 14px; }
.land-steps b { font-size: 17px; }
.land-steps p { margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.land-end { align-items: center; gap: 12px; padding: 38px 24px; background: var(--paper-2); text-align: center; }
.land-end h2 { font-size: 34px; line-height: 1.1; }
.land-end p { color: var(--ink-2); }
.land-end .actions { margin-top: 8px; }
@media (max-width: 980px) {
  .land-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .land-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-steps ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .landing { gap: 52px; }
  .land-hero h1 { font-size: 46px; }
  .land-hero .lead { font-size: 17px; }
  .land-hero .actions .btn, .land-end .actions .btn { width: 100%; }
  .land-nav .btn.ghost { display: none; }   /* (Help is in the footer) */
  .land-feats { grid-template-columns: minmax(0, 1fr); }
  .land-bot { width: 92px; right: 12px; }
  .land-demo-bar { padding-right: 104px; }
  .land-steps h2, .land-end h2 { font-size: 28px; }
}
/* Home: the latest story to pick up, then a few ways on */
.home-continue { gap: 12px; padding: 24px 26px; margin-bottom: 22px; }
.home-continue h2 { font-size: 32px; line-height: 1.1; overflow-wrap: anywhere; }
.home-continue .snip { font: 400 16px/1.65 var(--font-read); }
.home-first { flex-direction: row; align-items: center; gap: 24px; padding: 24px 28px; margin-bottom: 22px; background: var(--paper-2); }
.home-first img { flex: none; width: 112px; height: auto; }
.home-first h2 { font-size: 27px; line-height: 1.15; }
.home-first p { margin: 6px 0 16px; color: var(--ink-2); }
.home-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }   /* (three or four, a row however wide) */
.home-opts > :nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }   /* (every other one leans the other way) */
.home-opt { gap: 8px; }
.home-opt .ic { width: 42px; height: 42px; border-radius: 14px; background: var(--pink-soft); color: var(--pink-text); }
.home-opt b { margin-top: 4px; font: 400 20px/1.15 var(--font-display); }
.home-opt small { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 560px) {
  .home-first { flex-direction: column; text-align: center; }
  .home-first .actions { justify-content: center; }
}

/* ---- dialogs, toast ------------------------------------------------------------------------------------------------------ */
dialog { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: calc(100vw - 24px); }
dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#gate::backdrop { background-color: var(--bg, #1E0C18); background-image: radial-gradient(var(--dots, #2E1426) 1.5px, transparent 1.8px);
                  background-size: 24px 24px; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* nothing of the library shows before you're in */
.sheet { display: flex; flex-direction: column; gap: 16px; width: 480px; max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
         padding: 28px; border: 2px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: 0 6px 0 var(--shadow); }
.sheet:focus { outline: none; }
.sheet { scrollbar-width: none; }
.sheet::-webkit-scrollbar { display: none; }
dialog::before, dialog::after { content: ""; position: absolute; left: 2px; right: 2px; z-index: 1; height: 64px; opacity: 0; pointer-events: none;
                                transition: opacity .2s; }
dialog::before { top: 2px; border-radius: 26px 26px 0 0; background: linear-gradient(to top, transparent, var(--paper) 70%); }
dialog::after { bottom: 2px; border-radius: 0 0 26px 26px; background: linear-gradient(to bottom, transparent, var(--paper) 70%); }
dialog.more-above::before, dialog.more-below::after { opacity: 1; }
.scroll-cue { position: absolute; left: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; margin-left: -19px; padding: 0;
              border: 2px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--pink); box-shadow: 0 3px 0 var(--shadow); cursor: pointer; }
.scroll-cue:hover { background: var(--pink-soft); }
.scroll-cue[hidden] { display: none; }
.scroll-cue.up { top: 12px; }
.scroll-cue.down { bottom: 14px; }
.scroll-cue .i { width: 20px; height: 20px; }
.sheet .set-head { scroll-margin-top: 60px; }   /* a jump to a section clears the arrow at the top */
.sheet.center { align-items: center; text-align: center; }
.sheet h2 { font-size: 30px; line-height: 1.1; }
.sheet > p { color: var(--ink-2); }
.gate-mascot { width: 150px; height: auto; margin: -6px 0 -8px; }
.switches { display: flex; flex-direction: column; gap: 14px; }
.switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 50px; height: 30px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper-2); transition: background-color .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 50%;
                        background: var(--paper); transition: transform .38s cubic-bezier(.3, 1.8, .5, 1), background-color .15s; }   /* it bounces into place */
.switch input:checked + .track { background: var(--pink); }
.switch input:checked + .track::after { transform: translateX(20px); }
:root[data-theme="dark"] .switch input:not(:checked) + .track { border-color: var(--line-field); }   /* off, after dark: an edge and a knob you can see */
:root[data-theme="dark"] .switch input:not(:checked) + .track::after { background: var(--ink-3); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch b { display: block; font-weight: 800; }
.switch small { display: block; color: var(--ink-3); font-size: 13px; }
.set-head { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 2px dashed var(--line-soft); }
/* Settings: its categories down the left (as the sidebar has them), the one picked on the right, switches two to a row.
   One size whichever is shown, so moving between them doesn't jump. On a phone the categories are tabs along the top. */
#settings .settings { position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr); width: 980px; max-width: 100%;
                      height: 700px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden;
                      border: 2px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: 0 6px 0 var(--shadow); }
.set-nav { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 26px 14px 16px; overflow-y: auto;
           border-right: 2px solid var(--line-soft); background: var(--paper-2); }
.set-nav h2 { display: flex; align-items: center; gap: 10px; padding: 0 10px; font-size: 26px; line-height: 1.1; }
.set-nav h2 .i { width: 22px; height: 22px; color: var(--pink); }
.set-tabs { display: flex; flex-direction: column; gap: 4px; }
.set-tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 14px;
           background: transparent; color: var(--ink-2); font: 800 15px/1.2 var(--font-ui); text-align: left; text-decoration: none; cursor: pointer;
           transition: background-color .15s, color .15s, box-shadow .15s; }
.set-tab:hover { background: var(--pink-soft); color: var(--ink); }
.set-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--shadow); }
.set-tab[aria-selected="true"] .i { color: var(--pink); }
.set-tab .new-tag { margin-left: auto; }
.set-nav-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 2px dashed var(--line-soft); }
.set-main { min-height: 0; overflow-y: auto; padding: 30px 40px 34px; scrollbar-width: thin; }
.set-close { position: absolute; top: 18px; right: 18px; z-index: 2; }   /* (over the dialog's corner: it doesn't scroll away) */
.set-pane { display: flex; flex-direction: column; gap: 28px; animation: pane-in .24s ease-out; }
.set-pane[hidden] { display: none; }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } }
.pane-title { padding-right: 48px; font-size: 30px; line-height: 1.1; }
.set-group { display: flex; flex-direction: column; gap: 14px; }
.set-group > h4 { color: var(--pink-text); font: 900 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.account-says { display: flex; flex: 1 1 260px; flex-direction: column; gap: 10px; min-width: 0; }
#settings .account-says .hint { flex: none; }
#settings .acct-lines[hidden] { display: none; }
#settings .settings:focus { outline: none; }   /* (it takes the focus as it opens: no ring on a tab nobody chose) */
#settings .data-row { margin-top: 0; }
#settings .switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; }
#settings .switch { align-items: flex-start; }
#settings .switch .track { margin-top: 2px; }
@media (max-width: 760px) { #settings .switches { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 720px) {
  #settings .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 24px); }
  .set-nav { gap: 12px; padding: 18px 14px 10px; overflow: visible; border-right: 0; border-bottom: 2px solid var(--line-soft); }
  .set-nav h2 { padding: 0 4px; font-size: 22px; }
  .set-tabs { flex-direction: row; gap: 6px; margin: 0 -14px; padding: 2px 14px 6px; overflow-x: auto; scrollbar-width: none; }
  .set-tabs::-webkit-scrollbar { display: none; }
  .set-tab { flex: none; width: auto; min-height: 38px; }
  .set-nav-foot { display: none; }   /* (Help and feedback are in the page's own menu) */
  .set-main { padding: 22px 18px 26px; }
  .set-close { top: 12px; right: 10px; }
  .pane-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .set-pane { animation: none; } }
.set-head h3 { font-size: 20px; }
.new-tag { padding: 3px 9px; border-radius: 999px; background: var(--pink); color: var(--on-pink); font: 900 11.5px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.stars { display: flex; gap: 8px; }
.stars button { padding: 0; border: 0; background: none; color: var(--line-soft); font-size: 34px; line-height: 1; cursor: pointer; }
.stars button.on { color: var(--pink); }
.picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; max-height: 50dvh; overflow-y: auto; padding: 2px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--line-soft); border-radius: 16px; background: var(--paper);
        color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--line); background: var(--pink-soft); }
.pick[aria-current="true"] { border-color: var(--line); background: var(--pink-soft); }
.pick b { display: block; font-weight: 800; }
.pick small { color: var(--ink-3); }
.pick:disabled { opacity: .45; cursor: default; }
/* As wide as its words, up to the edges: starting from the middle of the window, it would otherwise only get half of it. */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 11px 18px; border: 2px solid var(--line);
         border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 14.5px; box-shadow: 0 3px 0 var(--shadow);
         transform: translate(-50%, 18px); opacity: 0; pointer-events: none; transition: opacity .18s ease-in, transform .22s ease-in; }   /* (going: down and away) */
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity .16s ease-out, transform .5s cubic-bezier(.2, 1.5, .4, 1); }   /* (coming: up, with a bounce) */
.toast.bad { background: var(--danger); color: var(--on-danger); }
.toast.act.show { pointer-events: auto; }   /* one with Undo on it */
.toast-act { margin: -6px -6px -6px 12px; padding: 6px; border: 0; background: none; color: inherit; font: inherit; font-weight: 900;
             text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.reading .toast { bottom: calc(var(--composer-h, 148px) + 2px); }   /* just above the composer, however tall it is */

/* ---- motion: page changes, dialogs, menus, the library's cards, BlushBot at work, small celebrations (app.js: turnPage,
   morph, heartBurst, sparkles). Off for a reader who asked for less motion; discreet mode keeps only the quiet part. ------------ */
/* A page change (a view transition): the old page fades out as the new one fades in (the browser's own cross-fade, which
   never dims between them), its pieces rising into place. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes page-rise { from { opacity: 0; transform: translateY(12px); } }
body:not(.reading) #view.enter > :not(.grid), body.reading #view.enter .story { animation: page-rise .42s cubic-bezier(.2, .8, .3, 1) backwards; }   /* (the library's cards rise on their own) */
body:not(.reading) #view.enter > :nth-child(2) { animation-delay: .04s; }
body:not(.reading) #view.enter > :nth-child(3) { animation-delay: .08s; }
body:not(.reading) #view.enter > :nth-child(n + 4) { animation-delay: .12s; }
/* A story's card opening: a sheet of paper the card's size grows to fill the page as the card's words fade, and the
   story shows through as it goes. Closing, the page shrinks back into the card. (.hero-land: the page's place.) */
.hero-land { position: fixed; top: 0; right: 0; bottom: 0; left: var(--rail-w); pointer-events: none; }
@media (max-width: 899px) { .hero-land { left: 0; } }
::view-transition-group(hero) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .85, .2, 1); }
:root[data-vt]::view-transition-image-pair(hero) { border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--shadow); }
:root[data-vt="open"]::view-transition-image-pair(hero) { animation: .5s ease both hero-grow; }
:root[data-vt="close"]::view-transition-image-pair(hero) { animation: .5s ease both hero-shrink; }
@keyframes hero-grow { 0% { border-radius: 22px; } 30% { opacity: 1; } 100% { border-radius: 0; opacity: 0; } }   /* (the story shows through as it grows) */
@keyframes hero-shrink { 0% { border-radius: 0; opacity: 0; } 25% { opacity: 1; } 100% { border-radius: 22px; } }
:root[data-vt="open"]::view-transition-old(hero) { animation: .14s ease-out both vt-out; }
:root[data-vt="open"]::view-transition-new(hero), :root[data-vt="close"]::view-transition-old(hero) { animation: none; opacity: 0; }
:root[data-vt="close"]::view-transition-new(hero) { animation: .22s ease-out .22s both vt-in; }
@media (prefers-reduced-motion: no-preference) {
  /* Dialogs come up with a slight zoom and a bounce, and sink away; the page behind dims as they do. (The age check's
     backdrop is solid from the start: nothing of the library shows before you're in.) */
  dialog:not(#gate) { opacity: 0; scale: .96; translate: 0 6px;
                      transition: opacity .15s ease-in, scale .15s ease-in, translate .15s ease-in, overlay .15s allow-discrete, display .15s allow-discrete; }
  dialog:not(#gate)[open] { opacity: 1; scale: none; translate: none;
                            transition: opacity .2s ease-out, scale .34s cubic-bezier(.2, 1.3, .4, 1), translate .34s cubic-bezier(.2, 1.3, .4, 1),
                                        overlay .34s allow-discrete, display .34s allow-discrete; }
  @starting-style { dialog:not(#gate)[open] { opacity: 0; scale: .93; translate: 0 16px; } }
  dialog:not(#gate)::backdrop { opacity: 0; transition: opacity .2s ease, overlay .2s allow-discrete, display .2s allow-discrete; }
  dialog:not(#gate)[open]::backdrop { opacity: 1; }
  @starting-style { dialog:not(#gate)[open]::backdrop { opacity: 0; } }
  /* menus drop open from where they hang */
  .menu[open] > .menu-pop { transform-origin: top right; animation: menu-drop .22s cubic-bezier(.2, 1.3, .4, 1) backwards; }
  /* the library's cards rise in one after another as it opens, each landing like a sticker */
  :root:not([data-discreet]) .grid.rise > * { animation: card-rise .55s cubic-bezier(.2, .9, .3, 1.15) backwards;
                                              animation-delay: calc(min(var(--i, 0), 12) * 45ms + 60ms); }
  .grid.rise > :nth-child(even) { --tilt: 1.5deg; }
  /* a new passage lands with a soft glow behind it, fading */
  :root:not([data-discreet]) .turn.arrived .passage { position: relative; isolation: isolate; }
  :root:not([data-discreet]) .turn.arrived .passage::before { content: ""; position: absolute; inset: -18px -28px; z-index: -1; border-radius: 32px;
    pointer-events: none; background: radial-gradient(closest-side, var(--pink-soft), transparent); opacity: 0; animation: landed 2.6s ease-out; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
@keyframes card-rise { from { opacity: 0; transform: translateY(22px) scale(.96) rotate(var(--tilt, -1.5deg)); } }
@keyframes landed { 12% { opacity: 1; } }
/* BlushBot, thinking, while the writer gets going: then what it's doing, and the dots */
.writing .bot-think { display: inline-flex; margin: -6px 0; }
.writing .bot-think img { display: block; width: 34px; height: auto; animation: bob-sm 1.2s ease-in-out infinite; }
.writing .bot-think + .dots { order: 2; }
@keyframes bob-sm { 50% { transform: translateY(-3px) rotate(-5deg); } }
/* What flies for a moment: hearts (a story starting, five hearts for one), sparkles (round what BlushBot just wrote). In
   a layer over everything (#fx, a popover: over an open dialog too), each a sticker with an outline. */
#fx { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: visible;
      background: transparent; color: inherit; pointer-events: none; z-index: 90; }
.fx-bit { position: absolute; display: block; width: 24px; height: 24px; will-change: transform, opacity; }
.fx-bit svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: var(--line); stroke-width: 1.6; stroke-linejoin: round; }
.fx-bit.heart { color: var(--pink); }
.fx-bit.heart:nth-child(3n) { color: var(--blush); }
.fx-bit.heart:nth-child(4n + 1) { color: #FFC2D6; }
.fx-bit.sparkle { width: 22px; height: 22px; color: var(--pink); filter: drop-shadow(0 0 5px var(--blush)); }   /* (no outline: a glint) */
.fx-bit.sparkle svg { stroke: none; }
.fx-bit.sparkle:nth-child(3n) { color: #FFF4F8; }
:root:not([data-theme="dark"]) .fx-bit.sparkle:nth-child(3n) { color: var(--blush); }   /* (white would vanish on porcelain) */

/* ---- discreet mode: a plain, gray, flat chat app at a glance ------------------------------------------------------------------------ */
.plain-logo, .plain-copy { display: none; }
:root[data-discreet] .brand-copy { display: none; }   /* the page's own words, in plain ones */
:root[data-discreet] .plain-copy { display: inline; }
:root[data-discreet] { --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ui: var(--font-display); --font-read: var(--font-display);
                       --shadow: transparent; --dots: transparent; --pink-text: var(--pink); }
:root[data-discreet][data-theme="dark"] { --bg: #212121; --side: #171717; --paper: #2F2F2F; --paper-2: #292929; --ink: #ECECEC; --ink-2: #B4B4B4; --ink-3: #9B9B9B;
  --line: #424242; --line-soft: #383838; --line-field: #7A7A7A; --pink: #ECECEC; --on-pink: #0D0D0D; --blush: #B4B4B4; --pink-soft: #2F2F2F; --focus: #8F8F8F;
  --scrim: #000000A6; --scroll: #4A4A4A; --scroll-hover: #666666; }
:root[data-discreet][data-theme="light"] { --bg: #FFFFFF; --side: #F9F9F9; --paper: #FFFFFF; --paper-2: #F4F4F4; --ink: #0D0D0D; --ink-2: #5D5D5D; --ink-3: #6E6E6E;
  --line: #E3E3E3; --line-soft: #ECECEC; --line-field: #8A8A8A; --pink: #0D0D0D; --on-pink: #FFFFFF; --blush: #5D5D5D; --pink-soft: #F4F4F4; --focus: #5D5D5D;
  --scrim: #0000004D; --scroll: #D0D0D0; --scroll-hover: #A8A8A8; }
:root[data-discreet] body { background-image: none; }
:root[data-discreet] :is(.btn, .icon-btn, .card, .tabs, .heat, .sheet, .composer .box, .you, .you-actions, .note-pop, .num, .av, .badge18, .cast-row, .person, .adv, .pick,
  .card.new .plus, .scene-card, .meter, .switch .track, .switch .track::after, #settings .settings) { border-width: 1px; box-shadow: none; }
:root[data-discreet] .set-tab[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-discreet] :is(.btn, .icon-btn, a.card, .card.linked):hover { transform: none; box-shadow: none; }
:root[data-discreet] :is(.sidebar, .drawer) { border-width: 0 1px 0 0; box-shadow: none; }
:root[data-discreet] .drawer { border-width: 0 0 0 1px; }
:root[data-discreet] :is(.topbar, .reader-bar) { border-bottom-width: 1px; }
:root[data-discreet] :is(h1, h2, h3) { font-weight: 650; letter-spacing: -.01em; }
:root[data-discreet] .page-head h1, :root[data-discreet] .editor-head h1 { font-size: 30px; }
:root[data-discreet] .card { border-radius: 14px; }
:root[data-discreet] :is(.logo img, .rail-mark img, .empty img, .gate-mascot, .bot-face, .bot-mini, .hatch, .foot, .meter, .glow, .scene-card, .soon-tag, .you b, .bot-think, .land-bot, .home-first img) { display: none !important; }
:root[data-discreet] .writing .dots { order: 0; }
@media (prefers-reduced-motion: no-preference) {   /* quiet: no bounces */
  :root[data-discreet] .toast.show { transition: opacity .16s ease-out, transform .2s ease-out; }
  :root[data-discreet] .switch .track::after { transition: transform .15s ease; }
  :root[data-discreet] .menu[open] > .menu-pop { animation-name: menu-fade; animation-duration: .12s; }
  :root[data-discreet] dialog:not(#gate)[open] { transition-timing-function: ease-out; }
}
@keyframes menu-fade { from { opacity: 0; } }
:root[data-discreet] .plain-logo { display: block; padding: 6px 10px; color: var(--ink); font: 650 19px/1 var(--font-ui); }
:root[data-discreet] .passage q { color: inherit !important; }
/* the text effects too, at once: also on a passage still being written (its next words come plain) */
:root[data-discreet] .passage .fx { color: inherit !important; font-style: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit;
                                     opacity: 1; text-shadow: none; }
:root[data-discreet] .passage :is(.fx .l, .fx-burst) { animation: none; }
:root[data-discreet] .chip { border-width: 1px; }
:root[data-discreet] .av { background: var(--paper-2) !important; color: var(--ink); }
:root[data-discreet] .you { border: 0; border-radius: 18px; background: var(--paper-2); }
:root[data-discreet] .side-item[aria-current="page"] { background: var(--paper-2); box-shadow: none; }
:root[data-discreet] .bot-name, :root[data-discreet] .card.new .plus { color: var(--ink); }
:root[data-discreet] .notches .thumb { box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {   /* slides, without the bounce */
  :root[data-discreet] .notches:not(.dragging) .thumb { transition: left .2s ease, transform .15s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .passage .w, .dots i, .glow-peak::before, .bot.thinking .bot-face img, .passage .fx .l, .passage .fx-burst.pop, .icon-btn.thinking .i, .turn.arrived .turn-actions { animation: none; }
  .btn, .icon-btn, a.card, .drawer, .toast, .add-note, .you-actions { transition: none; }
  .note-pop { animation: none; }
  .notches i, .notches .thumb, .notches.dragging .thumb, .knob .knob-box, .knob.on .knob-box, .spark { transition: none; }
  .toast, .toast.show, .chip, .switch .track::after, a.card, button.card, .card.linked, .btn:has(> .morph) { transition: none; }
  .writing .bot-think img { animation: none; }
  .bot-filled, .fill-bar.thinking .bot-face img { animation: none; }
}

/* ---- narrow screens -------------------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .shell, body.reading .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-105%); transition: transform .2s ease;
             box-shadow: 6px 0 0 var(--shadow); visibility: hidden; }
  body.side-open .sidebar { transform: none; visibility: visible; }
  body.reading .sidebar { display: none; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 12px;
            background: var(--bg); border-bottom: 2px solid var(--line); }
  .topbar .logo img { height: 28px; }
  body.reading .topbar { display: none; }
  .composer, .composer-fade { left: 0; }
}
@media (max-width: 720px) {
  .bot { flex-direction: column; }
  .bot-face { width: 72px; }
  main { padding: 22px 16px 48px; }
  .page-head h1 { font-size: 34px; }
  .editor-head h1 { font-size: 30px; }
  .tabs { display: flex; width: 100%; }
  .tabs a { flex: 1; justify-content: center; padding: 0 8px; }
  .two, .two.age, .details, .scene-grid { grid-template-columns: minmax(0, 1fr); }
  .details { gap: 8px; }
  .reader-bar { padding: 0 8px; gap: 6px; }
  .reader-bar :is(#r-heat, .mem-word) { display: none; }   /* (heat is in the ⋯ menu here) */
  .reader-bar .meter { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; padding: 0; border: 0; border-radius: 0;
                       background: transparent; }   /* a line along the bar's edge, so the title keeps the room */
  .menu-pop .only-narrow { display: flex; }
  .story { padding: 20px 16px calc(var(--composer-h, 146px) + 24px); }
  .passage, body.serif .passage { font-size: 17px; }
  .composer { padding: 14px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer .hint { display: none; }
  .foot { padding: 16px 16px 26px; }
}