:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #112a4b;
  background: #fff;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.masthead { display: grid; place-items: center; min-height: 104px; padding: 20px 24px; border-bottom: 1px solid #e9e5e1; }
.logo { width: clamp(174px, 20vw, 246px); height: auto; display: block; }
.hero { display: grid; justify-items: center; align-content: center; text-align: center; padding: clamp(54px, 9vh, 112px) 22px; background: #faf8f5; }
h1 { margin: 0; font-size: clamp(2.8rem, 6.25vw, 6.1rem); letter-spacing: -.061em; font-weight: 740; line-height: 1.01; text-wrap: balance; }
.intro { margin: 23px 0 0; color: #4a5260; max-width: 50ch; font-size: clamp(1.06rem, 1.5vw, 1.23rem); line-height: 1.6; text-wrap: pretty; }
.figure { width: min(100%, 560px); margin-block: clamp(28px, 5vh, 50px) clamp(24px, 4vh, 39px); }
.figure svg { display: block; width: 100%; height: auto; }
.figure path { stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.guide { fill: none; stroke: #d3c7bd; stroke-width: 1; stroke-dasharray: 3 5; }
.tool { fill: #f0eeeb; stroke: #243f5f; stroke-width: 1.6; }
.workpiece { fill: none; stroke: #d5570d; stroke-width: 2.4; }
.status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .94rem; font-weight: 600; line-height: 1.5; color: #273d54; }
.status::before { content: ""; width: 7px; height: 7px; background: #d5570d; transform: rotate(45deg); }
.footer { padding: 24px; text-align: center; color: #4d5765; border-top: 1px solid #e9e5e1; font-size: .78rem; letter-spacing: .08em; }
@media (max-width: 600px) {
  .masthead { min-height: 80px; }
  .hero { padding-block: 58px; }
  h1 { max-width: 9ch; }
  .intro { margin-top: 18px; }
  .figure { width: min(100%, 400px); }
}