/* Figure 1. One barrier, two clocks. Every class is prefixed tt1-. 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. */
.tt1 {
  --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-display: var(--tt-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --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) {
  .tt1 { --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); }
}
.tt1 *, .tt1 *::before, .tt1 *::after { box-sizing: border-box; }
:where(.tt1) p { margin: 0; }
.tt1-label { font: 700 .72rem/1.3 var(--ttf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ttf-soft); }
.tt1-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); }
.tt1-head .tt1-live { color: var(--ttf-ink); }
.tt1-live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; background: var(--ttf-c); vertical-align: .05rem; }
.tt1-view { display: block; width: 100%; height: 340px; }

.tt1-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.2rem;
  margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--ttf-rule); }
.tt1-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.tt1-plabel { float: left; margin-right: .4rem; padding: 0; font: 700 .66rem/1.3 var(--ttf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ttf-ink); }
.tt1-opt { position: relative; display: inline-flex; cursor: pointer; }
.tt1-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tt1-opt span { display: inline-block; border: 1px solid var(--ttf-ink); padding: .5rem .7rem; min-height: 36px; line-height: 1.2;
  font: 700 .64rem/1.2 var(--ttf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ttf-ink); background: transparent; }
.tt1-opt input:checked + span { background: var(--ttf-ink); color: var(--ttf-paper); }
.tt1-opt input:focus-visible + span { outline: 2px solid var(--ttf-ink); outline-offset: 2px; }
.tt1-opt:hover input:not(:checked) + span { background: color-mix(in srgb, var(--ttf-ink) 8%, transparent); }
.tt1-ctl { display: flex; gap: .5rem; }
.tt1-ctl button { appearance: none; border: 1px solid var(--ttf-hair); border-radius: 0; background: transparent; color: var(--ttf-ink);
  font: 700 .62rem/1.2 var(--ttf-mono); letter-spacing: .1em; text-transform: uppercase; padding: .5rem .7rem; min-height: 36px; cursor: pointer; }
.tt1-ctl button:hover { background: color-mix(in srgb, var(--ttf-ink) 8%, transparent); }
.tt1-ctl button:focus-visible { outline: 2px solid var(--ttf-ink); outline-offset: 2px; }

.tt1-words { margin-top: .8rem; font-size: 1rem; line-height: 1.38; color: var(--ttf-ink); font-variant-numeric: tabular-nums; min-height: 2.8em; max-width: 60rem; }
.tt1-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem clamp(.9rem, 2vw, 1.4rem); margin-top: .7rem; }
.tt1-how p { font-size: .86rem; line-height: 1.36; color: var(--ttf-body); }
.tt1-hk { font: 700 .64rem/1.3 var(--ttf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ttf-ink); margin-right: .3rem; }
.tt1-hm { color: var(--ttf-m-text); }

.tt1-meas { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--ttf-ink); }
.tt1-mhead { color: var(--ttf-ink); }
.tt1-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); margin-top: .5rem; }
.tt1-mitem { min-width: 0; }
.tt1-num { font-family: var(--ttf-display); font-weight: 860; letter-spacing: -.05em; line-height: .9; color: var(--ttf-ink);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tt1-unit { font-weight: 700; letter-spacing: -.02em; font-size: .55em; }
.tt1-src { font-size: .82rem; line-height: 1.32; color: var(--ttf-body); margin-top: .4rem; max-width: 34rem; }
.tt1-src cite { font-style: normal; color: var(--ttf-soft); display: block; margin-top: .1rem; }
.tt1-mnote2 { font-size: .82rem; line-height: 1.32; color: var(--ttf-ink); margin-top: .6rem; }
.tt1-note { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--ttf-rule); font-size: .76rem; line-height: 1.36; color: var(--ttf-soft); max-width: 60rem; }
.tt1-caption { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--ttf-rule); font-size: .92rem; color: var(--ttf-body); max-width: 52rem; }
.tt1-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: 719px) {
  .tt1-how, .tt1-mgrid { grid-template-columns: minmax(0, 1fr); }
  .tt1-view { height: 330px; }
  .tt1-words { font-size: .9rem; }
  .tt1-plabel { float: none; width: 100%; margin-bottom: .1rem; }
}
@media (pointer: coarse) { .tt1-ctl button, .tt1-opt span { min-height: 44px; } .tt1-opt span { padding-top: .8rem; } }
.tt1.tt1-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 {
  .tt1 { color: #2a2926; }
  .tt1-bar { display: none; }
  .tt1, .tt1 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tt1-view { break-inside: avoid; }
}
@media (forced-colors: active) {
  .tt1 { --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; }
  .tt1 canvas { forced-color-adjust: none; }
  .tt1-opt span { forced-color-adjust: none; border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .tt1-opt input:checked + span { background: Highlight; color: HighlightText; border-color: Highlight; }
  .tt1-live::before { forced-color-adjust: none; background: Highlight; }
}