/* PixelPaint — shared look with the Pixel editor (Pixel mode, css/pixel.css): same palette, font and wordmark. */
:root {
  --cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2221%22%3E%3Cg%20stroke-linecap%3D%22square%22%3E%3Cpath%20d%3D%22M10.5%202v5M10.5%2014v5M2%2010.5h5M14%2010.5h5%22%20stroke%3D%22%231b1d23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M10.5%202v5M10.5%2014v5M2%2010.5h5M14%2010.5h5%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%229.5%22%20y%3D%229.5%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%20stroke%3D%22%231b1d23%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E") 10 10, crosshair;   /* our own fine crosshair (the OS one varies) — same as js/ui/cursors.js */
  --hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%228%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2216%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2218%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2228%22%20y%3D%2222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2224%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2226%22%20y%3D%2226%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2228%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23221822%22%2F%3E%3C%2Fsvg%3E") 9 1, pointer;   /* a pixel pointing hand: Pyxl's games */
  --bg: #1b1d23; --stage: #16181d; --panel: #23262e; --panel2: #2b2f39; --panel3: #353a47; --line: #3a3f4b;
  --text: #e6e8ee; --muted: #9aa1b1; --accent: #5b8cff; --accent2: #3a6bff; --accent-ink: #fff; --danger: #e0556a;
  --r: 4px; --shadow: 0 8px 24px rgba(0, 0, 0, .35); --dock-w: 280px;
  --font: 'Pixelify Sans', 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  color-scheme: dark;
}
body.light {
  --bg: #e9ebf0; --stage: #d5d8df; --panel: #f7f8fa; --panel2: #eceef2; --panel3: #dfe2e9; --line: #c9ced8;
  --text: #1b1d23; --muted: #5b6273; --shadow: 0 8px 24px rgba(20, 24, 40, .16); color-scheme: light;
}
/* The app chrome follows data-layout, which keeps the last non-Pixel mode while Pixel mode covers
   it: entering Pixel then changes nothing underneath (no hidden panels re-shown, no re-theme). */
body[data-theme=paper] {
  --bg: #f2f2ef; --stage: #ebebe7; --panel: #f7f7f4; --panel2: #ecece8; --panel3: #e0e0db; --line: #111;
  --text: #111; --muted: #444; --accent: #111; --accent2: #111; --accent-ink: #fff; --shadow: none; color-scheme: light;
}
/* e-ink: nothing animates — except the loading splash, which has to show it's working */
/* E-ink simulation (js/ui/eink.js): 16 grey levels over everything, a faint paper grain, and the
   full-refresh flash. */
html.eink-sim { filter: url(#eink) contrast(1.12); }
html.eink-sim body::after { content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .035;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.eink-flash { position: fixed; inset: 0; z-index: 2001; pointer-events: none; opacity: 0; }
.eink-flash.go { animation: eink-flash .26s steps(1, end) forwards; }
@keyframes eink-flash { 0% { opacity: 1; background: #000; } 30% { opacity: 1; background: #fff; } 60% { opacity: .5; background: #fff; } 100% { opacity: 0; } }
/* e-ink: nothing animates. Listed explicitly (a universal selector here restyled every element on each switch). */
body[data-theme=paper] :is(.toast, .tooltip, .m-bubble, .pc-track i, .pc-track, .sg-star, .welcome, .wl-card, .wl-art) { transition: none !important; animation: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* tablets and phones must not enlarge text on their own (it breaks every fixed-size control) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text); font: 13px/1.45 var(--font);
  overflow: hidden; user-select: none; -webkit-user-select: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }

/* ---------- icons & buttons ---------- */
.ic { display: inline-flex; width: 16px; height: 16px; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ibtn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent;
  border-radius: var(--r); background: transparent; color: var(--text); opacity: .85;
}
.ibtn:hover { background: var(--panel2); border-color: var(--line); opacity: 1; }
.ibtn.sm { width: 22px; height: 22px; }
.ibtn.sm .ic { width: 14px; height: 14px; }
.ibtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.ibtn:disabled { opacity: .3; pointer-events: none; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel2); white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.sm { height: 26px; padding: 0 9px; }
.btn { min-width: 0; max-width: 100%; }
.btn > span:not(.ic), .btn > .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
select, .field input:not([type=checkbox]), .hex, .rename {
  height: 28px; padding: 0 7px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); min-width: 0; max-width: 100%;
}
select:focus, input:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
/* themed drop-down list (js/ui/selects.js) - replaces the browser's own open list */
select.dd-open { outline: 1px solid var(--accent); outline-offset: -1px; }
.dd-pop { position: fixed; z-index: 2147483000; overflow-y: auto; overscroll-behavior: contain; padding: 4px; box-sizing: border-box;
  max-width: min(420px, calc(100vw - 16px)); background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--r, 4px); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.4)); font: inherit; font-size: 13px; animation: dd-in .08s ease-out; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-3px); } }
