:root {
    --bg:#0b0f1a;
    --panel:#111827;
    --accent:#3b82f6;
    --accent-2:#22c55e;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --card: #0f0f12;
    --radius: 14px;
}
body {margin:0;font-family:Inter,system-ui;background:var(--bg);color:var(--text);}
.app {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.sidebar {
    width:280px;background:var(--panel);padding:20px;flex-shrink:0;
    display:flex;flex-direction:column;gap:20px;border-right:1px solid #1f2937;
}

.group {display:flex;flex-direction:column;gap:10px;}
label {font-size:13px;color:var(--muted);}
.value {font-size:12px;color:var(--muted);}
input[type="range"]{width:100%;}
button {
    padding:10px;border-radius:8px;border:none;
    background:var(--accent);color:#fff;cursor:pointer;
}
button.secondary{background:#374151;}
button.success{background:var(--accent-2);}
.canvas-wrap {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 400px;
}
canvas {
  /* width:100%;
  height:auto;*/
  max-width:720px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);

}
#canvas {
  cursor: none;
}
.status{font-size:12px;color:var(--muted);}

.wrap {
  position: relative;
  z-index: 1;
}
.wrap header {
  position: relative;
  z-index: 10;
}

@media (max-width: 900px){
  .app {
    flex-direction: column;
  }

  .sidebar {
    width:100%;
    order:2;
  }

  .canvas-wrap {
    order:1;
    min-height:300px;
  }
}