.roof-frame-explainer{--rfe-accent:#7157ad;--rfe-ink:#2e342b;color:var(--rfe-ink);scroll-margin-top:16px}.roof-frame-explainer *{box-sizing:border-box}.rfe-heading{margin-bottom:27px;max-width:710px}.rfe-heading .eyebrow{font-size:10px;color:#77776b;letter-spacing:1.3px;margin:0 0 13px}.rfe-heading h2{font-size:clamp(32px,4vw,49px);line-height:1.1;letter-spacing:-1.8px;font-weight:550;margin:0 0 16px}.rfe-heading h2 span{color:#747968}.rfe-heading>p:last-child{font-size:14px;line-height:1.7;color:#6b7163;max-width:520px;margin:0}.rfe-card{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr);border:1px solid #dfddd3;border-radius:20px;overflow:hidden;background:#f3f1eb}.rfe-diagram{margin:0;min-width:0;padding:24px 26px 18px;display:flex;flex-direction:column;justify-content:center}.rfe-diagram-top{display:flex;gap:14px;justify-content:space-between;color:#787b6e;font-size:8px;letter-spacing:.8px;margin-bottom:18px}.rfe-diagram-top>span:last-child{letter-spacing:0}.rfe-diagram svg{display:block;width:100%;height:auto;overflow:visible;margin:auto 0}.rfe-diagram figcaption{font-size:10px;line-height:1.6;color:#7a7d70;max-width:530px;margin-top:20px}.rfe-timber{fill:none;stroke:#d9b67d;stroke-width:28;stroke-linejoin:miter}.rfe-grain{fill:none;stroke:#f2d6aa;stroke-width:2;opacity:.7}.rfe-foundations{fill:#deded5;stroke:none}.rfe-foundations .rfe-ground{fill:none;stroke:#c5c8bb;stroke-width:1.5}.rfe-foundations .rfe-hatch{fill:none;stroke:#c6c9bc;stroke-width:1.5}.rfe-knees>path{fill:#969f96;stroke:#7f8b7e;stroke-width:1}.rfe-knees>circle,.rfe-bolt{fill:#f9f8f2;stroke:#6c796d;stroke-width:1.5}.rfe-loads{fill:none;stroke:#7358b0;stroke-width:2.8;opacity:.26}.rfe-ridge-halo{fill:#e7e0f2;opacity:.35}.rfe-ridge-plate{fill:#939d93;stroke:#6d7b6d;stroke-width:1.2}.rfe-hinge{fill:#fffdf9;stroke:#7358b0;stroke-width:3}.rfe-leader{fill:none;stroke:#a7a998;stroke-width:1}.rfe-svg-label{font-size:16px;fill:#464d40;font-weight:550}.rfe-svg-small{font-size:12px;fill:#6f7967}.rfe-pin{fill:#889982;stroke:#607556;stroke-width:1.5}.rfe-pin-center{fill:#f3f1eb;stroke:#607556;stroke-width:1.5}.rfe-reactions{fill:none;stroke:#56705b;stroke-width:2.7;opacity:.15}.rfe-reactions text{stroke:none}.rfe-reactions .rfe-reaction-leader{stroke-width:1;stroke:#a8b09c}.rfe-frame-label{fill:#a3a594;font-size:21px;font-weight:450;letter-spacing:-.5px}.roof-frame-explainer[data-step="0"] .rfe-loads,.roof-frame-explainer[data-step="1"] .rfe-ridge-halo{opacity:1}.roof-frame-explainer[data-step="1"] .rfe-ridge-plate{fill:#aea1c4;stroke:#7157ad}.roof-frame-explainer[data-step="2"] .rfe-reactions{opacity:1}.roof-frame-explainer[data-step="2"] .rfe-foundations{fill:#d7dfcf}.rfe-controls{padding:23px 25px;background:#fcfbf7;border-left:1px solid #dfddd3;display:flex;flex-direction:column;min-width:0}.roof-frame-explainer button{font:inherit;cursor:pointer;touch-action:manipulation}.roof-frame-explainer button:focus-visible,.roof-frame-explainer a:focus-visible,.rfe-details>summary:focus-visible,.rfe-joint-detail>summary:focus-visible{outline:2px solid #7157ad;outline-offset:4px}.rfe-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border-bottom:1px solid #e6e3d9;padding-bottom:16px}.rfe-steps button{border:0;background:transparent;min-height:56px;text-align:left;padding:9px 8px;border-radius:7px;color:#73796b;font-size:10px}.rfe-steps button span{display:block;margin-bottom:5px;font-size:8px;letter-spacing:.7px;color:#939a87}.rfe-steps button[aria-pressed=true]{color:#594185;background:#eee9f4}.rfe-steps button[aria-pressed=true] span{color:#8067ac}.rfe-copy{padding:23px 0 20px;min-height:218px}.rfe-counter{font-size:9px;color:#846eaa;letter-spacing:1px}.rfe-copy h3{font-size:27px;line-height:1.16;font-weight:550;letter-spacing:-.8px;margin:12px 0}.rfe-copy p{font-size:12px;color:#6d7464;line-height:1.7;margin:0}.rfe-compare{margin-top:auto;padding-top:18px;border-top:1px solid #e5e2d9}.rfe-compare>span{font-size:10px;color:#737968;display:block;margin-bottom:11px}.rfe-compare>div{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#efeee8;padding:4px;border-radius:9px}.rfe-compare button{font-size:10px;line-height:1.4;min-height:38px;border:0;border-radius:6px;background:transparent;color:#727967;padding:8px 5px}.rfe-compare button[aria-pressed=true]{background:#fffefb;color:#51416c;box-shadow:0 1px 5px #3f43210c}.rfe-compare>p{font-size:9px;line-height:1.6;color:#7b806e;margin:9px 0 0}.rfe-playback{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:20px}.rfe-playback button{display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:42px;font-size:10px;border:0}.rfe-play{border-radius:24px;background:#2c3327;color:#fff;padding:9px 15px}.rfe-reset{background:transparent;color:#6c745e;padding:7px 0}.rfe-playback>span{font-size:10px;color:#7a806e}.rfe-key{display:flex;gap:24px;align-items:baseline;border-bottom:1px solid #deded2;padding:22px 0;margin-bottom:0}.rfe-key>span{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#8a8c7e;flex:none}.rfe-key p{font-size:12px;line-height:1.7;margin:0;color:#6e7660;max-width:760px}.rfe-key strong{font-weight:550;color:#434e38}.rfe-details>summary,.rfe-joint-detail>summary{cursor:pointer;padding:19px 0;font-size:12px;line-height:1.6;color:#5c6652;min-height:54px}.rfe-details>summary::marker,.rfe-joint-detail>summary::marker{color:#9d8cb7;font-size:10px}.rfe-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 40px;padding:15px 0 20px;max-width:900px}.rfe-detail-grid h3{font-size:15px;line-height:1.4;letter-spacing:-.25px;margin:0 0 9px;font-weight:550}.rfe-detail-grid p{font-size:12px;color:#707761;line-height:1.75;margin:0}.rfe-scope{font-size:10px;line-height:1.7;color:#818673;max-width:780px;margin:8px 0}.rfe-sources{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 22px;margin:12px 0 18px}.rfe-sources>span{font-size:9px;color:#929582}.rfe-sources>a{display:inline-flex;align-items:center;gap:5px;min-height:34px;font-size:10px;color:#75618d;text-decoration:none}.rfe-sources>a:hover{text-decoration:underline;text-underline-offset:3px}.rfe-joint-detail{border-block:1px solid #deded2}.rfe-joint-detail>.moment-joint-explainer{padding:18px 0 28px}.rfe-joint-intro{font-size:12px;line-height:1.7;color:#707761;max-width:740px;margin:8px 0 22px}@media(prefers-reduced-motion:no-preference){.rfe-loads,.rfe-ridge-halo,.rfe-reactions,.rfe-ridge-plate{transition:opacity .5s ease,fill .5s ease}}@media(max-width:1050px){.rfe-card{grid-template-columns:minmax(0,1.25fr) minmax(270px,.85fr)}.rfe-diagram{padding:22px 16px}.rfe-controls{padding:21px}.rfe-copy{min-height:230px}.rfe-copy h3{font-size:26px}}@media(max-width:760px){.rfe-card{grid-template-columns:1fr;border-radius:15px}.rfe-heading{margin-bottom:22px}.rfe-heading h2{font-size:34px;letter-spacing:-1.15px}.rfe-heading>p:last-child{font-size:12px}.rfe-diagram{padding:18px 14px 16px}.rfe-diagram-top{font-size:7px;letter-spacing:.4px;margin-bottom:6px}.rfe-diagram svg{max-height:390px}.rfe-diagram figcaption{font-size:9px;margin-top:8px}.rfe-controls{padding:17px;border-left:0;border-top:1px solid #dfddd3}.rfe-steps button{font-size:11px;min-height:54px;padding:9px 11px}.rfe-copy{min-height:165px;padding:19px 0}.rfe-copy h3{font-size:26px;margin:9px 0}.rfe-copy p{font-size:12px;max-width:510px}.rfe-compare{padding-top:14px}.rfe-compare button{font-size:11px;min-height:40px}.rfe-compare>p{max-width:430px}.rfe-playback{margin-top:13px}.rfe-key{display:block;padding:18px 0}.rfe-key>span{display:block;margin-bottom:7px}.rfe-key p{font-size:11px}.rfe-detail-grid{grid-template-columns:1fr;gap:23px;padding:9px 0 17px}.rfe-detail-grid p,.rfe-joint-intro{font-size:11px}.rfe-details>summary,.rfe-joint-detail>summary{font-size:11px;padding-block:16px}.rfe-svg-small{font-size:15px}.rfe-svg-label{font-size:19px}.rfe-frame-label{font-size:23px}}@media(max-width:400px){.rfe-diagram{padding-inline:8px}.rfe-diagram-top,.rfe-diagram figcaption{margin-inline:5px}.rfe-diagram-top>span:last-child{display:none}.rfe-copy{min-height:190px}.rfe-copy h3{font-size:25px}.rfe-heading h2{font-size:30px}.rfe-controls{padding:15px}}@media(max-width:760px){.rfe-svg-small{font-size:28px}.rfe-svg-label,.rfe-frame-label{font-size:30px}.rfe-ridge .rfe-svg-small{transform:translateY(13px)}.rfe-ridge .rfe-svg-label{transform:translateY(-7px)}.rfe-compare button{min-height:44px}.rfe-loads,.rfe-ridge-halo,.rfe-reactions,.rfe-ridge-plate{transition:none}}@media(max-width:500px){.rfe-svg-small,.rfe-svg-label{font-size:40px}.rfe-frame-label{display:none}.rfe-supports>.rfe-svg-small{transform:translateY(20px)}.rfe-reactions>.rfe-svg-small{transform:translateY(-65px)}.rfe-reaction-leader{display:none}}