.fn-note-interactive {
  --foreground: var(--ink);
  --background: var(--surface);
  --border: var(--line);
  --muted: #e5eaed;
  --viz-series-1: var(--steel);
  --viz-series-2: #c45b24;
  margin: 2.5rem 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--steel);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  min-width: 0;
  scroll-margin-top: 1.5rem;
}
.fn-note-interactive .interactive-kicker {
  display: block;
  margin-bottom: .55rem;
  color: var(--steel);
  font: 700 .8rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fn-note-interactive h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.2;
}
.article-body .fn-note-interactive .interactive-intro {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #465864;
}
.fn-note-interactive .form-label {
  display: block;
  margin: .9rem 0 .35rem;
  font-size: .9375rem;
  font-weight: 650;
}
.fn-note-interactive .form-label output { font-weight: 750; }
.fn-note-interactive .form-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: .6rem 2rem .6rem .7rem;
  border: 1px solid #7c929f;
  border-radius: 3px;
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.fn-note-interactive .form-range {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: .25rem 0 .6rem;
  accent-color: var(--steel);
  cursor: pointer;
}
.fn-note-interactive :is(button, select, input):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}
.fn-note-interactive .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--steel);
  border-radius: 3px;
  background: var(--steel-dark);
  color: white;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  font-family: inherit;
  cursor: pointer;
}
.fn-note-interactive .btn:hover { background: var(--steel); }
.fn-note-interactive .viz-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fn-note-interactive .viz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1.1rem; }
.fn-note-interactive .card { padding: .85rem; background: #edf2f5; min-width: 0; overflow-wrap: anywhere; }
.fn-note-interactive .viz-stat { display: flex; flex-direction: column; gap: .25rem; }
.fn-note-interactive .viz-stat > div:first-child { font-size: .875rem; }
.fn-note-interactive .viz-stat-value { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.fn-note-interactive .viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fn-note-interactive .text-small { font-size: .8125rem; line-height: 1.55; }
.fn-note-interactive .tabular-nums, .fn-note-interactive output, .fn-note-interactive strong { font-variant-numeric: tabular-nums; }
.fn-note-interactive svg { flex: 0 0 auto; }
.fn-note-interactive [hidden] { display: none !important; }
.fn-note-interactive noscript { display: block; margin-top: 1rem; }
@media (max-width: 620px) {
  .fn-note-interactive .viz-controls { grid-template-columns: 1fr; gap: 0; }
  .fn-note-interactive .viz-grid { grid-template-columns: 1fr; }
  .fn-note-interactive .card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
  .fn-note-interactive .viz-stat-value { font-size: 1.25rem; white-space: nowrap; }
  .fn-note-interactive .readout > strong { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-note-interactive *, .fn-note-interactive *::before, .fn-note-interactive *::after { transition: none !important; }
}


#fn-hike-inline{--trail-gutter:32px}
#fn-hike-inline[data-example="steel"]{--trail-gutter:48px}
#fn-hike-inline .example-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 24px}
#fn-hike-inline .example-switch button{min-width:0;min-height:76px;padding:12px 10px;border:2px solid var(--steel);border-radius:3px;background:var(--background);color:var(--steel-dark);cursor:pointer;text-align:center}
#fn-hike-inline .example-switch button{font-family:inherit;font-size:1.05rem;font-weight:750;line-height:1.3}
#fn-hike-inline .example-switch button[aria-pressed="true"]{background:var(--steel-dark);border-color:var(--steel-dark);color:white}
#fn-hike-inline .example-switch button span{display:block;margin-top:4px;font-size:.875rem;font-weight:400;line-height:1.35}
#fn-hike-inline .example-switch button:hover{box-shadow:inset 0 0 0 1px var(--steel)}
#fn-hike-inline .ends{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-inline:calc(var(--trail-gutter) - 12px);font-size:.875rem}#fn-hike-inline .ends span{display:flex;align-items:center;gap:6px}
#fn-hike-inline .trail-scene{position:relative;height:148px}#fn-hike-inline .trail-line{position:absolute;left:var(--trail-gutter);right:var(--trail-gutter);top:114px;height:4px;background:var(--border)}
#fn-hike-inline .trail-line::before,#fn-hike-inline .trail-line::after{content:"";position:absolute;top:-4px;height:12px;width:2px;background:var(--foreground)}#fn-hike-inline .trail-line::before{left:0}#fn-hike-inline .trail-line::after{right:0}
#fn-hike-inline .hiker{position:absolute;top:23px;width:44px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;color:var(--foreground)}#fn-hike-inline[data-example="hike"] .hiker[data-hiker="3"] .person{color:var(--viz-series-1)}#fn-hike-inline .hiker[data-bottleneck="true"]{color:var(--viz-series-2)}
#fn-hike-inline .hiker-positions{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#7c929f;stroke-width:1}
#fn-hike-inline .person{height:45px;display:flex;align-items:end}#fn-hike-inline .person svg{width:30px;height:38px}#fn-hike-inline .hiker-name{position:absolute;top:54px;white-space:nowrap;font-weight:600;background:var(--background);padding:0 2px}
#fn-hike-inline .person>span{display:flex;align-items:end}
#fn-hike-inline[data-example="steel"] .person svg{width:20px}
#fn-hike-inline[data-example="steel"] .ends{padding-inline:0;align-items:flex-start}
#fn-hike-inline[data-example="steel"] .ends>span{flex-direction:column;width:calc(var(--trail-gutter) * 2);gap:3px;text-align:center}
#fn-hike-inline[data-example="steel"] .ends>span:last-child{flex-direction:column-reverse}
#fn-hike-inline .hiker-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:0 0 16px;font-variant-numeric:tabular-nums}
#fn-hike-inline .distance-scale,#fn-hike-inline .time-scale{margin:0 var(--trail-gutter)}
#fn-hike-inline #hi-time{appearance:none;-webkit-appearance:none;display:block;width:calc(100% + 20px);height:44px;margin:0 0 0 -10px;padding:0;border:0;border-radius:0;background:linear-gradient(var(--border),var(--border)) no-repeat center / calc(100% - 20px) 4px}
#fn-hike-inline #hi-time::-webkit-slider-runnable-track{height:4px;background:transparent;border:0}
#fn-hike-inline #hi-time::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border:2px solid var(--background);border-radius:50%;background:var(--viz-series-1);box-shadow:0 0 0 1px var(--viz-series-1);box-sizing:border-box}
#fn-hike-inline #hi-time::-moz-range-track{height:4px;background:transparent;border:0}
#fn-hike-inline #hi-time::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--background);border-radius:50%;background:var(--viz-series-1);box-shadow:0 0 0 1px var(--viz-series-1);box-sizing:border-box}
#fn-hike-inline .time-ends{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
#fn-hike-inline .bracket{height:10px;border-bottom:1px solid var(--foreground);border-left:1px solid var(--foreground);border-right:1px solid var(--foreground);margin-top:4px}
#fn-hike-inline .readout{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 6px}#fn-hike-inline .distance{height:24px;display:flex;background:var(--muted);margin:8px 0}#fn-hike-inline .completed{background:var(--viz-series-1)}#fn-hike-inline .inventory{background:repeating-linear-gradient(135deg,var(--viz-series-2) 0 5px,transparent 5px 9px)}
#fn-hike-inline .measure{height:10px;background:var(--muted);margin:6px 0 14px}#fn-hike-inline .measure>span{display:block;height:100%;background:var(--viz-series-1);transition:width .18s linear}#fn-hike-inline .detail{margin:8px 0 16px}
#fn-hike-inline .goal-triangle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;max-width:580px;margin:24px auto;padding:20px 0;border-block:1px solid var(--border);text-align:center;font-size:.875rem;line-height:1.4}
#fn-hike-inline .goal-throughput{grid-column:1/-1;color:var(--viz-series-1)}
#fn-hike-inline .goal-inventory{color:var(--viz-series-2)}
#fn-hike-inline .goal-triangle :is(.goal-throughput,.goal-inventory,.goal-expense)>span{display:block;color:var(--foreground);margin-top:4px}
#fn-hike-inline .goal-triangle strong{font-size:1rem}
#fn-hike-inline .goal-diagram{position:relative;grid-column:1/-1;aspect-ratio:2/1;height:auto;margin:8px 0}
#fn-hike-inline .goal-diagram svg{display:block;width:100%;height:100%;fill:#edf2f5;stroke:#7c929f;stroke-width:1}
#fn-hike-inline .goal-diagram path{vector-effect:non-scaling-stroke}
#fn-hike-inline .goal-diagram>strong{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);white-space:nowrap}
#fn-hike-inline .goal-dot{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:var(--foreground)}
#fn-hike-inline .goal-dot-top{left:50%;top:6%;background:var(--viz-series-1)}#fn-hike-inline .goal-dot-left{left:25%;top:92.60254037845%;background:var(--viz-series-2)}#fn-hike-inline .goal-dot-right{left:75%;top:92.60254037845%}
#fn-hike-inline .goal-triangle figcaption{grid-column:1/-1;margin:16px auto 0;max-width:44ch;color:var(--foreground);font-size:.875rem}
@media(prefers-reduced-motion:reduce){#fn-hike-inline .hiker,#fn-hike-inline .distance>span,#fn-hike-inline .measure>span{transition:none}}


#fn-hike-inline .hike-lesson{margin:0 0 16px;font-size:.9375rem;line-height:1.5}

#fn-mix-refined .marks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin:12px 0 18px}#fn-mix-refined .mark{height:24px;background:var(--muted);position:relative}#fn-mix-refined .mark.active{background:var(--viz-series-1)}
#fn-mix-refined .row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0 6px}#fn-mix-refined .bar{height:22px;background:var(--muted);margin:6px 0 12px}#fn-mix-refined .fill{height:100%;background:var(--viz-series-1);transition:width .2s}#fn-mix-refined .reference{background:var(--viz-series-2)}#fn-mix-refined .detail{margin:14px 0}
@media(prefers-reduced-motion:reduce){#fn-mix-refined .fill{transition:none}}