* { box-sizing: border-box; }
    html, body { height:100%; width:100%; margin:0; overflow:hidden; }
  body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; display:flex; height:100vh; width:100vw; overscroll-behavior: none; }
    #left { flex:1 1 0; min-width:0; background:#fafafa; display:flex; flex-direction:column; }
    #canvasWrap { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:12px; }
    canvas { background:#fff; border:1px solid #ddd; touch-action: none; max-width:100%; max-height:100%; }
    #controls { width:clamp(240px, 28vw, 420px); min-width:240px; height:100vh; padding:16px; box-shadow:-4px 0 8px rgba(0,0,0,0.03); background:#fff; overflow:auto; word-break:break-word; }
    .btn { display:inline-block; padding:8px 12px; margin:6px 6px 6px 0; border-radius:6px; background:#007bff; color:#fff; cursor:pointer; user-select:none; }
    .btn.secondary { background:#6c757d; }
    /* Equal-size toolbar for Transforms buttons */
    .trans-toolbar { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:8px; align-items:stretch; }
    .trans-toolbar .btn { width:100%; margin:0; display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:normal; line-height:1.2; padding:8px 10px; min-height:36px; }
  label { display:block; margin-top:10px; font-size:14px; color:#333; }
    input[type=range] { width:100%; }
    .small { font-size:12px; color:#666; }
    hr { border:none; border-top:1px solid #eee; margin:12px 0; }