/* /text-to-speech only (01.11. late, minimal round, STYLE-OPENNOTE-WISPR.md). Loads after t-read.css. Prefix xtts-. Every value is a token
   or the sheet-stack geometry of §7 (same as t-how.css .th2-sheets, so the two stacks look alike). */

/* hero drawing: o-together is wide and low, so it gets the hero width but stays short */
.xtts-art{width:clamp(240px,22vw,320px)}

/* "LoudFlow thinks along": the one tilted sheet stack (§7, Opennote 7683757c) — sand and white, r20, hairline, −6°…+3°.
   Review 01.11.: --max wide (at --mid the four sheets wrapped "four thirty" into five lines), meta line --ink-2 not --ink-3. */
.xtts-sheets{list-style:none;margin-left:auto;margin-right:auto;margin-bottom:0;padding:12px 0;max-width:var(--max);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.xtts-sheets li{position:relative;min-height:190px;padding:28px 26px 30px;border-radius:var(--r-frame);background:var(--sand);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:18px;text-align:left;transition:opacity .7s var(--ease),transform .7s var(--ease),rotate .9s var(--ease)}
.xtts-sheets li+li{margin-left:-18px}
.xtts-sheets li:nth-child(even){background:var(--sheet)}
.xtts-sheets li:nth-child(1){rotate:-6deg;margin-top:18px;z-index:1}
.xtts-sheets li:nth-child(2){rotate:2deg;z-index:2}
.xtts-sheets li:nth-child(3){rotate:-3deg;margin-top:26px;z-index:3}
.xtts-sheets li:nth-child(4){rotate:3deg;margin-top:6px;z-index:4}
.r-anim .xtts-sheets li.r-in:not(.is-in){rotate:-8deg}
.xtts-raw{margin:0;font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.xtts-say{margin:0;font:400 var(--fs-h3)/1.2 var(--serif);color:var(--ink);text-wrap:balance}

/* Free / Pro: one sand panel, text left, drawing right (§6.6, Opennote 1a98f53e) */
.xtts-panel{box-sizing:border-box;max-width:var(--mid);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;text-align:left}
.xtts-panel .r-h{margin:0}
.xtts-panel .r-lead{margin:16px 0 0;max-width:28ch;text-align:left}
.xtts-panel .r-acts{justify-content:flex-start;margin-top:24px}
.xtts-panel img{width:min(100%,var(--art));height:auto;justify-self:center}

.xtts-more{margin-top:32px;justify-content:center}

@media (min-width:821px) and (max-width:1100px){.xtts-sheets{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;row-gap:20px}.xtts-sheets li+li{margin-left:0}.xtts-sheets li:nth-child(even){margin-left:-18px}}
@media (max-width:820px){
  .xtts-sheets{grid-template-columns:1fr;max-width:420px;gap:16px}
  .xtts-sheets li{min-height:0;margin:0!important;rotate:none!important}
}
@media (max-width:760px){
  .xtts-panel{grid-template-columns:1fr;text-align:center}
  .xtts-panel img{order:-1;width:var(--art)}
  .xtts-panel .r-lead{margin-left:auto;margin-right:auto;text-align:center}
  .xtts-panel .r-acts{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.xtts-sheets li{rotate:none!important;transition:none}}