:root{
  --paper:#f7f5ef;
  --ink:#16161d;
  --coral:#ff5d5d;
  --gold:#ffc53d;
  --mint:#22d3a6;
  --sky:#38bdf8;
  --violet:#a78bfa;
  --glass: rgba(255,255,255,.62);
  --glass-brd: rgba(22,22,29,.08);
  --shadow: 0 12px 40px -12px rgba(22,22,29,.35);
  --font: 'Space Grotesk', system-ui, sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--paper); font-family:var(--font); color:var(--ink); }
canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; outline:none; }
#stage{ z-index:1; touch-action:none; }
#fx{ z-index:2; pointer-events:none; }
#cam{ position:fixed; width:2px; height:2px; opacity:0; pointer-events:none; top:-10px; left:-10px; }

/* ---------- Boot veil ---------- */
#boot{
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.35rem;
  background:radial-gradient(120% 120% at 50% 30%, #fffdf7 0%, #efece2 70%, #e7e3d6 100%);
  transition:opacity .6s ease; text-align:center;
}
#boot.gone{ opacity:0; pointer-events:none; }
.boot-mark{ font-size:56px; animation:bob 1.6s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(0,0,0,.15)); }
.boot-title{ font-size:34px; font-weight:700; letter-spacing:-.02em; }
.boot-sub{ font-size:14px; opacity:.5; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-10px) rotate(4deg);} }

/* ---------- First-run hint ---------- */
.hint{
  position:fixed; top:26px; left:50%; transform:translateX(-50%); z-index:20;
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--glass-brd); border-radius:999px;
  padding:.55rem 1.1rem; font-size:15px; box-shadow:var(--shadow);
  transition:opacity .5s, transform .5s; pointer-events:none;
}
.hint .scrawl{ font-family:'Caveat',cursive; font-size:22px; font-weight:700; color:var(--coral); margin-right:.15rem; }
.hint.hidden{ opacity:0; transform:translateX(-50%) translateY(-14px); }

/* ---------- Tool dock ---------- */
.dock{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:.3rem; padding:.4rem;
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--shadow);
  transition:opacity .4s, transform .4s;
}
.dock.hidden,.controls.hidden{ opacity:0; transform:translateX(-50%) translateY(16px); pointer-events:none; }
.tool{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:56px; height:52px; border-radius:14px; font-size:22px; line-height:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink); transition:transform .12s, background .18s; position:relative;
}
.tool span{ font-size:9.5px; font-weight:600; opacity:.55; letter-spacing:.01em; }
.tool:hover{ background:rgba(22,22,29,.06); transform:translateY(-2px); }
.tool:active{ transform:translateY(0) scale(.94); }
.tool.active{ background:var(--ink); color:#fff; box-shadow:0 6px 16px -6px rgba(22,22,29,.5); }
.tool.active span{ opacity:.7; }
.tool.pin.on{ background:var(--gold); color:var(--ink); }
.sep{ width:1px; height:34px; background:var(--glass-brd); margin:0 .2rem; }

/* swatches */
.swatches{ display:flex; gap:.32rem; padding:0 .25rem; }
.swatch{
  width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .12s;
}
.swatch:hover{ transform:scale(1.15); }
.swatch.active{ transform:scale(1.25); box-shadow:0 0 0 3px var(--ink), 0 2px 6px rgba(0,0,0,.2); }

/* ---------- Global controls (top-right stack) ---------- */
.controls{
  position:fixed; right:18px; top:18px; z-index:20; display:flex; flex-direction:column; gap:.4rem;
  transition:opacity .4s, transform .4s;
}
.controls.hidden{ transform:translateY(-12px); }
.ctl{
  appearance:none; border:1px solid var(--glass-brd); cursor:pointer;
  width:46px; height:46px; border-radius:14px; font-size:20px;
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--shadow); color:var(--ink); text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:transform .12s, background .18s;
}
.ctl:hover{ transform:scale(1.08); }
.ctl:active{ transform:scale(.92); }
.ctl.off{ opacity:.45; filter:grayscale(1); }
.ctl.on{ background:var(--mint); }
.ctl.home{ font-size:22px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(10px); z-index:25;
  background:var(--ink); color:#fff; padding:.5rem 1rem; border-radius:12px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:var(--shadow);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:560px){
  .tool span{ display:none; }
  .tool{ width:46px; height:46px; }
  .dock{ bottom:12px; gap:.15rem; }
}