@font-face{font-family:"Fredoka";src:url("fonts/Fredoka-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

#viewport{height:clamp(360px,70vh,780px)}
#name,#title{
  font-family:"Fredoka",Arial,sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:.06em;
  text-transform:uppercase;
  width:100%;
  padding:12px 14px;
  margin-top:6px;
}
.check-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin:4px 0 8px;
}
.check-label input{
  width:18px;
  height:18px;
  margin-top:3px;
  flex-shrink:0;
  accent-color:#193f2d;
}
#titleBlock{margin:12px 0 4px}
.name-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.name-row small{font-weight:500;color:#5a7061}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.examples button{width:auto;padding:8px 12px;font-size:14px}
#letterReadout{font-weight:600}
.preview-hole{fill:#dce8d9;stroke:#193f2d;stroke-width:.35}
#empty p{margin:0 0 10px}
.stl-note{margin-top:8px}
#download3mf{width:100%;margin-top:10px}
.range-field output{font-weight:700;margin-left:6px}
input[type=range]{width:100%;margin-top:6px}