.roof-section{background:#e9eeea;border-top:1px solid #d7dfda}
.roof-explorer{border-top:1px solid #bbc9c5;border-bottom:1px solid #bbc9c5}
.roof-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid #cbd6d0}
.roof-toolbar>p{display:flex;align-items:center;gap:13px;font-size:13px;letter-spacing:.12em;line-height:1.6}
.roof-toolbar>p>span:last-child{color:#536d76}.roof-status-dot{width:6px;height:6px;background:#4a7c94;border-radius:50%}.roof-toolbar-divider{color:#869b9d}
.roof-view-switch{display:flex;padding:4px;background:#dde5e0;gap:4px;flex-shrink:0}.roof-view-switch button{background:transparent;font-size:15px;padding:11px 17px;min-height:42px;transition:background .2s,color .2s}.roof-view-switch button[aria-pressed=true]{background:var(--ink);color:#fff}.roof-view-switch button:hover{background:#c7d5cf}.roof-view-switch button[aria-pressed=true]:hover{background:#2c5267}.roof-view-switch button span{margin-left:13px}
.roof-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,1fr);gap:4%;align-items:center;padding:26px 0 30px}
.roof-visual{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.roof-diagram{position:relative;background-image:linear-gradient(#b4c5bc1f 1px,transparent 1px),linear-gradient(90deg,#b4c5bc1f 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent)}
.roof-svg{display:block;width:100%;max-height:640px;overflow:visible}.roof-layer{transform:translateY(var(--assembled));transition:transform .85s cubic-bezier(.22,.7,.18,1),opacity .5s;cursor:pointer;opacity:1;transform-box:view-box}.roof-outline{fill:none;stroke:#284b5c;stroke-opacity:.33;stroke-width:1;stroke-linejoin:round}.roof-top{transition:filter .25s}.roof-layer:hover .roof-top{filter:brightness(1.09)}
.roof-marker{opacity:0;transition:opacity .35s}.roof-marker path{stroke:#789297;stroke-width:1}.roof-marker circle{fill:#f7f6f2;stroke:#8ba3a5;stroke-width:1}.roof-marker text{font-family:var(--font);font-size:19px;text-anchor:middle;fill:var(--ink);font-weight:500}.roof-guide{opacity:0;transition:opacity .5s}
[data-view=exploded] .roof-layer{transform:translateY(var(--exploded));opacity:.65}[data-view=exploded] .roof-layer.is-active{transform:translateY(calc(var(--exploded) - 12px));opacity:1}[data-view=exploded] .roof-layer:hover{opacity:1}[data-view=exploded] .roof-marker{opacity:1}[data-view=exploded] .roof-guide{opacity:.45}.roof-layer.is-active .roof-marker circle{fill:var(--ink);stroke:var(--ink)}.roof-layer.is-active .roof-marker text{fill:white}.roof-layer.is-active .roof-outline{stroke-opacity:.65;stroke-width:1.4}
.roof-visual-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 0 0}.roof-visual-caption>p{font-size:15px;color:#4e6871}.roof-replay{padding:10px 0;background:transparent;font-size:15px;display:flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}.roof-replay>span{font-size:22px}.roof-replay:hover{text-decoration:underline;text-underline-offset:4px}.roof-replay:disabled{opacity:.5}
.roof-sidebar{padding:20px 0 14px}.roof-detail{min-height:178px;padding:0 0 23px}.roof-detail-kicker{display:flex;align-items:center;gap:5px;letter-spacing:.12em;font-size:13px;color:#536f78}.roof-detail-category{margin-left:auto;font-size:12px;letter-spacing:.12em;border:1px solid #a9bdba;padding:4px 7px}.roof-detail h3{font-size:clamp(25px,2.4vw,37px);letter-spacing:-.045em;line-height:1.2;margin:17px 0 12px}.roof-detail>p:last-child{font-size:17px;color:#506873;line-height:1.7;max-width:390px}
.roof-choice{display:flex;align-items:center;gap:15px;background:transparent;width:100%;min-height:49px;text-align:left;border-top:1px solid #c3d0c9;padding:10px 12px;font-size:16px;transition:background .2s,color .2s}.roof-choice:last-child{border-bottom:1px solid #c3d0c9}.roof-choice>span:first-child{font-size:14px;opacity:.7;min-width:19px}.roof-choice-arrow{margin-left:auto;font-size:19px;opacity:0}.roof-choice.is-active{background:var(--ink);color:white;border-color:var(--ink)}.roof-choice.is-active .roof-choice-arrow,.roof-choice:hover .roof-choice-arrow{opacity:1}.roof-choice:hover:not(.is-active){background:#dce5df}.roof-choice:focus-visible{position:relative;z-index:1;outline-offset:2px}
.roof-step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.roof-step-controls>span{font-size:12px;letter-spacing:.1em;color:#536d76}.roof-step-controls button{background:transparent;border:1px solid #b7c9c2;width:42px;height:42px;font-size:20px}.roof-step-controls button:hover{background:#d5e1da}.roof-step-controls button:disabled{opacity:.3;background:transparent}
.roof-footnote{display:flex;align-items:center;gap:16px;border-top:1px solid #c3d0c9;padding:22px 0}.roof-footnote>span{font-size:18px;align-self:flex-start;color:#6b8389;padding-top:2px}.roof-footnote>p{font-size:14px;line-height:1.7;color:#526d75;max-width:620px}.roof-footnote>.text-link{margin-left:auto;white-space:nowrap;font-size:15px;gap:18px}.roof-noscript{font-size:17px;margin-top:20px}
.roof-explorer.is-assembling .roof-layer{animation:roof-assemble .8s cubic-bezier(.22,.7,.18,1) both;animation-delay:calc(var(--order) * 160ms)}
@keyframes roof-assemble{from{transform:translateY(calc(var(--assembled) - 90px));opacity:0}to{transform:translateY(var(--assembled));opacity:1}}
@media(min-width:1600px){.roof-layout{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:7%}}
@media(max-width:1000px){.roof-layout{gap:3%;grid-template-columns:minmax(0,1.4fr) minmax(270px,1fr)}.roof-detail{min-height:192px}.roof-detail>p:last-child{font-size:16px}.roof-visual-caption{align-items:flex-start;flex-direction:column;gap:0}.roof-footnote>p{max-width:450px}.roof-toolbar>p{font-size:12px;gap:10px}.roof-view-switch button{padding:10px 12px;font-size:14px}}
@media(max-width:700px){.roof-section .section-heading{display:block}.roof-section .section-intro{max-width:460px;margin-top:20px;font-size:17px}.roof-layout{grid-template-columns:1fr;gap:9px;padding-top:12px}.roof-toolbar{flex-wrap:wrap;gap:17px;padding:20px 0}.roof-toolbar>p{font-size:12px}.roof-view-switch{width:100%}.roof-view-switch button{flex:1;font-size:15px}.roof-svg{max-height:470px}.roof-visual-caption{flex-direction:row;align-items:center;gap:15px;padding:0}.roof-visual-caption>p{font-size:14px;max-width:155px}.roof-replay{font-size:14px}.roof-sidebar{padding-top:20px}.roof-detail{min-height:157px;padding-bottom:18px}.roof-detail h3{font-size:29px;margin-top:15px}.roof-detail>p:last-child{font-size:17px;max-width:none}.roof-detail-category{font-size:12px}.roof-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px}.roof-choice{border:1px solid #c3d0c9;min-height:54px;padding:10px;gap:9px;font-size:15px}.roof-choice>span:first-child{font-size:13px;min-width:15px}.roof-choice-arrow{display:none}.roof-footnote{align-items:flex-start;flex-wrap:wrap;gap:9px 12px;padding-bottom:25px}.roof-footnote>p{flex:1;max-width:none;min-width:200px}.roof-footnote>.text-link{margin-left:30px;margin-top:4px}.roof-step-controls{margin-top:17px}}
@media(max-width:360px){.roof-choice{font-size:14px;padding:9px 7px;gap:6px}.roof-visual-caption{flex-direction:column;align-items:flex-start;gap:0}.roof-visual-caption>p{max-width:none}.roof-detail{min-height:177px}}
@media(prefers-reduced-motion:reduce){.roof-layer,.roof-marker,.roof-guide{transition:none!important}.roof-explorer.is-assembling .roof-layer{animation:none!important}}

@media(max-width:700px){.roof-svg{height:min(78vw,34svh);max-height:330px}.roof-sidebar{display:flex;flex-direction:column}.roof-choices{order:-1}.roof-detail{margin-top:22px;padding-bottom:0;min-height:150px}.roof-step-controls{margin-top:5px}.roof-choice{scroll-margin-top:100px}}

.roof-toolbar{flex-wrap:wrap}.roof-toolbar>p{flex-wrap:wrap;row-gap:6px}.roof-view-switch button{min-height:48px}.roof-visual-caption{flex-wrap:wrap}.roof-detail-kicker{flex-wrap:wrap;gap:7px}.roof-detail h3{line-height:1.2}.roof-detail>p:last-child{font-size:18px}.roof-choice{min-height:56px;line-height:1.4}.roof-step-controls button{display:grid;place-items:center;width:46px;height:46px}.roof-step-controls>span{text-align:center;line-height:1.5}.roof-replay>span{display:inline-flex;align-items:center}.roof-footnote{flex-wrap:wrap;align-items:flex-start}.roof-footnote>p{font-size:14px;flex:1 1 300px}.roof-footnote>.text-link{font-size:16px}.roof-visual-caption>p{font-size:15px}.roof-marker text{font-size:17px}
@media(max-width:1000px){.roof-layout{grid-template-columns:1fr;gap:20px}.roof-svg{max-height:520px}.roof-visual-caption{flex-direction:row;align-items:center}.roof-detail{min-height:0;margin-bottom:25px}.roof-detail>p:last-child{max-width:650px}.roof-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.roof-choice{border:1px solid #c3d0c9}.roof-detail h3{font-size:32px}.roof-footnote>p{max-width:none}}
@media(max-width:700px){.roof-section .section-intro,.roof-detail>p:last-child{font-size:17px}.roof-toolbar>p{font-size:12px;letter-spacing:.08em}.roof-view-switch button{font-size:15px}.roof-view-switch button span{margin-left:6px}.roof-visual-caption{gap:3px 15px;flex-direction:column;align-items:flex-start}.roof-visual-caption>p{max-width:none;font-size:15px}.roof-replay{font-size:15px}.roof-choice{font-size:15px;padding:12px 10px;min-height:66px}.roof-choice>span:first-child{font-size:12px;min-width:17px}.roof-detail-category{font-size:12px}.roof-detail-kicker{font-size:13px}.roof-detail{margin-top:25px;margin-bottom:20px}.roof-step-controls>span{font-size:12px}.roof-footnote>p{flex:1;min-width:180px}.roof-footnote>.text-link{font-size:16px}.roof-svg{height:auto;max-height:380px}.roof-diagram{mask-image:none}}
@media(max-width:360px){.roof-choice{font-size:14px;gap:6px;padding:11px 8px}.roof-view-switch button{font-size:14px}.roof-step-controls>span{font-size:11px}.roof-footnote>p{min-width:170px}}