/* Area Calculator homepage
   Precision workbench: calm, tactile and intentionally tool-first. */
.home {
  --home-canvas:#f3f6f8;
  --home-surface:#ffffff;
  --home-surface-soft:#f7fafc;
  --home-surface-raised:#fbfdff;
  --home-ink:#162b3a;
  --home-muted:#5b6f7d;
  --home-faint:#83909a;
  --home-accent:#2563eb;
  --home-accent-hover:#1d4ed8;
  --home-accent-soft:#eef5ff;
  --home-rule:#dce4ea;
  --home-rule-strong:#c7d3dc;
  --home-shadow-soft:0 1px 2px rgba(27,52,70,.04),0 10px 30px rgba(27,52,70,.055);
  --home-shadow-control:none;
  --home-font-ui:"Segoe UI Variable Text","Segoe UI Variable","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --home-font-display:"Segoe UI Variable Display","Segoe UI Variable","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --home-font-mono:"Cascadia Mono",SFMono-Regular,"Roboto Mono",Consolas,monospace;
  color:var(--home-ink);
  background:var(--home-canvas);
  font-family:var(--home-font-ui);
  font-size:15px;
}

.home .container {max-width:1370px;padding-inline:32px}
.home .site-header {
  position:relative;
  border-bottom:1px solid var(--home-rule);
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 10px rgba(26,52,70,.035);
  backdrop-filter:saturate(140%) blur(12px);
}
.home .header-inner {min-height:66px;gap:28px}
.home .logo {display:inline-flex;align-items:center;gap:11px;color:#172d3f;font-size:19px;font-weight:760;letter-spacing:-.55px}
.home .brand-mark {display:grid;place-items:center;width:34px;height:34px;border:1px solid #b9cad5;border-radius:9px;background:#f8fbfd;box-shadow:var(--home-shadow-control);flex-shrink:0}
.home .brand-mark svg{width:23px;height:23px}
.home .nav{align-items:center;gap:30px}
.home .nav a{position:relative;padding:22px 0 19px;color:#3d5262;font-size:13px;font-weight:650}
.home .nav a:hover,.home .nav a:focus-visible{color:var(--home-accent);text-decoration:none}
.home .nav a:first-child:after,.home .nav a:hover:after,.home .nav a:focus-visible:after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--home-accent)}

.home .workspace-intro {display:grid;width:100%;max-width:none;grid-template-columns:1fr 1.08fr;align-items:end;gap:64px;padding:20px 0 14px;margin-inline:auto}
.home .kicker{margin:0 0 8px;color:#5f7483;font:700 10.5px/1.3 var(--home-font-mono);letter-spacing:.12em;text-transform:uppercase}
.home .workspace-intro h1{margin:0;color:#142d40;font-family:var(--home-font-display);font-size:clamp(38px,3.2vw,44px);font-weight:750;letter-spacing:-2px;line-height:1.05;text-wrap:balance}
.home .workspace-intro p:last-child{max-width:570px;margin:0 0 3px;padding-left:42px;border-left:1px solid var(--home-rule-strong);color:#405667;font-size:14px;line-height:1.58;text-wrap:pretty}

.home #calculator{scroll-margin-top:18px}
.home .tool-shell{width:100%;max-width:none;margin:0 auto 54px;overflow:hidden;border:1px solid var(--home-rule-strong);border-radius:16px;background:var(--home-surface);box-shadow:0 1px 2px rgba(29,52,68,.04),0 16px 42px rgba(29,52,68,.075)}
.home .tool-title{margin:0;color:#172b3b;font-size:16px;font-weight:700;letter-spacing:-.25px;line-height:1.25}
.home .tool-helper{max-width:250px;margin:0;color:#667987;font-size:12px;line-height:1.45;text-align:right}
.home .live-helper{display:inline-flex;align-items:center;gap:8px;color:#536b7c;font-size:12px;white-space:nowrap}
.home .status-dot{width:6px;height:6px;border-radius:50%;background:#3c806d;box-shadow:0 0 0 3px #e8f2ee}

.home .calculator-columns{display:grid;grid-template-columns:minmax(0,60fr) minmax(360px,40fr);align-items:start}
.home .input-side,.home .result-side{min-width:0}
.home .input-side{padding:18px 25px 20px;border-right:1px solid #e4ebf0;background:#fff}
.home .result-side{padding:20px;background:#f7fafc}
.home .workspace-section{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--home-rule)}
.home .shape-section,.home .unit-section{padding-bottom:9px;margin-bottom:9px}
.home .dimensions-section{padding-bottom:12px;margin-bottom:12px}
.home .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:9px}
.home .shape-section .section-head,.home .unit-section .section-head{margin-bottom:5px}
.home .section-head.compact{align-items:center}
.home .section-step{margin:0 0 3px;color:#607989;font:700 10px/1.25 var(--home-font-mono);letter-spacing:.1em;text-transform:uppercase}
.home .shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.home .shape-button{position:relative;display:flex;min-width:0;min-height:62px;align-items:center;justify-content:flex-start;gap:10px;padding:9px 12px;border:1px solid #dce5eb;border-radius:10px;background:var(--home-surface-raised);color:#526779;box-shadow:var(--home-shadow-control);text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.home .shape-button svg{width:20px;height:20px;flex:0 0 20px}
.home .shape-button svg g{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home .shape-copy{display:flex;min-width:0;max-width:none;flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.home .shape-name{max-width:100%;overflow:hidden;color:#243746;font-size:13px;font-weight:650;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.home .shape-formula{max-width:100%;overflow:hidden;color:#687b89;font:500 10.5px/1.2 var(--home-font-mono);text-overflow:ellipsis;white-space:nowrap}
.home .shape-button:hover{border-color:#9fb3c2;background:#fff;color:#264e69;box-shadow:none}
.home .shape-button:active{transform:translateY(1px)}
.home .shape-button[aria-pressed="true"]{border-color:#6a98eb;background:var(--home-accent-soft);color:var(--home-accent);box-shadow:0 0 0 1px rgba(37,99,235,.08),0 5px 14px rgba(37,99,235,.08)}
.home .shape-button[aria-pressed="true"] .shape-name{color:#1d4ed8}
.home .shape-button[aria-pressed="true"] .shape-formula{color:#526f86}
.home .shape-button:focus-visible{z-index:1;outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.home .more-shapes{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:3px;padding:4px 8px;border:0;border-top:1px solid var(--home-rule);background:transparent;color:#315d7c;font-size:11px;font-weight:720;text-align:left}
.home .more-shapes:hover{background:#f5f8fa}
.home .more-shapes:focus-visible{outline:3px solid rgba(36,111,166,.25);outline-offset:1px}
.home .more-shapes b{color:#778995;font:600 10px/1.3 var(--home-font-mono);letter-spacing:.04em;text-transform:uppercase}
.home .more-shapes-panel{padding-top:5px}
.home .more-shapes-panel[hidden]{display:none}
.home .unit-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.home .unit-button{display:flex;min-width:0;min-height:40px;align-items:center;justify-content:center;gap:5px;padding:5px;border:1px solid #d7e1e8;border-radius:8px;background:var(--home-surface-raised);color:#29475c;box-shadow:var(--home-shadow-control);transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.home .unit-button span{font:700 13px/1 var(--home-font-mono)}
.home .unit-button small{display:none}
.home .unit-button:hover{border-color:#9db1bd;background:#f6f9fa}
.home .unit-button:active{transform:translateY(1px)}
.home .unit-button[aria-checked="true"]{border-color:var(--home-accent);background:var(--home-accent);color:#fff;box-shadow:0 5px 12px rgba(37,99,235,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.home .unit-button[aria-checked="true"]:hover{border-color:var(--home-accent-hover);background:var(--home-accent-hover)}
.home .unit-button[aria-checked="true"] small{color:#316789}
.home .unit-button:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.home .method-section{padding-bottom:9px;margin-bottom:9px}
.home .method-options{display:flex;flex-wrap:wrap;gap:6px}
.home .method-button{min-height:40px;padding:7px 12px;border:1px solid #d7e1e8;border-radius:8px;background:var(--home-surface-raised);color:#40596b;box-shadow:var(--home-shadow-control);font-size:11.5px;font-weight:650}
.home .method-button:hover{border-color:#9db1bd;background:#f8fafc}
.home .method-button[aria-checked="true"]{border-color:#78a2eb;background:var(--home-accent-soft);color:#1d4ed8;box-shadow:0 0 0 1px rgba(37,99,235,.06)}
.home .method-button:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.home .mixed-unit-toggle{display:flex;align-items:center;gap:7px;margin-top:7px;color:#536b7c;font-size:11px}
.home .mixed-unit-toggle[hidden]{display:none}
.home .mixed-unit-toggle input,.home .cutout-toggle input{accent-color:var(--home-accent)}
.home .input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.home .input-grid:has(> .field:only-child){grid-template-columns:minmax(0,310px)}
.home .field{display:flex;flex-direction:column;gap:7px;color:#2e4657;font-size:13px;font-weight:680}
.home .field span{font-size:12px;font-weight:680}
.home .field input{width:100%;min-width:0;height:42px;padding:0 13px;border:1px solid #cbd7df;border-radius:9px;background:#fbfdff;color:#173248;box-shadow:inset 0 1px 2px rgba(28,55,72,.025),var(--home-shadow-control)}
.home .field input{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.home .field input:hover{border-color:#8ea5b4}
.home .field input:focus{border-color:var(--home-accent);background:#fff;outline:3px solid rgba(37,99,235,.11);outline-offset:0;box-shadow:0 4px 12px rgba(37,99,235,.07)}
.home .field input[aria-invalid="true"]{border-color:#b54a46;background:#fff9f8;outline-color:rgba(181,74,70,.13)}
.home .field select{width:100%;height:42px;padding:0 10px;border:1px solid #cbd7df;border-radius:9px;background:#fbfdff;color:#173248;box-shadow:var(--home-shadow-control);font:650 13px/1 var(--home-font-ui)}
.home .field select:hover{border-color:#8ea5b4}
.home .field select:focus{border-color:var(--home-accent);background:#fff;outline:3px solid rgba(37,99,235,.11);outline-offset:0}
.home .mixed-inputs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.home .mixed-inputs label{position:relative;display:block}
.home .mixed-inputs input{padding-right:28px}
.home .mixed-inputs small{position:absolute;right:9px;top:50%;color:#728592;font:650 10px/1 var(--home-font-mono);transform:translateY(-50%)}
.home .error{min-height:19px;margin:5px 0 0;color:#a33834;font-size:11.5px;font-weight:650;line-height:1.45}
.home .visual{position:relative;display:flex;height:136px;align-items:center;justify-content:center;margin-top:9px;border:1px solid #dce6eb;border-radius:6px;background:#fff}
.home .visual svg{width:min(100%,330px);height:128px}
.home .visual svg .preview-shape{fill:#dcebf4;stroke:#216492;stroke-width:2.7}
.home .visual svg .dimension-guide{fill:none;stroke:#8e6d57;stroke-width:1.4;stroke-dasharray:4 3}
.home .visual svg .dimension-text{fill:#233f52;font-family:var(--home-font-mono);font-size:10px;font-weight:650}
.home .measurement-tip{padding:10px 12px;margin:-2px 0 10px;border:1px solid #d9e7ee;border-radius:9px;background:#f4f8fa}
.home .tip-copy{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:start}
.home .measurement-tip h2{margin:0;color:#315a74;font-size:11px;font-weight:760;letter-spacing:.03em;text-transform:uppercase}
.home .measurement-tip p{margin:0;color:#536a78;font-size:11px;line-height:1.4}
.home .diagram-disclosure{margin-top:7px;padding-top:7px;border-top:1px solid #d7e5ec}
.home .diagram-disclosure[hidden]{display:none}
.home .diagram-disclosure summary{display:flex;min-height:30px;align-items:center;justify-content:space-between;gap:12px;color:#245e83;font-size:11px;font-weight:720;cursor:pointer;list-style:none}
.home .diagram-disclosure summary::-webkit-details-marker{display:none}
.home .diagram-disclosure summary:after{content:"+";color:#607989;font:700 14px/1 var(--home-font-mono)}
.home .diagram-disclosure[open] summary:after{content:"−"}
.home .diagram-disclosure summary small{margin-left:auto;color:#758895;font-size:10px;font-weight:500}
.home .diagram-disclosure summary:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
.home .cutout-section{padding-bottom:10px;margin-bottom:10px}
.home .cutout-toggle{display:flex;align-items:center;gap:9px;color:#28475d;font-size:12px}
.home .cutout-toggle span{display:flex;flex-direction:column;gap:1px}
.home .cutout-toggle small{color:#768895;font-size:10.5px;font-weight:500}
.home .cutout-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:10px 12px;margin-top:8px;border:1px solid #dbe4ea;border-radius:7px;background:#f8fafc}
.home .cutout-fields[hidden]{display:none}
.home .cutout-fields p{grid-column:1/-1;margin:0;color:#6a7c89;font-size:10.5px}
.home .input-foot{display:flex;align-items:center;justify-content:space-between;gap:20px}
.home .input-foot .btn{min-height:36px}
.home .reset-note{max-width:340px;margin:0;color:#75858f;font-size:10.5px;line-height:1.45}
.home .btn{min-height:40px;padding:8px 14px;border:1px solid #c5d1d9;border-radius:9px;background:#fff;color:#234762;box-shadow:var(--home-shadow-control);font-size:12px;font-weight:700;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.home .btn:hover{border-color:#8da3b1;background:#f8fafb;box-shadow:none;filter:none}
.home .btn:active{transform:translateY(1px)}
.home .btn:disabled{cursor:not-allowed;opacity:.45}
.home .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.home .result-summary{padding:23px 24px 22px;border:1px solid #cfe0eb;border-radius:12px;background:#edf6fb;box-shadow:0 8px 22px rgba(35,86,119,.07)}
.home .result-kicker{margin:0 0 4px;color:#547489;font:750 10px/1.35 var(--home-font-mono);letter-spacing:.1em;text-transform:uppercase}
.home .copy-result{min-width:100px}
.home .result-number{margin:10px 0 7px;color:#1c669b;font-size:clamp(40px,3.7vw,56px);font-weight:780;letter-spacing:-2.2px;line-height:1.05;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.home .result-number.is-error{max-width:360px;color:#8d3e3a;font-size:clamp(25px,2.6vw,36px);letter-spacing:-1px}
.home .result-expression{margin:0;color:#26465d;font:650 12px/1.55 var(--home-font-mono);overflow-wrap:anywhere}
.home .exact-line{margin:7px 0 0;color:#557184;font-size:11px;line-height:1.45}
.home .exact-line[hidden]{display:none}
.home .exact-line strong{margin-left:6px;color:#245f8c;font:700 11.5px/1.45 var(--home-font-mono)}
.home .area-breakdown{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:10px;margin-top:10px;border-top:1px solid #cbdde8;color:#557184;font-size:11px}
.home .area-breakdown[hidden]{display:none}
.home .area-breakdown b{color:#23465e;font-variant-numeric:tabular-nums}
.home .precision-control{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;color:#557184;font-size:11px;font-weight:650}
.home .precision-control select{height:30px;padding:0 28px 0 9px;border:1px solid #b9c9d4;border-radius:6px;background:#fff;color:#23465e;font:650 11px/1 var(--home-font-ui)}
.home .result-section{padding:21px 5px;border-bottom:1px solid var(--home-rule)}
.home .result-section:last-child{border-bottom:0}
.home .steps{border-top:0;background:transparent}
.home .result-section-title{margin:0 0 10px;color:#233e51;font-size:15px;font-weight:760;letter-spacing:-.15px}
.home .result-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.home .result-section-head span{color:#82909a;font-size:10px;font-weight:650;text-transform:uppercase}
.home .steps-summary{margin:0;color:#4f6979;font-size:12px;line-height:1.55}
.home .inline-disclosure{margin-top:10px}
.home .inline-disclosure>summary{display:flex;min-height:38px;align-items:center;gap:8px;color:#245f8c;font-size:11.5px;font-weight:720;cursor:pointer;list-style:none}
.home .inline-disclosure>summary::-webkit-details-marker{display:none}
.home .inline-disclosure>summary:after{content:"+";margin-left:auto;color:#6f8290;font:700 14px/1 var(--home-font-mono)}
.home .inline-disclosure[open]>summary:after{content:"−"}
.home .inline-disclosure>summary:focus-visible,.home details.result-section>summary:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:3px}
.home .calculation-steps{margin:0}
.home .calculation-steps div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid #e1e7ea}
.home .calculation-steps div:last-child{border-bottom:0}
.home .calculation-steps dt{color:#6d7f8a;font-size:10px;font-weight:720;text-transform:uppercase}
.home .calculation-steps dd{min-width:0;margin:0;color:#23465e;font:650 11.5px/1.5 var(--home-font-mono);overflow-wrap:anywhere}
.home .calculation-steps div:last-child dd{color:#17608f;font-weight:760}
.home .additional-measurements{margin:10px 0 0}
.home .additional-measurements div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid var(--home-rule)}
.home .additional-measurements div:last-child{border-bottom:0}
.home .additional-measurements dt{color:#6d7f8a;font-size:11px}
.home .additional-measurements dd{max-width:62%;margin:0;color:#203b4e;font:650 11.5px/1.45 var(--home-font-mono);text-align:right;overflow-wrap:anywhere}
.home details.result-section[hidden]{display:none}
.home details.result-section>summary{display:flex;min-height:38px;align-items:center;margin:0;color:#233e51;cursor:pointer;list-style:none}
.home details.result-section>summary::-webkit-details-marker{display:none}
.home details.result-section>summary:after{content:"+";margin-left:auto;color:#6d7f8a;font:700 14px/1 var(--home-font-mono)}
.home details.result-section[open]>summary:after{content:"−"}
.home .result-conversions{display:block;margin:0;border-top:1px solid #d7e1e8}
.home .conversion{display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:18px;padding:9px 1px;border:0;border-bottom:1px solid #e0e7ec;border-radius:0;background:transparent;box-shadow:none}
.home .conversion-name{color:#586e7c;font-size:12px}
.home .conversion-name small{margin-left:4px;color:#87949c;font:600 10px/1 var(--home-font-mono)}
.home .conversion-value{max-width:58%;color:#203b4e;font-size:13px;font-weight:750;line-height:1.45;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.home .more-units{margin-top:6px}
.home .more-units[open]{margin-top:8px}
.home .more-units .result-conversions{margin-top:4px}
.home .settings-section .precision-control{border-top:1px solid var(--home-rule)}

/* Reference content stays quiet so the calculator remains the page's visual anchor. */
.home .section{padding:50px 0;border-top:1px solid #e1e7eb}
.home .section h2{margin:0 0 12px;color:#1b3446;font-family:var(--home-font-display);font-size:clamp(25px,2.6vw,32px);font-weight:740;letter-spacing:-.9px;line-height:1.2}
.home .section-lede{max-width:820px;margin:0 0 27px;color:#5a6f7c;font-size:14px;line-height:1.7}
.home .card{border:1px solid #dfe6eb;border-radius:11px;background:#fff;box-shadow:none}
.home .card:hover{border-color:#c3d0d7}
.home .card h3{color:#223d4f}
.home .card p{color:#586c79}
.home .formula{border-radius:5px;background:#eaf1f5;color:#20598f;font-family:var(--home-font-mono)}
.home .eyebrow{border-radius:4px;background:#edf2f4;color:#426177}
.home #how-to .numbered{gap:0;border-top:1px solid #dce4e8;border-bottom:1px solid #dce4e8;background:#fff}
.home #how-to .numbered .card{padding:24px 28px;border:0;border-right:1px solid #e1e7eb;border-radius:0}
.home #how-to .numbered .card:last-child{border-right:0}
.home #how-to .numbered .num{display:inline-flex;width:auto;height:auto;padding:0;border-radius:0;background:transparent;color:#597287;font:700 16px/1 var(--home-font-mono)}
.home #how-to .numbered h3{margin:8px 0;font-size:17px}
.home #formulas .card-grid{gap:0;border-top:1px solid #dae4e9}
.home #formulas .card{padding:22px 22px 21px 0;border:0;border-bottom:1px solid #dae4e9;border-radius:0;background:transparent}
.home #formulas .card h3{margin:0 0 12px}
.home #formulas .card p{margin:11px 0;font-size:13px}
.home #formulas .link-btn{padding:0;color:#245e9b;font-size:12px;font-weight:750}
.home #concepts .wide-card{padding:25px 29px;border:1px solid #dbe3e6;border-radius:8px;background:#eef2f3}
.home #concepts .wide-card h3{margin-top:0}
.home #units .data-table{overflow:hidden;border:1px solid #dce4e8;border-radius:7px;background:#fff}
.home #units .data-table th{background:#edf2f4;color:#334c5f;font-size:12px}
.home #units .data-table td{font-size:13px}
.home #examples .card{min-height:223px;padding:25px}
.home #examples .card .eyebrow{padding:0;background:none;font:700 10px/1.4 var(--home-font-mono);letter-spacing:.08em}
.home #guides .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;border-top:1px solid #dfe6e8}
.home #guides .blog-card{padding:18px 0;border:0;border-bottom:1px solid #dfe6e8;border-radius:0;background:transparent}
.home #guides .blog-card h3{margin:3px 0 7px;font-size:16px}
.home #guides .blog-card p{font-size:13px}
.home .faq details{margin:0;padding:19px 4px;border:0;border-bottom:1px solid #dce4e8;border-radius:0;background:transparent}
.home .faq details:first-of-type{border-top:1px solid #dce4e8}
.home .faq summary{color:#284052;font-size:14px}
.home .faq p{max-width:850px;font-size:13px}
.home .footer{margin-top:0;background:#1c3040}
.home .footer-grid{align-items:flex-start}
.home .back-to-top{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:8px;padding:0 13px;border:1px solid #506a7a;border-radius:8px;color:#e5edf2;font-size:12px;font-weight:700;white-space:nowrap;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.home .back-to-top svg{width:16px;height:16px}
.home .back-to-top:hover,.home .back-to-top:focus-visible{border-color:#8aa5b5;background:#273f4f;color:#fff;text-decoration:none;transform:translateY(-1px)}

@media(max-width:1100px){
  .home .shape-button{gap:6px;padding-inline:6px}
  .home .shape-button svg{width:20px;height:20px;flex-basis:20px}
  .home .shape-copy{max-width:none}
  .home .shape-name{font-size:12px}
  .home .shape-formula{font-size:10px}
}

@media(max-width:980px){
  .home .workspace-intro{grid-template-columns:1fr;gap:13px;padding:28px 0 24px}
  .home .workspace-intro p:last-child{max-width:760px;padding:0;border-left:0}
  .home .input-side{padding-inline:21px}
  .home .result-summary{padding-inline:21px}
  .home .result-section{padding-inline:5px}
  .home .shape-button{min-height:62px}
  .home .shape-name{font-size:12px}
  .home .unit-button{gap:4px}
}

@media(max-width:800px){
  .home .calculator-columns{grid-template-columns:1fr}
  .home .input-side{border-right:0}
  .home .result-side{padding:0;border-top:1px solid var(--home-rule)}
  .home .result-summary{border-width:0 0 1px;border-radius:0;box-shadow:none}
  .home .result-section{padding-inline:20px}
  .home .shape-button{gap:9px;padding-inline:11px}
  .home .shape-button svg{width:20px;height:20px;flex-basis:20px}
  .home .shape-copy{max-width:none}
  .home .shape-name{font-size:13px}
  .home .shape-formula{font-size:10.5px}
}

@media(max-width:700px){
  .home .container{padding-inline:16px}
  .home .header-inner{min-height:60px}
  .home .logo{gap:8px;font-size:17px}
  .home .brand-mark{width:31px;height:31px}
  .home .nav{gap:15px}
  .home .nav a{padding:20px 0 17px;font-size:12px}
  .home .nav a:nth-child(2),.home .nav a:nth-child(3){display:none}
  .home .back-to-top{margin-top:18px}
  .home .workspace-intro{padding:24px 0 19px}
  .home .workspace-intro h1{font-size:37px;letter-spacing:-1.6px}
  .home .workspace-intro p:last-child{font-size:13px}
  .home .tool-shell{margin-bottom:38px;border-radius:7px}
  .home .input-side{padding:18px 15px 20px}
  .home .workspace-section{padding-bottom:16px;margin-bottom:16px}
  .home .section-head{align-items:flex-start;gap:12px}
  .home .tool-helper{font-size:11px}
  .home .shapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .home .shape-button{min-height:68px;padding:7px 8px}
  .home .shape-button svg{width:20px;height:20px}
  .home .shape-name{font-size:12.5px}
  .home .shape-formula{font-size:10px}
  .home .unit-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .home .unit-button{min-height:42px;padding-inline:4px}
  .home .unit-button small{display:none}
  .home .method-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .method-button{width:100%}
  .home .field input,.home .field select,.home .unit-button,.home .method-button{min-height:44px}
  .home .inline-disclosure>summary,.home details.result-section>summary,.home .diagram-disclosure summary{min-height:44px}
  .home .cutout-fields{grid-template-columns:1fr}
  .home .cutout-fields p{grid-column:1}
  .home .panel-head{margin-bottom:14px}
  .home .input-grid{gap:10px}
  .home .tip-copy{grid-template-columns:1fr;gap:5px}
  .home .input-foot{align-items:flex-start;flex-direction:column}
  .home .result-summary{padding:20px 16px}
  .home .result-section{padding:20px 16px}
  .home .result-number{font-size:41px;letter-spacing:-1.5px}
  .home .visual{height:140px}
  .home .visual svg{height:132px}
  .home .section{padding:36px 0}
  .home #how-to .numbered .card{padding:19px 12px;border-right:0;border-bottom:1px solid #e1e7eb}
  .home #how-to .numbered .card:last-child{border-bottom:0}
  .home #formulas .card{padding-right:0}
  .home #guides .card-grid{grid-template-columns:1fr}
  .home #concepts .wide-card{padding:19px}
}

@media(max-width:360px){
  .home .shape-button{min-height:82px;flex-direction:column;gap:4px;padding:7px 6px;text-align:center}
  .home .shape-button svg{width:22px;height:22px;flex-basis:22px}
  .home .shape-copy{max-width:100%;align-items:center;gap:1px}
}

@media(max-width:400px){
  .home .tool-helper{max-width:130px;text-align:right}
  .home .live-helper{max-width:145px;justify-content:flex-end;text-align:right;white-space:normal}
  .home .method-options{grid-template-columns:1fr}
  .home .input-grid{grid-template-columns:1fr}
  .home .result-number{font-size:35px}
  .home .panel-head{align-items:flex-start;flex-direction:column}
  .home .copy-result{min-width:0}
  .home .calculation-steps div{grid-template-columns:1fr;gap:3px}
  .home .conversion{gap:9px}
  .home .conversion-value{font-size:12px}
}

@media(prefers-reduced-motion:reduce){.home *{scroll-behavior:auto!important;transition:none!important}}