/* Scoped to the interactive guide. Dimensions are reserved before data loads. */
[data-frb-demo] {
    --frb-oil: #946b13;
    --frb-cool: #1b7183;
    --frb-hot: #b84b35;
    color: var(--lt-ink, #102133);
    font-family: inherit;
    color-scheme: light;
}
[data-frb-demo] [hidden] { display: none !important; }
[data-frb-demo] .frb-subtitle { font-size: .85rem; color: var(--lt-ink-muted); }
[data-frb-demo] .frb-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 5.5rem;
    padding: .65rem 1rem;
    font-size: .85rem;
    background: var(--lt-surface-subtle, #eff3f6);
}
[data-frb-demo] .frb-status span { flex: 1; }
[data-frb-demo] .frb-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
[data-frb-demo] h3 { margin: 0 0 .6rem; font-size: 1rem; }
[data-frb-demo] .frb-bearing h3 span { color: var(--lt-ink-muted); font-size: .85rem; font-weight: 400; }
[data-frb-demo] .frb-canvas-wrap { position: relative; aspect-ratio: 1; }
[data-frb-demo] .frb-canvas-wrap img,
[data-frb-demo] canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
[data-frb-demo] .frb-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin: .6rem 0 0; text-align: center; }
[data-frb-demo] .frb-readings dt { font-size: .72rem; font-weight: 400; color: var(--lt-ink-muted); }
[data-frb-demo] .frb-readings dd { margin: 0; font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 600; }
[data-frb-demo] .frb-film-key { display: flex; align-items: center; gap: .6rem; padding: .4rem 1rem 1rem; font-size: .8rem; line-height: 1.5; }
[data-frb-demo] .frb-film-swatch { flex: 0 0 3.8rem; height: .65rem; border-radius: .2rem; background: linear-gradient(90deg, var(--frb-hot), #d7aa4f, var(--frb-cool)); }
[data-frb-demo] .frb-controls { margin: 0; padding: 1rem; border: 0; border-block: 1px solid #d5e0e8; min-width: 0; background: #fbfbf8; }
[data-frb-demo] .frb-speed-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; min-height: 3rem; margin-bottom: .6rem; }
[data-frb-demo] output { font-size: 1.9rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; min-width: 8ch; }
[data-frb-demo] output small { font-size: .85rem; font-weight: 400; color: var(--lt-ink-muted); }
[data-frb-demo] [data-frb-state] { font-size: .8rem; font-weight: 600; color: var(--lt-brand-800); }
[data-frb-demo] [data-frb-state][data-orbit="large"] { color: #914025; }
[data-frb-demo] .frb-button-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
[data-frb-demo] button { min-height: 44px; padding: .4rem .7rem; border: 1px solid #99aebe; border-radius: .3rem; font: inherit; font-size: .8rem; color: var(--lt-brand-800); background: white; cursor: pointer; }
[data-frb-demo] button:hover:not(:disabled) { border-color: var(--lt-brand-800); background: #edf3f6; }
[data-frb-demo] button[aria-pressed="true"] { background: var(--lt-brand-800, #143a5c); color: white; }
[data-frb-demo] button[aria-pressed="true"]:hover:not(:disabled) { background: var(--lt-brand-900, #0d2740); }
[data-frb-demo] button:disabled { cursor: default; opacity: .55; }
[data-frb-demo] .frb-play { min-width: 5.5rem; }
[data-frb-demo] .frb-rates { display: flex; flex-wrap: wrap; gap: .2rem; }
[data-frb-demo] .frb-sweep { display: flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .85rem; }
[data-frb-demo] .frb-sweep input { width: 1.1rem; height: 1.1rem; accent-color: var(--lt-brand-800); }
[data-frb-demo] .frb-window-label { display: flex; justify-content: space-between; gap: .5rem; margin: .8rem 0 .2rem; font-size: .85rem; }
[data-frb-demo] .frb-window-label span { font-variant-numeric: tabular-nums; }
[data-frb-demo] .frb-slider-row { display: flex; gap: .6rem; align-items: center; }
[data-frb-demo] .frb-slider-row button { min-width: 44px; font-size: 1.15rem; }
[data-frb-demo] input[type="range"] { flex: 1; min-width: 0; width: 100%; min-height: 44px; accent-color: var(--lt-brand-800); }
[data-frb-demo] :is(button, input, [tabindex]):focus-visible { outline: 3px solid var(--lt-brand-700, #2a577d); outline-offset: 3px; }
[data-frb-demo] .frb-timing { min-height: 2.5rem; margin: .35rem 0 0; font-size: .8rem; }
[data-frb-demo] .frb-chart-section { padding: 0 1rem 1rem; }
[data-frb-demo] .frb-chart-section p { margin: .4rem 0 .8rem; font-size: .8rem; }
[data-frb-demo] .frb-chart-scroll { overflow-x: auto; border: 1px solid #d5e0e8; border-radius: .3rem; }
[data-frb-demo] .frb-chart { position: relative; min-width: 520px; }
[data-frb-demo] .frb-chart img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 480; object-fit: fill; }
[data-frb-demo] .frb-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-frb-demo] .frb-chart svg path { stroke: var(--frb-hot); stroke-width: 2; fill: none; }
[data-frb-demo][data-frb-ready="true"] .frb-chart { cursor: crosshair; }
@media (max-width: 575.98px) {
    [data-frb-demo] .frb-stage { grid-template-columns: minmax(0, 1fr); }
    [data-frb-demo] .frb-bearing + .frb-bearing { border-top: 1px solid #d5e0e8; padding-top: 1rem; }
    [data-frb-demo] .frb-status { min-height: 7rem; }
    [data-frb-demo] .frb-readings dt { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    [data-frb-demo] * { scroll-behavior: auto; }
}