:root{font-family:Inter,Arial,sans-serif;color:#173633;background:#f5f6f1;--green:#175f4b}*{box-sizing:border-box}body{margin:0}header{max-width:1220px;margin:auto;padding:28px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2d9}.brand{font-size:32px;font-weight:800;text-decoration:none;color:#173633;letter-spacing:-1.5px}.brand span{color:#37926a}.brand small{display:block;letter-spacing:1px;font-size:10px;margin-top:5px;font-weight:400}.badge{padding:8px 12px;border:1px solid #ced8ca;border-radius:30px;font-size:12px}main{max-width:1220px;margin:auto;padding:42px 40px}.intro{margin-bottom:34px}.eyebrow{font-size:11px;letter-spacing:2px;color:#42806a;font-weight:bold}h1{font-size:48px;line-height:1.06;letter-spacing:-2px;margin:14px 0}p{line-height:1.6}.intro>p:last-child{color:#60736a;max-width:540px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px}form,.preview{border-radius:22px;padding:30px;background:white;border:1px solid #e2e8dd}h2{font-size:21px;margin:0 0 26px}.ends{display:grid;grid-template-columns:1fr 1fr;gap:18px}fieldset{padding:0;border:0;min-width:0}legend{font-weight:bold;margin-bottom:16px;font-size:14px}label{display:block;font-size:12px;color:#536960;margin-bottom:8px}input,select{display:block;width:100%;padding:12px;margin:8px 0 16px;border:1px solid #cfdacf;border-radius:9px;background:#fafcf8;color:#173633;font-size:14px}input:focus,select:focus{outline:2px solid #69af89;outline-offset:1px}.preset,.note{font-size:12px;color:#718075}.preset{background:#f3f6ee;padding:12px;border-radius:10px}button{border:0;background:var(--green);color:white;border-radius:10px;width:100%;padding:16px;font-weight:bold;cursor:pointer}button span{float:right}button:disabled{opacity:.55;cursor:wait}.secondary{background:#e1efe6;color:var(--green)}[hidden]{display:none!important}#status{font-size:13px;margin-bottom:0}.preview{background:#eaf0e4}.preview-top{display:flex;justify-content:space-between;font-size:11px;gap:12px}.preview svg{width:100%;height:330px}.measurements{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{padding:12px;background:#f8faf5;border-radius:10px}.metric small{display:block;color:#748278;font-size:10px;margin-bottom:7px}.metric strong{font-size:14px}.note{margin-top:20px}footer{max-width:1220px;margin:auto;padding:20px 40px;color:#6f8277;font-size:12px}@media(max-width:850px){.workspace{grid-template-columns:1fr}main,header{padding:24px}h1{font-size:38px}.preview-top{flex-wrap:wrap}}@media(max-width:420px){form,.preview{padding:20px}.ends{grid-template-columns:1fr}.measurements{grid-template-columns:1fr}.preview svg{height:280px}}

/* Cutaway preview: geometry and numbered explanations stay legible on small screens. */
.preview{background:#f3f6fa;min-width:0}.preview svg{display:block;width:100%;height:auto;min-height:260px;max-height:470px}.preview-intro{font-size:13px;color:#526980;margin:18px 0 0}.view-controls{display:flex;align-items:center;gap:18px;margin:0 0 24px;padding:12px 16px;background:#e8eef5;border-radius:12px}.view-controls label{flex:1;margin:0;color:#2c4b68;font-size:12px}.view-controls input{padding:0;margin:12px 0 0;accent-color:#245e91;background:transparent;cursor:ew-resize}.view-controls button{width:auto;flex-shrink:0;padding:10px 12px;background:white;color:#244d74;border:1px solid #c4d2e0;font-size:11px}.annotations{display:grid;gap:14px}.annotation{display:flex;gap:12px;padding:14px;background:white;border:1px solid #e0e6ee;border-radius:12px}.annotation-number{width:26px;height:26px;border-radius:50%;background:#173f65;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;flex-shrink:0}.annotation h3{font-size:14px;line-height:1.4;margin:2px 0 6px;color:#18344e}.annotation p{margin:0;font-size:12px;line-height:1.65;color:#536a7f}.all-measurements{margin-top:18px;font-size:12px;color:#244d74}.all-measurements summary{cursor:pointer;padding:8px 0}.all-measurements .measurements{margin-top:8px}.preview .note{color:#536a7f}@media(max-width:420px){.view-controls{padding:12px;gap:8px}.annotation{padding:12px}.preview svg{min-height:220px}.view-controls button{font-size:10px;padding:9px}}

.section-controls{padding:16px;margin-top:16px;background:white;border:1px solid #e0e6ee;border-radius:12px}.section-controls label{color:#244d74;font-size:12px}.section-controls select{margin-bottom:12px}.section-controls input[type=range]{padding:0;margin:12px 0;accent-color:#245e91}.section-controls p{font-size:12px;margin:6px 0 0;color:#536a7f}.section-explanation{border-color:#d2ae77;background:#fffcf6}

.workspace{align-items:start}.workspace>form{position:sticky;top:20px}.annotations{grid-template-columns:repeat(2,minmax(0,1fr))}.section-explanation{grid-column:1/-1}@media(max-width:850px){.workspace>form{position:static}}@media(max-width:550px){.annotations{grid-template-columns:1fr}}

.production-picker{margin:18px 0;padding:16px;background:#f3f6fa;border:1px solid #dce4ee;border-radius:12px}.production-picker legend{padding:0 6px}.production-picker p{font-size:12px;color:#536a7f;margin:4px 0}.production-picker .catalog-note{font-size:11px}.production-picker select{margin-bottom:8px}