.roof-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:40px;margin-bottom:30px}.roof-heading h2{font-size:clamp(32px,4.5vw,54px);text-transform:uppercase}.roof-heading>p{color:var(--dim);max-width:45ch;margin:0}.roof-explorer{display:grid;grid-template-columns:minmax(0,1fr) 310px;border:1px solid #c6beb0;background:#f4f1e9}.roof-canvas{position:relative;min-width:0;align-self:center;padding:18px;background:radial-gradient(ellipse at 50% 50%,#fffdf7,#e5e1d7)}.drawing-label{position:absolute;top:20px;left:20px;font:10px ui-monospace,monospace;letter-spacing:.1em;color:#6e6454}.roof-model{width:100%;height:auto;display:block;overflow:visible}.assembly-layer{transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1)}.roof-canvas .roof-model{max-height:510px}.roof-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:-18px;position:relative;z-index:2}.roof-toolbar .btn{font-size:10px;padding:10px 12px;background:#f7f3ea;color:#332a1b;border:1px solid #91816a}.roof-toolbar .btn:hover,.roof-toolbar .btn[aria-pressed=true]{background:#332a1b;color:#fff}.roof-progress{text-align:center;font:10px ui-monospace,monospace;color:#73654f;margin:12px 0 2px}.roof-controls{background:#fdfbf7;border-left:1px solid #c6beb0;padding:24px}.layer-list{display:grid;gap:0}.layer-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 0;border:0;border-bottom:1px solid #ded7cc;background:none;color:#4b4438;font:600 13px Arial,sans-serif;cursor:pointer}.layer-list button span{font:10px ui-monospace,monospace;color:#b25727}.layer-list button[aria-pressed=true]{color:#af4317;border-bottom-color:#be511f;background:#f7eee0;padding-left:9px}.layer-list button:hover{color:#af4317}.layer-explanation{margin-top:20px;min-height:135px}.layer-explanation h3{font-size:17px;margin-bottom:10px}.layer-explanation p{font-size:13px;color:#645b4e;margin:0}.roof-reset{border:0;background:none;padding:12px 0 0;font-size:11px;color:#554631;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.roof-footnote{font-size:11px;line-height:1.6;color:#6e685e;max-width:95ch;margin-top:18px}.roof-footnote a{text-decoration:underline}.roof-experience{padding-top:20px!important}.assembly-layer.is-muted{opacity:.07}.assembly-layer.is-hidden{opacity:0;transform:translateY(-20px)}.is-exploded .assembly-layer{transform:translateY(calc(var(--layer) * -11px))}.is-exploded .assembly-layer.is-hidden{transform:translateY(calc(var(--layer) * -11px - 20px))}.roof-stage .assembly-layer{transition:opacity .4s,transform .5s}.roof-stage .assembly-layer.is-hidden{opacity:0;transform:translateY(-20px)}
@media(max-width:900px){.roof-explorer{grid-template-columns:minmax(0,1fr) 270px}.roof-controls{padding:18px}.layer-list button{font-size:12px}.roof-heading{gap:24px}}
@media(max-width:650px){.roof-heading{grid-template-columns:1fr;gap:15px}.roof-explorer{grid-template-columns:1fr}.roof-controls{border-left:0;border-top:1px solid #c6beb0}.roof-canvas{padding:10px}.roof-canvas .roof-model{max-height:360px}.roof-toolbar{margin-top:0;gap:6px}.roof-toolbar .btn{font-size:9px;padding:9px}.roof-controls>.eyebrow{margin-bottom:8px}.layer-list{grid-template-columns:1fr 1fr;gap:0 12px}.layer-list button{gap:7px;font-size:11px;min-height:44px}.layer-explanation{min-height:0;margin-top:18px}.roof-footnote{font-size:10px}.drawing-label{font-size:8px;top:14px;left:14px}}
@media(prefers-reduced-motion:reduce){.assembly-layer{transition:none!important}}
.is-exploded .assembly-layer{transform:translateY(calc(var(--layer) * var(--roof-separation,11px) * -1))}