:root{
    --bg:#f6f8f9;
    --card:#fff;
    --muted:#6b7780;
    --accent:#2563eb;
    --border:#e6ecef;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
    --glass: rgba(16,24,32,0.02);
    --radius:12px;
    --gap:12px;
    --max-width:1200px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg);
    color:#0f1720;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin:0; padding:18px; display:flex; align-items:flex-start; justify-content:center;
  }
  .wrap{width:100%; max-width:var(--max-width); padding-bottom:96px;} /* bigger bottom spacing */
  header{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap}
  h1{margin:0; font-size:1.05rem; color:var(--accent)}
  .lead{margin:4px 0 0 0; color:var(--muted); font-size:0.95rem}
  /* main area: side-by-side */
  .main{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
  .card{background:var(--card); border-radius:var(--radius); padding:12px; border:1px solid var(--border); box-shadow: 0 8px 22px rgba(13,24,32,0.04)}
  .u-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .btn{border-radius:8px; padding:8px 10px; border:1px solid var(--border); background:transparent; color:var(--accent); cursor:pointer}
  .btn.strong{background:linear-gradient(90deg,var(--accent),#2dd4bf); color:white; border:0}
  label.small{font-size:0.88rem; color:var(--muted)}
  input[type="range"]{width:140px}
  .drop{border:2px dashed var(--border); border-radius:10px; padding:12px; text-align:center; background:var(--glass); color:var(--muted); cursor:pointer}
  .preview{display:flex; gap:8px; align-items:center; justify-content:center; min-height:220px; max-height:420px; overflow:auto; border-radius:8px; background:#fbfdff; border:1px solid #eef3f6}
  canvas{max-width:100%;}
  .controls-grid{display:grid; gap:10px; grid-template-columns:1fr 1fr}
  select, input, textarea{font-family:inherit; font-size:0.95rem}
  .mono{font-family:var(--mono)}
  .output{width:100%; min-height:320px; max-height:640px; overflow:auto; background:#ffffff; border-radius:8px; border:1px solid var(--border); padding:10px; font-family:var(--mono); font-size:10px; line-height:10px; white-space:pre; word-break:normal}
  .output.html-output{font-family:inherit; font-size:14px; line-height:1.1; white-space:pre-wrap}
  .footer{display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap}
  .muted{color:var(--muted)}
  .below { margin-top:14px; display:grid; gap:12px; }
  .samples-row { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
  @media (max-width:980px){
    .main{grid-template-columns:1fr; }
    .output{min-height:180px}
  }
  .ascii-box {
      font-family: "Courier New", Consolas, "Roboto Mono", monospace;
      white-space: pre;
      font-size: 10px;
      line-height: 10px;
      overflow: auto;
      border: 1px solid #e6ecef;
      padding: 12px;
      background: #fff;
    }