:root{
  --bg:#020208;
  --panel:#0a0a16;
  --gold:#ffc46b;
  --magenta:#ff6bd6;
  --cyan:#6bf0ff;
  --border:#2a2a4a;
  --danger:#ff5c6c;
  --text:#dfe3ff;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -10%, #10102a 0%, var(--bg) 60%);
  color:var(--text);
  font-family:"Courier New", Consolas, monospace;
  display:flex;
  justify-content:center;
  padding:24px 12px 60px;
}

.wrap{width:100%;max-width:1140px;}

header{text-align:center;margin-bottom:18px;}

h1{
  margin:0;
  font-size:1.9rem;
  letter-spacing:3px;
  background:linear-gradient(90deg, var(--cyan), var(--gold), var(--magenta));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 26px rgba(255,196,107,0.25);
}

.blink{animation:blink 1.1s step-end infinite; color:var(--cyan); -webkit-text-fill-color:var(--cyan);}
@keyframes blink{50%{opacity:0;}}

.sub{margin:6px 0 0;color:#8f92c9;font-size:0.85rem;letter-spacing:1px;}

.stage{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}

canvas{
  background:#000;
  border:2px solid var(--border);
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(107,240,255,0.1), 0 0 40px rgba(107,240,255,0.08) inset;
  cursor:crosshair;
  touch-action:none;
}

.panel{
  width:290px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
  box-shadow:0 0 24px rgba(0,0,0,0.5);
}

.group{margin-bottom:16px;}

.group-label{
  display:block;
  font-size:0.75rem;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:8px;
}

label{
  display:flex;
  justify-content:space-between;
  font-size:0.8rem;
  color:#b3b6e6;
  margin-bottom:6px;
}
label span{color:var(--cyan);}

.btnrow{display:flex;flex-direction:column;gap:6px;}

button{
  font-family:inherit;
  background:#12122a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:4px;
  padding:8px 10px;
  cursor:pointer;
  font-size:0.8rem;
  letter-spacing:0.5px;
  transition:background 0.15s, box-shadow 0.15s, color 0.15s;
}

button:hover{
  background:#1a1a38;
  box-shadow:0 0 10px rgba(107,240,255,0.25);
}

button.mode.active{
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  color:#050510;
  border-color:transparent;
  box-shadow:0 0 16px rgba(255,107,214,0.5);
}

input[type="range"]{width:100%;accent-color:var(--magenta);}

.hint{
  font-size:0.72rem;
  color:#7d80b8;
  line-height:1.4;
  border-top:1px solid var(--border);
  padding-top:10px;
  margin:0;
}

@media (max-width:760px){
  canvas{width:100%;height:auto;}
  .panel{width:100%;max-width:720px;}
}