*{box-sizing:border-box;margin:0;padding:0}body{color:#475569;background:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:14px}.app{max-width:780px;margin:0 auto;padding:24px 16px}h1{color:#0f172a;text-align:center;margin-bottom:16px;font-size:22px;font-weight:600}.controls{flex-direction:column;gap:10px;margin-bottom:12px;display:flex}.control-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}button{color:#334155;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:6px 14px;font-size:13px;transition:background .15s}button:hover{background:#e2e8f0}button.accent{color:#1d4ed8;background:#eff6ff;border-color:#93c5fd}button.accent:hover{background:#dbeafe}label{color:#475569;align-items:center;gap:6px;font-size:13px;display:flex}input[type=range]{accent-color:#3b82f6;width:140px}.checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none}input[type=checkbox]{accent-color:#3b82f6}.canvas{cursor:crosshair;border:1px solid #e2e8f0;border-radius:8px;width:100%;display:block}.stats-bar{flex-wrap:wrap;gap:16px;padding:10px 0;font-size:13px;display:flex}.stats-bar b{color:#0f172a}.stats-bar .warn{color:#dc2626}.selected-info{background:#f1f5f9;border-radius:6px;flex-wrap:wrap;gap:16px;padding:8px 12px;font-size:13px;display:flex}.selected-info b{color:#6d28d9}