* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, system-ui, sans-serif; }
body { background: #0b0d12; color: #e6e9ef; }

#c { position: absolute; inset: 0; display: block; }

#ui {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(18, 22, 30, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 240px;
  user-select: none;
}
#ui h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; }
.hint { font-size: 11px; opacity: 0.6; margin-bottom: 12px; line-height: 1.4; }

#palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; }
.tool {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s;
  font-size: 12px;
}
.tool:hover { background: rgba(255,255,255,0.08); }
.tool.active { background: rgba(120,180,255,0.18); border-color: rgba(120,180,255,0.6); }
.swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

.row { display: flex; gap: 6px; margin-top: 8px; }
.row label { font-size: 12px; display: flex; gap: 6px; align-items: center; opacity: 0.8; }

button {
  flex: 1;
  padding: 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
}
button:hover { background: rgba(255,255,255,0.12); }

#stats { font-size: 11px; opacity: 0.5; margin-top: 10px; font-family: ui-monospace, monospace; }