/* Figure 5. Break it: turn up the clock. Every class is prefixed tt5-. The figure takes the page's tokens (--tt-paper, --tt-ink,
   --tt-cyan, ...) when the page defines them, and the design stack's values when it does not. */
.tt5 {
  --ttf-paper: var(--tt-paper, #faf8f3); --ttf-ink: var(--tt-ink, #1d1d1b); --ttf-body: var(--tt-body, #2a2926);
  --ttf-soft: var(--tt-soft, #3c3a36); --ttf-hair: var(--tt-hair, #8a8a8a);
  --ttf-rule: color-mix(in srgb, var(--ttf-ink) 16%, var(--ttf-paper));
  --ttf-tint: color-mix(in srgb, var(--ttf-ink) 6%, var(--ttf-paper));
  --ttf-c: var(--tt-cyan, #009fe3); --ttf-m: var(--tt-magenta, #e6007e);
  --ttf-c-text: var(--tt-cyan-text, #0072b5); --ttf-m-text: var(--tt-magenta-text, #c4006b);
  --ttf-text: var(--tt-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --ttf-mono: var(--tt-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0; color: var(--ttf-body); font-family: var(--ttf-text); font-weight: 420; line-height: 1.42; font-optical-sizing: auto;
  box-sizing: border-box; position: relative;
}
@media screen and (prefers-color-scheme: dark) {
  .tt5 { --ttf-paper: var(--tt-paper, #141413); --ttf-ink: var(--tt-ink, #faf8f3); --ttf-body: var(--tt-body, #e9e6df);
    --ttf-soft: var(--tt-soft, #c9c5bc); --ttf-c: var(--tt-cyan, #2bb3f0); --ttf-m: var(--tt-magenta, #ff3d9e);
    --ttf-c-text: var(--tt-cyan-text, #2bb3f0); --ttf-m-text: var(--tt-magenta-text, #ff6fb5); }
}
.tt5 *, .tt5 *::before, .tt5 *::after { box-sizing: border-box; }
:where(.tt5) p, :where(.tt5) dl, :where(.tt5) dd { margin: 0; }
.tt5-label { font: 700 .72rem/1.3 var(--ttf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ttf-soft); }
.tt5-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--ttf-rule); }
.tt5-head .tt5-live { color: var(--ttf-ink); }
.tt5-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--ttf-c); vertical-align: .05rem; }
.tt5-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: clamp(.9rem, 2vw, 1.4rem); align-items: start; }
.tt5-view { display: block; width: 100%; height: 270px; min-width: 0; }
.tt5-panel { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding-top: 8px; }
.tt5-slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; align-items: baseline;
  font: 700 .66rem/1.3 var(--ttf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ttf-ink); }
.tt5-slider output { font: 400 .9rem/1.2 var(--ttf-mono); letter-spacing: .02em; color: var(--ttf-ink); text-transform: none; font-variant-numeric: tabular-nums; }
.tt5-slider input { grid-column: 1 / -1; width: 100%; margin: .3rem 0 0; accent-color: var(--ttf-ink); min-height: 28px; }
.tt5-slider input:focus-visible { outline: 2px solid var(--ttf-ink); outline-offset: 2px; }
.tt5-ends { display: flex; justify-content: space-between; font: 400 .62rem/1.2 var(--ttf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ttf-soft); }
.tt5-read { display: grid; gap: .45rem; border-top: 1px solid var(--ttf-rule); padding-top: .6rem; margin-top: .2rem; }
.tt5-read div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.tt5-read dt { font: 700 .62rem/1.3 var(--ttf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ttf-soft); }
.tt5-read dd { font: 400 .95rem/1.2 var(--ttf-mono); color: var(--ttf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt5-words { margin-top: .8rem; font-size: .95rem; line-height: 1.38; color: var(--ttf-ink); font-variant-numeric: tabular-nums; max-width: 60rem; min-height: 2.8em; }
.tt5-note { margin-top: .5rem; font-size: .78rem; line-height: 1.35; color: var(--ttf-soft); max-width: 52rem; }
.tt5-caption { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--ttf-rule); font-size: .92rem; color: var(--ttf-body); max-width: 52rem; }
.tt5-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 619px) {
  .tt5-grid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .tt5-view { height: 330px; }
  .tt5-words { font-size: .86rem; }
}
@media (pointer: coarse) { .tt5 input[type="range"] { min-height: 44px; } }
.tt5.tt5-print { --ttf-paper: #ffffff; --ttf-ink: #1d1d1b; --ttf-body: #2a2926; --ttf-soft: #3c3a36; --ttf-c: #009fe3; --ttf-m: #e6007e;
  --ttf-c-text: #0072b5; --ttf-m-text: #c4006b; }
@media print {
  .tt5-slider input, .tt5-ends { display: none; }
  .tt5, .tt5 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tt5-grid { break-inside: avoid; }
}
@media (forced-colors: active) {
  .tt5 { --ttf-paper: Canvas; --ttf-ink: CanvasText; --ttf-body: CanvasText; --ttf-soft: CanvasText; --ttf-hair: GrayText; --ttf-rule: GrayText;
    --ttf-tint: Canvas; --ttf-c: Highlight; --ttf-c-text: CanvasText; --ttf-m: LinkText; --ttf-m-text: LinkText; }
  .tt5 canvas { forced-color-adjust: none; }
  .tt5-live::before { forced-color-adjust: none; background: Highlight; }
}
.tt5-k { text-transform: none; letter-spacing: .02em; }
.tt5-read div.tt5-stack { flex-direction: column; align-items: flex-start; gap: .2rem; }
.tt5-check { font-size: .74rem; line-height: 1.3; color: var(--ttf-soft); margin-top: .1rem; }