@font-face{
  font-family:BiaVariable;
  src:url("../assets/fonts/Bia-Variable.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --black:#080808;
  --line:#cfcfcf;
  --muted:#777;
  --paper:#fff;
}

*{box-sizing:border-box}

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

body{
  font-family:Arial,Helvetica,sans-serif;
}

.lab{
  min-height:100vh;
  padding:28px 5.35vw 32px;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.back{
  color:inherit;
  text-decoration:none;
}

.back:hover{text-decoration:underline;text-underline-offset:4px}

.label{color:var(--muted)}

.stage{
  flex:1;
  min-height:68vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1.5px solid var(--black);
  padding:60px 0;
}

.word{
  width:100%;
  text-align:center;
  font-family:BiaVariable,sans-serif;
  font-size:clamp(76px,15vw,240px);
  line-height:.82;
  letter-spacing:-.065em;
  font-variation-settings:
    "SERF" 0,
    "CNTR" 0,
    "wght" 450,
    "wdth" 75,
    "ital" 0;
  outline:none;
  white-space:nowrap;
  overflow:visible;
  cursor:text;
  user-select:text;
}

.word:focus{outline:none}

.controls{
  padding:18px 0 0;
}

.control-head,
.control-row,
.axis-readout{
  display:flex;
  align-items:center;
  gap:18px;
}

.control-head{
  justify-content:space-between;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
}

#status{color:var(--muted);font-weight:400}

.control-row{
  margin-top:16px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
}

.control-row label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
}

.size-control{
  min-width:min(340px, 100%);
}

button{
  border:1px solid #aaa;
  background:#fff;
  color:#080808;
  padding:8px 12px;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}

button:hover,
button:focus-visible{
  background:#080808;
  color:#fff;
  border-color:#080808;
}

input[type=range]{
  width:min(260px,34vw);
  accent-color:#080808;
}

output{
  color:var(--muted);
  min-width:30px;
}

.font-meta{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:9px;
  letter-spacing:.07em;
  color:var(--muted);
}

.axis-readout{
  margin-top:12px;
  flex-wrap:wrap;
  font-size:9px;
  letter-spacing:.07em;
  color:var(--muted);
}

.axis-readout span{white-space:nowrap}
.axis-readout b{color:var(--black);font-weight:600}

.hint{
  margin:10px 0 0;
  font-size:10px;
  color:var(--muted);
}

@media(max-width:700px){
  .lab{padding:18px 5vw 24px}
  .stage{min-height:62vh;padding:40px 0}
  .word{
    font-size:clamp(58px,19vw,150px);
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .control-row{gap:12px}
  input[type=range]{width:180px}
}