/* The reading surface every variation composes: a paper page whose words move
   between ordinary wrapping and the app's phrase lines. Dimming follows the
   app's own default — emphasis `.dim`, everything but the current chunk
   lowered — so the demonstration looks like the reader it demonstrates. */

.demo-page {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 14px;
  background: #e8dfcc;
  color: #292822;
}
.demo-paper { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.demo-passage, .demo-words {
  padding: var(--demo-padding, clamp(24px, 6.5cqw, 46px));
  font: 400 var(--demo-size, clamp(17px, 4.4cqw, 28px))/1.6 Georgia, 'Times New Roman', serif;
  letter-spacing: -.024em;
}
.demo-words { display: none; }
.demo-passage.sr-only { padding: 0; }
.demo-page.is-ready .demo-words { display: block; }
.demo-paragraph + .demo-paragraph { margin-top: 1em; }
/* Phrasing is a line break before every line start, shown when the setting is on. */
.demo-break { display: none; }
.demo-page.is-phrased .demo-break { display: inline; }
.demo-group { display: contents; }
.demo-page.is-phrased .demo-group { display: block; }
.demo-word { display: inline-block; }

/* `scrimOpacity` is 0.5 in the shipping default; a 50% scrim of the paper over
   the ink is what this opacity stands in for. */
.demo-page.is-guided .demo-word { opacity: .42; transition: opacity 200ms ease; }
.demo-page.is-guided .demo-group.is-current .demo-word, .demo-page.is-guided .demo-word.is-current { opacity: 1; }
.demo-page.is-marked .demo-group.is-current { border-radius: 3px; box-shadow: 0 0 0 .18em #d9a24e42; background: #d9a24e42; }
.demo-page.is-marked.is-phrased .demo-group.is-current { display: inline-block; }

.motion-paused .demo-word { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .demo-word { transition: none !important; } }

/* Controls shared by the variations that sit on the dark ground. */
.demo-switches { display: flex; flex-wrap: wrap; gap: 9px; }
.demo-switch {
  display: inline-flex; align-items: baseline; gap: 10px;
  min-height: 44px; padding: 10px 17px;
  border: 1px solid #ffffff30; border-radius: 26px;
  background: transparent; color: inherit; font-size: 14px;
}
.demo-switch:hover { border-color: #ffffff7a; }
.demo-switch [data-value] { min-width: 25px; font-size: 14px; }
.demo-switch[aria-checked="true"] { background: #f2f5f8; border-color: #f2f5f8; color: #15181d; }
.demo-switch[aria-checked="true"] [data-value] { opacity: 1; }

.demo-transport { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 19px 10px 15px; border: 1px solid #ffffff30; border-radius: 26px; background: transparent; color: inherit; font-size: 14px; }
.demo-transport:hover { border-color: #ffffff7a; }
.demo-transport svg { flex-shrink: 0; width: 13px; height: 13px; fill: currentColor; }
.demo-transport .play-symbol { display: none; }
.demo-transport[data-running="false"] .play-symbol { display: block; }
.demo-transport[data-running="false"] .pause-symbol { display: none; }

/* A rate control, labelled the way the app labels it. */
.demo-rate { display: grid; gap: 9px; }
.demo-rate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; }
.demo-rate-head output { font-variant-numeric: tabular-nums; font-size: 15px; }
.demo-rate input { width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.demo-rate input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: #ffffff28; }
.demo-rate input::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; margin-top: -7px; border-radius: 50%; background: var(--dark-ember); }
.demo-rate input::-moz-range-track { height: 3px; border-radius: 2px; background: #ffffff28; }
.demo-rate input::-moz-range-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--dark-ember); }
.demo-rate input:focus-visible { outline-offset: 4px; }


/* Variation b1 — Reading, rephrased.
   A feature page for two settings: one headline, one paragraph, and the two
   features as tiles with the reader running inside each. The copy is short
   enough to be read rather than scanned, and the tiles carry one idea apiece. */

.b1 { padding-block: 128px 112px; background: var(--dark); color: var(--dark-ink); }

.b1-head { max-width: 780px; margin-inline: auto; text-align: center; }
.b1-head h2 { font-size: clamp(50px, 6.4vw, 96px); letter-spacing: -.05em; }
.b1-head > p { max-width: 640px; margin: 28px auto 0; color: #b9c0ca; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; text-wrap: pretty; }

.b1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 72px; }
.b1-tile {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: 44px 44px 0;
  border: 1px solid #ffffff0d; border-radius: 30px;
  background: var(--dark-raised);
  overflow: hidden;
}
.b1-tile-copy { display: grid; gap: 16px; justify-items: start; margin-bottom: 34px; }
.b1-tile h3 { margin: 0; font: 700 clamp(24px, 2vw, 29px)/1.2 var(--sans); letter-spacing: -.024em; color: #9aa3af; text-wrap: balance; }
.b1-tile h3 strong { color: var(--dark-ink); }
.b1-tile-copy > p { max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: #aeb7c3; text-wrap: pretty; }

.b1-tile .demo-page {
  /* Use the native 22 em / 16 em layouts, chosen by available page width. */
  --demo-inset: 60px;
  --demo-padding: 30px 30px 6px;
  /* Fills whatever the copy above it leaves, so a tile with fewer controls
     shows more of the page rather than a band of empty ground. */
  flex: 1 1 0;
  min-height: max(352px, var(--demo-min-height, 0px));
  margin-top: auto;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px #00000040;
}
.b1-tile .demo-words, .b1-tile .demo-passage {
  --demo-measure: 22;
  /* Two pixels cover browser/CoreText rounding at a native line boundary. */
  --demo-size: calc((100cqw - var(--demo-inset) - 2px) / var(--demo-measure));
  padding-bottom: 8px;
  letter-spacing: 0;
}
/* Narrow pages use another set of native line breaks, keeping the type legible. */
@container (max-width: 455px) {
  .b1-tile .demo-words, .b1-tile .demo-passage { --demo-measure: 16; }
}
.b1-tile .demo-passage.sr-only { padding: 0; }

.b1-switch { margin-top: 8px; }
.b1-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; width: 100%; margin-top: 8px; }
.b1-controls .b1-switch { margin-top: 0; }
.b1-play { flex-shrink: 0; }
.b1-rate { flex-basis: 100%; max-width: 340px; margin-top: 8px; }
.b1-rate .demo-rate-head label { color: #9aa3af; }

/* The word is the picture in this tile. */
.b1-tile-wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 56px;
  padding: 44px 48px;
}
.b1-stat { flex-shrink: 0; margin: 0; font: 700 clamp(54px, 5.6vw, 84px)/1 var(--sans); letter-spacing: -.05em; background: linear-gradient(100deg, var(--dark-amber), var(--dark-ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b1-tile-wide .b1-tile-copy { margin-bottom: 0; }
.b1-tile-wide .b1-tile-copy > p { max-width: 62ch; }

.b1-footnote { max-width: 760px; margin: 34px auto 0; font-size: 17px; line-height: 1.65; color: #d3d7de; text-wrap: pretty; }
.b1-footnote summary { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; cursor: pointer; list-style: none; color: #ead4bd; }
.b1-footnote summary::-webkit-details-marker { display: none; }
.b1-footnote[open] summary span { transform: rotate(45deg); }
.b1-footnote p { margin-top: 16px; }
.b1-footnote a { margin-left: 4px; color: #b9c0ca; text-decoration: underline; text-underline-offset: 4px; }
.b1-footnote a:hover { color: var(--dark-ink); }

@media (max-width: 1100px) {
  .b1-tile { padding: 36px 36px 0; }
  .b1-tile-wide { padding: 36px; gap: 40px; }
}
/* One column, with the copy beside the page: two columns here would leave the
   page too narrow to hold its measure at a readable size. */
@media (max-width: 1080px) {
  .b1-grid { grid-template-columns: 1fr; }
  .b1-tile { flex-direction: row; align-items: center; gap: 40px; }
  .b1-tile-copy { flex: 1 1 auto; margin-bottom: 0; padding-bottom: 36px; }
  .b1-tile .demo-page { flex: 0 0 52%; align-self: flex-end; height: 352px; min-height: var(--demo-min-height, 0px); margin-top: 0; }
  .b1-tile-wide { flex-direction: row; }
  .b1-tile-wide .b1-tile-copy { padding-bottom: 0; }
}
@media (max-width: 860px) {
  .b1 { padding-block: 84px 76px; }
  .b1-head > p { margin-top: 20px; }
  .b1-grid { gap: 14px; margin-top: 48px; }
  .b1-tile { flex-direction: column; align-items: stretch; gap: 0; padding: 30px 26px 0; border-radius: 26px; }
  .b1-tile-copy { padding-bottom: 0; margin-bottom: 26px; }
  /* `align-self: auto`, or the page — size-contained as a container — shrinks to nothing. */
  .b1-tile .demo-page { flex: none; align-self: auto; width: min(100%, 560px); height: 320px; margin-inline: auto; margin-top: auto; }
  .b1-tile-wide { flex-direction: column; align-items: start; gap: 18px; padding: 30px 26px 34px; }
  .b1-tile-wide .b1-tile-copy { margin-bottom: 0; }
}
/* Narrower still, the page runs to the tile's edges to keep its type readable
   at the measure the lines were broken for. */
@media (max-width: 620px) {
  .b1-tile .demo-page { width: auto; margin-inline: -26px; --demo-inset: 32px; --demo-padding: 20px 16px 4px; border-radius: 0; box-shadow: none; }
}
@media (max-width: 480px) {
  .b1-grid { margin-inline: -12px; }
  .b1-tile { padding: 26px 20px 0; }
  .b1-tile-wide { padding: 26px 20px 30px; }
  .b1-tile .demo-page { height: 300px; margin-inline: -20px; }
  .b1-rate { max-width: none; }
}

/* Phrasing follows the Guided tile: copy and switch, then the page beneath. */
.b1-tile-phrasing .demo-page { min-height: max(352px, var(--demo-min-height, 0px)); }