*{box-sizing:border-box}
.card{
    max-width:760px;
    margin:auto;
    padding:16px;
    background:#15151c;
    border:1px solid #2c2c39;
    border-radius:12px
}
h3{
    margin:0 0 6px;
    text-align:center
}
.note{margin:0 0 12px;color:#8790a2;font-size:.82rem;text-align:center}
canvas{display:block;width:100%;height:auto;background:#0b0b10;border:1px solid #30303e;border-radius:9px;touch-action:none;cursor:grab}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
label{display:grid;gap:6px;font-size:.82rem;font-weight:700}
label span{display:flex;justify-content:space-between}
output{font-family:monospace}
input{width:100%}
.readout{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px;color:#aeb6c6;font:700 .8rem monospace}
@media(max-width:600px){
  body{padding:7px}
  .card{padding:10px}
  .controls{grid-template-columns:1fr}
}