:root{
  --bg:#0f1720;
  --panel:#0b1220;
  --accent:#26a69a;
  --muted:#9aa6b2;
  --card:#0e1620;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Helvetica Neue", Arial;color:#e6f0f0;background:linear-gradient(180deg,#071018 0%,#091826 100%)}
#app{display:flex;flex-direction:column;gap:8px;padding:10px;height:100vh}
#canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:220px}
canvas{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02));border-radius:8px;max-width:100%;height:auto;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
#controls{display:grid;grid-template-columns:1fr;gap:8px;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px}
.row{display:flex;flex-direction:column;gap:6px}
.row label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
input[type=range]{width:100%}
.buttons{display:flex;gap:8px}
button{flex:1;padding:10px;border-radius:8px;border:0;background:var(--accent);color:#042;font-weight:600}
button#reset{background:#ef5350;color:white}
.info{display:flex;justify-content:space-between;padding-top:6px;font-size:14px;color:var(--muted)}
@media (min-width:700px){
  #app{flex-direction:row;padding:18px}
  #canvas-wrap{flex:2}
  #controls{flex:1;max-width:320px;height:min-content}
}