*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; overflow:hidden; }
body{
  display:flex;
  flex-direction:column;
  background:#0a1128;
  font-family:'Lexend', sans-serif;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:52px;
  padding:0 16px;
  background:#0b1526;
  border-bottom:1px solid #1c3a5e;
  flex-shrink:0;
}
.brand{ font-weight:700; color:#7dd3fc; letter-spacing:0.03em; display:flex; align-items:baseline; gap:8px; }
.brand .sub{ font-size:0.7rem; font-weight:400; color:#4fb3e8; opacity:0.8; letter-spacing:0; }

.toolbar{ display:flex; align-items:center; gap:10px; }
.toolbar input[type="color"]{
  width:36px; height:34px; padding:2px;
  background:#101f38; border:1px solid #1c3a5e; border-radius:6px;
}
.toolbar input[type="range"]{ accent-color:#7dd3fc; }
.toolbar button{
  font-family:'Lexend', sans-serif;
  background:#142a4a; color:#7dd3fc; border:1px solid #26558a;
  border-radius:6px; padding:7px 12px; cursor:pointer; font-size:0.82rem;
}
.toolbar button:hover{ background:#26558a; border-color:#4fb3e8; }
.toolbar button.active{ background:#4fb3e8; color:#04121f; }

#board{
  flex:1;
  display:block;
  background:#0b0b0d;
  touch-action:none;
  cursor:crosshair;
}