/* Figure 1. Four ticks: the visitor's register on the clock, and the exchange the paper owes.
   Every class is prefixed ss1- and every token is scoped to the figure. */
.ss1 {
  --ss-paper: #faf8f3; --ss-ink: #1d1d1b; --ss-body: #2a2926; --ss-soft: #3c3a36; --ss-hair: #8a8a8a;
  --ss-rule: color-mix(in srgb, var(--ss-ink) 16%, var(--ss-paper));
  --ss-faint: color-mix(in srgb, var(--ss-ink) 40%, var(--ss-paper));
  --ss-m: #e6007e; --ss-m-text: #c4006b; --ss-c: #009fe3; --ss-c-text: #0072b5;
  --ss-proved: #0b7a3e; --ss-open: #c8401f;
  --ss-text: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ss-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); background: var(--ss-paper); color: var(--ss-body);
  border: 1px solid var(--ss-ink); font-family: var(--ss-text); font-weight: 420; line-height: 1.42;
  font-optical-sizing: auto; box-sizing: border-box; position: relative;
}
@media (prefers-color-scheme: dark) {
  .ss1 { --ss-paper: #141413; --ss-ink: #faf8f3; --ss-body: #e9e6df; --ss-soft: #c9c5bc; --ss-hair: #8a8a8a;
    --ss-m: #ff3d9e; --ss-m-text: #ff6fb6; --ss-c: #2bb3f0; --ss-c-text: #2bb3f0; --ss-proved: #3ccf7f; --ss-open: #ff6a3d; }
}
.ss1[data-frame="none"] { border: 0; padding: 0; background: transparent; }
.ss1 *, .ss1 *::before, .ss1 *::after { box-sizing: border-box; }
.ss1-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ss1-label { margin: 0; font: 700 .7rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss1-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ss-rule); }
.ss1-head .ss1-title { margin: 0; font: 780 1.15rem/1.15 var(--ss-display); letter-spacing: -.02em; color: var(--ss-ink); }
.ss1[data-header="none"] .ss1-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; border: 0; }

.ss1-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) minmax(0, .9fr); gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
.ss1-panel { min-width: 0; }
.ss1-panel > .ss1-label { margin-bottom: .45rem; }

