.routing-guide { font-size: 15px; }
.guide-page { padding-top: 56px; }
.guide-skip { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 12px; background: white; }
.guide-skip:focus { top: 8px; }
.routing-guide :focus-visible { outline: 3px solid #25636f; outline-offset: 4px; }
.guide-intro { max-width: 710px; margin-bottom: 36px; }
.guide-eyebrow { margin: 0 0 10px; color: #32654f; font-size: 12px; font-weight: 750; }
.guide-intro h1 { font-size: clamp(32px, 4.5vw, 50px); letter-spacing: -.045em; line-height: 1.12; margin: 0 0 18px; color: #172d23; }
.guide-lead { font-size: 19px; line-height: 1.65; color: #4a5b52; margin: 0; }
.guide-concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.guide-concepts article { position: relative; padding-left: 39px; }
.guide-step { position: absolute; top: 0; left: 0; width: 27px; height: 27px; border-radius: 50%; background: #e3ebe1; color: #2d634c; text-align: center; line-height: 27px; font-weight: 700; }
.guide-concepts h2, .guide-notes h2 { font-size: 16px; line-height: 1.5; margin: 0 0 8px; color: #263d31; }
.guide-concepts p, .guide-notes p { margin: 0; color: #546159; line-height: 1.65; font-size: 14px; }
.guide-playground { border: 1px solid #d9e1d7; border-radius: 20px; background: #fff; padding: 30px; box-shadow: 0 6px 30px #23372506; }
.guide-section-heading { display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.guide-section-heading h2 { margin: 0; color: #213c2d; font-size: 28px; letter-spacing: -.03em; }
.guide-section-heading .guide-eyebrow { margin-bottom: 5px; }
.guide-example-label { display: inline-block; border: 1px solid #dce3d9; border-radius: 99px; padding: 6px 11px; color: #57635b; white-space: nowrap; font-size: 12px; }
.guide-playground-intro { color: #59645e; margin: 12px 0 25px; }
.guide-experiment { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); gap: 30px; }
.guide-map { display: block; width: 100%; height: auto; }
.guide-road-outline { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.guide-route { fill: none; stroke: #adb5ae; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 9; transition: stroke .18s, stroke-width .18s; }
.guide-route.is-selected { stroke: #2f6f58; stroke-width: 10; stroke-dasharray: none; }
.guide-map-label rect { fill: #ffffffed; }
.guide-map-label text { fill: #294035; text-anchor: middle; font-size: 15px; font-weight: 700; }
.guide-map-label text.guide-map-small { fill: #5b675f; font-size: 12px; font-weight: 400; }
.guide-map-pin circle { fill: #243d30; stroke: white; stroke-width: 3; }
.guide-map-pin text { text-anchor: middle; fill: #fff; font-weight: 700; font-size: 16px; }
.guide-result { background: #edf4ec; border-radius: 12px; padding: 17px; margin-top: 16px; display: flex; gap: 13px; align-items: flex-start; min-height: 99px; }
.guide-result-icon { color: #2f6f58; font-size: 27px; line-height: 1; }
.guide-result strong { font-size: 17px; color: #244a35; }
.guide-result p { margin: 5px 0 0; font-size: 14px; color: #42604c; }
.guide-map-note { color: #617067; font-size: 13px; line-height: 1.6; margin: 15px 0 0; }
.guide-controls { min-width: 0; }
.guide-control-block { margin: 0 0 22px; }
.guide-control-kicker, .guide-policy-controls legend { color: #3b6f53; font-size: 12px; font-weight: 750; }
.guide-control-kicker { margin: 0 0 14px; }
.guide-control-label { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 650; color: #2b3e31; }
.guide-control-label output { color: #2f6f58; font-size: 16px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.guide-controls input[type="range"] { accent-color: #2f6f58; width: 100%; min-height: 32px; margin: 9px 0 0; cursor: pointer; }
.guide-range-ends { display: flex; justify-content: space-between; color: #69776d; font-size: 11px; }
.guide-help { color: #68756b; font-size: 12px; line-height: 1.6; margin: 10px 0 0; }
.guide-policy-controls { min-width: 0; padding: 17px; border: 1px solid #dde5d9; border-radius: 12px; background: #f8faf6; }
.guide-policy-controls legend { padding: 0 6px; }
.guide-boost-label { margin-top: 22px; margin-bottom: 10px; }
.guide-controls select { width: 100%; background: #fff; color: #2c4033; padding: 10px; min-height: 44px; border: 1px solid #c4d0c1; border-radius: 8px; }
.guide-controls .button { min-height: 40px; }
.guide-flow { border-top: 1px solid #e0e6dc; margin-top: 28px; padding-top: 23px; display: grid; grid-template-columns: 1fr 20px 1.2fr 20px 1.2fr; gap: 15px; align-items: start; }
.guide-flow div > span { display: block; font-size: 11px; color: #6a766d; margin-bottom: 7px; }
.guide-flow strong { font-size: 14px; color: #2e4d38; }
.guide-flow p { margin: 6px 0 0; color: #687369; font-size: 12px; line-height: 1.6; }
.guide-flow-arrow { color: #93a490; padding-top: 21px; }
.guide-catalog { margin: 0 0 40px; }
.guide-catalog-intro { color: #59645e; margin: 12px 0 22px; max-width: 720px; line-height: 1.65; }
.guide-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-profile { border: 1px solid #d9e1d7; border-radius: 14px; padding: 16px 18px; background: #fff; }
.guide-profile.is-legacy { background: #faf8f4; }
.guide-profile header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.guide-profile h3 { margin: 0; font-size: 16px; color: #213c2d; letter-spacing: -.02em; }
.guide-profile h3 code { font-size: 12px; font-weight: 500; color: #5b675f; }
.guide-profile header p { margin: 4px 0 0; color: #546159; font-size: 13px; line-height: 1.5; }
.guide-profile-weights { margin: 0; color: #68756b; font-size: 13px; }
.guide-weight-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guide-weight { font-size: 12px; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 99px; }
.guide-weight--prefer { background: #e7f1e4; color: #245536; }
.guide-weight--avoid { background: #fde8e4; color: #7a2e24; }
.guide-legacy-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #efe4d2; color: #6b4f2a; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.guide-catalog-note { margin: 16px 0 0; color: #617067; font-size: 13px; line-height: 1.6; max-width: 720px; }
.guide-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 38px 0; }
.guide-details { background: #fff; border: 1px solid #d9e1d7; border-radius: 12px; }
.guide-details summary { cursor: pointer; padding: 19px 23px; font-weight: 650; color: #344e3c; }
.guide-details-body { padding: 0 23px 16px; color: #58665c; font-size: 14px; }
.guide-details-body p { max-width: 870px; }
.guide-equation { background: #f0f4ed; border-radius: 8px; padding: 14px; color: #264832; font-family: ui-monospace, monospace; font-size: 13px; }
.guide-score-table { width: 100%; max-width: 730px; text-align: left; font-size: 13px; border-collapse: collapse; margin: 20px 0; }
.guide-score-table caption { text-align: left; font-weight: 700; margin-bottom: 8px; }
.guide-score-table th, .guide-score-table td { border-bottom: 1px solid #e0e6dc; padding: 10px 8px; }
.guide-score-table thead { background: #f7f9f5; }
.guide-next { margin-top: 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.guide-next h2 { color: #2e4737; font-size: 23px; margin: 0 0 7px; }
.guide-next p { color: #637067; margin: 0; }
.guide-next .button { padding: 14px 19px; font-size: 14px; min-height: 46px; white-space: nowrap; }
.guide-noscript { background: #fff3d9; padding: 12px; border-radius: 8px; }
@media (max-width: 800px) {
    .guide-page { padding-top: 32px; }
    .guide-concepts { grid-template-columns: 1fr; gap: 20px; }
    .guide-concepts article { padding-left: 40px; }
    .guide-concepts h2 { margin-bottom: 3px; }
    .guide-experiment { grid-template-columns: 1fr; }
    .guide-section-heading { flex-wrap: wrap; }
    .guide-notes { gap: 24px; grid-template-columns: 1fr; }
    .guide-catalog-grid { grid-template-columns: 1fr; }
    .guide-playground { padding: 22px; }
    .guide-map { max-height: 380px; }
    .guide-control-block { margin-bottom: 25px; }
    .guide-flow { grid-template-columns: 1fr; gap: 12px; }
    .guide-flow-arrow { display: none; }
    .guide-flow div { border-left: 2px solid #d7e3d1; padding-left: 13px; }
    .guide-flow div > span { margin-bottom: 4px; }
    .guide-flow p { margin-top: 3px; }
}
@media (max-width: 480px) {
    .guide-playground { padding: 17px; border-radius: 14px; }
    .guide-lead { font-size: 17px; }
    .guide-section-heading h2 { font-size: 25px; }
    .guide-example-label { font-size: 11px; }
    .guide-next { flex-direction: column; align-items: flex-start; }
    .guide-score-table { font-size: 11px; }
    .guide-score-table th, .guide-score-table td { padding: 8px 4px; }
    .guide-details-body { padding: 0 15px 12px; }
    .guide-equation { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .guide-route { transition: none; } }