/* Twin draft (25 Sep 2026): the site in the app's look, over the finished home page.
   Rounded type like the app's pages, the app's own mark, and real renders from Toldit 0.2.224. */
:root{--v-sans:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
body.v5{font-family:var(--v-sans)}

/* The mark: Gilles's app icon, drawn from the master SVG. */
.vmark .tw-mark{display:inline-block;width:24px;height:24px;flex:none}
.vmark .tw-mark svg{display:block;width:100%;height:100%}

/* A stage: the desktop, one real Toldit page, and the Arc on the screen edge. */
.tw-stage{margin:0}
.tw-screen{position:relative;overflow:hidden;border-radius:18px;padding:56px 72px 64px;
  background:#E6E6E4;box-shadow:inset 0 0 0 1px rgba(33,32,31,.06)}
html:not(.light) .tw-screen{background:#262626;box-shadow:inset 0 0 0 1px rgba(241,239,237,.08)}
.tw-window{position:relative;max-width:760px;margin:0 auto;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,18,15,.08),0 2px 6px rgba(20,18,15,.05),0 18px 44px rgba(20,18,15,.10)}
html:not(.light) .tw-window{box-shadow:0 0 0 1px rgba(244,239,231,.10),0 18px 44px rgba(0,0,0,.45)}
.tw-shot{display:block;width:100%;height:auto}
.tw-shot.tw-after{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--v-glide)}
.tw-stage[data-phase="after"] .tw-shot.tw-after{opacity:1}
html.light .tw-dark,html:not(.light) .tw-light{display:none}
.tw-arc{position:absolute;right:0;top:40px;width:84px;height:auto;pointer-events:none}

/* Under the stage: the words said, then what they did. */
.tw-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:16px;
  font-size:14px;color:var(--site-secondary)}
.tw-said{margin:0;font-size:17px;color:var(--v-ink);opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--v-glide),transform .5s var(--v-glide)}
.tw-stage[data-phase="said"] .tw-said,.tw-stage[data-phase="after"] .tw-said{opacity:1;transform:none}
.tw-state{display:block;margin-top:6px;font-size:13px;color:var(--site-subtle)}
.tw-meta{display:flex;align-items:baseline;gap:16px;white-space:nowrap}
.tw-replay{font:inherit;font-size:13px;color:var(--site-secondary);background:none;border:0;padding:0;cursor:pointer}
.tw-replay:hover{color:var(--v-ink)}
.tw-replay[hidden]{display:none}

@media (max-width:720px){
  .tw-screen{padding:28px 20px 36px;border-radius:14px}
  .tw-arc{width:56px;top:20px}
  .tw-caption{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .tw-shot.tw-after,.tw-said{transition:none}
}

.tw-stage.tw-first{margin-bottom:56px}

/* Everyday examples: the words said, then Toldit's own reply, word for word from our checks on build 233. */
.tw-exchange{margin-top:18px}
.tw-exchange + .tw-exchange{margin-top:28px}
.everyday-card .tw-exchange blockquote{min-height:0;margin:0 0 12px}
.tw-reply{margin:0;padding:16px 20px;border-radius:14px;background:var(--v-raise);box-shadow:0 0 0 1px var(--v-line2);
  font-size:16px;line-height:1.55;color:var(--v-ink)}
.tw-reply .small-label{display:block;margin-bottom:6px}
.tw-reply-note{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--site-secondary)}

/* Dictation page: while it listens, the app shows the Arc on the screen edge (the default since 24 Sep), not a "Listening" tag. */
.say-listener{display:none}
.say-arc{position:absolute;right:0;top:48px;z-index:5;width:84px;height:auto;pointer-events:none;opacity:0;
  transition:opacity .35s var(--v-glide)}
.say-stage:has(.say-window[data-listening="true"]) .say-arc{opacity:1}
@media (max-width:760px){.say-arc{width:56px;top:24px}}
@media (prefers-reduced-motion:reduce){.say-arc{transition:none}}