/* Figure 3. Two turns to come back: the textbook's pattern for a turned neutron, with the measured period.
   Every class is prefixed ss3- and every token is scoped to the figure. */
.ss3 {
  --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-m: #e6007e; --ss-m-text: #c4006b; --ss-c: #009fe3; --ss-c-text: #0072b5;
  --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) {
  .ss3 { --ss-paper: #141413; --ss-ink: #faf8f3; --ss-body: #e9e6df; --ss-soft: #c9c5bc;
    --ss-m: #ff3d9e; --ss-m-text: #ff6fb6; --ss-c: #2bb3f0; --ss-c-text: #2bb3f0; }
}
.ss3[data-frame="none"] { border: 0; padding: 0; background: transparent; }
.ss3 *, .ss3 *::before, .ss3 *::after { box-sizing: border-box; }
.ss3-label { margin: 0 0 .45rem; font: 700 .7rem/1.3 var(--ss-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ss-soft); }
.ss3-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); }
.ss3-head .ss3-label { margin: 0; }
.ss3-title { margin: 0; font: 780 1.15rem/1.15 var(--ss-display); letter-spacing: -.02em; color: var(--ss-ink); }
.ss3[data-header="none"] .ss3-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; border: 0; }
.ss3-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 2.6vw, 2.4rem); align-items: start; }
.ss3-panel { min-width: 0; }
.ss3-plot { display: block; width: 100%; height: auto; overflow: visible; }
.ss3-plot text { font-family: var(--ss-mono); }
.ss3-axis { stroke: var(--ss-ink); stroke-width: 1; }
.ss3-grid1 { stroke: var(--ss-rule); stroke-width: 1; }
.ss3-grid2 { stroke: var(--ss-hair); stroke-width: 1; stroke-dasharray: 3 3; }
.ss3-tick { fill: var(--ss-soft); font-size: 11px; }
.ss3-axl { fill: var(--ss-soft); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
.ss3-curve { fill: none; stroke: var(--ss-ink); stroke-width: 2; }
.ss3-band { fill: var(--ss-c); fill-opacity: .28; }
.ss3-meas { stroke: var(--ss-c-text); stroke-width: 1.4; }
.ss3-dotmin { fill: var(--ss-m); }
.ss3-dotback { fill: var(--ss-paper); stroke: var(--ss-ink); stroke-width: 2; }
.ss3-note { fill: var(--ss-ink); font-size: 11px; }
.ss3-notem { fill: var(--ss-m-text); font-weight: 700; }
.ss3-notec { fill: var(--ss-c-text); }
.ss3-lead { stroke: var(--ss-hair); stroke-width: 1; }
.ss3-inset { display: block; width: 100%; max-width: 340px; height: auto; margin: .8rem 0 0; overflow: visible; }
.ss3-inset text { font-family: var(--ss-mono); }
.ss3-tb { stroke: var(--ss-ink); stroke-width: 1.4; stroke-dasharray: 3 2; }
.ss3-err { stroke: var(--ss-c-text); stroke-width: 2; }
.ss3-mdot { fill: var(--ss-c-text); }
.ss3-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); }
.ss3-key li { display: inline-flex; align-items: center; gap: .4rem; }
.ss3-sw { display: inline-block; width: .9rem; height: .2rem; background: var(--ss-ink); }
.ss3-sw.ss3-sw-m { width: .5rem; height: .9rem; background: color-mix(in srgb, var(--ss-c) 45%, var(--ss-paper)); border-left: 1px solid var(--ss-c-text); }
.ss3-num { margin: .2rem 0 0; font-family: var(--ss-display); font-weight: 860; letter-spacing: -.05em; line-height: .86;
  font-size: clamp(2.8rem, 5.2vw, 4.6rem); color: var(--ss-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ss3-pm { font-size: .45em; letter-spacing: -.02em; font-weight: 780; }
.ss3-unit { font-size: .6em; vertical-align: .45em; }
.ss3-numcap { margin: .6rem 0 0; font-size: .95rem; line-height: 1.38; color: var(--ss-ink); }
.ss3-src { margin: .6rem 0 0; font: 400 .74rem/1.45 var(--ss-mono); color: var(--ss-soft); }
.ss3-note2 { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--ss-rule); font-size: .86rem; line-height: 1.4; color: var(--ss-body); }
.ss3-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; }
.ss3[data-caption="none"] .ss3-cap { display: none; }
@media (max-width: 760px) {
  .ss3-grid { grid-template-columns: minmax(0, 1fr); }
}
.ss3-compact .ss3-tick, .ss3-compact .ss3-note { font-size: 14px; }
.ss3-compact .ss3-axl { font-size: 11.5px; }
@media (forced-colors: active) {
  .ss3 { border-color: CanvasText; }
  .ss3-curve, .ss3-axis { stroke: CanvasText; }
  .ss3-meas { stroke: Highlight; }
  .ss3-band { fill: Highlight; }
  .ss3-dotmin { fill: Highlight; }
  .ss3-dotback { fill: Canvas; stroke: CanvasText; }
  .ss3-note, .ss3-tick, .ss3-axl { fill: CanvasText; }
  .ss3-sw { background: CanvasText; forced-color-adjust: none; }
}
@media print {
  .ss3 { border-color: #000; background: #fff; color: #000; --ss-paper: #fff; --ss-ink: #000; --ss-body: #000; --ss-soft: #333; }
  .ss3-panel { break-inside: avoid; }   /* a panel's label row stays with its drawing */
}