/* the ring */
.ss1-ring { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.ss1-ring text { font-family: var(--ss-mono); }
.ss1-base { fill: none; stroke: var(--ss-rule); stroke-width: 1; }
.ss1-pair { stroke: var(--ss-faint); stroke-width: .8; stroke-dasharray: 2 3; }
.ss1-poslab { fill: var(--ss-soft); font-size: 11px; }
.ss1-ghost { fill: none; stroke: var(--ss-hair); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ss1-bar-pos { stroke: var(--ss-ink); stroke-width: 7; stroke-linecap: butt; }
.ss1-bar-neg { stroke: var(--ss-m); stroke-width: 7; stroke-linecap: butt; }
.ss1-node { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 1.2; }
.ss1-val { fill: var(--ss-ink); font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ss1-val.ss1-neg { fill: var(--ss-m-text); }
.ss1-handle { fill: transparent; stroke: none; cursor: ns-resize; }
.ss1-handle:focus { outline: none; }
.ss1-handle:focus-visible + .ss1-focusring, .ss1-focusring.ss1-on { stroke: var(--ss-c-text); stroke-width: 2; fill: none; }
.ss1-focusring { fill: none; stroke: none; }
.ss1-mark { fill: var(--ss-m-text); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ss1-cnt { fill: var(--ss-ink); font-family: var(--ss-display) !important; font-weight: 860; font-size: 46px; letter-spacing: -.04em; text-anchor: middle; dominant-baseline: central; }
.ss1-cntlab { fill: var(--ss-soft); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-anchor: middle; }
.ss1-noex .ss1-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.ss1-cntlab.ss1-cntrel { font-family: var(--ss-display); font-weight: 760; letter-spacing: 0; }
.ss1-cntlab.ss1-cntmin { fill: var(--ss-m-text); }
.ss1-small .ss1-val { display: none; }
.ss1-v-hero .ss1-grid, .ss1-v-exchange .ss1-grid { grid-template-columns: minmax(0, 1fr); }
.ss1-v-hero .ss1-ring { max-width: min(100%, 21rem); }
.ss1-v-hero .ss1-ctl { justify-content: center; margin-top: .6rem; }
.ss1-v-hero .ss1-ringpanel > .ss1-label { text-align: center; }
.ss1-v-exchange .ss1-xpanel { border-left: 0; padding-left: 0; border-top: 0; padding-top: 0; display: block; }
.ss1-v-exchange .ss1-xch { max-width: 15rem; }
.ss1-arc-bg { fill: none; stroke: var(--ss-rule); stroke-width: 4; }
.ss1-arc { fill: none; stroke: var(--ss-ink); stroke-width: 4; stroke-linecap: butt; }
.ss1-arc.ss1-half { stroke: var(--ss-m); }
.ss1-key { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; font: 400 .72rem/1.35 var(--ss-mono); color: var(--ss-soft); }
.ss1-key li { display: inline-flex; align-items: center; gap: .4rem; }
.ss1-sw { display: inline-block; width: .9rem; height: .32rem; background: var(--ss-ink); }
.ss1-sw.ss1-sw-neg { background: var(--ss-m); }
.ss1-sw.ss1-sw-ghost { background: transparent; border: 1px dashed var(--ss-hair); height: .5rem; }

/* the number */
.ss1-num { margin: .2rem 0 0; font-family: var(--ss-display); font-weight: 860; letter-spacing: -.05em; line-height: .86;
  font-size: clamp(3.4rem, 6.6vw, 6rem); color: var(--ss-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ss1-num sup { font-size: .5em; vertical-align: .9em; letter-spacing: 0; }
.ss1-num .ss1-minus { color: var(--ss-ink); }
.ss1-numcap { margin: .55rem 0 0; font: 700 .72rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss1-status { display: flex; align-items: baseline; gap: .45rem; margin: .7rem 0 0; font-size: .86rem; line-height: 1.35; color: var(--ss-body); }
.ss1-dot { flex: none; display: inline-block; width: .6rem; height: .6rem; background: var(--ss-proved); transform: translateY(.05rem); }
.ss1-dot.ss1-dot-open { background: transparent; border: 2px solid var(--ss-open); }
.ss1-dot.ss1-dot-def { background: var(--ss-ink); }
.ss1-tag-def { color: var(--ss-ink); }
.ss1-read { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ss-rule); min-height: 4.2em; }
.ss1-read .ss1-ticks { font: 700 .72rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-ink); margin: 0 0 .25rem; }
.ss1-read p { margin: 0; font-size: .95rem; line-height: 1.38; color: var(--ss-ink); }
.ss1-read .ss1-rmin { color: var(--ss-m-text); font-weight: 650; }
.ss1-ctl { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ss1-ctl button { appearance: none; border: 1px solid var(--ss-ink); border-radius: 0; background: transparent; color: var(--ss-ink);
  font: 700 .7rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; padding: .78rem .95rem; min-height: 44px; cursor: pointer; }
.ss1-ctl button.ss1-primary { background: var(--ss-ink); color: var(--ss-paper); min-width: 7.5rem; }
.ss1-ctl button:hover { background: color-mix(in srgb, var(--ss-ink) 8%, transparent); }
.ss1-ctl button.ss1-primary:hover { background: color-mix(in srgb, var(--ss-ink) 86%, var(--ss-paper)); }
.ss1-ctl button:focus-visible, .ss1-xch:focus-visible { outline: 2px solid var(--ss-c-text); outline-offset: 2px; }
.ss1-hint { margin: .7rem 0 0; font: 400 .72rem/1.4 var(--ss-mono); color: var(--ss-soft); }

/* the exchange */
.ss1-xpanel { border-left: 1px solid var(--ss-rule); padding-left: clamp(1rem, 2vw, 1.6rem); }
.ss1-xch { display: block; width: 100%; height: auto; max-width: 330px; margin: .2rem auto 0; overflow: visible; }
.ss1-xch text { font-family: var(--ss-mono); }
.ss1-xpath { fill: none; stroke: var(--ss-hair); stroke-width: 1; stroke-dasharray: 4 3; }
.ss1-xarrow { fill: none; stroke: var(--ss-ink); stroke-width: 1.4; }
.ss1-xhead { fill: var(--ss-ink); }
.ss1-xq { fill: var(--ss-open); font-family: var(--ss-display) !important; font-weight: 860; font-size: 44px; text-anchor: middle; dominant-baseline: central; }
.ss1-xqbg { fill: var(--ss-paper); stroke: var(--ss-open); stroke-width: 1.6; }
.ss1-xqlab { fill: var(--ss-open); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-anchor: middle; }
.ss1-mini-base { fill: none; stroke: var(--ss-hair); stroke-width: 1; }
.ss1-mark-ring { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 1.6; }
.ss1-mark-pos { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 1.2; }
.ss1-mark-core { fill: var(--ss-ink); }
.ss1-mini-pos { stroke: var(--ss-ink); stroke-width: 5; }
.ss1-mini-neg { stroke: var(--ss-m); stroke-width: 5; }
.ss1-xq-line { margin: .5rem 0 0; font-size: 1rem; font-weight: 560; line-height: 1.3; color: var(--ss-ink); }
.ss1-xnote { margin: .55rem 0 0; font-size: .86rem; line-height: 1.38; color: var(--ss-body); }
.ss1-tag { font: 700 .66rem/1 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; }
.ss1-tag-open { color: var(--ss-open); }
.ss1-tag-proved { color: var(--ss-proved); }

.ss1-cap { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ss-rule); font-size: .9rem; line-height: 1.42; color: var(--ss-body); max-width: 62rem; }
.ss1[data-caption="none"] .ss1-cap { display: none; }

/* phones: the number first, then the ring, then the exchange */
@media (max-width: 900px) {
  .ss1-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ss1-xpanel { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--ss-rule); padding-top: 1rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 1rem; align-items: center; }
  .ss1-xpanel > .ss1-label { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ss1-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .ss1-numpanel { order: -1; }
  .ss1-num { font-size: clamp(3rem, 17vw, 4.4rem); }
  .ss1-read { min-height: 0; }
  .ss1-xpanel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ss1-ring { max-width: 360px; }
}
@media (max-width: 380px) {
  .ss1-xpanel { grid-template-columns: minmax(0, 1fr); }
  .ss1-xch { max-width: 240px; }
}
@media (forced-colors: active) {
  .ss1 { border-color: CanvasText; }
  .ss1-bar-pos, .ss1-mini-pos, .ss1-arc { stroke: CanvasText; }
  .ss1-bar-neg, .ss1-mini-neg, .ss1-arc.ss1-half { stroke: Highlight; }
  .ss1-val, .ss1-cnt, .ss1-xq, .ss1-mark, .ss1-xqlab { fill: CanvasText; }
  .ss1-val.ss1-neg { fill: Highlight; }
  .ss1-node, .ss1-mini-base, .ss1-xqbg, .ss1-mark-ring, .ss1-mark-pos { fill: Canvas; stroke: CanvasText; }
  .ss1-mark-core { fill: CanvasText; }
  .ss1-ghost, .ss1-xpath, .ss1-pair { stroke: GrayText; }
  .ss1-sw, .ss1-dot { background: CanvasText; forced-color-adjust: none; }
  .ss1-sw.ss1-sw-neg { background: Highlight; }
  .ss1-ctl button { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .ss1-ctl button.ss1-primary { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
}
@media print {
  .ss1 { border-color: #000; background: #fff; color: #000; --ss-paper: #fff; --ss-ink: #000; --ss-body: #000; --ss-soft: #333; }
  .ss1-ctl, .ss1-hint { display: none; }
  .ss1-panel { break-inside: avoid; }   /* a panel's label row stays with its drawing */
}
@media (max-width: 600px) {
  .ss1-val { font-size: 16px; }
  .ss1-poslab { font-size: 15px; }
}