.sample-page{max-width:1240px;padding-block:24px 70px}.sample-page h1{font-size:clamp(28px,4vw,44px);line-height:1.15}.sample-page h2{font-size:24px}.sample-page small,.sample-document small{display:block;font-size:13px;line-height:1.4;color:#526477}.sample-page button,.sample-page input,.sample-page select,.sample-page textarea{font:inherit}.sample-page button{cursor:pointer;min-height:42px}.sample-page button:focus-visible,.sample-page input:focus-visible,.sample-page select:focus-visible,.sample-page summary:focus-visible,.sample-dim:focus-visible{outline:3px solid #e79a2e;outline-offset:3px}.sample-shapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:18px 0}.sample-shapes button{border:1px solid #bccbd8;background:#fff;border-radius:8px;padding:8px;color:#193a55}.sample-shapes button[aria-pressed=true]{border:2px solid #136788;background:#e9f5f8}.sample-shapes svg{height:60px;display:block;width:100%}.sample-shapes text,.sample-shapes .sample-dim{display:none}.sample-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:start}.sample-diagram-panel{position:sticky;top:15px;border:1px solid #ccd8e1;border-radius:12px;padding:15px;background:#f8fbfd}.sample-canvas{overflow:auto}.sample-canvas svg{width:100%;min-width:320px;height:auto;color:#254a63}.sample-metal{fill:#edf2f6}.sample-dim{color:#49697c;cursor:pointer}.sample-dim text{fill:currentColor;stroke:none;font:14px system-ui;text-anchor:middle}.sample-dim.active{color:#b84800;stroke-width:3}.sample-caliper{stroke:#b84800;stroke-width:5}.sample-canvas svg text:not(.sample-dim text){fill:#526477;stroke:none;font:13px system-ui;text-anchor:middle}.sample-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.sample-actions button,.sample-page summary{padding:9px 12px}.sample-form{display:grid;gap:14px}.sample-form label{display:grid;gap:5px}.sample-form input:not([type=checkbox]),.sample-form select,.sample-form textarea{width:100%;padding:9px;border:1px solid #a8b9c8;border-radius:5px;background:white;color:#193448}.sample-field{border-bottom:1px solid #d8e1e8;padding:10px 0}.sample-pair{display:grid;grid-template-columns:1fr 125px;gap:10px}.sample-field:focus-within{background:#f1f8fb}.sample-field details{font-size:14px}.sample-field details label{display:flex;align-items:center}.sample-error{color:#a22b14;min-height:1px}.sample-note{background:#eff5f8;border-left:3px solid #2a7599;padding:12px;line-height:1.5}.sample-features{display:grid;gap:12px;margin:14px 0}.sample-results{margin-top:25px}.sample-family{border:1px solid #bfcfdc;border-radius:9px;padding:14px;margin:16px 0}.sample-result{padding:15px 0;border-top:1px solid #d8e1e8}.sample-result h4{margin:0 0 8px;font-size:18px}.sample-result table,.sample-document table{width:100%;border-collapse:collapse;font-size:14px}.sample-result th,.sample-result td,.sample-document th,.sample-document td{padding:8px;border:1px solid #c9d6de;text-align:left;vertical-align:top;overflow-wrap:anywhere}.sample-table{overflow:auto}.sample-badge{display:inline-block;padding:4px 8px;border-radius:5px;background:#edf4f8}.sample-badge.different{background:#fff0e5;color:#813600}.sample-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sample-compare section{border:1px solid #bfd0db;padding:12px}.sample-compare svg{width:100%;height:auto;color:#35556b}.sample-compare dt{font-weight:bold;margin-top:8px}.sample-compare dd{margin:0}.sample-document{padding:22px;max-width:1000px;margin:20px auto;background:white;border:1px solid #bacbd6;color:#152f43}.sample-document h1{font-size:28px}.sample-document figure{margin:15px auto;max-width:600px}.sample-document svg{width:100%;height:auto;color:#294a62}.sample-document svg text{fill:currentColor;stroke:none;font:13px system-ui;text-anchor:middle}.sample-document pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.5 system-ui}.sample-document figcaption{font-size:12px}.sample-page dialog{max-width:min(1000px,95vw);max-height:90vh;overflow:auto;border:1px solid #8ba1b5;border-radius:10px}.sample-page dialog svg{min-width:600px}.sample-context{padding:15px;margin:15px 0;border:2px solid #56849a;background:#f4f9fb}.sample-context summary{cursor:pointer}.sample-context pre{white-space:pre-wrap;overflow-wrap:anywhere}.sample-print{display:none}.sample-page [hidden]{display:none!important}
@media(max-width:760px){.sample-layout{grid-template-columns:1fr}.sample-diagram-panel{position:static}.sample-compare{grid-template-columns:1fr}.sample-shapes{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-pair{grid-template-columns:minmax(0,1fr) 110px}.sample-page{padding-inline:14px}.sample-result th,.sample-result td{min-width:125px}.sample-page dialog svg{min-width:440px}}
@media print{@page{size:A4;margin:12mm}body.sample-printing>*{display:none!important}body.sample-printing main{display:block!important}body.sample-printing main>*{display:none!important}body.sample-printing .sample-page{display:block!important;max-width:none;padding:0}body.sample-printing .sample-page>*{display:none!important}body.sample-printing .sample-page>.sample-print{display:block!important}.sample-document{border:0;padding:0;margin:0;font-size:10pt}.sample-document h1{font-size:20pt}.sample-document h2{font-size:15pt}.sample-document table{font-size:9pt}.sample-document th,.sample-document td{padding:4px}.sample-document figure{max-width:145mm;break-inside:avoid}.sample-document tr,.sample-document h2{break-inside:avoid}.sample-document thead{display:table-header-group}.sample-context{display:none!important}.sample-document pre{font-size:9pt}.sample-dim{outline:0}.sample-document svg{max-height:95mm}}
@media(prefers-reduced-motion:reduce){.sample-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}