.dd-item { padding: 6px 10px; border-radius: calc(var(--r, 4px) - 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.dd-item.indent { padding-left: 20px; }
.dd-item.selected { color: var(--accent); }
.dd-item.selected::after { content: '✓'; float: right; margin-left: 14px; }
.dd-item.active { background: var(--accent); color: var(--accent-ink); }
.dd-item.disabled { opacity: .45; cursor: default; }
.dd-group { padding: 7px 10px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); user-select: none; }
.dd-pop::-webkit-scrollbar { width: 8px; } .dd-pop::-webkit-scrollbar-thumb { background: var(--panel3, var(--line)); border-radius: 4px; }

/* ---------- top bar (identical in every mode, and in the Pixel editor) ---------- */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app > * { flex: none; }
#app > .workspace, #app > .notes { flex: 1; min-height: 0; }
.menubar {
  display: flex; align-items: center; gap: 4px 8px; padding: 5px 10px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 30; min-height: 42px;
}
.brand { font-weight: 700; letter-spacing: .3px; font-size: 15px; white-space: nowrap; margin-right: 4px; }
.brand em, .brand b i { font-style: normal; }
.brand em:nth-of-type(1) { color: #eaf4ff; } .brand em:nth-of-type(2) { color: #cbe4ff; } .brand em:nth-of-type(3) { color: #a8d5ff; }
.brand em:nth-of-type(4) { color: #7cb1fa; } .brand em:nth-of-type(5) { color: #4f8cf5; }
.brand b i:nth-of-type(1) { color: #a445ff; } .brand b i:nth-of-type(2) { color: #3b7bff; } .brand b i:nth-of-type(3) { color: #17c06b; }
.brand b i:nth-of-type(4) { color: #ffd23f; } .brand b i:nth-of-type(5) { color: #ff3b47; }
body.light .brand em, body[data-theme=paper] #app .brand em { color: #2f5fd6 !important; }
body[data-theme=paper] #app .brand b i { color: #111 !important; }
.menus { display: flex; gap: 1px; overflow: hidden; min-width: 0; }
.menu-title { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--muted); }
.menu-title:hover, .menu.open .menu-title { color: var(--text); background: var(--panel2); border-color: var(--line); }
.menu-title .ic { width: 15px; height: 15px; }
.menu-drop {
  position: fixed; min-width: 250px; max-height: 78vh; overflow: auto; padding: 4px; z-index: 100;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow);
}
.menu-drop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.menu-item {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 9px; align-items: center; width: 100%;
  height: 29px; padding: 0 9px; border: 0; border-radius: var(--r); background: none; text-align: left;
}
.menu-item .ic { color: var(--muted); }
.menu-item .mi-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item:hover { background: var(--accent); color: var(--accent-ink); }
.menu-item:hover .ic, .menu-item:hover .kbd { color: inherit; }
.menu-item:disabled { opacity: .4; }
.menu-item .kbd { color: var(--muted); font-size: 11.5px; }
.menu-item.checked .kbd { color: var(--accent); font-weight: 700; }
.group { display: flex; gap: 2px; }

.mode-bar { flex: none; display: flex; align-items: center; gap: 4px; }
.mode-bar > .ibtn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.mode-switch { flex: none; display: flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.mode-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; color: var(--muted); }
.mode-btn:hover { color: var(--text); background: var(--panel2); }
.mode-btn.on { background: var(--accent); color: var(--accent-ink); }
.mode-btn .ic { width: 15px; height: 15px; }

/* ---------- tool options bar ---------- */
.optionsbar {
  /* one fixed height for every tool: a bar that grew or shrank moved (re-centred) the canvas mid-gesture */
  display: flex; align-items: center; gap: 12px; height: 50px; box-sizing: border-box; padding: 5px 12px; overflow-x: auto; overflow-y: hidden; flex: none;
  background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 5; scrollbar-width: thin; scrollbar-color: var(--panel3) transparent;
}
.optionsbar > * { flex: none; }
.optionsbar::-webkit-scrollbar { height: 4px; }
.optionsbar::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 2px; }
.opt-tool { display: inline-flex; align-items: center; gap: 7px; padding-right: 12px; border-right: 1px solid var(--line); font-weight: 600; }
.opt-tool .ic { color: var(--accent); }
.brush-name { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.brush-name canvas { width: 70px; height: 20px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }

/* ---------- sliders & toggles ---------- */
.slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 2px 0; }
.sl-label { color: var(--muted); font-size: 12px; }
.sl-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.slider input { grid-column: 1 / -1; }
.slider.mini { width: 140px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: none; cursor: pointer; touch-action: pan-y; }   /* sideways drags slide, up/down scrolls the panel */
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--panel3) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--panel3) var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; margin-top: -5px; border-radius: 2px; background: var(--text); border: 1px solid var(--bg); }
input[type=range]::-moz-range-thumb { width: 8px; height: 14px; border-radius: 2px; background: var(--text); border: 1px solid var(--bg); }
.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 3px 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .tg { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--muted); flex: none; display: grid; place-items: center; }
.toggle input:checked + .tg { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .tg::after { content: ''; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.seg button { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 0; border-radius: 3px; background: none; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.field { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); align-items: center; gap: 8px; margin: 6px 0; }
.field > span { color: var(--muted); overflow-wrap: break-word; line-height: 1.25; }
.field.check { grid-template-columns: 1fr auto; }

/* ---------- workspace, docks, panels ---------- */
.workspace { position: relative; display: flex; overflow: hidden; }
.stage { position: relative; flex: 1; min-width: 0; background: var(--stage); overflow: hidden; }
.stage canvas { position: absolute; left: 0; top: 0; display: block; }   /* sized by the viewport (grow-only backing) */
.dock { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--bg); min-height: 0; position: relative; z-index: 4; }
/* a flyout lives inside its dock: lift the dock over the other dock and floating panels (and their scrollbars) while one is open */
.dock:has(> .dock-panels > .panel.flyout) { z-index: 65; }
.dock-left { border-right: 1px solid var(--line); }
.dock-right { width: var(--dock-w); border-left: 1px solid var(--line); }
.dock-right.empty:not(.folded) { display: none; }
.dock-panels { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.dock-left .dock-panels { flex: 0 1 auto; }
.dock-left .panel[data-panel=tools]:not(.collapsed):not(.flyout) { flex-shrink: 1; min-height: 140px; }
.dock.drop { outline: 2px dashed var(--accent); outline-offset: -3px; }
.dock-marker { position: fixed; z-index: 300; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1px var(--bg), 0 0 8px var(--accent); pointer-events: none; }
.dock-marker[hidden] { display: none; }
.dock-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.dock-rail { display: flex; gap: 4px; flex: none; }
.dock-right .dock-rail { justify-content: flex-start; }
.dock-left .dock-rail { justify-content: flex-end; }
.rail-toggle { height: 22px !important; color: var(--muted); }
/* an open dock keeps its panel icons on one row: they shrink rather than stack up over the panels */
.dock:not(.folded) .dock-rail { align-items: center; gap: 1px; min-width: 0; }
.dock:not(.folded) .rail-mini { flex: 0 1 24px; width: auto; min-width: 16px; }
.dock-left:not(.folded) .rail-toggle { margin-left: auto; }
.rail-mini.on { background: var(--panel2); border-color: var(--line); color: var(--accent); }
.rail-mini:not(.on) { opacity: .5; }
.dock.folded { width: 46px; padding: 6px 4px; }
.dock.folded .dock-rail { flex-direction: column; align-items: center; }
.dock.folded .dock-panels > .panel:not(.flyout):not([data-panel=tools]), .dock.folded .dock-resizer { display: none; }
.dock.folded .dock-panels { flex: 0 1 auto; overflow: visible; }
/* folded left rail keeps the tools as a one-column strip */
.dock.folded .panel[data-panel=tools]:not(.flyout) { border: 0; background: none; }
.dock.folded .panel[data-panel=tools]:not(.flyout) .panel-head { display: none; }
.dock.folded .panel[data-panel=tools]:not(.flyout) .panel-body { padding: 0; overflow: visible; }
.dock.folded .toolbar { grid-template-columns: 36px; gap: 3px; }
.dock.folded .tool { width: 36px; height: 36px; }
.dock.folded .chips { width: 36px; height: 42px; }
.dock.folded .chips .chip { width: 24px; height: 24px; }
.dock.folded .chips .fg { left: 0; } .dock.folded .chips .bg { left: 10px; top: 14px; }
.rail-btn { width: 36px; height: 36px; }
.rail-btn .ic { width: 18px; height: 18px; }
.float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.float-layer > * { pointer-events: auto; }

.panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; }
.panel.flash { animation: panel-flash .7s ease; }
@keyframes panel-flash { 30% { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } }
.dock .panel.grow:not(.collapsed) { flex: 1 1 200px; min-height: 200px; }
.dock .panel[data-panel=layers]:not(.collapsed) { flex: 2 1 300px; min-height: 260px; }
.panel.floating { position: absolute; box-shadow: var(--shadow); min-width: 64px; min-height: 60px; }
.panel.floating.collapsed { resize: none; }
.panel-head .pin, .panel-head .undock { opacity: .6; }
.panel:not(.floating) .panel-head .pin, .panel.flyout .panel-head :is(.pin, .undock) { display: none; }
.panel.pinned .panel-head .pin { opacity: 1; color: var(--accent); }
.panel-resize { display: none; }
.panel.floating:not(.collapsed) .panel-resize { display: block; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cg%20fill%3D%22%239aa1b1%22%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%221.5%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%225%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%228.5%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%221.5%22%20cy%3D%228.5%22%20r%3D%221.3%22/%3E%3C/g%3E%3C/svg%3E") no-repeat right 4px bottom 4px / 10px 10px; opacity: .45; transition: opacity .15s; }
.panel.floating .panel-resize:hover { opacity: 1; }
.panels-locked .panel.floating { resize: none; }
.panels-locked .panel-resize, .panels-locked .dock-resizer { display: none !important; }
.panels-locked .panel-head { cursor: default; }
body[data-layout=zen] .float-layer > .panel.pinned { display: flex; }   /* pinned floating panels stay up in Focus */
body[data-layout=zen] .float-layer { z-index: 60; }   /* over Focus's bars, like any window you placed */
.panel-head {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 9px; flex: none;
  cursor: grab; touch-action: none; border-bottom: 1px solid var(--line);
}
.panel-head > .ic { width: 14px; height: 14px; color: var(--muted); }
.panel-title { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-head { border-bottom: 0; }
.panel.collapsed .fold .ic { transform: rotate(-90deg); }
.panel-body { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: 8px 10px; scrollbar-width: thin; }
.panel.flyout {
  display: flex !important; position: fixed; z-index: 70; width: min(300px, calc(100vw - 70px)); height: auto;
  max-height: min(600px, calc(100dvh - 90px)); box-shadow: var(--shadow); resize: none;
}
.panel.flyout[data-panel=layers], .panel.flyout[data-panel=brushes] { height: min(560px, calc(100dvh - 90px)); }
.panel.flyout[data-panel=tools] { width: auto; }
.panel.flyout .panel-body { display: flex; flex-direction: column; }
.panel.flyout .fold { display: none; }

/* ---------- toolbar ---------- */
.panel[data-panel=tools] .panel-body { padding: 6px; }
.toolbar { display: grid; grid-template-columns: repeat(2, 40px); gap: 4px; }
.panel.floating .toolbar { grid-template-columns: repeat(auto-fill, 40px); }
.tool { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel2); color: var(--text); padding: 0; }
.tool:hover { border-color: var(--muted); }
.tool.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tool .ic { width: 18px; height: 18px; }
.tool.grouped { position: relative; }
.tool.grouped::after { content: ''; position: absolute; right: 3px; bottom: 3px; border: 3px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }   /* more tools inside */
.tool-menu { position: fixed; z-index: 120; display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.tool-menu-item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; color: var(--text); text-align: left; }
.tool-menu-item:hover, .tool-menu-item.on { background: var(--accent); color: var(--accent-ink); }
.tool-menu-item kbd { font: inherit; font-size: 11px; opacity: .7; }
@media (pointer: coarse) { .tool-menu-item { height: 44px; } }
.tool-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 2px 0; }
.chips { position: relative; width: 60px; height: 50px; margin: 6px auto 0; grid-column: 1 / -1; }
.chip { width: 32px; height: 32px; border-radius: var(--r); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); padding: 0; }
.chips .chip { position: absolute; }
.chips .fg { left: 4px; top: 0; z-index: 1; }
.chips .bg { left: 22px; top: 16px; }
.chips.inline { width: 50px; height: 38px; margin: 0; }
.chips.inline .chip { width: 26px; height: 26px; }
.chips.inline .fg { left: 0; }
.chips.inline .bg { left: 14px; top: 11px; }
.mascot-slot { margin-top: auto; display: grid; place-items: center; }
/* while she's carried elsewhere her spot keeps her size, so dropping her back on it (even after a
   restart) is recognised as home */
.mascot-slot:empty { width: 92px; height: 76px; }
.zen-strip .mascot-slot:empty { width: 48px; height: 62px; position: static; background: none; }   /* her spot while she's away: not pinned over the tools */
.dock.folded .mascot-slot:empty { width: 38px; height: 44px; }

