:root{color-scheme:light;--ink:#263e46;--muted:#596b6e;--line:#cbd4d1;--paper:#fff;--wash:#f1f4f1;--wood:#926236;--blue:#2c6774;--red:#a0543e;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.6}
*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:0 auto;padding:44px 42px 72px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.25rem,4.4vw,4.1rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 18px;font-weight:500}h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.65rem,2.5vw,2.35rem);line-height:1.2;margin:0 0 16px;font-weight:500;letter-spacing:-.018em}p{margin:0 0 17px}.intro{font-size:1.12rem;line-height:1.75;margin-bottom:26px}a{color:var(--blue);text-underline-offset:4px}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:4px;padding:9px 14px;min-height:44px;background:white;color:var(--ink);font-size:.875rem;line-height:1.3;font-weight:600}button:hover{background:#eaf0ed;border-color:#68857e}button:disabled{cursor:default;background:#e4ebe7;color:#486254;border-color:transparent}button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #b27b36;outline-offset:3px}button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;vertical-align:middle;margin-right:7px}input[type=number]{width:100%;height:47px;border:1px solid #98aaa6;border-radius:4px;background:#fff;padding:9px 13px;font-size:1.1rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:27px;accent-color:var(--blue);cursor:pointer;margin:9px 0 0}input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}[hidden]{display:none!important}img,svg{max-width:100%}output{font-variant-numeric:tabular-nums}.topic-nav{border-block:1px solid var(--line);margin-bottom:30px}.topic-nav summary{display:none}.topic-nav nav{display:flex;flex-wrap:wrap;gap:0 27px;padding:6px 0}.topic-nav a{padding:9px 0;text-decoration:none;font-size:.86rem;font-weight:600}.topic-nav a:hover{text-decoration:underline}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start;scroll-margin-top:20px}.input-column{background:var(--wash);border:1px solid var(--line);border-top:4px solid var(--wood);padding:22px}.input-heading h2{font-size:1.6rem;margin-bottom:16px}.unit-switch,.segmented{display:flex}.unit-switch{gap:5px}.unit-switch button{flex:1;padding:7px;font-size:.78rem}.unit-explanation{font-size:.76rem;color:var(--muted);margin:10px 0 23px}.field{margin:17px 0}.field label{font-size:.85rem;line-height:1.4;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;font-weight:600}.field label>span{font-size:.75rem;color:var(--muted);font-weight:400;white-space:nowrap}.field p{font-size:.75rem;line-height:1.6;margin:7px 0 0;color:var(--muted)}fieldset{border:0;border-top:1px solid var(--line);padding:18px 0 0;margin:22px 0 0;min-width:0}legend{font-size:.95rem;font-weight:700;padding:0 8px 0 0}.segmented{gap:5px;margin-bottom:6px}.segmented button{font-size:.75rem;flex:1;padding:8px 5px}.construction-settings{border-block:1px solid var(--line);padding:10px 0;margin-top:22px}.construction-settings summary{padding:3px 0;cursor:pointer;font-weight:600;font-size:.88rem;min-height:32px}.reset-inputs{background:transparent;width:100%;margin-top:16px}.error:empty{display:none}.error{color:#a53828;font-size:.83rem;margin-top:15px}.invalid [aria-invalid=true]{border:2px solid #a53828}.model-column{min-width:0}.model-studio{border:1px solid #a8b9b4;background:#fff;scroll-margin-top:20px}.view-tabs{display:flex;flex-wrap:wrap;padding:12px;gap:5px;border-bottom:1px solid var(--line)}.view-tabs button{padding:8px 12px;border:0;border-radius:3px;font-size:.79rem}.view-tabs button[aria-pressed=true]{background:#e3ece8;color:#214b43;box-shadow:inset 0 -2px #426d60}.viewport{height:540px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fff 25%,#f0f2ed 100%)}.viewport canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}.viewport canvas:active{cursor:grabbing}.fallback{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;padding:28px}.ready .fallback{display:none}.drag-hint{position:absolute;bottom:12px;left:18px;font-size:.7rem;color:#52696a;z-index:2;pointer-events:none;background:#ffffffe6;padding:4px 7px;border-radius:3px}.dimension-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.view-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:9px;padding:12px 16px;border-block:1px solid var(--line);background:#fafbf9}.view-toolbar>div{display:flex;gap:6px}.view-toolbar button{min-height:38px;font-size:.75rem;padding:8px 11px}.labels-toggle{display:flex;align-items:center;gap:7px;font-size:.78rem;min-height:38px;cursor:pointer}.view-caption{font-size:.77rem;color:var(--muted);padding:13px 18px;margin:0;border-bottom:1px solid var(--line)}[data-view-status]:empty{display:none}[data-view-status]{font-size:.8rem;color:#975137;padding:10px 18px;margin:0}.main-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 18px 18px;gap:12px}.result>span{display:block;font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.055em;margin-bottom:6px}.result strong{display:block;font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1.15;letter-spacing:-.035em;color:var(--ink);overflow-wrap:anywhere}.result small{display:block;color:var(--muted);font-size:.72rem;margin-top:8px}.main-results .result{border-left:3px solid var(--blue);padding-left:13px}.main-results .result:first-child{border-color:var(--red)}.main-results .result:last-child{border-color:var(--wood)}.count-results{display:flex;justify-content:space-between;gap:12px;padding:15px 21px;background:var(--ink);color:white;font-size:.86rem}.count-results p{margin:0}.count-results span{margin:0 9px;color:#b9c9c8}.count-results strong{font-size:1.12rem}.stringer-summary{display:flex;align-items:center;gap:25px;border-bottom:2px solid #cdbb9f;padding:23px 0 20px}.stringer-summary>div{flex:0 0 220px}.stringer-summary span{display:block;font-size:.78rem;color:var(--wood);font-weight:700}.stringer-summary strong{display:block;font-size:2.2rem;letter-spacing:-.035em;line-height:1.5}.stringer-summary p{font-size:.8rem;color:var(--muted);margin:0}.layout-note{font-size:.86rem;margin:20px 0 5px}.riser-note{font-size:.8rem;color:#39664d;margin:0}.riser-note[data-tone=warn]{color:#a25236}.result-actions{display:flex;gap:8px;margin-top:18px}.scope-note{border-left:3px solid #c6ad83;margin:30px 0 0;padding:12px 18px;background:#f7f4ed;color:#665d4c;font-size:.83rem;line-height:1.7}.section{margin-top:62px;padding-top:32px;border-top:1px solid var(--line);scroll-margin-top:24px}.section-heading p{margin-bottom:24px;color:var(--muted)}.table-scroll{overflow:auto;border:1px solid var(--line)}table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:660px;text-align:left}caption{text-align:left;padding:14px 18px;font-size:.82rem;color:var(--muted);background:#fafbf9}th,td{padding:17px 18px;border-top:1px solid var(--line);white-space:nowrap}thead{background:#e7ede9;color:#36554e;font-size:.78rem}tbody th{font-weight:600}tbody th span{display:block;font-size:.66rem;color:#557666;text-transform:uppercase;letter-spacing:.05em}.selected{background:#f0f5f1}td button{font-size:.77rem;min-height:38px}.elevation{background:#f5f7f3;border:1px solid var(--line);padding:15px 23px}.elevation svg{display:block;width:100%;height:auto}.drawing-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 26px}.formula-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-block:1px solid var(--line);padding:22px 0;margin-bottom:18px}.formula-strip span{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px}.formula-strip strong{font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:400}.small{font-size:.81rem;color:var(--muted)}.stringer-section{display:grid;grid-template-columns:1fr 1fr;gap:28px 55px;border-top:3px solid #ad8c63}.bridge-equation{background:#f6f1e8;border-left:4px solid var(--wood);padding:22px 25px;margin:24px 0}.bridge-equation>span{font-size:.78rem;color:#78603f;display:block}.bridge-equation>strong{font-size:2rem;font-weight:400;font-family:Georgia,serif}.bridge-equation p{font-size:.92rem;margin:6px 0 0}.stringer-ledger{margin:0;align-self:center}.stringer-ledger>div{padding:25px 0;border-bottom:1px solid #d2c7b5}.stringer-ledger dt{font-size:.9rem}.stringer-ledger dt span{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}.stringer-ledger dd{font-size:2rem;margin:6px 0 0;font-weight:600;color:#78582f}.stringer-note{grid-column:1/-1;margin:0}.headroom-section>p{color:var(--muted)}.headroom-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px}.headroom-inputs{border:1px solid var(--line);padding:5px 20px 22px;background:#f5f7f5}.headroom-results>div:first-child{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0}.headroom-results .result strong{font-size:clamp(1.4rem,2.5vw,2.3rem)}.headroom-results p{font-size:.82rem}.headroom-results [data-headroom-note]{border-block:1px solid var(--line);padding:12px 0;margin:3px 0 13px}.headroom-results [data-elevation]{background:#f5f7f3}.headroom-section>.small{margin:20px 0 0}.materials-section{display:grid;grid-template-columns:1fr 1fr;gap:48px}.tread-formula{border-block:1px solid var(--line);margin:22px 0;padding:15px 0;display:flex;justify-content:space-between;gap:15px;align-items:center}.tread-formula strong{font-family:Georgia,serif;font-weight:400;font-size:1.25rem}.tread-formula span{font-weight:600;white-space:nowrap}.material-example{font-size:.9rem;margin:20px 0 0;color:var(--wood)}dl{margin:0}.materials-ledger{padding:24px 28px;background:var(--wash)}.materials-ledger dl>div{display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 0}.materials-ledger dt{font-size:.84rem}.materials-ledger dd{font-weight:600;white-space:nowrap;margin:0}.materials-ledger p{font-size:.77rem;color:var(--muted);margin:18px 0 0}.questions details{border-bottom:1px solid var(--line)}.questions summary{font-size:1rem;padding:17px 0;cursor:pointer;font-weight:600}.questions details p{margin-bottom:24px;color:var(--muted)}.featured{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:center;background:#f5f3ec;padding:32px;border:1px solid #d2c9ba}.featured figure{margin:0;border:1px solid #d2c9ba}.featured img{display:block;width:100%;height:auto}.featured p{color:var(--muted)}.pin{display:inline-block;background:#ac2334;color:white;padding:8px 20px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.85rem;min-height:40px}.pin:hover{background:#851f2d}.image-open{font-size:.85rem;margin-left:20px}.explode-control{padding:16px 20px;background:#f1ede5;border-top:1px solid #d5c9b5}.explode-control label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:600}.explode-control>div{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}.model-studio:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;overflow:auto;border:0;padding:0 max(12px,calc((100vw - 1400px)/2));background:#fff}.model-studio:fullscreen .viewport{flex:1;min-height:230px;height:auto}.model-studio:fullscreen .main-results{padding:12px 18px}.model-studio:fullscreen .count-results{padding:10px 21px}.model-studio:fullscreen .view-caption{padding:7px 18px}.model-studio:fullscreen .result strong{font-size:1.7rem}
@media(min-width:1550px){.viewport{height:580px}}
@media(max-width:1050px){main{padding:30px 24px 60px}.workspace{grid-template-columns:270px minmax(0,1fr);gap:20px}.input-column{padding:18px}.viewport{height:450px}.main-results{gap:10px;padding:18px 12px}.main-results .result{padding-left:9px}.result>span{font-size:.65rem}.stringer-summary{gap:16px}.stringer-summary>div{flex-basis:190px}.stringer-summary strong{font-size:1.9rem}.view-toolbar{padding:9px}.stringer-section{gap:25px}.headroom-layout{gap:22px;grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:760px){main{padding:25px 16px 42px}h1{font-size:2.5rem;line-height:1.13;letter-spacing:-.025em}.intro{font-size:1rem;line-height:1.65;margin-bottom:22px}.topic-nav{border:1px solid #b8c9c1;border-radius:5px;background:#f5f8f4;margin-bottom:22px}.topic-nav summary{display:list-item;padding:15px 17px;cursor:pointer;font-size:.85rem;font-weight:700}.topic-nav nav{display:grid;padding:0 12px 12px;gap:0}.topic-nav a{padding:12px 9px;border-top:1px solid #d2ded8;font-size:.86rem;min-height:45px}.workspace{display:flex;flex-direction:column;gap:20px}.input-column,.model-column{width:100%}.input-column{order:1;padding:20px}.model-column{display:contents}.model-studio{order:0;width:100%}.stringer-summary{order:2;margin-top:0;width:100%;padding:8px 0 20px}.layout-note,.riser-note,.result-actions{order:3;width:100%;margin:0}.riser-note{margin-top:-16px}.input-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.input-heading h2{margin:0;font-size:1.55rem}.unit-switch button{font-size:.73rem;padding:7px 9px}.unit-explanation{margin:12px 0 20px}.field{margin:18px 0}.field label{font-size:.91rem}.field p{font-size:.8rem}.segmented button{font-size:.82rem}.viewport{height:370px}.view-tabs{gap:4px;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.view-tabs button{font-size:.73rem;min-height:41px;padding:8px 3px}.view-toolbar{gap:6px;padding:8px}.view-toolbar button{font-size:.69rem;min-height:40px;padding:8px 9px}.labels-toggle{font-size:.72rem}.view-caption{font-size:.75rem;padding:11px 13px}.main-results{gap:7px;padding:20px 12px}.main-results .result{padding-left:8px}.result>span{font-size:.62rem;letter-spacing:.025em}.result strong{font-size:1.65rem}.result small{font-size:.63rem}.count-results{padding:12px 15px;font-size:.78rem}.count-results strong{font-size:1rem}.stringer-summary>div{flex-basis:185px}.stringer-summary p{font-size:.75rem}.scope-note{margin-top:28px;padding:13px;font-size:.8rem}.section{margin-top:38px;padding-top:24px}h2{font-size:1.8rem}.section-heading p,.section>p{font-size:.93rem}.section-heading p{margin-bottom:20px}table{min-width:625px;font-size:.8rem}th,td{padding:13px}caption{font-size:.76rem;padding:12px}.formula-strip{grid-template-columns:1fr 1fr;gap:18px;padding:18px 0}.formula-strip strong{font-size:1.15rem}.formula-strip span{font-size:.73rem}.elevation{overflow:auto;padding:8px}.elevation svg{min-width:580px}.drawing-actions button{font-size:.78rem}.stringer-section{grid-template-columns:1fr;gap:10px}.stringer-ledger{margin-top:10px}.stringer-ledger>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}.stringer-ledger dd{font-size:1.65rem;margin:0}.stringer-ledger dt{font-size:.84rem}.stringer-note{margin-top:13px}.headroom-layout{grid-template-columns:1fr;gap:14px}.headroom-results>div:first-child{gap:15px}.headroom-results [data-elevation]{overflow:auto}.headroom-results svg{min-width:540px}.materials-section{grid-template-columns:1fr;gap:24px}.materials-ledger{padding:16px 20px}.featured{grid-template-columns:125px minmax(0,1fr);gap:22px;padding:20px 16px}.featured h2{font-size:1.4rem}.featured p{font-size:.83rem}.featured .image-open{display:block;font-size:.75rem;margin:12px 0 0}.questions summary{font-size:.92rem}.questions details p{font-size:.9rem}.model-studio:fullscreen .viewport{min-height:150px}.model-studio:fullscreen .view-caption{display:none}}
@media(max-width:400px){main{padding-inline:12px}h1{font-size:2.2rem}.viewport{height:330px}.view-toolbar{flex-direction:column;align-items:stretch}.view-toolbar>div{display:grid;grid-template-columns:1fr 1fr}.labels-toggle{justify-content:center;min-height:30px}.result strong{font-size:1.43rem}.stringer-summary{flex-direction:column;align-items:start;gap:5px}.stringer-summary>div{flex-basis:auto}.input-heading{display:block}.input-heading h2{margin-bottom:12px}.featured{grid-template-columns:105px minmax(0,1fr);gap:14px}.featured h2{font-size:1.2rem}.featured p{font-size:.75rem}.tread-formula{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{main{padding:0;max-width:none}h1{font-size:30pt}.intro{font-size:10pt}.topic-nav,.input-column,.view-tabs,.viewport,.view-toolbar,.view-caption,.result-actions,.featured,.drawing-actions,.questions,button,.headroom-inputs,.explode-control,[data-view-status]{display:none!important}.workspace,.headroom-layout{display:block}.model-column{display:block}.model-studio{border:1px solid #aaa}.section{margin-top:20px;padding-top:16px;break-inside:avoid}h2{font-size:19pt}.section p,.scope-note{font-size:9pt}.main-results .result strong{font-size:20pt}.elevation svg{min-width:0}.elevation{padding:0}.count-results{color:#222;background:#eee}.stringer-summary{padding:10px 0}.stringer-section,.materials-section{gap:22px}.headroom-results svg{min-width:0}table{font-size:9pt;min-width:0}.table-scroll{overflow:visible}.stringer-summary p{font-size:9pt}}