[data-interactive="fiber-orientation"] { min-width: 0; margin-block: 1rem; }
[data-interactive="fiber-orientation"] * { box-sizing: border-box; }
.fo-lab { font: .96rem/1.5 var(--f-display); }
.fo-predict { border: 1px solid var(--rule); border-left: 4px solid var(--flag); padding: .75rem; min-width: 0; }
.fo-predict legend { font-weight: 750; }
.fo-predict label { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-right: .9rem; }
.fo-predict input { accent-color: var(--accent); }
.fo-lab button { min-height: 44px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: .45rem .7rem; font: inherit; cursor: pointer; }
.fo-predict button { display: block; margin-top: .55rem; }
.fo-lab button:disabled { opacity: .55; cursor: default; }
.fo-lab :is(input,button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fo-feedback { min-height: 1.6em; font-weight: 700; }
.fo-controls { display: grid; grid-template-columns: minmax(15rem, 1fr) auto; gap: .8rem; align-items: end; margin-block: .8rem; }
.fo-controls label { display: grid; gap: .35rem; font-weight: 650; }
.fo-controls input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.fo-controls output { font-weight: 800; color: var(--ink); }
.fo-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.fo-visual { border: 1px solid var(--rule); background: var(--paper); }
.fo-visual svg { display: block; width: 100%; height: auto; min-height: 17rem; }
.fo-visual > p { margin: 0; padding: .55rem .7rem .7rem; font-size: .9rem; }
.fo-baseline { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 7 6; }
.fo-patch { fill: var(--accent); fill-opacity: .13; stroke: var(--accent); stroke-width: 4; }
.fo-fibers line { stroke: var(--ink); stroke-width: 3; opacity: .74; }
.fo-load line { stroke: var(--mark-stop, #c43d10); stroke-width: 4; }
.fo-visual marker path { fill: var(--mark-stop, #c43d10); }
.fo-load-label, .fo-free-label { fill: var(--ink); font: 700 32px var(--f-display); }
.fo-readings, .fo-compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-block: .75rem; }
.fo-readings > div, .fo-compare article { min-width: 0; border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: var(--radius-xs); padding: .6rem; background: var(--surface); }
.fo-readings :is(strong,span), .fo-compare :is(strong,span) { display: block; overflow-wrap: anywhere; }
.fo-readings span, .fo-compare span { color: var(--ink-soft); }
.fo-compare article { border-top-color: var(--rule); }
.fo-compare article[data-current="true"] { border-top-color: var(--flag); box-shadow: inset 0 0 0 1px var(--flag); }
.fo-compare h3 { margin: 0 0 .35rem; font-size: 1rem; }
.fo-coupling { border-left: 4px solid var(--accent); padding-left: .75rem; }
@media (max-width: 48rem) { .fo-readings, .fo-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) {
  .fo-controls, .fo-readings, .fo-compare { grid-template-columns: minmax(0, 1fr); }
  .fo-presets button { flex: 1 1 44%; }
  .fo-predict label { display: flex; margin-right: 0; }
  .fo-predict button { width: 100%; }
  .fo-visual svg { min-height: 13rem; }
  .xcard:has([data-interactive="fiber-orientation"]) .body { padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) { [data-interactive="fiber-orientation"] * { transition: none !important; } }
@media screen { [data-interactive="fiber-orientation"][data-fo-ready] > .fo-static { display: none; } }
@media print {
  [data-interactive="fiber-orientation"] .fo-lab { display: none !important; }
  [data-interactive="fiber-orientation"] > .fo-static { display: block !important; }
}