/* ---------- color picker ---------- */
.picker { display: flex; flex-direction: column; gap: 8px; }
.sv-wrap, .hue-wrap { position: relative; touch-action: none; }
.sv { display: block; width: 100%; height: 110px; border-radius: var(--r); cursor: var(--cross); touch-action: none; }
.hue { display: block; width: 100%; height: 12px; border-radius: 2px; cursor: pointer; touch-action: none; }
.knob { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3); pointer-events: none; }
.hue-wrap .knob { top: 6px; background: transparent; border-radius: 2px; width: 6px; height: 16px; margin: -8px 0 0 -3px; }
.picker-row { display: flex; align-items: center; gap: 8px; }
.picker-row .hex { flex: 1; font-variant-numeric: tabular-nums; }
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.sw { aspect-ratio: 1; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .25); padding: 0; }
.sw:hover { outline: 1px solid var(--text); }
.sub-label { color: var(--muted); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.recent:empty::after { content: 'Colors you paint with land here'; grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }

/* ---------- brushes ---------- */
.panel[data-panel=brushes] .panel-body { padding: 4px 6px; }
.brush-search { position: sticky; top: 0; z-index: 1; display: flex; gap: 6px; padding: 2px 0 6px; background: var(--panel); }
.brush-search input { flex: 1; height: 28px; padding: 0 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); min-width: 0; }
.brush-cat summary { display: flex; align-items: center; gap: 7px; padding: 5px 4px; cursor: pointer; color: var(--muted); list-style: none; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; }
.brush-cat summary::-webkit-details-marker { display: none; }
.brush-cat summary .ic { width: 14px; height: 14px; }
.brush-cat summary .count { margin-left: auto; }
.brush-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px; width: 100%; padding: 1px 6px; border: 1px solid transparent; border-radius: var(--r); background: none; text-align: left; }
.brush-row:hover { background: var(--panel2); }
.brush-row.on { background: var(--panel2); border-color: var(--accent); }
.brush-row canvas { width: 100%; height: 30px; }
.brush-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brush-settings { display: flex; flex-direction: column; gap: 2px; }
.bs-head { margin-bottom: 4px; }
.bs-sec { margin: 8px 0 2px; }
.bs-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 4px 0; }
.bs-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- layers ---------- */
.panel[data-panel=layers] .panel-body { padding: 0; display: flex; }
.layers { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.layer-props { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; padding: 8px 8px 4px; border-bottom: 1px solid var(--line); }
.layer-props .slider { grid-column: 1 / -1; }
.flags { display: flex; gap: 2px; }
.layer-list { position: relative; flex: 1; overflow: auto; padding: 4px; min-height: 60px; scrollbar-width: thin; }
.layer-row { display: flex; align-items: center; gap: 6px; height: 44px; padding-right: 6px; margin-bottom: 2px; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; touch-action: pan-y; }
.layer-row.lift { background: var(--panel2); box-shadow: var(--shadow); }   /* held long enough to drag (touch) */
.layer-row:hover { background: var(--panel2); }
.layer-row.on { background: var(--panel2); border-color: var(--accent); }
.layer-row.hidden-layer .layer-name, .layer-row.hidden-layer .thumb-wrap { opacity: .4; }
.layer-row.into { outline: 2px solid var(--accent); outline-offset: -2px; }
.layer-row.clipped { height: 36px; }
.clip-mark { color: var(--accent); margin-right: -2px; }
.thumb-wrap { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 2px; overflow: hidden; background: repeating-conic-gradient(#c9ccd3 0 25%, #fff 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 1px var(--line); }
.clipped .thumb-wrap { width: 30px; height: 30px; }
.thumb { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.folder .ic { width: 20px; height: 20px; color: var(--accent); }
.layer-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.layer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rename { flex: 1; user-select: text; }
.badges { display: inline-flex; gap: 3px; align-items: center; color: var(--muted); }
.badges .ic { width: 13px; height: 13px; }
.layer-grip { display: grid; place-items: center; align-self: stretch; width: 26px; margin-right: -4px; flex: none; color: var(--muted); cursor: grab; touch-action: none; }
.layer-grip .ic { width: 16px; height: 16px; }
.drop-line { display: none; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent); pointer-events: none; }
.layer-foot { display: flex; justify-content: space-around; padding: 4px; border-top: 1px solid var(--line); flex: none; }

/* ---------- history ---------- */
.history-list { display: flex; flex-direction: column; gap: 1px; }
.hist-row { display: flex; align-items: center; gap: 7px; text-align: left; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r); background: none; }
.hist-row .ic { width: 14px; height: 14px; color: var(--muted); }
.hist-row:hover { background: var(--panel2); }
.hist-row.on { border-color: var(--accent); background: var(--panel2); }
.hist-row.future { opacity: .45; }

/* ---------- statusbar ---------- */
.statusbar {
  display: flex; align-items: center; gap: 16px; height: 26px; padding: 0 10px; font-size: 12px; color: var(--muted);
  background: var(--panel); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.statusbar span, .st-btn { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.statusbar > * { flex: none; }
.statusbar > .spacer { flex: 1 1 0; min-width: 8px; }
.statusbar > .st-save { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.statusbar.measuring > .st-save { flex: none; }
.statusbar > .st-save b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .statusbar { gap: 10px; } }
.statusbar .ic { width: 13px; height: 13px; }
.st-btn { border: 0; background: none; padding: 0; color: var(--text); }

/* ---------- modals, toast, tooltip ---------- */
.tour { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.tour.dim { background: rgba(8, 10, 14, .45); }
.tour-hole { position: fixed; border-radius: 8px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(8, 10, 14, .45); transition: left .25s, top .25s, width .25s, height .25s; }
.tour-tip { position: fixed; width: min(300px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; pointer-events: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.4; transition: left .25s, top .25s; }
.tour-tip b { font-size: 14px; }
.tour-tip p { margin: 0; }
.tour-count { color: var(--muted); font-size: 10.5px; letter-spacing: .6px; }
.tour-try { color: var(--accent); }
.tour-btns { display: flex; gap: 6px; margin-top: 4px; }
.tour-btns .spacer { flex: 1; }
body[data-theme=paper] .tour-hole, body[data-theme=paper] .tour-tip { transition: none; }
.guide-tour { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.guide-tour > span { display: flex; flex-direction: column; }
.guide-tour small { color: var(--muted); }
.modal-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(8, 10, 14, .55); padding: 16px; }
.modal { width: min(380px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.modal.wide { width: min(560px, 100%); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 4px 0; }
.lib-item { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel2, var(--bg)); }
.lib-item.on { border-color: var(--accent); }
.lib-open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 0 8px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.lib-open img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: repeating-conic-gradient(#0000001a 0 25%, #0000 0 50%) 0 0 / 12px 12px; border-bottom: 1px solid var(--line); }
.lib-open b, .lib-open small { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-open small { color: var(--muted); font-size: 11px; }
.lib-acts { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.lib-item:hover .lib-acts, .lib-item:focus-within .lib-acts { opacity: 1; }
@media (hover: none) { .lib-acts { opacity: 1; } }
.lib-acts .ibtn { background: var(--panel); }
.share { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.share .sub-label { margin-top: 6px; }
.share-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.share-row:hover { border-color: var(--accent); }
.share-row > span { display: flex; flex-direction: column; }
.share-row small { color: var(--muted); font-size: 11px; }
.share-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share-sites small { flex-basis: 100%; }
.modal h3 { margin: 0; padding: 12px 14px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.modal-body { padding: 8px 14px; overflow: auto; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.keys-list { display: flex; flex-direction: column; gap: 2px; }
.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 1px 0; }
.key-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd-btn { min-width: 110px; height: 26px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); font-size: 12px; }
.kbd-btn.capturing { border-color: var(--accent); color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 300; padding: 7px 14px; max-width: calc(100vw - 32px); text-align: center; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.tooltip { position: fixed; z-index: 400; pointer-events: none; opacity: 0; padding: 4px 8px; border-radius: var(--r); font-size: 12px; background: var(--text); color: var(--bg); transition: opacity .12s; max-width: min(280px, calc(100vw - 16px)); display: flex; gap: 8px; align-items: center; }
.tooltip.show { opacity: 1; }
.tooltip kbd { font: inherit; font-size: 11px; opacity: .6; }

/* ---------- mascot: Pyxl (pixel sprites, integer-scaled on a canvas) ---------- */
.mascot { position: relative; width: 64px; height: 64px; flex: none; }
.mascot { cursor: grab; touch-action: none; }
/* Pyxl picked up and placed anywhere: floats over the app (under cards and dialogs) */
.pyxl-float { position: fixed; z-index: 140; width: 92px; height: 76px; }
.pyxl-float .mascot { width: 92px; height: 76px; }
.mascot.floating:active { cursor: grabbing; }
.pyxl-canvas { position: absolute; left: 0; bottom: 0; image-rendering: pixelated; pointer-events: none; }
.mascot.hanging .pyxl-canvas { visibility: hidden; }
.pyxl-hang { position: fixed; left: 0; top: 0; z-index: 145; image-rendering: pixelated; pointer-events: none; will-change: transform; }
body[data-theme=paper] .pyxl-hang { filter: grayscale(1) contrast(1.15); }
.m-bubble {
  position: fixed; left: 0; top: 0; padding: 4px 9px; border-radius: var(--r);
  width: max-content; max-width: min(220px, calc(100vw - 16px)); text-align: center; line-height: 1.3; overflow-wrap: break-word;
  background: var(--text); color: var(--bg); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 150;
}
.m-bubble:empty { display: none; }
.m-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); }
.m-bubble:not(:empty) { opacity: 1; }
body[data-theme=paper] .pyxl-canvas { filter: grayscale(1) contrast(1.15); }
.dock.folded .mascot { width: 38px; height: 44px; }
.pxicon { image-rendering: pixelated; flex: none; }

/* Pyxl's care card */
.pyxl-card { position: fixed; z-index: 160; width: min(292px, calc(100vw - 16px)); overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.pc-head { display: flex; align-items: center; gap: 6px; margin: -10px -12px 0; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; }
.pc-head:active { cursor: grabbing; }
.pc-body { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.35; min-width: 0; }
.pc-body .pxicon { display: block; }
.pc-body small { font-size: 11px; line-height: 1.25; }
.pc-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
/* icon row of fixed height, label row below: every tab's icon and label line up whatever the icon's size */
.pc-tab { display: grid; grid-template-rows: 18px auto; justify-items: center; align-items: center; gap: 2px; min-width: 0; padding: 4px 1px; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.pc-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tab:hover { color: var(--text); background: var(--panel2); }
.pc-tab.on { background: var(--accent); color: var(--accent-ink); }
.pc-content { display: flex; flex-direction: column; gap: 8px; }
.pc-mood { margin: 0; color: var(--text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; overflow-wrap: break-word; }
.pc-note { margin: 0; font-size: 11px; line-height: 1.35; color: var(--muted); overflow-wrap: break-word; }
.pc-label { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.pc-bars { display: flex; flex-direction: column; gap: 5px; }
.pc-bar { display: grid; grid-template-columns: 16px 5.2em minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); }
.pc-bar > .pxicon, .pc-skill > .pxicon { justify-self: center; }   /* icons centred in their column, so they line up down the list */
.pc-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-track { height: 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); overflow: hidden; }
.pc-track i { display: block; height: 100%; width: 100%; transform-origin: left; transition: transform .4s; }
.pc-bar.low span { color: var(--danger); }
.pc-bar.low .pc-track { animation: pc-blink 1s steps(2) infinite; }
@keyframes pc-blink { 50% { border-color: var(--danger); } }
.pc-xp { height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.pc-xp i { display: block; height: 100%; background: linear-gradient(90deg, #a445ff, #3b7bff, #17c06b, #ffd23f, #ff3b47); }
.pc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pc-actions .btn { justify-content: center; padding: 0 4px; gap: 4px; min-width: 0; font-size: 11.5px; }
.pc-grid, .pc-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.pc-shop { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
.pc-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 40px; padding: 6px 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); }
.pc-item:hover:not(:disabled) { border-color: var(--accent); }
.pc-item:disabled { opacity: .45; }
.pc-item small { max-width: 100%; color: var(--muted); text-align: center; overflow-wrap: break-word; hyphens: auto; }
.pc-top { display: flex; gap: 4px; }
.pc-top > div { display: contents; }
.pc-top .btn { flex: 1; justify-content: center; gap: 5px; min-width: 0; }
.pc-top .btn:disabled, .pc-content .btn:disabled { opacity: .45; cursor: default; }
.pc-top .btn.on { border-color: var(--accent); color: var(--accent); }
.pc-toys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.pc-volume { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pc-volume input { flex: 1; min-width: 0; accent-color: var(--accent); }
.pc-volume .ic { width: 16px; height: 16px; flex: none; }
/* toys out on the page */
.toy-sprite { position: fixed; left: 0; top: 0; z-index: 140; image-rendering: pixelated; pointer-events: none; transition: opacity .3s; }
.toy-sprite.ball, .toy-sprite.bubble { pointer-events: auto; cursor: grab; touch-action: none; }
.toy-sprite.bubble { cursor: pointer; opacity: .9; }
.toy-sprite.pop { opacity: 0; transition: opacity .15s; }
.toy-sprite.gone, .toy-doodle.gone { opacity: 0; }
.toy-doodle { position: fixed; z-index: 139; image-rendering: pixelated; cursor: pointer; transition: opacity .8s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.pc-toy { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 5px 2px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); cursor: pointer; }
.pc-toy:hover { border-color: var(--accent); }
.pc-toy.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.pc-toy small { color: var(--muted); font-size: 10.5px; }
.pc-radio { display: flex; align-items: center; gap: 2px; padding: 3px 4px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--bg); }
.pc-radio > span { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.pc-focus { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.pc-focus small { color: var(--muted); }
.pc-focus-btns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pc-focus-btns .btn { justify-content: center; }
.m-bubble:not(:empty) { pointer-events: auto; cursor: pointer; }
.pc-wallet { display: flex; align-items: center; gap: 6px; }
.pc-wallet b { font-size: 15px; }
.pc-wallet small { color: var(--muted); }
.pc-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.pc-item.deal { position: relative; }
.pc-item.deal::after { content: '%'; position: absolute; top: 2px; right: 3px; font-size: 9px; font-weight: 700; color: #ff6fa0; }
.pc-detail { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.pc-detail b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pc-detail small { display: block; color: var(--muted); margin-top: 2px; }
.pc-detail .btn { grid-column: 1 / -1; justify-content: center; gap: 5px; }
.pc-tag { padding: 0 5px; border-radius: 2px; font-size: 10px; font-weight: 600; background: #ff6fa0; color: #fff; }
.pc-tag.fav { background: #d99a14; }
.pc-price { display: flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.pc-namerow { display: flex; gap: 4px; }
.pc-name { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-weight: 700; }
.pc-page { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: var(--r); border-left: 3px solid var(--pc, var(--accent)); background: var(--bg); }
.pc-page.blue { --pc: #3b7bff; } .pc-page.yellow { --pc: #ffd23f; } .pc-page.pink { --pc: #ff6fa0; }
.pc-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; color: var(--muted); min-height: 18px; }
.pc-row > span { flex: none; }
.pc-row b { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px; margin-left: auto; max-width: 100%; color: var(--text); font-weight: 600; text-align: right; }
.pc-skills { display: flex; flex-direction: column; gap: 4px; }
.pc-skill { display: grid; grid-template-columns: 16px minmax(3.5em, 4.6em) 1.6em 3.2em minmax(40px, 1fr); align-items: center; gap: 5px; color: var(--muted); }
.pc-skill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-grade { text-align: center; border-radius: 2px; color: #fff; font-size: 11px; line-height: 16px; background: #7a8190; }
.pc-grade.g1 { background: #5f8f5a; } .pc-grade.g2 { background: #3b7bff; } .pc-grade.g3 { background: #a445ff; } .pc-grade.g4 { background: #e0485a; } .pc-grade.g5 { background: #d99a14; }
.pc-lv { color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.pc-prog { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; }
.pc-prog i { height: 7px; border-radius: 1px; background: var(--panel3); }
.pc-prog i.on { background: var(--c); }
.pc-medal { display: inline-flex; filter: saturate(.3) brightness(1.2); } .pc-medal.m0 { filter: none; } .pc-medal.m1 { filter: grayscale(1) brightness(1.3); } .pc-medal.m2 { filter: sepia(1) saturate(2) hue-rotate(-20deg) brightness(.9); }
.pc-lesson, .pc-game { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.pc-lesson small, .pc-game small { display: block; color: var(--muted); overflow-wrap: break-word; }
.pc-lesson b, .pc-game b { display: block; overflow-wrap: break-word; }
.pc-lesson > div, .pc-game > div { flex: 1 1 9em; min-width: 0; }
.pc-lesson .btn, .pc-game .btn { flex: none; margin-left: auto; }
.pc-learned { display: flex; flex-wrap: wrap; gap: 3px; }
.pc-learned span { padding: 1px 6px; border-radius: 2px; font-size: 11px; line-height: 1.4; color: var(--muted); border: 1px dashed var(--line); }
.pc-learned span.on { color: var(--text); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
body[data-theme=paper] .pc-medal, body[data-theme=paper] .pc-grade { filter: grayscale(1); }
/* race mini-game */
.race-layer { position: fixed; z-index: 820; overflow: hidden; background: linear-gradient(#8ccdff 50%, #e8d1a4 50%); }   /* the race fills the canvas area */
body[data-game] .pyxl-card { visibility: hidden; }
.game-arena { position: fixed; z-index: 800; overflow: hidden; background: color-mix(in srgb, var(--stage) 35%, transparent); outline: 2px solid var(--accent); outline-offset: -2px; touch-action: none; }
.ga-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: var(--hand); }
.ga-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 3px 4px 3px 12px; max-width: calc(100% - 16px); border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; white-space: nowrap; }
.ga-status { color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.ga-colour { position: absolute; inset: 48px 16px 16px; display: grid; place-items: center; pointer-events: none; }
.ga-target { width: min(40vmin, 220px); aspect-ratio: 1; border-radius: 10px; border: 3px solid var(--panel); box-shadow: var(--shadow); animation: sg-in .25s ease-out; }
.ga-swatches { display: grid; grid-template-columns: repeat(3, min(18vmin, 96px)); gap: 12px; pointer-events: auto; }
.ga-swatch { aspect-ratio: 1; border-radius: 8px; border: 3px solid var(--panel); cursor: var(--hand); animation: sg-in .2s ease-out; }
.ga-swatch.right { outline: 3px solid #17c06b; } .ga-swatch.wrong { outline: 3px solid var(--danger); }
.pc-games { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pc-gtile { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font-size: 11.5px; text-align: left; cursor: pointer; }
.pc-gtile:hover { border-color: var(--accent); }
.pc-gtile b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-races { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pc-race { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 30px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font-size: 11.5px; cursor: pointer; }
.pc-race:hover:not(:disabled) { border-color: var(--accent); }
.pc-race:disabled { opacity: .5; cursor: default; }
.pc-race .pxicon { filter: grayscale(1) opacity(.5); } .pc-race.m0 .pxicon { filter: none; } .pc-race.m1 .pxicon { filter: grayscale(1) brightness(1.3); } .pc-race.m2 .pxicon { filter: sepia(1) saturate(2) hue-rotate(-20deg) brightness(.9); }
.race-head, .race-foot { position: absolute; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 3px 4px 3px 12px; border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); white-space: nowrap; }
.race-head { top: 8px; right: 8px; }
.race-foot { top: 52px; left: 50%; transform: translateX(-50%); padding: 4px 12px 4px 4px; }   /* up in the sky, clear of the lanes */
.race-foot small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.race-canvas { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; image-rendering: pixelated; touch-action: manipulation; cursor: var(--hand); }
.race-hud { display: flex; align-items: center; gap: 12px; font-size: 12px; flex-wrap: wrap; }
.race-st { display: inline-flex; align-items: center; gap: 6px; }
.race-st i { display: inline-block; width: 110px; height: 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); overflow: hidden; }
.race-st b { display: block; height: 100%; background: #ff9f2b; }
.sg-star { position: absolute; z-index: 1; border: 0; background: none; padding: 6px; cursor: var(--hand); animation: sg-in .25s ease-out, sg-bob .6s ease-in-out infinite alternate; }
.sg-star.pop { animation: sg-pop .18s ease-in forwards; }
@keyframes sg-in { from { transform: scale(0); } }
@keyframes sg-bob { to { translate: 0 -6px; } }
@keyframes sg-pop { to { transform: scale(1.6); opacity: 0; } }

/* ---------- zen: canvas-first, one strip ---------- */
.zen { display: none; }
/* the strip always fits the stage (8px clear top and bottom) and scrolls when it's taller */
body[data-layout=zen] .zen { display: block; position: absolute; inset: 8px; z-index: 50; pointer-events: none; }
body[data-layout=zen] .zen-strip { position: absolute; left: 0; top: 64px; bottom: 0; margin: auto 0; height: max-content; max-height: calc(100% - 64px); }
.zen-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; width: max-content; height: auto; align-items: center; gap: 4px; padding: 5px 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: var(--shadow); }
.zen-top > * { flex: none; }
.zen-top .zen-exit { flex-direction: row; width: auto; gap: 5px; padding: 0 10px; height: 34px; }
.zen-sep { width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
.zen-tools { width: auto !important; padding: 0 4px; gap: 0; display: inline-flex; align-items: center; }
.zen-tools .ic + .ic { width: 12px; height: 12px; opacity: .6; }
.zen-pop { position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 8px; padding: 10px; max-width: calc(100vw - 16px); max-height: calc(100vh - 90px); overflow: auto; box-shadow: var(--shadow); }
.zen-title { font-weight: 700; padding: 0 2px; }
.zen-grid { display: grid; grid-template-columns: repeat(4, 76px); gap: 4px; }
.zen-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 58px; padding: 6px 2px; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--text); font-size: 11px; line-height: 1.2; text-align: center; cursor: pointer; }
.zen-act .ic { width: 22px; height: 22px; }
.zen-act:hover { background: var(--panel2); }
.zen-act.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sel-bar { position: fixed; z-index: 120; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: row; width: max-content; height: auto; gap: 2px; padding: 4px; max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; box-shadow: var(--shadow); }
.sel-bar[hidden] { display: none; }
.sel-bar .zen-act { min-height: 48px; min-width: 56px; font-size: 10.5px; }
.sel-bar .zen-act .ic { width: 20px; height: 20px; }
.zen-pop.panel { width: max-content; height: auto; }
@media (max-width: 600px) {
  .zen-top { gap: 1px; padding: 4px; }
  .zen-top .zen-exit span:not(.ic), .zen-sep { display: none; }
  .zen-top .zen-exit { padding: 0 9px; }
  .zen-top .ibtn { width: 36px; height: 36px; }
  .zen-grid { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
  .sel-bar { gap: 0; padding: 3px; } .sel-bar .zen-act { min-width: 42px; padding: 4px 0; font-size: 9.5px; }
}
body[data-layout=zen] .zen > * { pointer-events: auto; }
/* mode rules name #app's own parts: the Pixel editor reuses class names (.statusbar, .timeline, .stage)
   and must not be restyled by a mode switch */
body[data-layout=zen] #app > :is(.optionsbar, .statusbar), body[data-layout=zen] .float-layer > .panel:not(.flyout):not(.pinned) { display: none; }
/* Zen lifts the docks out of the flow and hides them rather than display:none-ing their panels:
   they keep their styles and layout, so leaving Zen doesn't rebuild hundreds of nodes. Flyouts
   opened from the Zen strip live in the docks and stay visible. */
body[data-layout=zen] .dock { position: absolute; top: 0; bottom: 0; visibility: hidden; }
body[data-layout=zen] .dock-left { left: 0; } body[data-layout=zen] .dock-right { right: 0; }
body[data-layout=zen] .dock .panel.flyout { visibility: visible; }
.zen-strip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; box-shadow: var(--shadow); max-height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
.zen-strip > * { flex: none; }
/* more to scroll: an inner shadow at that end (the strip's border stays whole) */
.zen-strip.more-down { box-shadow: inset 0 -18px 14px -14px rgba(0, 0, 0, .35); }
.zen-strip.more-up { box-shadow: inset 0 18px 14px -14px rgba(0, 0, 0, .35); }
.zen-strip.more-up.more-down { box-shadow: inset 0 18px 14px -14px rgba(0, 0, 0, .35), inset 0 -18px 14px -14px rgba(0, 0, 0, .35); }
.zen-exit { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; padding: 5px 0 4px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .3px; cursor: pointer; }
.zen-exit .ic { width: 16px; height: 16px; }
.zen-exit:hover { filter: brightness(1.1); }
@media (pointer: coarse) { .zen-exit { width: 46px; padding: 7px 0 5px; } }
.zen-sec { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.zen-strip .mascot-slot { margin-top: 0; position: sticky; bottom: -6px; padding-bottom: 6px; background: inherit; }   /* never scrolls out of a short strip */
.zen-strip .mascot { width: 48px; height: 62px; }
.zen-chip { width: 30px; height: 30px; margin: 2px 0; }
.vs-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; }
.vslider { touch-action: none; writing-mode: vertical-lr; direction: rtl; width: 22px !important; height: clamp(56px, 13vh, 110px) !important; }   /* shorter on short screens so the strip fits */
.vslider::-webkit-slider-runnable-track { width: 6px !important; height: 100% !important; background: linear-gradient(0deg, var(--accent) var(--p, 50%), var(--panel3) var(--p, 50%)) !important; }
.vslider::-webkit-slider-thumb { margin: 0 0 0 -5px !important; width: 16px !important; height: 10px !important; }

/* ---------- notes: same chrome, a board instead of a canvas ---------- */
.notes { display: flex; flex-direction: column; }
body[data-layout=notes] #optionsbar, body[data-layout=notes] .workspace, body[data-layout=notes] #menubar .menus, body[data-layout=notes] #app > .statusbar { display: none; }   /* Notes has its own simple bars */
/* Focus (full screen): the canvas or board gets the whole window; Tab or the strip's button brings the chrome back */
body[data-focus] #app > #menubar, body[data-layout=notes][data-focus] #app > .statusbar { display: none; }
/* An open notebook has its own full bar (tabs, focus, theme), so the app's top bar steps aside - no doubled header */
body[data-layout=notes][data-notebook] #app > #menubar { display: none; }
.nb-toggles { display: contents; }
/* Notes has no undo history: the bar's undo / redo belong to Draw */
body[data-layout=notes] #menubar [data-action^="edit."] { display: none; }
.board { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; background-color: var(--stage); background-image: radial-gradient(circle, var(--line) 1px, transparent 1.2px); }
.board-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.board-slot { position: absolute; right: 10px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; }
.board-slot .mascot { width: 92px; height: 76px; }
.card { position: absolute; display: flex; flex-direction: column; border-radius: 3px; color: #1b1d23; background: #fff; border: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); cursor: default; }
.card.text { background: transparent; box-shadow: none; border: 1px dashed transparent; color: var(--text); }
.card.text:hover { border-color: var(--line); }
.card-grip { display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 3px; cursor: grab; touch-action: none; flex: none; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.card-grip > .ic { width: 13px; height: 13px; opacity: .55; flex: none; }
.card-grip .ibtn, .card-grip .dot { opacity: .45; }
.card:hover .card-grip .ibtn, .card:hover .card-grip .dot { opacity: 1; }
.card.collapsed > :not(.card-grip) { display: none; }
.card.collapsed .card-grip { border-bottom: 0; }
.card.dim { opacity: .25; }
.card.flash { outline: 3px solid var(--accent); outline-offset: 2px; }
.note-colors { position: absolute; top: 30px; right: 4px; z-index: 3; display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; border-radius: 4px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.note-colors[hidden] { display: none; }
.note-colors .dot { width: 20px; height: 20px; }
@media (hover: hover) {
  .card:not(:hover):not(:focus-within) .note-swatch { display: none; }
  .card:not(:hover):not(:focus-within) .card-grip .ibtn:not(:first-child) { display: none; }
}
.card-grip .ibtn { color: inherit; width: 22px; height: 22px; }
.card-grip .ibtn:hover { background: rgba(0, 0, 0, .08); border-color: transparent; }
.card-grip .ic { width: 14px; height: 14px; }
.dot { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .3); padding: 0; cursor: pointer; }
/* scrollbars in the note's own colours */
.card-text, .focus-text { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .28) transparent; }
.card.text .card-text { scrollbar-color: var(--line) transparent; }
.card-text::-webkit-scrollbar, .focus-text::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.card-text::-webkit-scrollbar-thumb, .focus-text::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(0, 0, 0, .25); border: 2px solid transparent; background-clip: content-box; }
.card.text .card-text::-webkit-scrollbar-thumb { background-color: var(--line); }
.card-text { flex: 1; padding: 6px 11px 11px; outline: none; overflow: auto; font: 15px/1.45 var(--font); user-select: text; -webkit-user-select: text; white-space: pre-wrap; cursor: text; }
.card.text .card-text { font-size: 22px; }
.card-sketch { flex: 1; min-height: 0; overflow: hidden; background: #fff; border-radius: 0 0 3px 3px; }
.card-canvas { display: block; background: #fff; touch-action: none; cursor: var(--cross); }
/* resize handles on every edge and corner of notes and groups */
.rz { position: absolute; z-index: 2; touch-action: none; }
.rz-n, .rz-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; } .rz-n { top: -4px; } .rz-s { bottom: -4px; }
.rz-e, .rz-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; } .rz-e { right: -4px; } .rz-w { left: -4px; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 14px; height: 14px; } .rz-ne, .rz-nw { top: -5px; } .rz-se, .rz-sw { bottom: -5px; }
.rz-ne, .rz-se { right: -5px; } .rz-nw, .rz-sw { left: -5px; } .rz-ne, .rz-sw { cursor: nesw-resize; } .rz-nw, .rz-se { cursor: nwse-resize; }
.rz-se::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 6px; height: 6px; border-right: 2px solid rgba(0, 0, 0, .3); border-bottom: 2px solid rgba(0, 0, 0, .3); }
.note-group > .rz-se::after { border-color: var(--gc); }
body[data-theme=paper] .card { box-shadow: none; border: 1.5px solid #111; }

@media (max-width: 900px) { .mode-btn > span:not(.ic) { display: none; } }
.menus-icons .menu-title > span:not(.ic) { display: none; }
.menus-burger .menus { display: none; }
.menus-burger .menu-burger { display: inline-grid; }
@media (max-width: 720px) { :root { --dock-w: 240px; } }

/* ---------- pop-up palette (right-click / pen barrel button) ---------- */
.popup-palette { position: fixed; width: 300px; height: 300px; z-index: 150; }
.pp-disc { position: absolute; inset: 22px; border-radius: 50%; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pp-hue { position: absolute; left: 60px; top: 60px; width: 180px; height: 180px; border-radius: 50%; cursor: var(--cross); }
.pp-center { position: absolute; left: 126px; top: 126px; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; }
.pp-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--panel); padding: 0; }
.pp-brush { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); padding: 0; overflow: hidden; display: grid; place-items: center; }
.pp-brush canvas { width: 48px; height: 20px; }
.pp-brush:hover, .pp-brush.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pp-hint { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; color: var(--muted); display: flex; gap: 6px; justify-content: center; }

/* ---------- brush library extras ---------- */
.brush-lib { display: flex; flex-direction: column; min-height: 0; }
.brush-row { position: relative; grid-template-columns: 92px 1fr 22px; cursor: pointer; }
.star { width: 22px; height: 22px; border: 0; background: none; padding: 0; color: var(--muted); opacity: .35; display: grid; place-items: center; }
.star .ic { width: 14px; height: 14px; }
.brush-row:hover .star { opacity: .8; }
.star.on { opacity: 1; color: #ffd23f; }
.star.on svg { fill: currentColor; }
.quick-sizes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-bottom: 4px; }
.quick-sizes button { height: 30px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); display: grid; place-items: center; padding: 0; }
.quick-sizes button.on { border-color: var(--accent); }
.quick-sizes i { display: block; max-width: 22px; max-height: 22px; border-radius: 50%; background: var(--text); }
.pads { display: flex; flex-direction: column; gap: 8px; }
.wheel { display: block; width: 100%; max-width: 220px; aspect-ratio: 1; margin: 2px auto; touch-action: none; cursor: var(--cross); }
.picker > .seg { align-self: flex-start; }

/* ---------- navigator, reference, filter layers, text ---------- */
.navigator { display: flex; flex-direction: column; gap: 4px; }
.nav-thumb { width: 100%; height: auto; background: var(--stage); border-radius: var(--r); cursor: grab; touch-action: none; }
.reference { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; outline: none; }
.ref-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ref-view { flex: 1; min-height: 80px; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: var(--r); background: var(--bg); touch-action: none; cursor: var(--cross); }
.ref-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; pointer-events: none; }
.ref-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.thumb-wrap.fx { background: var(--panel3); color: var(--accent); }
.text-editor {
  position: absolute; z-index: 20; min-width: 60px; min-height: 1.3em; padding: 0; margin: 0; resize: none; overflow: hidden;
  background: transparent; border: 1px dashed var(--accent); outline: none; line-height: 1.25; white-space: pre; user-select: text;
}

/* ---------- first-visit welcome ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, #262a35 0%, #1b1d23 55%, #121317 100%); transition: opacity .45s;
}
.welcome.out { opacity: 0; pointer-events: none; }
.wl-card { display: flex; align-items: center; gap: 40px; padding: 24px; max-width: 94vw; animation: wl-in .7s ease-out both; }
.wl-art { flex: none; image-rendering: pixelated; animation: wl-float 1.2s step-end infinite alternate; }
.wl-text { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
.wl-text .brand { font-size: 44px; }
.wl-text p { margin: 0; color: var(--muted); font-size: 15px; }
.wl-bar { width: 240px; height: 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); overflow: hidden; }
.wl-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #a445ff, #3b7bff, #17c06b, #ffd23f, #ff3b47); }
.wl-trail { position: absolute; left: 0; bottom: 24px; height: 60px; pointer-events: none; }
.wl-walker { position: absolute; left: 0; bottom: 30px; will-change: transform; image-rendering: pixelated; }
@keyframes wl-in { from { opacity: 0; } }
@keyframes wl-float { to { transform: translateY(calc(-1 * var(--px, 4px))); } }
@media (max-width: 720px) { .wl-card { flex-direction: column; gap: 14px; text-align: center; } .wl-text { align-items: center; } .wl-text .brand { font-size: 32px; } }
.dock-left .mascot { width: 92px; height: 76px; }

/* ---------- animation timeline (same collapsible strip as the Pixel editor's) ---------- */
.timeline { display: flex; flex-direction: column; background: var(--panel); border-top: 1px solid var(--line); max-height: 240px; position: relative; z-index: 3; }
body[data-layout=zen] #app > .timeline, body[data-layout=notes] #app > .timeline { display: none; }
.tl-bar { display: flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 36px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; border-bottom: 1px solid var(--line); flex: none; }
.tl-bar > * { flex: none; }   /* a crowded bar scrolls; its buttons never squeeze below their label */
.timeline.collapsed .tl-bar { border-bottom: 0; }
.tl-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--muted); padding: 0 4px; height: 28px; }
.tl-toggle:hover { color: var(--text); }
.tl-sep { width: 1px; height: 22px; background: var(--line); flex: none; }
.tl-pos { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.tl-num { width: 64px; height: 26px; padding: 0 6px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.tl-body { overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.tl-grid { display: grid; grid-auto-rows: 26px; align-items: stretch; width: max-content; }
.tl-name { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; cursor: pointer; font-size: 12px; }
.tl-name span { overflow: hidden; text-overflow: ellipsis; }
.tl-name .ic { width: 13px; height: 13px; color: var(--muted); }
.tl-name.on { color: var(--accent); }
.tl-head { color: var(--muted); cursor: default; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; }
.tl-frame { display: grid; place-items: center; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); cursor: grab; touch-action: none; font-variant-numeric: tabular-nums; }
.tl-frame.on { background: var(--accent); color: var(--accent-ink); }
.tl-frame.sel, .tl-cel.sel { box-shadow: inset 0 -3px 0 var(--accent); }
.tl-frame.drop { box-shadow: inset 3px 0 0 var(--accent); }
.tl-cel { display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.tl-cel:hover { background: var(--panel2); }
.tl-cel.col, .tl-cel.row { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tl-cel.on { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.tl-cel i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
.tl-cel i.full { background: var(--text); border-color: var(--text); }
.tl-tag { margin: 3px 1px; border: 0; border-radius: 2px; padding: 0 6px; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: color-mix(in srgb, var(--c) 70%, #000); }
.tl-tag.on { outline: 2px solid var(--text); }
.tl-cel i.key { background: var(--text); border-color: var(--text); }
.tl-cel i.hold { width: 100%; height: 2px; border: 0; border-radius: 0; background: var(--muted); opacity: .6; }
.pal-sel { flex: 1; min-width: 0; }
.pal-sel select { width: 100%; }
.menu-burger { display: none; }
@media (max-width: 720px) {
  .menubar { gap: 4px; padding: 5px 6px; }
  .brand { font-size: 13px; margin-right: 0; }
  .mode-btn { padding: 0 8px; }
}
@media (max-width: 380px) { .brand { display: none; } }

/* ---------- notes: outline, titles, groups, focus ---------- */
.notes-main { flex: 1; display: flex; min-height: 0; }
.notes-outline { width: 250px; flex: none; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); scrollbar-width: thin; }
.ol-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.notes-search { height: 28px; padding: 0 8px; margin-bottom: 6px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.ol-item, .ol-gname { display: flex; align-items: center; gap: 7px; width: 100%; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r); background: none; text-align: left; }
.ol-item:hover, .ol-gname:hover { background: var(--panel2); border-color: var(--line); }
.ol-item > span:not(.ic), .ol-gname > span:not(.ol-chev):not(.ic) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-item .ic, .ol-gname .ic { width: 14px; height: 14px; color: var(--muted); }
.ol-item.dim { opacity: .35; }
.ol-group .ol-item { padding-left: 26px; }
.ol-gname { font-weight: 600; box-shadow: inset 3px 0 0 var(--gc); }
.ol-gname > .ic { color: var(--gc); }
.ol-gname small, .ol-head small { color: var(--muted); font-weight: 400; }
.ol-chev { display: inline-grid; place-items: center; }
.ol-sub { margin: 8px 4px 2px; font-size: 11px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
.card-title { flex: 0 1 auto; }   /* sized to its text: the rest of the bar is a drag handle */
.card-space { flex: 1; min-width: 12px; align-self: stretch; }
.card-handle { flex: none; align-self: stretch; width: 8px; cursor: grab; }
.grp-name, .focus-title { flex: 1; }
.card-title, .grp-name, .focus-title { min-width: 20px; outline: none; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; user-select: text; -webkit-user-select: text; padding: 2px 3px; border-radius: 2px; }
.card-title[contenteditable=false], .grp-name[contenteditable=false] { cursor: inherit; user-select: none; -webkit-user-select: none; }   /* a drag handle until double-tapped */
.card-title:empty::before, .grp-name:empty::before, .focus-title:empty::before { content: attr(data-placeholder); opacity: .45; font-weight: 400; }
.card-title:focus, .grp-name:focus, .focus-title:focus { background: rgba(0, 0, 0, .08); }
/* collapsed: a slim rail with the expand button */
.notes-outline.collapsed { width: 40px !important; padding: 6px 4px; overflow: hidden; }
.notes-outline.collapsed > :not(.ol-head), .notes-outline.collapsed .ol-head > :not(.ibtn) { display: none; }
.notes-outline.collapsed .ol-head { padding: 0; justify-content: center; }
.ol-head .ibtn { width: 24px; height: 24px; }
.outline-sizer { width: 5px; margin-left: -3px; flex: none; cursor: col-resize; touch-action: none; z-index: 21; }
.outline-sizer:hover { background: var(--accent); }
.note-group { position: absolute; border: 2px dashed var(--gc); border-radius: 6px; background: color-mix(in srgb, var(--gc) 7%, transparent); }
.note-group.collapsed { border-style: solid; }
.grp-head { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px; cursor: grab; touch-action: none; color: var(--text); background: color-mix(in srgb, var(--gc) 22%, var(--panel)); border-radius: 4px 4px 0 0; }
.grp-head > .ic { width: 14px; height: 14px; color: var(--gc); flex: none; }
.grp-count { font-size: 11px; color: var(--muted); padding: 0 4px; }
.grp-head .ibtn { width: 24px; height: 24px; }
.note-focus { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(8, 10, 14, .55); }
.focus-card { width: min(900px, 100%); height: min(80vh, 900px); display: flex; flex-direction: column; background: #fff; color: #1b1d23; border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; }
.focus-head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.focus-head .ibtn { color: inherit; }
.focus-title { font-size: 16px; }
.focus-text { flex: 1; padding: 16px 20px; outline: none; overflow: auto; font: 17px/1.55 var(--font); white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.focus-card .card-canvas { flex: 1; min-height: 0; width: 100% !important; height: auto !important; object-fit: contain; object-position: left top; background: #fff; }
.notes { position: relative; }
@media (max-width: 720px) { .notes-outline { position: absolute; z-index: 20; top: 51px; bottom: 0; left: 0; box-shadow: var(--shadow); } .notes .optionsbar { overflow-x: auto; scrollbar-width: none; } .notes .optionsbar .btn { flex: none; min-width: 36px; justify-content: center; } .notes .optionsbar .btn:not(.make) span:not(.ic) { display: none; } .notes .optionsbar > .muted, .notes .optionsbar > .opt-tool { display: none; } .outline-sizer { display: none; } }
.guide { display: flex; flex-direction: column; gap: 12px; }
.guide-sec { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.guide-sec > .ic { width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.guide-sec h4 { margin: 0 0 3px; font-size: 13px; }
.guide-sec p { margin: 0 0 3px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.update-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: 6px; box-shadow: var(--shadow); }
.update-bar > .ic { color: var(--accent); }

/* ---------- Pixel mode (styles in css/pixel.css): it covers our chrome with its own, and Pyxl
   floats over the spot it keeps free in its tool rail ---------- */
.pixel-pyxl { position: fixed; z-index: 71; pointer-events: none; }
.pixel-pyxl .mascot { pointer-events: auto; width: 92px; height: 76px; }

/* ---------- touch screens: bigger targets, menus that fit and scroll ---------- */
@media (pointer: coarse) {
  .ibtn { min-width: 40px; min-height: 40px; }
  .zen-strip .ibtn, .zen-strip .tool, .zen-strip .chip { width: 46px; height: 46px; }
  .zen-strip { gap: 8px; padding: 8px 6px; }
  .zen-strip .ic { width: 20px; height: 20px; }
  .menu-drop { max-height: calc(100dvh - 64px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-width: min(280px, calc(100vw - 16px)); }
  .menu-item { height: 44px; font-size: 14px; }
  .menu-title { min-height: 40px; }
  .panel.flyout { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
  .panel-body { overscroll-behavior: contain; }
  .btn.sm { min-height: 36px; }
  .brush-row { min-height: 44px; }
  .ol-item, .ol-gname { height: 40px; }
  .card-grip .ibtn, .grp-head .ibtn, .layer-row .ibtn { min-width: 0; min-height: 0; }   /* compact rows keep their size */
}

/* ---------- Notes: notebooks on paper (after reMarkable) ---------- */
.notes.nb { --paper: var(--panel); --ink: var(--text); --nb-line: var(--line); --nb-muted: var(--muted); --nb-accent: var(--accent); background: var(--stage); color: var(--ink); overflow: hidden; }
.nb .ibtn { color: var(--ink); }
.nb .ibtn:hover { background: var(--panel2); }
.nb .ibtn.on, .nb .nb-tool.on { background: var(--nb-accent); color: var(--accent-ink); }
.nb-lib { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 14px 28px 18px; background: var(--paper); overflow-y: auto; }
.nb-shell { flex: 1; display: flex; min-height: 0; }
/* a start panel instead of an empty page */
.nb-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 10px; text-align: center; color: var(--nb-muted); }
.nb-start h3 { margin: 0; color: var(--ink); font-size: 18px; }
.nb-start p { margin: 0; max-width: 460px; line-height: 1.5; }
.nb-start .nb-templates { width: min(720px, 100%); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.nb-start .nb-tpl { color: var(--ink); background: var(--bg); border: 1px solid var(--nb-line); }
.nb-start .nb-tpl:hover { border-color: var(--nb-accent); }
.nb-start-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nb-start-btns .btn { height: 40px; padding: 0 18px; gap: 8px; }
.nb-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
.nb-head h2 { flex: 1; min-width: 0; margin: 0; font: 700 22px/1.2 var(--font); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sort { border: 0; background: none; color-scheme: inherit; color: var(--nb-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.nb-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--nb-line); color: var(--nb-muted); font-size: 12px; }
.nb-search { flex: 1; max-width: 320px; height: 32px; padding: 0 10px; border: 1px solid var(--nb-line); border-radius: 16px; background: var(--bg); color: var(--ink); font: inherit; }
.nb-list { display: flex; flex-direction: column; }
.nb-list .nb-item { display: flex; align-items: center; border-bottom: 1px solid var(--nb-line); }
.nb-list .nb-open { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px 4px; }
.nb-list .nb-thumb { width: 42px; height: 56px; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; padding-top: 16px; }
.nb-grid .nb-item { position: relative; }
.nb-grid .nb-open { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.nb-grid .nb-thumb { width: 100%; aspect-ratio: 3 / 4; }
.nb-open { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.nb-thumb { display: block; object-fit: cover; border: 1px solid var(--nb-line); border-radius: 3px; background: #fff; box-shadow: 2px 2px 0 rgba(0, 0, 0, .06); }
.nb-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-meta b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-meta small { color: var(--nb-muted); font-size: 11.5px; }
.nb-tags { color: var(--nb-accent) !important; }
.nb-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.nb-grid .nb-acts { position: absolute; top: 4px; right: 4px; background: var(--paper); border-radius: 6px; box-shadow: var(--shadow); }
.nb-item:hover .nb-acts, .nb-item:focus-within .nb-acts { opacity: 1; }
@media (hover: none) { .nb-acts { opacity: 1; } }
.nb-empty { color: var(--nb-muted); padding: 30px 0; text-align: center; }
.nb-acts-top { display: flex; align-items: center; gap: 4px; flex: none; }
/* narrow: menu, title and actions on one row; the sort menu wraps below instead of squeezing the title out */
@media (max-width: 560px) {
  .nb-head { flex-wrap: wrap; row-gap: 4px; }
  .nb-head h2 { flex: 1 1 110px; }
  .nb-head .nb-acts-top { order: 2; }
  .nb-head .nb-sort { order: 3; margin-left: auto; }
}
.nb-acts-top .ibtn { width: 36px; height: 36px; }
.nb .nb-acts-top .nb-add { background: var(--nb-accent); color: var(--accent-ink); }
.nb .nb-acts-top .nb-add:hover { filter: brightness(1.1); background: var(--nb-accent); }
.nb-drawer { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; width: min(260px, 80%); display: none; flex-direction: column; gap: 2px; padding: 12px 8px; background: var(--panel); border-right: 1px solid var(--nb-line); box-shadow: var(--shadow); }
.nb-drawer.open { display: flex; }
@media (min-width: 900px) {   /* wide screens: the drawer is a sidebar that stays */
  .nb-drawer { position: static; display: flex; flex: none; width: 230px; box-shadow: none; }
  .nb-head .nb-menu { display: none; }
}
.nb-drow { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.nb-drow.on { background: var(--nb-accent); color: var(--accent-ink); }
.nb-dlabel { padding: 12px 12px 2px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--nb-muted); }
.nb-dspace { flex: 1; }
.nb-new { display: flex; flex-direction: column; gap: 10px; }
.nb-name { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; }
.nb-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.nb-tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.nb-tpl canvas { width: 72px; height: 96px; border: 1px solid #bdbbb4; border-radius: 2px; }
.nb-tpl.on { border-color: var(--accent); }
/* the page */
.nb-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nb-bar { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: var(--paper); border-bottom: 1px solid var(--nb-line); }   /* same height as Draw's top bar */
.nb-bar .ibtn { width: 30px; height: 30px; border-radius: 4px; }
.nb-bar .ibtn:disabled { opacity: .3; }
.nb-bar > * { flex: none; }
.nb-tool[data-tip=Pens] { position: relative; }
.nb-tool[data-tip=Pens]::after { content: ''; position: absolute; right: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--pen-ink, #1b1d23); box-shadow: 0 0 0 1.5px var(--paper); }
/* a narrow bar gives up the notebook's name first, then the labels on the Draw | Notes switch */
.nb-title { flex: 1 1 0; min-width: 0; text-align: center; font: 600 13px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nb-muted); }
.nb-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.nb-paper { flex: 1; position: relative; min-width: 0; overflow: hidden; touch-action: none; }
.nb-page { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.nb-sheet { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; background: #fbfaf6; pointer-events: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .1); border-radius: 2px; }
.nb-zoom { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--nb-line); border-radius: 10px; background: none; color: var(--nb-muted); font: inherit; font-size: 11.5px; cursor: pointer; }
.nb-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 0 8px; color: var(--nb-muted); font-size: 12.5px; }
.nb-selbar { position: absolute; z-index: 4; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.nb-selbar[hidden] { display: none; }
.nb-selbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-size: 10.5px; cursor: pointer; }
.nb-selbar button:hover { background: var(--panel2); }
.nb-pop { position: absolute; z-index: 10; display: flex; flex-direction: column; width: min(300px, calc(100% - 16px)); padding: 6px 0; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.nb-plabel { padding: 8px 14px 4px; font-size: 12px; color: var(--nb-muted); border-top: 1px solid var(--nb-line); }
.nb-plabel:first-child { border-top: 0; }
.nb-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 10px 8px; }
.nb-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; }
.nb-choice:hover { background: var(--panel2); }
.nb-choice.on { background: var(--nb-accent); color: var(--accent-ink); }
.nb-choice canvas { width: 64px; height: 28px; border-radius: 2px; }
.nb-ink { display: block; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); }
.nb-mitem { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.nb-mitem:hover { background: var(--panel2); }
.nb .board-slot { position: absolute; right: 12px; bottom: 60px; z-index: 3; }
.gallery { position: fixed; inset: 0; z-index: 180; display: flex; background: var(--stage); color: var(--text); --paper: var(--panel); --ink: var(--text); --nb-line: var(--line); --nb-muted: var(--muted); --nb-accent: var(--accent); }
.gallery .nb-sort.on { color: var(--nb-accent); font-weight: 700; }
.gallery .nb-sort { display: inline-flex; align-items: center; gap: 4px; }
.gallery .nb-sort .ic { width: 14px; height: 14px; }
.gal-thumb { object-fit: contain !important; background: repeating-conic-gradient(#0000000f 0 25%, #fff 0 50%) 0 0 / 12px 12px !important; }
.nb-grid .gal-thumb { aspect-ratio: 4 / 3 !important; }
.gal-recent { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 190px); gap: 16px; overflow-x: auto; padding: 14px 2px 18px; scrollbar-width: thin; }
.gal-recent .nb-open { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gal-recent .gal-thumb { width: 100%; aspect-ratio: 4 / 3; }
.gal-recent .nb-item { position: relative; }
.gal-recent .nb-acts { position: absolute; top: 4px; right: 4px; background: var(--paper); border-radius: 6px; box-shadow: var(--shadow); }

/* ---------- narrow panels: a thin dock or a shrunk floating panel re-flows instead of clipping ---------- */
section.panel[data-panel]:not([data-panel=tools]) { container: panel / inline-size; }
@container panel (max-width: 250px) {
  .panel-head { gap: 2px; padding-left: 6px; }
  .panel-head > .ic, .panel-head .pin { display: none; }
  .panel-body { padding: 6px; }
  .picker > .seg { align-self: stretch; }
  .seg button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; overflow: hidden; }
  .picker-row { flex-wrap: wrap; gap: 6px; }
  .picker-row .hex { flex: 1 1 64px; min-width: 0; }
  .picker-row select { flex: 1 1 0; min-width: 0; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); }
  .layer-props { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 6px 4px; }
  .layer-props select { min-width: 0; width: 100%; }
  .layer-row { gap: 4px; }
  .layer-foot { justify-content: space-between; }
}
@container panel (max-width: 190px) {
  .seg button .ic { display: none; }
  .layer-props { grid-template-columns: minmax(0, 1fr); }
  .layer-props .flags { justify-content: space-between; }
  .layer-sub, .badges { display: none; }
  .thumb-wrap { width: 30px; height: 30px; }
  .layer-foot { flex-wrap: wrap; }
}
@media (max-width: 560px) { .nb-title { font-size: 0; } }   /* a clipped letter or two reads as a glitch: keep the gap, drop the name */
@media (max-width: 420px) { .nb-bar { gap: 2px; padding: 5px 6px; } .nb-bar .mode-btn { padding: 0 6px; } }

/* eyedropper: new colour over old, held above the fingertip; pops when the pick lands */
.pick-loupe { position: fixed; z-index: 500; width: 64px; height: 64px; margin: -104px 0 0 -32px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(var(--now, transparent) 50%, var(--was, transparent) 50%); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), var(--shadow); }
.pick-loupe.done { animation: pick-pop .4s ease-out forwards; }
@keyframes pick-pop { 30% { transform: scale(1.18); background: var(--now); } to { transform: scale(1.18); background: var(--now); opacity: 0; } }