.layout-lab{border-top:1px solid var(--line);padding-top:32px;margin:32px 0 48px;scroll-margin-top:24px}.layout-lab h2{font-size:clamp(28px,3vw,42px);line-height:1.15;max-width:850px}.layout-lab header>p{max-width:850px}.layout-workspace{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:28px;margin-top:24px}.layout-controls{display:grid;align-content:start;gap:14px;padding:20px;background:var(--paper,#f5f4ef);border:1px solid var(--line);border-radius:8px}.layout-controls label,.reference-pane>label,.inspection-panes label{display:grid;gap:6px;font-size:14px;font-weight:600;min-width:0}.layout-controls select,.layout-controls input,.reference-pane select,.inspection-panes select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #8c9696;border-radius:4px;background:#fff;color:#26393c;font:inherit}.layout-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.layout-controls [data-bar-field]{display:grid;gap:12px}.layout-hint,.layout-caveat{font-size:13px;line-height:1.6;color:#525e61}.layout-summary{font-weight:700;font-size:19px;min-height:48px}.layout-error{color:#a13c25;background:#fff2e9;padding:14px;border-left:3px solid #a13c25}.layout-result{min-width:0}.layout-result svg{width:100%;max-height:520px;background:#fff;border:1px solid var(--line);border-radius:8px}.layout-products{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.layout-products a{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;border:1px solid var(--line);padding:10px;overflow-wrap:anywhere}.layout-products img{width:62px;height:72px;object-fit:contain;background:white;flex:none}.layout-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.layout-caveat{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.layout-controls [hidden],[data-layout-workspace][hidden],[data-material-compare][hidden]{display:none}.layout-controls .text-link{border:0;background:none;cursor:pointer;text-align:left;padding:6px}.photo-inspection-link{margin:12px 0}.detail-inspector{box-sizing:border-box;width:min(1120px,94vw);max-height:92vh;padding:24px;border:1px solid #768488;border-radius:12px;color:#233b40;background:#fff;overflow:auto}.detail-inspector::backdrop{background:#102126b8}.detail-inspector header{display:flex;align-items:center;justify-content:space-between;gap:16px}.detail-inspector h2{font-size:26px;margin:0}.detail-inspector header button{padding:10px 18px;border:1px solid #637579;background:white;border-radius:4px;cursor:pointer}.inspection-panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.inspection-panes section{min-width:0;display:grid;gap:14px}.inspection-panes input[type=range]{width:100%;accent-color:#286d61}.inspection-panes output{font-size:13px}.inspection-viewport{height:390px;overflow:auto;border:1px solid #cdd3d1;background:#fafafa}.inspection-viewport img{display:block;max-width:none;height:auto;object-fit:contain}.material-compare{margin:24px 0;padding:20px;background:#f7f6f1;border:1px solid var(--line);border-radius:8px}.material-compare summary{cursor:pointer;font-weight:700;font-size:19px}.reference-panes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.reference-pane{min-width:0}.reference-pane figure{margin:14px 0}.reference-pane img{display:block;width:100%;height:210px;object-fit:contain;background:white;border:1px solid var(--line)}.reference-pane figcaption{font-size:14px;margin-top:8px}.reference-pane a{font-size:14px;overflow-wrap:anywhere}.material-compare>p{font-size:14px;line-height:1.6}.layout-lab :focus-visible,.detail-inspector :focus-visible,.material-compare :focus-visible{outline:3px solid #227a6b;outline-offset:3px}
@media(max-width:850px){.layout-workspace{grid-template-columns:1fr}.layout-controls{grid-template-columns:1fr 1fr}.layout-controls>.layout-pair,.layout-controls>[data-bar-field],.layout-controls>.layout-hint{grid-column:1/-1}.layout-products{grid-template-columns:1fr}.inspection-viewport{height:280px}}
@media(max-width:520px){.layout-controls{grid-template-columns:1fr;padding:14px}.layout-workspace{gap:18px}.layout-controls label{font-size:13px}.reference-panes,.inspection-panes{grid-template-columns:1fr}.detail-inspector{padding:16px}.detail-inspector h2{font-size:21px}.reference-pane img{height:180px}.layout-result svg{min-height:210px}.material-compare{padding:14px}}

.size-comparison{margin:28px 0;padding:24px;border:1px solid var(--line);background:#faf9f5}.size-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.size-comparison-grid article{min-width:0;padding:14px;background:#fff;border:1px solid var(--line)}.size-comparison h3{font-size:18px;min-height:48px}.size-comparison-panels{display:grid;grid-template-columns:1fr 1fr}.size-comparison-panels svg{width:100%;height:auto}.size-comparison-grid article>p{font-size:14px}@media(max-width:700px){.size-comparison{padding:14px}.size-comparison-grid{grid-template-columns:1fr}.size-comparison h3{min-height:0}}
.inspection-viewport img{margin:0 auto}.reference-pane>label{margin-bottom:12px}.reference-pane input{width:100%;min-width:0;box-sizing:border-box;padding:10px;border:1px solid #8c9696;border-radius:4px;font:inherit;background:white;color:#26393c}.reference-pane>[role=status]{display:block;font-size:13px;margin-top:8px}.reference-pane [hidden]{display:none}
@supports(grid-template-rows:subgrid){.size-comparison-grid article{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}}