.landmarkDemo { margin: 20px 0 28px; overflow: hidden; border: 1px solid #d8e0df; border-radius: 10px; background: #f7f9f8; }
.landmarkPage .landmarkDemo .landmarkGraphicTitle { margin: 0; padding: 16px 18px; background: #173338; color: white; font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.2; }
.landmarkGraphicSubtitle { display: block; margin-top: 6px; color: #c9efeb; font-size: 15px; font-weight: 500; }
.resourcePinOptions { position: absolute; top: 50px; right: 10px; z-index: 4; width: 280px; max-width: calc(100% - 20px); padding: 8px; border: 1px solid #d8e0df; border-radius: 8px; background: #fff; box-shadow: 0 6px 24px #17333830; }
.resourcePinOptions[hidden] { display: none; }
.resourcePinOptions p { margin: 4px 10px 8px; color: #53696a; font-size: 13px; font-weight: 600; }
.resourcePinOptions .resourcePinOption { display: block; padding: 12px 10px; border-radius: 5px; color: #173338; font-size: 14px; line-height: 1.4; text-decoration: none; text-transform: capitalize; }
.resourcePinOptions .resourcePinOption:hover, .resourcePinOptions .resourcePinOption:focus-visible { background: #edf4f3; }
.resourcePinOpen > .resourcePinButton { opacity: 1; visibility: visible; transform: none; }
button.resourcePinButton { cursor: pointer; font-family: inherit; }
.landmarkDemoPhoto { position: relative; }
.landmarkDemoPhoto > img { display: block; width: 100%; height: auto; }
.landmarkDemoOverlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.landmarkDemoOverlay [hidden] { display: none; }
.landmarkDemoOverlay text { fill: white; font: 800 36px "Segoe UI", sans-serif; paint-order: stroke; stroke: #173338; stroke-width: 5px; stroke-linejoin: round; }
.landmarkTriangles polygon { fill: #0ac2cc18; stroke: none; }
.landmarkTriangleEdge { stroke: #58f2ee; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px #0009); }
.landmarkTriangles circle { fill: #173338; stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkTriangles text { font-size: 30px; stroke: none; text-anchor: middle; }
.landmarkProportions { --measure-color: #58f2ee; }
.landmarkMeasureB { --measure-color: #ffe08a; }
.landmarkMeasureC { --measure-color: #ffa8d5; }
.landmarkMeasureD { --measure-color: #b6f78f; }
.landmarkProportions line { stroke: var(--measure-color); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px #0009); }
.landmarkProportions circle { fill: var(--measure-color); stroke: #173338; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkProportions rect { fill: #173338; stroke: var(--measure-color); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkProportions text { text-anchor: middle; stroke: none; }
.landmarkMeasureGhost { opacity: .8; }
.landmarkProportions .landmarkMeasureGhost line, .landmarkProportions .landmarkMeasureGhost path { fill: none; stroke: #bffffc; stroke-width: 4px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 2px #173338); }
.landmarkProportions .landmarkMeasureGhost line { stroke-dasharray: 8 5; }
.landmarkProportions .landmarkMeasureGhostLabel { fill: #bffffc; stroke: #173338; stroke-width: 6px; font-size: 34px; }
.landmarkMeasureKey { margin-top: 12px; }
.landmarkMeasureKey { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.landmarkMeasureKey strong { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #173338; color: #58f2ee; }
.landmarkMeasureKey span:nth-child(2) strong { color: #ffe08a; }
.landmarkMeasureKey span:nth-child(3) strong { color: #ffa8d5; }
.landmarkMeasureKey span:nth-child(4) strong { color: #b6f78f; }
.landmarkMeasureBars { max-width: 360px; margin-top: 14px; }
.landmarkMeasureBars > div { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 14px "Segoe UI", sans-serif; }
.landmarkMeasureBars span { flex: 0 0 15px; }
.landmarkMeasureBars i { display: block; width: calc(var(--measure-width) * .85); height: 8px; border-radius: 4px; background: #237f80; }
.landmarkMeasureBars > div:nth-child(2) i { background: #a57920; }
.landmarkMeasureBars > div:nth-child(3) i { background: #a14778; }
.landmarkMeasureBars > div:nth-child(4) i { background: #497f2c; }
.landmarkDemo figcaption { padding: 16px 18px; }
.landmarkDemoControls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.landmarkDemoChoices { display: flex; flex-wrap: wrap; gap: 6px; }
.landmarkDemoControls button { min-height: 44px; padding: 8px 11px; border: 1px solid #9baead; border-radius: 6px; background: white; color: #173338; font: 600 14px/1.3 "Segoe UI", sans-serif; cursor: pointer; }
.landmarkDemoChoices button[aria-pressed="true"] { background: #173338; border-color: #173338; color: white; }
.landmarkDemoControls .landmarkDemoPause { display: inline-grid; place-items: center; width: 44px; min-width: 44px; background: transparent; font-size: 20px; }
.landmarkPage #understanding-the-major-forms { font-weight: 700; }
.landmarkVisiblePoint { fill: #fff; stroke: #173338; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkDemoLegend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 14px 0 0; padding-left: 22px; font: 600 14px/1.5 "Segoe UI", sans-serif; }
.landmarkDemoLegend li { padding-left: 2px; }
.landmarkDemo figcaption p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.landmarkPlumb { --plumb-color: #58f2ee; }
.landmarkPlumb2 { --plumb-color: #ffe08a; }
.landmarkPlumb3 { --plumb-color: #ffa8d5; }
.landmarkPlumb4 { --plumb-color: #b6f78f; }
.landmarkPlumb line { stroke: var(--plumb-color); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkPlumbTrack { opacity: .2; }
.landmarkPlumbDrop { stroke-dasharray: 1; animation: landmarkPlumbDrop 6s ease-in-out var(--plumb-delay) infinite; }
.landmarkPlumb circle { fill: var(--plumb-color); stroke: #173338; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.landmarkPlumbLegend li::marker { color: #237f80; font-weight: 800; }
.landmarkDemo.isPaused .landmarkPlumbDrop, .landmarkDemo.isOffscreen .landmarkPlumbDrop { animation-play-state: paused; }
@keyframes landmarkPlumbDrop { 0%, 100% { stroke-dashoffset: 1; } 40%, 60% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .landmarkPlumbDrop { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 520px) { .landmarkDemo figcaption { padding: 12px; } .landmarkDemoLegend { display: grid; gap: 4px; } .landmarkDemoChoices { width: 100%; } }

.landmarkBodyLabel { position: absolute; transform: translate(-50%, -50%); padding: 3px 7px; border-radius: 4px; background: #173338d9; color: #fff; white-space: nowrap; font: 600 clamp(10px, 1.8vw, 14px)/1.35 "Segoe UI", sans-serif; pointer-events: none; }