/* Widget rules are scoped; the .ms-preview class opts the demo into page styles. */
.ms-preview { margin:0; background:#edf3f4; color:#153a43; font-family:"Space Grotesk",system-ui,sans-serif; line-height:1.55; }
.ms-preview *, .ms-lab * { box-sizing:border-box; }
.ms-preview a, .ms-lab a { color:#075e65; text-underline-offset:.2em; }
.ms-header, .ms-footer, .ms-preview main { max-width:1240px; margin:auto; padding:28px 36px; }
.ms-header { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid #c5d5d8; }
.ms-header a { font-weight:750; font-size:24px; text-decoration:none; }
.ms-header a span { color:#08747b; }
.ms-header>span { font-size:11px; letter-spacing:.12em; }
.ms-intro { padding:36px 0 50px; max-width:860px; }
.ms-eyebrow, .ms-plot-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.13em; font-weight:650; }
.ms-intro h1 { font-size:clamp(36px,5.4vw,65px); line-height:1.08; font-weight:550; letter-spacing:-.045em; margin:20px 0; }
.ms-intro>p:not(.ms-eyebrow) { font:20px/1.65 "IBM Plex Serif",Georgia,serif; max-width:680px; }
.ms-intro nav { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:26px; font-size:14px; }
.ms-lab { color:#153a43; font:16px/1.55 "Space Grotesk",system-ui,sans-serif; background:#fff; border:1px solid #c4d5d8; border-radius:18px; margin:0 0 36px; padding:32px; scroll-margin-top:20px; }
.ms-lab-heading { display:flex; gap:18px; align-items:flex-start; }
.ms-number { background:#e0efec; padding:8px 12px; color:#07656b; font-size:14px; font-weight:700; border-radius:8px; }
.ms-lab h2 { font-size:clamp(25px,3vw,34px); font-weight:600; letter-spacing:-.035em; line-height:1.2; margin:0 0 10px; }
.ms-lab h3 { font-size:16px; margin:0 0 12px; }
.ms-lab-heading p { margin:0; color:#48636b; }
.ms-predict { margin:26px 0; padding:18px 22px; border-left:3px solid #18858a; background:#f0f7f7; }
.ms-predict strong { font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.ms-predict p { font:18px/1.6 "IBM Plex Serif",Georgia,serif; margin:5px 0 0; }
.ms-layout { display:grid; grid-template-columns:minmax(215px, .8fr) minmax(0,2fr); gap:30px; }
.ms-controls { padding:22px; background:#f4f7f7; border-radius:12px; align-self:start; }
.ms-field { min-width:0; margin:0 0 16px; }
.ms-field label { display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.ms-field input, .ms-field select { width:100%; min-width:0; max-width:100%; min-height:44px; padding:9px 10px; background:white; border:1px solid #8ca7af; border-radius:6px; color:#153a43; font:16px "Space Grotesk",system-ui,sans-serif; }
.ms-field small { display:block; margin-top:5px; font-size:12px; color:#46626a; }
.ms-lab button { min-height:44px; padding:10px 14px; background:white; border:1px solid #8ca7af; border-radius:6px; color:#12434c; font:600 13px/1.35 "Space Grotesk",system-ui,sans-serif; cursor:pointer; }
.ms-lab button:hover { background:#e6f2f0; }
.ms-lab button[aria-pressed="true"] { background:#d8efeb; border-color:#06737a; }
.ms-lab .ms-reset { width:100%; background:#086b70; border-color:#086b70; color:white; margin-top:5px; }
.ms-lab .ms-reset:hover { background:#074c51; }
.ms-lab :focus-visible, .ms-preview a:focus-visible { outline:3px solid #b05a19; outline-offset:3px; }
.ms-lab [aria-invalid="true"] { border:2px solid #a33232; }
.ms-lab [hidden] { display:none !important; }
.ms-error:empty { display:none; }
.ms-error { color:#8c2424; background:#fff1ef; padding:15px; border:1px solid #dc9e97; border-radius:6px; }
.ms-display { min-width:0; }
.ms-plot-kicker { color:#49666e; margin:0 0 8px; }
.ms-plot { overflow-x:auto; }
.ms-plot svg { display:block; width:100%; min-width:640px; height:auto; }
.ms-scroll-hint { display:block; font-size:12px; color:#45616b; margin:2px 0 12px; }
.ms-plot text { font:12px system-ui,sans-serif; fill:#45616b; }
.ms-gridline { stroke:#e0e8eb; stroke-width:1; }
.ms-axis { stroke:#92a9b1; stroke-width:1; }
.ms-stick { stroke:#087780; stroke-width:3; }
.ms-reference { stroke:#829da5; stroke-width:1; stroke-dasharray:3 4; }
.ms-component { fill:none; stroke-width:2; }
.ms-first { stroke:#507baf; stroke-dasharray:8 4; }
.ms-second-line { stroke:#a26123; stroke-dasharray:2 3; }
.ms-sum { fill:none; stroke:#05747b; stroke-width:2.5; }
.ms-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:#3c5b65; margin:0 0 18px; }
.ms-metrics { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:18px 0; }
.ms-metrics>div { border-top:1px solid #c9dadd; padding-top:12px; min-width:0; }
.ms-metrics dt { font-size:12px; color:#49666e; }
.ms-metrics dd { font-size:clamp(17px,2vw,22px); letter-spacing:-.025em; font-variant-numeric:tabular-nums; margin:4px 0 0; overflow-wrap:anywhere; }
.ms-readout { font-size:14px; margin:20px 0 12px; }
.ms-retention, .ms-second { color:#45616b; font-size:13px; }
.ms-assumptions { border-radius:8px; background:#edf5f4; padding:18px 20px; margin-top:22px; font-size:13px; }
.ms-assumptions p:last-child { margin-bottom:0; }
.ms-lab details { font-size:14px; margin-top:18px; }
.ms-lab summary { cursor:pointer; color:#095f68; padding:10px 0; font-weight:600; min-height:44px; }
.ms-equations { border-top:1px solid #cedee1; padding-top:6px; }
.ms-equations p { max-width:85ch; }
.ms-table-wrap { overflow:auto; }
.ms-lab table { border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums; }
.ms-lab caption { text-align:left; color:#4a666e; margin:10px 0; }
.ms-lab th, .ms-lab td { text-align:right; padding:9px 8px; border-bottom:1px solid #d7e2e4; white-space:nowrap; }
.ms-lab th:first-child { text-align:left; }
.ms-check { margin-top:25px; padding-top:25px; border-top:1px solid #cedee1; }
.ms-choices, .ms-presets { display:flex; gap:8px; flex-wrap:wrap; }
.ms-check-feedback { min-height:1.55em; font-size:14px; color:#215b5a; }
.ms-footer { font-size:13px; color:#46626a; padding-top:0; padding-bottom:40px; }
.ms-skip { position:absolute; top:-100px; left:20px; padding:12px; background:white; z-index:10; }
.ms-skip:focus { top:10px; }
@media (max-width:760px) {
  .ms-header, .ms-footer, .ms-preview main { padding:20px 16px; }
  .ms-header { align-items:flex-start; flex-direction:column; gap:5px; }
  .ms-intro { padding:22px 0 32px; }
  .ms-lab { padding:20px 16px; border-radius:12px; }
  .ms-layout { grid-template-columns:1fr; gap:24px; }
  .ms-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 14px; padding:16px; min-width:0; }
  .ms-controls>h3, .ms-controls>.ms-reset { grid-column:1/-1; }
  .ms-lab-heading { gap:12px; }
  .ms-number { padding:5px 8px; }
}
@media (max-width:420px) {
  .ms-controls { display:block; }
  .ms-metrics { gap:14px 10px; }
  .ms-metrics dd { font-size:17px; }
  .ms-choices { flex-direction:column; }
  .ms-plot { margin-left:-8px; margin-right:-8px; }
}
@media (prefers-reduced-motion:reduce) { .ms-lab *, .ms-preview * { scroll-behavior:auto !important; } }

/* Ideal drift-time comparison: distinguish traces by shape as well as position. */
.ms-flight-plot { color:#0b566d; max-width:100%; overflow-x:auto; }
.ms-flight-plot svg { display:block; width:100%; min-width:560px; height:auto; }
.ms-flight-plot text { font:12px system-ui,sans-serif; fill:#445463; }
.ms-table-wrap:focus-visible { outline:3px solid #0f6e8a; outline-offset:3px; }