:root{
  --ink:#3a281c; --paper:#ffffff; --line:#ece1cf; --muted:#8a7a66;
  --accent:#e07a33; --accent-ink:#ffffff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; background:#f4eee2;
  font-family:'Fredoka',system-ui,sans-serif; -webkit-user-select:none; user-select:none; touch-action:none; }
canvas{ display:block; }

/* ---------- toolbar ---------- */
.toolbar{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; max-width:96vw;
  background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:16px;
  padding:7px 9px; box-shadow:0 10px 30px rgba(58,40,28,.16); backdrop-filter:blur(8px); }
.btn{ width:42px; height:42px; border-radius:11px; border:1px solid transparent; background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.12s; -webkit-tap-highlight-color:transparent; }
.btn:hover{ background:#f4ece0; }
.btn:active{ transform:scale(.93); }
.btn svg{ width:22px; height:22px; }
.btn.tool.on{ background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 12px rgba(224,122,51,.4); }
.sep{ width:1px; height:26px; background:var(--line); margin:0 3px; }
#speedSlider{ -webkit-appearance:none; appearance:none; width:96px; height:6px; border-radius:999px; background:var(--line); outline:none; margin:0 4px; }
#speedSlider::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 1px 4px rgba(58,40,28,.3); }
#speedSlider::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:var(--accent); cursor:pointer; }

.brand{ position:fixed; bottom:9px; left:50%; transform:translateX(-50%); z-index:20;
  font-size:11px; font-weight:500; color:var(--muted); opacity:.7; text-decoration:none; }

/* ---------- help modal ---------- */
.modal{ position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  background:rgba(40,28,18,.5); padding:22px; }
.modal-content{ position:relative; width:min(440px,100%); background:var(--paper); border-radius:18px;
  padding:26px 26px 20px; box-shadow:0 24px 70px rgba(40,28,18,.4); text-align:left; }
.modal-content h2{ margin:0 0 10px; font-weight:700; font-size:1.7rem; letter-spacing:.04em; color:var(--ink); }
.lede{ margin:0 0 16px; font-size:1rem; line-height:1.55; color:#5a4a3a; }
.lede b{ color:var(--ink); }
.legend{ list-style:none; margin:0; padding:0; }
.legend li{ font-size:.95rem; line-height:1.5; color:#5a4a3a; padding:6px 0; border-bottom:1px solid #f3eadc; }
.legend li:last-child{ border-bottom:none; }
.legend b{ color:var(--accent); font-weight:600; }
.modal-footer{ margin-top:16px; font-size:.82rem; color:var(--muted); }
.modal-footer a{ color:var(--ink); }
.close{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; background:transparent;
  font-size:26px; line-height:1; color:var(--muted); cursor:pointer; border-radius:8px; }
.close:hover{ background:#f4ece0; color:var(--ink); }

@media (max-width:560px){
  .toolbar{ top:10px; gap:4px; padding:6px; }
  .btn{ width:38px; height:38px; border-radius:10px; } .btn svg{ width:20px; height:20px; }
  #speedSlider{ width:70px; }
}