.free-roam-shell { --fr-ink: #182033; --fr-muted: #536277; --fr-line: #cbd5e1; --fr-panel: #f7f9fb; --fr-blue: #1d4ed8; color: var(--fr-ink); }
.free-roam-shell p { max-width: 72ch; }
.free-roam-shell :is(button,input,textarea,a) { overflow-wrap: anywhere; }
.free-roam-shell :is(button,input,textarea) { font-size: 1rem; }
.free-roam-shell :is(button,a):focus-visible { outline: 3px solid var(--fr-blue); outline-offset: 3px; }
.free-roam-shell ::selection { background: #c9ddff; color: var(--fr-ink); }
.free-roam-header { align-items: end; border-bottom: 1px solid var(--fr-line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-bottom: 1rem; }
.free-roam-form { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) minmax(0, 1fr) auto; }
.free-roam-form > *, .free-roam-stage > * { min-width: 0; }
.free-roam-provenance { font-weight: 600; }
.free-roam-stage { border-top: 1px solid var(--fr-line); display: grid; gap: 2rem; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); margin-top: 2rem; padding-top: 1.5rem; }
.free-roam-route { background: transparent; border: 1px solid var(--fr-line); border-radius: 8px; color: var(--fr-ink); display: grid; gap: .35rem; margin-bottom: .75rem; padding: .8rem; text-align: start; width: 100%; }
.free-roam-route:hover, .free-roam-link:hover { background: #edf3fc; }
.free-roam-route[aria-pressed="true"] { background: #edf3fc; border-color: var(--fr-blue); }
.free-roam-route-display { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.free-roam-step-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.free-roam-step-controls [data-step-position] { font-variant-numeric: tabular-nums; }
.free-roam-shell button { min-height: 44px; }
.free-roam-shell button:disabled { cursor: default; opacity: .6; }
.free-roam-links { padding-inline-start: 1.7rem; }
.free-roam-links li { padding: .2rem 0 .5rem; }
.free-roam-link { background: transparent; border: 0; border-radius: 4px; color: var(--fr-ink); padding: .3rem .5rem; text-align: start; width: 100%; }
.free-roam-link[aria-pressed="true"] { color: var(--fr-blue); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.free-roam-links [data-step-detail] { padding: .5rem; }
.free-roam-links [data-step-detail] p { margin-bottom: .5rem; }
.free-roam-empty { border-top: 1px solid var(--fr-line); margin-top: 2rem; padding-top: 1.5rem; }
.free-roam-feedback { margin: .75rem 0; min-height: 1.5rem; }
.free-roam-shell [hidden] { display: none !important; }
@media (max-width: 760px) {
 .free-roam-form, .free-roam-stage { grid-template-columns: minmax(0, 1fr); }
 .free-roam-stage { gap: 1.25rem; }
 .free-roam-route-list { border-bottom: 1px solid var(--fr-line); padding-bottom: 1rem; }
 .free-roam-step-controls { gap: .5rem; }
 .free-roam-step-controls button { flex: 1 1 auto; }
}

.free-roam-examples ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.free-roam-examples a { align-items: center; color: var(--fr-blue); display: inline-flex; min-height: 44px; padding-block: .5rem; text-underline-offset: .2em; }
.free-roam-examples a[aria-current="page"] { color: var(--fr-ink); font-weight: 700; }