.compass-scene-scroll { overflow-x: auto; border: 1px solid var(--i2-line); border-radius: 1rem; background: #fff; }
.compass-scene-scroll:focus-visible { outline: 3px solid var(--i2-blue); outline-offset: 4px; }
.compass-scene { position: relative; min-width: 840px; isolation: isolate; }
.compass-scene > img { border-radius: 0; }
.compass-scene-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.compass-poi-links path { fill: none; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 1px 2px #23314080); }
.compass-poi-links circle { fill: #fff; stroke: #0067b8; stroke-width: 3; }
.compass-poi-links--waypoints path { stroke: #0067b8; stroke-width: 2.5; stroke-dasharray: 7 6; filter: none; }
.compass-poi-links--waypoints circle { fill: #3cea22; stroke-width: 4; }
.compass-poi-cards { margin: 0; padding: 0; list-style: none; }
.compass-poi-card { position: absolute; display: flex; align-items: center; gap: .5rem; width: 16%; min-height: 3.2rem; padding: .45rem .65rem; background: #fff; border: 1px solid #d3d6da; border-radius: 3rem; box-shadow: 0 .15rem .5rem #172d4626; color: #102744; }
.compass-poi-card strong { font-size: clamp(.7rem, 1vw, .9rem); line-height: 1.2; overflow-wrap: anywhere; }
.compass-poi-card--mcdonalds { top: 16%; left: 2%; }
.compass-poi-card--paul { top: 16%; left: 20%; width: 12%; }
.compass-poi-card--reception { top: 17%; left: 66%; }
.compass-poi-card--lockers { top: 68%; left: 70%; }
.compass-poi-card--toilets { top: 17%; right: 1%; }
.compass-poi-icon { display: grid; place-items: center; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #0067b8; color: #fff; }
.compass-poi-icon svg { width: 82%; height: 82%; }
.compass-poi-icon--mcdonalds { background: #103d2e; }
.compass-poi-icon--paul { background: #080808; font: .72rem Georgia, serif; }
.compass-poi-icon--reception { font: bold 1.95rem Georgia, serif; }
.compass-network path, .compass-oneway { fill: none; stroke: #35dc1d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.compass-network path { filter: drop-shadow(0 0 1px #215817); }
.compass-oneway { stroke: #d62d32; stroke-width: 5; }
.compass-waypoints circle { fill: #3cea22; stroke: #267718; stroke-width: 1.5; }
.compass-rule-markers circle { fill: #fff; stroke: #167625; stroke-width: 2; }
.compass-rule-markers text { fill: #134c1c; text-anchor: middle; font: 700 20px 'Segoe UI', sans-serif; }
.compass-rule-markers .compass-rule-markers__oneway { stroke: #d62d32; }
.compass-network-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.compass-network-legend li { display: flex; align-items: center; gap: .5rem; color: var(--i2-ink); font-size: .85rem; }
.compass-legend-line { width: 1.65rem; border-top: 3px solid #229a17; }
.compass-legend-waypoint { width: .8rem; height: .8rem; border-radius: 50%; background: #3cea22; border: 2px solid #267718; }
.compass-legend-binding { width: 1.65rem; border-top: 2px dashed #0067b8; }
.compass-association-note { margin-block: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--i2-blue); background: #fff; font-size: .9rem; }
.compass-route-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.25rem 0 0; list-style: none; counter-reset: route-rule; }
.compass-route-rules li { position: relative; padding: 1rem 1rem 1rem 3.25rem; border: 1px solid var(--i2-line); border-radius: .75rem; background: #fff; counter-increment: route-rule; }
.compass-route-rules li::before { content: counter(route-rule); position: absolute; top: 1rem; left: 1rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e8f6e8; color: #166a20; font-size: .85rem; font-weight: 700; }
.compass-route-rules li:first-child::before { background: #fde9e9; color: #a31e24; }
.compass-route-rules h4 { margin: 0; font-size: 1rem; }
.compass-route-rules p { margin: .5rem 0 0; color: var(--i2-muted); font-size: .85rem; }
.compass-scene-help { display: none; }
.compass-device-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.compass-device-views figure { min-width: 0; margin: 0; }
.compass-device-views h4 { margin: 0 0 .85rem; color: var(--i2-ink); font-size: 1.05rem; line-height: 1.4; }
.compass-device-views img { border: 1px solid var(--i2-line); background: #fff; }
.compass-device-scene { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--i2-line); border-radius: 1rem; background: #fff; overflow: hidden; }
@media (max-width: 760px) { .compass-device-views { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 1000px) { .compass-scene-help { display: block; margin: 0 0 .6rem; color: var(--i2-muted); font-size: .8rem; } }
@media (max-width: 640px) { .compass-route-rules { grid-template-columns: minmax(0, 1fr); } }
.compass-legend-oneway { color: #c02529; font-size: 1.65rem; line-height: .8; }
.compass-extensions { display: grid; gap: 1.5rem; }
.compass-extension-grid, .compass-extension-media, .compass-hierarchy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.compass-extension { min-width: 0; padding: clamp(1.1rem, 3vw, 2rem); border: 1px solid var(--i2-line); border-radius: 1rem; background: #fff; }
.compass-extension h4 { margin: 0 0 .85rem; color: var(--i2-ink); font-size: 1.25rem; line-height: 1.35; }
.compass-extension > p { margin: 0 0 1.5rem; color: var(--i2-muted); line-height: 1.65; }
.compass-extension figure { min-width: 0; margin: 0; }
.compass-extension-media { align-items: center; }
.compass-extension-media--app { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.compass-extension-media a { display: block; border: 1px solid var(--i2-line); border-radius: .75rem; overflow: hidden; background: #f5f8fb; }
.compass-extension-media a:focus-visible { outline: 3px solid var(--i2-blue); outline-offset: 4px; }
.compass-extension-media img { width: 100%; height: 22rem; object-fit: contain; border-radius: 0; }
.compass-extension-media--app img { height: 25rem; }
.compass-live-flow, .compass-wait-example { padding: 1.25rem; border-radius: .75rem; background: #f3f7fb; }
.compass-live-flow > div { display: grid; gap: .25rem; padding: .7rem 1rem; border: 1px solid #dce5ec; border-radius: .5rem; background: #fff; text-align: center; }
.compass-live-flow span, .compass-time-equation span, .compass-time-total span { font-size: .85rem; color: var(--i2-muted); }
.compass-live-flow strong { color: var(--i2-ink); line-height: 1.35; }
.compass-live-flow .compass-live-flow__unavailable { border-color: #e9bcc0; background: #fff2f3; }
.compass-live-flow__unavailable strong { color: #a82532; }
.compass-live-flow .compass-live-flow__route { border-color: #b8d6c0; background: #f0f8f2; }
.compass-live-flow .compass-flow-arrow { display: block; margin: .2rem 0; color: var(--i2-blue); text-align: center; font-size: 1.3rem; }
.compass-example-label { margin: 0 0 1rem; color: var(--i2-muted); font-size: .8rem; }
.compass-time-equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .8rem; }
.compass-time-equation > div { display: grid; gap: .5rem; text-align: center; }
.compass-time-equation strong, .compass-time-total strong { font-size: 2rem; line-height: 1.2; color: var(--i2-blue-dark); }
.compass-time-equation > span { color: var(--i2-blue); font-size: 1.75rem; }
.compass-time-total { display: grid; gap: .5rem; margin-top: 1.25rem; padding: 1.25rem .5rem; border-top: 1px solid var(--i2-line); text-align: center; }
.compass-time-total strong { font-size: 2.75rem; }
.compass-hierarchy { list-style: none; margin: 0; padding: 0; }
.compass-hierarchy li { position: relative; display: grid; gap: .35rem; padding: .85rem 1rem; border: 1px solid var(--i2-line); border-radius: .5rem; background: #f5f8fb; }
.compass-hierarchy li + li { margin-top: 1.4rem; }
.compass-hierarchy li + li::before { position: absolute; top: -1.4rem; left: 1rem; content: "↓"; color: var(--i2-blue); line-height: 1.4rem; }
.compass-hierarchy span { color: var(--i2-muted); font-size: .8rem; }
.compass-hierarchy strong { color: var(--i2-ink); font-size: .95rem; line-height: 1.4; }
@media (max-width: 760px) {
    .compass-extension-grid, .compass-extension-media, .compass-extension-media--app, .compass-hierarchy-grid { grid-template-columns: minmax(0, 1fr); }
    .compass-extension-media img { height: auto; max-height: 28rem; }
    .compass-extension-media--app figure:last-child { max-width: 18rem; justify-self: center; }
}