*{box-sizing:border-box}html,body{margin:0;padding:0;background:#0a0a0a;color:#e9e9e9;font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
header{padding:12px 16px;border-bottom:1px solid #222}
h1{margin:0;font-size:18px;font-weight:700}
.sub{margin:4px 0 0;color:#aaa;font-size:12px}
main{padding:12px;display:grid;grid-template-columns:1fr;gap:12px}
.canvas-wrap{width:100%;display:flex;justify-content:center;align-items:center}
#view{width:100%;max-width: min(90vw, 900px);border:1px solid #333;background:#000;touch-action:none}
.controls{background:#111;border:1px solid #222;border-radius:12px;padding:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
label{display:flex;align-items:center;gap:8px}
input[type=range]{width:140px}
button{background:#1f1f1f;color:#e9e9e9;border:1px solid #333;border-radius:10px;padding:8px 12px;cursor:pointer}
button:hover{background:#2a2a2a}
details{border-top:1px dashed #222;padding-top:10px;margin-top:8px}
footer{padding:8px 12px;border-top:1px solid #222;color:#888;font-size:12px}
.hint{color:#9ac8ff;font-size:12px;margin:6px 0 0}


/* --- square wrapper to keep 1:1 on all devices --- */
.canvas-square{
  position: relative;
  width: 100%;
  max-width: min(90vw, 900px);
  margin: 0 auto;
}
.canvas-square::before{
  content:"";
  display:block;
  padding-top:100%; /* keep perfect square */
}

/* canvas fits in the square (no aspect-ratio reliance) */
#view{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
}