body {
      font-family: system-ui, sans-serif;
      background:#111;
      color:#eee;
      margin:0;
      padding:20px;
    }
    .wrap {
      max-width:900px;
      margin:0 auto;
    }
    h1 {
      font-size:1.4rem;
      margin-bottom:0.5rem;
    }
    label {
      display:block;
      margin:0.5rem 0 0.25rem;
      font-size:0.9rem;
    }
    input[type="file"],
    input[type="range"] {
      width:100%;
    }
    .row {
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      margin-top:20px;
    }
    .col {
      flex:1 1 260px;
      min-width:0;
    }
    .preview-box {
      background:#B1976B;
      border:1px solid #333;
      padding:10px;
      border-radius:8px;
    }
    canvas, img {
      max-width:100%;
      height:auto;
      display:block;
      background:transparent;
    }
    .controls {
      margin-top:10px;
      font-size:0.85rem;
    }
    .btn {
      margin-top:10px;
      padding:8px 14px;
      border-radius:6px;
      border:none;
      background:#0d6efd;
      color:#fff;
      font-size:0.9rem;
      cursor:pointer;
    }
    .btn:disabled {
      opacity:0.4;
      cursor:default;
    }
    .hint {
      font-size:0.8rem;
      color:#aaa;
      margin-top:4px;
    }