:root {
  --motion:#4C97FF; --looks:#9966FF; --sound:#CF63CF; --control:#FFAB19;
  --bg:#f0ece2; --panel:#ffffff; --ink:#3d3a42; --line:#e2ddd2;
  --orange:#FF8C1A;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Baloo 2', system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, #fff3e0 0, transparent 45%),
    radial-gradient(circle at 85% 90%, #e8f0ff 0, transparent 45%),
    var(--bg);
  color:var(--ink);
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* Header */
#topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px;
  background:linear-gradient(90deg, var(--orange), #ffb84d);
  color:#fff; box-shadow:0 3px 0 rgba(0,0,0,0.08);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo { font-size:38px; filter:drop-shadow(0 2px 2px rgba(0,0,0,0.2)); }
#topbar h1 { font-size:22px; font-weight:800; letter-spacing:.5px; line-height:1; }
.tag { font-size:12px; font-weight:600; opacity:.9; }
.run-controls { display:flex; gap:8px; }
.flag, .stop {
  font-family:inherit; font-weight:800; font-size:16px;
  border:none; border-radius:22px; padding:10px 18px; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,0.18); transition:transform .08s, box-shadow .08s;
}
.flag { background:#4caf50; color:#fff; animation:pulse 2.2s ease-in-out infinite; }
.flag.active { animation:none; background:#3d8b40; }
.flag:active, .stop:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.18); }
.stop { background:#e64545; color:#fff; }
@keyframes pulse { 0%,100%{ box-shadow:0 4px 0 rgba(0,0,0,.18);} 50%{ box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 6px rgba(76,175,80,.25);} }

/* Workspace */
#workspace {
  flex:1; display:grid; gap:14px; padding:16px;
  grid-template-columns: 190px 1fr 500px;
  align-items:start;
}
@media (max-width:900px){
  #workspace { grid-template-columns:1fr; }
  #stageCol { order:-1; }
}

section {
  background:var(--panel); border-radius:16px; padding:12px;
  border:2px solid var(--line); box-shadow:0 4px 12px rgba(90,80,60,0.06);
}
.col-head {
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; margin-bottom:10px; color:#8a8377; font-size:14px;
  text-transform:uppercase; letter-spacing:1px;
}
.mini {
  font-family:inherit; font-weight:700; font-size:12px; cursor:pointer;
  border:2px solid var(--line); background:#faf7f0; color:#a05050;
  border-radius:10px; padding:3px 10px;
}
.mini:active { transform:translateY(1px); }

/* Palette */
#palette { max-height:70vh; overflow:hidden; }
.palette-scroll { max-height:66vh; overflow-y:auto; padding-right:4px; display:flex; flex-direction:column; gap:6px; }
.cat-header { font-weight:800; font-size:13px; margin-top:6px; letter-spacing:.5px; }
.cat-header:first-child { margin-top:0; }

/* Blocks */
.block {
  position:relative; color:#fff; font-weight:600; font-size:14px;
  padding:9px 12px; border-radius:6px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.18), 0 2px 3px rgba(0,0,0,0.1);
  display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  user-select:none;
}
.palette-block { cursor:grab; }
.palette-block:hover { filter:brightness(1.06); transform:translateX(2px); transition:.1s; }
.palette-block:active { cursor:grabbing; }

.blk-val { background:rgba(255,255,255,0.35); border-radius:8px; padding:0 6px; font-weight:700; }
.blk-input {
  font-family:inherit; font-weight:700; border:none; border-radius:10px;
  padding:2px 6px; text-align:center; color:#333; background:#fff;
}
.blk-input.num { width:46px; }
.blk-input.txt { width:88px; text-align:left; }

/* Script */
.script-drop {
  min-height:60vh; border-radius:12px;
  background:#faf8f2 repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(0,0,0,0.015) 14px, rgba(0,0,0,0.015) 28px);
  border:2px dashed #d8d2c4; padding:12px;
  display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s, background .15s;
}
.script-drop.drag-over { border-color:var(--orange); background:#fff6e8; }
.hint { color:#b3aa98; text-align:center; margin:auto; font-weight:600; line-height:1.6; }
.hint small { color:#c9c0ae; font-weight:500; }

.script-block { padding-right:56px; }
.script-block .del {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.2); color:#fff; border:none; border-radius:50%;
  width:20px; height:20px; font-size:11px; cursor:pointer; line-height:1;
}
.script-block .del:hover { background:rgba(0,0,0,0.4); }
.script-block .arrows { position:absolute; right:30px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; }
.arr { background:transparent; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:8px; line-height:1; padding:1px; }
.arr:hover { color:#fff; }

.drop-anim { animation:pop-in .18s ease-out; }
@keyframes pop-in { 0%{ transform:scale(.85); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* Stage */
.stage-wrap { display:flex; justify-content:center; }
#canvas {
  border-radius:12px; border:3px solid #d8d2c4;
  background:#fff; max-width:100%; touch-action:none;
}
.readout {
  margin-top:10px; text-align:center; font-family:'Fira Code', monospace;
  font-size:13px; color:#8a8377; background:#faf7f0; border-radius:10px; padding:6px;
}

/* Footer */
#foot {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:12px 20px; font-size:13px; color:#8a8377; background:rgba(255,255,255,0.5);
}
#foot a { color:var(--orange); font-weight:800; text-decoration:none; }
#foot a:hover { text-decoration:underline; }
</parameter>