#examples .example-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); padding-top: var(--ui-space-6); }
#examples .example { --case-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
#examples .example-intro { display: grid; grid-template-columns: var(--case-columns); align-items: start; gap: var(--ui-space-6); padding-block: var(--ui-space-7); }
#examples .intro-title { display: flex; flex-direction: column; gap: var(--ui-space-4); }
#examples .intro-description { max-width: 43ch; }
#examples .example-workspace { display: grid; grid-template-columns: var(--case-columns); grid-template-rows: minmax(560px, auto) auto; align-items: stretch; column-gap: var(--ui-space-6); row-gap: var(--ui-space-3); }
#examples .scene-column { display: grid; grid-template-rows: subgrid; grid-column: 1; grid-row: 1 / span 2; min-width: 0; margin: 0; }
#examples .model-stage { position: relative; grid-row: 1; min-height: 560px; overflow: hidden; border-radius: var(--radius-card); background: var(--blue); isolation: isolate; }
#examples .scene-canvas { display: block; width: 100%; height: 100%; }
#examples .stage-heading { position: absolute; z-index: 1; top: var(--ui-space-6); left: var(--ui-space-6); right: var(--ui-space-6); display: flex; justify-content: space-between; gap: var(--ui-space-4); pointer-events: none; }
#examples .stage-bottom { position: absolute; z-index: 1; bottom: var(--ui-space-6); left: var(--ui-space-6); right: var(--ui-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4); }
#examples .stage-bottom > :first-child { max-width: 28ch; }
#examples .stage-bottom > button { flex-shrink: 0; }
#examples .scene-note { grid-row: 2; margin: 0; max-width: 67ch; }
#examples .joint-stage { display: flex; flex-direction: column; gap: var(--ui-space-5); padding: var(--ui-space-6); }
#examples .joint-heading { display: flex; flex-direction: column; gap: var(--ui-space-2); }
#examples .joint-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); flex: 1; }
#examples .joint-view { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--radius-note); }
#examples .joint-canvas { display: block; width: 100%; height: 300px; flex: none; }
#examples .joint-view > :last-child { margin-top: auto; }
#examples .joint-detail { min-width: 0; border-top: 1px solid var(--ui-border); }
#examples .joint-detail-body { display: flex; flex-direction: column; gap: var(--ui-space-3); max-width: 440px; margin-inline: auto; padding-bottom: var(--ui-space-4); }
#examples .joint-legend { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); }
#examples .joint-legend > span { display: flex; align-items: center; gap: var(--ui-space-2); }
#examples .joint-swatch { width: 12px; height: 12px; border-radius: 2px; }
#examples .joint-swatch--wall { background: #eadfce; }
#examples .joint-swatch--floor { background: #8aa6c4; }
#examples .joint-swatch--overlap { background: var(--lime); }
#examples .result-column { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; min-width: 0; gap: var(--ui-space-4); }
#examples .result-column > [data-contact] { margin-top: auto; }
#examples .result-heading { display: flex; flex-direction: column; gap: var(--ui-space-2); }
#examples .project-scale { display: flex; flex-direction: column; gap: var(--ui-space-3); }
#examples .roof-stage { display: flex; flex-direction: column; gap: var(--ui-space-5); padding: var(--ui-space-6); }
#examples .roof-stage-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--ui-space-4); }
#examples .roof-stage-heading > :last-child { text-align: right; }
#examples .roof-illustration { position: relative; height: 260px; min-height: 240px; flex: 1; }
#examples .roof-illustration > canvas, #examples .roof-leader { position: absolute; inset: 0; width: 100%; height: 100%; }
#examples .roof-leader { pointer-events: none; }
#examples .roof-leader polyline { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
#examples .roof-layer-label { display: flex; flex-direction: column; gap: var(--ui-space-2); align-self: center; max-width: 45ch; text-align: center; }
#examples .roof-volume-summary { display: grid; gap: var(--ui-space-3); padding-top: var(--ui-space-5); border-top: 1px solid var(--ui-border); }
#examples .roof-volume-total { display: flex; align-items: start; justify-content: space-between; gap: var(--ui-space-4); }
#examples .roof-volume-total > :last-child { white-space: nowrap; }
#examples .roof-volume-bar { display: flex; height: 18px; overflow: hidden; border-radius: var(--ui-space-1); }
#examples .roof-volume-bar > span { flex-basis: 0; }
#examples .roof-volume-bar > :first-child { flex-grow: .6; background: var(--on-dark); }
#examples .roof-volume-bar > :last-child { flex-grow: .4; background: repeating-linear-gradient(135deg, transparent 0, transparent 5px, var(--on-dark) 5px, var(--on-dark) 6px); border: 1px solid var(--on-dark); }
#examples .roof-volume-key { display: grid; grid-template-columns: 3fr 2fr; gap: var(--ui-space-3); }
#examples .roof-volume-key > div { display: flex; flex-direction: column; gap: var(--ui-space-1); }
#examples .roof-volume-key > div > span { display: flex; align-items: center; gap: var(--ui-space-2); }
#examples .roof-key-swatch { width: 10px; height: 10px; flex-shrink: 0; background: var(--on-dark); }
#examples .roof-key-swatch--gap { background: transparent; border: 1px solid var(--on-dark); }
#examples .roof-actions { display: grid; gap: var(--ui-space-3); padding-left: var(--ui-space-5); }
#examples .roof-actions > li { padding-left: var(--ui-space-1); }
#examples .intro-context { display: flex; flex-direction: column; gap: var(--ui-space-2); }
#examples .intro-context > a { align-self: start; }
#examples .joint-detail-body .joint-canvas { height: 200px; }
#examples .stair-measure-label { position: absolute; pointer-events: none; transform: translate(-50%, -50%); padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--ui-space-1); background: var(--ink); white-space: nowrap; }
#examples .case-comparison { display: flex; flex-direction: column; gap: var(--ui-space-4); margin-block: var(--ui-space-8); }
#examples .comparison-columns { display: grid; grid-template-columns: var(--case-columns); gap: var(--ui-space-6); }
#examples .comparison-method { display: flex; flex-direction: column; gap: var(--ui-space-2); }
#examples .measurement-unit { font-size: 18px; letter-spacing: 0; }
#examples .requirement-block { display: flex; flex-direction: column; gap: var(--ui-space-2); padding-block: var(--ui-space-4); border-block: 1px solid var(--line); }
#examples .engineering-question { display: flex; flex-direction: column; gap: var(--ui-space-2); }
#examples .source-details { min-width: 0; border-bottom: 1px solid var(--line); }
#examples .disclosure-content { display: flex; flex-direction: column; gap: var(--ui-space-2); padding-bottom: var(--ui-space-5); }
#examples .case-explanation { display: grid; grid-template-columns: var(--case-columns); align-items: start; gap: var(--ui-space-6); margin-block: var(--ui-space-7) 0; }
@media (max-width: 1100px) {
#examples .example { --case-columns: minmax(0, 1.2fr) minmax(320px, 1fr); }
#examples #panel-clash { --case-columns: minmax(0, 1fr); }
#examples #panel-clash .example-workspace { grid-template-rows: auto; }
#examples #panel-clash .scene-column { display: block; grid-column: 1; grid-row: auto; }
#examples #panel-clash .result-column { grid-column: 1; grid-row: auto; }
#examples #panel-clash .joint-stage { height: auto; }
#examples #panel-clash .scene-note { margin-top: var(--ui-space-3); }
#examples .stage-bottom { flex-direction: column; align-items: start; gap: var(--ui-space-3); }
#examples .stage-bottom > :first-child { max-width: 40ch; }
}
@media (max-width: 800px) {
#examples .example-navigation { padding-top: var(--ui-space-4); }
#examples .example { --case-columns: minmax(0, 1fr); }
#examples .example-intro { grid-template-columns: 1fr; gap: var(--ui-space-5); padding-block: var(--ui-space-6); }
#examples .intro-title { gap: var(--ui-space-3); }
#examples .example-workspace { grid-template-rows: auto; gap: var(--ui-space-6); }
#examples .scene-column { display: block; grid-column: 1; grid-row: auto; }
#examples .model-stage { height: 500px; min-height: 0; }
#examples .joint-stage { height: auto; }
#examples .roof-stage { height: auto; }
#examples .scene-note { margin-top: var(--ui-space-3); }
#examples .result-column { grid-column: 1; grid-row: auto; }
#examples .case-explanation { grid-template-columns: 1fr; gap: var(--ui-space-6); margin-block: var(--ui-space-7) 0; }
}
@media (max-width: 480px) {
#examples .model-stage { height: 460px; }
#examples .stage-heading { top: var(--ui-space-5); left: var(--ui-space-5); right: var(--ui-space-5); gap: var(--ui-space-3); }
#examples .stage-heading > :last-child { text-align: right; }
#examples .stage-bottom { left: var(--ui-space-5); right: var(--ui-space-5); bottom: var(--ui-space-5); }
#examples .stage-bottom > :first-child { max-width: 36ch; }
#examples .joint-stage { height: auto; padding: var(--ui-space-5); }
#examples .joint-views { grid-template-columns: 1fr; }
#examples .joint-canvas { height: 240px; }
#examples .roof-stage { height: auto; padding: var(--ui-space-5); }
#examples .roof-stage-heading { flex-direction: column; gap: var(--ui-space-2); }
#examples .roof-stage-heading > :last-child { text-align: left; }
#examples .roof-illustration { height: 220px; min-height: 220px; }
}

.examples-main { padding-block: var(--ui-space-7) var(--ui-space-8); }
#examples .examples-page-heading { display: flex; flex-direction: column; align-items: start; gap: var(--ui-space-4); }