:root { --bg:#111; --bg2:#1a1a1a; --bg3:#222; --border:#2a2a2a;
          --fg:#f0f0f5; --fg2:#999; --accent:#5fa3ff; --ok:#4caf50; }
  * { box-sizing:border-box; margin:0; padding:0 }
  body { background:var(--bg); color:var(--fg);
         font:15px/1.6 system-ui,Helvetica,sans-serif;
         max-width:340px; margin:0 auto; padding:1.4rem 1rem 3rem }
  h1 { color:var(--accent); font-size:1.3rem; margin-bottom:.15rem }
  .sub { color:var(--fg2); font-size:.85rem; margin-bottom:1.6rem }
  .step-label { color:var(--accent); font-weight:700; font-size:.82rem;
                text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem }
  .section { margin-bottom:1.4rem }
  label { color:var(--fg2); font-size:.88rem; display:block; margin-bottom:.25rem }
  input[type=file] { display:none }
  .file-btn { display:inline-block; padding:.6rem 1.2rem;
              background:var(--bg2); border:1px solid var(--border);
              border-radius:6px; cursor:pointer; font-size:.95rem;
              color:var(--fg); transition:border-color .15s }
  .file-btn:hover { border-color:var(--accent) }
  canvas { display:block; border:1px solid var(--border); border-radius:6px;
           touch-action:none; cursor:grab }
  canvas:active { cursor:grabbing }
  .tip { color:var(--fg2); font-size:.78rem; margin-top:.4rem; text-align:center }
  .slider-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem }
  .slider-row label { min-width:52px; color:var(--fg2); font-size:.85rem; margin:0 }
  input[type=range] { flex:1; accent-color:var(--accent) }
  .slider-val { min-width:44px; text-align:right; color:var(--fg);
                font-size:.85rem; font-family:monospace }
  .dl-btn { width:100%; padding:.85rem; background:var(--ok);
            color:#fff; border:none; border-radius:6px; font-size:1rem;
            font-weight:700; cursor:pointer; transition:opacity .15s }
  .dl-btn:hover { opacity:.85 }
  .dl-btn:disabled { opacity:.4; cursor:default }
  hr { border:none; border-top:1px solid var(--border); margin:1.4rem 0 }
  .how-to { color:var(--fg2); font-size:.85rem; line-height:1.8 }
  .how-to ul { padding-left:1.2rem }
  .how-to li { margin-bottom:.15rem }
  .back { color:var(--accent); text-decoration:none; font-size:.85rem }
  .back:hover { text-decoration:underline }