:root{
  --gravel:#aaa9a2;
  --gravel-light:#b9b8b1;
  --ink:#222826;
  --muted:rgba(34,40,38,.7);
  --line:rgba(34,40,38,.25);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background-color:var(--gravel);
  color:var(--ink);
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background-image:
    radial-gradient(circle at 16% 22%,rgba(255,255,255,.18) 0 1px,transparent 1.8px),
    radial-gradient(circle at 78% 34%,rgba(28,32,30,.12) 0 1.2px,transparent 2px),
    radial-gradient(circle at 42% 78%,rgba(255,255,255,.12) 0 1.5px,transparent 2.4px),
    linear-gradient(135deg,var(--gravel-light),var(--gravel));
  background-size:23px 21px,31px 29px,41px 37px,100% 100%;
}

.page{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:32px;
}

.calculator{
  width:min(780px,100%);
  text-align:center;
  transform:translateY(-3vh);
}

h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,7vw,5rem);
  letter-spacing:-.06em;
  line-height:1;
}

.intro{
  margin:10px 0 29px;
  color:var(--muted);
  font-size:1rem;
}

.measurement-bar{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.91);
  box-shadow:0 4px 16px rgba(34,40,38,.13);
  backdrop-filter:blur(3px);
}

.measurement-bar label{
  padding:12px 25px;
  text-align:left;
  font-size:.9rem;
  font-weight:700;
}

.measurement-bar label+label{border-left:1px solid var(--line)}

label span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:400;
}

input,select{
  display:block;
  width:100%;
  margin-top:3px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:700 1.2rem Arial,Helvetica,sans-serif;
}

input:focus-visible,select:focus-visible,summary:focus-visible,.reset:focus-visible{
  outline:3px solid rgba(34,40,38,.42);
  outline-offset:3px;
  border-radius:4px;
}

details{margin-top:15px}

summary{
  display:inline-block;
  cursor:pointer;
  font-size:.9rem;
  text-decoration:underline;
  text-underline-offset:3px;
}

.advanced-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.58);
  text-align:left;
  backdrop-filter:blur(3px);
}

.advanced-grid label{
  min-width:0;
  font-size:.83rem;
  font-weight:700;
}

.advanced-grid input,.advanced-grid select{
  height:38px;
  margin-top:5px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.78);
  font-size:1rem;
}

.answer{margin-top:25px}

.answer p{
  margin:0;
  font-size:1.08rem;
  line-height:1.55;
}

.answer strong{font-size:1.25rem}
.answer span{padding:0 9px}

.answer .bag-answer{
  margin-top:1px;
  color:var(--muted);
  font-size:.92rem;
}

.answer .bag-answer strong{
  color:var(--ink);
  font-size:1rem;
}

.estimate-note{
  max-width:610px;
  margin:12px auto 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.45;
}

.reset{
  margin-top:14px;
  padding:0;
  border:0;
  border-bottom:1px solid currentColor;
  background:none;
  color:var(--ink);
  font:inherit;
  font-size:.8rem;
  cursor:pointer;
  opacity:.72;
}

@media(max-width:650px){
  .page{padding:24px}
  .calculator{transform:translateY(-2vh)}
  h1{font-size:3.15rem}
  .intro{margin-bottom:24px}
  .measurement-bar{border-radius:15px}
  .measurement-bar label{padding:12px 15px}
}

@media(max-width:520px){
  .page{align-items:start;padding-top:13vh}
  .calculator{transform:none}
  .measurement-bar{grid-template-columns:1fr}
  .measurement-bar label+label{
    border-top:1px solid var(--line);
    border-left:0;
  }
  .advanced-grid{grid-template-columns:1fr}
  .answer p:first-child{display:flex;flex-direction:column;align-items:center}
  .answer span{height:.35rem;color:transparent}
}

@media(prefers-reduced-transparency:reduce){
  .measurement-bar,.advanced-grid{backdrop-filter:none}
}