/* /thoughts: the thought maker, laid out as one post (the founder's sketch,
   2026-10-13): the brand on the left of the header and the maker's name and
   avatar on the right; a rounded post frame holding the loop and the thought
   side by side; four round buttons under them (Loop, Write, Doodle, Share),
   each opening a small tray between the card and the buttons.

   The interface speaks in a plain system sans with thin line icons, in the
   manner of Substack; the content itself (the thought, the card) keeps the
   site's Garamond. Colours are the live site's tokens (site.css). On a laptop
   the whole post fits the screen: the card shrinks to make room for a tray. */

[hidden] { display: none !important; }

/* the front page's words are in this hand (Caveat, OFL; licence beside the font) */
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* the cards are signed in this hand (card.js draws it; licence beside the font) */
@font-face {
  font-family: "Mrs Saint Delafield";
  src: url("/assets/fonts/mrs-saint-delafield.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.is-thoughts {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wash: rgba(38, 42, 24, 0.06);
  --wash-2: rgba(38, 42, 24, 0.1);
  --shade: 38, 42, 24;                       /* shadows and scrims, as r, g, b */
  --hairline: rgba(38, 42, 24, 0.14);        /* a ring round a colour swatch */
  --raised: var(--surface);                  /* the chosen part of a switch */
  --accent-ink: var(--accent);               /* the accent as text or a mark */
  --header-bg: rgba(246, 240, 230, 0.92);    /* as site.css has it */
  --edge: var(--rule);                       /* outlined buttons; fields in dark */
}
.is-thoughts .site-header { background: var(--header-bg); }
.is-thoughts .site-header .brand-mark { fill: var(--accent-ink); }

/* ---- dark: deep neutral grays, cream-white words, the rose for accents ---------
   Contrast checked for every pairing: words 4.5:1 or more against what they sit
   on, icons, edges of fields and outlined buttons, and focus rings 3:1 or more.
   Followed from the device unless the visitor chose (html[data-theme]). The two
   blocks below are the same tokens: keep them in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) .is-thoughts .maker :is(textarea, input[type="text"]),
  :root:not([data-theme="light"]) .is-thoughts .ai-dialog input { box-shadow: inset 0 0 0 1px var(--edge); }
  :root:not([data-theme="light"]) .is-thoughts {
    --bg: #121212;
    --surface: #1C1C1C;
    --raised: #474747;
    --ink: #EDEDED;
    --ink-2: #CFCFCF;
    --muted: #A3A3A3;
    --rule: #383838;
    --edge: #6A6A6A;
    --accent: #C8435A;
    --accent-strong: #A93348;
    --accent-wash: #3A2328;
    --accent-ink: #F2AFBD;
    --rose-wash: #2E2628;
    --sage-wash: #26282A;
    --leaf: #B5C07A;
    --wash: rgba(255, 255, 255, 0.07);
    --wash-2: rgba(255, 255, 255, 0.12);
    --shade: 0, 0, 0;
    --hairline: rgba(255, 255, 255, 0.4);
    --header-bg: rgba(18, 18, 18, 0.9);
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] .is-thoughts .maker :is(textarea, input[type="text"]),
:root[data-theme="dark"] .is-thoughts .ai-dialog input { box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-theme="dark"] .is-thoughts {
  --bg: #121212;
  --surface: #1C1C1C;
  --raised: #474747;
  --ink: #EDEDED;
  --ink-2: #CFCFCF;
  --muted: #A3A3A3;
  --rule: #383838;
  --edge: #6A6A6A;
  --accent: #C8435A;
  --accent-strong: #A93348;
  --accent-wash: #3A2328;
  --accent-ink: #F2AFBD;
  --rose-wash: #2E2628;
  --sage-wash: #26282A;
  --leaf: #B5C07A;
  --wash: rgba(255, 255, 255, 0.07);
  --wash-2: rgba(255, 255, 255, 0.12);
  --shade: 0, 0, 0;
  --hairline: rgba(255, 255, 255, 0.4);
  --header-bg: rgba(18, 18, 18, 0.9);
}

/* the sun / moon button, just left of the profile */
.theme-btn { margin-left: auto; }
.theme-btn + .who-wrap { margin-left: 4px; }
.is-thoughts .site-footer { background: transparent; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.8125rem; }
.is-thoughts .site-footer, .is-thoughts .site-footer p { color: var(--muted); }

.maker, .ready, .who { font-family: var(--sans); color: var(--ink); }

/* the wordmark: "amorisgratia" signed, in the cards' own hand, close by the logo */
.is-thoughts .site-header .brand {
  gap: 0.2rem;
  font: 400 2.25rem/1 "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive;
  letter-spacing: 0;
}
.is-thoughts .site-header .brand span { padding-top: 0.12em; }
.is-thoughts .site-header .brand-mark { width: 16px; height: 16px; }

/* line icons: thin, rounded, the colour of the text around them */
.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the header: You, at the top right where the profile was (2026-10-26: "aesthetics becomes you and it replaces
   the profile section"): your picture and "You", on every page; held down while You is open ---- */

.who-wrap {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 500 0.9375rem/1 var(--sans);
  cursor: pointer;
}
.who:hover { background: var(--wash); }
.who[aria-pressed="true"] { background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.who[aria-pressed="true"] .who-av { box-shadow: 0 0 0 2px var(--accent-ink); }
.who-name.is-empty { color: var(--muted); }
.who-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font: 600 0.9375rem/1 var(--sans);
}
.who-av .i { width: 18px; height: 18px; }

/* ---- the post --------------------------------------------------------------- */

.maker {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - var(--header));
  height: calc(100svh - var(--header));
  min-height: 460px;
  padding: 18px var(--gutter);
}
.post {
  flex: 1;
  min-height: 0;
  width: min(100%, 1040px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.04), 0 18px 48px -30px rgba(var(--shade), 0.35);
}

.tcard-box {
  flex: 1;
  min-height: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcard {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night-deep);
}
.tcard canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
}
.tcard canvas.is-drawing { cursor: crosshair; touch-action: none; }
.tcard canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the loop plays here, under the canvas, so the browser keeps it running */
.tcard-src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

/* play/pause and the tip float on the card, in dark glass */
.card-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 36, 19, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFF;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.card-btn .i { width: 16px; height: 16px; }
.tcard:hover .card-btn, .card-btn:focus-visible, .card-btn[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .card-btn { opacity: 0.85; } }
.card-tip {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(27, 36, 19, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFF;
  font: 500 0.8125rem/1.2 var(--sans);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card-tip.is-on { opacity: 1; }

/* ---- the four buttons ---------------------------------------------------------- */

.acts {
  flex: none;
  display: flex;
  justify-content: space-around;
  padding: 2px 0 0;
}
.act {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 72px;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 0.75rem/1 var(--sans);
  cursor: pointer;
}
.act-c {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.act-c .i { width: 20px; height: 20px; }
.act:hover .act-c { border-color: var(--ink-2); }
.act:hover, .act[aria-expanded="true"] { color: var(--ink); }
.act[aria-expanded="true"] .act-c { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.act-main .act-c { background: var(--accent); border-color: var(--accent); color: #FFF; }
.act-main:hover .act-c, .act-main[aria-expanded="true"] .act-c { background: var(--accent-strong); border-color: var(--accent-strong); color: #FFF; }
.act:focus-visible { outline: none; }
.act:focus-visible .act-c { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the trays ----------------------------------------------------------------- */

.tray { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 0; }
.tray-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tray-row + .tray-row, .tray textarea + .tray-row { margin-top: 10px; }
.spacer { flex: 1; }
.tray-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}
.privacy { display: inline-flex; align-items: center; gap: 5px; }
.privacy .i { width: 13px; height: 13px; }

/* write: soft fields; the thought is content, so it is Garamond */
.maker textarea,
.maker input[type="text"] {
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  resize: none;
}
.maker textarea {
  display: block;
  width: 100%;
  max-height: 7.5rem;
  padding: 10px 14px;
  font: 500 1.375rem/1.25 var(--display);
}
.maker input[type="text"] { flex: 1; min-width: 8rem; padding: 9px 14px; font: 400 0.9375rem/1.2 var(--sans); }
.maker textarea::placeholder, .maker input[type="text"]::placeholder { color: var(--muted); opacity: 1; }
.maker textarea:focus, .maker input[type="text"]:focus { outline: 1.5px solid var(--ink-2); outline-offset: 0; }
.count { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* loop: a strip of thumbnails */
.loops {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.loops button {
  flex: 0 0 120px;
  width: 120px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.loops img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: var(--night-deep);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.loops span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font: 400 0.75rem/1.3 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.loops button:hover img { outline-color: var(--rule); }
.loops button[aria-pressed="true"] img { outline-color: var(--ink); }
.loops button[aria-pressed="true"] span { color: var(--ink); font-weight: 500; }
.credit { flex: 1; min-width: 10rem; margin: 0; font-size: 0.75rem; color: var(--muted); text-align: right; }
.credit a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }

/* ---- small controls -------------------------------------------------------------- */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--wash);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: 500 0.8125rem/1 var(--sans);
  cursor: pointer;
}
.seg button .i { width: 16px; height: 16px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 0 0 0 0.5px rgba(var(--shade), 0.08);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--wash); color: var(--ink); }

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 0.8125rem/1 var(--sans);
  cursor: pointer;
}
.pill-btn:hover { border-color: var(--ink-2); }

.link-btn {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 0.875rem/1 var(--sans);
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

/* the one coloured button in a tray */
.btn-main {
  position: relative;
  overflow: hidden;
  min-height: 38px;
  min-width: 9rem;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #FFF;
  font: 600 0.875rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn-main:hover { background: var(--accent-strong); }
.btn-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-main.is-busy { background: var(--accent-strong); cursor: default; }
.btn-main.is-busy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: rgba(255, 255, 255, 0.16);
  transition: width 0.2s linear;
}
.btn-main span { position: relative; font-variant-numeric: tabular-nums; }
.btn-main:disabled { opacity: 0.45; cursor: not-allowed; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  padding: 0;
  cursor: pointer;
}
.swatches button[aria-pressed="true"] { outline: 1.5px solid var(--ink); outline-offset: 2px; }

.sizes { display: inline-flex; gap: 2px; }
.sizes button {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sizes button:hover { background: var(--wash); }
.sizes i { display: block; border-radius: 50%; background: var(--muted); }
.sizes button:nth-child(1) i { width: 4px; height: 4px; }
.sizes button:nth-child(2) i { width: 8px; height: 8px; }
.sizes button:nth-child(3) i { width: 13px; height: 13px; }
.sizes button[aria-pressed="true"] i { background: var(--ink); }

/* ---- the finished video ------------------------------------------------------ */

.ready {
  width: min(26rem, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  padding: 20px 24px 24px;
  box-shadow: 0 24px 64px -24px rgba(var(--shade), 0.45);
}
.ready::backdrop { background: rgba(var(--shade), 0.4); }
.ready-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ready-head .close { margin-right: -8px; }
.ready-title { margin: 0; font: 700 1.25rem/1.25 var(--sans); }
.ready-meta { margin-top: 4px; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
/* the video itself, to watch before it goes anywhere */
.ready-preview {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.ready-video { display: block; max-width: 100%; max-height: min(34vh, 320px); cursor: pointer; }
.ready-image { display: block; max-width: 100%; max-height: min(34vh, 320px); }
.ready-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.ready-play .i { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; stroke: none; }
.ready-play:hover { background: rgba(0, 0, 0, 0.75); transform: scale(1.05); }
.ready-play:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }
/* on a wider screen the video sits on the left and the ways to share it on the
   right, so the whole sheet fits a laptop's height */
@media (min-width: 760px) {
  .ready[open] {
    display: grid;
    width: min(50rem, calc(100vw - 48px));
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .ready-head { grid-column: 1 / -1; grid-row: 1; }
  .ready-preview { grid-column: 1; grid-row: 2 / 8; }
  .ready-meta { grid-column: 2; grid-row: 2; margin-top: 14px; }
  .ready .share-grid { grid-column: 2; grid-row: 3; }
  .ready-hint { grid-column: 2; grid-row: 4; }
  .ready-sub { grid-column: 2; grid-row: 5; }
  .ready .post-list { grid-column: 2; grid-row: 6; }
  .ready-video, .ready-image { max-height: min(64vh, 460px); }
}
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.share-opt {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 0.8125rem/1.2 var(--sans);
  cursor: pointer;
}
.share-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--wash);
  transition: background-color 0.15s ease;
}
.share-icon .i { width: 22px; height: 22px; }
.share-opt:hover .share-icon { background: var(--wash-2); }
.share-opt.share .share-icon { background: var(--accent); color: #FFF; }
.share-opt.share:hover .share-icon { background: var(--accent-strong); }
.ready-hint { margin-top: 14px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }
.ready-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font: 600 0.8125rem/1 var(--sans); color: var(--muted); }
.post-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.post-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 500 0.8125rem/1 var(--sans);
  color: var(--ink);
}
.post-list a:hover { border-color: var(--ink-2); }
.post-list .i { width: 13px; height: 13px; color: var(--muted); }

/* ---- phones and narrow windows: the post takes the width, the page scrolls ---- */

@media (min-width: 900px) {
  .maker .post {
    width: min(100%, 1400px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 20px;
    row-gap: 12px;
    padding: 14px;
    --side: 420px;
  }
  .maker .tcard-box { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  /* the buttons at the foot of the column; the open tray sits just above them */
  .maker .acts { grid-column: 2; grid-row: 2; padding: 8px 0 2px; border-top: 1px solid var(--rule); }
  .maker .tray { grid-column: 2; grid-row: 1; align-self: end; max-height: 100%; padding: 0 2px 4px; }
  /* the pictures and clips wrap, three across, in the column's height */
  .maker .loops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  .maker .loops button { width: auto; }
}

@media (max-width: 899px) {
  .maker { display: block; height: auto; min-height: 0; padding: 12px 10px 20px; }
  .post { width: 100%; padding: 10px 10px 6px; border-radius: 18px; }
  .tcard-box { flex: none; height: min(64svh, calc((100vw - 42px) * 0.5625)); }
  .maker[data-shape="square"] .tcard-box { height: min(64svh, calc(100vw - 42px)); }
  .maker[data-shape="tall"] .tcard-box { height: min(70svh, calc((100vw - 42px) * 1.7778)); }
  .credit { text-align: left; }
}

/* ---- the live card (/t): what a shared link opens, filling the screen ---------- */

.is-live { overflow: hidden; }
.is-live .site-header, .is-live .site-footer { display: none; }
.live { position: relative; height: 100vh; height: 100svh; font-family: var(--sans); }
.live-box { position: absolute; inset: 0; display: flex; }
.live-card { border-radius: 0; background: transparent; }
.live-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  pointer-events: none;
}
.live-bar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20, 24, 16, 0.62);   /* white words on it stay 4.5:1 even over a light page */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFF;
  pointer-events: auto;
}
.live-bar .live-brand { gap: 0.15rem; font: 400 1.75rem/1 "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive; letter-spacing: 0; }
.live-brand svg { width: 13px; height: 13px; fill: #D9534F; }
.live-make { font: 600 0.8125rem/1 var(--sans); }
.live-bar a:hover { background: rgba(20, 24, 16, 0.78); }
.live .card-btn { top: auto; bottom: 14px; right: 14px; opacity: 0.85; }
.live .card-tip { top: auto; bottom: 18px; }
.live-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  color: var(--ink);
  font-size: 1.0625rem;
}
.live-missing .btn-main { display: inline-flex; align-items: center; text-decoration: none; }

/* the cards of words alone, in the loop tray */
.loops button canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.loops button:hover canvas { outline-color: var(--rule); }
.loops button[aria-pressed="true"] canvas { outline-color: var(--ink); }
.act[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.pill-btn .lbl { pointer-events: none; }

/* ---- photo, troll mode, stickers, length ---------------------------------------- */

.who-av canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pill-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stickers { display: flex; flex-wrap: wrap; gap: 4px; }
.stickers button {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  font: 22px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  cursor: pointer;
}
.stickers button:hover { background: var(--wash); }
.stickers button[aria-pressed="true"] { border-color: var(--ink); background: var(--wash); }

/* ---- Thought or Troll: two kinds of card, switched under the profile ------------- */

/* in the header, just before light and dark (2026-10-16): Thought, Troll, Tale, Build */
.site-header .modes {
  align-self: center;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.site-header .modes + .theme-btn { margin-left: 8px; }
.site-header .modes button { min-height: 34px; min-width: 42px; justify-content: center; padding: 0 10px; font-size: 1.125rem; line-height: 1; }
/* a mark drawn where no emoji fits (Speak's lips and lapel mic), as big as the emoji beside it */
.site-header .modes .kind-icon { width: 1.3em; height: 1.3em; flex: none; }
/* where the post would reach under the switch, it starts below it (maker.js decides) */
.maker.is-under-modes { padding-top: 64px; }
.write-troll { display: grid; gap: 8px; }
.write-troll input { width: 100%; }
@media (max-width: 640px) {
  .who-name { display: none; }
  /* (seven options since 2026-10-19, Speak the seventh: the name and the light switch keep their size; the options draw closer, and
     on the narrowest phones slide sideways rather than squeeze them) */
  .site-header .modes { flex: 0 1 auto; min-width: 0; gap: 1px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
  .site-header .modes::-webkit-scrollbar { display: none; }
  .site-header .modes button { flex: none; min-width: 28px; min-height: 32px; padding: 0 3px; font-size: 0.95rem; }
  .site-header .modes + .theme-btn { flex: none; margin-left: 2px; }
  .is-thoughts .site-header .brand { flex: none; font-size: 1.6rem; }
}

/* ---- troll: the picture to type on (laid out like Tales and Thoughts) ------------- */

.troll-hint { margin: 0 0 8px; font-size: 0.8125rem; color: var(--muted); }
.write-troll .troll-play { justify-self: start; }

/* typing on the picture: the words sit where they will be drawn */
.meme-edit-wrap {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.meme-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(14, 15, 11, 0.82);
}
.meme-tools .icon-btn { width: 32px; height: 32px; color: #FFF; font: 700 0.8125rem/1 var(--sans); }
.meme-tools .icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.meme-tools .pill-btn { min-height: 28px; color: #FFF; border-color: rgba(255, 255, 255, 0.4); }
.maker .meme-edit {
  width: 100%;
  max-height: none;   /* it grows with every line typed (maker.js placeEditor); the thought field's cap is not for it */
  padding: 2px 8px;
  border: 1.5px dashed rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: #FFF;
  caret-color: #FFF;
  text-align: center;
  text-transform: uppercase;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  line-height: 1.04;
  overflow: hidden;
  resize: none;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000;
}
.maker .meme-edit:focus { outline: none; }

/* ---- pictures, and finding them with your AI --------------------------------------- */

.loops .upload-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1.5px dashed var(--rule);
  border-radius: 8px;
  color: var(--ink-2);
  font: 500 0.75rem/1.2 var(--sans);
}
.loops .upload-tile .i { width: 20px; height: 20px; }
.loops button:hover .upload-tile { border-color: var(--ink-2); }
.ai-panel input[type="text"] { width: 100%; }
/* a group's own choices (Images' parts; Words only as a video or a still) sit beside it, lighter */
.seg-sub { background: none; padding: 3px 0; }
/* a Tale's reel: its pictures and clips in order, each movable and removable */
.reel-strip { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; max-width: 100%; }
.reel-strip li { position: relative; flex: none; display: grid; grid-template-columns: auto auto auto; justify-items: center; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); }
.template-row { margin-top: 10px; gap: 8px; }
.fonts .font-hand { font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; }
.maker textarea.is-hand { font: 600 1.6rem/1.15 "Caveat", "Segoe Print", cursive; }
.motions { flex-wrap: wrap; }
.motions button { padding: 0 9px; }
.reel-time { font: 600 0.75rem/20px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.reel-strip img { grid-column: 1 / -1; display: block; width: 64px; height: 40px; object-fit: cover; border-radius: 7px; }
.reel-strip .n { position: absolute; top: 5px; left: 5px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: rgba(0, 0, 0, 0.66); color: #FFF; font: 700 0.6875rem/16px var(--sans); text-align: center; }
.reel-strip button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font: 600 0.8125rem/1 var(--sans); cursor: pointer; }
.reel-strip button:hover { background: var(--wash); color: var(--ink); }
.reel-strip button:disabled { opacity: 0.3; cursor: default; }

/* a Tale's parts: Part [− 2 +] of [− 3 +], then Next part */
.parts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stepper button { min-width: 30px; justify-content: center; padding: 0 8px; font-size: 1rem; }
.stepper output { min-width: 2.2em; text-align: center; font: 600 0.875rem/30px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-sub button[aria-pressed="true"] { background: var(--wash); box-shadow: none; }
/* Clip or Picture, the description and Find, on one line (the description wraps under on a phone) */
.ai-ask { flex-wrap: nowrap; }
.ai-ask input[type="text"] { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .ai-ask { flex-wrap: wrap; }
  .ai-ask input[type="text"] { flex-basis: 100%; order: -1; }
  .ai-ask .ai-find { margin-left: auto; }
}
.ai-panel .tray-row + .tray-row { margin-top: 8px; }
.ai-status { margin: 8px 0 0; min-height: 1.2em; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.ai-results:empty { display: none; }
.btn-main.is-busy { opacity: 0.8; }
.ai-dialog {
  width: min(28rem, calc(100vw - 32px));
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 20px 24px 22px;
  font-family: var(--sans);
  box-shadow: 0 24px 64px -24px rgba(var(--shade), 0.45);
}
.ai-dialog::backdrop { background: rgba(var(--shade), 0.4); }
.ai-field { display: grid; gap: 6px; margin-top: 14px; font: 500 0.8125rem/1.3 var(--sans); color: var(--ink-2); }
.ai-field input {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 400 0.9375rem/1.2 var(--sans);
}
.ai-field input:focus { outline: 1.5px solid var(--ink-2); }
.ai-field input::placeholder { color: var(--muted); opacity: 1; }
.ai-use-row { margin-top: 14px; }
.ai-use-label { font: 600 0.8125rem/1 var(--sans); }
.ai-links { margin-top: 12px; font-size: 0.8125rem; color: var(--muted); }
.ai-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.ai-dialog .actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

/* ---- your own ChatGPT and Claude: they open in their own tab ------------------------- */

.ai-own { margin-top: 8px; }
.ai-own-label, .ask-label { font-size: 0.8125rem; color: var(--ink-2); }
.ask-row { margin: 6px 0 2px; gap: 10px; }
.ask-row .link-btn, .ai-own .pill-btn { display: inline-flex; align-items: center; gap: 3px; }
.ask-row .link-btn .i, .ai-own .pill-btn .i { width: 12px; height: 12px; }
.ask-row .link-btn { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.ai-paste { margin: 4px 0 0; font-size: 0.75rem; color: var(--muted); }
.ai-paste .link-btn { padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tcard-box.is-drop .tcard { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* ---- New, Save, Drafts: the maker's own pieces, kept in this browser ---------------------- */

.piece-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.piece-bar .pill-btn { min-height: 32px; gap: 6px; padding: 0 12px; font-size: 0.875rem; }
.piece-bar .pill-btn .i { width: 15px; height: 15px; }
.piece-state { font-size: 0.8125rem; color: var(--muted); }
.piece-state.is-saved { color: var(--leaf); }
.piece-count:not(:empty) { margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--wash-2); font-size: 0.75rem; }
@media (min-width: 900px) {
  .maker .post { grid-template-rows: auto minmax(0, 1fr) auto; }
  .maker .piece-bar { grid-column: 2; grid-row: 1; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
  .maker .tcard-box { grid-row: 1 / 4; }
  .maker .tray { grid-row: 2; }
  .maker .acts { grid-row: 3; }
}
.pieces {
  width: min(34rem, calc(100vw - 32px));
  max-height: min(80vh, 640px);
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 20px 24px 18px;
  font-family: var(--sans);
  box-shadow: 0 24px 64px -24px rgba(var(--shade), 0.45);
}
.pieces::backdrop { background: rgba(var(--shade), 0.4); }
.pieces-tabs { margin-top: 12px; }
.pieces-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; max-height: 48vh; overflow-y: auto; }
.pieces-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--rule); border-radius: 12px; }
.pieces-list li.is-current { border-color: var(--ink-2); }
.pieces-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--night-deep); }
.pieces-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1.0625rem/1.25 var(--display); }
.pieces-list .m { font-size: 0.75rem; color: var(--muted); }
.pieces-empty { margin: 16px 0 0; color: var(--muted); font-size: 0.9375rem; }

/* ---- amorisgratia.com's front page (the founder's sketch, 2026-10-15) -----------------------
   One large rounded frame: on the left the signed name, his words with a crimson stroke
   running down beside them, a wave, and the way in (with a small sun); on the right an
   amorisgratia playing, phone-size, the frame's full height. Under it, the free-for-anyone
   line. No site header here (the founder: "take off the header so we can increase the size of
   the text ... should be very readable"): the signed name in the frame is the brand, and the
   light/dark switch sits beside it. The © sits under the frame. */

.is-welcome .site-footer, .is-welcome .site-header { display: none; }
.is-welcome { --header: 0px; }
.welcome-top .theme-slot { display: inline-flex; }
.welcome {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: calc(100svh - var(--header));
  padding: 16px 20px 12px;
  font-family: var(--sans);
  color: var(--ink);
  /* nature green, no pink */
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(122, 138, 53, 0.08), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(122, 138, 53, 0.12), transparent 55%);
}
/* dark: maroon-red for the marks and the button, not the rose the rest of the dark site uses */
/* (toned, a warm deep crimson that doesn't lean pink: "tone it a bit. don't lean pink") */
:root[data-theme="dark"] .is-welcome { --accent-ink: #BF3A32; --accent: #B8323A; --accent-strong: #9E2A31; }
.welcome-frame {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  height: min(calc(100svh - var(--header) - 66px), 680px);
  min-height: 420px;
  padding: 22px 22px 22px clamp(28px, 3.5vw, 48px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 34px;
  box-shadow: 0 1px 2px rgba(var(--shade), 0.05), 0 30px 70px -36px rgba(var(--shade), 0.45);
}
.welcome-words { display: flex; flex-direction: column; width: min(64rem, 63vw); }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-brand { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); }
.welcome-brand > svg { width: 18px; height: 18px; fill: var(--accent-ink); }
.welcome-brand span { font: 400 2.3rem/1 "Mrs Saint Delafield", "Segoe Script", cursive; padding-top: 0.12em; }
.welcome-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 26px 0 4px; }
.welcome-stem { position: relative; padding: 6px 0 22px 44px; }
/* the vine down beside the words (vine.js draws it to the stem's height): a winding stem
   with tendrils, a rosebud at its tip, life growing from its turns, and at its foot it runs on
   under the last line into the spark */
.welcome-vine { position: absolute; left: 4px; top: -12px; bottom: 22px; width: 40px; pointer-events: none; }
.vine-svg { position: absolute; inset: 0; overflow: visible; }
.vine-stem { fill: none; stroke: var(--leaf); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vine-tendril { fill: none; stroke: var(--leaf); stroke-width: 1.5; stroke-linecap: round; }
.vine-strand { fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.vine-twine { fill: none; stroke: var(--leaf); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
/* the dead leaf's veins and cracks along the stem: only at night, coming in as the green goes */
.vine-dry { fill: none; stroke: var(--leaf-dry, transparent); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 3 4 1.5 6 5 3 1 5; opacity: 0; transition: opacity 3s ease; }
:root[data-theme="dark"] .vine-dry { opacity: 0.85; }
.vine-bud { fill: var(--accent-ink); }
.vine-sepal { fill: var(--leaf); }
/* the life on it (vine.js draws it; most of it carries its own colours) */
.life-ink { fill: var(--ink); }
.life-ink-line { stroke: var(--ink); }
.life-hole { fill: var(--ink); opacity: 0.7; }
.life-moss { fill: var(--leaf); opacity: 0.8; }
.vine-pop { fill: none; stroke: var(--accent-ink); stroke-width: 1.2; }
.life-trail { fill: none; stroke: var(--muted); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.life-thread { stroke: var(--muted); stroke-width: 0.5; }
.welcome-title {
  margin: 0;
  font: 700 clamp(2rem, min(4.4vw, 7.6vh), 4rem)/1.02 "Caveat", "Segoe Print", cursive;
  letter-spacing: 0;
  -webkit-text-stroke: 0.025em currentColor;
}
.welcome-title span { display: block; }
/* the founder's words (2026-10-15), a line each, as written; sized by the screen's height so it all fits */
.welcome-poem {
  margin: min(8px, 1vh) 0 0;
  font: 700 clamp(1.15rem, min(2.1vw, 4.6vh), 2.1rem)/1.14 "Caveat", "Segoe Print", cursive;
  color: var(--ink);
  /* "use bold for the lines and make very readable": Caveat stops at 700, so a hair of stroke
     round each letter makes it heavier still (it doesn't change the letters' widths) */
  -webkit-text-stroke: 0.032em currentColor;
}
.welcome-poem p { margin: 0; }

.welcome-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
/* the way in: the last line of the founder's words ("So, Today I express my ……") is the link, the
   vine (vine.js) runs on under it and curves up into a spark;
   the borders stay, clear, so the words keep their place on the line */
.welcome-acts { align-items: flex-end; gap: 10px 22px; margin-top: min(16px, 2vh); }
.welcome-create { display: inline-flex; align-items: flex-end; color: var(--ink); text-decoration: none; }
.welcome-create .t {
  padding: 0 2px 7px 0;
  border-bottom: 3px solid transparent;
  font: 700 clamp(1.4rem, min(2.5vw, 5.2vh), 2.5rem)/1 "Caveat", "Segoe Print", cursive;
  -webkit-text-stroke: 0.03em currentColor;
  transition: color 0.2s;
}
/* room past the words for the vine to rise into the spark */
.welcome-create .lead { flex: none; width: 56px; border-bottom: 3px solid transparent; }
.welcome-spark {
  flex: none;
  width: 50px;
  height: 50px;
  margin: 0 0 -5px -8px;    /* its middle above the line, so the vine curves up to it */
  overflow: visible;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.welcome-spark .star { fill: var(--accent-ink); transform-origin: 0 0; }   /* (its own origin is the spark's middle) */
.welcome-spark .rays { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; transform-origin: 24px 24px; }
.welcome-create:hover .t, .welcome-create:focus-visible .t { color: var(--accent-ink); }
.welcome-create:hover .welcome-spark, .welcome-create:focus-visible .welcome-spark { transform: scale(1.18); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-ink) 55%, transparent)); }
.welcome-create:focus-visible { outline: none; }
.welcome-create:focus-visible .welcome-spark { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .welcome-spark .rays { animation: welcome-rays 16s linear infinite; }
  .welcome-spark .star { animation: welcome-glint 2.4s ease-in-out infinite; }
}
@keyframes welcome-rays { to { transform: rotate(360deg); } }
@keyframes welcome-glint { 50% { transform: scale(1.14); } }
.welcome-drafts { margin-bottom: 4px; font: 600 1.3rem/1 "Caveat", "Segoe Print", cursive; text-decoration: underline; text-underline-offset: 3px; }
.welcome-card-link { flex: none; display: flex; align-items: center; justify-content: center; height: 100%; aspect-ratio: 9 / 16; }
.welcome-card { border-radius: 22px; box-shadow: 0 2px 4px rgba(var(--shade), 0.06), 0 24px 50px -28px rgba(var(--shade), 0.5); }
.welcome-card canvas { cursor: pointer; }
.welcome-under {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  max-width: calc(min(64rem, 63vw) + 420px);
  padding: 0 14px;
}
.welcome-note, .welcome-foot { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.welcome-note { font: 500 1.2rem/1.1 "Caveat", "Segoe Print", cursive; }
.welcome-foot { font: 500 1.2rem/1.1 "Caveat", "Segoe Print", cursive; }

/* a phone (the founder, 2026-10-15: "the logo and the sign on top left, light and dark mode on top
   right ... the display the same as the pc's phone portrait video, the card stays. the sprawling
   plant rounds inside the card ending with the spark in the bottom right, with all the movements
   happening on top. so, today I express my .. stays constant on the bottom, while the other texts
   stream gradually in the middle of the round"):
   the top row; under it the card itself (the same as the laptop's), and over the card the vine going
   round inside its edges (vine.js, round), the poem streaming a line at a time in the middle (home.js)
   and the last line fixed at its foot with the spark in the corner. The laptop's column of words is
   kept for screen readers only; the note and the © come after. */
.welcome-round { display: none; }
/* (first the phone's; since 2026-10-16 the laptop's too, the founder: "on the pc mode. make the
   display look similar"; its sizes in "the laptop" below) */
@media all {
  .welcome { display: block; place-items: normal; min-height: 100svh; padding: 0; }   /* (place-items would centre the frame and shrink it, even in a block) */
  .welcome-frame { display: flex; flex-direction: column; gap: 6px; height: 100svh; min-height: 0; padding: 12px 10px 12px; border: 0; border-radius: 0; box-shadow: none; }
  .welcome-words { width: 100%; flex: none; }
  .welcome-top { padding: 0 6px 0 10px; }
  .welcome-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .welcome-vine, .welcome-acts { display: none; }
  .welcome-card-link { display: flex; flex: 1; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; justify-content: center; align-items: center; }
  .welcome-sky { display: none; }
  .welcome-under { flex-direction: column; gap: 4px; max-width: none; padding: 10px 18px 20px; }

  /* (home.js lays the round over the card's glass, under its name: "it rounds inside the card") */
  .welcome-round { display: block; position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
  .welcome-round.is-placed { visibility: visible; }
  .welcome-round :is(.stream-line, .welcome-card-express .t) { color: var(--glass-ink, var(--ink)); }
  .welcome-round-vine, .welcome-round-over { position: absolute; inset: 0; }
  /* (the weaving spiders, their webs and threads in the glass's own ink, so they show on dark
     glass too) */
  .welcome-round .life-spider { fill: var(--glass-ink, var(--ink)); }
  .welcome-round .life-spider-line { stroke: var(--glass-ink, var(--ink)); }
  .welcome-round .life-web { fill: none; stroke: var(--glass-ink, var(--muted)); stroke-width: 0.6; stroke-opacity: 0.75; }
  .welcome-round .life-thread { stroke: var(--glass-ink, var(--muted)); stroke-opacity: 0.7; }
  /* the poem, a line at a time, in the middle of the round ("the text streams inside the card") */
  .welcome-stream { position: absolute; left: 46px; right: 16px; top: calc(var(--head, 60px) + 24px); bottom: 86px; display: grid; place-items: center; text-align: center; }
  .stream-line {
    grid-area: 1 / 1; margin: 0; text-wrap: balance;
    font: 700 clamp(1.3rem, 3.2vh, 1.8rem)/1.12 "Caveat", "Segoe Print", cursive;
    -webkit-text-stroke: 0.03em currentColor;
    text-shadow: 0 0 1px #FBF8F1, 0 0 3px rgba(251, 248, 241, 0.98), 0 0 7px rgba(251, 248, 241, 0.95), 0 0 14px rgba(251, 248, 241, 0.85), 0 0 24px rgba(251, 248, 241, 0.6);
    opacity: 0; transform: translateY(14px);
    transition: opacity 1.1s ease, transform 1.1s ease, color 0.8s ease, text-shadow 0.8s ease;
  }
  .stream-line.is-in { opacity: 1; transform: none; }
  .stream-line.is-out { opacity: 0; transform: translateY(-14px); transition-duration: 0.55s; }
  .stream-line.is-head { font-size: clamp(1.9rem, 4.8vh, 2.6rem); }
  /* the last line, constant at the foot, the spark in the bottom right corner */
  /* (2026-10-15: "make the so, today I express my .. more visible. the spark too": larger and
     heavier, as large as the room before the spark allows (home.js fitExpress), on a soft wash
     of the glass's own colour, and the spark bigger, with a glow) */
  .welcome-card-express { position: absolute; left: 30px; right: 4px; bottom: 14px; display: flex; align-items: flex-end; isolation: isolate; }
  .welcome-card-express::before {
    content: ""; position: absolute; inset: -18px -2px -14px -20px; z-index: -1;
    background: radial-gradient(closest-side, rgba(251, 248, 241, 0.62), rgba(251, 248, 241, 0.3) 62%, transparent);
  }
  .welcome-round.on-dark .welcome-card-express::before { background: radial-gradient(closest-side, rgba(4, 6, 15, 0.58), rgba(4, 6, 15, 0.28) 62%, transparent); }
  .welcome-card-express .t {
    padding: 0 2px 7px 0; border-bottom: 3px solid transparent; white-space: nowrap;
    font: 700 clamp(1.3rem, 3.8vh, 2.15rem)/1 "Caveat", "Segoe Print", cursive;
    -webkit-text-stroke: 0.045em currentColor; transition: color 0.8s ease, text-shadow 0.8s ease;
    text-shadow: 0 0 1px #FBF8F1, 0 0 3px rgba(251, 248, 241, 0.98), 0 0 7px rgba(251, 248, 241, 0.95), 0 0 14px rgba(251, 248, 241, 0.85), 0 0 24px rgba(251, 248, 241, 0.6);
  }
  .welcome-card-express .lead { flex: 1; }
  .welcome-card-express.is-compact .lead { flex: none; width: 28px; }
  .welcome-card-express .welcome-spark {
    flex: none; width: 60px; height: 60px; margin-bottom: -6px;
    filter: drop-shadow(0 0 4px rgba(251, 248, 241, 0.95)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent-ink) 50%, transparent));
  }
  .welcome-card-express .welcome-spark .rays { stroke-width: 3; }
  .welcome-round.on-dark .welcome-card-express .welcome-spark { filter: drop-shadow(0 0 3px rgba(4, 6, 15, 0.9)) drop-shadow(0 0 12px color-mix(in srgb, var(--accent-ink) 75%, transparent)); }
}

/* a short laptop screen (about 1280x585 to 600): the frame and the name set a little closer */
/* the laptop: the phone's card turned on its side ("video fills the current existing card. the
   wrap goes under with the sub card stretched to fill up"), filling the screen under the name,
   the note and the year in a line under it, and no page scroll (the founder's screen is about
   1280x585); the night sky round it */
@media (min-width: 761px) {
  .welcome { display: flex; flex-direction: column; height: 100svh; }
  .welcome-sky { display: block; }
  .welcome-frame { flex: 1; height: auto; padding: 10px 22px 6px; gap: 8px; }
  .welcome-top { padding: 0 8px 0 12px; }
  .welcome-brand span { font-size: 1.9rem; }
  .welcome-under { flex-direction: row; align-items: center; gap: 4px 16px; flex-wrap: wrap; min-height: 34px; max-width: none; padding: 0 34px 6px; }
  .stream-line { font-size: clamp(1.6rem, 6vh, 3.6rem); }
  .stream-line.is-head { font-size: clamp(2.2rem, 8.5vh, 4.8rem); }
  .welcome-card-express { left: 40px; right: 8px; bottom: 14px; }
  .welcome-card-express .t { font-size: clamp(1.7rem, 6.4vh, 3.4rem); }
  .welcome-card-express .welcome-spark { width: 64px; height: 64px; }
}

/* ---- night (2026-10-15, the founder: "the switch between light and dark mode is just fast and
   uninteractive. should be from a place of slowly going to the night. give it a night mode vibe
   with animals some animals glowing in the night. the video too"). The switch (theme.js) now
   turns, and the page goes slowly: a dusk glow over everything, the colours easing over three
   seconds, a starry sky with a moon rising behind the frame (the frame lets a little of it
   through), and the card's video fading to a night of its own. Morning is a golden dawn. The
   creatures' night (fireflies, glowing ones) is in vine.js. */
.theme-fading body, .theme-fading body *:not(.vine-svg *) {
  transition: background-color 3s ease, color 3s ease, border-color 3s ease, box-shadow 3s ease, fill 3s ease, stroke 3s ease !important;
}
.theme-fading :is(.vine-stem, .vine-strand, .vine-twine, .vine-tendril, .vine-bud, .vine-sepal, .life-moss) { transition: stroke 3s ease, fill 3s ease !important; }
.theme-btn.turning { animation: theme-turn 0.9s cubic-bezier(.3, .7, .2, 1); }
@keyframes theme-turn { 50% { transform: rotate(180deg) scale(0.45); opacity: 0.4; } 100% { transform: rotate(360deg); } }

.welcome { position: relative; isolation: isolate; }
.welcome-sky, .welcome-veil { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.welcome-sky { z-index: -1; }
.welcome-veil { position: fixed; z-index: 30; }
.welcome-sky > span, .welcome-veil > span { position: absolute; inset: 0; opacity: 0; }
.sky-night {
  background:
    radial-gradient(ellipse 40% 50% at 96% 2%, rgba(150, 170, 230, 0.16), transparent 70%),
    linear-gradient(180deg, #04060F 0%, #080D1F 50%, #0E1530 100%);
  transition: opacity 3.2s ease;
}
.sky-stars { transition: opacity 2.6s ease 1s; }
.sky-stars::before, .sky-stars::after { content: ""; position: absolute; inset: 0; }
.sky-stars::before {
  background-image:
    radial-gradient(circle at 11.2% 30.8%, rgba(255, 248, 224, .65) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 71.4% 76.2%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 43.8% 66.6%, rgba(255, 248, 224, .8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 73.0% 62.7%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 89.9% 11.9%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 87.6% 50.5%, rgba(255, 248, 224, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 23.7% 5.5%, rgba(255, 248, 224, .8) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 58.9% 7.7%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 59.1% 85.8%, rgba(255, 248, 224, .8) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 34.4% 21.3%, rgba(255, 248, 224, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 1.1% 93.4%, rgba(255, 248, 224, .95) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 39.3% 2.0%, rgba(255, 248, 224, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 25.2% 79.7%, rgba(255, 248, 224, .95) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 7.2% 21.3%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 57.0% 60.8%, rgba(255, 248, 224, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 87.4% 52.4%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 71.9% 44.1%, rgba(255, 248, 224, .95) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 33.3% 15.2%, rgba(255, 248, 224, .8) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 42.7% 61.5%, rgba(255, 248, 224, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 87.5% 18.7%, rgba(255, 248, 224, .95) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 56.0% 80.9%, rgba(255, 248, 224, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 73.9% 63.4%, rgba(255, 248, 224, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70.1% 87.2%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 2.6% 98.9%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 31.5% 58.8%, rgba(255, 248, 224, .95) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 59.8% 67.3%, rgba(255, 248, 224, .8) 0 1.3px, transparent 2.0px),
    radial-gradient(circle at 63.1% 60.9%, rgba(255, 248, 224, .8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 52.1% 59.5%, rgba(255, 248, 224, .8) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 71.1% 94.1%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 14.3% 55.8%, rgba(255, 248, 224, .8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 66.3% 7.9%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 59.6% 58.7%, rgba(255, 248, 224, .65) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 63.1% 39.3%, rgba(255, 248, 224, .65) 0 1.6px, transparent 2.3px),
    radial-gradient(circle at 21.6% 21.6%, rgba(255, 248, 224, .65) 0 0.8px, transparent 1.5px);
  animation: sky-twinkle 4.2s ease-in-out infinite alternate;
}
.sky-stars::after {
  background-image:
    radial-gradient(circle at 54.4% 30.0%, rgba(255, 248, 224, .8) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 29.9% 30.2%, rgba(255, 248, 224, .8) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 18.8% 6.2%, rgba(255, 248, 224, .65) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 17.1% 74.4%, rgba(255, 248, 224, .95) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 89.5% 21.5%, rgba(255, 248, 224, .95) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 72.6% 96.2%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 58.1% 18.1%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 95.9% 90.8%, rgba(255, 248, 224, .8) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 64.5% 63.9%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 74.5% 76.0%, rgba(255, 248, 224, .95) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 96.5% 82.8%, rgba(255, 248, 224, .65) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 68.6% 45.6%, rgba(255, 248, 224, .8) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 32.9% 85.8%, rgba(255, 248, 224, .65) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 60.0% 46.7%, rgba(255, 248, 224, .95) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 58.4% 30.3%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 84.0% 23.1%, rgba(255, 248, 224, .95) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 75.9% 98.3%, rgba(255, 248, 224, .8) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 30.9% 5.5%, rgba(255, 248, 224, .95) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 43.6% 75.1%, rgba(255, 248, 224, .8) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 6.9% 6.7%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 9.4% 61.4%, rgba(255, 248, 224, .95) 0 1.9px, transparent 2.6px),
    radial-gradient(circle at 83.8% 30.1%, rgba(255, 248, 224, .65) 0 1.5px, transparent 2.2px);
  animation: sky-twinkle 6.4s ease-in-out -2s infinite alternate;
}
@keyframes sky-twinkle { from { opacity: 1; } to { opacity: 0.35; } }
.sky-moon {
  inset: 10px 3% auto auto !important;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #FFF8E2, #EDE2BA 58%, #CBBD8A);
  box-shadow: 0 0 26px 8px rgba(255, 240, 190, 0.22);
  transform: translateY(60px);
  transition: opacity 3s ease 0.6s, transform 4.5s cubic-bezier(.2, .7, .2, 1) 0.4s;
}
:root[data-theme="dark"] .sky-night, :root[data-theme="dark"] .sky-stars, :root[data-theme="dark"] .sky-moon { opacity: 1; }
:root[data-theme="dark"] .sky-moon { transform: none; }
/* the dusk passes over everything as the light goes; the dawn the other way */
.veil-dusk { background: linear-gradient(180deg, rgba(40, 32, 80, 0.55) 0%, rgba(150, 52, 58, 0.35) 60%, rgba(232, 150, 60, 0.5) 100%); mix-blend-mode: multiply; }
.veil-dawn { background: linear-gradient(0deg, rgba(242, 193, 78, 0.55) 0%, rgba(255, 226, 160, 0.3) 55%, rgba(255, 246, 220, 0) 100%); mix-blend-mode: screen; }
.to-night .veil-dusk, .to-day .veil-dawn { animation: veil 3.4s ease forwards; }
@keyframes veil { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: 0; } }
:root[data-theme="dark"] .welcome { background-image: none; }
/* a proper night: near black, a little blue; the words in moonlight; the vine's green fades to a
   dead leaf, dry and veined (the founder, 2026-10-15: "green should fade in dark mode to dead
   leaf texture") */
:root[data-theme="dark"] .is-welcome {
  --bg: #04060F; --surface: #0A0F1E; --rule: #1A2238;
  --ink: #EFE8D6; --ink-2: #C9C3B4; --muted: #8E8CA6; --leaf: #A0784A; --leaf-dry: #5C3F22;
}
:root[data-theme="dark"] .welcome-frame { background: rgba(8, 12, 26, 0.82); box-shadow: 0 0 0 1px rgba(150, 170, 230, 0.05), 0 30px 90px -30px rgba(0, 0, 0, 0.9); }
:root[data-theme="dark"] .welcome-title, :root[data-theme="dark"] .welcome-create .t { text-shadow: 0 0 18px rgba(255, 244, 214, 0.12); }
/* now and then a shooting star, high on the left */
.sky-shoot {
  inset: 6% auto auto 6% !important;
  width: 120px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 248, 224, 0), rgba(255, 248, 224, 0.9));
  transform: rotate(18deg) translateX(-160px);
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .sky-shoot { animation: sky-shoot 11s ease-in 3s infinite; }
}
@keyframes sky-shoot {
  0%, 88% { opacity: 0; transform: rotate(18deg) translateX(-160px); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotate(18deg) translateX(260px); }
}
/* the sleepers' drifting z */
.life-zz text { fill: #C9D2F2; font-family: "Caveat", "Segoe Print", cursive; font-weight: 700; }

/* the card's night: at dusk its picture cuts to people gathered in the night round a lantern
   (home.js swaps the loop), and a warm lantern glow blooms over the cut and settles */
.welcome-card-night {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 75% 40% at 50% 46%, rgba(255, 196, 100, 0.6), rgba(255, 160, 60, 0.2) 50%, transparent 78%);
  mix-blend-mode: screen;
  transition: opacity 2s ease;
}
:root[data-theme="dark"] .welcome-card-night { opacity: 0.2; }
.to-night .welcome-card-night { animation: lantern 3.6s ease forwards; }
@keyframes lantern { 0% { opacity: 0; } 42% { opacity: 1; } 100% { opacity: 0.2; } }

/* "amorisgratia underlined on the signed header": a pen stroke under the signature, drawn in once */
.welcome-brand span { position: relative; }
.welcome-sign-line {
  position: absolute;
  left: 2%;
  bottom: -0.06em;
  width: 104%;
  height: 0.3em;
  overflow: visible;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.welcome-sign-line path { stroke-dasharray: 100; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .welcome-sign-line path { animation: sign-line 1.4s cubic-bezier(.5, .1, .2, 1) 0.6s backwards; }
}
@keyframes sign-line { from { stroke-dashoffset: 100; } }

/* the phone's night: the frame stays clear, and the words on the card wear a dark halo */
@media all {
  .welcome .welcome-frame, :root[data-theme="dark"] .welcome .welcome-frame { background: transparent; box-shadow: none; }
  .welcome-round.on-dark :is(.stream-line, .welcome-card-express .t) { text-shadow: 0 0 1px #04060F, 0 0 3px rgba(4, 6, 15, 0.98), 0 0 7px rgba(4, 6, 15, 0.95), 0 0 14px rgba(4, 6, 15, 0.85), 0 0 24px rgba(4, 6, 15, 0.6); }
}

/* the words dance (on a laptop; the founder: "make the text dance a bit while remaining readable"):
   each word (home.js wraps them) sways and lifts a pixel or two, a slow ripple running along the
   lines. The last line stays still, so the vine under it and the spark keep their places. */
@keyframes word-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1.6px) rotate(-1.2deg); }
  75% { transform: translateY(1.1px) rotate(1deg); }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .welcome-title .w, .welcome-poem .w {
    display: inline-block;
    transform-origin: 50% 75%;
    animation: word-dance 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.17s);
  }
}

/* ---- the front page since 2026-10-19: no card and no video (the founder: "we will take off the main video
   in front"), the round on the page itself, in the middle; and the night a slide away ("the night mode will
   come as we slide", then "no overlay, just slide smoothly to night. the day gradually darkens [to] night"):
   sliding the page down darkens it, a dusk deepening into night. home.js sets on <html> --p (nought to one,
   how far into the night), --pi (the words and their halo, turning over quickly in the middle of the dusk so
   they can always be read), --ps (the stars, coming out once it is getting dark) and --pd (the dusk's glow,
   most half way); every colour of the page goes from the day's to the night's by them. ---- */
.is-welcome .welcome { position: fixed; inset: 0; z-index: 1; height: auto; min-height: 0; display: flex; flex-direction: column; }
/* (on a phone too: the name, the round, then the note and the year at the foot, all on the one screen) */
.is-welcome .welcome-frame { flex: 1; height: auto; min-height: 0; }
.welcome-stops i { display: block; height: 100svh; }
/* the round's stage, where the card was: as wide as reads well, as tall as the room */
.welcome-stage { position: relative; display: block; flex: 1; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; color: inherit; text-decoration: none; }
.welcome-stage:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 22px; }
.is-welcome .welcome-sky { display: block; }
/* the colours, as far into the night as it has gone (the same in either theme: the theme turns at half way,
   for the creatures and the moon button) */
:root.is-front[data-theme] .is-welcome {
  --bg: color-mix(in srgb, #04060F calc(var(--pn, 0) * 100%), #F6F0E6);
  --surface: color-mix(in srgb, #0A0F1E calc(var(--pn, 0) * 100%), #FBF8F1);
  --rule: color-mix(in srgb, #1A2238 calc(var(--pn, 0) * 100%), #E0D6C3);
  --muted: color-mix(in srgb, #8E8CA6 calc(var(--pi, 0) * 100%), #6A6650);
  --ink: color-mix(in srgb, #EFE8D6 calc(var(--pi, 0) * 100%), #262A18);
  --ink-2: color-mix(in srgb, #C9C3B4 calc(var(--pi, 0) * 100%), #4A4A33);
  --leaf: color-mix(in srgb, #A0784A calc(var(--p, 0) * 100%), #52611E);
  --accent: color-mix(in srgb, #B8323A calc(var(--p, 0) * 100%), #922532);
  --accent-ink: color-mix(in srgb, #BF3A32 calc(var(--p, 0) * 100%), #922532);
  --halo: color-mix(in srgb, #04060F calc(var(--pi, 0) * 100%), #FBF8F1);
  background: var(--bg);
}
:root.is-front[data-theme] .is-welcome .welcome {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(122, 138, 53, calc(0.08 * (1 - var(--p, 0)))), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(122, 138, 53, calc(0.12 * (1 - var(--p, 0)))), transparent 55%);
}
/* the sky behind it all: the dusk's warm glow low down, the night's deep blue over it, the stars, the moon
   rising (and, once it is night, now and then a shooting star) */
.sky-dusk { background: linear-gradient(180deg, rgba(58, 56, 120, 0.6) 0%, rgba(150, 84, 58, 0.42) 52%, rgba(236, 148, 62, 0.72) 100%); }
:root.is-front[data-theme] .welcome-sky .sky-dusk { opacity: var(--pd, 0); transition: none; }
:root.is-front[data-theme] .welcome-sky .sky-night { opacity: var(--pn, 0); transition: none; }
:root.is-front[data-theme] .welcome-sky .sky-stars { opacity: var(--ps, 0); transition: none; }
:root.is-front[data-theme] .welcome-sky .sky-moon { opacity: var(--ps, 0); transform: translateY(calc((1 - var(--p, 0)) * 90px)); transition: none; }
/* the words, in the page's ink, with a halo of the page round them: the linen's by day, the night's by night */
:root.is-front .welcome-round :is(.stream-line, .welcome-card-express .t) {
  color: var(--ink);
  text-shadow: 0 0 1px var(--halo), 0 0 3px var(--halo), 0 0 7px color-mix(in srgb, var(--halo) 95%, transparent), 0 0 14px color-mix(in srgb, var(--halo) 85%, transparent), 0 0 24px color-mix(in srgb, var(--halo) 60%, transparent);
}
:root.is-front .welcome-card-express::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 62%, transparent), color-mix(in srgb, var(--halo) 30%, transparent) 62%, transparent); }
:root.is-front .welcome-card-express .welcome-spark { filter: drop-shadow(0 0 4px var(--halo)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent-ink) calc(50% + var(--p, 0) * 25%), transparent)); }
.is-front .stream-line { transition: opacity 1.1s ease, transform 1.1s ease; }

/* ---- a Tale's and a Troll's workspace: the founder's threads (thread.js, 2026-10-16), across the page
   as on amorisgratia.org, one under another: a pin, the visuals hanging from the thread each at its
   own size, the + at its end; under each, open page to draw on (space.js, no box), down to a dashed
   line where the next thread begins, with room: the space alone takes about a screen. Numbered for
   tracking: each thread down the page at its pin (1, 2), each frame across it by letter (2A, 2B).
   The whole of it is a world that zooms and pans (pan.js) inside the screen; nothing scrolls on its
   own, and the page itself doesn't scroll. Everything else is put away; the three options stay. */
.maker.is-thread { height: calc(100vh - var(--header) - 1px); height: calc(100svh - var(--header) - 1px); min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.maker.is-thread > .tt { flex: 1; align-self: stretch; min-height: 0; height: auto; }
.maker.is-thread > .post { display: none; }
.is-threading .site-footer { display: none; }
/* (clip, not hidden: nothing, not focus nor scrollIntoView, may scroll it under pan.js's feet) */
.tt { position: relative; width: 100%; height: 100%; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; }
.tt[hidden] { display: none; }
.tt.is-grab { cursor: grab; }
.tt.is-panning, .tt.is-panning * { cursor: grabbing !important; }
/* the world: as wide as its widest thread (at least the screen), moved and scaled by pan.js */
.tt-list { position: absolute; left: 0; top: 0; width: max-content; min-width: 100%; margin: 0; padding: 28px 48px 160px; list-style: none; transform-origin: 0 0; }
.tt-unit { position: relative; display: flex; flex-direction: column; }
.tt-unit + .tt-unit { margin-top: 40px; }
.tt-strip { position: relative; flex: none; height: clamp(200px, 40svh, 340px); }
/* a thread's row: its top padding is where the thread runs (CORD in thread.js) */
.tt-row { position: relative; display: flex; align-items: flex-start; gap: 46px; width: max-content; min-width: 100%; margin: 0; padding: 46px 72px 12px 64px; list-style: none; }
.tt-cord { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; z-index: 2; }
/* the cord: heavier ("thicker"), with a soft shadow under it */
.tt-line { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.tt-line-shade { fill: none; stroke: rgba(var(--shade), 0.22); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transform: translate(0, 3px); }
.tt-knot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.2; }
.tt-bead { fill: var(--ink-2); opacity: 0.8; }
/* the thread's number, as its pin: the same size on the screen at any zoom, and it stays at the left
   edge while its thread runs on past it (--inv, --stick: thread.js) */
.tt-num { position: absolute; left: 9px; top: 25px; z-index: 4; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 1.4px solid var(--ink-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 2px 6px -3px rgba(var(--shade), 0.45); transform: translateX(var(--stick, 0px)) scale(var(--inv, 1)); }

/* a frame: the visual like a print in its mount, hung by its top corners */
.tt-frame { position: relative; flex: none; transform-origin: 0 0; }
.tt-mat { position: relative; padding: 8px 8px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 1px 0 rgba(var(--shade), 0.04), 0 24px 48px -30px rgba(var(--shade), 0.38); }
.tt-frame { outline: none; }
.tt-frame:focus-visible .tt-mat { outline: 2px solid var(--accent); outline-offset: 3px; }
.tt-pic { position: relative; overflow: hidden; line-height: 0; }
.tt-media { display: block; object-fit: cover; background: var(--wash); -webkit-user-drag: none; pointer-events: none; }
/* its highlight: a crop (the rest dimmed), a clip's cut along its foot (edit.js) */
.tt-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); outline: 1.5px solid #FFF; pointer-events: none; }
.tt-crop[hidden], .tt-cutbar[hidden] { display: none; }
.tt-cutbar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0, 0, 0, 0.45); pointer-events: none; }
.tt-cutbar i { position: absolute; top: 0; bottom: 0; background: var(--accent); box-shadow: 0 0 0 1px #FFF; }
/* its place: the thread's number and its letter (2C = the second thread's third) */
.tt-tag { position: absolute; left: 14px; top: 14px; padding: 3px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #FFF; font: 700 0.6875rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; pointer-events: none; transform: scale(var(--inv, 1)); transform-origin: 0 0; }
.tt-clip { position: absolute; left: 16px; bottom: 20px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); pointer-events: none; }
.tt-clip::after { content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #FFF; }
.tt-frame:hover .tt-clip { opacity: 0; }
.tt-del { position: absolute; top: 14px; right: 6px; z-index: 3; width: 24px; height: 24px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink-2); font: 600 0.9375rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.tt-frame:hover .tt-del, .tt-del:focus-visible { opacity: 1; }
.tt-del:hover { color: var(--accent); border-color: var(--accent); }

/* the thread's end: the + it is tied to */
.tt-end { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: -22px; z-index: 3; }
.tt-add { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--ink-2); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 6px 16px -10px rgba(var(--shade), 0.5); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.tt-add .i { width: 20px; height: 20px; }
.tt-add:hover, .tt-unit.is-drop .tt-add { background: var(--accent); border-color: var(--accent); color: #FFF; }
.tt-hint { display: none; font: 500 0.8125rem/1.3 var(--sans); color: var(--muted); white-space: nowrap; }
.tt-unit.is-empty .tt-hint { display: block; }
.tt-unit.is-drop .tt-strip { outline: 1.5px dashed var(--edge); outline-offset: -6px; border-radius: 12px; }

/* its space: open page, no box, down to the dashed line where the next thread begins (the sketch) */
.tt-space { position: relative; flex: none; height: calc(100svh - var(--header) - 72px); min-height: 360px; max-height: 900px; }
.tt-space::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1.5px dashed var(--ink-2); opacity: 0.32; pointer-events: none; }
.tt-unit.is-last .tt-space::after { display: none; }
/* its foot: drag it to make the space taller or shorter (thread.js); the grip keeps its size on the
   screen at any zoom, and lights up under the pointer */
.tt-resize { position: absolute; left: 0; right: 0; bottom: calc(-9px * var(--inv, 1)); z-index: 3; height: calc(18px * var(--inv, 1)); cursor: ns-resize; touch-action: none; outline: none; }
.tt-resize::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 6px; margin: -3px 0 0 -28px; border-radius: 999px; background: var(--ink-2); opacity: 0.3; transform: scale(var(--inv, 1)); transition: opacity 0.15s ease, background 0.15s ease; }
.tt-resize::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: calc(2px * var(--inv, 1)) solid var(--accent); opacity: 0; transition: opacity 0.15s ease; }
.tt-resize:hover::before, .tt-resize:focus-visible::before, .tt-unit.is-resizing .tt-resize::before { background: var(--accent); opacity: 0.9; }
.tt-resize:hover::after, .tt-resize:focus-visible::after, .tt-unit.is-resizing .tt-resize::after { opacity: 0.55; }
.tt-unit.is-resizing, .tt-unit.is-resizing * { cursor: ns-resize !important; }
.tt-sheet { position: absolute; left: 0; top: 0; display: block; touch-action: none; cursor: crosshair; }
.tt-tip { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.tt-layer, .tt-live { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.tt-layer[hidden] { display: none; }
/* (the pen hovering: a fine point where its tip will touch, seen on day and night paper) */
.tt-space.is-pen .tt-sheet { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%231F1B16' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 6 6, crosshair; }
.tt-space-hint { position: absolute; inset: 0; display: none; place-items: center; margin: 0; font: 500 0.875rem/1.3 var(--sans); color: var(--muted); pointer-events: none; }
.tt-unit:not(.is-empty) .tt-space.is-blank .tt-space-hint { display: grid; }
.tt-space-tools { position: absolute; top: 4px; right: 8px; display: flex; gap: 2px; opacity: 0.5; transition: opacity 0.15s ease; }
.tt-space.is-blank:not(.has-history) .tt-space-tools { visibility: hidden; }
.tt-space:hover .tt-space-tools, .tt-space-tools:focus-within { opacity: 1; }
.tt-space-tools .icon-btn:disabled { opacity: 0.35; cursor: default; }

/* a frame opened (edit.js): the picture large, its crop drawn over it; a clip with its line and cut.
   It is the amorisgratia card (the founder, 2026-10-16: "the card follows the theme"): the card's
   paper (linen by day, the night's deep grey by night), its corners and shadow, its head (the star in
   its round, in the signature's colour) and its words by hand (Caveat), as the front page's card. */
/* (the dialog is the whole screen, clear; the card hangs in it from a thread across the top, as the
   frames hang from theirs: a pin at each side, a knot at each of its top corners; it drops in and
   swings, and comes to rest level: edit.js) */
.tt-edit { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); font-family: var(--sans); }
.tt-edit::backdrop { background: rgba(var(--shade), 0.45); }
.tt-edit-hang { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tt-edit-pin { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.tt-edit-card { position: relative; width: min(1000px, calc(100vw - 32px)); max-height: calc(100svh - 72px); margin: 60px auto 0; overflow: auto; padding: 14px 20px 16px; border: 1px solid var(--rule); border-radius: 22px; background: linear-gradient(180deg, var(--surface), var(--bg)); box-shadow: 0 2px 4px rgba(var(--shade), 0.06), 0 30px 70px -28px rgba(var(--shade), 0.55); transform-origin: 50% 0; }
.tt-edit-top { display: flex; align-items: center; gap: 12px; }
.tt-edit-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-ink); }
.tt-edit-av svg { width: 20px; height: 20px; fill: var(--surface); }
.tt-edit-heading { flex: 1; min-width: 0; }
.tt-edit-top .tt-edit-close { flex: none; align-self: flex-start; }
.tt-edit-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.75rem/1 "Caveat", "Segoe Print", cursive; -webkit-text-stroke: 0.02em currentColor; color: var(--ink); }
.tt-edit-how { margin: 3px 0 0; font: 600 1.15rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--muted); }
.tt-edit-stage { display: flex; justify-content: center; margin: 10px 0; }
.tt-edit-media { position: relative; display: inline-block; overflow: hidden; line-height: 0; border-radius: 6px; background: var(--wash); touch-action: none; user-select: none; cursor: crosshair; }
.tt-edit.is-clip .tt-edit-media { cursor: default; }
.tt-edit-pic { display: block; max-width: min(960px, calc(100vw - 72px)); max-height: calc(100svh - 266px); -webkit-user-drag: none; }
.tt-edit.is-clip .tt-edit-pic { max-height: calc(100svh - 326px); }
/* a sound: no picture; its shape of sound large in its place */
.tt-edit.is-sound .tt-edit-pic { display: none; }
.tt-edit-wave { display: block; width: min(900px, calc(100vw - 72px)); height: clamp(120px, calc(100svh - 380px), 240px); }
.tt-edit-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); outline: 1.5px solid #FFF; cursor: move; }
.tt-edit-crop[hidden] { display: none; }
.tt-edit-crop i { position: absolute; width: 14px; height: 14px; border: 2px solid #FFF; background: var(--accent); border-radius: 3px; }
.tt-edit-crop i[data-corner="tl"] { left: -7px; top: -7px; cursor: nwse-resize; }
.tt-edit-crop i[data-corner="br"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.tt-edit-crop i[data-corner="tr"] { right: -7px; top: -7px; cursor: nesw-resize; }
.tt-edit-crop i[data-corner="bl"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.tt-edit-time { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.tt-edit-time[hidden] { display: none; }
.tt-edit-play .i-pause, .tt-edit-play[aria-pressed="true"] .i-play { display: none; }
.tt-edit-play[aria-pressed="true"] .i-pause { display: block; }
/* the two-sided slider: the clip's pictures along it, a grip at each side of the cut, the rest dimmed */
.tt-edit-line { position: relative; flex: 1; height: 48px; margin: 0 18px; border-radius: 6px; background: var(--wash); touch-action: none; cursor: pointer; }
.tt-edit-strip { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; pointer-events: none; }
.tt-edit-dim { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.tt-edit-dim.is-a { left: 0; border-radius: 6px 0 0 6px; }
.tt-edit-dim.is-b { right: 0; border-radius: 0 6px 6px 0; }
.tt-edit-range { position: absolute; top: -4px; bottom: -4px; border-top: 4px solid var(--accent); border-bottom: 4px solid var(--accent); pointer-events: none; }
.tt-edit-range[hidden] { display: none; }
.tt-edit-grip { position: absolute; top: -4px; bottom: -4px; width: 18px; display: grid; place-items: center; background: var(--accent); pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; }
.tt-edit-grip[data-end="a"] { right: 100%; border-radius: 8px 0 0 8px; }
.tt-edit-grip[data-end="b"] { left: 100%; border-radius: 0 8px 8px 0; }
.tt-edit-grip::before { content: ""; width: 3px; height: 18px; border-radius: 2px; background: #FFF; }
.tt-edit-grip:hover, .tt-edit-grip:focus-visible { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tt-edit-playhead { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #FFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); pointer-events: none; }
.tt-edit-times { min-width: 116px; font: 600 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.tt-edit-foot { display: flex; align-items: center; gap: 14px; }
.tt-edit-what { font: 600 1.2rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }
.tt-edit-clear { font: 600 1.2rem/1 "Caveat", "Segoe Print", cursive; }
.tt-edit-done span { font: 700 1.3rem/1 "Caveat", "Segoe Print", cursive; }

/* the zoom, in the corner: out, the level (back to 100%), in, all of it */
.tt-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 22px -14px rgba(var(--shade), 0.5); }
.tt-zoom .icon-btn { width: 34px; height: 34px; }
.tt-zoom-level { min-width: 52px; height: 34px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.tt-zoom-level:hover { background: var(--wash); }

/* the voice along the foot (voice.js): play and the time at the left; the track between its two end
   caps (clips hung at the line's knots above; the line of clips end to end, over ten-second sections;
   the playhead); the record button on its own at the right, the newest recording on top of it */
.tt-voice { flex: none; align-self: stretch; display: flex; align-items: center; gap: 10px; height: 112px; margin: 0 12px 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--rule); border-radius: 18px; background: linear-gradient(180deg, var(--surface), var(--bg)); box-shadow: 0 10px 28px -20px rgba(var(--shade), 0.5); user-select: none; -webkit-user-select: none; }
.tt-voice[hidden] { display: none; }
/* the file pot (pot.js, 2026-10-17: "a pot sitting slightly above the record bar"): clay, on the voice line's
   top edge at its left; papers peek out of it as it fills */
.tt-voice { position: relative; }
.tt-pot { position: absolute; left: 22px; bottom: calc(100% - 10px); z-index: 6; }
.tt-pot-body { position: relative; display: block; width: 68px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tt-pot-svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(2px 4px 4px rgba(60, 30, 10, 0.3)); transition: transform 0.2s ease; }
.tt-pot-shadow { fill: rgba(42, 32, 22, 0.2); }
.tt-pot-mouth { fill: #3E1D10; }
.tt-pot-clay { fill: url(#tt-clay); stroke: #7C3518; stroke-width: 0.8; }
.tt-pot-rim { fill: url(#tt-clay-rim); stroke: #7C3518; stroke-width: 0.8; }
.tt-pot-gleam { fill: none; stroke: rgba(255, 225, 200, 0.45); stroke-width: 2.2; stroke-linecap: round; }
.tt-pot-papers rect { display: none; fill: #FBF8F1; stroke: rgba(60, 50, 40, 0.35); stroke-width: 0.8; }
.tt-pot-papers .p2 { fill: #F2E3C5; }
.tt-pot-papers .p3 { fill: #E9EEF6; }
.tt-pot[data-fill="1"] .p1, .tt-pot[data-fill="2"] .p1, .tt-pot[data-fill="2"] .p2, .tt-pot[data-fill="3"] .tt-pot-papers rect { display: inline; }
.tt-pot-count { position: absolute; right: -4px; top: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--surface); font: 700 0.6875rem/18px var(--sans); text-align: center; }
.tt-pot-count[hidden] { display: none; }
.tt-pot-body:hover .tt-pot-svg, .tt-pot.is-open .tt-pot-svg { transform: translateY(-2px) rotate(-3deg); }
.tt-pot.is-drop .tt-pot-svg { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 8px rgba(242, 175, 189, 0.95)); }
.tt-pot-body.is-taking .tt-pot-svg { animation: tt-pot-take 0.5s ease; }
@keyframes tt-pot-take { 30% { transform: translateY(3px) scaleY(0.93); } 65% { transform: translateY(-3px); } }
/* tipped out above it: the files, like photos (no box round them) */
.tt-pot-spill { position: absolute; left: -6px; bottom: calc(100% + 4px); width: min(560px, calc(100vw - 40px)); }
.tt-pot-spill[hidden] { display: none; }
.tt-pot-files { display: flex; flex-wrap: wrap-reverse; gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.tt-pot-item { position: relative; width: 74px; touch-action: none; cursor: grab; transform: rotate(var(--r, 0deg)); animation: tt-pot-rise 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.2) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes tt-pot-rise { from { opacity: 0; transform: translateY(40px) scale(0.6); } }
.tt-pot-face { display: grid; place-items: center; width: 74px; height: 74px; overflow: hidden; border: 4px solid #FBF8F1; border-radius: 3px; background: #EFE6D6; color: #4A4A33; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.tt-pot-face img, .tt-pot-face video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tt-pot-face svg { flex: none; max-width: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt-pot-name { display: block; margin-top: 3px; overflow: hidden; font: 600 0.85rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; text-align: center; }
/* where a file Claude threw in came from (its credit and licence) */
.tt-pot-from { display: block; overflow: hidden; font: 500 0.625rem/1.2 var(--sans); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.tt-pot-ghost .tt-pot-from { display: none; }
.tt-pot-x { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.tt-pot-item:hover .tt-pot-x, .tt-pot-x:focus-visible { opacity: 1; }
@media (hover: none) { .tt-pot-x { opacity: 1; } }
.tt-pot-x svg { flex: none; max-width: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tt-pot-item.is-out { opacity: 0.35; }
.tt-pot-ghost { position: fixed; z-index: 90; width: 74px; margin: 0; list-style: none; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg) scale(1.05); opacity: 0.92; animation: none; }
.tt-pot-ghost .tt-pot-name { display: none; }
.tt-pot-ghost.is-welcome .tt-pot-face { box-shadow: 0 0 0 3px var(--accent), 0 14px 24px -8px rgba(0, 0, 0, 0.5); }
.tt-pot-hint { margin: 8px 0 0; font: 600 1rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); text-shadow: 0 0 4px var(--bg); }
.tt-pot-more { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.tt-voice-play .i-pause, .tt-voice-play[aria-pressed="true"] .i-play { display: none; }
.tt-voice-play[aria-pressed="true"] .i-pause { display: block; }
.tt-voice-time { flex: none; min-width: 84px; font: 600 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tt-voice.is-recording .tt-voice-time { color: var(--accent-ink); }
.tt-voice-cap { flex: none; align-self: flex-end; width: 3px; height: 54px; margin-bottom: 14px; border-radius: 2px; background: var(--ink-2); opacity: 0.55; }
.tt-voice-track { position: relative; flex: 1; min-width: 0; height: 92px; cursor: pointer; touch-action: none; outline: none; }
.tt-voice-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.tt-voice-ruler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tt-voice-layer { position: absolute; left: 0; right: 0; top: 0; height: 28px; }
.tt-voice-line { position: absolute; left: 0; right: 0; top: 38px; height: 38px; }
.tt-voice-knots { position: absolute; left: 0; right: 0; top: 38px; height: 0; pointer-events: none; z-index: 2; }
.tt-voice-knots i { position: absolute; top: -5px; width: 10px; height: 10px; margin-left: -5px; border: 1.5px solid var(--surface); border-radius: 50%; background: var(--accent); }
/* a knot with clips hung at it: the string up to them */
.tt-voice-knots i.is-tied::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 9px; margin-left: -0.75px; border-left: 1.5px solid var(--ink-2); }
.tt-voice-head { position: absolute; top: 0; bottom: 14px; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; z-index: 3; }
.tt-voice-head[hidden] { display: none; }
/* where a dragged clip will land: its outline, as long as it is */
.tt-voice-drop { position: absolute; box-sizing: border-box; min-width: 4px; border: 2px dashed var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none; z-index: 4; }
.tt-voice-drop[hidden] { display: none; }
.tt-voice-drop.is-line { top: 38px; height: 38px; }
.tt-voice-drop.is-layer { top: 0; height: 28px; }
.tt-voice-hint { position: absolute; left: 0; right: 0; top: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 1.15rem/1 "Caveat", "Segoe Print", cursive; color: var(--muted); pointer-events: none; }
.tt-voice-hint[hidden] { display: none; }

/* a clip: its shape of sound in a little mount; dragged to move it; its × on hover */
.tt-aclip { position: absolute; top: 0; bottom: 0; overflow: hidden; border: 1.5px solid var(--ink-2); border-radius: 6px; background: var(--surface); box-shadow: 0 4px 10px -8px rgba(var(--shade), 0.6); cursor: grab; touch-action: none; }
.tt-aclip canvas { position: absolute; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; }
.tt-voice-layer .tt-aclip { border-style: dashed; border-color: var(--accent); }
.tt-aclip-x { position: absolute; top: 1px; right: 1px; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 0.75rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.tt-aclip:hover .tt-aclip-x, .tt-aclip-x:focus-visible { opacity: 1; }
/* picked: its outline in the accent, and its ✂ (to cut it); a cut one keeps a small mark of it */
.tt-aclip.is-picked { box-shadow: 0 0 0 2px var(--accent); z-index: 2; }
.tt-aclip-cut { position: absolute; left: 1px; top: 1px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #FFF; font: 700 0.6875rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.tt-aclip:hover .tt-aclip-cut, .tt-aclip.is-picked .tt-aclip-cut, .tt-aclip-cut:focus-visible { opacity: 1; }
.tt-aclip.is-cut::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tt-aclip.is-moving { opacity: 0.3; }
.tt-aclip.is-ghost { z-index: 1000; opacity: 0.92; pointer-events: none; cursor: grabbing; box-shadow: 0 14px 30px -12px rgba(var(--shade), 0.6); }
.tt-aclip.is-live { border-color: var(--accent); cursor: default; }
.tt-aclip-n { position: absolute; left: 2px; top: 2px; z-index: 1; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: #FFF; font: 700 0.625rem/15px var(--sans); text-align: center; }

/* the record button, on its own at the right; what it has made sits on top of it, on a string */
.tt-voice-rec { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 84px; height: 100%; border-radius: 12px; }
.tt-voice.to-tray .tt-voice-rec { outline: 2px dashed var(--accent); outline-offset: 2px; }
.tt-voice-tray { display: flex; align-items: flex-end; justify-content: center; height: 32px; }
.tt-voice-tray .tt-aclip { position: relative; width: 76px; height: 30px; }
.tt-voice-string { width: 0; height: 8px; border-left: 1.5px solid var(--ink-2); visibility: hidden; }
.tt-voice.has-tray .tt-voice-string { visibility: visible; }
.tt-rec { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); cursor: pointer; }
.tt-rec-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); transition: border-radius 0.15s ease, width 0.15s ease, height 0.15s ease; }
.tt-rec[aria-pressed="true"] .tt-rec-dot { width: 15px; height: 15px; border-radius: 3px; }
.tt-voice.is-recording .tt-rec { animation: tt-rec 1.2s ease-in-out infinite; }
@keyframes tt-rec { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); } }
@media (max-width: 640px) {
  .tt-voice { gap: 6px; margin: 0 6px 6px; padding: 6px 6px 6px 4px; }
  .tt-voice-time { min-width: 0; font-size: 0.6875rem; }
  .tt-voice-hint { font-size: 1rem; }
  .tt-voice-rec { width: 64px; }
  .tt-voice-tray .tt-aclip { width: 60px; }
}

/* the portals (portal.js): Claude and Render, two small turning portals that keep near the pointer
   across the whole workspace; each opens with a turn (a vortex spinning at it) into its realm, a
   starlit dark where its card floats; it closes back into its orb */
/* the portals' keys, hanging on the page's wall at the workspace's top right (portal.js) */
.tt-orbs { position: fixed; right: 14px; top: 64px; z-index: 45; display: flex; align-items: flex-start; gap: 6px; }
.tt-orbs[hidden] { display: none; }
.tt-orb { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tt-hang { display: block; flex: none; max-width: none; overflow: visible; }
.tt-hang.is-key { width: 46px; height: 95px; }
.tt-hang.is-tv { width: 58px; height: 86px; }
.tt-hang-hole { fill: rgba(42, 32, 22, 0.28); filter: blur(1.5px); }
.tt-hang-nail { fill: url(#tt-nail); stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.6; }
.tt-hang-string { fill: none; stroke: #6E5A3E; stroke-width: 1.5; stroke-linecap: round; }
.tt-hang-swing { transform-box: view-box; transform-origin: 30px 10px; animation: tt-hang-idle 5.5s ease-in-out infinite; }
.is-tv .tt-hang-swing { transform-origin: 35px 10px; animation-duration: 6.5s; }
.tt-orb:hover .tt-hang-swing, .tt-orb:focus-visible .tt-hang-swing { animation: tt-hang-swing 1.5s ease-out; }
@keyframes tt-hang-idle { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
@keyframes tt-hang-swing { 0% { transform: rotate(0); } 20% { transform: rotate(7deg); } 42% { transform: rotate(-5deg); } 62% { transform: rotate(3deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
/* the key: brass; it turns as the tear opens, and glows while it is open */
.tt-key-metal { fill: url(#tt-brass); stroke: #7A5518; stroke-width: 0.8; }
.tt-key-shine { fill: none; stroke: rgba(255, 248, 220, 0.75); stroke-width: 1; stroke-linecap: round; }
.tt-key { transform-box: fill-box; transform-origin: 50% 50%; }
.tt-orb.is-claude[aria-expanded="true"] .tt-key { animation: tt-key-turn 0.6s ease-in-out; filter: drop-shadow(0 0 5px rgba(242, 175, 189, 0.95)); }
@keyframes tt-key-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-0.15); } 100% { transform: scaleX(1); } }
/* the TV: walnut, rabbit ears; its screen lights while its opening is open */
.tt-tv-body { fill: url(#tt-walnut); stroke: #3B2414; stroke-width: 0.8; }
.tt-tv-screen { fill: url(#tt-screen); stroke: #1C1814; stroke-width: 2.2; }
.tt-tv-gleam { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; stroke-linecap: round; }
.tt-tv-ear { fill: none; stroke: #B9B9B9; stroke-width: 1.4; stroke-linecap: round; }
.tt-tv-tip { fill: #E6E6E6; }
.tt-tv-knob { fill: #D9D2C2; stroke: #6E685E; stroke-width: 0.6; }
.tt-tv-leg { fill: none; stroke: #3B2414; stroke-width: 2; stroke-linecap: round; }
.tt-screen-in { transition: stop-color 0.3s ease; }
.tt-orb.is-render[aria-expanded="true"] .tt-screen-in { stop-color: #A88CFF; }
.tt-orb.is-render[aria-expanded="true"] .tt-tv-screen { filter: drop-shadow(0 0 5px rgba(168, 140, 255, 0.9)); }
.tt-orb-name { margin-top: -2px; font: 700 1rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); text-shadow: 0 0 4px var(--bg), 0 0 2px var(--bg); }
@media (max-width: 640px) {
  .tt-hang.is-key { width: 38px; height: 78px; }
  .tt-hang.is-tv { width: 48px; height: 71px; }
}
@keyframes tt-turn { to { transform: rotate(360deg); } }

/* the realm */
/* its card, floating in it: the amorisgratia card, as the hanging one */
.tt-realm-pane { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: min(780px, calc(100vw - 32px)); height: calc(100% - 72px); margin-top: 36px; padding: 14px 18px 16px; border: 1px solid var(--rule); border-radius: 22px; background: linear-gradient(180deg, var(--surface), var(--bg)); color: var(--ink); font-family: var(--sans); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 70px -10px rgba(242, 175, 189, 0.28); }
.tt-realm-pane[hidden] { display: none; }
.tt-realm-head { display: flex; align-items: center; gap: 12px; }
.tt-realm-heading { flex: 1; min-width: 0; }
.tt-realm-title { margin: 0; font: 700 1.9rem/1 "Caveat", "Segoe Print", cursive; -webkit-text-stroke: 0.02em currentColor; }
.tt-claude-state, .tt-render-info { margin: 3px 0 0; font: 500 0.8125rem/1.35 var(--sans); color: var(--ink-2); }
.tt-claude-state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.tt-claude-state[data-link="on"]::before { background: var(--leaf); }
.tt-claude-state[data-link="busy"]::before { background: var(--accent); animation: tt-pulse 1s ease-in-out infinite; }
@keyframes tt-pulse { 50% { opacity: 0.25; } }
.tt-claude-model { padding: 5px 8px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface); color: var(--ink); font: 500 0.8125rem/1 var(--sans); }
.tt-claude-feed { flex: 1; min-height: 0; margin: 0; padding: 10px 12px; overflow-y: auto; list-style: none; border-radius: 12px; background: var(--wash); font: 0.875rem/1.45 var(--sans); }
.tt-ev { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.tt-ev.ev-user { margin-left: 18%; padding: 7px 11px; border-radius: 12px 12px 3px 12px; background: var(--accent); color: #FFF; }
.tt-ev.ev-tool, .tt-ev.ev-system { font-size: 0.75rem; color: var(--muted); }
.tt-ev.ev-error, .tt-ev.ev-denied { color: var(--accent-ink); }
.tt-ev.ev-done { color: var(--leaf); font-weight: 600; font-size: 0.8125rem; }
.tt-ev.ev-pot { color: #B85A33; font-weight: 600; font-size: 0.8125rem; }   /* (thrown in the pot: the pot's clay) */
.tt-claude-ask { display: flex; align-items: flex-end; gap: 8px; }
.tt-tear .tt-claude-msg { flex: 1; min-width: 0; min-height: 46px; max-height: 140px; resize: vertical; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); color: var(--ink); font: 400 0.9375rem/1.4 var(--sans); }
.tt-claude-note { margin: 0; font: 600 1.05rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--muted); }
.tt-render-box { flex: 1; min-height: 0; display: grid; place-items: center; }
.tt-render-stage { display: block; border-radius: 10px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6); }
.tt-render-bar { display: flex; align-items: center; gap: 12px; }
.tt-render-play .i-pause, .tt-render-play[aria-pressed="true"] .i-play { display: none; }
.tt-render-play[aria-pressed="true"] .i-pause { display: block; }
.tt-render-scrub { flex: 1; accent-color: var(--accent); }
.tt-render-time { min-width: 92px; font: 600 0.8125rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
/* ---- Claude, through a tear in the page (portal.js, 2026-10-17: "a tear in the fabric of the page squashed
   to open what is underneath. without closing or moving to another page"). The hole is a clip-path on the
   world underneath; over it, an SVG draws the page's torn edge (its rim roughened), the shadow its lip casts
   into the hole, the paper bunched round it, flaps pushed back and creases running off it ---- */
.tt-tear { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.tt-tear[hidden] { display: none; }
.tt-tear-under { position: absolute; inset: 0; pointer-events: auto; background: radial-gradient(ellipse at 50% 45%, #2C2142 0%, #16111F 55%, #0A0910 100%); clip-path: polygon(50% 50%, 50% 50%, 50% 50%); }
.tt-tear-sky { position: absolute; left: 0; top: 0; pointer-events: none; }
.tt-tear-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tt-tear-bunch { fill: none; stroke: rgba(var(--shade), 0.3); stroke-width: 34; }
.tt-tear-creases path { fill: none; stroke: rgba(var(--shade), 0.18); stroke-width: 1.2; stroke-linecap: round; }
.tt-tear-shade { fill: none; stroke: rgba(0, 0, 0, 0.8); stroke-width: 46; }
.tt-tear-flaps { fill: var(--surface); stroke: rgba(var(--shade), 0.14); stroke-width: 1; stroke-linejoin: round; }
.tt-tear-rim { fill: none; stroke: var(--surface); stroke-width: 5; stroke-linejoin: round; }
/* (while it tears, only the light parts move: the costly ones, its fibres, its inner shadow, the bunching,
   the creases and the flaps' shadows, come once it has settled, so it opens smoothly on a phone too) */
.tt-tear-shade, .tt-tear-bunch, .tt-tear-creases { visibility: hidden; opacity: 0; }
.tt-tear.is-settled .tt-tear-shade, .tt-tear.is-settled .tt-tear-bunch, .tt-tear.is-settled .tt-tear-creases { visibility: visible; opacity: 1; transition: opacity 0.35s ease; }
.tt-tear:not(.is-settled) .tt-tear-rim, .tt-tear:not(.is-settled) .tt-tear-flaps { filter: none; }
.tt-tear-mend { position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; pointer-events: auto; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.25s ease; }
.tt-tear.is-open .tt-tear-mend { opacity: 1; transform: none; }
.tt-tear-mend svg { flex: none; max-width: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* what is underneath: Claude, in its own dark: no card; its words float in the dark itself, older ones
   dissolving upward, and what you say is written on a line of light */
.tt-tear .tt-realm-pane { position: absolute; z-index: 1; margin: 0; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #F2ECE2; opacity: 0; transform: scale(0.97); transition: opacity 0.45s ease, transform 0.45s ease; }
.tt-tear.is-open .tt-realm-pane { opacity: 1; transform: none; }
.tt-tear .tt-edit-av { width: 30px; height: 30px; background: none; }
.tt-tear .tt-edit-av svg { width: 24px; height: 24px; fill: #F2AFBD; filter: drop-shadow(0 0 7px rgba(242, 175, 189, 0.85)); }
.tt-tear .tt-realm-title { color: #F6F0E6; text-shadow: 0 0 18px rgba(242, 175, 189, 0.45); }
.tt-tear .tt-claude-state { color: rgba(242, 236, 226, 0.7); }
/* Claude at work (the founder, 2026-10-17: "claude is working should be a sparkling magical effect"): its
   words shimmer, light running through them, little stars (the ✦) twinkle up round them, and its own ✦
   turns, glowing */
.tt-tear .tt-realm-heading { position: relative; }
.tt-tear .is-working .tt-claude-state { background: linear-gradient(100deg, rgba(242, 236, 226, 0.75) 25%, #FFE3A3 42%, #FFFFFF 50%, #F2AFBD 58%, rgba(242, 236, 226, 0.75) 75%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(255, 214, 160, 0.55)); animation: tt-shimmer 2.6s linear infinite; }
.tt-tear .is-working .tt-claude-state::before { display: none; }
@keyframes tt-shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.tt-claude-magic { position: absolute; left: -12px; bottom: -10px; width: 260px; max-width: calc(100% + 24px); height: calc(1.35em + 20px); pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }   /* (as wide as the words: portal.js) */
.is-working .tt-claude-magic { opacity: 1; }
.tt-claude-magic i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; animation: tt-twinkle var(--d) ease-in-out var(--w) infinite paused; }
.is-working .tt-claude-magic i { animation-play-state: running; }
.tt-claude-magic svg { display: block; flex: none; width: 100%; height: 100%; max-width: none; fill: var(--c); filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 6px var(--c)); }
@keyframes tt-twinkle {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(0.2) rotate(0deg); }
  35% { opacity: 1; transform: translateY(-2px) scale(1) rotate(45deg); }
  65% { opacity: 0.6; transform: translateY(-7px) scale(0.55) rotate(90deg); }
}
.tt-tear .is-working .tt-edit-av svg { animation: tt-av-turn 3.4s linear infinite; }
@keyframes tt-av-turn {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 7px rgba(242, 175, 189, 0.85)); }
  50% { transform: rotate(180deg) scale(1.15); filter: drop-shadow(0 0 12px rgba(255, 227, 163, 1)) drop-shadow(0 0 22px rgba(242, 175, 189, 0.7)); }
  100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 7px rgba(242, 175, 189, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-tear .is-working .tt-claude-state, .tt-tear .is-working .tt-edit-av svg { animation: none; }
  .tt-claude-magic i { animation: none; opacity: 0.8; }
}
.tt-tear .tt-claude-model { padding: 4px 2px; border: 0; border-bottom: 1px solid rgba(246, 240, 230, 0.25); border-radius: 0; background: transparent; color: rgba(246, 240, 230, 0.85); }
.tt-tear .tt-claude-model option { color: #1F1B16; }
.tt-tear .tt-claude-connect { min-height: 0; padding: 4px 2px; border: 0; background: none; color: #F2AFBD; text-decoration: underline; text-underline-offset: 3px; }
.tt-tear .tt-claude-feed { padding: 8px 2px 4px; border-radius: 0; background: none; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.tt-tear .tt-ev { color: #EDE6DA; text-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
.tt-tear .tt-ev.ev-user { margin-left: 18%; padding: 0; border-radius: 0; background: none; color: #F2AFBD; text-align: right; font-style: italic; }
.tt-tear .tt-ev.ev-tool, .tt-tear .tt-ev.ev-system { color: rgba(237, 230, 218, 0.5); }
.tt-tear .tt-ev.ev-done { color: #B7CC8E; }
.tt-tear .tt-ev.ev-pot { color: #E8A27A; }
.tt-tear .tt-ev.ev-error, .tt-tear .tt-ev.ev-denied { color: #F2AFBD; }
.tt-tear .tt-claude-ask { align-items: flex-end; padding-bottom: 2px; border-bottom: 1px solid rgba(242, 175, 189, 0.5); box-shadow: 0 10px 18px -14px rgba(242, 175, 189, 0.8); }
.tt-tear .tt-claude-msg { min-height: 40px; padding: 8px 2px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #F6F0E6 !important; resize: none; }
.tt-tear .tt-claude-msg::placeholder { color: rgba(246, 240, 230, 0.42); }
.tt-tear .tt-claude-msg:focus, .tt-tear .tt-claude-msg:focus-visible { outline: none; }
.tt-tear .tt-claude-ask:focus-within { border-bottom-color: rgba(242, 175, 189, 0.95); box-shadow: 0 12px 20px -12px rgba(242, 175, 189, 1); }
.tt-tear .tt-claude-send { min-width: 0; min-height: 36px; padding: 0 6px; background: none; color: #F2AFBD; font: 700 1.35rem/1 "Caveat", "Segoe Print", cursive; text-shadow: 0 0 10px rgba(242, 175, 189, 0.7); }
.tt-tear .tt-claude-send:hover { background: none; color: #FFF; }
.tt-tear .tt-claude-send:disabled { opacity: 0.35; }
.tt-tear .tt-claude-stop { min-height: 0; border: 0; background: none; color: rgba(246, 240, 230, 0.8); text-decoration: underline; }
.tt-tear .tt-claude-note { color: rgba(242, 236, 226, 0.42); }
/* in a phone's tear: its heading over its controls, the line over its Send */
@media (max-width: 640px) {
  .tt-tear .tt-realm-pane { gap: 8px; }
  .tt-tear .tt-realm-head { flex-wrap: wrap; gap: 6px 10px; }
  .tt-tear .tt-realm-heading { flex: 1 1 calc(100% - 46px); }
  .tt-tear .tt-realm-title { font-size: 1.6rem; }
  .tt-tear .tt-claude-model { flex: 1 1 auto; min-width: 0; }
  .tt-tear .tt-claude-note { font-size: 0.95rem; }
}

/* ---- Render, through an opening in the page (portal.js, 2026-10-17: "opening to another world without the
   page closing ... realistically piping into another world", drawn as a round opening gone over again and
   again; "everything should dissolve and blend into the portal experience"): a round hole, its edge
   wobbling in many lines of ink and light, its light spilling onto the page; deep in it another world, the
   clip melting into it; its few controls floating under it, no bar ---- */
.tt-gate { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.tt-gate[hidden] { display: none; }
.tt-gate-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(120, 90, 210, 0.32) 0 28%, rgba(242, 175, 189, 0.14) 42%, transparent 64%); }
.tt-gate-window { position: absolute; overflow: hidden; pointer-events: auto; clip-path: circle(0); background: radial-gradient(circle closest-side, #2C2142 0%, #16111F 55%, #07060B 90%); }
.tt-gate-world { position: absolute; left: -7.5%; top: -7.5%; }
.tt-gate .tt-render-box { position: absolute; display: grid; place-items: center; }
.tt-gate .tt-render-stage { display: block; border-radius: 0; box-shadow: none; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 76%, transparent 100%); }
.tt-gate-depth { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle closest-side, transparent 56%, rgba(5, 3, 10, 0.8) 87%); }
.tt-gate-rings { position: absolute; overflow: visible; pointer-events: none; }
.tt-gate-rings path { fill: none; stroke-linejoin: round; }
.tt-gate-rings path:nth-child(1) { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.6; }
.tt-gate-rings path:nth-child(2) { stroke: #4B4FB0; stroke-opacity: 0.5; stroke-width: 1.2; }
.tt-gate-rings path:nth-child(3) { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1.1; }
.tt-gate-rings path:nth-child(4) { stroke: #F2AFBD; stroke-opacity: 0.65; stroke-width: 1.3; }
.tt-gate-rings path:nth-child(5) { stroke: #4B4FB0; stroke-opacity: 0.35; stroke-width: 1; }
.tt-gate-rings path:nth-child(6) { stroke: #A88CFF; stroke-opacity: 0.5; stroke-width: 1.2; }
.tt-gate-bar { position: absolute; z-index: 2; transform: translateX(-50%); pointer-events: auto; opacity: 0; transition: opacity 0.4s ease 0.35s; }
.tt-gate.is-open .tt-gate-bar, .tt-gate.is-open .tt-render-info, .tt-gate.is-open .tt-gate-close { opacity: 1; }
.tt-gate .tt-render-bar { display: flex; align-items: center; gap: 6px; }
.tt-gate-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: #F6F0E6; cursor: pointer; filter: drop-shadow(0 0 6px rgba(242, 175, 189, 0.7)); }
.tt-gate-btn:hover { filter: drop-shadow(0 0 9px rgba(242, 175, 189, 1)); }
.tt-gate-btn .i { flex: none; max-width: none; width: 18px; height: 18px; fill: currentColor; stroke: none; }
.tt-gate .tt-render-scrub { flex: 1; min-width: 40px; accent-color: #F2AFBD; opacity: 0.8; }
.tt-gate .tt-render-time { min-width: 0; font: 600 0.6875rem/1 var(--sans); font-variant-numeric: tabular-nums; color: rgba(246, 240, 230, 0.75); text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); }
.tt-gate .tt-render-info { position: absolute; z-index: 2; margin: 0; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.4s ease 0.35s; font: 600 1.05rem/1.15 "Caveat", "Segoe Print", cursive; color: rgba(246, 240, 230, 0.72); text-shadow: 0 0 8px rgba(242, 175, 189, 0.5); }
.tt-gate-close { position: absolute; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity 0.3s ease 0.3s; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
.tt-gate-close svg { flex: none; max-width: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* the Render orb's icon: a little TV, rabbit ears and all */
@media (prefers-reduced-motion: reduce) { .tt-hang-swing, .tt-orb:hover .tt-hang-swing, .tt-orb .tt-key { animation: none !important; } }

/* a blank slate (maker.js): Build, and for now Thoughts; everything else is put away */
.maker.is-slate { height: calc(100vh - var(--header) - 1px); height: calc(100svh - var(--header) - 1px); min-height: 0; display: flex; flex-direction: column; padding: 0; }
.maker.is-slate > :not(.slate):not(.rm) { display: none !important; }
.is-slating .site-footer { display: none; }
.slate { flex: 1; align-self: stretch; display: grid; place-content: center; text-align: center; }
.slate[hidden] { display: none; }
.slate-title { margin: 0; font: 700 3.2rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); opacity: 0.45; }
.slate-sub { margin: 8px 0 0; font: 600 1.25rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--muted); opacity: 0.8; }

/* the workspace, out of sight until maker.js has opened it on its view (never the old card tools first) */
.maker:not(.is-ready) { visibility: hidden; opacity: 0; }
.maker.is-ready { transition: opacity 0.25s ease; }
/* (meanwhile, a star breathing in the middle of the page) */
.is-thoughts:has(.maker:not(.is-ready))::after { content: "\2726"; position: fixed; left: 50%; top: 52%; z-index: 1; transform: translate(-50%, -50%); font: 2rem/1 serif; color: var(--accent); pointer-events: none; animation: ag-wait 1.6s ease-in-out infinite; }
@keyframes ag-wait { 0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .is-thoughts:has(.maker:not(.is-ready))::after { animation: none; opacity: 0.6; } }

/* ---- Thoughts: tickets, each in its own hand (tickets.js, 2026-10-16), anywhere in a wide open space
   that pans and zooms like the Tale's (2026-10-17) ----
   A ticket: its paper (.tk-paper, the shape cut with clip-path, a grain over it) inside .tk-back (which
   casts its shadow, so the cut shape keeps one), what is written above it, its clip on top (taken hold
   of to move it), and its tools beside it (move, copy to paste anywhere, take away). */
@font-face { font-family: "Patrick Hand"; src: url("/assets/fonts/patrick-hand.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Coming Soon"; src: url("/assets/fonts/coming-soon.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/assets/fonts/permanent-marker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/assets/fonts/kalam.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gaegu"; src: url("/assets/fonts/gaegu-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* (a troll card's words: Impact's open twin, so a phone shows them the same; OFL, licence beside the font) */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gochi Hand"; src: url("/assets/fonts/gochi-hand.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Architects Daughter"; src: url("/assets/fonts/architects-daughter.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mali"; src: url("/assets/fonts/mali-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Handlee"; src: url("/assets/fonts/handlee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Indie Flower"; src: url("/assets/fonts/indie-flower.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Amatic SC"; src: url("/assets/fonts/amatic-sc-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Shadows Into Light Two"; src: url("/assets/fonts/shadows-into-light-two.woff2") format("woff2"); font-display: swap; }

.slate.is-tickets { display: block; position: relative; overflow: hidden; }
.slate.is-tickets .slate-title, .slate.is-tickets .slate-sub { display: none; }
/* the Thought page's sections (2026-10-18): one under another, each opened by its bar; the open one takes the
   rest of the page, the others stay as their bars */
.tsec { position: absolute; inset: 0; }
.tsec[hidden] { display: none; }
/* the bar (the founder's sketch, 2026-10-19: a pill with four rings at the page's left, "just put a bar like this on
   the thought page for the interactions", "i can alternate between this"): a round button for each section, floating
   over the page at its left, the section under it all of the page ("no sidebar, just make it overlayed on the
   page"). No pink ("no pink"), and no black ("black doesn't match"): dressed as the switch in the header, the chosen
   one raised */
.tsec-bar { position: absolute; left: 12px; top: 50%; z-index: 12; transform: translateY(-50%); }
.tsec-pill { display: flex; flex-direction: column; gap: 9px; padding: 7px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 8px 22px -14px rgba(var(--shade), 0.5); }
.tsec-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.tsec-dot:hover, .tsec-dot:focus-visible { transform: scale(1.07); background: var(--wash); outline: none; }
.tsec-dot[aria-selected="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(var(--shade), 0.14), 0 2px 8px -2px rgba(var(--shade), 0.22); cursor: default; }
.tsec-dot:focus-visible { box-shadow: inset 0 0 0 1px var(--rule), 0 0 0 3px var(--wash-2); }
.tsec-mark { font-size: 1.25rem; line-height: 1; }
/* (its name, beside it while it is pointed at) */
.tsec-dot::after { content: attr(data-name); position: absolute; left: calc(100% + 14px); top: 50%; padding: 6px 11px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -10px rgba(var(--shade), 0.5); font: 600 1rem/1 "Caveat", "Segoe Print", cursive; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-4px, -50%); transition: opacity 0.15s ease, transform 0.15s ease; }
.tsec-dot:hover::after, .tsec-dot:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.tsec-part { position: absolute; inset: 0; display: none; flex-direction: column; }
.tsec-part.is-open { display: flex; }
.tsec-body { position: relative; flex: 1; min-height: 0; }
.tsec-body[hidden] { display: none; }
.tsec-blank { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font: 600 1.6rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); opacity: 0.6; white-space: nowrap; }
@media (max-width: 640px) { .tsec-bar { left: 8px; } .tsec-pill { gap: 7px; padding: 5px; } .tsec-dot { width: 40px; height: 40px; } .tsec-mark { font-size: 1.1rem; } .tsec-dot::after { display: none; } }
/* React (react.js; 2026-10-18, a free wall since 2026-10-19: "the get on the react side should be overlayed on the
   page. the page should be free as well. react cards as well"): the reaction cards taped up on the wall, and a bar
   floating over the top of the page to get any link's clips and pictures, what was found dropping down under it */
.rx-get.fw-make { left: 50%; display: block; width: min(560px, calc(100% - 180px)); max-width: none; padding: 6px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 10px 26px -16px rgba(var(--shade), 0.55); transform: translateX(-50%); text-align: left; }
.rx-row { display: flex; align-items: center; gap: 6px; }
.rx-x { flex: none; width: 28px; text-align: center; font: 700 1.05rem/1 var(--sans); color: var(--ink); }
.rx .rx-get .rx-url { flex: 1; min-width: 0; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--bg); color: var(--ink); font: 400 0.9375rem/1.3 var(--sans); }
.rx .rx-get .rx-url:focus { outline: 1.5px solid var(--ink-2); outline-offset: 0; }
.rx-get .rx-go { flex: none; min-height: 36px; padding: 0 18px; box-shadow: none; font-weight: 600; }
.rx-found { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 18px; background: var(--wash); color: var(--ink); font: 600 0.8125rem/1 var(--sans); white-space: nowrap; cursor: pointer; }
.rx-found::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 0.15s ease; }
.rx-found.is-open::after { margin-top: 3px; transform: rotate(-135deg); }
.rx-found:hover { background: var(--wash-2); }
.rx-state { margin: 6px 10px 2px; font: 500 0.8125rem/1.35 var(--sans); color: var(--muted); }
.rx-state.is-error { color: var(--accent-ink); }
.rx-post { max-height: min(56vh, 380px); margin: 6px 0 0; padding: 8px 8px 4px; overflow-y: auto; border-top: 1px solid var(--rule); overscroll-behavior: contain; }
.rx-post[hidden] { display: none; }
.rx-post-head { display: flex; align-items: center; gap: 8px; }
.rx-by { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.9375rem/1.3 var(--sans); }
.rx-by a { color: var(--ink); text-decoration: none; }
.rx-by a:hover { text-decoration: underline; }
.rx-by span { color: var(--muted); font-weight: 400; }
.rx-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.rx-close:hover, .rx-close:focus-visible { background: var(--wash); color: var(--ink); }
.rx-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rx-text { display: -webkit-box; margin: 2px 0 8px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 400 0.875rem/1.4 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.rx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 4px; padding: 0; list-style: none; }
.rx-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #1A1A1A; }
.rx-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rx-playmark { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #FFF; }
.rx-playmark svg { flex: none; width: 18px; height: 18px; max-width: none; fill: currentColor; }
.rx-dur { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.66); color: #FFF; font: 600 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.rx-prog { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.rx-prog span { display: block; width: 2%; height: 100%; background: #FFF; transition: width 0.4s ease; }
.rx-tile-do { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.rx-react { flex: 1; min-height: 0; padding: 5px 10px; font-size: 0.875rem; }
.rx-save svg, .rx-tool svg { flex: none; width: 18px; height: 18px; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a reaction card, taped up: what was posted, who posted it, your reaction in your hand, a stamp, the signature */
.rx-card { position: absolute; display: flex; flex-direction: column; padding: 12px 10px 6px; border-radius: 4px; cursor: grab; transform: rotate(var(--r, 0deg)); transform-origin: 50% 30%;
  background: url("grain.png") 0 0 / 200px 200px repeat, linear-gradient(var(--surface), var(--bg)); box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.12), 0 16px 30px -18px rgba(var(--shade), 0.6); }
.rx-card.is-held { cursor: grabbing; box-shadow: 0 0 0 1px var(--rule), 0 2px 4px rgba(0, 0, 0, 0.14), 0 30px 44px -22px rgba(var(--shade), 0.7); }
.rx-card.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.rx-card.is-on, .rx-card:focus-within { z-index: 9000 !important; }
.rx-media { position: relative; flex: none; align-self: center; }
.rx-media img, .rx-media video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: #141414; }
.rx-media img { pointer-events: none; }
.rx-stamp { position: absolute; right: -10px; top: -12px; font: 2.9rem/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transform: rotate(12deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.rx-card.is-stamped .rx-stamp { animation: rx-stamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes rx-stamp { from { transform: rotate(-10deg) scale(1.9); opacity: 0; } }
.rx-credit { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 7px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.75rem/1.2 var(--sans); color: var(--muted); text-decoration: none; }
a.rx-credit:hover { color: var(--ink); text-decoration: underline; }
.rx .rx-words { flex: none; width: 100%; min-height: 1.6em; max-height: 9em; margin: 2px 0 0; padding: 2px; overflow: hidden; border: 0 !important; border-bottom: 1px dashed var(--rule) !important; border-radius: 0; resize: none; background: transparent !important; box-shadow: none !important; color: var(--ink);
  font: 700 1.25rem/1.25 "Caveat", "Segoe Print", cursive; outline: none; cursor: text; }
.rx .rx-words::placeholder { color: var(--muted); opacity: 0.7; }
/* (no box round it while written in: its dashed line goes solid) */
.rx .rx-words:focus { outline: none !important; border-bottom: 1px solid var(--ink-2) !important; }
.rx-sign { flex: none; margin: 2px 0 0; text-align: right; font: 400 1.2rem/1.1 "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive; color: var(--accent-ink); pointer-events: none; }
/* its bar, under it while it is pointed at or worked on: the stamps, ↓ saves what is on it, × takes it down */
.rx-bar { position: absolute; left: 50%; top: 100%; z-index: 6; display: flex; align-items: center; gap: 1px; padding: 3px 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 10px 24px -14px rgba(var(--shade), 0.6); transform: translateX(-50%); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; cursor: default; }
.rx-card:hover .rx-bar, .rx-card.is-on .rx-bar, .rx-card:focus-within .rx-bar { opacity: 1; pointer-events: auto; }
.fw.is-panning .rx-bar, .rx-card.is-held .rx-bar { opacity: 0; pointer-events: none; }
.rx-stamps { display: flex; }
.rx-stamp-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; font: 16px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; cursor: pointer; opacity: 0.8; transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease; }
.rx-stamp-btn:hover, .rx-stamp-btn:focus-visible { opacity: 1; transform: scale(1.18); background: var(--wash); }
.rx-stamp-btn.is-on { opacity: 1; background: var(--wash-2); }
.rx-bar-gap { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--rule); }
.rx-tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.rx-tool:hover, .rx-tool:focus-visible { background: var(--wash); color: var(--ink); }
@media (max-width: 640px) {
  .rx-get.fw-make { left: 64px; right: 10px; top: 10px; width: auto; transform: none; }
  .rx-post { max-height: 52vh; }
  .rx-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Books (book.js, 2026-10-19: "on the thought section, add books to it"): books standing on the wall, each on its
   own little wooden ledge, a cloth cover with its title in gold; a book opened: its contents down the side and the
   chapter on a sheet of paper (the writing page, writer.js, as Article's) ---- */
.bk-book { position: absolute; display: flex; flex-direction: column; align-items: center; width: 200px; cursor: pointer; outline: none; transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; }
.bk-book.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.bk-book.is-held { cursor: grabbing; }
.bk-cover { --cloth: #2E4A3B; position: relative; display: block; width: 158px; height: 222px; border-radius: 3px 6px 6px 3px; transition: transform 0.2s ease;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.12) 9px, rgba(255, 255, 255, 0.1) 11px, rgba(0, 0, 0, 0) 17px), url("grain.png") 0 0 / 120px 120px repeat, var(--cloth);
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.06), 3px 1px 0 -0.5px #EDE6D6, 5px 2px 0 -1px #D6CDB8, 7px 3px 0 -1.5px #C4BAA3, 0 16px 24px -12px rgba(0, 0, 0, 0.55); }
.bk-book:hover .bk-cover, .bk-book:focus-visible .bk-cover { transform: translateY(-5px) rotate(-1.2deg); }
.bk-book.is-forest .bk-cover { --cloth: #2E4A3B; }
.bk-book.is-oxblood .bk-cover { --cloth: #5C1F26; }
.bk-book.is-navy .bk-cover { --cloth: #1F2B47; }
.bk-book.is-ochre .bk-cover { --cloth: #6E4C17; }
.bk-book.is-charcoal .bk-cover { --cloth: #2C2C2F; }
.bk-book.is-teal .bk-cover { --cloth: #1C4A4E; }
.bk-frame { position: absolute; inset: 14px 12px 16px 21px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 8px; border: 1.5px solid rgba(217, 185, 107, 0.75); outline: 1px solid rgba(217, 185, 107, 0.35); outline-offset: -6px; text-align: center; }
.bk-btitle { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; font: 600 1.3rem/1.12 var(--display); letter-spacing: 0.02em; color: #E6CB82; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 236, 180, 0.4); overflow-wrap: anywhere; }
.bk-book.is-untitled .bk-btitle { font-style: italic; opacity: 0.55; }
.bk-rule { font-size: 0.7rem; line-height: 1; color: #D9B96B; }
.bk-bby { font: 400 1.05rem/1 "Mrs Saint Delafield", "Segoe Script", cursive; color: #E6CB82; }
.bk-ledge { display: block; width: 196px; height: 12px; margin-top: -1px; border-radius: 2px; background: linear-gradient(#A8784A, #7A5230 70%, #5E3E22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 7px 10px -5px rgba(0, 0, 0, 0.5); }
.bk-meta { margin-top: 7px; font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; color: var(--muted); white-space: nowrap; }
.bk-book:focus-visible .bk-meta { color: var(--ink); text-decoration: underline; }
.bk-x { position: absolute; right: 8px; top: -10px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.bk-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk-book:hover .bk-x, .bk-book:focus-visible .bk-x, .bk-x:focus-visible { opacity: 1; }
.fw.is-panning .bk-x { opacity: 0; }
/* a book, opened */
.bk-open { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.bk-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 18px 12px 14px 18px; overflow-y: auto; border-right: 1px solid var(--rule); background: var(--surface); }
.ar-doc .bk-title { display: block; width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: hidden; resize: none; border: 0; border-radius: 0; outline: none; background: none !important; box-shadow: none !important; color: var(--ink); font: 600 1.7rem/1.15 var(--display); }
.ar-doc .bk-title:focus { outline: none; }
.ar-doc .bk-title::placeholder { color: var(--muted); opacity: 0.6; }
.bk-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font: 500 0.8rem/1.2 var(--sans); color: var(--muted); }
.bk-by .ar-sign { font-size: 1.4rem; }
.bk-chapters { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bk-chapters li { position: relative; display: flex; }
.bk-ch { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 8px 30px 8px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 500 0.9rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.bk-ch:hover { background: var(--wash); color: var(--ink); }
.bk-ch.is-on { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(var(--shade), 0.14); }
.bk-ch-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.bk-ch-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-ch-w { grid-column: 2; font-size: 0.75rem; color: var(--muted); }
.bk-ch-x { position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; opacity: 0; transform: translateY(-50%); }
.bk-ch-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bk-chapters li:hover .bk-ch-x, .bk-ch-x:focus-visible { opacity: 1; }
.bk-ch-x:hover { background: var(--wash); color: var(--ink); }
.bk-add { align-self: flex-start; margin-top: 6px; }
.bk-add .i { width: 15px; height: 15px; }
.bk-num { margin: 0 0 6px; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ar-doc .bk-ctitle { font-size: 2.1rem; }
@media (max-width: 640px) {
  .bk-open { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .bk-side { max-height: 36vh; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ar-doc .bk-title { font-size: 1.35rem; }
  .bk-by { margin-bottom: 4px; padding-bottom: 6px; }
  .bk-chapters { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .bk-chapters li { flex: none; }
  .bk-ch { display: flex; gap: 6px; padding: 6px 28px 6px 10px; border: 1px solid var(--rule); white-space: nowrap; }
  .bk-ch-w { display: none; }
  .bk-ch-x { opacity: 1; }
  .ar-doc .bk-ctitle { font-size: 1.7rem; }
}

/* ---- the free walls of the Thought page (freewall.js, 2026-10-18: "the troll section is free to pan and zoom. the
   cards sticking to the walls", then "the article section are title tapes sticking on the free wall"): an open
   wall that pans and zooms, things stuck on it anywhere; Troll's and Article's ---- */
.fw { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; text-align: left; }
.fw.is-grab { cursor: grab; }
.fw.is-panning, .fw.is-panning * { cursor: grabbing !important; }
.fw.is-moving .fw-world { will-change: transform; }
.fw.is-drop { box-shadow: inset 0 0 0 3px var(--accent); }
.fw-world { position: absolute; left: 0; top: 0; width: 6000px; height: 4000px; transform-origin: 0 0; user-select: none; -webkit-user-select: none;
  background: url("grain.png") 0 0 / 200px 200px repeat, radial-gradient(circle, var(--rule) 1.1px, transparent 1.6px) 0 0 / 56px 56px; }
.fw-make { position: absolute; left: 14px; top: 12px; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 28px); }
.fw-make .pill-btn { min-height: 34px; background: var(--surface); box-shadow: 0 8px 22px -14px rgba(var(--shade), 0.5); }
.fw-make .pill-btn .i { width: 16px; height: 16px; }
.fw-note { position: absolute; left: 50%; top: 14px; z-index: 11; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 500 0.8125rem/1.3 var(--sans); transform: translateX(-50%); box-shadow: 0 8px 24px -12px rgba(var(--shade), 0.5); pointer-events: none; }
.fw-note.is-error { background: var(--accent-ink); }
.fw-empty { position: absolute; left: 50%; top: 50%; z-index: 4; display: none; width: min(440px, calc(100% - 40px)); margin: 0; text-align: center; font: 600 1.45rem/1.25 "Caveat", "Segoe Print", cursive; color: var(--muted); opacity: 0.75; transform: translate(-50%, -50%); pointer-events: none; }
.fw.is-empty .fw-empty { display: block; }
.fw-hint { position: absolute; left: 18px; bottom: 14px; z-index: 5; margin: 0; max-width: calc(100% - 260px); font: 600 1.1rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); pointer-events: none; }
@keyframes fw-stick { from { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(-14px) scale(1.06); } }
@media (max-width: 640px) { .fw-hint { display: none; } .fw-make { left: 10px; top: 10px; } }

/* ---- Troll (troll.js): cards taped up on the wall, a picture or a clip (or plain black) with big outlined words
   along its top and foot, typed right on it, emoji stickers stamped on and dragged about, signed on the wall
   under it; moved by a drag (a press held, on a phone) ---- */
.tr-blk { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 2px; background: #111; box-shadow: 0 0 0 1px var(--rule); }
.tr-card { position: absolute; display: flex; flex-direction: column; align-items: flex-end; transform: rotate(var(--r, 0deg)); transform-origin: 50% 40%; }
.tr-card.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.tr-card.is-on, .tr-card:focus-within { z-index: 9000 !important; }
.tr-media { position: relative; flex: none; overflow: hidden; border-radius: 2px; background: #111; cursor: grab; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.28), 0 16px 28px -18px rgba(var(--shade), 0.7); transition: box-shadow 0.15s ease; }
.tr-card.is-held .tr-media { cursor: grabbing; box-shadow: 0 0 0 1px var(--rule), 0 2px 4px rgba(0, 0, 0, 0.25), 0 30px 44px -22px rgba(var(--shade), 0.75); }
.tr-media img, .tr-media video, .tr-plainbg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tr-plainbg { background: #111; }
/* its tape: masking tape, a little see-through, torn at its ends (two corners, all four, or a strip across its top) */
.tr-tape, .fw-tape { position: absolute; z-index: 5; width: 86px; height: 24px; cursor: grab;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.04)), rgba(232, 220, 189, 0.86);
  clip-path: polygon(0 12%, 3% 0, 97% 6%, 100% 18%, 98% 40%, 100% 62%, 97% 84%, 99% 100%, 2% 94%, 0 76%, 2% 52%, 0 30%); }
.tr-tape.is-tl { left: -30px; top: -2px; transform: rotate(-40deg); }
.tr-tape.is-tr { right: -30px; top: -2px; transform: rotate(40deg); }
.tr-tape.is-bl { left: -30px; top: calc(var(--h) - 22px); transform: rotate(40deg); }
.tr-tape.is-br { right: -30px; top: calc(var(--h) - 22px); transform: rotate(-40deg); }
:is(.tr-tape, .fw-tape).is-top { left: 50%; top: -12px; width: 128px; transform: translateX(-50%) rotate(-2.5deg); }
.tr-sign { margin: 5px 6px 0 0; font: 400 1.35rem/1.1 "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive; color: var(--accent-ink); white-space: nowrap; pointer-events: none; }
/* its words: big, white, edged in black, along its top and its foot */
.tr .tr-line { position: absolute; left: 4%; z-index: 2; width: 92%; min-height: 0; margin: 0; padding: 0; overflow: hidden; resize: none; border: 0 !important; border-radius: 4px; outline: none; background: transparent !important; box-shadow: none !important; color: #FFF; caret-color: #FFF;
  font-family: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; font-weight: 400; line-height: 1.08; letter-spacing: 0.01em; text-align: center; text-transform: uppercase;
  text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 0 3px 6px rgba(0, 0, 0, 0.5); }
.tr .tr-line.is-top { top: 3%; }
.tr .tr-line.is-bottom { bottom: 4%; }
.tr .tr-line::placeholder { color: rgba(255, 255, 255, 0.38); text-shadow: none; }
.tr .tr-line:focus { box-shadow: 0 0 0 2px rgba(242, 175, 189, 0.65) !important; }
/* its stickers, stamped on and dragged about (dragged off it, gone) */
.tr-stuck { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tr-st { position: absolute; transform: translate(-50%, -50%); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); transition: opacity 0.15s ease, transform 0.15s ease; }
.tr-st.is-held { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); transition: none; }
.tr-st.is-leaving { opacity: 0.35; }
.tr-st.is-new { animation: tr-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes tr-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-25deg); } }
/* its bar, under it while it is pointed at or worked on: stickers to stamp, ↓ saves it, × takes it down */
.tr-bar { position: absolute; left: 50%; top: 100%; z-index: 6; display: flex; align-items: center; gap: 1px; padding: 3px 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 10px 24px -14px rgba(var(--shade), 0.6); transform: translateX(-50%); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.tr-card:hover .tr-bar, .tr-card.is-on .tr-bar, .tr-card:focus-within .tr-bar { opacity: 1; pointer-events: auto; }
.fw.is-panning .tr-bar, .tr-card.is-held .tr-bar { opacity: 0; pointer-events: none; }
.tr-picks { display: flex; }
.tr-pick { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; font: 16px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; cursor: pointer; opacity: 0.85; transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease; }
.tr-pick:hover, .tr-pick:focus-visible { opacity: 1; transform: scale(1.18); background: var(--wash); }
.tr-bar-gap { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--rule); }
.tr-tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.tr-tool:hover, .tr-tool:focus-visible { background: var(--wash); color: var(--ink); }
.tr-tool svg { flex: none; width: 18px; height: 18px; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Article (article.js): title tapes on the wall, each its title in marker on a strip of tape and how long it
   is pencilled under it; a click (a tap) opens it ---- */
.ar-tape { position: absolute; display: flex; flex-direction: column; align-items: flex-start; transform: rotate(var(--r, 0deg)); cursor: pointer; outline: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) drop-shadow(0 6px 8px rgba(var(--shade), 0.12)); }
.ar-tape.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.ar-tape.is-held { cursor: grabbing; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) drop-shadow(0 16px 18px rgba(var(--shade), 0.25)); }
.ar-tape-strip { --tape: #E8DCBD; display: block; max-width: 600px; padding: 11px 28px 9px; transition: transform 0.15s ease;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.04)), var(--tape);
  clip-path: polygon(0 10%, 2% 0, 4% 8%, 96% 4%, 98% 0, 100% 12%, 98.5% 34%, 100% 56%, 98% 78%, 100% 100%, 3% 96%, 0 100%, 1.5% 70%, 0 46%, 1.8% 24%); }
.ar-tape:hover .ar-tape-strip { transform: translateY(-2px); }
.ar-tape.is-rose .ar-tape-strip { --tape: #F4C3CE; background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.4px, transparent 1.9px) 0 0 / 11px 11px, var(--tape); }
.ar-tape.is-mint .ar-tape-strip { --tape: #C3E4D0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.38) 0 5px, transparent 5px 11px), var(--tape); }
.ar-tape.is-sky .ar-tape-strip { --tape: #C4DBF0; background: linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px) 0 0 / 10px 10px, var(--tape); }
.ar-tape.is-kraft .ar-tape-strip { --tape: #CDAE84; background: url("grain.png") 0 0 / 160px 160px repeat, linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.05)), var(--tape); }
.ar-tape.is-lemon .ar-tape-strip { --tape: #F2E3A0; }
.ar-tape-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 1.5rem/1.15 "Permanent Marker", "Segoe Print", cursive; color: #1C1C1C; }
.ar-tape.is-untitled .ar-tape-title { color: rgba(28, 28, 28, 0.45); }
.ar-tape-meta { margin: 5px 0 0 22px; font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; color: var(--muted); white-space: nowrap; }
.ar-tape:focus-visible .ar-tape-meta { color: var(--ink); text-decoration: underline; }
.ar-tape-x { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--rule); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.ar-tape-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ar-tape:hover .ar-tape-x, .ar-tape:focus-visible .ar-tape-x, .ar-tape-x:focus-visible { opacity: 1; }
.fw.is-panning .ar-tape-x { opacity: 0; }

/* an article, opened: over the sections, grown out of its tape; its bar on top, then a sheet of paper to write
   on, in the site's Garamond */
.ar-doc { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); transform-origin: 0 0; outline: none; text-align: left; }
.ar-top { flex: none; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 6px 12px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.ar-back { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--edge); border-radius: 999px; background: none; color: var(--ink); font: 600 0.875rem/1 var(--sans); cursor: pointer; }
.ar-back:hover, .ar-back:focus-visible { background: var(--wash); }
.ar-back svg, .ar-del svg, .ar-t svg { flex: none; width: 20px; height: 20px; max-width: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-tools { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 1px; overflow-x: auto; scrollbar-width: none; }
.ar-tools::-webkit-scrollbar { display: none; }
.ar-t { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.ar-t.is-word { font: 600 1.05rem/1 var(--serif); }
.ar-t small { margin: 0.35em 0 0 1px; font-size: 0.62em; }
.ar-t:hover, .ar-t:focus-visible { background: var(--wash); color: var(--ink); }
.ar-t[aria-pressed="true"] { background: var(--wash-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.ar-sep { flex: none; width: 1px; height: 20px; margin: 0 5px; background: var(--rule); }
.ar-saved { flex: none; min-width: 52px; font: 500 0.75rem/1 var(--sans); color: var(--muted); text-align: right; white-space: nowrap; }
.ar-del { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.ar-del:hover, .ar-del:focus-visible { background: var(--wash); color: var(--accent-ink); }
.ar-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 16px 72px; background: url("grain.png") 0 0 / 200px 200px repeat; }
.ar-paper { max-width: 740px; min-height: 100%; margin: 0 auto; padding: 46px 64px 64px; border-radius: 3px; background: var(--surface); box-shadow: 0 1px 2px rgba(var(--shade), 0.12), 0 22px 44px -28px rgba(var(--shade), 0.5); }
.ar-doc .ar-title { display: block; width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: hidden; resize: none; border: 0; border-radius: 0; outline: none; background: none !important; box-shadow: none !important; color: var(--ink); font: 600 2.5rem/1.12 var(--display); }
.ar-doc .ar-title:focus { outline: none; }
.ar-doc .ar-title::placeholder { color: var(--muted); opacity: 0.6; }
.ar-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 8px 0 26px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); font: 500 0.8125rem/1 var(--sans); color: var(--muted); }
.ar-sign { font: 400 1.6rem/1 "Mrs Saint Delafield", "Segoe Script", cursive; color: var(--accent-ink); }
.ar-body { min-height: 40vh; outline: none; color: var(--ink); font: 400 1.2rem/1.7 var(--serif); overflow-wrap: break-word; caret-color: var(--accent-ink); }
.ar-body.is-empty > :first-child::before { content: "Start writing\2026   # a heading \00b7  - a list \00b7  > a quote"; float: left; height: 0; color: var(--muted); opacity: 0.75; pointer-events: none; }
.ar-body > * { margin: 0 0 0.85em; }
.ar-body h2 { margin: 1.3em 0 0.4em; font: 600 1.85rem/1.2 var(--display); }
.ar-body h3 { margin: 1.15em 0 0.3em; font: 600 1.4rem/1.25 var(--display); }
.ar-body blockquote { margin: 1.1em 0; padding: 0.1em 0 0.1em 1em; border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic; }
.ar-body ul, .ar-body ol { padding-left: 1.6em; }
.ar-body li { margin: 0.2em 0; }
.ar-body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ar-body img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 3px; }
.ar-body hr { height: auto; margin: 1.6em 0; border: 0; overflow: visible; text-align: center; }
.ar-body hr::after { content: "\2726  \2726  \2726"; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.5em; }
.ar-body pre, .ar-body code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
/* a link, put on the words chosen */
.ar-linkpop { position: absolute; z-index: 40; display: flex; align-items: center; gap: 6px; width: min(390px, calc(100% - 16px)); margin: 0; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 16px 34px -16px rgba(var(--shade), 0.6); }
.ar-doc .ar-linkpop input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--edge); border-radius: 8px; background: var(--bg); color: var(--ink); font: 400 0.875rem/1 var(--sans); }
.ar-link-off { flex: none; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 500 0.8125rem/1 var(--sans); cursor: pointer; }
.ar-link-off:hover { color: var(--ink); }
@media (max-width: 640px) {
  .ar-top { flex-wrap: wrap; row-gap: 4px; padding: 6px 8px; }
  .ar-tools { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .ar-saved { margin-left: auto; }
  .ar-scroll { padding: 12px 8px 48px; }
  .ar-paper { padding: 24px 20px 40px; }
  .ar-doc .ar-title { font-size: 2rem; }
  .ar-body { font-size: 1.125rem; }
}
.tickets { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; }
.tickets[hidden] { display: none; }
.tickets.is-grab { cursor: grab; }
.tickets.is-panning, .tickets.is-panning * { cursor: grabbing !important; }
.tickets.is-pasting, .tickets.is-pasting * { cursor: copy !important; }
.tickets.is-moving .tk-world { will-change: transform; }
/* (React's cards and Get bar on the tickets' space, 2026-10-26: "merge thoughts and react") */
.tickets.is-panning .rx-bar { opacity: 0; pointer-events: none; }
.tickets.is-drop { box-shadow: inset 0 0 0 3px var(--accent); }
.tickets.rx .tk-note { top: 70px; }
.tickets.rx:has(> .tk-bar:not([hidden])) .rx-get { display: none; }
/* Troll's bar in Thoughts (troll.js; 2026-10-31, "merge troll with thoughts"): top right, level with the Get bar */
.tickets .tk-troll { left: auto; right: 16px; top: 12px; align-items: center; }
.is-boardtop .maker .tickets .tk-troll { top: 58px; }
.tickets .tk-troll .tr-state { position: absolute; top: calc(100% + 6px); right: 0; margin: 0; white-space: nowrap; }
.tickets:has(> .tk-bar:not([hidden])) .tk-troll { display: none; }
@media (max-width: 640px) { .is-boardtop .maker .tickets .tk-troll { top: 100px; right: 10px; } }
.tk-world { position: absolute; left: 0; top: 0; width: 6000px; height: 4000px; transform-origin: 0 0; user-select: none; -webkit-user-select: none; background-image: radial-gradient(circle, var(--rule) 1.2px, transparent 1.7px); background-size: 44px 44px; }
.tk-defs { position: absolute; width: 0; height: 0; }
.tk { position: absolute; color: #2A2620; transform: rotate(var(--r)); transform-origin: 50% 0; transition: transform 0.25s ease; }
.tk:hover { z-index: 4; }
/* (straightened and lifted while written in; not for a press on one of its tools, which would leave it over its neighbours) */
.tk:has(.tk-text:focus) { transform: rotate(0deg) scale(1.03); z-index: 5; }
.tk.is-held { z-index: 7; transition: none; }
.tk.is-held .tk-back { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.14)) drop-shadow(0 26px 22px rgba(0, 0, 0, 0.3)); }
.tk.is-ghost { z-index: 8; opacity: 0.5; pointer-events: none; transition: none; }
.tk.is-ghost .tk-tools { display: none; }
.tk.is-offstage { visibility: hidden; pointer-events: none; }
.tk.is-new { animation: tk-land 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes tk-land { from { opacity: 0.4; transform: rotate(var(--r)) translateY(-16px) scale(1.04); } }
.tk-back { position: absolute; inset: 0; z-index: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2)); transition: filter 0.25s ease; }
.tk:has(.tk-text:focus) .tk-back { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12)) drop-shadow(0 20px 18px rgba(0, 0, 0, 0.28)); }
.tk-paper { position: absolute; inset: 0; overflow: hidden; }
/* (the grain is one small tile, grain.png: a live noise filter on every ticket was too heavy for a phone) */
.tk-grain { position: absolute; inset: 0; background: url("grain.png") 0 0 / 200px 200px repeat; pointer-events: none; }
/* what is written: in the ticket's own hand and ink, a little into the paper (stronger than the maker's fields) */
.tickets .tk .tk-text { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; max-height: none; resize: none; overflow: hidden; margin: 0; padding: 14px 14px 10px; border: 0; border-radius: 0; outline: none; background: transparent !important; box-shadow: none !important; color: inherit; text-shadow: 0 0 0.6px currentColor; user-select: text; -webkit-user-select: text; }
.tickets .tk .tk-text::placeholder { color: currentColor; opacity: 0.36; }
.tickets .hand-caveat { font: 700 1.4rem/26px "Caveat", "Segoe Print", cursive; }
/* (every hand chosen to be read at a glance: "make the handwritings very readable", 2026-10-17) */
.tickets .hand-soon { font: 400 1.12rem/1.4 "Coming Soon", "Segoe Print", cursive; }
.tickets .hand-patrick { font: 400 1.25rem/1.3 "Patrick Hand", "Segoe Print", cursive; }
.tickets .hand-kalam { font: 400 1.05rem/22px "Kalam", "Segoe Print", cursive; }
.tickets .hand-gaegu { font: 700 1.55rem/1.05 "Gaegu", "Segoe Print", cursive; }
.tickets .hand-gochi { font: 400 1.12rem/23px "Gochi Hand", "Segoe Print", cursive; }
.tickets .hand-marker { font: 400 1.45rem/1.25 "Permanent Marker", "Segoe Print", cursive; }
.tickets .hand-handlee { font: 400 1.12rem/1.45 "Handlee", "Segoe Print", cursive; }
.tickets .hand-chalk { font: 400 1.1rem/1.45 "Architects Daughter", "Segoe Print", cursive; }
.tickets .hand-indie { font: 400 1.12rem/22px "Indie Flower", "Segoe Print", cursive; }
.tickets .hand-shadows { font: 400 1.15rem/1.3 "Shadows Into Light Two", "Segoe Print", cursive; }
.tickets .hand-pencil { font: 500 0.95rem/1.35 "Mali", "Segoe Print", cursive; }
.tickets .hand-tapehand { font: 700 1.7rem/1.1 "Amatic SC", "Segoe Print", cursive; }
/* the decorations drawn on the paper (lines, holes, perforations, the tray): over it, under the words */
.tk::before, .tk::after { z-index: 1; pointer-events: none; }

/* the clips (what is drawn of one is where the ticket is taken hold of, to move it) */
.tk-clip { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28)); }
.tk-clip svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tk-clip svg > *, .clip-tape, .clip-tapes i { pointer-events: auto; cursor: grab; }
.tk-clip svg > ellipse { pointer-events: none; }
.tk.is-held, .tk.is-held * { cursor: grabbing !important; }
/* its tools, beside it while the pointer is on it: move, copy (to paste anywhere), take away */
.tk-tools { position: absolute; left: 100%; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 0 0 6px 8px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.tk:hover .tk-tools, .tk:focus-within .tk-tools { opacity: 1; pointer-events: auto; }
.tk.is-held .tk-tools { opacity: 0; }
.tk-tool { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 6px 14px -8px rgba(var(--shade), 0.6); }
.tk-tool:hover { background: var(--wash); }
.tk-tool.is-move { cursor: grab; touch-action: none; }
.tk-tool.is-remove:hover { color: var(--accent); }
.tk-tool svg { flex: none; max-width: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.clip-paperclip { left: 16px; top: -22px; width: 16px; height: 46px; transform: rotate(-8deg); }
.clip-bulldog { left: 50%; top: -20px; width: 56px; height: 42px; transform: translateX(-50%); }
.clip-peg { left: 50%; top: -32px; width: 17px; height: 52px; transform: translateX(-50%) rotate(3deg); }
.clip-pin { left: 50%; top: -12px; width: 24px; height: 30px; transform: translateX(-50%); }
.clip-pins { left: 0; right: 0; top: -10px; height: 30px; }
.clip-magnets { left: 0; right: 0; top: 2px; height: 26px; }
.clip-twine { left: 50%; top: -76px; width: 40px; height: 100px; transform: translateX(-50%); }
.clip-nail { left: 0; right: 0; top: -44px; height: 52px; filter: none; }
.clip-tape, .clip-tapes i { background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.03)), rgba(238, 229, 205, 0.68); clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 20% 6%, 80% 4%, 86% 0, 92% 8%, 97% 1%, 100% 9%, 100% 92%, 95% 100%, 89% 91%, 83% 99%, 78% 94%, 20% 96%, 14% 100%, 8% 91%, 3% 98%, 0 90%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }
.clip-tape { left: 50%; top: -12px; width: 74px; height: 24px; transform: translateX(-50%) rotate(-4deg); }
.clip-tapes { inset: 0; filter: none; }
.clip-tapes i { position: absolute; top: -8px; width: 58px; height: 20px; }
.clip-tapes i:first-child { left: -16px; transform: rotate(-32deg); }
.clip-tapes i:last-child { right: -16px; transform: rotate(32deg); }

/* the whiteboard: gloss, the ghost of something wiped, its frame and tray, blue marker */
.tk-board { color: #1F4AA8; }
.tk-board .tk-paper { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.7) 38%, transparent 47%), radial-gradient(ellipse 34% 16% at 70% 68%, rgba(110, 120, 140, 0.09), transparent 70%), radial-gradient(ellipse 22% 10% at 30% 82%, rgba(31, 74, 168, 0.06), transparent 70%), linear-gradient(160deg, #FFFFFF 0%, #F3F5F6 55%, #E8EBED 100%); border: 8px solid; border-image: linear-gradient(180deg, #EEF1F3, #9FA8B0) 1; }
.tk-board .tk-grain { opacity: 0.25; }
.tickets .tk-board .tk-text { padding: 30px 22px 24px; }
.tk-board::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -10px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #C5CBD0, #8C949B); box-shadow: 0 3px 4px -2px rgba(0, 0, 0, 0.35); }
.tk-board::before { content: ""; position: absolute; right: 22%; bottom: -9px; z-index: 2; width: 92px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #B8323A 0 14%, #F4F4F2 14% 48%, transparent 48% 52%, #1E1E1E 52% 66%, #F4F4F2 66%); }
/* an index card: its red head line and blue rules, a little yellowed at the edges */
.tk-card { color: #23232A; }
.tk-card .tk-paper { background: repeating-linear-gradient(180deg, transparent 0 25px, #A9C1E0 25px 26px) 0 32px / 100% calc(100% - 32px) no-repeat, #FFFDF5; box-shadow: inset 0 0 22px rgba(170, 140, 70, 0.1); }
.tk-card::before { content: ""; position: absolute; left: 0; right: 0; top: 31px; border-top: 1.5px solid #E58A93; }
.tickets .tk-card .tk-text { padding: 5px 14px 8px; }
/* a postcard: the message on the left; on the right, the address lines, the stamp and its postmark */
.tk-postcard { color: #4A3527; }
.tk-postcard .tk-paper { background: linear-gradient(90deg, transparent calc(54% - 1px), rgba(90, 70, 50, 0.35) calc(54% - 1px) 54%, transparent 54%), repeating-linear-gradient(180deg, transparent 0 20px, rgba(90, 70, 50, 0.32) 20px 21px) right 12px bottom 16px / 38% 64px no-repeat, #F5EEDC; box-shadow: inset 0 0 26px rgba(150, 110, 60, 0.12); }
.tickets .tk-postcard .tk-text { padding: 14px 49% 10px 14px; }
.tk-stamp { position: absolute; right: 10px; top: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 42px; background: #922532; color: #F5EEDC; font-size: 18px; border: 3px dotted #F5EEDC; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); transform: rotate(4deg); pointer-events: none; }
.tk-postmark { position: absolute; right: 30px; top: 22px; z-index: 1; width: 74px; height: 37px; color: rgba(55, 55, 80, 0.45); transform: rotate(-9deg); pointer-events: none; }
/* a kraft tag on twine, its punched hole ringed */
.tk-tag { color: #3B2A1A; }
.tk-tag .tk-paper { background: radial-gradient(ellipse 80% 40% at 30% 70%, rgba(255, 255, 255, 0.07), transparent 70%), linear-gradient(175deg, #D2AE86 0%, #BE956A 100%); clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.tk-tag::before { content: ""; position: absolute; left: 50%; top: 13px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 4px #EADCC4, 0 0 0 5px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.tickets .tk-tag .tk-text { padding: 40px 12px 12px; }
/* a long slip, for an article: it scrolls as it fills; its foot torn */
.tk-slip { color: #24408F; }
.tk-slip .tk-paper { background: repeating-linear-gradient(180deg, transparent 0 21px, #E2DCCF 21px 22px) 0 38px / 100% calc(100% - 38px) no-repeat, #FFFEF8; clip-path: polygon(0 0, 100% 0, 100% 97.5%, 92% 100%, 84% 98%, 75% 100%, 66% 98%, 58% 100%, 50% 98%, 41% 100%, 33% 98%, 24% 100%, 16% 98%, 8% 100%, 0 98%); }
.tickets .tk-slip .tk-text { padding: 28px 10px 22px; }
/* a chalkboard on a nail: its dust, its wooden frame, chalk */
.tk-chalk { color: #F6F5EE; }
.tk-chalk .tk-paper { background: radial-gradient(ellipse 45% 30% at 30% 40%, rgba(255, 255, 255, 0.07), transparent 70%), radial-gradient(ellipse 30% 20% at 75% 72%, rgba(255, 255, 255, 0.06), transparent 70%), linear-gradient(160deg, #34443A, #232E28); border: 8px solid; border-image: linear-gradient(135deg, #AE7D4A, #6B4724) 1; }
.tk-chalk .tk-grain { mix-blend-mode: screen; opacity: 0.6; }
.tickets .tk-chalk .tk-text { padding: 18px 16px 10px; text-shadow: 0 0 0.8px rgba(255, 255, 255, 0.6); }
/* a sheet from a legal pad, for an article: yellow, blue rules, a double red margin, its top torn off */
.tk-legal { color: #2B3A8A; }
.tk-legal .tk-paper { background: linear-gradient(90deg, transparent 30px, #E3878F 30px 31px, transparent 31px 34px, #E3878F 34px 35px, transparent 35px), repeating-linear-gradient(180deg, transparent 0 21px, #8FB0D8 21px 22px) 0 40px / 100% calc(100% - 40px) no-repeat, #FBF2B0; clip-path: polygon(0 1.5%, 6% 0, 12% 1.2%, 19% 0.2%, 26% 1.4%, 33% 0.3%, 40% 1.3%, 47% 0, 54% 1.2%, 61% 0.2%, 68% 1.4%, 75% 0.3%, 82% 1.2%, 89% 0, 95% 1.3%, 100% 0.4%, 100% 100%, 0 100%); }
.tickets .tk-legal .tk-text { padding: 23px 12px 12px 42px; }
/* the back of a receipt: thermal white, printed, its edges torn */
.tk-receipt { color: #1C1C1C; }
.tk-receipt .tk-paper { background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.04)), #FCFCF9; clip-path: polygon(0 1.5%, 8% 0, 16% 1.5%, 25% 0, 33% 1.5%, 41% 0, 50% 1.5%, 58% 0, 66% 1.5%, 75% 0, 83% 1.5%, 91% 0, 100% 1.5%, 100% 98.5%, 91% 100%, 83% 98.5%, 75% 100%, 66% 98.5%, 58% 100%, 50% 98.5%, 41% 100%, 33% 98.5%, 25% 100%, 16% 98.5%, 8% 100%, 0 98.5%); }
.tk-receipt .tk-printed { position: absolute; z-index: 1; left: 0; right: 0; top: 16px; font: 600 0.6rem/1 Consolas, "Courier New", monospace; letter-spacing: 0.24em; text-transform: uppercase; text-align: center; color: rgba(40, 40, 40, 0.5); pointer-events: none; }
.tk-receipt::before { content: ""; position: absolute; left: 10px; right: 10px; top: 32px; border-top: 1px dashed rgba(40, 40, 40, 0.32); }
.tickets .tk-receipt .tk-text { padding: 40px 10px 10px; }
/* a sticky note (and a rose one): its lifted foot and turned corner */
.tk-sticky { color: #1E1E1E; }
.tk-sticky.is-rose { color: #8E1F2B; }
.tk-sticky .tk-paper { background: linear-gradient(170deg, #FCF1B8 0%, #F5E192 100%); box-shadow: inset 0 -16px 14px -14px rgba(0, 0, 0, 0.14); }
.tk-sticky.is-rose .tk-paper { background: linear-gradient(170deg, #F9E0E3 0%, #EFC4C9 100%); }
.tk-sticky .tk-back { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 9px rgba(0, 0, 0, 0.24)); }
.tk-sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.08) 50%, rgba(255, 255, 255, 0.6) 80%); }
.tickets .tk-sticky .tk-text { padding: 16px 12px; }
/* a page from a reporter's notebook: its spiral holes, rules, its foot torn */
.tk-page { color: #1F2E5C; }
.tk-page .tk-paper { background: repeating-linear-gradient(180deg, transparent 0 22px, #BFD0E6 22px 23px) 0 30px / 100% calc(100% - 30px) no-repeat, #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% 95%, 92% 98%, 83% 94%, 74% 99%, 64% 95%, 55% 98%, 46% 94%, 37% 99%, 28% 95%, 19% 98%, 10% 94%, 0 98%); }
.tk-page::after { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 8px; background: radial-gradient(circle 3px at 7px 4px, var(--bg) 2.4px, rgba(0, 0, 0, 0.28) 3px, transparent 3.6px) 0 0 / 14px 8px repeat-x; }
.tickets .tk-page .tk-text { padding: 26px 10px 16px; }
/* a ticket stub: notched at its sides, perforated, printed */
.tk-stub { color: #3A2716; }
.tk-stub .tk-paper { background: radial-gradient(ellipse 60% 80% at 30% 40%, rgba(255, 255, 255, 0.18), transparent 70%), #F2E3C5; clip-path: polygon(0 0, 100% 0, 100% calc(50% - 10px), calc(100% - 7px) calc(50% - 7px), calc(100% - 10px) 50%, calc(100% - 7px) calc(50% + 7px), 100% calc(50% + 10px), 100% 100%, 0 100%, 0 calc(50% + 10px), 7px calc(50% + 7px), 10px 50%, 7px calc(50% - 7px), 0 calc(50% - 10px)); }
.tk-stub::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 74%; border-left: 2px dashed rgba(122, 80, 40, 0.35); }
.tickets .tk-stub .tk-text { padding: 18px 30% 6px 20px; }
.tk-stub .tk-printed { position: absolute; z-index: 1; right: 9%; top: 12%; bottom: 12%; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; font: 700 0.55rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(146, 37, 50, 0.72); white-space: nowrap; pointer-events: none; }
.tk-stub .clip-pin { left: 38%; }
/* a fortune's slip, in pencil */
.tk-fortune { color: #34343B; }
.tk-fortune .tk-paper { background: linear-gradient(180deg, transparent 4px, #C9353C 4px 5px, transparent 5px calc(100% - 5px), #C9353C calc(100% - 5px) calc(100% - 4px), transparent calc(100% - 4px)), #FFFFFA; }
.tickets .tk-fortune .tk-text { padding: 7px 12px 2px; text-align: center; text-shadow: 0 0 0.4px rgba(0, 0, 0, 0.4); }
/* a strip of masking tape, written on in marker */
.tk-tapelabel { color: #141414; }
.tk-tapelabel .tk-paper { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.03)), #E8DCBD; clip-path: polygon(0 10%, 2% 0, 98% 4%, 100% 14%, 98.5% 30%, 100% 48%, 98% 66%, 100% 86%, 98% 100%, 2% 96%, 0 84%, 1.5% 66%, 0 48%, 1.6% 30%); }
.tk-tapelabel .tk-back { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14)); }
.tickets .tk-tapelabel .tk-text { padding: 8px 14px 0; }

/* signed, every one, Amoris Gratia, in the cards' own signature and the ticket's own ink; under what is
   written, with room kept for it at the foot (the ticket grows above it as it is written on) */
.tk-sign { position: absolute; right: 14px; bottom: 7px; z-index: 1; font: 400 1.45rem/1 "Mrs Saint Delafield", "Segoe Script", "Brush Script MT", cursive; color: currentColor; opacity: 0.8; white-space: nowrap; transform: rotate(-4deg); transform-origin: 100% 100%; pointer-events: none; }
.tickets .tk .tk-text { padding-bottom: 32px; }
.tk-board .tk-sign { right: 24px; bottom: 15px; }
.tickets .tk-board .tk-text { padding-bottom: 44px; }
.tk-postcard .tk-sign { right: calc(46% + 12px); bottom: 9px; }
.tickets .tk-postcard .tk-text { padding-bottom: 34px; }
.tk-tag .tk-sign { right: 10px; bottom: 9px; }
.tickets .tk-tag .tk-text { padding-bottom: 34px; }
.tk-slip .tk-sign { right: 10px; bottom: 15px; }
.tickets .tk-slip .tk-text { padding-bottom: 44px; }
.tk-chalk .tk-sign { right: 18px; bottom: 13px; opacity: 0.85; }
.tickets .tk-chalk .tk-text { padding-bottom: 40px; }
.tickets .tk-legal .tk-text { padding-bottom: 36px; }
.tk-receipt .tk-sign, .tk-sticky .tk-sign { right: 10px; }
.tk-page .tk-sign { right: 10px; bottom: 14px; }
.tickets .tk-page .tk-text { padding-bottom: 40px; }
.tk-stub .tk-sign { right: auto; left: 20px; bottom: 4px; font-size: 1.2rem; transform-origin: 0 100%; }
.tickets .tk-stub .tk-text { padding-bottom: 22px; }
.tk-fortune .tk-sign { right: 10px; bottom: 6px; font-size: 1.1rem; transform: rotate(-2deg); }
.tickets .tk-fortune .tk-text { padding: 7px 86px 6px 12px; }
.tk-tapelabel .tk-sign { right: 14px; bottom: 8px; font-size: 1.3rem; transform: rotate(-2deg); }
.tickets .tk-tapelabel .tk-text { padding: 8px 108px 4px 14px; }

/* on a phone or a tablet: a drag anywhere moves the space; a tap opens a ticket (its words take the touch
   only then); its tools are its bar, at the top */
.tickets.is-touch .tk { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.tickets.is-touch .tk .tk-text { pointer-events: none; }
.tickets.is-touch .tk.is-open .tk-text { pointer-events: auto; }
.tickets.is-touch .tk-tools { display: none; }
.tk-bar { position: absolute; left: 50%; top: 10px; z-index: 10; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); box-shadow: 0 10px 26px -14px rgba(var(--shade), 0.6); transform: translateX(-50%); }
.tk-bar[hidden] { display: none; }
.tk-bar-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 0.875rem/1 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-bar-btn:active { background: var(--wash); }
.tk-bar-btn.is-done { background: var(--ink); color: var(--surface); }
.tk-bar-btn.is-remove { padding: 0 11px; color: var(--muted); }
.tk-bar-btn svg { flex: none; max-width: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tickets.is-touch .tk-note { top: 62px; }
/* emojis to put on a ticket: beside the button pressed (on a phone, under its bar) */
.tk-emoji { position: absolute; z-index: 11; display: grid; grid-template-columns: repeat(8, 38px); gap: 2px; padding: 8px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: 0 14px 34px -16px rgba(var(--shade), 0.6); }
.tk-emoji[hidden] { display: none; }
.tk-emoji.is-top { left: 50%; top: 62px; transform: translateX(-50%); grid-template-columns: repeat(8, 40px); }
.tk-emoji-btn { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; background: none; font: 22px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-emoji-btn:hover, .tk-emoji-btn:active { background: var(--wash); }

/* a ticket, to WhatsApp Status: the picture(s) to see first, then the ways to the Status */
.tk-share { text-align: left; width: min(26rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink); padding: 16px 20px 20px; box-shadow: 0 24px 64px -24px rgba(var(--shade), 0.45); overscroll-behavior: contain; }
.tk-share:focus { outline: none; }
.tk-share::backdrop { background: rgba(var(--shade), 0.4); }
.tk-share-head .close { margin-right: -8px; }
.tk-share-pics { display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 120px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.tk-share-pics img { flex: none; display: block; width: auto; height: min(46dvh, 420px); border-radius: 10px; box-shadow: 0 10px 26px -14px rgba(var(--shade), 0.6); scroll-snap-align: center; -webkit-touch-callout: default; }
.tk-share-pics.is-many { justify-content: flex-start; }
.tk-share-making { align-self: center; margin: 0; padding: 40px 0; color: var(--muted); font: 500 0.875rem/1.4 var(--sans); }
.tk-share-meta { margin: 12px 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.tk-share-go { width: 100%; min-height: 48px; margin-top: 12px; font-size: 1rem; border-radius: 12px; }
.tk-share-hint { margin: 10px 0 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.tk-share-hint:empty { display: none; }
.tk-share-sub { margin: 14px 0 8px; font: 700 0.9375rem/1.2 var(--sans); }
.tk-share-qr { display: block; border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); }
.tk-share-qr-note { margin: 8px 0 0; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.45; }
.tk-share-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tk-share-more .pill-btn[disabled] { opacity: 0.45; cursor: default; }
/* on a computer: the picture on the left, the ways to share it on the right, the whole within a laptop's height */
@media (min-width: 760px) {
  .tk-share[open] { display: grid; width: min(46rem, calc(100vw - 48px)); grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: start; }
  .tk-share-head { grid-column: 1 / -1; }
  .tk-share-pics { grid-column: 1; max-width: 330px; justify-content: flex-start; }
  .tk-share-pics img { height: min(66dvh, 470px); }
  .tk-share-side { grid-column: 2; }
}

/* a word on how (bottom left), and a word now and then (copied: click anywhere to paste) */
.tk-hint { position: absolute; left: 18px; bottom: 14px; z-index: 5; margin: 0; max-width: calc(100% - 260px); font: 600 1.1rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); pointer-events: none; }
.tk-note { position: absolute; left: 50%; top: 14px; z-index: 9; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 500 0.8125rem/1.3 var(--sans); transform: translateX(-50%); box-shadow: 0 8px 24px -12px rgba(var(--shade), 0.5); pointer-events: none; }
.tk-note[hidden] { display: none; }
@media (max-width: 640px) {
  .tk-hint { display: none; }
}

/* ---- Build: big threads tied between knots in a wide open space (weave.js); it pans and zooms ---- */
.slate.is-weave { display: block; position: relative; overflow: hidden; }
.slate.is-weave .slate-title, .slate.is-weave .slate-sub { display: none; }
.weave { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; }
.weave[hidden] { display: none; }
.weave.is-grab { cursor: grab; }
.weave.is-panning, .weave.is-panning * { cursor: grabbing !important; }
.weave-world { position: absolute; left: 0; top: 0; width: 8000px; height: 5000px; transform-origin: 0 0; background-image: radial-gradient(circle, var(--rule) 1.5px, transparent 2px); background-size: 56px 56px; }
.weave-svg { display: block; overflow: visible; }
/* a thread: rope, its shadow on the page, its twist */
.wv-shade { fill: none; stroke: rgba(0, 0, 0, 0.16); stroke-width: 12; stroke-linecap: round; transform: translate(0, 8px); }
.wv-rope { fill: none; stroke: #8A6943; stroke-width: 10; stroke-linecap: round; }
.wv-twist { fill: none; stroke: #CDAA79; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 2.5 8.5; }
.wv-rope.is-pulled { stroke: #A07A4E; opacity: 0.85; }
.wv-hit { fill: none; stroke: transparent; stroke-width: 28; pointer-events: stroke; cursor: pointer; }
.wv-thread.is-picked .wv-rope { stroke: var(--accent); }
.wv-thread.is-picked .wv-twist { stroke: #F2AFBD; }
/* a knot: the ball (drag it to move it), its ring (pull a thread out of it) */
.wv-ring { fill: rgba(255, 255, 255, 0.001); stroke: var(--accent); stroke-opacity: 0; stroke-width: 2.5; stroke-dasharray: 5 6; cursor: crosshair; pointer-events: all; transition: stroke-opacity 0.15s ease; }
.wv-knot:hover .wv-ring, .wv-knot.is-target .wv-ring { stroke-opacity: 0.6; }
.wv-knot.is-target .wv-ring { stroke-dasharray: none; }
.wv-ball { fill: var(--accent); cursor: grab; }
.wv-knot-shade { fill: rgba(0, 0, 0, 0.18); pointer-events: none; }
.wv-shine { fill: rgba(255, 255, 255, 0.5); pointer-events: none; }
.wv-knot.is-picked .wv-ball { stroke: var(--surface); stroke-width: 3; filter: drop-shadow(0 0 6px var(--accent)); }
.weave-del { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 1rem/1 var(--sans); cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5); }
.weave-del[hidden] { display: none; }
/* its bar: the configurations to start from */
.weave-bar { position: absolute; left: 16px; top: 14px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px 6px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 22px -14px rgba(var(--shade), 0.5); }
.weave-bar-title { margin-right: 4px; font: 700 1.6rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink); }
.weave-hint { position: absolute; left: 18px; bottom: 14px; z-index: 5; margin: 0; max-width: calc(100% - 260px); font: 600 1.1rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); pointer-events: none; }
@media (max-width: 640px) {
  .weave-bar { left: 8px; right: 8px; border-radius: 16px; }
  .weave-hint { display: none; }
}

/* ---- Build (walls.js): 2026-10-17 "everything should be empty ... plane walls where i can stick anything. draw
   and just do stuff"; 2026-10-24 "take off the window lets work on the freespace", "on the side like the thoughts
   section. add options for atom and byte": two free spaces, Atom and Byte, chosen from the Thought page's bar
   (.tsec-bar, its look); each a beach of sand that goes on as far as you go, drawn in and stuck with things.
   --inv counter-scales what should keep its size on the screen (the ×s). ---- */
.slate.is-build { display: block; position: relative; overflow: hidden; }
.slate.is-build .slate-title, .slate.is-build .slate-sub { display: none; }
.bw { position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; }
.bw[hidden] { display: none; }
.bw.is-grab { cursor: grab; }
.bw.is-panning, .bw.is-panning * { cursor: grabbing !important; }
.bw-world { position: absolute; left: 0; top: 0; width: 16000px; height: 12000px; transform-origin: 0 0; }
/* the sand (2026-10-24: "the board is a beach sand you can draw and build on"; 2026-10-25: "sand, get picture from
   real beach sand", then "the sand should be a wate beach sand with footprints. with a childs hand drawing stuff on
   it", "the childs hand is simply an how the drawing looks on the sand not the literal hand"): a real beach's wet sand
   by the water, Poly Haven's "Damp Beach Sand" (Dimitrios Savva, CC0: 2 x 2 m, seamless), lit by its own surface from
   the top left with a wet sheen; a tile 1024px (about 2 mm a pixel, so a finger's groove is a finger's width); at
   night, the same sand under the moon. Footprints walked across it (walls.js walked(): a real print's hollow,
   foot.webp, from Saral Shots' photo, CC0). Drawn in anywhere, each line the groove a child's finger leaves (walls.js
   GROOVE: the ridge it heaps either side with crumbs on it, its bed dark and wet, the shade down the side nearest the
   light and a wet shine on the other); things stuck on it (its name, large, while it is bare). Credits: the link at
   its foot. The pictures carry their contents' stamp (?v=, the first 10 of its sha1; tools/beach makes them): a
   picture changed needs a new one, or Cloudflare and browsers keep the old for a day */
.bw {
  --sand: #928267; --sand-grain: url("sand.jpg?v=21ef4bc84d"); --sand-print: 0.92; --thing-light: none;
  --sand-rim: rgba(255, 246, 228, 0.3); --sand-bed: rgba(58, 44, 28, 0.46); --sand-shade: rgba(32, 22, 12, 0.46); --sand-glint: rgba(255, 248, 232, 0.4);
  --sand-crumb: rgba(255, 244, 222, 0.5); --sand-crumb-shade: rgba(40, 28, 14, 0.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bw {
    --sand: #3F3F47; --sand-grain: url("sand-night.jpg?v=9268ef8fb0"); --sand-print: 0.7; --thing-light: brightness(0.45) saturate(0.5);
    --sand-rim: rgba(196, 202, 222, 0.14); --sand-bed: rgba(8, 8, 14, 0.5); --sand-shade: rgba(0, 0, 0, 0.5); --sand-glint: rgba(206, 212, 234, 0.3);
    --sand-crumb: rgba(196, 202, 222, 0.24); --sand-crumb-shade: rgba(0, 0, 0, 0.42);
  }
}
:root[data-theme="dark"] .bw {
  --sand: #3F3F47; --sand-grain: url("sand-night.jpg?v=9268ef8fb0"); --sand-print: 0.7; --thing-light: brightness(0.45) saturate(0.5);
  --sand-rim: rgba(196, 202, 222, 0.14); --sand-bed: rgba(8, 8, 14, 0.5); --sand-shade: rgba(0, 0, 0, 0.5); --sand-glint: rgba(206, 212, 234, 0.3);
  --sand-crumb: rgba(196, 202, 222, 0.24); --sand-crumb-shade: rgba(0, 0, 0, 0.42);
}
/* (endless: the face keeps no edge; the sand under the tiles in reach, laid as the view moves: walls.js lay()) */
.bw-face { position: absolute; inset: 0; overflow: visible; cursor: crosshair; }
/* (its grain: the sand's tile; over it broad wetter and drier patches on a period of their own, so the tile's repeat
   doesn't show from further off: sand-mottle.png; both kept where they lie on the beach: walls.js lay()) */
.bw-sand { position: absolute; background: url("sand-mottle.png?v=9281e5f222") 0 0 / 3700px 3700px repeat, var(--sand-grain) 0 0 / 1024px 1024px repeat, var(--sand); }
.bw-face.is-drop .bw-sand::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; }
.bw-prints { position: absolute; inset: 0; pointer-events: none; opacity: var(--sand-print); }
.bw-prints i { position: absolute; width: 100px; height: 159px; margin: -80px 0 0 -50px; background: url("foot.webp?v=3351474b21") 0 0 / 100% 100% no-repeat; }
/* what lies on the beach: rocks, plants, a shell, driftwood, tiny pools, dug holes with minerals (real scans and photos:
   beachthings.js); over the drawing (a line runs under a rock, into a pool), under what is stuck; moonlit by night */
.bw-beach { position: absolute; inset: 0; pointer-events: none; }
/* Eden (walls.js layEden; tools/beach/eden): its tiles on the sand, under the footprints and the drawing; the nearer
   over the far; moonlit by night as the beach's things are */
.bw-eden { position: absolute; inset: 0; pointer-events: none; }
.bw-eden-tile { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; filter: var(--thing-light); }
.bw-eden-tile.is-l2 { z-index: 1; }
.bw-eden-tile.is-l3 { z-index: 2; }
/* (the beach's layers in their order, set: under a far view's edge Chrome painted the sand over Eden) */
/* (its koi over its water, each its shadow on the bed under it; walls.js swims them) */
.bw-koi-school { position: absolute; inset: 0; z-index: 3; filter: var(--thing-light); }
.bw-koi-school[hidden] { display: none; }
.bw-koi { position: absolute; left: 0; top: 0; width: 500px; height: 170px; margin: -85px 0 0 -250px; background: 0 0 / 600% 100% no-repeat; filter: drop-shadow(58px 66px 16px rgba(0, 24, 22, 0.34)) saturate(0.94); will-change: transform; }
.bw-sand { z-index: 0; } .bw-prints { z-index: 1; } .bw-ink { z-index: 2; } .bw-eden { z-index: 3; } .bw-beach { z-index: 4; } .bw-items { z-index: 5; } .bw-blank { z-index: 6; }
/* (what is drawn in the sand goes under Eden, not over its garden: 2026-10-26, "the writing should not be on the eden") */
.bw-thing { position: absolute; display: block; max-width: none; filter: var(--thing-light); user-select: none; -webkit-user-drag: none; }
.bw-thing > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* water (a pool, a dug hole's): the real sky on it, seen through its outline and added to what shows through it (a
   reflection adds light: screen), drifting (walls.js thingEl: by one width of itself, it joins itself there); by
   night hardly there; its glints shimmering in turn */
.bw { --sky-on: 0.55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bw { --sky-on: 0.12; } }
:root[data-theme="dark"] .bw { --sky-on: 0.12; }
.bw-sky { position: absolute; inset: 0; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mix-blend-mode: screen; opacity: var(--sky-on); }
.bw-sky i { position: absolute; left: 0; top: -10%; display: block; background: url("beach/sky-reflect.jpg?v=95ec2a5ef8") 0 0 / auto 100% repeat-x; animation: bw-drift linear infinite; }
@keyframes bw-drift { to { transform: translateX(var(--drift)); } }
.bw-thing .bw-glint-1 { animation: bw-shimmer 3.2s ease-in-out infinite alternate; }
.bw-thing .bw-glint-2 { animation: bw-shimmer 3.2s ease-in-out infinite alternate-reverse; }
@keyframes bw-shimmer { from { opacity: 0.15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bw-thing [class^="bw-glint"], .bw-sky i { animation: none; } .bw-thing .bw-glint-2 { display: none; } }
.bw-ink { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; stroke: none; }
.bw-rim { fill: var(--sand-rim); }
.bw-crumb-shade { fill: var(--sand-crumb-shade); }
.bw-crumb { fill: var(--sand-crumb); }
.bw-bed { fill: var(--sand-bed); }
.bw-shade { fill: var(--sand-shade); }
.bw-glint { fill: var(--sand-glint); }
/* whose the beach is (as Music's sea: .mu-credits) */
.bw-credits { position: absolute; left: 14px; bottom: 40px; z-index: 5; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: color-mix(in srgb, var(--ink) 62%, transparent); font: 600 0.72rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bw-credits:hover, .bw-credits[aria-expanded="true"] { color: var(--ink); }
/* the way to Eden: a sign at the view's edge, its arrow pointing there (walls.js signEden), dressed as the tools */
.bw-to-eden { position: absolute; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.9rem/1 var(--sans); box-shadow: 0 8px 20px -12px rgba(var(--shade), 0.6); transform: translate(-50%, -50%); cursor: pointer; }
.bw-to-eden[hidden] { display: none; }
.bw-to-eden:hover, .bw-to-eden:focus-visible { background: var(--wash-2); }
.bw-to-eden svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--a, 0rad)); }
.bw-credit-list { position: absolute; left: 14px; bottom: 68px; z-index: 30; width: min(440px, calc(100% - 28px)); max-height: min(60%, 420px); overflow-y: auto; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 0.78rem/1.45 var(--sans); text-align: left; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); }
.bw-credit-list[hidden] { display: none; }
.bw-credit-list h3 { margin: 0 0 4px; font: 700 0.86rem/1.3 var(--sans); }
.bw-credit-list p { margin: 0 0 8px; color: var(--muted); }
.bw-credit-list ul { margin: 0; padding-left: 18px; }
.bw-credit-list a { color: inherit; }
@media (max-width: 640px) { .bw-credits { bottom: 14px; } .bw-credit-list { bottom: 42px; } }
.bw-items { position: absolute; inset: 0; pointer-events: none; }
.bw-items > * { pointer-events: auto; }
.bw-blank { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font: 600 2rem/1.2 "Caveat", "Segoe Print", cursive; color: var(--muted); text-align: center; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity 0.3s ease; }
.bw-blank-name { display: block; font-size: 4.2rem; line-height: 1; color: var(--ink-2); }
/* ---- Byte's ground (walls.js initRain; 2026-10-27, the founder: "for the bytes in the build section, make the bg ones
   and zeros streaming at a fast pace"): ones and zeros streaming behind it, no beach, no Eden; its lines glowing green as
   the digits do, its words light on the dark ---- */
.bw-rain { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.bw-rain[hidden] { display: none; }
.bw[data-part="byte"] { background: #020806; }
.bw[data-part="byte"] :is(.bw-sand, .bw-prints, .bw-eden, .bw-beach, .bw-to-eden, .bw-credits, .bw-credit-list) { display: none; }
:root .bw[data-part="byte"] {
  --sand-rim: rgba(90, 255, 150, 0.22); --sand-crumb: rgba(120, 255, 170, 0.3); --sand-crumb-shade: rgba(0, 0, 0, 0);
  --sand-bed: rgba(70, 255, 140, 0.92); --sand-shade: rgba(0, 0, 0, 0.35); --sand-glint: rgba(225, 255, 236, 0.7);
}
.bw[data-part="byte"] .bw-blank { color: rgba(184, 255, 210, 0.85); }
.bw[data-part="byte"] .bw-blank-name { color: #c8ffdc; }
.bw[data-part="byte"] .bw-hint { color: rgba(184, 255, 210, 0.75); }
.bw-face.is-blank .bw-blank { opacity: 0.55; }
/* its tools, on the screen at the top right */
.bw-tools { position: absolute; top: 12px; right: 14px; z-index: 6; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); box-shadow: 0 8px 20px -12px rgba(var(--shade), 0.6); }
.bw-tool { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.bw-tool:hover, .bw-tool:focus-visible { background: var(--wash-2); color: var(--ink); }
.bw-tool svg, .bw-x svg, .bw-play svg, .bw-clipmark svg { flex: none; max-width: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* what is stuck on it */
.bw-item { position: absolute; cursor: grab; transform: rotate(var(--r, 0deg)); }
.bw-item:active { cursor: grabbing; }
.bw-item.is-picked { outline: 2px solid var(--accent); outline-offset: 5px; }
.bw-item img, .bw-item video { display: block; width: 100%; height: 100%; object-fit: cover; border: 5px solid #FBF8F1; border-radius: 2px; background: #EFE6D6; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5); pointer-events: none; }
.bw-tape { position: absolute; left: 50%; top: -11px; z-index: 1; width: 68px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(236, 224, 196, 0.8); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.bw-clipmark { position: absolute; left: 10px; bottom: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #FFF; pointer-events: none; }
.bw-clipmark .i-pause { display: none; }
.bw-x { position: absolute; right: -11px; top: -11px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; opacity: 0; transform: scale(clamp(1, calc(var(--inv, 1) * 0.7), 3)); transition: opacity 0.15s ease; }
.bw-x svg { width: 13px; height: 13px; stroke-width: 2.4; }
.bw-item:hover .bw-x, .bw-item.is-picked .bw-x, .bw-x:focus-visible { opacity: 1; }
.bw-size { position: absolute; right: -7px; bottom: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: nwse-resize; opacity: 0; transition: opacity 0.15s ease; }
.bw-item:hover .bw-size, .bw-item.is-picked .bw-size { opacity: 1; }
@media (hover: none) { .bw-x, .bw-size { opacity: 1; } }
/* a sound ticket: a cinema ticket, punched at both ends, a play button on it */
.bw-ticket { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: center; column-gap: 12px; width: 100%; height: 100%; padding: 12px 22px; box-sizing: border-box;
  background: url("grain.png") 0 0 / 200px 200px repeat, #F3E2BE; color: #4A3520;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25)); }
.bw-ticket::after { content: ""; position: absolute; top: 8px; bottom: 8px; right: 52px; border-left: 2px dashed rgba(74, 53, 32, 0.35); }
.bw-play { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #B85A33; color: #FFF; cursor: pointer; }
.bw-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.bw-play .i-pause { display: none; fill: none; stroke: currentColor; stroke-width: 2.6; }
.bw-item.is-playing .bw-play .i-play { display: none; }
.bw-item.is-playing .bw-play .i-pause { display: block; }
.bw-tk-what { align-self: end; font: 700 0.62rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.bw-tk-name { align-self: start; overflow: hidden; margin-right: 44px; font: 700 1.2rem/1.15 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-overflow: ellipsis; }
.bw-tk-wave { position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(74, 53, 32, 0.55) 0 2px, transparent 2px 5px); -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 62%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 62%); }
.bw-item.is-playing .bw-tk-wave { animation: tt-pulse 0.9s ease-in-out infinite; }
/* any other file: a kraft tag, double-clicked to open */
.bw-tag { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 10px 14px 10px 34px; box-sizing: border-box; border-radius: 6px 14px 14px 6px;
  background: url("grain.png") 0 0 / 200px 200px repeat, #CFA77A; color: #3E2A16; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.45); clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.bw-tag-hole { position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.bw-tag-ext { font: 800 1.3rem/1 var(--sans); letter-spacing: 0.04em; }
.bw-tag-name { overflow: hidden; margin-top: 4px; font: 700 1.05rem/1.1 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-overflow: ellipsis; }
/* a note: a square of paper, taped, written in the hand */
.bw-item.is-note { display: flex; background: url("grain.png") 0 0 / 200px 200px repeat, #FFF1A8; box-shadow: 0 12px 18px -12px rgba(0, 0, 0, 0.45); cursor: default; }
.bw-note-tape { position: absolute; left: 50%; top: -12px; z-index: 1; width: 74px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(236, 224, 196, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor: grab; }
.bw .bw-note-text { flex: 1; width: 100%; min-height: 0; margin: 0; padding: 18px 14px 12px; border: 0 !important; border-radius: 0; resize: none; background: transparent !important; box-shadow: none !important; color: #2E2A1C !important; font: 700 1.3rem/1.25 "Caveat", "Segoe Print", cursive; outline: none; user-select: text; -webkit-user-select: text; cursor: text; }
.bw .bw-note-text::placeholder { color: rgba(46, 42, 28, 0.4); }
/* around it: a hint; a word now and then */
.bw-hint { position: absolute; left: 18px; bottom: 14px; z-index: 5; margin: 0; max-width: calc(100% - 260px); font: 600 1.1rem/1.2 "Caveat", "Segoe Print", cursive; color: color-mix(in srgb, var(--ink) 78%, transparent); pointer-events: none; }
.bw-say { position: absolute; left: 50%; bottom: 20px; z-index: 6; margin: 0; padding: 8px 16px; transform: translateX(-50%); border-radius: 999px; background: var(--ink); color: var(--surface); font: 600 0.875rem/1.2 var(--sans); }
.bw-say[hidden] { display: none; }

/* built by Claude (2026-10-24: "draw and describe the things i want to build, stick things for context and claude build
   and show"): ✦ on the tools, the area marked, the asking, the card with the thing in its sealed frame, seen big */
.bw-tool.is-make { color: #A9780E; }
.bw-tool.is-make[aria-pressed="true"] { background: #F2D873; color: #2B2A26; }
.bw.is-marking .bw-face, .bw.is-marking .bw-item { cursor: crosshair; }
.bw-mark { position: absolute; z-index: 4; border: calc(2px * var(--inv, 1)) dashed #C9A227; border-radius: 10px; background: rgba(242, 216, 115, 0.12); pointer-events: none; }
.bw-mark[hidden] { display: none; }
.bw-mark-say { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #2B2A26; color: #F4EDE2; font: 600 0.85rem/1 var(--sans); white-space: nowrap; transform: translateY(calc(-100% - 6px)) scale(var(--inv, 1)); transform-origin: 0 100%; }
.bw-mark-say svg { width: 16px; height: 16px; fill: #F2D873; stroke: #F2D873; stroke-width: 1.4; }
.bw-mark.is-busy { border-style: solid; background: linear-gradient(110deg, rgba(242, 216, 115, 0.08) 30%, rgba(242, 216, 115, 0.3) 50%, rgba(242, 216, 115, 0.08) 70%) 0 0 / 300% 100%; animation: bw-shine 1.6s linear infinite; }
.bw-mark.is-busy .bw-mark-say { display: inline-flex; }
@keyframes bw-shine { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.bw-make { position: absolute; z-index: 7; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100% - 16px)); padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -18px rgba(var(--shade), 0.6); }
.bw-make[hidden] { display: none; }
.bw-make-l { display: grid; gap: 6px; }
.bw-make-h { font: 700 1.3rem/1.1 "Caveat", "Segoe Print", cursive; }
.bw .bw-make-ask { width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 0.92rem/1.4 var(--sans); resize: vertical; user-select: text; -webkit-user-select: text; }
.bw-make-do { display: flex; align-items: center; gap: 8px; }
.bw .bw-make-go { border: 0; background: #F2D873; color: #2B2A26; font-weight: 700; }
.bw-make-x { padding: 6px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 0.85rem/1 var(--sans); cursor: pointer; }
.bw-item.is-made { display: flex; flex-direction: column; overflow: visible; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -20px rgba(0, 0, 0, 0.45); cursor: default; }
.bw-made-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px 14px 0 0; background: linear-gradient(#FBF6E4, #F4ECD0); cursor: grab; }
.bw-made-head:active { cursor: grabbing; }
.bw-made-mark svg { display: block; width: 16px; height: 16px; fill: #C9A227; stroke: #A9780E; stroke-width: 1.2; }
.bw-made-title { flex: 1; min-width: 0; overflow: hidden; color: #2B2A26; font: 700 1.15rem/1.1 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-overflow: ellipsis; }
.bw-made-state { flex: none; max-width: 50%; overflow: hidden; color: #7A6A4A; font: 600 0.75rem/1.2 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.bw-item.is-working .bw-made-state { animation: tt-pulse 1.2s ease-in-out infinite; }
.bw-made-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #E9E5DD; }
.bw-made-do { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-radius: 0 0 14px 14px; background: var(--surface); }
.bw-made-do button { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.bw-made-do button:hover { border-color: var(--ink-2); }
.bw-made-do button[data-do="change"] { border-color: #C9A227; background: #FBF2CF; color: #2B2A26; }
.bw-big { position: fixed; inset: 58px 12px 12px; z-index: 62; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
.bw-big[hidden] { display: none; }
.bw-big-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; background: linear-gradient(#FBF6E4, #F4ECD0); }
.bw-big-title { flex: 1; min-width: 0; overflow: hidden; color: #2B2A26; font: 700 1.3rem/1.1 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-overflow: ellipsis; }
.bw-big-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: #2B2A26; cursor: pointer; }
.bw-big-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bw-big-x:hover { background: rgba(0, 0, 0, 0.06); }
.bw-big-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #E9E5DD; }
/* ---- the founder's projects on Byte (walls.js; 2026-10-27: "bring the studio app and the ww2 converstation app as
   projects on there", "draw and make changes there", "build projects like this there and even more sophisticated ones"):
   the project live in its card, drawn over in green while Draw on it is pressed, what Claude Code is doing under it ---- */
.bw-item.is-project .bw-made-mark svg { fill: none; stroke: #A9780E; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bw-proj-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(169, 120, 14, 0.12); color: #7A6A4A; font: 600 0.7rem/1.3 var(--sans); }
.bw-proj-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #E9E5DD; }
.bw-proj-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.bw-proj-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bw-proj-ink path.is-pressed { fill: #19C46B; stroke: none; }
.bw-proj-ink path { fill: none; stroke: #19C46B; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)); }
.bw-item.is-drawing .bw-proj-ink { pointer-events: auto; cursor: crosshair; touch-action: none; background: rgba(25, 196, 107, 0.05); }
/* (drawn on: the project held still as a picture of it; the live frame out of the way, as a frame of another site takes
   the pointer whatever lies over it) */
.bw-proj-still { position: absolute; inset: 0; display: none; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top left; background: #fff; }
.bw-item.is-drawing .bw-proj-still { display: block; }
.bw-item.is-drawing .bw-proj-frame { visibility: hidden; }
.bw-proj-says { flex: none; margin: 0; padding: 6px 12px 0; overflow: hidden; background: var(--surface); text-align: left; color: var(--ink-2); font: 500 0.78rem/1.35 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.bw-proj-says:empty { display: none; }
.bw-made-do button[aria-pressed="true"] { border-color: #19C46B; background: rgba(25, 196, 107, 0.14); }
.bw-made-do button[hidden] { display: none; }
.bw-item:not(.is-working) .bw-made-do [data-do="stop"] { display: none; }
.bw-make-quick { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.bw-make-quick[hidden] { display: none; }
/* ---- hosted agents (walls.js; 2026-10-27: "add the agent hosting too, were we cn host our existing agents"): the roster
   down the side, the one chosen's talk beside it, a task given at its foot ---- */
.bw-item.is-agents .bw-made-mark svg { fill: none; stroke: #A9780E; stroke-width: 2; stroke-linecap: round; }
.bw-ag { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(180px, 34%) 1fr; background: var(--surface); text-align: left; }
.bw-ag-list { margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-right: 1px solid var(--rule); }
.bw-ag-none { padding: 12px; color: var(--muted); font: 500 0.85rem/1.4 var(--sans); }
.bw-ag-one { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.bw-ag-one:hover { background: var(--wash); }
.bw-ag-one.is-on { background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.bw-ag-av { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FBF2CF; color: #7A5A10; font: 700 0.85rem/1 var(--sans); }
.bw-ag-one.is-busy .bw-ag-av { box-shadow: 0 0 0 2px #19C46B; animation: tt-pulse 1.2s ease-in-out infinite; }
.bw-ag-name { overflow: hidden; font: 600 0.85rem/1.25 var(--sans); white-space: nowrap; text-overflow: ellipsis; text-transform: capitalize; }
.bw-ag-about { overflow: hidden; color: var(--muted); font: 400 0.72rem/1.3 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.bw-ag-talk { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bw-ag-who { flex: none; padding: 10px 14px 8px; border-bottom: 1px solid var(--rule); }
.bw-ag-who-name { font: 700 1.2rem/1.1 "Caveat", "Segoe Print", cursive; text-transform: capitalize; }
.bw-ag-who-about { margin: 2px 0 0; color: var(--ink-2); font: 400 0.78rem/1.35 var(--sans); }
.bw-ag-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; }
.bw-ag-ev { margin: 0 0 8px; font: 400 0.85rem/1.45 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.bw-ag-ev.is-user { margin-left: 18%; padding: 8px 12px; border-radius: 12px; background: #FBF2CF; color: #2B2A26; }
.bw-ag-ev.is-tool, .bw-ag-ev.is-done { margin-bottom: 3px; color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-ag-ev.is-error, .bw-ag-ev.is-denied { color: #B3412E; font-size: 0.78rem; }
.bw-ag-say { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 8px 10px; border-top: 1px solid var(--rule); }
.bw-ag-say textarea { flex: 1; min-width: 0; resize: none; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 0.85rem/1.4 var(--sans); }
.bw-ag-do { display: flex; flex-direction: column; gap: 6px; }
.bw-ag-stop { padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.75rem/1 var(--sans); cursor: pointer; }
.bw-item:not(.is-working) .bw-ag-stop { display: none; }
/* ---- Eden grown by everyone (edenworld.js; 2026-10-27, "make it simcity were people can expand the eden with different
   creative inputs across the freespace"): its ground over Eden as rendered, its pieces, the palette down the right,
   nature's health over the space ---- */
.ew-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ew-layer[hidden] { display: none; }
.ew-chunk { position: absolute; display: block; max-width: none; }
.ew-piece { position: absolute; display: block; max-width: none; pointer-events: none; }
.ew-piece.is-creature { filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35)); transition: none; }
.ew-ghost { position: absolute; z-index: 9000; pointer-events: none; }
.ew-ghost.is-brush { border: 2px dashed rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.ew-ghost.is-piece { background-size: 100% 100%; opacity: 0.7; }
.ew-catch { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; }
.ew-catch[hidden] { display: none; }
.ew-hud { position: absolute; top: 58px; left: 50%; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; max-width: calc(100% - 200px); padding: 6px 14px; transform: translateX(-50%); border-radius: 999px; background: rgba(var(--shade), 0.55); color: #F4F1E6; font: 600 0.78rem/1.3 var(--sans); backdrop-filter: blur(4px); }
.ew-hud[hidden] { display: none; }
.ew-hud-name { font: 700 1.1rem/1 "Caveat", "Segoe Print", cursive; }
.ew-hud-me { display: flex; gap: 6px; }
.ew-hud-me[hidden] { display: none; }
.ew-hud-in { width: 190px; padding: 4px 10px; border: 0; border-radius: 999px; font: 500 0.8rem/1.3 var(--sans); }
.ew-hud-me button { padding: 4px 12px; border: 0; border-radius: 999px; background: #3E7D3A; color: #fff; font: 600 0.78rem/1 var(--sans); cursor: pointer; }
.ew-pal { position: absolute; top: 112px; right: 14px; z-index: 8; display: flex; flex-direction: column; gap: 6px; width: 132px; max-height: calc(100% - 190px); overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 14px 30px -16px rgba(var(--shade), 0.6); scrollbar-width: thin; }
.ew-pal[hidden] { display: none; }
.ew-row { display: grid; grid-template-columns: 1fr; gap: 3px; }
.ew-b, .ew-p { display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font: 600 0.74rem/1.1 var(--sans); text-align: left; cursor: pointer; text-transform: capitalize; }
.ew-b img, .ew-p img { flex: none; width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.ew-p img { border-radius: 50%; }
.ew-b:hover, .ew-p:hover { background: var(--wash); }
.ew-b[aria-pressed="true"], .ew-p[aria-pressed="true"] { border-color: #3E7D3A; background: rgba(62, 125, 58, 0.12); }
.ew-sizes { grid-template-columns: repeat(3, 1fr); }
.ew-size { padding: 4px 0; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 700 0.72rem/1 var(--sans); cursor: pointer; }
.ew-size[aria-pressed="true"] { border-color: #3E7D3A; background: rgba(62, 125, 58, 0.14); }
.ew-more summary { padding: 4px 2px; color: var(--ink-2); font: 700 0.74rem/1.2 var(--sans); cursor: pointer; }
.ew-grid { display: grid; gap: 2px; }
.bw.is-growing .bw-tools { opacity: 0.55; }
.ew-say { padding: 6px 8px; border: 1px solid #3E7D3A; border-radius: 999px; background: rgba(62, 125, 58, 0.1); color: var(--ink); font: 700 0.74rem/1.1 var(--sans); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ew-say[hidden] { display: none; }
.ew-say.is-on { background: #3E7D3A; color: #fff; }
@media (max-width: 640px) { .ew-pal { width: 112px; top: 110px; right: 8px; } .ew-hud { top: 104px; max-width: calc(100% - 24px); font-size: 0.7rem; } }
/* ---- a project folded into its spiral (walls.js; 2026-10-27: "the projects should be inside the spiral, when i click the
   spiral. it appears"): the canvas draws the spiral of bytes; this is where it's clicked, its name under its core, what
   Claude Code is doing under that (sized against the zoom, so they read at any distance) ---- */
.bw-spiral { position: absolute; width: var(--spiral, 560px); height: var(--spiral, 560px); transform: translate(-50%, -50%); display: grid; grid-template-rows: 1fr auto auto 22%; justify-items: center; gap: calc(4px * var(--inv, 1)); border-radius: 50%; background: radial-gradient(circle, rgba(140, 255, 190, 0.13), rgba(40, 200, 120, 0.05) 38%, rgba(0, 0, 0, 0) 64%); color: #C8FFDC; cursor: pointer; transition: background 0.2s ease; }
.bw-spiral:hover, .bw-spiral:focus-visible { background: radial-gradient(circle, rgba(160, 255, 200, 0.22), rgba(40, 200, 120, 0.08) 40%, rgba(0, 0, 0, 0) 66%); outline: none; }
.bw-spiral-name { grid-row: 2; font: 700 calc(24px * var(--inv, 1))/1.05 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-shadow: 0 0 calc(10px * var(--inv, 1)) rgba(0, 0, 0, 0.9); }
.bw-spiral-state { grid-row: 3; max-width: 150%; overflow: hidden; color: rgba(184, 255, 210, 0.8); font: 500 calc(12px * var(--inv, 1))/1.3 var(--sans); white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 calc(6px * var(--inv, 1)) rgba(0, 0, 0, 0.9); }
.bw-spiral-state:empty { display: none; }
.bw-spiral.is-working .bw-spiral-state { animation: tt-pulse 1.4s ease-in-out infinite; }
.bw-fold { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: #7A6A4A; cursor: pointer; }
.bw-fold:hover { background: rgba(0, 0, 0, 0.07); color: #2B2A26; }
.bw-fold svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 640px) { .bw-hint { display: none; } }

/* a word now and then (hung, couldn't open, no room), above the voice */
.tt-note { position: fixed; left: 50%; bottom: 140px; z-index: 20; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 500 0.8125rem/1.3 var(--sans); box-shadow: 0 8px 24px -12px rgba(var(--shade), 0.5); }
.tt-note:empty { display: none; }
@media (max-width: 640px) {
  .tt-list { padding: 112px 10px 160px; }   /* (the first thread below the key and the TV on the wall) */
  .tt-row { gap: 34px; padding-left: 52px; padding-right: 40px; }
  .tt-strip { height: clamp(190px, 32svh, 300px); }   /* (a phone's frames are held by its width) */
  .tt-zoom { right: 10px; bottom: 10px; }
}

/* ---- /sketch: the phone as the Seconds' sketch pad (sketch.js) */
.is-sketch { overflow: hidden; }
.sk { display: flex; flex-direction: column; gap: 8px; height: 100vh; height: 100svh; padding: 8px 8px 10px; background: var(--bg); color: var(--ink); font-family: var(--sans); }
.sk-bar { flex: none; display: flex; align-items: center; gap: 4px; }
.sk-which { font: 600 0.9375rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.sk-padbox { flex: 1; min-height: 0; display: grid; place-items: center; }
.sk-pad { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); touch-action: none; }
.sk-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sk-nums { display: flex; gap: 6px; }
.sk-nums:empty { display: none; }
.sk-nums button { width: 34px; height: 34px; padding: 0; border: 2px solid #FFF; border-radius: 50%; background: var(--accent); color: #FFF; font: 700 0.9375rem/1 var(--sans); box-shadow: 0 0 0 1px var(--rule); }
.sk-nums button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.sk-inks { display: flex; gap: 8px; }
.sk-inks button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--sw); }
.sk-inks button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.sk-note { flex: none; min-height: 1em; margin: 0; font-size: 0.8125rem; color: var(--muted); }

/* ---- Speak (speak.js, stage.js, thinkers.js; 2026-10-24: "auditorium dialogue were two poeple sit on a stage and
   discuss and an audience is seating and watching ... then we have the circle conversation room ... this two modes
   displayed in the side pan like before.. but 3d environment"): the room in 3D fills the page; the bar in the margin
   (.tsec-bar, its look); names over heads; along the foot, who sits where and the asking; what is said over it ---- */
.slate.is-speak { display: block; position: relative; overflow: hidden; }
.slate.is-speak .slate-title, .slate.is-speak .slate-sub { display: none; }
.sp { position: absolute; inset: 0; overflow: hidden; overflow: clip; text-align: left; background: #0E0B0D; color: #F4EDE2; }
.sp[data-part="circle"] { background: #2A1E18; }
.sp[hidden] { display: none; }
.sp-view { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 1.2s ease; touch-action: none; cursor: grab; outline: none; }
.sp.is-ready .sp-view { opacity: 1; }
.sp-view.is-looking { cursor: grabbing; }
.sp-view:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); }
.sp-wait { position: absolute; left: 16px; right: 16px; top: 42%; margin: 0; text-align: center; font: 700 1.7rem/1.2 "Caveat", "Segoe Print", cursive; color: #F4EDE2; pointer-events: none; transition: opacity 0.8s ease; }
.sp.is-ready .sp-wait { opacity: 0; }
.sp.is-failed .sp-wait { font-size: 1.35rem; }
.sp-hint { position: absolute; left: 50%; bottom: 150px; margin: 0; transform: translateX(-50%); font: 700 1.15rem/1.2 "Caveat", "Segoe Print", cursive; color: rgba(244, 237, 226, 0.85); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none; opacity: 0; transition: opacity 1.2s ease; white-space: nowrap; }
.sp.is-ready .sp-hint { opacity: 1; }
.sp.is-ready.is-looked .sp-hint { opacity: 0; }
.sp .tsec-bar { z-index: 6; }

/* names over heads: lit as they speak; dots while a thinker thinks */
.sp-names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-name { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(18, 12, 14, 0.62); color: #F4EDE2; font: 700 1.05rem/1.2 "Caveat", "Segoe Print", cursive; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); transition: box-shadow 0.15s ease; will-change: transform; }
.sp-name[hidden] { display: none; }
.sp-name.is-thinker { background: rgba(48, 30, 18, 0.72); color: #F2D9A8; }
.sp-name img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.sp-name.is-speaking { box-shadow: 0 0 0 2px #F2D873, 0 0 12px rgba(242, 216, 115, 0.6); }
.sp-dots { display: none; width: 18px; height: 6px; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x; animation: sp-dots 1.2s steps(4) infinite; }
.sp-name.is-thinking .sp-dots { display: inline-block; }
@keyframes sp-dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }

/* what is being said, over the foot */
.sp-say { position: absolute; left: 50%; bottom: 132px; z-index: 5; width: min(760px, calc(100% - 160px)); margin: 0; padding: 10px 18px; transform: translateX(-50%); border-radius: 14px; background: rgba(14, 10, 12, 0.74); color: #FFF8EC; font: 500 1.05rem/1.45 var(--sans); text-align: center; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); max-height: 30vh; overflow: auto; }
.sp-say[hidden] { display: none; }
.sp-say-who { display: block; margin-bottom: 2px; font: 700 1.2rem/1.1 "Caveat", "Segoe Print", cursive; color: #F2D9A8; }
.sp-say-tag { display: block; margin: -1px 0 4px; font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(242, 217, 168, 0.7); }
.sp-say-tag[hidden] { display: none; }

/* along the foot: who sits where (or the ring's thinkers), voices on or off, what was said; the asking under them */
.sp-bar { position: absolute; left: 50%; bottom: 14px; z-index: 6; display: flex; flex-direction: column; gap: 8px; width: min(640px, calc(100% - 120px)); transform: translateX(-50%); padding: 8px; border-radius: 22px; background: rgba(20, 14, 16, 0.66); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 14px 30px -16px rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px); }
.sp-row { display: flex; align-items: center; gap: 8px; }
.sp-seats, .sp-ring { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-seats[hidden], .sp-ring[hidden] { display: none; }
.sp-seat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.08); color: #F4EDE2; cursor: pointer; text-align: left; }
.sp-seat:hover, .sp-seat:focus-visible { background: rgba(255, 255, 255, 0.16); }
.sp-seat small { font: 600 0.68rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.sp-seat span { max-width: 100%; overflow: hidden; font: 700 1.25rem/1.15 "Caveat", "Segoe Print", cursive; white-space: nowrap; text-overflow: ellipsis; }
.sp-seat.is-empty span { color: #F2D873; }
.sp-seat.is-me { box-shadow: inset 0 0 0 1.5px #F2D873; }
.sp-ring-t { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.sp-ring-t.is-on { box-shadow: inset 0 0 0 1.5px #F2D873; }
.sp-ring-t button { border: 0; background: none; color: #F4EDE2; cursor: pointer; }
.sp-ring-t button:first-child { padding: 6px 4px 6px 14px; font: 700 1.2rem/1.1 "Caveat", "Segoe Print", cursive; }
.sp-ring-out { padding: 6px 12px 6px 6px; font: 700 1rem/1 var(--sans); opacity: 0.55; }
.sp-ring-out:hover { opacity: 1; }
.sp .sp-ring-add { min-height: 0; padding: 7px 14px; font-size: 0.9rem; }
.sp-ring-invite { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: none; color: #F4EDE2; font: 600 0.9rem/1 var(--sans); cursor: pointer; }
.sp-ring-invite:hover { background: rgba(255, 255, 255, 0.1); }
.sp-tools { flex: none; display: flex; gap: 2px; }
.sp .sp-tools .icon-btn, .sp .sp-mic { color: #F4EDE2; }
.sp .sp-tools .icon-btn:hover, .sp .sp-mic:hover { background: rgba(255, 255, 255, 0.12); }
.sp-mute .sp-cross, .sp-mute.is-off .sp-wave { display: none; }
.sp-mute.is-off .sp-cross { display: inline; }
.sp-ask { display: flex; align-items: center; gap: 6px; }
.sp-ask[hidden] { display: none; }
.sp-ask-to { flex: none; max-width: 150px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.12); color: #F4EDE2; font: 600 0.9rem/1.2 var(--sans); }
.sp-ask-to[hidden] { display: none; }
.sp-ask-to option { color: #1A1416; }
.sp .sp-ask-in { flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.93); color: #1E1A1C; font: 500 1rem/1.3 var(--sans); box-shadow: none; }
.sp .sp-mic.is-on { background: #C8435A; color: #FFF; animation: tt-pulse 1.2s ease-in-out infinite; }
.sp .sp-go, .sp .sp-stop { flex: none; min-height: 0; padding: 9px 16px; }
/* (its buttons that do the thing: gold, to be seen on the dark and on the paper alike) */
.sp .sp-go, .sp .sp-ring-add, .sp .pill-btn.sp-pick-act, .sp-invite .pill-btn { border: 0; background: #F2D873; color: #1E1A1C; font-weight: 700; }
.sp .sp-go:hover, .sp .sp-ring-add:hover, .sp .pill-btn.sp-pick-act:hover, .sp-invite .pill-btn:hover { background: #F7E294; }
.sp .sp-stop { border: 1px solid rgba(255, 255, 255, 0.4); color: #F4EDE2; font-weight: 700; }
.sp-go[hidden], .sp-stop[hidden], .sp-mic[hidden] { display: none; }

/* the picker over the foot: you, someone from the audience, or a thinker (any, by name) */
.sp-pick { position: absolute; left: 50%; bottom: 100px; z-index: 8; width: min(540px, calc(100% - 24px)); max-height: min(64vh, 470px); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; transform: translateX(-50%); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 50px -20px rgba(0, 0, 0, 0.7); }
.sp-pick[hidden] { display: none; }
.sp-pick-head { display: flex; align-items: center; justify-content: space-between; font: 700 1.4rem/1.1 "Caveat", "Segoe Print", cursive; }
.sp-pick-x { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 400 1.4rem/1 var(--sans); cursor: pointer; }
.sp-pick-x:hover { background: var(--wash); }
.sp-pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-pick-h { margin: 4px 0 0; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sp-pick-act { padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.9rem/1 var(--sans); cursor: pointer; }
.sp-pick-act.is-quiet { color: var(--muted); }
.sp .sp-pick-q { padding: 9px 12px; border-radius: 12px; font: 500 0.95rem/1.2 var(--sans); }
.sp-pick-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; scrollbar-width: thin; }
.sp-pick-t { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.sp-pick-t:hover, .sp-pick-t:focus-visible { background: var(--wash); }
.sp-pick-t:disabled { opacity: 0.4; cursor: default; background: none; }
.sp-pick-t b { font: 700 1.15rem/1.1 "Caveat", "Segoe Print", cursive; }
.sp-pick-t small { font: 500 0.75rem/1.25 var(--sans); color: var(--muted); }
.sp-pick-t.is-anyone b { color: var(--accent-ink); }

/* asked up onto the stage */
.sp-invite { position: absolute; left: 50%; top: 70px; z-index: 9; width: min(420px, calc(100% - 24px)); padding: 14px 16px; transform: translateX(-50%); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 50px -20px rgba(0, 0, 0, 0.7); text-align: center; }
.sp-invite[hidden] { display: none; }
.sp-invite-text { margin: 0 0 10px; font: 700 1.35rem/1.2 "Caveat", "Segoe Print", cursive; }
.sp-invite-do { display: flex; justify-content: center; gap: 8px; }
.sp-invite-no { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 600 0.9rem/1 var(--sans); cursor: pointer; }

/* a word now and then; what was said, all of it */
.sp-note { position: absolute; left: 50%; top: 60px; z-index: 9; max-width: min(560px, calc(100% - 24px)); margin: 0; padding: 8px 16px; transform: translateX(-50%); border-radius: 16px; background: var(--ink); color: var(--surface); font: 600 0.875rem/1.3 var(--sans); text-align: center; }
.sp-note[hidden] { display: none; }
.sp-log { width: min(620px, calc(100% - 24px)); max-height: min(80vh, 640px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); }
.sp-log[open] { display: flex; flex-direction: column; }
.sp-log::backdrop { background: rgba(10, 6, 8, 0.5); }
.sp-log-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 18px; font: 700 1.5rem/1 "Caveat", "Segoe Print", cursive; }
.sp-log-head b { flex: 1; }
.sp-log-clear { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.sp-log-clear[hidden] { display: none; }
.sp-log-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px 18px 18px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sp-log-list li { display: flex; flex-direction: column; gap: 2px; font: 500 0.95rem/1.45 var(--sans); }
.sp-log-list li b { font: 700 1.15rem/1.1 "Caveat", "Segoe Print", cursive; color: var(--muted); }
.sp-log-list li.is-thinker b { color: var(--accent-ink); }
.sp-log-list li.is-empty { color: var(--muted); }
@media (max-width: 640px) {
  .sp-bar { left: 8px; right: 8px; width: auto; transform: none; bottom: 8px; }
  .sp-say { top: 92px; bottom: auto; width: calc(100% - 24px); max-height: 26vh; font-size: 0.95rem; }
  .sp-hint { bottom: 140px; }
  .sp-pick { bottom: 140px; }
}

/* ---- the front page since 2026-10-19 (the founder: "leave the circles, lets have the animals as before", then "make
   it very diverse ... the goal is to capture every part of nature expressing itself"): nature making things all over
   the screen, round the words (nature.js, one SVG behind the page); its earth, grass, bark and leaves, the hill and the
   silk go into the night with the page (--pn), a dark veil over the day's things, and over that what glows ---- */
.welcome-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.is-welcome .welcome-frame, .is-welcome .welcome-under { position: relative; z-index: 1; pointer-events: none; }
.is-welcome .welcome-top :is(a, button), .is-welcome .theme-slot, .is-welcome .welcome-express { pointer-events: auto; }
.nat { position: absolute; left: 0; top: 0; display: block; max-width: none; overflow: visible; }
.nat-tap { pointer-events: auto; cursor: pointer; }
.nat-earth { stroke: color-mix(in srgb, #2A3350 calc(var(--pn, 0) * 100%), #A08A64); }
.nat-grass { stroke: color-mix(in srgb, #24324A calc(var(--pn, 0) * 100%), #7E9A52); }
.nat-stem { stroke: color-mix(in srgb, #23344A calc(var(--pn, 0) * 90%), #5C8A3C); }
.nat-bark { fill: none; stroke: color-mix(in srgb, #2A2A3A calc(var(--pn, 0) * 80%), #6B4A33); stroke-linecap: round; }
.nat-leaf { opacity: 0.95; }
.nat-leaf-1 { fill: color-mix(in srgb, #1C2C3A calc(var(--pn, 0) * 82%), #5C8A3C); }
.nat-leaf-2 { fill: color-mix(in srgb, #1A2A36 calc(var(--pn, 0) * 82%), #6E9A4A); }
.nat-leaf-3 { fill: color-mix(in srgb, #20303E calc(var(--pn, 0) * 82%), #4E7A34); }
.nat-mound { fill: color-mix(in srgb, #2A2A38 calc(var(--pn, 0) * 70%), #A8744A); }
.nat-silk { fill: none; stroke: color-mix(in srgb, #E4ECFA calc(var(--pn, 0) * 100%), #9A9482); stroke-linecap: round; opacity: calc(0.7 + var(--pn, 0) * 0.25); }
.nat-dew { fill: #EAF4FF; }
.nat-veil-rect { fill: #070B1A; opacity: calc(var(--pn, 0) * 0.42); }
.nat-streak path { stroke: rgba(74, 52, 36, 0.4); }
.nat-bubble rect, .nat-bubble path { fill: #FFFDF6; }
.nat-bubble rect { stroke: rgba(42, 36, 32, 0.22); stroke-width: 1; }
.nat-bubble text { fill: #2A2420; font-family: "Caveat", "Segoe Print", cursive; font-weight: 700; }
.nat-owl-say rect, .nat-owl-say path { fill: #1C2440; }
.nat-owl-say rect { stroke: rgba(200, 216, 255, 0.3); }
.nat-owl-say text { fill: #F3EBD2; }
.nat-z { fill: #C9D2F2; font-family: "Caveat", "Segoe Print", cursive; font-weight: 700; }
.nat-note { fill: var(--ink); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }

/* the words alone in the middle, the way in, on a soft halo of the page's own colour */
.is-welcome .welcome-stage { display: flex; align-items: center; justify-content: center; max-width: none; pointer-events: none; }
.welcome-express { position: relative; display: inline-flex; align-items: flex-end; gap: 4px; padding: 6px 10px; color: var(--ink); text-decoration: none; isolation: isolate; pointer-events: auto; }
.welcome-express::before { content: ""; position: absolute; inset: -22px -34px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 82%, transparent), color-mix(in srgb, var(--halo) 45%, transparent) 62%, transparent); }
.welcome-express .t {
  padding: 0 2px 7px 0; white-space: nowrap;
  font: 700 clamp(1.7rem, 6.4vh, 3.4rem)/1 "Caveat", "Segoe Print", cursive;
  -webkit-text-stroke: 0.045em currentColor;
  text-shadow: 0 0 1px var(--halo), 0 0 3px var(--halo), 0 0 7px color-mix(in srgb, var(--halo) 95%, transparent), 0 0 14px color-mix(in srgb, var(--halo) 85%, transparent), 0 0 24px color-mix(in srgb, var(--halo) 60%, transparent);
}
.welcome-express .welcome-spark { flex: none; width: 64px; height: 64px; margin-bottom: -6px; transition: transform 0.3s ease;
  filter: drop-shadow(0 0 4px var(--halo)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent-ink) calc(50% + var(--p, 0) * 25%), transparent)); }
.welcome-express .welcome-spark .rays { stroke-width: 3; }
.welcome-express:hover .welcome-spark, .welcome-express:focus-visible .welcome-spark { transform: scale(1.15); }
.welcome-express:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; border-radius: 16px; }
@media (max-width: 760px) {
  .welcome-express .t { font-size: clamp(1.5rem, 7.6vw, 2.3rem); }
  .welcome-express .welcome-spark { width: 52px; height: 52px; }
}

/* ---- the move (2026-10-20; move.js, pages/move.html): amorisgratia.com became the company site and the thought place
   moved to meandwe.amorisgratia.com; this card carries what was made on the old address over to the new one ---- */
.is-move main { min-height: calc(100svh - 120px); display: grid; place-items: center; padding: 24px 16px; }
.move-card { width: min(520px, 100%); padding: 32px 28px 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 18px 40px -24px rgba(40, 32, 20, 0.35); text-align: left; }
.move-eyebrow { margin: 0 0 6px; font: 600 0.8rem/1.2 var(--ui, system-ui, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.move-title { margin: 0 0 10px; font: 700 2.2rem/1.05 "Caveat", "Segoe Print", cursive; color: var(--ink); }
.move-text { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.move-what { margin: 0 0 18px; padding-left: 1.2em; color: var(--ink-2); line-height: 1.6; }
.move-what[hidden], .move-small[hidden], .move-go[hidden] { display: none; }
.move-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.move-go { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--leaf, #52611E); color: var(--bg, #FBF8F1); font: 600 1rem/1.2 var(--ui, system-ui, sans-serif); cursor: pointer; }
.move-go:disabled { opacity: 0.6; cursor: progress; }
.move-open { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.move-small { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }

/* ---- Aesthetics' sections (2026-10-20: "THE AESTHETICS SECTION WILL HAVE THE SAME SIDE OPTION AS THE THOUGHTS. YOUR
   BODY. YOUR WEARS YOUR SPACE THE EXTERIOR"; since 2026-10-26 Your body, Your food, Your wears, Your space, the
   exterior dissolved): the Thought page's bar (.tsec classes); a section not yet built (Your food) a blank slate, its
   name and "a blank slate, built bit by bit" in the middle of it, as the slates are ---- */
.slate.is-aesthetics { display: block; position: relative; overflow: hidden; }
.slate.is-aesthetics > .slate-title, .slate.is-aesthetics > .slate-sub { display: none; }
.asec-slate { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 72px; }
@media (max-width: 640px) { .asec-slate { padding: 0 56px; } }

/* ---- Your body (body.js, bodymodel.js; the founder, 2026-10-20: "A PICTURE OF YOUR BODY HEAD TO TOE ... BODY
   GOALS ... GOAL WORKOUT ROUTINE AND TIMING. NUTRITION PLAN AND CALORIE MANAGEMENT. FOOD SCANNER"; then "LETS DO A
   3D ROTATABLE THAT TURNS ... THE PARTS OF THE BODY THAT NEEDS WORK HAS A RED BURN ... THE OVERALL ROUTINE FOR THE
   BODY STICKING ON THE SIDE"): the body in 3D on the stage, your routine stuck beside it; sheets over them for the
   scan, the week, the session, the food. Dressed as the page is: paper cards with a rule edge, choices like the
   header's switch, the go-ahead buttons in leaf; red only for the burns. On a phone the stage fills the screen and
   the routine follows below it; a sheet takes the whole page (the margin bar steps away while it's open). ---- */
.bd { position: absolute; inset: 0; overflow: hidden auto; container: bd / size; color: var(--ink); font-family: var(--sans); text-align: left; }
.bd-cards { --side: 330px; box-sizing: border-box; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); align-items: stretch; gap: 14px; padding: 14px 18px 14px 84px; }
.bd-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 12px 14px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 8px 22px -18px rgba(var(--shade), 0.5); }
.bd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.bd-title { margin: 0 6px 0 0; font: 700 1.6rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }
.bd-when { flex: 1; min-width: 120px; font: 500 0.8125rem/1.2 var(--sans); color: var(--muted); }
.bd-big { margin: 0; font: 700 1.55rem/1.05 "Caveat", "Segoe Print", cursive; color: var(--ink); }
.bd-line { margin: 0; font: 500 0.84rem/1.4 var(--sans); color: var(--muted); }
.bd-note { margin: 0; max-width: 62ch; font: 400 0.8125rem/1.45 var(--sans); color: var(--muted); }
.bd-warn, .bd-status { margin: 0; font: 600 0.8125rem/1.45 var(--sans); color: var(--ink-2); }
.bd-warn:empty, .bd-status:empty { display: none; }
.bd-sp { flex: 1; }
.bd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bd .seg { flex-wrap: wrap; }

.bd-go, .bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 0.84rem/1 var(--sans); cursor: pointer; transition: background-color 0.15s ease, filter 0.15s ease; }
.bd-go { background: var(--leaf); color: var(--bg); }
.bd-go:hover { filter: brightness(1.08); }
.bd-btn { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.bd-btn:hover { background: var(--wash); }
.bd-sm { min-height: 30px; padding: 0 12px; font-size: 0.8rem; }
.bd-go:disabled, .bd-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.bd-go:focus-visible, .bd-btn:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.bd-go.is-busy { cursor: progress; opacity: 1; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); background-size: 200% 100%; animation: bd-busy 1.2s linear infinite; }
@keyframes bd-busy { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bd-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: 600 1.15rem/1 var(--sans); cursor: pointer; }
.bd-icon:hover { background: var(--wash); }
.bd-icon:disabled { opacity: 0.3; background: transparent; cursor: default; }
.bd-step { display: inline-flex; align-items: center; gap: 2px; }
.bd-step[hidden] { display: none; }
.bd-bar { display: block; height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.bd-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--leaf); transition: width 0.4s ease; }

/* the stage: the body in 3D */
.bd-3d { position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; }
.bd-3d-view { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.bd-3d-view:active { cursor: grabbing; }
.bd-3d-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: var(--muted); font: 600 1.3rem/1.2 "Caveat", "Segoe Print", cursive; text-align: center; }
.bd-3d-hint { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; padding: 0 12px; color: var(--muted); font: 500 0.78rem/1.3 var(--sans); text-align: center; pointer-events: none; }
.bd-3d-tip { position: absolute; z-index: 3; margin: 0; padding: 5px 11px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -10px rgba(var(--shade), 0.5); color: var(--ink); font: 600 1rem/1 "Caveat", "Segoe Print", cursive; white-space: nowrap; pointer-events: none; }
.bd-weigh { position: absolute; top: 6px; right: 8px; display: grid; justify-items: end; gap: 5px; color: var(--muted); font: 500 0.78rem/1.2 var(--sans); pointer-events: none; }
.bd-weigh[hidden] { display: none; }
.bd-weigh .bd-bar { width: 170px; }

/* a part: the work on it and how it's going */
.bd-part { position: absolute; top: 8px; left: 8px; z-index: 4; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; width: min(310px, calc(100% - 16px)); max-height: calc(100% - 40px); padding: 12px 14px 14px; overflow: auto; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 14px 34px -22px rgba(var(--shade), 0.6); }
.bd-part[hidden] { display: none; }
.bd-part-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bd-part-name { margin: 0; color: var(--ink); font: 700 1.75rem/1 "Caveat", "Segoe Print", cursive; }
.bd-part-name.is-on::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 9px 3px 0; border-radius: 50%; background: radial-gradient(circle, rgb(240, 84, 44), rgb(176, 24, 16)); box-shadow: 0 0 9px rgba(232, 60, 30, 0.75); vertical-align: middle; }
.bd-part .bd-label { min-width: 0; margin-top: 2px; }
.bd-part-moves { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font: 600 0.84rem/1.25 var(--sans); }
.bd-part-moves small, .bd-today-moves small { display: block; color: var(--muted); font: 500 0.76rem/1.3 var(--sans); }
.bd-part-row { display: flex; align-items: center; gap: 10px; }
.bd-part-row .bd-bar { flex: 1; }
.bd-part-n { color: var(--ink-2); font: 500 0.78rem/1.3 var(--sans); }
.bd-spark { flex: none; width: 80px; height: 24px; }
.bd-spark polyline { fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* the routine, stuck on the side */
.bd-routine-body { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.bd-today { display: flex; flex-direction: column; gap: 6px; }
.bd-today-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin: 2px 0 4px; padding: 0; list-style: none; }
.bd-today-moves li { position: relative; padding-left: 15px; font: 600 0.82rem/1.25 var(--sans); }
.bd-today-moves li::before { content: ""; position: absolute; top: 0.42em; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.bd-today-moves li.is-focus::before { background: rgb(222, 64, 36); box-shadow: 0 0 6px rgba(230, 60, 30, 0.6); }
.bd-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bd-wk-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 2px 5px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); cursor: pointer; }
.bd-wk-day span { color: var(--muted); font: 700 0.66rem/1 var(--sans); text-transform: uppercase; }
.bd-wk-day b { max-width: 100%; overflow: hidden; font: 700 0.95rem/1 "Caveat", "Segoe Print", cursive; text-overflow: ellipsis; white-space: nowrap; }
.bd-wk-day.is-rest b { color: var(--muted); }
.bd-wk-day.is-today { background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(var(--shade), 0.14), 0 2px 8px -2px rgba(var(--shade), 0.22); }
.bd-wk-day.is-today span { color: var(--leaf); }
.bd-wk-day.is-done::after { content: "✓"; color: var(--leaf); font: 700 0.7rem/1 var(--sans); }
.bd-food { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.bd-food-sum { display: flex; align-items: center; gap: 14px; }
.bd-ring { flex: none; width: 62px; height: 62px; transform: rotate(-90deg); }
.bd-ring-big { width: 92px; height: 92px; }
.bd-ring-bg { fill: none; stroke: var(--wash); stroke-width: 4.5; }
.bd-ring-on { fill: none; stroke: var(--leaf); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 0.4s ease; }
.bd-ring.is-over .bd-ring-on { stroke: var(--ink-2); }

/* the sheets */
.bd-sheet { position: absolute; inset: 12px 16px 12px 80px; z-index: 6; display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 18px 44px -26px rgba(var(--shade), 0.55); container: sheet / size; }
.bd-sheet[hidden] { display: none; }
.bd-sheet-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 10px 6px 18px; }
.bd-sheet-title { margin: 0; font: 700 1.7rem/1 "Caveat", "Segoe Print", cursive; color: var(--ink-2); }
.bd-sheet-body { box-sizing: border-box; flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 16px; }

/* About you */
.bd-form { display: flex; flex-direction: column; gap: 10px; }
.bd-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bd-row > span[hidden] { display: none; }
.bd-metric, .bd-us { display: inline-flex; align-items: center; gap: 8px; }
.bd-label { min-width: 92px; margin: 0; font: 600 0.8125rem/1.2 var(--sans); color: var(--muted); }
.bd-in { box-sizing: border-box; width: 92px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font: 500 0.9rem/1 var(--sans); }
.bd-in:focus { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.bd-in-sm { width: 74px; }
.bd-in-sel { width: auto; }
.bd-unit { font: 500 0.8125rem/1 var(--sans); color: var(--muted); }

/* the scan's photos, big */
.bd-views, .bd-look-views { display: flex; justify-content: center; gap: 14px; }
.bd-view { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.bd-view figcaption { font: 600 1.05rem/1 "Caveat", "Segoe Print", cursive; color: var(--muted); }
.bd-frame { --fh: calc(100cqh - 100px); position: relative; display: block; flex: none; width: calc(var(--fh) * 9 / 16); height: var(--fh); border-radius: 12px; overflow: hidden; background: var(--wash); }
.bd-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-frame .bd-ghost { position: absolute; left: 10%; top: 6%; width: 80%; height: 88%; }
.bd-ghost-line { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 3 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.6; }

/* the scan: how, the camera with its outline, the three views */
.bd-scan { display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(230px, 1fr); gap: 20px; align-items: start; }
.bd-cam { --ch: calc(100cqh - 74px); position: relative; width: calc(var(--ch) * 9 / 16); height: var(--ch); border-radius: 14px; overflow: hidden; background: rgb(var(--shade)); }
.bd-food-cam { width: calc(var(--ch) * 3 / 4); }
.bd-video, .bd-snapped { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-video.is-mirror { transform: scaleX(-1); }
.bd-cam .bd-ghost { position: absolute; left: 50%; top: 4%; height: 92%; aspect-ratio: 1 / 2; transform: translateX(-50%); pointer-events: none; transition: opacity 0.3s ease; }
.bd-cam .bd-ghost.is-away { opacity: 0; }
.bd-cam .bd-ghost-line { stroke: rgba(255, 255, 255, 0.9); stroke-width: 2; stroke-dasharray: 7 6; opacity: 1; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
.bd-count { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #FFF; font: 700 6.5rem/1 "Caveat", "Segoe Print", cursive; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); pointer-events: none; }
.bd-say { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.5); color: #FFF; font: 500 0.84rem/1.35 var(--sans); text-align: center; }
.bd-say:empty { display: none; }
.bd-flash { position: absolute; inset: 0; background: #FFF; opacity: 0; pointer-events: none; }
.bd-flash.is-on { animation: bd-flash 0.45s ease-out; }
@keyframes bd-flash { from { opacity: 0.85; } to { opacity: 0; } }
.bd-cam-off { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; color: rgba(255, 255, 255, 0.6); font: 600 1.25rem/1.2 "Caveat", "Segoe Print", cursive; text-align: center; }
.bd-cam.is-on .bd-cam-off, .bd-cam:has(.bd-snapped:not([hidden])) .bd-cam-off { display: none; }
.bd-scan-how { display: flex; flex-direction: column; gap: 12px; }
.bd-wear { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--wash); color: var(--ink); font: 500 0.875rem/1.45 var(--sans); }
.bd-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 1.2em; color: var(--ink-2); font: 400 0.84rem/1.45 var(--sans); }
.bd-private { margin: 0; color: var(--leaf); font: 600 0.8rem/1.4 var(--sans); }
.bd-scan-side { display: flex; flex-direction: column; gap: 12px; }
.bd-shots { display: flex; gap: 8px; }
.bd-shot { position: relative; width: 72px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 8px; background: var(--wash) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.bd-shot span { position: absolute; left: 0; right: 0; bottom: 5px; color: var(--muted); font: 600 0.95rem/1 "Caveat", "Segoe Print", cursive; text-align: center; }
.bd-shot.is-taken span { color: #FFF; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.bd-scanner.is-scanning .bd-shot { cursor: default; }

/* training: the settings, the week, the day */
.bd-train-body { display: flex; flex-direction: column; gap: 12px; }
.bd-train-set { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bd-train-set .bd-label { min-width: 0; }
.bd-at { width: 118px; }
.bd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bd-wday { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 8px 9px; border: 0; border-radius: 12px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); text-align: left; cursor: pointer; }
.bd-wday[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(var(--shade), 0.14), 0 2px 8px -2px rgba(var(--shade), 0.22); }
.bd-wday.is-rest { color: var(--muted); }
.bd-wday-d { color: var(--muted); font: 700 0.72rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.bd-wday.is-today .bd-wday-d { color: var(--leaf); }
.bd-wday-s { font: 700 1.15rem/1 "Caveat", "Segoe Print", cursive; }
.bd-wday-t { color: var(--muted); font: 500 0.72rem/1.2 var(--sans); }
.bd-wday-done { position: absolute; top: 7px; right: 8px; color: var(--leaf); font: 700 0.64rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.bd-day-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.bd-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: mv; }
.bd-moves li { display: grid; grid-template-columns: 18px 1fr; gap: 1px 8px; counter-increment: mv; }
.bd-moves li::before { content: counter(mv); grid-row: span 3; color: var(--muted); font: 700 1.25rem/1 "Caveat", "Segoe Print", cursive; }
.bd-moves li.is-focus::before { color: rgb(214, 60, 34); }
.bd-move-name { font: 600 0.875rem/1.3 var(--sans); }
.bd-move-dose { color: var(--leaf); font: 600 0.78rem/1.3 var(--sans); }
.bd-move-how { color: var(--muted); font: 400 0.78rem/1.35 var(--sans); }

/* a session, as it happens */
.bd-play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.bd-play-what { margin: 0; color: var(--ink); font: 700 3rem/1 "Caveat", "Segoe Print", cursive; }
.bd-play-how { max-width: 46ch; margin: 0; color: var(--ink-2); font: 400 0.9rem/1.45 var(--sans); }
.bd-play-how:empty, .bd-play-set:empty, .bd-play-next:empty { display: none; }
.bd-play-set { margin: 0; color: var(--muted); font: 600 0.875rem/1.3 var(--sans); }
.bd-play-clock { margin: 4px 0; color: var(--ink); font: 600 4.2rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.bd-play-clock.is-reps { color: var(--leaf); font: 700 3.2rem/1 "Caveat", "Segoe Print", cursive; }
.bd-session.is-rest .bd-play-clock { color: var(--leaf); }
.bd-play-next { margin: 0; color: var(--muted); font: 500 0.84rem/1.3 var(--sans); }
.bd-play-bar { width: min(420px, 80%); height: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; }
.bd-play-bar i { display: block; width: 0; height: 100%; background: var(--leaf); transition: width 0.3s ease; }

/* food: the day */
.bd-eat-tabs { margin-left: 6px; }
.bd-eat-day { display: flex; flex-direction: column; gap: 12px; }
.bd-eat-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.bd-dayer { font: 600 0.875rem/1 var(--sans); }
.bd-day-name { min-width: 96px; text-align: center; }
.bd-macros { display: grid; flex: 1; gap: 6px; min-width: 220px; max-width: 380px; }
.bd-macro { display: grid; grid-template-columns: 58px 1fr 88px; align-items: center; gap: 8px; color: var(--muted); font: 500 0.8rem/1 var(--sans); }
.bd-macro-bar { height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.bd-macro-bar i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--leaf); transition: width 0.4s ease; }
.bd-macro-n { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.bd-log { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bd-meal { display: grid; grid-template-columns: 36px 66px 1fr auto 28px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.bd-meal:hover { background: var(--wash); }
.bd-meal-pic { display: block; width: 36px; height: 36px; border-radius: 8px; background: var(--wash); object-fit: cover; }
.bd-meal-t { color: var(--muted); font: 500 0.8rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.bd-meal-name, .bd-item-name { min-width: 0; font: 600 0.875rem/1.25 var(--sans); }
.bd-meal-name small, .bd-item-name small, .bd-plan-meal small { display: block; color: var(--muted); font: 400 0.76rem/1.3 var(--sans); }
.bd-meal-k, .bd-item-k { font: 600 0.875rem/1 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.bd-meal-k::after, .bd-item-k::after { content: " kcal"; color: var(--muted); font-weight: 400; font-size: 0.72rem; }
.bd-empty { padding: 14px 8px; color: var(--muted); font: 600 1.25rem/1.2 "Caveat", "Segoe Print", cursive; }

/* food: the plan */
.bd-eat-plan { display: flex; flex-direction: column; gap: 12px; }
.bd-plan-top { display: grid; gap: 4px; }
.bd-plan-head { display: flex; align-items: center; gap: 8px; }
.bd-plan-head .bd-label { min-width: 0; }
.bd-plan-meals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bd-plan-meal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.bd-plan-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0; color: var(--ink-2); font: 700 1.35rem/1 "Caveat", "Segoe Print", cursive; }
.bd-plan-name span { color: var(--muted); font: 500 0.76rem/1 var(--sans); }
.bd-plan-meal ul { display: flex; flex: 1; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font: 600 0.84rem/1.25 var(--sans); }

/* food: adding it */
.bd-add-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.bd-add[data-mode="type"] .bd-food-cam { display: none; }
.bd-add[data-mode="type"] .bd-add-body { grid-template-columns: minmax(0, 640px); }
.bd-add-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bd-add-find { display: flex; flex-direction: column; gap: 8px; }
.bd-add-find:not(:has(.bd-in:not([hidden]))) { display: none; }
.bd-q, .bd-code { width: 100%; max-width: 420px; }
.bd-found { display: flex; flex-direction: column; gap: 3px; max-height: calc(100cqh - 250px); margin: 0; padding: 0; overflow: auto; list-style: none; }
.bd-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.bd-item.is-on { background: var(--wash); }
.bd-item-pick { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.bd-item-pick input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--leaf); }
.bd-qty { display: inline-flex; align-items: center; gap: 2px; }
.bd-qty b { min-width: 24px; font: 600 0.84rem/1 var(--sans); text-align: center; }
.bd-add.is-looking .bd-cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%) 0 0 / 100% 40% no-repeat; animation: bd-look 1.4s ease-in-out infinite; }
@keyframes bd-look { from { background-position: 0 -40%; } to { background-position: 0 140%; } }

/* narrower: the stage fills the screen, the routine below it; the sheets fold to one column */
@container bd (max-width: 1000px) {
  .bd-cards { height: auto; grid-template-columns: minmax(0, 1fr); padding: 12px 12px 28px 64px; }
  .bd-stage { height: max(440px, calc(100cqh - 24px)); }
  .bd-routine-body { overflow: visible; }
}
@container bd (max-width: 640px) {
  .bd-part { top: auto; right: 6px; bottom: 6px; left: 6px; width: auto; max-height: 62%; }
  .bd-weigh .bd-bar { width: 110px; }
}
@container sheet (max-width: 760px) {
  .bd-scan { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bd-body-cam { --ch: min(calc(100cqh - 250px), calc((100cqw - 36px) * 16 / 9)); order: -1; }
  .bd-scan-side, .bd-scan-how { justify-self: stretch; }
  .bd-look-views .bd-frame { --fh: calc((100cqw - 70px) / 3 * 16 / 9); }
  .bd-add-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bd-food-cam { --ch: min(calc(100cqh - 330px), calc((100cqw - 36px) * 4 / 3)); }
  .bd-add-side { justify-self: stretch; }
  .bd-found { max-height: none; }
}
@container sheet (max-width: 820px) {
  .bd-plan-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bd-moves { grid-template-columns: minmax(0, 1fr); }
}
@container sheet (max-width: 480px) {
  .bd-plan-meals { grid-template-columns: minmax(0, 1fr); }
  .bd-meal { grid-template-columns: 36px 1fr auto 28px; }
  .bd-meal-t { display: none; }
  .bd-label { min-width: 74px; }
  .bd-play-what { font-size: 2.4rem; }
}
@media (max-width: 640px) {
  .asec.bd-sheeted .tsec-bar { display: none; }
  .bd-sheet { inset: 0; border-radius: 0; box-shadow: none; }
}

/* ---- Your wears (wears.js; the founder, 2026-10-20: "THE WEAR SECTION, A FREESPACE, YOUR BODY THERE. YOU DRAW
   CLOTHES AND CLIP THINGS AND GET THE CLOTHES RENDERED YOU TEST IT ON YOUR BODY"): a free wall (freewall.js) with
   you standing on it in 3D, the board beside you to draw clothes on, pictures clipped about, looks kept. The making
   bar dressed as the page's switches; the fabrics as round swatches ---- */
.wr-body, .wr-board { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 18px 40px -26px rgba(var(--shade), 0.6); cursor: grab; }
.wr-body { width: 420px; }
.wr-head { display: flex; align-items: baseline; gap: 10px; min-height: 30px; }
.wr-tag { margin: 0; color: var(--ink-2); font: 700 1.7rem/1 "Caveat", "Segoe Print", cursive; }
.wr-from { flex: 1; color: var(--muted); font: 500 0.8rem/1.3 var(--sans); }
.wr-stage { position: relative; height: 660px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse 60% 30% at 50% 92%, var(--wash), transparent 70%); }
.wr-3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.wr-3d:active { cursor: grabbing; }
.wr-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: var(--muted); font: 600 1.3rem/1.2 "Caveat", "Segoe Print", cursive; text-align: center; }
.wr-panels { display: flex; gap: 16px; }
.wr-panel { position: relative; width: 300px; height: 450px; margin: 0 0 22px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.wr-panel canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wr-ink { cursor: crosshair; touch-action: none; }
.wr[data-tool="pick"] .wr-ink { cursor: pointer; }
.wr-panel figcaption { position: absolute; left: 0; right: 0; bottom: -24px; color: var(--muted); font: 600 1.1rem/1 "Caveat", "Segoe Print", cursive; text-align: center; }
.wr-clip { position: absolute; margin: 0; transform: rotate(var(--r, 0deg)); cursor: grab; }
.wr-clip.is-new, .wr-look.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.wr-clip img { display: block; width: 100%; min-height: 60px; border-radius: 2px; background: var(--wash); box-shadow: 0 0 0 1px var(--rule), 0 14px 26px -18px rgba(var(--shade), 0.7); pointer-events: none; }
.wr-clip.is-held, .wr-look.is-held { cursor: grabbing; }
.wr-look { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 170px; margin: 0; padding: 8px 8px 10px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 14px 30px -22px rgba(var(--shade), 0.6); cursor: grab; }
.wr-look img { display: block; width: 100%; aspect-ratio: 392 / 660; border-radius: 9px; background: var(--wash); object-fit: cover; pointer-events: none; }
.wr-look figcaption { color: var(--ink-2); font: 700 1.2rem/1 "Caveat", "Segoe Print", cursive; }
.wr-wear { min-height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--leaf); color: var(--bg); font: 600 0.8rem/1 var(--sans); cursor: pointer; }
.wr-x { position: absolute; top: -10px; right: -10px; z-index: 6; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule), 0 4px 10px -6px rgba(var(--shade), 0.6); font: 600 1rem/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.wr-clip:hover .wr-x, .wr-look:hover .wr-x, .wr-x:focus-visible, .fw.is-touch .wr-x { opacity: 1; }
.wr-make { align-items: center; max-width: calc(100% - 200px); pointer-events: none; }
.wr-make > * { pointer-events: auto; }
.wr-make .pill-btn[aria-pressed="true"] { background: var(--raised); border-color: var(--rule); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 0 2px 8px -2px rgba(var(--shade), 0.22); }
.wr-fab { flex: none; width: 30px; height: 30px; border-radius: 50%; background-position: center; background-size: cover; box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--rule), 0 6px 14px -8px rgba(var(--shade), 0.6); }
.wr-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 8px 22px -14px rgba(var(--shade), 0.5); }
.wr-sw { position: relative; flex: none; width: 20px; height: 20px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); cursor: pointer; }
.wr-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink-2); }
.wr-any { display: grid; place-items: center; background: var(--wash); color: var(--ink-2); font: 600 0.9rem/1 var(--sans); }
.wr-any::before { content: "+"; }
.wr-any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* a phone: the making bar one row, scrolled sideways */
@media (max-width: 640px) {
  .wr-make { right: 10px; max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .wr-make::-webkit-scrollbar { display: none; }
  .wr-make > * { flex: none; }
  .wr-make .pill-btn, .wr-make .seg button { min-height: 30px; font-size: 0.78rem; }
  .wr-sws { flex-wrap: nowrap; }
}

/* ---- Your space (yourspace.js, place.js; the founder, 2026-10-20: "A FULL SPACE WERE YOU ARE INSIDE. YOU CAN DRAW THE
   FLOOR PLAN AND IT GETS RENDERED INTO A SPACE. YOU DRAW OBJECTS OUTSIDE, RENDER IT AND DRAG TO THE ROOM"): the free
   wall with the plan card, the inside card and the things' cards (Your wears' look); the making bar and the pictures
   as Your wears' ---- */
.pl-plan, .pl-in, .pl-thing { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 18px 40px -26px rgba(var(--shade), 0.6); cursor: grab; }
.pl-plan { width: 448px; }
.pl-plan-cv, .pl-draw { position: relative; inset: auto; }
.pl-plan-cv { display: block; width: 420px; height: 420px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); cursor: crosshair; touch-action: none; }
.pl-tool, .pl-floors { align-self: flex-start; }
.pl-tool { flex-wrap: wrap; }
.pl-in { width: 800px; }
.pl-stage { position: relative; height: 480px; border-radius: 12px; overflow: hidden; background: var(--wash); }
.pl-3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.pl-3d:active { cursor: grabbing; }
.pl-empty { position: absolute; left: 50%; top: 50%; max-width: 320px; margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 26px -16px rgba(var(--shade), 0.6); color: var(--ink-2); font: 600 1.2rem/1.25 "Caveat", "Segoe Print", cursive; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.pl-empty[hidden] { display: none; }
.pl-objbar { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-objbar[hidden] { display: none; }
.pl-objbar .pill-btn { background: var(--surface); box-shadow: 0 8px 20px -14px rgba(var(--shade), 0.6); }
.pl-thing { width: 720px; }
.pl-thing.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pl-thing .wr-head { align-items: center; }
.pl-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: 600 1.1rem/1 var(--sans); cursor: pointer; }
.pl-x:hover { background: var(--wash); }
.pl-thing-body { display: flex; gap: 12px; }
.pl-view { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.pl-view figcaption, .pl-made-say { color: var(--muted); font: 600 1.05rem/1.2 "Caveat", "Segoe Print", cursive; text-align: center; }
.pl-draw { display: block; width: 150px; height: 150px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); cursor: crosshair; touch-action: none; }
.pl-view.is-round .pl-draw { cursor: not-allowed; opacity: 0.7; }
.pl-made { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px; margin: 0; border-radius: 10px; background: radial-gradient(ellipse at 50% 70%, var(--wash), transparent 72%); }
.pl-made img { display: block; max-width: 100%; max-height: 170px; pointer-events: none; }
.pl-made-say { margin: 0; padding: 0 12px; }
.pl-thing.is-made .pl-made-say { font-size: 0.95rem; }
.pl-thing-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-round[aria-pressed="true"] { background: var(--raised); border-color: var(--rule); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--shade), 0.14), 0 2px 8px -2px rgba(var(--shade), 0.22); }

/* ---- Music (music.js; the founder, 2026-10-20: "the music, free space with recorder in the buttom similar to the tales.
   you throw sound tickets around and stick them around"): a free wall of sound tickets (the Thoughts' papers and clips),
   the Tale's recorder along its foot; a ticket flicked flies on, turning, and sticks where it lands ---- */
.slate.is-music { display: block; position: relative; overflow: hidden; }
.slate.is-music .slate-title, .slate.is-music .slate-sub { display: none; }
.mu { position: absolute; inset: 0; display: flex; flex-direction: column; text-align: left; }
.mu[hidden] { display: none; }
.mu .mu-wall { position: relative; inset: auto; flex: 1; min-height: 0; }
.mu-defs { position: absolute; width: 0; height: 0; }
.mu-voice { margin-top: 8px; }
.mu-voice[hidden] { display: none; }
/* (no cutting here yet) */
.mu-voice .tt-aclip-cut { display: none; }
/* a clip going up off the recorder: a ticket in the making */
.mu-voice.to-out { box-shadow: 0 -16px 30px -22px var(--accent), 0 10px 28px -20px rgba(var(--shade), 0.5); }
.tt-aclip.is-ghost.is-out { border-color: #8A6A44; background: #F2E3C5; transform: scale(1.3) rotate(-4deg); transition: transform 0.15s ease; }

/* a sound ticket: its paper, its clip, its name in its hand, a round play stamp, its sound in ink, how long, signed */
.mu-tk { cursor: grab; touch-action: none; }
.mu-tk.is-held, .mu-tk.is-held * { cursor: grabbing !important; }
.mu-tk.is-flying { z-index: 9000 !important; transition: none; }
.mu-tk.is-flying .tk-clip, .mu-tk.is-held .tk-clip { opacity: 0; }
.mu-tk.is-flying .tk-back, .mu-tk.is-held .tk-back { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.14)) drop-shadow(0 34px 26px rgba(0, 0, 0, 0.3)); }
.mu-tk.is-stuck { animation: mu-stick 0.42s cubic-bezier(0.3, 1.5, 0.5, 1); }
.mu-tk.is-stuck .tk-clip { animation: mu-clip 0.42s ease-out; }
@keyframes mu-stick { from { transform: rotate(var(--r)) scale(1.07); } }
@keyframes mu-clip { from { opacity: 0; translate: 0 -16px; } 60% { opacity: 1; } }
.mu-tk.is-going { opacity: 0.5; }
.mu-tk.is-playing .tk-back { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); }
.mu-body { position: absolute; inset: 12px 14px 32px; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mu-top { flex: none; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mu-name { flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0 3px; border: 0; border-radius: 3px; background: transparent; box-shadow: none; color: inherit; outline: none; text-shadow: 0 0 0.6px currentColor; }
.mu-name:focus { background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 -1.5px 0 currentColor; }
.mu-name::placeholder { color: currentColor; opacity: 0.4; }
.mu-row { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 0; }
.mu-play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: 0.85; transform: rotate(-6deg); }
.mu-play:hover, .mu-play:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.35); }
.mu-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mu-play svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mu-i-stop, .mu-play[aria-pressed="true"] .mu-i-play { display: none; }
.mu-play[aria-pressed="true"] .mu-i-stop { display: block; }
.mu-wave { display: block; flex: 1; min-width: 0; width: 100%; height: 100%; max-height: 58px; pointer-events: none; }
.mu-time { flex: none; font-size: 1.05rem; line-height: 1; opacity: 0.75; pointer-events: none; }
.mu-tk .tk-tools { gap: 6px; }
/* each paper: where it's written on */
.mu-tk.tk-stub .mu-body { left: 20px; right: 29%; }
.mu-tk.tk-stub .tk-sign { right: calc(26% + 10px); }
.mu-tk.tk-card .mu-body { top: 2px; }
.mu-tk.tk-tag .mu-body { top: 36px; }
.mu-tk.tk-receipt .mu-body { top: 36px; }
.mu-tk.tk-page .mu-body { top: 20px; }
.mu-tk.tk-chalk .mu-body { inset: 16px 18px 36px; }
.mu-tk.tk-chalk .mu-play:hover { background: rgba(255, 255, 255, 0.12); }
/* the hands (the Thoughts' own) */
.mu .hand-gaegu { font: 700 1.55rem/1.1 "Gaegu", "Segoe Print", cursive; }
.mu .hand-caveat { font: 700 1.45rem/1.15 "Caveat", "Segoe Print", cursive; }
.mu .hand-soon { font: 400 1.1rem/1.4 "Coming Soon", "Segoe Print", cursive; }
.mu .hand-patrick { font: 400 1.3rem/1.2 "Patrick Hand", "Segoe Print", cursive; }
.mu .hand-shadows { font: 400 1.2rem/1.25 "Shadows Into Light Two", "Segoe Print", cursive; }
.mu .hand-gochi { font: 400 1.15rem/1.3 "Gochi Hand", "Segoe Print", cursive; }
.mu .hand-chalk { font: 400 1.1rem/1.35 "Architects Daughter", "Segoe Print", cursive; }
.mu .mu-time.hand-soon, .mu .mu-time.hand-chalk { font-size: 0.85rem; }
@media (max-width: 640px) { .mu-voice { margin-top: 6px; } }

/* ---- Research (research.js; the founder, 2026-10-20: "FOR RESERACH, CREATE A Math BOARD , paper and article stickers.
   things around that area", then "for research, a math board, sticking articles and some stuff in the open space";
   2026-10-22: "we make the board fully green we can stick and write things anywhere"): the whole free wall a chalkboard,
   green from edge to edge (and round it, darker), written on anywhere, its chalk tray a ledge along the foot of the
   screen; papers (a first page under a bulldog clip), article stickers (peeling at a corner), sticky notes and taped-up
   pictures stuck anywhere on it ---- */
.slate.is-research { display: block; position: relative; overflow: hidden; }
.slate.is-research .slate-title, .slate.is-research .slate-sub { display: none; }
.rs, .ar { --board-hi: #314D3E; --board: #294335; --board-lo: #213629; --board-rim: #17261D; --chalk-dim: rgba(244, 241, 230, 0.6); background: var(--board); }
/* (in the dark, a blackboard: 2026-10-23 night, "the research mode, the dark mode becomes black board") */
:root[data-theme="dark"] .rs, :root[data-theme="dark"] .ar { --board-hi: #2A2C2D; --board: #1F2122; --board-lo: #171819; --board-rim: #0E0F10; }
.rs[hidden] { display: none; }
.rs-defs { position: absolute; width: 0; height: 0; }

/* the board: all of the wall */
.rs .rs-world { background: radial-gradient(ellipse 26% 22% at 36% 34%, rgba(255, 255, 255, 0.06), transparent 70%), radial-gradient(ellipse 22% 20% at 66% 68%, rgba(255, 255, 255, 0.045), transparent 70%), linear-gradient(160deg, var(--board-hi), var(--board) 55%, var(--board-lo));
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.35); }
.rs .rs-world::before, .ar .ar-world::before { content: ""; position: absolute; inset: 0; background: url("grain.png") 0 0 / 200px 200px repeat; opacity: 0.16; mix-blend-mode: screen; pointer-events: none; }
.rs-ink { position: absolute; left: 0; top: 0; z-index: 1; width: 120000px; height: 80000px; touch-action: none; cursor: crosshair; }
/* (the board all but endless: as big as research.js's WALL_W x WALL_H, the same green beyond it, so no edge is seen) */
.rs .rs-world { width: 120000px; height: 80000px; }
/* (the board's tiny patterns: deep.js's canvas, under the chalk, over the board's own colour (the board itself clear,
   so it shows); it moves and scales with the board) */
.rs, .ar { background-image: linear-gradient(160deg, var(--board-hi), var(--board) 55%, var(--board-lo)); }
.rs .rs-world, .ar .ar-world { background: none; z-index: 1; }
.rs-deep { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* (Article's wall on the board's look, since 2026-10-25: "just the board and it's texture. everyother feature stays as
   before": the same green (a blackboard in the dark), grain and tiny patterns (deep.js, article.js) under the title
   tapes, the grain past the wall's own edges too, as they're seen zoomed far out; its words on it in chalk) */
.ar .ar-world::before { inset: -8000px; }
.ar .fw-empty, .ar .fw-hint, .ar .ar-tape-meta { color: var(--chalk-dim); }
.ar .ar-tape:focus-visible .ar-tape-meta { color: #F4F1E6; }

.rs-ink[data-tool="type"] { cursor: text; }
.rs-ink[data-tool="duster"] { cursor: cell; }
.rs-ink[data-tool="move"] { cursor: grab; }
.rs-tiles { position: absolute; inset: 0; pointer-events: none; }
.rs-tile { position: absolute; display: block; max-width: none; pointer-events: none; }
.rs-maths { position: absolute; inset: 0; pointer-events: none; }
.rs-math { position: absolute; line-height: 1.1; white-space: nowrap; filter: url(#rs-chalk); }
.rs-math math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; color: inherit; margin: 0; }
.rs-math .rs-ans { color: #F2D873; }
.rs-math.is-typing { min-width: 60px; min-height: 1.1em; outline: 2px dashed currentColor; outline-offset: 10px; border-radius: 4px; filter: none; }
.rs-math.is-blank::after { content: "…"; opacity: 0.6; }

/* its tray, four keys in the middle of the screen's foot (2026-10-23: "the bottom panel for the 4 options of 2 markers,
   1 eraser, calculator"): a short wooden ledge, a well for each of white chalk, yellow chalk, the duster and the
   calculator; the one in hand lifted in its well. It goes while maths is being typed */
.rs-tray { position: absolute; left: 50%; bottom: 12px; z-index: 10; display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 9px; border-radius: 8px 8px 14px 14px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, rgba(60, 30, 10, 0.1) 0 2px, transparent 2px 13px), linear-gradient(180deg, #A5743F, #84552F 55%, #5E3B22);
  box-shadow: inset 0 2px 0 rgba(255, 230, 190, 0.3), 0 14px 22px -10px rgba(0, 0, 0, 0.6); }
.rs.is-typing .rs-tray { display: none; }
.rs .rs-hint { bottom: 90px; max-width: calc(100% - 400px); color: var(--chalk-dim); }
.rs.is-typing .rs-hint { display: none; }
.rs-tool { flex: none; display: grid; place-items: center; width: 56px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: rgba(40, 22, 10, 0.36); cursor: pointer; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); }
.rs-tool:hover { background: rgba(40, 22, 10, 0.5); }
.rs-tool[aria-pressed="true"] { background: rgba(255, 246, 230, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 246, 230, 0.7), inset 0 2px 5px rgba(0, 0, 0, 0.3); }
.rs-tool:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; }
.rs-tool i, .rs-calc-i { transition: transform 0.15s ease; }
.rs-stick i { display: block; width: 40px; height: 12px; border-radius: 3px 7px 7px 3px; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 2px 3px rgba(0, 0, 0, 0.4); transform: rotate(-24deg); }
.rs-stick.is-white i { --c: #F4F1E6; }
.rs-stick.is-yellow i { --c: #F2D873; }
.rs-stick[aria-pressed="true"] i { transform: translateY(-3px) rotate(-36deg); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 7px 9px rgba(0, 0, 0, 0.35); }
.rs-duster i { display: block; width: 40px; height: 22px; border-radius: 5px; background: linear-gradient(180deg, #D2AE80 0 52%, #4E535A 52%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.rs-duster[aria-pressed="true"] i { transform: translateY(-3px) rotate(-8deg); box-shadow: 0 7px 9px rgba(0, 0, 0, 0.35); }
.rs-calc-i { width: 30px; height: 36px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
.rs-calc-body { fill: #3B4046; }
.rs-calc-lcd { fill: #B8C79E; }
.rs-calc-keys rect { fill: #E9E2D3; }
.rs-calc-eq { fill: #F2D873; }
.rs-calc[aria-pressed="true"] .rs-calc-i { transform: translateY(-3px) rotate(-7deg); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.35)); }
/* the highlighter, the fifth key (2026-10-23): a fat yellow marker; an area dragged out with it, yellow and dashed, and
   under it "Make it a paper" (Claude) */
.rs-hl-i { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); transition: transform 0.15s ease; }
.rs-hl-b { fill: #F2D873; }
.rs-hl-n { fill: #3B4046; }
.rs-hl-t { fill: #D9B23F; }
.rs-hl-m { fill: none; stroke: rgba(242, 216, 115, 0.55); stroke-width: 5; stroke-linecap: round; }
.rs-hl[aria-pressed="true"] .rs-hl-i { transform: translateY(-3px) rotate(-6deg); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.35)); }
.rs-ink[data-tool="highlight"] { cursor: crosshair; }
.rs-hl-box { position: absolute; z-index: 3; border: 2px dashed rgba(242, 216, 115, 0.95); border-radius: 6px; background: rgba(242, 216, 115, 0.14); pointer-events: none; }
.rs-hl-box[hidden], .rs-hl-do[hidden] { display: none; }
/* (an area to solve, dragged with the calculator: in blue chalk) */
.rs-hl-box.is-solve { border-color: rgba(168, 207, 242, 0.95); background: rgba(168, 207, 242, 0.12); }
@keyframes rs-hl-writing { 50% { background: rgba(242, 216, 115, 0.3); } }
@media (prefers-reduced-motion: no-preference) { .rs-hl-box.is-writing { animation: rs-hl-writing 1.4s ease-in-out infinite; } }
.rs-hl-do { position: absolute; z-index: 7; display: flex; align-items: center; gap: 6px; }
.rs-hl-go { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: #F2D873; color: #2B2A26; font: 700 0.86rem/1 var(--sans); white-space: nowrap; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.rs-hl-go:hover { background: #F6E08E; }
.rs-hl-go:disabled { cursor: progress; opacity: 0.9; }
.rs-hl-go .i { width: 15px; height: 15px; fill: none; stroke: #C96A48; stroke-width: 2.6; stroke-linecap: round; }
.rs-hl-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(28, 40, 33, 0.85); color: #FFFFFF; cursor: pointer; }
.rs-hl-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.rs-hl-go:focus-visible, .rs-hl-x:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; }
/* a graph Claude plotted (plot.js): chalk drawn straight on the board, no frame, no tape */
.rs-item.rs-pic.is-graph { padding: 0; background: none; box-shadow: none; }
.rs-item.rs-pic.is-graph .rs-tape { display: none; }
.rs-item.rs-pic.is-graph .rs-photo { background: none; }
.rs-item.rs-pic.is-graph .rs-photo img { object-fit: contain; }
/* (a paper being read: the talk and its cord out of its way, back with the board) */
body.is-reading .rm.is-live .rm-live, body.is-reading .rm.is-live .rm-cord, body.is-reading .rm.is-live .rm-bubble { display: none; }
.rd-fig canvas.rd-graph { display: block; width: 100%; height: auto; border-radius: 4px; }
/* the briefcase top right (2026-10-23: "add a briefcase on top to save works"), its works hanging out beside it; the
   trash basket bottom left ("trash basket onn the side"); the foot's right is the room's talk (room.js). The zoom (off
   for a while: "take off the zoom buttom for now") back at the top edge, just left of light and dark ("add the zoom
   feature close to the light and dark mode"), as faint as the notch */
.rs .fw-zoom { left: auto; right: calc(max(var(--gutter), (100vw - var(--max)) / 2 + var(--gutter)) + 46px); top: 8px; bottom: auto; padding: 2px; border-color: rgba(244, 241, 230, 0.1); background: rgba(16, 26, 20, 0.12); box-shadow: none; }
.rs .fw-zoom .icon-btn, .rs .fw-zoom .tt-zoom-level { color: #F4F1E6; }
.rs .fw-zoom .icon-btn:hover, .rs .fw-zoom .tt-zoom-level:hover { background: rgba(244, 241, 230, 0.12); }
.rs-case { position: absolute; right: 12px; top: 10px; z-index: 11; display: grid; place-items: center; width: 54px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4)); transition: transform 0.15s ease; }
.rs-case:hover { transform: translateY(-1px); }
.rs-case[aria-expanded="true"] { transform: translateY(-2px) rotate(-5deg); }
.rs-case:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; border-radius: 10px; }
.rs-case-i { width: 48px; height: 40px; }
.rs-case-b { fill: #8A5A33; }
.rs-case-h { fill: none; stroke: #5E3B22; stroke-width: 3; stroke-linecap: round; }
.rs-case-f { stroke: #6B4426; stroke-width: 1.4; }
.rs-case-s { fill: none; stroke: rgba(255, 230, 190, 0.45); stroke-width: 0.8; stroke-dasharray: 2 2; }
.rs-case-c { fill: #D9B45A; stroke: #9C7A2C; stroke-width: 0.6; }
.rs-works { position: absolute; right: 70px; top: 12px; z-index: 12; display: flex; flex-direction: column; gap: 10px; width: 280px; max-height: calc(100% - 110px); padding: 2px 8px 10px 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rs-works[hidden] { display: none; }
.rs-works-do { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rs-works-do .pill-btn { min-height: 34px; box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.6); }
.rs-works-do .pill-btn:not(.rs-go) { background: var(--surface); }
.rs-works-do .rs-go { background: var(--leaf); color: var(--bg); }
.rs-works-say { margin: 0; color: #FFFFFF; font: 600 0.84rem/1.35 var(--sans); text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.rs-works-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rs-works-list li { position: relative; }
.rs-work { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 5px; background: #FBF8F0; color: #2B2A26; text-align: left; cursor: pointer; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.6); transform: rotate(var(--tilt, -0.6deg)); }
.rs-works-list li:nth-child(even) .rs-work { --tilt: 0.7deg; }
.rs-work img { grid-row: span 2; width: 96px; height: 60px; border-radius: 3px; object-fit: cover; }
.rs-work b { align-self: end; font: 700 0.84rem/1.25 var(--sans); overflow-wrap: anywhere; }
.rs-work small { align-self: start; color: #6E6A60; font: 500 0.72rem/1.3 var(--sans); }
.rs-work:hover { background: #FFFFFF; }
.rs-work.is-here { box-shadow: 0 0 0 2px #F2D873, 0 10px 18px -10px rgba(0, 0, 0, 0.6); }
.rs-work:focus-visible, .rs-work-x:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; }
.rs-work-x { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #3B4046; color: #FFFFFF; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.rs-work-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.rs-bin { position: absolute; left: 12px; bottom: 10px; z-index: 10; display: grid; place-items: end center; width: 56px; height: 62px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4)); transform-origin: 50% 100%; transition: transform 0.15s ease; }
.rs-bin-i { width: 48px; height: 52px; overflow: visible; }
.rs-bin-w { fill: rgba(20, 30, 25, 0.35); stroke: #C9CED3; stroke-width: 1.8; stroke-linejoin: round; }
.rs-bin-g { fill: none; stroke: rgba(201, 206, 211, 0.75); stroke-width: 1; }
.rs-bin-r { stroke: #E3E7EA; stroke-width: 3; stroke-linecap: round; }
.rs-bin-p circle { display: none; fill: #F4EEDF; stroke: rgba(0, 0, 0, 0.18); stroke-width: 0.8; }
.rs-bin[data-n="1"] .rs-bin-p circle:nth-child(-n+1), .rs-bin[data-n="2"] .rs-bin-p circle:nth-child(-n+2), .rs-bin[data-n="3"] .rs-bin-p circle { display: inline; }
.rs-bin:hover, .rs-bin.is-over { transform: scale(1.12) rotate(-4deg); }
.rs-bin.is-over .rs-bin-r { stroke: #F2D873; }
.rs-bin:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; border-radius: 10px; }
@keyframes rs-gulp { 0% { transform: scale(1.12); } 40% { transform: scale(0.92, 1.06); } 70% { transform: scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .rs-bin.is-gulp { animation: rs-gulp 0.45s ease-out; } }
.rs.is-typing .rs-bin { display: none; }
@media (max-width: 640px) {
  .rs-case { top: 48px; right: 6px; }
  /* (a phone: the zoom down the right edge under light and dark, the briefcase below it) */
  .rs .fw-zoom { right: 4px; top: 42px; flex-direction: column; }
  .rs .fw-zoom .tt-zoom-level { display: none; }
  .rs-works { right: 62px; top: 48px; width: min(280px, calc(100vw - 76px)); }
}
/* a phone: the keys a little smaller (to the left of the middle on the narrowest, clear of the talk's cord) */
@media (max-width: 640px) {
  .rs-tray { bottom: 10px; height: 58px; padding: 0 7px; gap: 5px; }
  .rs-tool { width: 46px; height: 44px; }
  .rs-stick i { width: 36px; }
  .rs-duster i { width: 36px; height: 20px; }
  .rs .rs-hint { left: 12px; bottom: 80px; max-width: calc(100% - 24px); font-size: 1rem; }
}
@media (max-width: 400px) { .rs-tray { left: 70px; transform: none; gap: 3px; padding: 0 5px; } .rs-tool { width: 42px; } .rs-stick i, .rs-duster i { width: 32px; } .rs-calc-i, .rs-hl-i { width: 26px; height: 30px; } }
@media (max-width: 340px) { .rs-tray { left: 10px; } .rs-bin { bottom: 74px; } }

/* typing maths: the line under the wall, keys for what's hard to type */
.rs-typer { position: absolute; left: 50%; bottom: 14px; z-index: 12; width: min(800px, calc(100% - 24px)); padding: 10px 12px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 40px -20px rgba(var(--shade), 0.6); transform: translateX(-50%); }
.rs-typer[hidden] { display: none; }
.rs-typer-row { display: flex; align-items: center; gap: 8px; }
.rs-typer-mark { flex: none; font: 600 1.4rem/1 var(--display); color: var(--ink-2); }
.maker .rs-typer .rs-src { min-width: 0; font: 500 1.05rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.rs-typed, .rs-make .rs-go, .rs-card-go .rs-open { background: var(--leaf); color: var(--bg); }
.rs-keys { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.rs-key { min-width: 36px; height: 32px; padding: 0 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--ink); font: 500 1.02rem/1 "Cambria Math", "STIX Two Math", serif; cursor: pointer; }
.rs-key:hover { background: var(--wash); }
.rs.is-typing .fw-zoom, .rs.is-typing .fw-hint { display: none; }

/* the bar: a search of the internet (Claude Sonnet 5.5, websearch.js; 2026-10-23), or a link stuck up */
.rs-get { display: flex; gap: 6px; width: min(540px, calc(100vw - 60px)); }
/* (the bar off the board, 2026-10-23: "take off the search bar since claude can search and paste on the wall": @claude in
   the talk searches and sticks things up; a link pasted on the board still is. Its search kept, unseen: research.js) */
.rs .rs-get, .rs .rs-found { display: none; }
/* + Note and + Picture (2026-10-23, the founder's sketch): round + buttons, their names beside them in chalk, Picture a
   step below and to the right of Note; fixed at the board's top left wherever one is on it (not following the mouse),
   grown and shrunk with the zoom (--z, from freewall.js), within reason */
.rs .rs-make { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; transform: scale(clamp(0.6, var(--z, 1), 1.8)); transform-origin: 0 0; }
.rs-add { display: inline-flex; align-items: center; gap: 9px; padding: 2px 6px 2px 2px; border: 0; border-radius: 999px; background: none; color: #F4F1E6; cursor: pointer; }
.rs-add.rs-new-pic { margin-left: 34px; }
.rs-add-o { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--rule); transition: transform 0.12s ease; }
.rs-add-o .i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.rs-add-t { font: 600 1.45rem/1 "Caveat", "Segoe Print", cursive; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.rs-add:hover .rs-add-o { transform: scale(1.08); }
.rs-add:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; }
.maker .rs-get .rs-q { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 8px 22px -14px rgba(var(--shade), 0.5); }
/* what it found: the web (an overview citing its sources, the sources), papers; each stuck up with one press */
.rs-found { position: absolute; left: 0; top: calc(100% + 6px); z-index: 3; display: flex; flex-direction: column; width: min(660px, calc(100vw - 40px)); max-height: 72vh; margin: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: 0 22px 46px -22px rgba(var(--shade), 0.65); }
.rs-found[hidden] { display: none; }
.rs-found [hidden] { display: none !important; }
.rs-found-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--rule); }
.rs-tabs { flex: none; }
.rs-tab-n { margin-left: 3px; font-weight: 700; opacity: 0.6; font-variant-numeric: tabular-nums; }
.rs-tab-n:empty { display: none; }
.rs-found-q { flex: 1; min-width: 0; overflow: hidden; font: 600 0.95rem/1.2 var(--display); color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.rs-found-body { flex: 1; min-height: 0; padding: 6px 12px 10px; overflow-y: auto; overscroll-behavior: contain; }
.rs-found-state { margin: 10px 4px; font: 500 0.88rem/1.45 var(--sans); color: var(--ink-2); }
.rs-found-state.is-error { color: var(--accent-ink); }
.rs-found-state.is-wait::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 8px; border: 2px solid var(--rule); border-top-color: var(--ink-2); border-radius: 50%; vertical-align: -2px; animation: rs-spin 0.8s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-found-state .pill-btn { margin-top: 8px; background: var(--leaf); color: var(--bg); }
.rs-again { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.rs-overview { margin: 8px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--wash); font: 400 1.02rem/1.5 var(--serif); color: var(--ink); }
.rs-overview p { margin: 0 0 0.6em; }
.rs-overview p:last-child { margin-bottom: 0; }
.rs-cite { padding: 0 1px; border: 0; background: none; color: var(--accent-ink); font: 700 0.68rem/1 var(--sans); cursor: pointer; }
.rs-cite:hover { text-decoration: underline; }
.rs-hits { margin: 0; padding: 0; list-style: none; }
.rs-hit { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--rule); border-radius: 8px; }
.rs-hit:last-child { border-bottom: 0; }
.rs-hit.is-lit { animation: rs-lit 1.4s ease; }
@keyframes rs-lit { 0%, 40% { background: var(--sage-wash); } 100% { background: transparent; } }
.rs-hit-n { flex: none; min-width: 1.4em; padding-top: 2px; font: 700 0.72rem/1.2 var(--sans); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rs-hit-t { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-hit-title { font: 600 1.02rem/1.25 var(--display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.rs-hit-title:hover { text-decoration: underline; }
.rs-hit-meta { overflow: hidden; font: 500 0.76rem/1.3 var(--sans); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.rs-hit-words { margin: 2px 0 0; font: 400 0.86rem/1.4 var(--serif); color: var(--ink-2); }
.rs-hit-go { flex: none; min-height: 30px; padding: 0 12px; font-size: 0.8rem; }
.rs-hit-go:disabled { opacity: 0.6; cursor: default; }
.rs-found-by { flex: none; margin: 0; padding: 7px 14px 9px; border-top: 1px solid var(--rule); font: 500 0.72rem/1.3 var(--sans); color: var(--muted); }
.rs-found-by:empty { display: none; }

/* a card: what it is, open it, your notes */
.rs-card { position: absolute; right: 14px; top: 64px; bottom: 14px; z-index: 13; display: flex; flex-direction: column; gap: 9px; width: min(380px, calc(100% - 28px)); padding: 16px 18px; overflow: auto; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 20px 44px -22px rgba(var(--shade), 0.6); }
.rs-card[hidden] { display: none; }
.rs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rs-card-kind { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rs-card-title { margin: 0; font: 600 1.35rem/1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.rs-card-by { margin: 0; font: 500 0.9rem/1.35 var(--sans); color: var(--ink-2); }
.rs-card-where { margin: 0; font: 400 0.8125rem/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.rs-card-by:empty, .rs-card-where:empty { display: none; }
.rs-card-abs { flex: none; max-height: 220px; margin: 0; overflow: auto; font: 400 1rem/1.45 var(--display); color: var(--ink); }
.rs-card-abs[hidden] { display: none; }
.rs-card-go { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-card-go a { text-decoration: none; }
.rs-card-go [hidden] { display: none; }
.rs-card-notes-l { display: flex; flex-direction: column; gap: 6px; font: 600 0.8125rem/1.2 var(--sans); color: var(--ink-2); }
.maker .rs-card .rs-card-notes { min-height: 130px; max-height: none; font: 500 1.1rem/1.35 var(--display); resize: vertical; }
.rs-card-down { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--muted); font: 500 0.8125rem/1 var(--sans); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .rs-card { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72%; } .rs-get { width: calc(100vw - 40px); } }

/* what is stuck round it */
.rs-item { position: absolute; z-index: 2; transform: rotate(var(--r, 0deg)); transform-origin: 50% 20%; cursor: grab; }
.rs-item.is-held { cursor: grabbing; }
.rs-item.is-new { animation: fw-stick 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
.rs-item:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 4px; }
.rs-x { position: absolute; right: -11px; top: -11px; z-index: 6; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.rs-item:hover .rs-x, .rs-x:focus-visible { opacity: 1; }
/* who: the faces of who stuck it up (first) and who has worked on it since (2026-10-23: "a profile attatched to whoever
   stuck the papers", "and more depending on how many people contributed"), on a tag at its foot */
.rs-who { position: absolute; left: 10px; bottom: -13px; z-index: 5; display: flex; align-items: center; max-width: calc(100% - 20px); padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(28, 40, 33, 0.88); color: #FFFFFF; font: 600 0.72rem/1 var(--sans); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.55); cursor: default; }
.rs-who .rs-who-av { width: 22px; height: 22px; margin-right: -6px; font-size: 0.62rem; box-shadow: 0 0 0 2px rgba(28, 40, 33, 0.95); }
.rs-who-n { min-width: 0; margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none) { .rs-x { opacity: 0.85; } }
.rs-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fw.is-panning .rs-x { opacity: 0; }
.rs-flag { position: absolute; right: -16px; bottom: 22px; z-index: 4; display: -webkit-box; max-width: 132px; padding: 8px 10px; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; background: linear-gradient(170deg, #FCF1B8, #F5E192); color: #2A2620; font: 700 1rem/1.12 "Caveat", "Segoe Print", cursive; transform: rotate(5deg); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.45); pointer-events: none; }
.rs-flag[hidden] { display: none; }
/* a paper: its first page, under a bulldog clip */
.rs-paper .tk-clip { z-index: 3; }
.rs-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 32px 20px 18px; overflow: hidden; background: #FDFCF8; color: #1D1D1D; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 24px -14px rgba(0, 0, 0, 0.45); }
.rs-page::before { content: ""; position: absolute; inset: 0; background: url("grain.png") 0 0 / 200px 200px repeat; opacity: 0.22; pointer-events: none; }
.rs-item.is-open .rs-page, .rs-item.is-open .rs-sticker { box-shadow: 0 0 0 3px var(--ink-2), 0 16px 24px -14px rgba(0, 0, 0, 0.45); }
.rs-p-where { display: -webkit-box; flex: none; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 700 0.6rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #6A6A6A; }
.rs-paper.is-arxiv .rs-p-where { color: #B31B1B; }
.rs-p-title { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font: 700 1.08rem/1.18 var(--display); text-align: center; overflow-wrap: anywhere; }
.rs-p-by { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: italic 400 0.74rem/1.3 var(--display); color: #444; text-align: center; }
.rs-p-abs { display: -webkit-box; margin: 4px 0 0; overflow: hidden; -webkit-line-clamp: 7; -webkit-box-orient: vertical; font: 400 0.66rem/1.38 var(--display); color: #333; text-align: justify; }
.rs-p-abs:empty { display: none; }
.rs-p-lines { flex: 1; min-height: 16px; opacity: 0.6; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.17) 0 2px, transparent 2px 9px) left top / 46% 100% no-repeat, repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.17) 0 2px, transparent 2px 9px) right top / 46% 100% no-repeat; }
/* a Wikipedia article prepared as a paper (2026-10-23): its first page, the Wikipedia mark, its picture, how long to read */
.rs-w-mark { display: inline-grid; flex: none; place-items: center; width: 15px; height: 15px; margin-right: 6px; border: 1px solid currentColor; border-radius: 50%; font: 600 0.6rem/1 var(--display); letter-spacing: 0; text-transform: none; vertical-align: -2px; }
.rs-paper.is-wiki .rs-p-where { display: flex; align-items: center; justify-content: center; color: #3A3A3A; }
.rs-w-pic { position: relative; flex: none; display: block; height: 92px; overflow: hidden; background: #EEE; }
.rs-w-pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rs-paper.is-wiki:not(.has-pic) .rs-w-pic { display: none; }
.rs-paper.is-wiki .rs-p-abs { -webkit-line-clamp: 6; }
.rs-paper.is-wiki:not(.has-pic) .rs-p-abs { -webkit-line-clamp: 11; }
.rs-w-foot { position: relative; flex: none; margin: 0; font: 700 0.56rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A2A; text-align: center; }
/* an article: a sticker, peeling at its corner */
.rs-sticker { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px; overflow: hidden; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 3px rgba(0, 0, 0, 0.12), 0 16px 24px -14px rgba(0, 0, 0, 0.45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%); }
.rs-a-pic { flex: none; display: block; height: 140px; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #E4E9EC, #CBD5DA); }
.rs-a-pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rs-article:not(.has-pic) .rs-a-pic { height: 46px; background: repeating-linear-gradient(135deg, #E8E2D4 0 10px, #F1ECE1 10px 20px); }
.rs-a-site { margin: 10px 6px 0; overflow: hidden; font: 700 0.68rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8A6A2A; white-space: nowrap; text-overflow: ellipsis; }
.rs-a-title { display: -webkit-box; margin: 5px 6px 0; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; font: 700 1.05rem/1.22 var(--display); color: #1D1D1D; overflow-wrap: anywhere; }
.rs-article:not(.has-pic) .rs-a-title { -webkit-line-clamp: 8; }
.rs-peel { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; background: linear-gradient(to bottom right, #DCD8CC 0%, #F6F4EE 48%, transparent 50%); filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.22)); pointer-events: none; }
/* a note: a sticky note, written on */
.rs-note { color: #2A2620; }
.maker .rs .rs-note-text { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-height: none; padding: 22px 16px 14px; overflow: hidden; border: 0; border-radius: 0; outline: none; background: transparent !important; box-shadow: none !important; color: inherit; resize: none; font: 700 1.45rem/1.18 "Caveat", "Segoe Print", cursive; }
.rs-note .rs-note-text::placeholder { color: currentColor; opacity: 0.4; }
.rs-note.is-blue { color: #1F3A66; }
.rs-note.is-blue .tk-paper { background: linear-gradient(170deg, #DDEBFA 0%, #BED6F1 100%); }
.rs-note.is-mint { color: #1E4A2C; }
.rs-note.is-mint .tk-paper { background: linear-gradient(170deg, #DEF3E3 0%, #BEE2C7 100%); }
/* a picture, taped up */
.rs-item.rs-pic { padding: 10px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 24px -14px rgba(0, 0, 0, 0.45); }
.rs-photo { display: block; width: 100%; height: 100%; overflow: hidden; background: #EEE; }
.rs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rs-tape { position: absolute; left: 50%; top: -12px; z-index: 2; width: 88px; height: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.03)), rgba(238, 229, 205, 0.72); transform: translateX(-50%) rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 2%, 20% 6%, 80% 4%, 86% 0, 92% 8%, 97% 1%, 100% 9%, 100% 92%, 95% 100%, 89% 91%, 83% 99%, 78% 94%, 20% 96%, 14% 100%, 8% 91%, 3% 98%, 0 90%); pointer-events: none; }
@media (max-width: 640px) { .rs-make .pill-btn { min-height: 32px; } }

/* ---- a Wikipedia article read as a paper (research.js, wikiread.js; 2026-10-23: "it should extract the article and
   prepare it as an intuitive readable paper"): over the board, a page of paper: its title and what it is, its lead as the
   abstract, contents, numbered sections, numbered figures, maths, citations that show their reference, the references at
   the end; its contents down the side on a wide screen, the notes on it beside it; words chosen stuck on the board ---- */
.rs-read { --rd-z: 1; --rd-paper: #FDFCF8; --rd-ink: #22201C; --rd-muted: #6B665C; --rd-rule: rgba(34, 32, 28, 0.14); --rd-accent: #8A6A2A; --rd-wash: rgba(138, 106, 42, 0.07); --rd-desk: #17261D; --rd-chalk: #F4F1E6;
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; background: var(--rd-desk); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rs-read { --rd-paper: #22231F; --rd-ink: #ECE7DC; --rd-muted: #ABA597; --rd-rule: rgba(236, 231, 220, 0.16); --rd-accent: #D6B46A; --rd-wash: rgba(214, 180, 106, 0.09); --rd-desk: #101A14; } }
:root[data-theme="dark"] .rs-read { --rd-paper: #22231F; --rd-ink: #ECE7DC; --rd-muted: #ABA597; --rd-rule: rgba(236, 231, 220, 0.16); --rd-accent: #D6B46A; --rd-wash: rgba(214, 180, 106, 0.09); --rd-desk: #101A14; }
.rs-read[hidden] { display: none; }
.rs-read [hidden] { display: none !important; }
.rd-bar { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px; background: rgba(0, 0, 0, 0.22); color: var(--rd-chalk); }
.rd-back { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: none; color: inherit; font: 600 0.9rem/1 var(--sans); cursor: pointer; }
.rd-back:hover { background: rgba(255, 255, 255, 0.08); }
.rd-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd-bar-title { flex: 1; min-width: 0; overflow: hidden; font: 600 1.05rem/1.2 var(--display); white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; }
.rd-size { flex: none; background: rgba(255, 255, 255, 0.1); }
.rd-size button { color: var(--rd-chalk); }
.rs-read .rd-open { flex: none; min-height: 34px; border-color: rgba(244, 241, 230, 0.4); background: rgba(255, 255, 255, 0.08); color: var(--rd-chalk); text-decoration: none; }
.rs-read .rd-open:hover { background: rgba(255, 255, 255, 0.16); }
.rd-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.rd-scroll:focus { outline: none; }
.rd-layout { display: grid; grid-template-columns: 1fr minmax(0, 760px) 1fr; align-items: start; gap: 28px; padding: 26px 18px 70px; }
.rd-toc { position: sticky; top: 18px; grid-column: 1; justify-self: end; width: 210px; max-height: calc(100vh - 170px); overflow-y: auto; color: var(--rd-chalk); }
.rd-toc-h { margin: 0 0 8px; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.rd-toc-list { margin: 0; padding: 0; list-style: none; }
.rd-toc-list button { display: flex; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: 500 0.82rem/1.3 var(--sans); text-align: left; cursor: pointer; }
.rd-toc-list button:hover { background: rgba(255, 255, 255, 0.08); }
.rd-toc-list .is-sub button { padding-left: 22px; font-size: 0.76rem; opacity: 0.78; }
.rd-toc .rd-num { opacity: 0.6; }
.rd-paper { grid-column: 2; min-width: 0; padding: 54px 62px 44px; border-radius: 3px; background: var(--rd-paper); color: var(--rd-ink); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 40px 70px -40px rgba(0, 0, 0, 0.7); font: 400 calc(1.14rem * var(--rd-z))/1.62 var(--serif); font-kerning: normal; overflow-wrap: break-word; }
.rd-kicker { display: flex; align-items: center; margin: 0; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-accent); }
.rd-title { margin: 14px 0 6px; font: 600 calc(2.7rem * var(--rd-z))/1.06 var(--display); letter-spacing: -0.005em; }
.rd-desc { margin: 0; font-style: italic; color: var(--rd-muted); }
.rd-desc:empty { display: none; }
.rd-meta { margin: 16px 0 0; padding: 10px 0; border-top: 1px solid var(--rd-rule); border-bottom: 1px solid var(--rd-rule); font: 500 0.78rem/1.4 var(--sans); color: var(--rd-muted); }
.rd-meta:empty { display: none; }
.rd-label { margin: 0 0 8px; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-accent); }
.rd-abstract { margin: 26px 0 0; padding: 18px 22px 8px; border-left: 3px solid var(--rd-accent); background: var(--rd-wash); }
.rd-abs, .rd-abs-body { font-size: 0.96em; }
.rd-contents { margin: 26px 0 0; }
.rd-contents .rd-toc-list { columns: 2 220px; column-gap: 24px; }
.rd-contents .rd-toc-list button { padding: 3px 0; font: 500 0.86rem/1.35 var(--sans); color: var(--rd-ink); break-inside: avoid; }
.rd-contents .rd-toc-list button:hover { background: none; text-decoration: underline; }
.rd-contents .rd-num { min-width: 1.4em; color: var(--rd-accent); }
.rd-state { margin: 24px 0 0; font: 500 0.9rem/1.4 var(--sans); color: var(--rd-muted); }
.rd-state.is-error { color: var(--accent-ink, #8E1537); }
.rd-p, .rd-dd, .rd-dt { margin: 0 0 0.9em; text-align: justify; hyphens: auto; }
.rd-dt { font-weight: 700; margin-bottom: 0.3em; }
.rd-dd { margin-left: 1.6em; text-align: left; }
.rd-h { position: relative; scroll-margin-top: 16px; }
.rd-h2 { margin: 1.9em 0 0.55em; font: 600 calc(1.7rem * var(--rd-z))/1.15 var(--display); }
.rd-h3 { margin: 1.5em 0 0.45em; font: 600 calc(1.32rem * var(--rd-z))/1.2 var(--display); }
.rd-h4 { margin: 1.2em 0 0.35em; font: 700 0.95em/1.3 var(--serif); font-style: italic; }
.rd-h .rd-num { margin-right: 0.45em; color: var(--rd-accent); font-variant-numeric: lining-nums tabular-nums; }
.rd-list { margin: 0 0 0.9em; padding-left: 1.5em; }
.rd-list li { margin: 0.2em 0; }
.rd-quote-block { margin: 0 0 1em; padding: 4px 0 4px 1.2em; border-left: 2px solid var(--rd-rule); color: var(--rd-muted); }
.rd-fig { margin: 1.5em auto; text-align: center; break-inside: avoid; }
.rd-fig img { display: block; max-width: min(100%, 460px); height: auto; margin: 0 auto; border-radius: 2px; background: var(--rd-wash); }
.rd-fig figcaption { max-width: 460px; margin: 8px auto 0; font: 400 0.84em/1.45 var(--serif); color: var(--rd-muted); text-align: left; }
.rd-fig figcaption b { color: var(--rd-ink); }
.rd-paper math { font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math; font-size: 1.04em; }
.rd-paper math[display="block"] { margin: 0.7em 0; overflow-x: auto; overflow-y: hidden; }
.rd-paper a { color: inherit; text-decoration: underline; text-decoration-color: var(--rd-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rd-paper a:hover { color: var(--rd-accent); }
.rd-cite { line-height: 0; }
.rd-cite button { padding: 0 1px; border: 0; background: none; color: var(--rd-accent); font: 700 0.66em/1 var(--sans); cursor: pointer; }
.rd-cite button:hover { text-decoration: underline; }
.rd-table-wrap { margin: 0 0 1.2em; overflow-x: auto; }
.rd-table { border-collapse: collapse; font: 400 0.8em/1.35 var(--sans); }
.rd-table caption { margin-bottom: 6px; font-weight: 600; text-align: left; }
.rd-table th, .rd-table td { padding: 5px 9px; border: 1px solid var(--rd-rule); vertical-align: top; text-align: left; }
.rd-table th { background: var(--rd-wash); }
.rd-refs { margin-top: 2.2em; }
.rd-ref-list { margin: 0; padding-left: 1.8em; font: 400 0.82em/1.45 var(--serif); color: var(--rd-muted); }
.rd-ref-list li { margin: 0.35em 0; scroll-margin-top: 16px; }
.rd-licence { margin: 2.4em 0 0; padding-top: 12px; border-top: 1px solid var(--rd-rule); font: 400 0.74rem/1.45 var(--sans); color: var(--rd-muted); }
.rd-side { position: sticky; top: 18px; grid-column: 3; justify-self: start; display: flex; flex-direction: column; gap: 10px; width: 250px; color: var(--rd-chalk); }
.rd-notes-l { display: flex; flex-direction: column; gap: 6px; font: 600 0.8rem/1.2 var(--sans); }
.maker .rs-read .rd-notes { min-height: 160px; padding: 10px 12px; border: 0; border-radius: 4px; background: linear-gradient(170deg, #FCF1B8, #F5E192); color: #2A2620; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.6); font: 700 1.25rem/1.2 "Caveat", "Segoe Print", cursive; resize: vertical; }
.rd-tip { margin: 0; font: 400 0.8rem/1.4 var(--sans); opacity: 0.7; }
.rd-down { align-self: flex-start; padding: 0; border: 0; background: none; color: inherit; font: 500 0.8rem/1 var(--sans); text-decoration: underline; opacity: 0.7; cursor: pointer; }
.rd-quote { position: absolute; z-index: 3; min-height: 34px; background: var(--leaf); color: var(--bg); transform: translateX(-50%); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6); }
.rd-pop { position: absolute; z-index: 4; max-height: 50%; padding: 12px 14px; overflow: auto; border: 1px solid var(--rd-rule); border-radius: 10px; background: var(--rd-paper); color: var(--rd-ink); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); font: 400 0.86rem/1.45 var(--serif); }
.rd-pop a { color: inherit; text-decoration-color: var(--rd-accent); }
.rd-toast { position: absolute; left: 50%; top: 58px; z-index: 5; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--surface); font: 500 0.8125rem/1.3 var(--sans); transform: translateX(-50%); }
/* (narrower: no contents down the side, they are in the paper; narrower still: the notes under it) */
@container (min-width: 1360px) { .rd-contents { display: none; } }
@container (max-width: 1359px) {
  .rd-layout { grid-template-columns: minmax(0, 760px) 250px; justify-content: center; }
  .rd-toc { display: none; }
  .rd-paper { grid-column: 1; }
  .rd-side { grid-column: 2; }
}
@container (max-width: 900px) {
  .rd-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 14px 10px 50px; }
  .rd-side { position: static; grid-column: 1; width: auto; }
  .rd-paper { padding: 30px 22px 28px; }
  .rd-title { font-size: calc(2.1rem * var(--rd-z)); }
  .rd-open { display: none; }
  .rd-bar-title { display: none; }
}

/* ---- Rooms (room.js, call.js; the founder, 2026-10-21: "we will add text chat, voice chat, video chat to the side of
   each surface except the aesthetic section. each freespace becomes a conversation room"): a tab on the right edge, the
   room's panel opening from it; on a wide screen the space beside it narrows to make room, on a phone it covers it ---- */
.rm { position: fixed; right: 0; top: var(--header); bottom: 0; z-index: 60; width: 0; text-align: left; }
.rm[hidden] { display: none; }
.rm [hidden] { display: none !important; }
.rm-tab { position: fixed; right: 0; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 44px; padding: 11px 7px 11px 9px; border: 1px solid var(--rule); border-right: 0; border-radius: 16px 0 0 16px; background: var(--surface); color: var(--ink); box-shadow: -8px 10px 24px -16px rgba(var(--shade), 0.55); transform: translateY(-50%); cursor: pointer; }
.rm-tab:hover { background: var(--wash); }
.rm-tab:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.rm-tab-i svg, .rm-ib svg, .rm-cb svg, .rm-send svg, .rm-callbar .pill-btn svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-tab-i svg { width: 22px; height: 22px; }
.rm-tab-faces { display: flex; flex-direction: column; align-items: center; }
.rm-tab-faces .rm-av { width: 24px; height: 24px; margin-top: -5px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--surface); }
.rm-tab-n { font: 700 0.72rem/1 var(--sans); color: var(--ink-2); }
.rm-badge { position: absolute; left: -7px; top: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--leaf); color: var(--bg); font: 700 0.68rem/19px var(--sans); text-align: center; }
.rm-tab.has-knock { animation: rm-knock 1.4s ease-in-out infinite; }
@keyframes rm-knock { 0%, 70%, 100% { transform: translateY(-50%); } 75% { transform: translate(-3px, -50%); } 82% { transform: translate(2px, -50%); } 89% { transform: translate(-2px, -50%); } }
body.is-room-open .rm-tab { display: none; }
.rm-bubble { position: fixed; right: 58px; top: calc(50% - 18px); max-width: 250px; margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); font: 500 0.8125rem/1.3 var(--sans); box-shadow: 0 12px 26px -16px rgba(var(--shade), 0.6); cursor: pointer; overflow-wrap: anywhere; }
.rm-panel { position: fixed; right: 0; top: var(--header); bottom: 0; display: flex; width: 340px; border-left: 1px solid var(--rule); background: var(--surface); box-shadow: -16px 0 30px -26px rgba(var(--shade), 0.6); }
@media (min-width: 900px) {
  body.is-room-open .maker { padding-right: 340px; }
  body.is-room-open .tt-orbs { right: 354px; }
}
@media (max-width: 899px) { .rm-panel { left: 0; width: auto; border-left: 0; } }
.rm-head { display: flex; align-items: flex-start; gap: 4px; padding: 14px 10px 10px 16px; border-bottom: 1px solid var(--rule); }
.rm-heading { flex: 1; min-width: 0; }
.rm-kind { margin: 0; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.rm-title { margin: 4px 0 0; font: 600 1.15rem/1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.rm-sub { margin: 3px 0 0; font: 500 0.78rem/1.2 var(--sans); color: var(--muted); }
.rm-sub:empty { display: none; }
.rm-ib { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.rm-ib:hover { background: var(--wash); color: var(--ink); }
.rm-ib svg { width: 19px; height: 19px; }
.rm-note { margin: 10px 12px 0; padding: 8px 12px; border-radius: 12px; background: var(--wash); font: 500 0.8125rem/1.35 var(--sans); color: var(--ink); }
.rm-meform, .rm-door { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.rm-door { align-items: center; text-align: center; }
.rm-lead { margin: 0; font: 500 0.9rem/1.4 var(--sans); color: var(--ink-2); }
.rm-merow { display: flex; align-items: center; gap: 10px; align-self: stretch; }
.rm-pic { flex: none; width: 46px; height: 46px; padding: 0; overflow: hidden; border: 1px dashed var(--muted); border-radius: 50%; background: var(--bg); cursor: pointer; }
.rm-pic.has-pic { border-style: solid; border-color: var(--rule); }
.rm-pic .rm-av { width: 100%; height: 100%; }
.maker .rm .rm-name { min-width: 0; }
.rm .rm-go { background: var(--leaf); color: var(--bg); }
.rm-knockform { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.rm-meform .pill-btn, .rm-knockform .pill-btn { justify-content: center; }
.rm-av { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--wash); color: #FFFFFF; font: 700 0.85rem/1 var(--sans); }
.rm-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rm-av-big { width: 76px; height: 76px; font-size: 1.7rem; }
.rm-door-line { margin: 0; font: 600 1.1rem/1.3 var(--display); color: var(--ink); }
.rm-waiting { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rm-waiting-line { margin: 0; font: 500 0.9rem/1.35 var(--sans); color: var(--ink-2); }
.rm-dots { display: flex; gap: 6px; }
.rm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); animation: rm-dot 1.2s ease-in-out infinite; }
.rm-dots i:nth-child(2) { animation-delay: 0.2s; }
.rm-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes rm-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.rm-textbtn { padding: 0; border: 0; background: none; color: var(--muted); font: 500 0.8125rem/1.35 var(--sans); text-decoration: underline; text-align: left; cursor: pointer; }
.rm-textbtn:hover { color: var(--ink); }
.rm-in { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.rm-knocks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px 0; list-style: none; }
.rm-knocks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--wash); }
.rm-knock-who { flex: 1; min-width: 0; font: 600 0.875rem/1.25 var(--sans); color: var(--ink); }
.rm-knocks .pill-btn { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; }
.rm-invite { display: flex; flex-direction: column; gap: 9px; margin: 10px 12px 0; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; }
.rm-linkrow { display: flex; gap: 6px; }
.maker .rm .rm-link { min-width: 0; padding: 8px 10px; font-size: 0.78rem; }
.rm-linkdo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-members { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--rule); list-style: none; }
.rm-members li { display: flex; align-items: center; gap: 8px; font: 500 0.85rem/1.2 var(--sans); color: var(--ink); }
.rm-members li span:not(.rm-av) { flex: 1; min-width: 0; }
.rm-members .rm-av { width: 24px; height: 24px; font-size: 0.7rem; }
.rm-here { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px 4px; list-style: none; }
.rm-here li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--wash); font: 600 0.78rem/1 var(--sans); color: var(--ink); }
.rm-here .rm-av { width: 24px; height: 24px; font-size: 0.7rem; transition: box-shadow 0.12s ease; }
.rm-here li.is-call .rm-av { box-shadow: 0 0 0 2px var(--leaf); }
.rm-here li.is-speaking .rm-av { box-shadow: 0 0 0 3px var(--leaf), 0 0 10px var(--leaf); }
.rm-callbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px 10px; border-bottom: 1px solid var(--rule); }
.rm-callbar .pill-btn { gap: 6px; min-height: 34px; }
.rm-callbar .pill-btn svg { width: 16px; height: 16px; }
.rm-incall { flex: 1; font: 500 0.78rem/1.2 var(--sans); color: var(--muted); }
.rm-cb { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.rm-cb:hover { background: var(--wash); }
.rm-cb[aria-pressed="true"] { background: var(--raised); }
.rm-cb svg { width: 19px; height: 19px; }
.rm .rm-hang { border-color: transparent; background: #9A4A33; color: #FFFFFF; }
.rm .rm-hang:hover { background: #7E3A27; }
.rm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; }
.rm-tiles[data-n="1"] { grid-template-columns: 1fr; }
.rm-tile { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #2D302B; transition: box-shadow 0.12s ease; }
.rm-tile video { position: absolute; inset: 0; display: none; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rm-tile.has-video video { display: block; }
.rm-tile.has-video .rm-tile-av { display: none; }
.rm-tile.is-mine video { transform: scaleX(-1); }
.rm-tile-av { width: 54px; height: 54px; font-size: 1.3rem; }
.rm-tile-name { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #FFFFFF; font: 600 0.72rem/1.4 var(--sans); }
.rm-tile.is-muted .rm-tile-name::after { content: " · muted"; font-weight: 500; }
.rm-tile.is-speaking { box-shadow: inset 0 0 0 3px var(--leaf); }
.rm-talk { display: flex; flex: 1; flex-direction: column; min-height: 80px; margin: 0; padding: 6px 12px 10px; overflow-y: auto; list-style: none; }
.rm-line { display: grid; grid-template-columns: 32px 1fr; column-gap: 9px; padding-top: 10px; }
.rm-line .rm-av { grid-row: span 2; }
.rm-line.is-more { padding-top: 2px; }
.rm-line.is-more .rm-words { grid-column: 2; }
.rm-by { margin: 0 0 1px; font: 700 0.8rem/1.3 var(--sans); color: var(--ink); }
.rm-by time { font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.rm-words { margin: 0; font: 400 0.92rem/1.42 var(--sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-words a { color: var(--accent-ink); }
.rm-empty { margin: auto 0; padding: 20px 10px; font: 600 1.1rem/1.3 "Caveat", "Segoe Print", cursive; color: var(--muted); text-align: center; }
.rm-say { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--rule); }
.maker .rm .rm-text { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; font: 400 0.95rem/1.35 var(--sans); }
.rm-send { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--leaf); color: var(--bg); cursor: pointer; }
.rm-send svg { width: 18px; height: 18px; }
.rm-say.is-off { opacity: 0.5; }
.rm-leave { align-self: center; margin: 0 0 10px; }
@media (max-width: 640px) { .rm-tab { min-width: 40px; padding: 9px 5px 9px 7px; } .rm-bubble { right: 50px; } }

/* staying (2026-10-21: "once someone they can stay like adiscord server"): the rail of the rooms one belongs to, down the
   panel's side; members away, dimmed; the two ways out */
.rm-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rm-rail { display: flex; flex: none; flex-direction: column; align-items: center; gap: 10px; width: 58px; padding: 12px 0; overflow-y: auto; border-right: 1px solid var(--rule); background: var(--bg); }
.rm-r { position: relative; display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: border-radius 0.15s ease; }
.rm-r .rm-av { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.15s ease; }
.rm-r:hover .rm-av { box-shadow: 0 0 0 2px var(--rule); }
.rm-r.is-on .rm-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-2); }
.rm-r.is-on::before { content: ""; position: absolute; left: -9px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ink); }
.rm-r.is-new::after { content: ""; position: absolute; right: -1px; top: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 2px var(--bg); }
.rm-r-tag { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); font: 600 0.7rem/1 var(--sans); color: var(--ink); }
.rm-r-sep { flex: none; width: 26px; height: 2px; border-radius: 1px; background: var(--rule); }
.rm-tab.has-new::after { content: ""; position: absolute; left: -5px; bottom: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 2px var(--surface); }
.rm-here li.is-away { opacity: 0.5; background: none; box-shadow: inset 0 0 0 1px var(--rule); }
.rm-here li.is-away .rm-av { filter: grayscale(0.6); }
.rm-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 0 12px 10px; }
.rm-foot:not(:has(button:not([hidden]))) { display: none; }

/* ---- Community (community.js; the founder, 2026-10-21: "now add a community feature and inner circle feature within the
   community"): the communities one is in down the side; one open beside them: Everyone (its spaces, its thread, an
   offering, its members) and Inner circle (its own spaces, the gathering, the door, the circle). The dock beside it is
   its hall. The page never scrolls on a laptop: each column scrolls on its own ---- */
.slate.is-community { display: block; position: relative; overflow: hidden; }
.slate.is-community .slate-title, .slate.is-community .slate-sub { display: none; }
.cm { position: absolute; inset: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr); text-align: left; font-family: var(--sans); color: var(--ink); }
.cm[hidden] { display: none; }
.cm [hidden] { display: none !important; }
/* a community's face: its first letter on a colour of its own, a rounded square (a person's is round) */
.rm-av.rm-cav { border-radius: 30%; }

/* down the side */
.cm-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 18px 12px; border-right: 1px solid var(--rule); background: var(--bg); overflow-y: auto; }
.cm-side-h { margin: 0 6px 4px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cm-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cm-li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.cm-li:hover { background: var(--wash); }
.cm-li.is-on { background: var(--wash-2); }
.cm-li .rm-cav { width: 34px; height: 34px; }
.cm-li-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cm-li-name { overflow: hidden; font: 600 0.9rem/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.cm-li-sub { font: 500 0.72rem/1.3 var(--sans); color: var(--muted); }
.cm-li-here { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--leaf); color: var(--bg); font: 700 0.68rem/18px var(--sans); text-align: center; }

/* one open */
.cm-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.cm-note { position: absolute; left: 50%; bottom: 18px; z-index: 3; max-width: min(520px, 90%); margin: 0; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 26px -16px rgba(var(--shade), 0.6); font: 500 0.875rem/1.35 var(--sans); color: var(--ink); transform: translateX(-50%); }
.cm-card { display: flex; flex-direction: column; gap: 12px; width: min(460px, calc(100% - 32px)); margin: auto; padding: 24px; border: 1px solid var(--rule); border-radius: 20px; background: var(--surface); }
.cm-door { align-items: center; text-align: center; }
.cm-h2 { margin: 0; font: 600 1.45rem/1.2 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.cm-h3 { display: block; margin: 0 0 10px; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cm-lead { margin: 0; font: 400 0.95rem/1.5 var(--sans); color: var(--ink-2); }
.cm-hint { margin: 0 0 10px; font: 400 0.85rem/1.45 var(--sans); color: var(--muted); }
.cm-kind { margin: 0; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-merow { display: flex; align-items: center; gap: 10px; align-self: stretch; }
.cm-pic { flex: none; width: 46px; height: 46px; padding: 0; overflow: hidden; border: 1px dashed var(--muted); border-radius: 50%; background: var(--bg); cursor: pointer; }
.cm-pic.has-pic { border-style: solid; border-color: var(--rule); }
.cm-pic .rm-av { width: 100%; height: 100%; }
.maker .cm .cm-in { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 0.95rem/1.35 var(--sans); }
.maker .cm .cm-row .cm-in { flex: 1 1 120px; width: auto; }
.cm .cm-go { border-color: var(--leaf); background: var(--leaf); color: var(--bg); }
.cm .cm-go:disabled { opacity: 0.55; cursor: default; }
.cm-card .pill-btn { justify-content: center; }
.cm-textbtn { padding: 0; border: 0; background: none; color: var(--muted); font: 500 0.8125rem/1.35 var(--sans); text-decoration: underline; text-align: left; cursor: pointer; }
.cm-textbtn:hover { color: var(--ink); }
.cm-waiting { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cm-door-face .rm-av-big { width: 76px; height: 76px; font-size: 1.8rem; }
.cm-loading { text-align: center; }

.cm-one { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.cm-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); }
.cm-mark .rm-av { width: 44px; height: 44px; font-size: 1.2rem; }
.cm-heading { flex: 1; min-width: 0; }
.cm-name { margin: 3px 0 0; font: 600 1.35rem/1.15 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.cm-sub { margin: 3px 0 0; font: 500 0.78rem/1.3 var(--sans); color: var(--muted); }
.cm-sides { flex: none; }
.cm-sides button { display: inline-flex; align-items: center; gap: 5px; }
.cm-sides button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--shade), 0.18); }
.cm-lock svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-ib { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.cm-ib:hover { background: var(--wash); color: var(--ink); }
.cm-ib svg { width: 20px; height: 20px; fill: currentColor; }
.cm-more { display: flex; flex-wrap: wrap; gap: 14px 24px; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--bg); }
.cm-more form { flex: 1 1 260px; }
.cm-outs { flex: 1 1 100%; gap: 18px; }
.cm-asked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 18px 0; padding: 10px 12px; border-radius: 14px; background: var(--sage-wash); }
.cm-asked p { flex: 1 1 220px; margin: 0; font: 600 0.9rem/1.35 var(--sans); color: var(--ink); }

/* its two sides: two columns, each scrolling on its own */
.cm-body { display: grid; flex: 1; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 0; }
.cm-col { display: flex; flex-direction: column; gap: 22px; min-height: 0; padding: 16px 18px 24px; overflow-y: auto; }
.cm-col + .cm-col { border-left: 1px solid var(--rule); }
.cm-body.cm-locked { display: flex; }
.cm-lock-big svg { width: 34px; height: 34px; color: var(--muted); }
.cm-locked .cm-card { align-items: center; text-align: center; }

/* its spaces: a tile each, with how many are in it */
.cm-spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cm-space { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 6px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; }
.cm-space:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.cm-space-mark { display: grid; place-items: center; height: 26px; font-size: 1.35rem; line-height: 1; }
.cm-space-mark .kind-icon { width: 26px; height: 26px; }
.cm-space-mark svg:not(.kind-icon) { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cm-space-name { font: 600 0.8rem/1.1 var(--sans); }
.cm-space-here { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border-radius: 8px; background: var(--leaf); color: var(--bg); font: 700 0.62rem/1.4 var(--sans); }

/* its thread: what its gatherings tied on, hung along a line by pegs, the newest first */
.cm-thread { position: relative; display: flex; gap: 16px; margin: 0; padding: 22px 6px 14px; overflow-x: auto; list-style: none; }
.cm-thread::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 1px; background: var(--edge); }
.cm-thread .cm-piece { position: relative; flex: none; width: 190px; transform-origin: 50% -12px; }
.cm-thread .cm-piece:nth-child(odd) { transform: rotate(-1.4deg); }
.cm-thread .cm-piece:nth-child(even) { transform: rotate(1.2deg); }
.cm-thread .cm-piece::before { content: ""; position: absolute; left: 50%; top: -17px; width: 8px; height: 20px; margin-left: -4px; border-radius: 3px; background: #A88B66; box-shadow: 0 1px 2px rgba(var(--shade), 0.35); }
.cm-thread-none { margin: 0; }
.cm-thread:empty { display: none; }

/* a thing offered */
.cm-pieces { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cm-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; }
.cm-mine { margin-top: 12px; }
.cm-piece { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 22px -20px rgba(var(--shade), 0.7); }
.cm-media { overflow: hidden; border-radius: 10px; background: var(--wash); }
.cm-media.is-img, .cm-media.is-video { aspect-ratio: 4 / 3; max-height: 260px; }
.cm-media img, .cm-media video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cm-media.is-audio { background: none; }
.cm-media audio { display: block; width: 100%; height: 36px; }
.cm-media.is-gone { display: grid; place-items: center; padding: 10px; font: 500 0.78rem/1.3 var(--sans); color: var(--muted); }
.cm-words { margin: 0; font: 400 1rem/1.45 var(--display); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-by { margin: 0; font: 500 0.75rem/1.3 var(--sans); color: var(--muted); }
.cm-held { margin: 0; font: 500 0.75rem/1.4 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.cm-pdo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-pdo .pill-btn { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; }
.cm-n { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font: 700 0.85rem/1 var(--sans); color: var(--ink); }
.cm-n svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.maker .cm .cm-why { padding: 7px 10px; font-size: 0.85rem; }
.cm-when { margin: 0 0 6px; font: 600 0.95rem/1.4 var(--sans); color: var(--ink); }
.cm-when.is-on::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px var(--sage-wash); vertical-align: 1px; }
.cm-file { flex: 1; min-width: 0; overflow: hidden; font: 500 0.8rem/1.3 var(--sans); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cm-offerform { display: flex; flex-direction: column; gap: 8px; }
.maker .cm .cm-offertext { min-height: 74px; resize: vertical; font: 400 1rem/1.45 var(--display); }

/* people: those of the circle ringed in green, who brought them in beside their name */
.cm-people { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cm-people li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 8px; border-radius: 12px; }
.cm-people li:hover { background: var(--wash); }
.cm-people .rm-av { width: 30px; height: 30px; font-size: 0.8rem; }
.cm-people li.is-circle .rm-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--leaf); }
.cm-people li.is-asked { padding-left: 50px; opacity: 0.75; }
.cm-p-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cm-p-name { font: 600 0.875rem/1.25 var(--sans); color: var(--ink); }
.cm-p-tag { font: 500 0.72rem/1.3 var(--sans); color: var(--muted); }
.cm-knocks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.cm-knocks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--wash); }
.cm-knock-who { flex: 1; min-width: 0; font: 600 0.875rem/1.25 var(--sans); color: var(--ink); }
.cm-knocks .pill-btn { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; }
.cm-linkrow { margin-bottom: 8px; }
.maker .cm .cm-link { padding: 8px 10px; font-size: 0.78rem; }
.cm-count { margin-left: 4px; color: var(--ink-2); }

/* a line of talk taken down (room.js): the cross, shown on the line under the pointer */
.rm-line { position: relative; }
.rm-take { position: absolute; right: -4px; top: 6px; display: none; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; }
.rm-take svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rm-line:hover .rm-take, .rm-take:focus-visible { display: grid; }
.rm-take:hover { color: var(--ink); background: var(--wash-2); }
@media (hover: none) { .rm-take { display: grid; opacity: 0.6; } }

/* a surface whose talk streams over its space (room.js LIVE; 2026-10-23: "the streaming chat on the side transparently
   blending with the freespace like tiktok live. no card or bar"): the tab gives way to a speech bubble on a bungee cord in
   the bottom right corner; above it those here as faces, the talk with nothing behind it (the older lines fading up into
   the space), and a line to say something. White, a shadow under it to read over anything */
.rm-live, .rm-cord { display: none; }
.rm.is-live .rm-tab { display: none; }
.rm.is-live .rm-cord { position: fixed; right: 12px; bottom: 0; display: block; width: 48px; height: 76px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rm.is-live .rm-live { position: fixed; right: 14px; bottom: 84px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: min(330px, calc(100vw - 28px)); pointer-events: none; }
body.is-room-open .rm.is-live .rm-cord, body.is-room-open .rm.is-live .rm-live { display: none; }
.rm.is-live .rm-bubble { top: auto; right: 66px; bottom: 36px; }
/* the cord: the bubble (its three dots), the bungee (amber, flecked dark), the hook and the eye it's caught in */
.rm-cord-i { display: block; width: 48px; height: 76px; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.rm-cord-s { fill: #FBF5EA; stroke: rgba(0, 0, 0, 0.2); stroke-width: 1; }
.rm-cord-b circle { fill: #2F4A3B; }
.rm-cord-k, .rm-cord-f { fill: none; stroke-width: 3.8; stroke-linecap: round; }
.rm-cord-k { stroke: #E39A3B; }
.rm-cord-f { stroke: #3A2412; stroke-width: 1.6; stroke-dasharray: 1.2 2.8; }
.rm-cord-h { fill: none; stroke: #B5BBC1; stroke-width: 1.8; stroke-linecap: round; }
.rm-cord-c, .rm-cord-b { transform-box: view-box; }
.rm-cord-c { transform-origin: 24px 64px; }
.rm-cord-b { transform-origin: 24px 40px; }
.rm-cord:hover .rm-cord-s { fill: #FFFFFF; }
.rm-cord:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; border-radius: 12px; }
.rm-cord-n { position: absolute; right: -4px; top: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--leaf); color: var(--bg); font: 700 0.68rem/19px var(--sans); text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18); }
@keyframes rm-boing-c { 0% { transform: scaleY(1); } 22% { transform: scaleY(1.55); } 45% { transform: scaleY(0.82); } 65% { transform: scaleY(1.18); } 82% { transform: scaleY(0.95); } 100% { transform: scaleY(1); } }
@keyframes rm-boing-b { 0% { transform: none; } 22% { transform: translateY(-13px) rotate(-5deg); } 45% { transform: translateY(4px) rotate(2deg); } 65% { transform: translateY(-4px) rotate(-1deg); } 82% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes rm-ll-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rm-cord.is-boing .rm-cord-c { animation: rm-boing-c 0.9s ease-out; }
  .rm-cord.is-boing .rm-cord-b { animation: rm-boing-b 0.9s ease-out; }
  .rm-ll.is-new { animation: rm-ll-in 0.35s ease-out; }
}
/* over the talk (no panel, "no panel"): those here, their faces ringed in the call and lit as they speak; inviting; the
   community round the project; back to one's own room */
.rm-live-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: auto; }
.rm-live-faces { display: flex; align-items: center; padding: 3px 0 3px 9px; }
.rm-live-faces .rm-av { width: 30px; height: 30px; margin-left: -7px; font-size: 0.75rem; box-shadow: 0 0 0 2px rgba(20, 32, 25, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); transition: box-shadow 0.12s ease, transform 0.12s ease; }
.rm-live-faces .rm-av.is-call { box-shadow: 0 0 0 2px #F4F1E6, 0 2px 6px rgba(0, 0, 0, 0.35); }
.rm-live-faces .rm-av.is-speaking { box-shadow: 0 0 0 3px #F2D873, 0 0 12px #F2D873; }
.rm-live-grown { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; background: none; color: #FFFFFF; font: 700 0.8rem/1.2 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); cursor: pointer; }
.rm-live-grown .rm-av { width: 24px; height: 24px; font-size: 0.66rem; }
.rm-live-grown:hover { text-decoration: underline; text-underline-offset: 3px; }
/* its buttons: round, a ring of white on the space; the words ones in chalk yellow */
.rm-live-b { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(0, 0, 0, 0.12); color: #FFFFFF; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.rm-live-b:hover { background: rgba(255, 255, 255, 0.16); }
.rm-live-ic { position: relative; }
.rm-live-b[aria-pressed="true"] { border-color: transparent; background: rgba(255, 255, 255, 0.9); color: #2F4A3B; filter: none; }
.rm-live-b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rm-live-b.rm-live-hang { border-color: transparent; background: #9A4A33; }
.rm-live-b.rm-live-hang:hover { background: #7E3A27; }
.rm-live-b:focus-visible, .rm-live-t:focus-visible, .rm-live-grown:focus-visible { outline: 2px solid #FFF6E6; outline-offset: 2px; }
.rm-live-t { padding: 1px 2px; border: 0; background: none; color: #F2D873; font: 700 0.86rem/1.35 var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); cursor: pointer; }
.rm-live-t:hover { color: #FFFFFF; }
.rm-live-t:disabled { color: rgba(255, 255, 255, 0.5); text-decoration: none; cursor: default; }
/* the call's pictures, over the faces */
.rm-live .rm-tiles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 4px; pointer-events: auto; }
.rm-live .rm-tile { width: 112px; border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.rm-live .rm-tile.is-speaking { box-shadow: inset 0 0 0 3px #F2D873, 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.rm-live .rm-tile-av { width: 40px; height: 40px; font-size: 1rem; }
/* (a voice alone: no picture, its face over the talk is enough; its sound still played) */
.rm-live .rm-tile:not(.has-video) { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.rm-live .rm-tiles:not(:has(.has-video)) { padding: 0; }
.rm-live-more { margin-left: 6px; color: #FFFFFF; font: 700 0.78rem/1 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* the talk: the newest at the foot, the oldest fading out at the top; scrolled back by the wheel or a finger on its lines
   (its gaps let the board through), no bar shown */
.rm-live-talk { display: flex; flex-direction: column; width: 100%; max-height: min(42vh, 320px); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; list-style: none; }
.rm-live-talk::-webkit-scrollbar { display: none; }
.rm-live-talk > :first-child { margin-top: auto; }
.rm-ll { pointer-events: auto; }
.rm-live-talk.is-full { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 80px); mask-image: linear-gradient(to bottom, transparent 0, #000 80px); }
.rm-ll { display: grid; flex: none; grid-template-columns: 26px 1fr; align-items: start; column-gap: 8px; padding: 4px 0; }
.rm-ll .rm-av { width: 26px; height: 26px; font-size: 0.68rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.rm-ll p { margin: 3px 0 0; color: #FFFFFF; font: 500 0.9rem/1.35 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.25); white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-ll b { margin-right: 3px; color: rgba(255, 255, 255, 0.7); font-weight: 700; }
.rm-ll.is-mine b { color: #F2D873; }
/* Claude in the talk (@claude): its spark on its own colour, its name so */
.rm-av.rm-claude { background: #C96A48; color: #FFFFFF; }
.rm-av.rm-claude svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.rm-ll.is-claude b { color: #F4B89A; }
/* "@" in the line: which Claude to ask, over it ("add option to switch between opus and sonnet by using @") */
.rm-live-at { display: flex; flex-wrap: wrap; gap: 2px 14px; width: 100%; pointer-events: auto; }
.rm-at small { display: inline-block; color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.rm-at-acct { color: rgba(255, 255, 255, 0.78); font: 500 0.82rem/1.4 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.rm-at-acct [aria-pressed="true"] { color: #FFFFFF; text-decoration: none; background: rgba(242, 216, 115, 0.3); border-radius: 6px; padding: 0 6px; }
.rm-ll a { color: #F2D873; pointer-events: auto; }
/* what's for you, under the talk: the door, knocks, a community offered, inviting, each with what can be done; said things */
.rm-live-notes { width: 100%; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.rm-ln { display: grid; grid-template-columns: 26px 1fr; align-items: start; column-gap: 8px; padding: 4px 0; }
.rm-ln .rm-av { width: 26px; height: 26px; font-size: 0.68rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.rm-ln p { margin: 3px 0 0; color: #FFFFFF; font: 600 0.88rem/1.4 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
.rm-live-link { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.75); font-weight: 500; font-size: 0.76rem; user-select: all; word-break: break-all; }
.rm-live-note { margin: 2px 0 0 34px; color: rgba(255, 255, 255, 0.85); font: italic 500 0.82rem/1.35 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* the line to say something: words on the space, a faint rule under them; the call's buttons by it */
.rm-live-say { display: flex; align-items: center; gap: 6px; width: 100%; pointer-events: auto; }
.rm-live-call { display: flex; flex: none; gap: 6px; }
.rm .rm-live-text { display: block; flex: 1; min-width: 0; width: 100%; height: 36px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0; background: transparent; color: #FFFFFF; font: 500 0.9rem/1.2 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); outline: none; box-shadow: none; }
.rm .rm-live-text::placeholder { color: rgba(255, 255, 255, 0.62); opacity: 1; }
.rm .rm-live-text:focus { border-bottom-color: rgba(255, 255, 255, 0.85); }
.rm .rm-live-text:disabled { opacity: 0.5; }
@media (max-width: 640px) { .rm.is-live .rm-cord { right: 6px; } .rm.is-live .rm-live { right: 10px; width: calc(100vw - 20px); } .rm-live-talk { max-height: min(34vh, 240px); } }

/* a phone: the list across the top, one column, the whole of it scrolling */
@media (max-width: 899px) {
  .cm { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cm-side { flex-direction: row; align-items: center; gap: 6px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; }
  .cm-side-h { display: none; }
  .cm-list { flex-direction: row; }
  .cm-li { width: auto; padding: 5px 10px 5px 5px; }
  .cm-li-sub { display: none; }
  .cm-side-hint { display: none; }
  .cm-main { overflow-y: auto; }
  .cm-one { flex: none; }
  .cm-top { flex-wrap: wrap; padding: 12px 14px; }
  .cm-sides { order: 3; flex: 1 1 100%; }
  .cm-body { display: block; }
  .cm-col { overflow: visible; padding: 14px; }
  .cm-col + .cm-col { border-top: 1px solid var(--rule); border-left: 0; }
}

/* one's own inner circle (circles.js; 2026-10-21: "invite people from your innercircle to your any project"): in each
   room's Invite, the circle first, one press each */
.cm-people li .pill-btn { min-height: 30px; padding: 0 12px; font-size: 0.8125rem; }
.rm-circle { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.rm-circlelist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rm-circlelist li { display: flex; align-items: center; gap: 8px; font: 500 0.85rem/1.2 var(--sans); color: var(--ink); }
.rm-circlelist li > span:not(.rm-av):not(.rm-in-tag) { flex: 1; min-width: 0; }
.rm-circlelist .rm-av { width: 26px; height: 26px; font-size: 0.72rem; }
.rm-circlelist .rm-inv { min-height: 28px; padding: 0 12px; font-size: 0.78rem; }
.rm-in-tag { padding: 3px 10px; border-radius: 999px; background: var(--sage-wash); font: 600 0.74rem/1.2 var(--sans); color: var(--ink-2); }
.rm-circle .rm-textbtn { align-self: flex-start; }

/* ---- sign up and sign in (account.js; 2026-10-21: "add sign up and create database"): a button by the light switch,
   dressed as the header's switch is; signed in, the account's first letter. Its dialog as the AI key's is ---- */
.theme-btn + .acct-btn, .acct-btn + .who-wrap { margin-left: 6px; }
.acct-btn { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 0.84rem/1 var(--sans); white-space: nowrap; cursor: pointer; }
.acct-btn:hover { border-color: var(--ink-2); }
.acct-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.acct-btn.is-in { width: 34px; padding: 0; justify-content: center; }
.acct-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-wash); color: var(--ink); font: 700 0.85rem/1 var(--sans); }
@media (max-width: 640px) { .acct-btn { width: 34px; padding: 0; justify-content: center; } .acct-word { display: none; } }
.acct { width: min(26rem, calc(100vw - 32px)); padding: 20px 24px 24px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font-family: var(--sans); box-shadow: 0 24px 64px -24px rgba(var(--shade), 0.45); }
.acct::backdrop { background: rgba(var(--shade), 0.4); }
.acct [hidden] { display: none !important; }
.acct-x { float: right; width: 34px; height: 34px; margin: -8px -12px 0 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.acct-x:hover { background: var(--wash); color: var(--ink); }
.acct-tabs { display: inline-flex; margin-bottom: 14px; }
.acct-tabs button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--shade), 0.18); }
.acct-form, .acct-on { display: flex; flex-direction: column; gap: 10px; }
.acct-h { margin: 0; font: 600 1.4rem/1.2 var(--display); color: var(--ink); }
.acct-lead { margin: 0; font: 400 0.92rem/1.45 var(--sans); color: var(--ink-2); }
.acct-hint { margin: 0; font: 400 0.8rem/1.4 var(--sans); color: var(--muted); }
.acct-l { display: grid; gap: 5px; font: 600 0.8rem/1.3 var(--sans); color: var(--ink-2); }
.acct-in { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 0.95rem/1.3 var(--sans); }
.acct-in:focus { outline: 1.5px solid var(--ink-2); outline-offset: 0; }
.acct .acct-go { align-self: flex-start; margin-top: 4px; border-color: var(--leaf); background: var(--leaf); color: var(--bg); }
.acct .acct-go:disabled { opacity: 0.55; }
.acct-err { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--wash); font: 600 0.85rem/1.35 var(--sans); color: var(--ink); }
.acct-signout { align-self: flex-start; }
/* your profile, at the top: your name, saved (2026-10-24) */
.acct-me:not([hidden]) ~ .acct-out, .acct-me:not([hidden]) ~ .acct-on { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.acct-row { display: flex; align-items: center; gap: 12px; }
.acct-saved { font: 600 0.85rem/1.3 var(--sans); color: var(--ink-2); }
/* (your picture, at the top of Your profile, and on the button: 2026-10-26, the profiles merged) */
.acct-pic { display: flex; align-items: center; gap: 14px; }
.acct-pic-in { display: grid; place-items: center; width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 50%; background: var(--sage-wash); color: var(--ink); font: 700 1.5rem/1 var(--sans); }
.acct-pic-in svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.acct-pic-in canvas, .acct-av canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.acct-pic-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.acct-pic-acts .acct-hint { flex-basis: 100%; }
/* Your Claude (account.js; lend.js): who your Claude host is lent to */
.acct-claude { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.acct-claude[hidden] { display: none !important; }
.acct-h2 { margin: 0; font: 600 1.05rem/1.2 var(--display); color: var(--ink); }
.acct-claude-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.acct-claude-list li { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 0.82rem/1.2 var(--sans); }
.acct-claude-said { font: 600 0.8rem/1.3 var(--sans); color: var(--ink-2); }
.claude-note { position: fixed; left: 50%; bottom: 84px; z-index: 70; max-width: min(520px, calc(100% - 32px)); margin: 0; padding: 10px 18px; transform: translateX(-50%); border-radius: 999px; background: #2F5E2C; color: #fff; font: 600 0.88rem/1.35 var(--sans); text-align: center; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6); }
.acct-av { overflow: hidden; }
.acct-av svg { width: 16px; height: 16px; }
/* ---- Your profile, You's first section (2026-10-27: "aesthetics should move to the bottom right corner and become the
   profile section"): the profile's card in the middle of the page, not a dialog; You's button the round one at the
   bottom right (account.js), ringed while You is open; your picture on Your profile's round button too ---- */
.asec-profile { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; padding: 64px 72px 20px; }
@media (max-width: 640px) { .asec-profile { padding: 64px 16px 120px 64px; } }
.acct.is-placed { width: min(26rem, 100%); text-align: left; box-shadow: 0 1px 2px rgba(var(--shade), 0.08), 0 18px 48px -28px rgba(var(--shade), 0.4); }
.acct.is-placed .acct-form, .acct.is-placed .acct-on { gap: 8px; }
/* (on a wide screen, side by side, all of it above the fold: you on the left, your account on the right) */
@media (min-width: 900px) {
  .acct.is-placed { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; column-gap: 32px; width: min(54rem, 100%); }
  .acct.is-placed .acct-me:not([hidden]) ~ .acct-out, .acct.is-placed .acct-me:not([hidden]) ~ .acct-on { margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--rule); }
}
.tsec-mark .acct-av { width: 26px; height: 26px; }
.acct-btn[aria-pressed="true"] { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* one's own inner circle in the room's panel (room.js; 2026-10-21: "take off the innercircle from the comunity tab"): its
   button by Invite (a dot: someone asking you in), and its view in place of the room */
.rm-ib svg.rm-ring { fill: currentColor; stroke: none; }
.rm-ic-open { position: relative; }
.rm-ic-open[aria-pressed="true"] { background: var(--wash-2); color: var(--ink); }
.rm-ib-dot { position: absolute; right: 4px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 2px var(--surface); }
.rm-icv { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 0; padding: 12px 16px 20px; overflow-y: auto; }
.rm-icv-back { align-self: flex-start; }
.rm-icdoor, .rm-icname { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--sage-wash); }
.rm-icdoor { align-items: center; text-align: center; }
.rm-icdoor-line { margin: 0; font: 600 0.95rem/1.4 var(--sans); color: var(--ink); }
.rm-icdoor-do { display: flex; gap: 8px; }
.rm-h3 { margin: 0 0 8px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.rm-hint { margin: 0 0 8px; font: 400 0.8125rem/1.4 var(--sans); color: var(--muted); }
.rm-ppl { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rm-ppl li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 4px; border-radius: 10px; }
.rm-ppl li:hover { background: var(--wash); }
.rm-ppl .rm-av { width: 28px; height: 28px; font-size: 0.75rem; }
.rm-ppl-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rm-ppl-t b { font: 600 0.86rem/1.25 var(--sans); color: var(--ink); }
.rm-ppl-t small { font: 500 0.72rem/1.3 var(--sans); color: var(--muted); }
.rm-ppl .pill-btn { min-height: 28px; padding: 0 12px; font-size: 0.78rem; }
.rm-ics .rm-linkrow { margin-bottom: 6px; }

/* a community round a project (communities.js; 2026-10-21: "a community becomes necessary if more people become
   interested in a project. the inner circle can add the community feature"): in the project's room, a bar to it; before
   it, to the project's inner circle, one proposed, offered or being named. On the Community page, the project first
   among its spaces */
.rm-grown { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--sage-wash); color: var(--ink); text-align: left; cursor: pointer; }
.rm-grown:hover { border-color: var(--ink-2); }
.rm-grown-mark .rm-av { width: 30px; height: 30px; font-size: 0.8rem; }
.rm-grown-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rm-grown-t b { overflow: hidden; font: 600 0.88rem/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.rm-grown-t small { font: 500 0.72rem/1.3 var(--sans); color: var(--muted); }
.rm-grown-go { flex: none; font: 600 0.78rem/1 var(--sans); color: var(--ink-2); text-decoration: underline; }
.rm-grow { display: flex; flex-direction: column; gap: 10px; margin: 10px 12px 0; padding: 12px; border-radius: 14px; background: var(--wash); }
.rm-grow-ask, .rm-grow-nudge, .rm-growform { display: flex; flex-direction: column; gap: 8px; }
.rm-grow-line { margin: 0; font: 500 0.85rem/1.4 var(--sans); color: var(--ink); }
.rm-grow-wait { color: var(--ink-2); }
.rm-grow-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-grow .pill-btn { min-height: 30px; padding: 0 14px; font-size: 0.8125rem; }
.rm-grow-nudge .pill-btn { align-self: flex-start; }
.maker .rm .rm-grow-name { min-width: 0; }
.cm-space.cm-project { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 14px; background: var(--sage-wash); text-align: left; }
.cm-project .rm-av { width: 38px; height: 38px; font-size: 0.95rem; }
.cm-project-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-project-t small { font: 600 0.66rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cm-project-t b { font: 600 0.95rem/1.25 var(--sans); color: var(--ink); }
.cm-project .cm-space-here { top: 50%; right: 12px; transform: translateY(-50%); }
.cm-side-hint { margin: 8px 6px 0; font: 400 0.78rem/1.4 var(--sans); color: var(--muted); }

/* ---- Music, more (2026-10-21: "the sound tickets, ability to edit the sound tickets. add get sounds from other place.
   hanging singing birds competing for attention"; "get sound from yt music and other audio libraries") ---- */
/* a ticket: how it's played (if edited) and where its sound came from, small, under its sound */
.mu-meta { flex: none; display: flex; gap: 8px; min-width: 0; margin: 0; overflow: hidden; font: 600 0.66rem/1.3 var(--sans); white-space: nowrap; opacity: 0.72; pointer-events: auto; }
.mu-meta:not(:has(span:not(:empty))) { display: none; }
.mu-fx:empty, .mu-from:empty { display: none; }
.mu-from { overflow: hidden; text-overflow: ellipsis; }
.mu-tk.is-edited .mu-fx { font-style: italic; }
.mu-tk.is-editing .tk-back { filter: drop-shadow(0 0 0 2px var(--leaf)) drop-shadow(0 0 12px color-mix(in srgb, var(--leaf) 70%, transparent)); }

/* the editor: a card over the wall, at its right (a phone: across its foot) */
.mu-ed { position: absolute; right: 16px; top: 16px; z-index: 30; display: flex; flex-direction: column; gap: 10px; width: 340px; max-height: calc(100% - 32px); padding: 14px 16px 16px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); color: var(--ink); font-family: var(--sans); box-shadow: 0 24px 50px -28px rgba(var(--shade), 0.6); }
.mu-ed[hidden] { display: none; }
.mu-ed-top { display: flex; align-items: center; gap: 8px; }
.maker .mu-ed .mu-ed-name { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); font: 600 1rem/1.2 var(--sans); }
.mu-ed .pill-btn { min-height: 32px; }
.mu-ed-done { border-color: var(--leaf); background: var(--leaf); color: var(--bg); }
.mu-ed-wave { position: relative; height: 84px; border-radius: 12px; background: var(--wash); touch-action: none; cursor: ew-resize; }
.mu-ed-cv { display: block; width: 100%; height: 100%; }
.mu-ed-h { position: absolute; top: -4px; bottom: -4px; width: 16px; margin-left: -8px; cursor: ew-resize; touch-action: none; }
.mu-ed-h::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--leaf); }
.mu-ed-h::after { content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 22px; margin-top: -11px; border-radius: 6px; background: var(--leaf); box-shadow: 0 2px 6px rgba(var(--shade), 0.35); }
.mu-ed-h:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 6px; }
.mu-ed-times { display: flex; justify-content: space-between; gap: 8px; margin: -4px 0 0; font: 600 0.74rem/1.2 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.mu-ed-len { color: var(--ink-2); }
.mu-ed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mu-ed-row.is-foot { justify-content: space-between; padding-top: 4px; border-top: 1px solid var(--rule); }
.mu-ed-play { gap: 6px; }
.mu-ed-play svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mu-ed-play .mu-i-stop, .mu-ed-play[aria-pressed="true"] .mu-i-play { display: none; }
.mu-ed-play[aria-pressed="true"] .mu-i-stop { display: block; }
.mu-ed-tog { display: inline-flex; align-items: center; gap: 6px; font: 600 0.8rem/1.2 var(--sans); color: var(--ink-2); cursor: pointer; }
.mu-ed-tog input { accent-color: var(--leaf); width: 16px; height: 16px; }
.mu-ed-sl { display: grid; grid-template-columns: 72px 1fr 52px; align-items: center; gap: 8px; font: 600 0.8rem/1.2 var(--sans); color: var(--ink-2); }
.mu-ed-sl input { width: 100%; accent-color: var(--leaf); }
.mu-ed-out { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.mu-ed-looks { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-ed-look { width: 32px; height: 24px; padding: 0; border: 1px solid var(--rule); border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px -2px rgba(var(--shade), 0.5); }
.mu-ed-look[aria-pressed="true"] { outline: 2px solid var(--leaf); outline-offset: 2px; }
.mu-ed-look[data-look="0"] { background: #F3E6C8; }
.mu-ed-look[data-look="1"] { background: repeating-linear-gradient(#FCFBF6 0 6px, #C9D9E8 6px 7px); }
.mu-ed-look[data-look="2"] { background: #F7E27A; }
.mu-ed-look[data-look="3"] { background: #C9A574; }
.mu-ed-look[data-look="4"] { background: #FAFAF6; }
.mu-ed-look[data-look="5"] { background: #F2C7C2; }
.mu-ed-look[data-look="6"] { background: repeating-linear-gradient(#FFFFFF 0 6px, #D5DDE6 6px 7px); }
.mu-ed-look[data-look="7"] { background: #2F3B33; }
.mu-ed-from { margin: 0; font: 500 0.76rem/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.mu-ed-from a { color: var(--ink-2); }
.mu-ed-text { padding: 0; border: 0; background: none; color: var(--muted); font: 600 0.8rem/1.3 var(--sans); text-decoration: underline; cursor: pointer; }
.mu-ed-text:hover { color: var(--ink); }

/* Get a sound: its button at the wall's top left, its panel under it */
.sg-open { position: absolute; left: 14px; top: 14px; z-index: 25; gap: 7px; min-height: 34px; padding: 0 14px 0 11px; border-color: var(--rule); background: var(--surface); box-shadow: 0 10px 20px -14px rgba(var(--shade), 0.6); }
.sg-open svg { width: 17px; height: 17px; }
.sg-open[aria-expanded="true"] { background: var(--wash-2); }
.sg { position: absolute; left: 14px; top: 58px; z-index: 31; display: flex; flex-direction: column; gap: 10px; width: 380px; max-height: calc(100% - 74px); padding: 14px 16px 14px; overflow-y: auto; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); color: var(--ink); font-family: var(--sans); box-shadow: 0 24px 50px -28px rgba(var(--shade), 0.6); }
.sg[hidden] { display: none; }
.sg-top { display: flex; align-items: center; justify-content: space-between; }
.sg-h { margin: 0; font: 600 1.1rem/1.2 var(--display); }
.sg-x { width: 32px; height: 32px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); font: 400 1.4rem/1 var(--sans); cursor: pointer; }
.sg-x:hover { background: var(--wash); color: var(--ink); }
.sg-link, .sg-find { display: flex; flex-direction: column; gap: 7px; }
.sg-l { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sg-row { display: flex; gap: 6px; }
.maker .sg .sg-in { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 11px; background: var(--bg); color: var(--ink); font: 400 0.9rem/1.25 var(--sans); }
.sg .sg-go, .sg .sg-take { border-color: var(--leaf); background: var(--leaf); color: var(--bg); }
.sg .sg-go:disabled, .sg .sg-take:disabled { opacity: 0.5; }
.sg-places { align-self: flex-start; }
.sg-places button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--shade), 0.18); }
.sg-state { margin: 0; padding: 7px 10px; border-radius: 10px; background: var(--wash); font: 600 0.8rem/1.35 var(--sans); color: var(--ink); }
.sg-state.is-error { color: var(--ink); background: var(--rose-wash); }
.sg-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sg-r { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; }
.sg-r:hover { background: var(--wash); }
.sg-thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--wash-2); }
.sg-thumb.is-none { display: grid; place-items: center; font-size: 1.2rem; color: var(--muted); }
.sg-t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sg-t b { overflow: hidden; font: 600 0.86rem/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sg-t small { overflow: hidden; font: 500 0.72rem/1.3 var(--sans); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.sg .sg-take { flex: none; min-height: 30px; padding: 0 11px; font-size: 0.78rem; }
.sg-small { margin: 0; font: 400 0.72rem/1.4 var(--sans); color: var(--muted); }

/* the birds: hung on strings from the top of the wall, swaying; one showing off, one cutting in, the rest turned to it */
.bd-birds { position: absolute; left: 0; right: 0; top: 0; z-index: 20; height: 0; pointer-events: none; }
.bd-birds[hidden] { display: none; }
.bd-bird { position: absolute; top: 0; width: 66px; height: calc(var(--len) + 46px); margin-left: -33px; padding: 0; border: 0; background: none; cursor: grab; pointer-events: none; transform-origin: 50% 0; animation: bd-sway var(--sway) ease-in-out var(--delay) infinite alternate; touch-action: none; }
.bd-bird.is-small { width: 56px; margin-left: -28px; }
.bd-bird:focus-visible { outline: none; }
.bd-bird:focus-visible .bd-svg { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 10px; }
@keyframes bd-sway { from { transform: rotate(-3.2deg); } to { transform: rotate(3.2deg); } }
.bd-string { position: absolute; left: 50%; top: 0; width: 1.4px; height: var(--len); margin-left: -0.7px; background: color-mix(in srgb, var(--ink-2) 70%, transparent); transform-origin: 50% 0; pointer-events: none; }
.bd-hang { position: absolute; left: 0; right: 0; top: var(--len); height: 46px; pointer-events: auto; transform-origin: 50% 0; }
.bd-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.18)); }
.bd-svg :is(.bd-body, .bd-breast, .bd-wing, .bd-head, .bd-lower, .bd-tail) { transform-box: view-box; transition: transform 0.25s ease; }
.bd-body, .bd-breast { transform-origin: 30px 28px; }
.bd-wing { transform-origin: 18px 24px; }
.bd-head { transform-origin: 44px 24px; }
.bd-lower { transform-origin: 53.8px 20.4px; }
.bd-tail { transform-origin: 16px 27px; }
/* showing off (silently) and singing (its real song): puffed up, beak going, wing flicking, head up */
.bd-bird:is(.is-showing, .is-singing) .bd-lower { animation: bd-beak 0.22s ease-in-out infinite alternate; }
.bd-bird:is(.is-showing, .is-singing) :is(.bd-body, .bd-breast) { transform: scale(1.09); }
.bd-bird:is(.is-showing, .is-singing) .bd-head { transform: rotate(-12deg); }
.bd-bird:is(.is-showing, .is-singing) .bd-wing { animation: bd-flick 0.5s ease-in-out infinite alternate; }
.bd-bird:is(.is-showing, .is-singing) .bd-tail { transform: rotate(-10deg); }
.bd-bird.is-singing :is(.bd-body, .bd-breast) { transform: scale(1.16); }
.bd-bird.is-singing .bd-hang { animation: bd-hop 0.6s ease-in-out infinite alternate; }
.bd-bird.is-puffed :is(.bd-body, .bd-breast) { transform: scale(1.2); }
@keyframes bd-beak { from { transform: rotate(0); } to { transform: rotate(24deg); } }
@keyframes bd-flick { from { transform: rotate(0); } to { transform: rotate(-16deg); } }
@keyframes bd-hop { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
/* turned to the one singing */
.bd-bird.is-eyeing .bd-head { transform: rotate(-6deg); }
.bd-bird.is-eyeing.is-left .bd-svg { transform: scaleX(-1); }
/* the notes it sings, rising */
.bd-notes { position: absolute; left: 70%; top: -6px; width: 0; height: 0; pointer-events: none; }
.bd-notes i { position: absolute; left: var(--dx); top: 0; font: 700 1rem/1 var(--sans); font-style: normal; color: var(--ink-2); opacity: 0; animation: bd-note 2s ease-out var(--d) forwards; }
@keyframes bd-note { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translate(10px, -46px) scale(1.15) rotate(12deg); } }
/* pulled down off its string, and springing back */
.bd-bird.is-held { animation: none; cursor: grabbing; }
.bd-bird.is-held .bd-hang { transform: translate(var(--px, 0), var(--py, 0)); }
.bd-bird.is-held .bd-string { height: var(--slen, var(--len)); transform: rotate(var(--sang, 0deg)); }
.bd-bird.is-back .bd-hang, .bd-bird.is-back .bd-string { transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1), height 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.bd-toggle { position: absolute; right: 14px; top: 14px; z-index: 25; width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; background: var(--surface); }
.bd-toggle[aria-pressed="true"] { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .bd-bird, .bd-bird.is-singing .bd-hang, .bd-bird .bd-lower, .bd-bird .bd-wing { animation: none !important; }
}
@media (max-width: 640px) {
  .mu-ed { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72%; }
  .sg { left: 8px; right: 8px; width: auto; }
  .sg-open span { display: none; }
  .sg-open { padding: 0 9px; }
  .bd-bird { width: 52px; margin-left: -26px; }
}

/* a paper Claude wrote from the board (paperwrite.js), in the reader: its own head; for review, a bar over it (stick it
   up, ask for changes, discard); Wikipedia's licence and link not shown */
.rs-read:not(.is-made) .rd-kicker-made, .rs-read.is-made .rd-kicker:not(.rd-kicker-made), .rs-read.is-made .rd-licence, .rs-read.is-made .rd-open { display: none; }
.rd-made-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #C96A48; color: #FFFFFF; vertical-align: -4px; }
.rd-made-mark .i { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.rd-review { margin: 0 0 22px; padding: 14px 16px; border-left: 4px solid #F2D873; border-radius: 4px 12px 12px 4px; background: rgba(242, 216, 115, 0.16); font: 500 0.9rem/1.45 var(--sans); }
.rd-review[hidden] { display: none; }
.rd-review-line { margin: 0 0 10px; }
.rd-review-do { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-review .rs-go { background: var(--leaf); color: var(--bg); }
.rd-change { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.rd-change[hidden] { display: none; }
.rd-change textarea { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: 400 0.92rem/1.4 var(--sans); resize: vertical; }
.rs-item.rs-paper.is-made .rs-p-where::before { content: "✳ "; color: #C96A48; font-weight: 700; }
/* a 3D simulation Claude wrote (2026-10-23): a dark slate on the board, its head to move it by, its sealed frame, what
   it shows; "Simulate it" on a paper */
.rs-item.rs-sim { display: flex; flex-direction: column; border-radius: 14px; background: #1F3328; color: #F4F1E6; box-shadow: 0 0 0 1px rgba(244, 241, 230, 0.2), 0 18px 30px -16px rgba(0, 0, 0, 0.65); }
.rs-sim-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font: 700 0.9rem/1.2 var(--sans); }
.rs-sim-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #C96A48; color: #FFFFFF; }
.rs-sim-mark .i, .rd-sim .i { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.rs-sim-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-sim-state { flex: none; color: #F6C9B5; font-weight: 500; font-size: 0.78rem; }
.rs-sim-frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: #1F3328; }
.rs-sim-about { margin: 0; padding: 8px 12px 10px; max-height: 3.4em; overflow: hidden; color: rgba(244, 241, 230, 0.8); font: 500 0.78rem/1.4 var(--sans); }
.rd-sim { display: inline-flex; align-items: center; gap: 6px; }
.rd-sim:disabled, .rs-card-sim:disabled { opacity: 0.6; cursor: progress; }

/* ---- Research's top (2026-10-23, a sketch: "for the top section, make it something like this. the current section is
   highlighted the rest is dim", "make the nudge the shape of iphone ish", "iphone 11 nudge", "only the me and we logo is
   at the edge of the board. at the cureent position. the colour adjusted to match the theme of the board"): no bar; the
   board up to the screen's top edge; me and we where it was, in chalk; the sections in
   a notch hanging from the top edge's middle, an iPhone 11's, barely there ("the nudge is transparent", "the nudge should barely show": a faint tint, a fainter edge); the section shown lit, the
   rest dim. (maker.js sets .is-boardtop while Research is shown) */
.is-boardtop { --header: 0px; }
.is-boardtop .site-header { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 70; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-boardtop .site-header .bar { position: absolute; top: 0; left: 0; right: 0; width: max-content; max-width: calc(100vw - 24px); height: 46px; margin: 0 auto; padding: 0 16px 2px; gap: 6px; border-radius: 0 0 26px 26px; background: rgba(16, 26, 20, 0.12); box-shadow: inset 0 -1px 0 rgba(244, 241, 230, 0.08), inset 1px 0 0 rgba(244, 241, 230, 0.05), inset -1px 0 0 rgba(244, 241, 230, 0.05); }
/* (its shoulders: the edge curving down into it, as an iPhone 11's notch does) */
.is-boardtop .site-header .bar::before, .is-boardtop .site-header .bar::after { content: ""; position: absolute; top: 0; width: 14px; height: 14px; pointer-events: none; }
.is-boardtop .site-header .bar::before { left: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, rgba(16, 26, 20, 0.12) 14px); }
.is-boardtop .site-header .bar::after { right: -14px; background: radial-gradient(circle at 100% 100%, transparent 13.5px, rgba(16, 26, 20, 0.12) 14px); }
.is-boardtop .site-header .brand { position: fixed; left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); top: 0; height: 64px; }
.is-boardtop[data-tone="dark"] .site-header .brand { color: #F4F1E6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.is-boardtop.is-thoughts[data-tone="dark"] .site-header .brand-mark, .is-boardtop[data-tone="dark"] .site-header .brand-mark { fill: #F2D873; }
.is-boardtop .site-header .modes { margin: 0; padding: 0; gap: 2px; border: 0; background: none; box-shadow: none; }
.is-boardtop .site-header .modes button { min-height: 36px; min-width: 38px; padding: 0 6px; border-radius: 12px; background: none; box-shadow: none; opacity: 0.4; filter: saturate(0.6); transition: opacity 0.15s ease, filter 0.15s ease, background 0.15s ease; }
.is-boardtop .site-header .modes button:hover { opacity: 0.75; }
.is-boardtop .site-header .modes button[aria-pressed="true"] { opacity: 1; filter: none; background: rgba(244, 241, 230, 0.12); }
.is-boardtop .site-header .who-wrap { margin-left: 4px; align-self: center; }
/* (the profile at the foot, beside the talk's bubble: "profile comes to the buttom beside yhe chat"; no blur on the notch,
   which would hold it) */
.is-boardtop .site-header .acct-btn { position: fixed; right: 70px; bottom: 36px; z-index: 61; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--rule); }
body.is-reading .acct-btn { visibility: hidden; }
.is-boardtop .site-header .acct-word, .is-boardtop .site-header .who-name { display: none; }
/* (light and dark at the edge where it was: "the dark/light mode still at the edge were it was") */
.is-boardtop .site-header .theme-btn { position: fixed; top: 14px; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); margin: 0; color: #F4F1E6; opacity: 0.8; }
.is-boardtop .site-header .theme-btn:hover { opacity: 1; }
/* (the board's own top: + Note and + Picture under me and we; the briefcase below the edge) */
.is-boardtop .rs .rs-make { top: 70px; }
/* (an article or a book opened, 2026-10-25: its page under the top's notch, me and we and the zoom, not behind them, so
   its tools can all be reached) */
.is-boardtop .tsec .ar-doc { top: 56px; }
.is-boardtop .rs-case { top: 58px; }
@media (max-width: 640px) {
  .is-boardtop .site-header .bar { height: 42px; padding: 0 10px 2px; gap: 2px; border-radius: 0 0 20px 20px; max-width: calc(100vw - 96px); margin: 0 auto; }
  .is-boardtop .site-header .theme-btn { top: 4px; right: 6px; }
  .is-boardtop .site-header .modes button { min-width: 28px; min-height: 32px; padding: 0 2px; }
  .is-boardtop .site-header .brand { left: 12px; height: 44px; }
  .is-boardtop .site-header .brand span { display: none; }
  .is-boardtop .site-header .brand-mark { width: 22px; height: 22px; }
  .is-boardtop .rs .rs-make { top: 54px; }
  .is-boardtop .tsec .ar-doc { top: 48px; }
  .is-boardtop .rs-case { top: 156px; }
  .is-boardtop .rs-works { top: 156px; }
  /* (the profile beside the bubble, above the keys; the talk a step higher to let it be) */
  .is-boardtop .site-header .acct-btn { right: 58px; bottom: 74px; width: 32px; height: 32px; }
  .is-boardtop .rm.is-live .rm-live { bottom: 112px; }
}

/* ---- every space's top as Research's (2026-10-23: "the nudge and the arrangement on the research section should transfer
   to all"; maker.js markSpace sets data-space and data-tone): the space up to the screen's top edge, the sections in the
   notch, barely there; me and we, and light and dark, at the edges in the space's own colours (dark: the board, the water;
   light: the linen ones, in the page's ink, so the theme still turns them); the zoom by light and dark; the profile at the
   foot by the talk's cord, which streams the talk over every space with a room (room.js LIVE); each space's own things at
   its top moved down, clear of them. --edge-foot: a recorder along the foot (Music, Tales), the cord and the profile above it;
   --edge-side: the pad down the right (Speak), the cord and the talk left of it */
.is-boardtop body { --notch: color-mix(in srgb, var(--ink) 4%, transparent); --notch-edge: color-mix(in srgb, var(--ink) 7%, transparent); --edge-ink: var(--ink); --edge-lit: color-mix(in srgb, var(--ink) 9%, transparent); --edge-gap: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); --edge-foot: 0px; --edge-side: 0px; }
.is-boardtop[data-tone="dark"] body { --notch: rgba(16, 26, 20, 0.12); --notch-edge: rgba(244, 241, 230, 0.08); --edge-ink: #F4F1E6; --edge-lit: rgba(244, 241, 230, 0.12); }
.is-boardtop[data-space="music"] body { --notch: rgba(2, 22, 34, 0.16); --notch-edge: rgba(220, 245, 255, 0.08); --edge-ink: #E8F6F8; --edge-lit: rgba(220, 245, 255, 0.12); }
/* (Build's sand, by day: a dark tint is lost in it, so a sun-bleached one, still barely there; by night, as anywhere) */
.is-boardtop[data-space="build"] body { --notch: rgba(255, 250, 238, 0.3); --notch-edge: rgba(255, 250, 238, 0.42); --edge-lit: rgba(255, 250, 238, 0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).is-boardtop[data-space="build"] body { --notch: color-mix(in srgb, var(--ink) 4%, transparent); --notch-edge: color-mix(in srgb, var(--ink) 7%, transparent); --edge-lit: color-mix(in srgb, var(--ink) 9%, transparent); }
}
:root[data-theme="dark"].is-boardtop[data-space="build"] body { --notch: color-mix(in srgb, var(--ink) 4%, transparent); --notch-edge: color-mix(in srgb, var(--ink) 7%, transparent); --edge-lit: color-mix(in srgb, var(--ink) 9%, transparent); }
.is-boardtop .site-header .bar { background: var(--notch); box-shadow: inset 0 -1px 0 var(--notch-edge), inset 1px 0 0 var(--notch-edge), inset -1px 0 0 var(--notch-edge); }
.is-boardtop .site-header .bar::before { background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--notch) 14px); }
.is-boardtop .site-header .bar::after { background: radial-gradient(circle at 100% 100%, transparent 13.5px, var(--notch) 14px); }
.is-boardtop .site-header .modes button[aria-pressed="true"] { background: var(--edge-lit); }
.is-boardtop[data-tone="light"] .site-header .modes button { opacity: 0.45; }
.is-boardtop[data-tone="light"] .site-header .modes button[aria-pressed="true"] { opacity: 1; }
.is-boardtop .site-header .theme-btn { right: var(--edge-gap); color: var(--edge-ink); }
/* (the room's panel open beside the space, for one's inner circle or the hall: light and dark, the zoom and the profile
   left of it) */
@media (min-width: 900px) { .is-boardtop body.is-room-open { --edge-gap: calc(340px + var(--gutter)); --edge-side: 340px; } }
/* (the talk no taller than leaves it under the zoom, above a recorder) */
.is-boardtop .rm-live-talk { max-height: min(42vh, 320px, calc(100vh - var(--edge-foot) - 290px)); }
/* (the water's: foam, its mark the shallows' blue) */
.is-boardtop[data-space="music"] .site-header .brand { color: #E8F6F8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.is-boardtop[data-space="music"] .site-header .brand-mark { fill: #9ED9E6; }
/* the zoom, by light and dark, faint */
.is-boardtop .maker .tt-zoom { position: fixed; left: auto; right: calc(var(--edge-gap) + 46px); top: 8px; bottom: auto; z-index: 60; padding: 2px; border-color: var(--notch-edge); background: var(--notch); box-shadow: none; }
.is-boardtop .maker .tt-zoom .icon-btn, .is-boardtop .maker .tt-zoom .tt-zoom-level { color: var(--edge-ink); }
.is-boardtop .maker .tt-zoom .icon-btn:hover, .is-boardtop .maker .tt-zoom .tt-zoom-level:hover { background: var(--edge-lit); }
/* the profile and the talk's cord, above a recorder or left of a pad */
.is-boardtop .site-header .acct-btn { right: calc(70px + var(--edge-side)); bottom: calc(36px + var(--edge-foot)); }
.is-boardtop .rm.is-live .rm-cord { right: calc(12px + var(--edge-side)); bottom: var(--edge-foot); }
.is-boardtop .rm.is-live .rm-live { right: calc(14px + var(--edge-side)); bottom: calc(84px + var(--edge-foot)); width: min(330px, calc(100vw - 28px - var(--edge-side))); }
.is-boardtop .rm.is-live .rm-bubble { right: calc(66px + var(--edge-side)); bottom: calc(36px + var(--edge-foot)); }
.is-boardtop[data-space="music"] body, .is-boardtop[data-space="tale"] body { --edge-foot: 124px; }
.is-boardtop[data-space="speak"] body { --edge-foot: 0px; }
/* each space's own things at its top, under me and we and clear of the notch */
.is-boardtop .maker .fw-make { top: 64px; }
.is-boardtop .maker .rx-get.fw-make { top: 58px; }
.is-boardtop .maker .sg-open { top: 64px; }
.is-boardtop .maker .sg { top: 108px; max-height: calc(100% - 124px); }
.is-boardtop .maker .bw-tools { top: 64px; }
.is-boardtop .maker .tt-row { padding-top: 96px; }
.is-boardtop .maker .bd-cards { padding-top: 60px; }
/* the talk in the linen spaces: the page's ink, a halo of the linen round it to read over anything (data-talk: as the space's tone, but white over Speak's crowd) */
.is-boardtop[data-talk="light"] .rm-ll p, .is-boardtop[data-talk="light"] .rm-ln p, .is-boardtop[data-talk="light"] .rm-live-grown, .is-boardtop[data-talk="light"] .rm-live-more,
.is-boardtop[data-talk="light"] .rm-live-note, .is-boardtop[data-talk="light"] .rm-at-acct, .is-boardtop[data-talk="light"] .rm .rm-live-text { color: var(--ink); text-shadow: 0 0 2px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg); }
.is-boardtop[data-talk="light"] .rm-ll b, .is-boardtop[data-talk="light"] .rm-at small, .is-boardtop[data-talk="light"] .rm-live-link { color: var(--muted); }
.is-boardtop[data-talk="light"] .rm-ll.is-mine b { color: var(--leaf); }
.is-boardtop[data-talk="light"] .rm-ll.is-claude b { color: #A9512F; }
.is-boardtop[data-talk="light"] .rm-live-t, .is-boardtop[data-talk="light"] .rm-ll a { color: var(--accent); text-shadow: 0 0 6px var(--bg); }
.is-boardtop[data-talk="light"] .rm-live-t:hover { color: var(--accent-strong); }
.is-boardtop[data-talk="light"] .rm-live-t:disabled { color: var(--muted); }
.is-boardtop[data-talk="light"] .rm-live-b { border-color: rgba(var(--shade), 0.3); background: var(--surface); color: var(--ink); filter: none; box-shadow: 0 4px 10px -6px rgba(var(--shade), 0.5); }
.is-boardtop[data-talk="light"] .rm-live-b:hover { background: var(--wash); }
.is-boardtop[data-talk="light"] .rm-live-b[aria-pressed="true"] { border-color: transparent; background: var(--ink); color: var(--bg); }
.is-boardtop[data-talk="light"] .rm-live-b.rm-live-hang { border-color: transparent; background: #9A4A33; color: #FFFFFF; }
.is-boardtop[data-talk="light"] .rm .rm-live-text { border-bottom-color: rgba(var(--shade), 0.3); }
.is-boardtop[data-talk="light"] .rm .rm-live-text::placeholder { color: var(--muted); }
.is-boardtop[data-talk="light"] .rm .rm-live-text:focus { border-bottom-color: var(--ink); }
.is-boardtop[data-talk="light"] .rm-live-faces .rm-av { box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(var(--shade), 0.3); }
.is-boardtop[data-talk="light"] .rm-live-faces .rm-av.is-call { box-shadow: 0 0 0 2px var(--leaf), 0 2px 6px rgba(var(--shade), 0.3); }
@media (max-width: 640px) {
  .is-boardtop .maker .tt-zoom { right: 4px; top: 42px; flex-direction: column; }
  .is-boardtop .maker .tt-zoom .tt-zoom-level { display: none; }
  .is-boardtop .maker .fw-make { top: 50px; }
  .is-boardtop .maker .bw-tools { top: 50px; right: 54px; }
  .is-boardtop .maker .rx-get.fw-make { top: 50px; left: 10px; right: 52px; }
  .is-boardtop .rm.is-live .rm-cord { right: calc(6px + var(--edge-side)); }
  .is-boardtop .rm.is-live .rm-live { right: calc(10px + var(--edge-side)); width: calc(100vw - 20px - var(--edge-side)); }
  .is-boardtop .site-header .acct-btn { right: calc(58px + var(--edge-side)); bottom: calc(74px + var(--edge-foot)); }
  .is-boardtop .rm.is-live .rm-live { bottom: calc(112px + var(--edge-foot)); }
  .is-boardtop[data-space="speak"] body { --edge-foot: 118px; }
  /* (under the notch: Speak's hint; left of the zoom: the key and the little TV, the tools of a space) */
  .is-boardtop .tt-orbs { right: 50px; top: 52px; }
  .is-boardtop .maker .fw-make { max-width: calc(100% - 66px); }
}

/* ---- Music's endless ocean (ocean.js; 2026-10-23: "the board is an endless ocean with ripples creating sounds and
   sprouts"): the water drawn under the wall (its canvas, moving with it), the tickets floating over it, bobbing */
.mu .mu-wall { background: #0D3F52; }
.mu .mu-world { width: 120000px; height: 80000px; background: none; z-index: 1; }
.mu-sea { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* (since 2026-10-23 night: the sea a real film in WebGL under the wall; the real things on it drawn on a canvas over it;
   GIPHY's stickers, once on, pictures on the wall itself under the tickets, their mark while there are any) */
.mu-things { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.mu-film { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.mu-gifs { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mu-gif { position: absolute; display: block; height: auto; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(2, 26, 36, 0.35)); }
.mu-giphy { position: absolute; left: 14px; bottom: 34px; z-index: 5; margin: 0; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); color: #FFFFFF; font: 700 0.68rem/1.2 var(--sans); letter-spacing: 0.02em; pointer-events: none; }
.mu-giphy[hidden] { display: none; }
/* (the night sea, the page dark: ocean.js draws it; under it, before it's drawn, the night's own dark; GIPHY's glowing) */
:root[data-theme="dark"] .mu .mu-wall { background: #04101C; }
/* (the credits: a word at the wall's foot, the list over the water by it) */
.mu-credits { position: absolute; left: 14px; bottom: 62px; z-index: 5; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: rgba(220, 245, 255, 0.7); font: 600 0.72rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); cursor: pointer; }
.mu-credits:hover, .mu-credits[aria-expanded="true"] { color: #FFFFFF; }
.mu-credit-list { position: absolute; left: 14px; bottom: 90px; z-index: 30; width: min(420px, calc(100% - 28px)); max-height: min(60%, 420px); overflow-y: auto; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--ink); font: 500 0.78rem/1.45 var(--sans); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); }
.mu-credit-list[hidden] { display: none; }
.mu-credit-list h3 { margin: 0 0 4px; font: 700 0.86rem/1.3 var(--sans); }
.mu-credit-list p { margin: 0 0 8px; color: var(--muted); }
.mu-credit-list ul { margin: 0; padding: 0 0 0 16px; }
.mu-credit-list a { color: var(--accent); }
.mu .mu-hint { color: rgba(220, 245, 255, 0.72); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.mu .fw-empty { color: rgba(236, 248, 255, 0.92); opacity: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 30, 45, 0.5); }
@keyframes mu-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@media (prefers-reduced-motion: no-preference) { .mu-tk:not(.is-held):not(.is-flying) { animation: mu-bob 5.5s ease-in-out infinite; } }

/* ---- the world's stories behind the Tale (storybg.js; 2026-10-24: "a chronology of events from the craddle of different
   myths of the begginning to all interesting stories and myths ... the stories embedded in stories ... on the bg ... i can
   zoom and click 3 times to read the story ... the bg theme also alternates across different mediums"): its canvas under
   the threads; the word saying which medium it has turned to; a story read in the medium of the moment */
.tt-stories { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.tt-stories[hidden] { display: none; }
.tt > .tt-list { z-index: 1; }
.tt-medium { position: absolute; left: 16px; top: 56px; z-index: 5; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font: italic 500 0.95rem/1.2 var(--serif); box-shadow: 0 6px 16px -10px rgba(var(--shade), 0.5); pointer-events: none; }
.tt-medium[hidden] { display: none; }
.tt-read { --tb-bg: #FBF8F1; --tb-ink: #262626; --tb-accent: #7A5A2A; --tb-font: var(--serif); --tb-title: var(--display); width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 720px); padding: 0; border: 0; border-radius: 14px; background: var(--tb-bg); color: var(--tb-ink); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.tt-read::backdrop { background: rgba(10, 8, 6, 0.45); }
.tt-read-in { position: relative; max-height: min(78vh, 720px); overflow-y: auto; padding: 26px 30px 24px; font: 400 1.08rem/1.6 var(--tb-font); }
.tt-read-x { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--tb-ink); font: 400 1.6rem/1 var(--sans); cursor: pointer; }
.tt-read-x:hover { background: rgba(127, 127, 127, 0.15); }
.tt-read-kind { margin: 0 40px 4px 0; color: var(--tb-accent); font: italic 500 0.9rem/1.3 var(--tb-font); }
.tt-read-title { margin: 0 40px 6px 0; font: 600 1.9rem/1.15 var(--tb-title); }
.tt-read-meta { margin: 0 0 16px; color: var(--tb-accent); font-size: 0.92rem; }
.tt-read-text p { margin: 0 0 12px; }
.tt-read-more p { margin: 14px 0 0; color: var(--tb-accent); font-size: 0.95rem; }
.tt-read-go { margin: 4px 6px 0 0; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; background: none; color: var(--tb-ink); font: 500 0.9rem/1.2 var(--tb-font); cursor: pointer; }
.tt-read-go:hover { background: rgba(127, 127, 127, 0.12); }
.tt-read[data-medium="cave"] { --tb-bg: #E9D6BE; --tb-ink: #2A1C12; --tb-accent: #8E2F15; --tb-title: "Permanent Marker", cursive; --tb-font: var(--serif); }
.tt-read[data-medium="clay"] { --tb-bg: #D9B88E; --tb-ink: #3B2414; --tb-accent: #6B4A2C; }
.tt-read[data-medium="papyrus"] { --tb-bg: #EEDDAB; --tb-ink: #3B2A14; --tb-accent: #A3301B; }
.tt-read[data-medium="scroll"] { --tb-bg: #F6F0E1; --tb-ink: #151515; --tb-accent: #B22222; --tb-title: "Shadows Into Light Two", cursive; --tb-font: "Kalam", cursive; }
.tt-read[data-medium="manuscript"] { --tb-bg: #F4E8C9; --tb-ink: #2A1F14; --tb-accent: #2B4C9A; }
.tt-read[data-medium="book"] { --tb-bg: #FBF8F1; --tb-ink: #1E1E1E; --tb-accent: #6A6A6A; --tb-title: var(--serif); }
.tt-read[data-medium="newspaper"] { --tb-bg: #EEEBE3; --tb-ink: #151515; --tb-accent: #555; --tb-title: "Anton", sans-serif; }
.tt-read[data-medium="film"] { --tb-bg: #0E0C0A; --tb-ink: #F2EAD8; --tb-accent: #B8AE98; }
.tt-read[data-medium="radio"] { --tb-bg: #2B1F16; --tb-ink: #F0D2A4; --tb-accent: #F0B45A; --tb-title: "Architects Daughter", cursive; --tb-font: "Patrick Hand", cursive; }
.tt-read[data-medium="comic"] { --tb-bg: #FFFDF6; --tb-ink: #1A1A1A; --tb-accent: #B0302A; --tb-title: "Gochi Hand", cursive; --tb-font: "Indie Flower", cursive; }
.tt-read[data-medium="terminal"] { --tb-bg: #0A140C; --tb-ink: #6CF08A; --tb-accent: #3BA858; --tb-title: Consolas, "Courier New", monospace; --tb-font: Consolas, "Courier New", monospace; }
.tt-read[data-medium="feed"] { --tb-bg: #FFFFFF; --tb-ink: #111; --tb-accent: #6B7280; --tb-title: system-ui, "Segoe UI", sans-serif; --tb-font: system-ui, "Segoe UI", sans-serif; }

/* ---- Research: the map (universe.js; the founder, 2026-10-25: "a zoomable almost infinite map like stellarium,
   combining microscopic cells, atoms, bytes, lattice tructures, planets, stars, everything and nothing", then "add
   waves"): a night sky edge to edge, drawn on one canvas; what a thing is at the top left, as Stellarium tells it; the
   way down to here and how much the screen holds along the foot at the left; the bar in the foot's middle, dressed as
   the notch is; the paper reader (Research's own, .rs-read) on a night desk ---- */
.um { position: absolute; inset: 0; overflow: hidden; background: #020309; color: #E9ECF5; font-family: var(--sans); text-align: left; user-select: none; -webkit-user-select: none; }
.um[hidden] { display: none; }
.um [hidden] { display: none !important; }
.um-sky { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; touch-action: none; cursor: crosshair; }
.um-sky.is-panning { cursor: grabbing; }
.um-info { position: absolute; left: 16px; top: 64px; z-index: 2; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 160px); overflow: auto; padding: 2px 30px 6px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); user-select: text; -webkit-user-select: text; scrollbar-width: thin; }
.um-kind { margin: 0 0 3px; color: rgba(233, 236, 245, 0.6); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.um-name { margin: 0 0 6px; color: #F4F1E6; font: 600 1.35rem/1.15 var(--sans); }
.um-say { margin: 0 0 8px; color: rgba(233, 236, 245, 0.9); font-size: 0.9rem; line-height: 1.45; }
.um-wiki { display: flex; gap: 10px; align-items: flex-start; }
.um-pic { flex: none; width: 60px; height: 60px; border-radius: 8px; object-fit: cover; opacity: 0.92; }
.um-lead { margin: 0 0 8px; color: rgba(233, 236, 245, 0.6); font-size: 0.8rem; line-height: 1.45; }
.um-lead:empty { display: none; }
.um-rows { margin: 2px 0 8px; }
.um-row { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: baseline; margin: 0 0 5px; font-size: 0.78rem; }
.um-row b { margin-right: 2px; color: rgba(233, 236, 245, 0.5); font-weight: 600; }
.um-chip { padding: 2px 9px; border: 0; border-radius: 999px; background: rgba(244, 241, 230, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 241, 230, 0.12); color: #DDE3F5; font: inherit; cursor: pointer; }
.um-chip:hover, .um-chip:focus-visible { background: rgba(244, 241, 230, 0.16); outline: none; }
.um-do { display: flex; gap: 8px; }
.um-btn { padding: 7px 15px; border: 0; border-radius: 999px; background: rgba(242, 216, 115, 0.13); box-shadow: inset 0 0 0 1px rgba(242, 216, 115, 0.35); color: #F2D873; font: 600 0.85rem/1 var(--sans); cursor: pointer; }
.um-btn:hover, .um-btn:focus-visible { background: rgba(242, 216, 115, 0.24); outline: none; }
.um-x { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(233, 236, 245, 0.6); cursor: pointer; }
.um-x:hover { background: rgba(244, 241, 230, 0.1); }
.um-x .i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.um-foot { position: absolute; left: 16px; bottom: 14px; z-index: 1; max-width: calc(50% - 140px); pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.um-where { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 5px; padding: 0; list-style: none; font-size: 0.74rem; }
.um-where li { display: flex; align-items: center; color: rgba(233, 236, 245, 0.45); }
.um-where li + li::before { content: "\203A"; margin: 0 5px; color: rgba(233, 236, 245, 0.3); }
.um-where button { padding: 0; border: 0; background: none; color: rgba(233, 236, 245, 0.72); font: inherit; cursor: pointer; pointer-events: auto; }
.um-where button:hover, .um-where button:focus-visible { color: #F2D873; outline: none; }
.um-scale { display: flex; flex-direction: column; gap: 5px; margin: 0; color: rgba(233, 236, 245, 0.78); font-size: 0.76rem; }
.um-gauge { position: relative; width: 180px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(233, 236, 245, 0.05), rgba(233, 236, 245, 0.3)); }
.um-gauge i { position: absolute; top: -3px; width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: #F2D873; transition: left 0.2s ease; }
.um-bar { position: absolute; left: 50%; bottom: 14px; z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--notch, rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px var(--notch-edge, rgba(244, 241, 230, 0.12)); transform: translateX(-50%); }
.um-key { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(244, 241, 230, 0.86); cursor: pointer; }
.um-key .i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.um-key:hover, .um-key:focus-visible { background: rgba(244, 241, 230, 0.12); outline: none; }
.um-key[aria-pressed="false"] { color: rgba(244, 241, 230, 0.36); }
.um-find { position: absolute; left: 50%; bottom: 62px; z-index: 3; width: min(380px, calc(100% - 32px)); padding: 6px; border-radius: 16px; background: rgba(10, 12, 22, 0.94); box-shadow: inset 0 0 0 1px rgba(244, 241, 230, 0.14), 0 12px 30px -12px rgba(0, 0, 0, 0.8); transform: translateX(-50%); }
.um-q { box-sizing: border-box; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; outline: none; background: rgba(244, 241, 230, 0.07); color: #F4F1E6; font: 0.95rem/1.2 var(--sans); }
.um-found { max-height: 260px; margin: 4px 0 0; padding: 0; overflow: auto; list-style: none; }
.um-found:empty { display: none; }
.um-found button { display: flex; flex-direction: column; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: #E9ECF5; font: 0.9rem/1.25 var(--sans); text-align: left; cursor: pointer; }
.um-found button:hover, .um-found button:focus-visible { background: rgba(244, 241, 230, 0.08); outline: none; }
.um-found small { color: rgba(233, 236, 245, 0.5); font-size: 0.74rem; }
.um-hint { position: absolute; left: 50%; bottom: 62px; z-index: 1; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(10, 12, 22, 0.6); color: rgba(233, 236, 245, 0.78); font-size: 0.8rem; white-space: nowrap; pointer-events: none; transform: translateX(-50%); transition: opacity 0.6s ease; }
.um-hint.is-gone { opacity: 0; }
.um-read { --rd-desk: #070912; }
@media (max-width: 640px) {
  .um-info { top: 54px; left: 12px; width: calc(100% - 24px); max-height: 46%; }
  .um-name { font-size: 1.15rem; }
  .um-foot { left: 12px; bottom: 62px; max-width: calc(100% - 24px); }
  .um-where { display: none; }
  .um-gauge { width: 130px; }
  .um-find { bottom: 62px; }
  .um-hint { bottom: 104px; white-space: normal; width: calc(100% - 48px); text-align: center; }
}
/* the Tale's background (talesbg.js; 2026-10-25: "the render on the tales section was suppose to look like this not
   the clips", "it is suppose to tell the stories like this from history to the present", "simulate the events like the
   research map", "should be on the bg", "take off the story arrangements still sticking in the bg"): the map's engine
   with the world's stories, the night behind the Tale's threads, moved by the wall; its controls clear of the Tale's
   own: the way down and the time across under the notch, the bar down the left edge, what a story is a night card
   beside it; the article over all of it */
.um.um-tale { z-index: 0; }
.um-tale-ui { position: absolute; inset: 0; z-index: 4; color: #E9ECF5; font-family: var(--sans); text-align: left; pointer-events: none; }
.um-tale-ui[hidden] { display: none; }
.um-tale-ui > * { pointer-events: auto; }
.um-tale-ui [hidden] { display: none !important; }
.um-tale-ui .um-info { left: 64px; top: 116px; width: min(330px, calc(100% - 80px)); max-height: calc(100% - 270px); padding: 14px 34px 14px 16px; border-radius: 16px; background: rgba(8, 10, 22, 0.92); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(244, 241, 230, 0.1); text-shadow: none; }
.um-tale-ui .um-x { top: 6px; right: 6px; }
.um-tale-ui .um-foot { left: 50%; top: 52px; bottom: auto; max-width: 60%; text-align: center; transform: translateX(-50%); }
.um-tale-ui .um-where { justify-content: center; }
.um-tale-ui .um-scale { align-items: center; }
.um-tale-ui .um-bar { left: 12px; top: 50%; bottom: auto; flex-direction: column; transform: translateY(-50%); }
.um-tale-ui .um-find { left: 50%; top: 100px; bottom: auto; }
.um-tale-ui .um-hint { display: none !important; }
@media (max-width: 640px) {
  .um-tale-ui .um-info { left: 12px; right: 12px; top: 100px; width: auto; max-height: 45%; }
  .um-tale-ui .um-where { display: none; }
}

/* the ink's size, shown by the pen for a moment as it changes (desktop.js; the pen's + and −) */
.ink-size { position: fixed; z-index: 2147483000; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--surface, #FBF8F1); box-shadow: 0 6px 22px -8px rgba(20, 16, 10, 0.45), 0 0 0 1px rgba(20, 16, 10, 0.08); pointer-events: none; opacity: 0; transform: scale(0.9); transition: opacity 0.15s ease, transform 0.15s ease; }
.ink-size.is-on { opacity: 1; transform: scale(1); }
.ink-size i { display: block; border-radius: 50%; background: var(--ink, #262A18); }
.ink-size b { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--surface, #FBF8F1); color: var(--ink, #262A18); font: 600 11px/1.3 var(--sans, system-ui); white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 16, 10, 0.08); }

/* ---- the tool wheel (toolwheel.js; 2026-11-06, the founder: "EVERYTHINNG ON THIS TRAY"): over a drawing space in the
   desktop app; the tools round a ring, the size, colour, smoothing and opacity in its hub, undo and redo beside it, the
   colours and the layers under it; light and airy, in the page's own day and night ---- */
.tw { --tw-bg: var(--surface, #FBF8F1); --tw-card: var(--bg, #F6F0E6); --tw-ink: var(--ink, #262A18); --tw-ink2: var(--ink-2, #6A6650); --tw-rule: rgba(38, 42, 24, 0.12); --tw-on: #262A18; --tw-on-ink: #F6F0E6; --tw-accent: #922532;
  --tw-auto: linear-gradient(135deg, #262A18 0 50%, #EFE8D6 50% 100%);
  position: fixed; z-index: 70; display: grid; grid-template-columns: 36px 232px; grid-template-rows: auto auto auto; gap: 8px 6px; width: max-content; padding: 20px 4px 4px 0;
  /* (just the wheel: no box behind it, each part floating on its own) */
  background: none; color: var(--tw-ink); touch-action: none; pointer-events: none; user-select: none; -webkit-user-select: none; }
:root[data-theme="dark"] .tw { --tw-rule: rgba(239, 232, 214, 0.12); --tw-on: #EFE8D6; --tw-on-ink: #12141A; --tw-accent: #E0717E; }
.tw[hidden] { display: none; }
.tw > * { pointer-events: auto; }
.tw-grip { position: absolute; top: 4px; left: calc(36px + 116px + 6px); width: 46px; height: 8px; margin-left: -23px; padding: 0; border: 0; border-radius: 99px; background: var(--tw-bg); box-shadow: 0 3px 10px -3px rgba(20, 16, 10, 0.5), 0 0 0 1px var(--tw-rule); cursor: grab; }
.tw-grip:hover { background: var(--tw-ink2); }
.tw-fold { position: absolute; top: 14px; right: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--tw-bg); color: var(--tw-ink2); font: 700 16px/1 var(--sans, system-ui); box-shadow: 0 4px 12px -4px rgba(20, 16, 10, 0.5), 0 0 0 1px var(--tw-rule); cursor: pointer; }
.tw-fold:hover { color: var(--tw-ink); }
.tw-side { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.tw-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--tw-bg); color: var(--tw-ink); box-shadow: 0 6px 14px -6px rgba(20, 16, 10, 0.55), 0 0 0 1px var(--tw-rule); cursor: pointer; }
.tw-btn svg { width: 18px; height: 18px; }
.tw-btn:disabled { opacity: 0.35; cursor: default; }
.tw-btn:not(:disabled):hover { box-shadow: 0 0 0 1.5px var(--tw-ink2); }
.tw-wheel { grid-row: 1; grid-column: 2; position: relative; width: 232px; height: 232px; }
.tw-ring { display: block; overflow: visible; filter: drop-shadow(0 12px 18px rgba(20, 16, 10, 0.32)) drop-shadow(0 1px 2px rgba(20, 16, 10, 0.18)); }
.tw-slot { cursor: pointer; outline: none; }
.tw-slot > path { fill: var(--tw-card); stroke: var(--tw-rule); stroke-width: 1; transition: fill 0.12s ease; }
.tw-slot:hover > path, .tw-slot:focus-visible > path { fill: color-mix(in srgb, var(--tw-card) 80%, var(--tw-ink2)); }
.tw-slot.is-on > path { fill: var(--tw-on); }
.tw-slot.is-off { opacity: 0.28; cursor: default; }
.tw-slot-in { display: grid; place-items: center; width: 30px; height: 34px; color: var(--tw-ink); pointer-events: none; }
.tw-slot-in svg { width: 20px; height: 20px; color: inherit; }
.tw-slot-in svg path, .tw-slot-in svg circle { fill: none; stroke: currentColor; }
.tw-slot-in b { font: 700 9.5px/1 var(--sans, system-ui); letter-spacing: 0.01em; }
.tw-slot.is-on .tw-slot-in { color: var(--tw-on-ink); }
.tw-hub { position: absolute; left: 50%; top: 50%; width: 124px; height: 124px; margin: -62px 0 0 -62px; display: grid; grid-template-rows: 26px 1fr 26px; justify-items: center; align-items: center; padding: 8px 6px; border-radius: 50%; background: var(--tw-bg); box-shadow: 0 0 0 1px var(--tw-rule), 0 6px 16px -10px rgba(20, 16, 10, 0.5); }
.tw-val { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; border-radius: 99px; background: none; color: var(--tw-ink); font: 700 11.5px/1 var(--sans, system-ui); cursor: ns-resize; touch-action: none; }
.tw-val svg { width: 14px; height: 14px; color: var(--tw-ink2); }
.tw-val:hover { background: var(--tw-rule); }
.tw-hub-row { display: flex; gap: 2px; }
.tw-hub-row .tw-val { font-size: 10.5px; }
.tw-colour { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--tw-card); box-shadow: inset 0 0 0 1px var(--tw-rule); cursor: pointer; }
.tw-colour i { display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.tw-colour i.is-eraser { box-shadow: inset 0 0 0 2px var(--tw-ink2); }
.tw-palette { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 0 2px; }
.tw-sw { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 4px 9px -4px rgba(20, 16, 10, 0.6); cursor: pointer; }
.tw-sw.is-auto { background: var(--tw-auto); }
.tw-sw.is-on { box-shadow: 0 0 0 2px var(--tw-bg), 0 0 0 4px var(--tw-accent); }
.tw-sw.is-more { background: var(--tw-bg); color: var(--tw-ink2); font: 700 14px/1 var(--sans, system-ui); box-shadow: 0 0 0 1px var(--tw-rule), 0 4px 9px -4px rgba(20, 16, 10, 0.6); }
.tw-layers-btn { grid-row: 3; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding: 7px 14px 7px 10px; border: 0; border-radius: 99px; background: var(--tw-bg); color: var(--tw-ink); font: 700 13px/1 var(--sans, system-ui); box-shadow: 0 6px 14px -6px rgba(20, 16, 10, 0.55), 0 0 0 1px var(--tw-rule); cursor: pointer; }
.tw-layers-btn svg { width: 17px; height: 17px; }
.tw-layers-btn[hidden] { display: none; }
.tw.no-colour .tw-colour, .tw.no-colour .tw-palette, .tw.no-opacity .tw-opacity, .tw.no-size .tw-size, .tw.no-smooth .tw-smooth { opacity: 0.3; pointer-events: none; }
.bw-sel-box { fill: none; stroke: #922532; stroke-dasharray: 6 5; }
.bw-sel-loop { fill: rgba(146, 37, 50, 0.06); stroke: #922532; stroke-dasharray: 5 5; }
.tw-dot { display: none; }
.tw.is-folded { padding: 0; grid-template-columns: auto; }
.tw.is-folded > *:not(.tw-dot) { display: none; }
.tw.is-folded .tw-dot { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--tw-bg); color: var(--tw-ink); box-shadow: 0 10px 26px -12px rgba(20, 16, 10, 0.6), 0 0 0 1px var(--tw-rule), inset 0 -4px 0 var(--c, #262A18); cursor: pointer; }
.tw-dot svg { width: 22px; height: 22px; }
/* its popups: the colour picker, the layers */
.tw-pop { position: fixed; z-index: 71; padding: 12px; border-radius: 18px; background: var(--surface, #FBF8F1); color: var(--ink, #262A18); box-shadow: 0 22px 50px -24px rgba(20, 16, 10, 0.55), 0 0 0 1px rgba(38, 42, 24, 0.12); font: 13px/1.3 var(--sans, system-ui); }
.tw-sv, .tw-hue { position: relative; width: 200px; margin-bottom: 10px; touch-action: none; }
.tw-sv canvas { display: block; width: 200px; height: 150px; border-radius: 10px; cursor: crosshair; }
.tw-hue canvas { display: block; width: 200px; height: 14px; border-radius: 99px; cursor: ew-resize; }
.tw-sv i, .tw-hue i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.4); pointer-events: none; }
.tw-hue i { top: 7px; }
.tw-pick-row { display: flex; align-items: center; gap: 8px; }
.tw-pick-now { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.tw-hex { width: 80px; padding: 5px 8px; border: 0; border-radius: 8px; background: var(--bg, #F6F0E6); color: inherit; font: 600 12px/1 ui-monospace, Consolas, monospace; box-shadow: inset 0 0 0 1px rgba(38, 42, 24, 0.15); }
.tw-auto { margin-left: auto; padding: 6px 10px; border: 0; border-radius: 99px; background: var(--bg, #F6F0E6); color: inherit; font: 700 11px/1 var(--sans, system-ui); box-shadow: inset 0 0 0 1px rgba(38, 42, 24, 0.15); cursor: pointer; }
.tw-pop-layers { width: 300px; }
.tw-ly-list { display: grid; gap: 4px; margin-bottom: 8px; }
.tw-ly { display: grid; grid-template-columns: 26px 1fr 64px 22px 22px 22px; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 10px; cursor: pointer; }
.tw-ly:hover { background: rgba(38, 42, 24, 0.06); }
.tw-ly.is-on { background: rgba(146, 37, 50, 0.1); box-shadow: inset 0 0 0 1.5px #922532; }
.tw-ly.is-hidden span { opacity: 0.45; }
.tw-ly span { font-weight: 600; }
.tw-ly button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font-size: 12px; cursor: pointer; }
.tw-ly button:hover:not(:disabled) { background: rgba(38, 42, 24, 0.1); }
.tw-ly button:disabled { opacity: 0.3; }
.tw-ly input { width: 64px; accent-color: #922532; }
.tw-ly-add { width: 100%; padding: 8px; border: 0; border-radius: 10px; background: var(--bg, #F6F0E6); color: inherit; font: 700 12px/1 var(--sans, system-ui); box-shadow: inset 0 0 0 1px rgba(38, 42, 24, 0.15); cursor: pointer; }