:root{
  --sheet:#e7edf1;
  --white:#fbfdfe;
  --ink:#10323f;
  --line:#b9ccd6;
  --line2:#8aa8b6;
  --blue:#0b5d72;
  --orange:#e2622c;
  --green:#2f7d5c;
  --grey:#5d7682;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--sheet);
  background-image:
    linear-gradient(rgba(138,168,182,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,168,182,.22) 1px,transparent 1px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
}
.sheet{max-width:1140px;margin:0 auto;padding:0 18px}
a{color:var(--blue)}

.titleblock{
  background:var(--white);
  border:2px solid var(--ink);
  margin:22px 0 0;
}
.titleblock .inner{padding:22px}
.stamp{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 12px;
}
h1{margin:0;line-height:1.22}
h1 .nm{
  display:block;
  font-size:clamp(30px,8vw,52px);
  font-weight:800;
  letter-spacing:.02em;
  color:var(--blue);
}
h1 .dsc{
  display:block;
  font-size:clamp(14px,3.3vw,19px);
  font-weight:500;
  color:var(--grey);
  margin-top:8px;
}
.statement{
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:16px;
  font-size:14.5px;
  line-height:1.85;
  color:#2b4b57;
}
.statement b{color:var(--ink)}

h2{
  font-size:clamp(19px,4.4vw,25px);
  margin:0 0 6px;
  font-weight:800;
}
h2 .idx{font-family:var(--mono);font-size:12px;color:var(--orange);letter-spacing:.14em;display:block}
.cap{color:var(--grey);font-size:14.5px;margin:0 0 20px}
section{padding:38px 0 0}

.sheetbox{background:var(--white);border:1px solid var(--line2)}
.sheetbox > .pad{padding:20px}

.layout{display:grid;gap:0}
@media(min-width:960px){.layout{grid-template-columns:330px 1fr}}
.inputs{border-bottom:1px solid var(--line2);padding:20px}
@media(min-width:960px){.inputs{border-bottom:none;border-right:1px solid var(--line2)}}
.viz{padding:20px}

.fld{margin-bottom:16px}
.fld:last-child{margin-bottom:0}
.fld label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:6px;
}
.fld .with{display:flex;align-items:stretch;border:1px solid var(--line2);background:#fff}
.fld input[type=number]{
  flex:1;
  min-width:0;
  border:0;
  padding:10px 11px;
  font-family:var(--mono);
  font-size:18px;
  color:var(--blue);
  background:transparent;
}
.fld .suffix{
  display:flex;
  align-items:center;
  padding:0 11px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--grey);
  border-left:1px solid var(--line);
  background:#f2f6f8;
}
.fld select{
  width:100%;
  border:1px solid var(--line2);
  background:#fff;
  padding:10px 11px;
  font-size:15px;
  font-family:var(--body);
  color:var(--ink);
}
.fld input[type=number]:focus,.fld select:focus{outline:2px solid var(--orange);outline-offset:1px}

.plan{border:1px solid var(--line);background:#f4f8fa}
.plan svg{display:block;width:100%;height:auto}
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--grey);
  margin-top:10px;
}
.legend i{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:3px}

.dims{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:18px;
}
@media(min-width:520px){.dims{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.dims{grid-template-columns:repeat(4,1fr)}}
.dim{background:#fff;padding:12px 13px}
.dim .lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--grey);text-transform:uppercase}
.dim .vl{font-family:var(--mono);font-size:21px;color:var(--blue);font-weight:700;line-height:1.3}
.dim .nt{font-size:12px;color:var(--grey);line-height:1.5}

.rows{margin-top:18px;border:1px solid var(--line)}
.rline{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 14px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  background:#fff;
}
.rline:last-child{border-bottom:none}
.rline .nm2{font-size:14.5px}
.rline .nm2 small{display:block;color:var(--grey);font-size:12.5px;line-height:1.5}
.rline .vv{font-family:var(--mono);font-size:17px;color:var(--ink);white-space:nowrap}
.rline.pick{background:#eef6f2}
.rline.pick .vv{color:var(--green);font-weight:700}

.alerts{margin-top:18px;display:grid;gap:9px}
.alert{
  border-left:5px solid var(--green);
  background:#eef6f2;
  padding:11px 14px;
  font-size:14px;
}
.alert.bad{border-left-color:var(--orange);background:#fdefe7}

.inverse{display:grid;gap:18px}
@media(min-width:760px){.inverse{grid-template-columns:280px 1fr}}
.sizelist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sizeitem{background:#fff;padding:13px 15px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline}
.sizeitem .who{font-size:14.5px}
.sizeitem .who small{display:block;color:var(--grey);font-size:12.5px}
.sizeitem .inch{font-family:var(--mono);font-size:20px;color:var(--orange);font-weight:700;white-space:nowrap}

table.res{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line)}
table.res th,table.res td{border:1px solid var(--line);padding:9px 11px;text-align:left}
table.res thead th{background:#eef3f6;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
table.res td.num{font-family:var(--mono);color:var(--blue);text-align:right;white-space:nowrap}
.tbw{overflow-x:auto}

.notes{display:grid;gap:14px}
@media(min-width:800px){.notes{grid-template-columns:1fr 1fr}}
.note{background:var(--white);border:1px solid var(--line2);padding:17px 18px}
.note h3{margin:0 0 7px;font-size:16.5px;color:var(--blue)}
.note p{margin:0 0 10px;font-size:14.5px}
.note p:last-child{margin-bottom:0}

footer{margin-top:50px;background:var(--white);border-top:2px solid var(--ink)}
footer .sheet{padding-top:22px;padding-bottom:34px}
footer p{margin:0 0 10px;font-size:13.5px;color:var(--grey)}

.lost{padding:50px 0 10px}
.lost .fourofour{
  font-family:var(--mono);
  font-size:clamp(54px,18vw,112px);
  color:var(--orange);
  line-height:1;
  margin:0 0 10px;
}
.lost p{max-width:58ch}
.back{
  display:inline-block;
  margin-top:18px;
  border:2px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  padding:10px 22px;
  font-family:var(--mono);
  font-size:14px;
}