body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#0e0f12;color:#e7e7ea}
.header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;background:#17181d;border-bottom:1px solid #242630}
.header a{color:#9ad3ff;text-decoration:none}
.banner{font-weight:600}
.container{max-width:1080px;margin:18px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{background:#15161a;border:1px solid #242630;border-radius:10px;padding:12px}
.btn{background:#2a7fd6;border:0;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.secondary{background:#2a2c33}
.input{background:#0f1116;border:1px solid #2a2c33;border-radius:8px;color:#e7e7ea;padding:8px;width:100%}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
canvas{max-width:100%;border:1px dashed #2a2c33;background:#0a0b0e}
.small{font-size:12px;color:#9aa0a6}
/* --- Footer --- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main.container { flex: 1; }            /* sticky footer when page is short */
.btn.danger{background:#7f1d1d;border-color:#b91c1c}
.btn.danger:hover{background:#991b1b}

footer.site-footer{
  margin-top: 40px;
  padding: 16px 12px;
  border-top: 1px solid var(--border, #2a2a2a);
  color: var(--muted, #9aa0a6);
  font-size: .9rem;
}

footer.site-footer .links{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

footer.site-footer .links a{
  color: var(--link, #8ab4f8);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease, text-decoration .15s;
  opacity: .9;
}

footer.site-footer .links a:hover{
  text-decoration: underline;
  opacity: 1;
}

footer.site-footer .links a:focus-visible{
  outline: 2px solid var(--link, #8ab4f8);
  outline-offset: 2px;
  text-decoration: none;
}

footer.site-footer .smallprint{
  margin-top: 8px;
  text-align: center;
  font-size: .8rem;
  opacity: .7;
}

/* Optional bundled fonts; place files in /assets/fonts/ */
@font-face {
  font-family: "Anton LF";
  src: url("/assets/fonts/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald LF";
  src: url("/assets/fonts/OswaldLF.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Watermark font (fixed); Inter is a clean choice */
@font-face {
  font-family: "Inter LF";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Toolbar alignment polish --- */
:root { --ctl-h: 36px; }

.toolbar {
  display: flex;
  align-items: center;          /* vertical align */
  gap: 10px;
  flex-wrap: wrap;
}

/* Make labels act like mini flex rows: "Fill [color]" */
.toolbar .small {
  display: flex;
  align-items: center;          /* center the color/number boxes */
  gap: 6px;
  margin: 0;
}

/* Unify heights for common controls */
.toolbar .input,
.toolbar select,
.toolbar input[type="text"],
.toolbar input[type="number"],
.toolbar button.btn {
  height: var(--ctl-h);
  line-height: calc(var(--ctl-h) - 2px);
  padding: 6px 10px;
  box-sizing: border-box;
}

/* Color picker is shorter by default—normalize it */
.toolbar input[type="color"] {
  width: 44px;                  /* compact square */
  height: var(--ctl-h);
  padding: 0;                   /* native control renders its own swatch */
  border-radius: 6px;
  box-sizing: border-box;
}

/* Keep number box narrow and aligned */
.toolbar input[type="number"] {
  width: 72px;                  /* matches your inline style; move to CSS */
  text-align: left;
}

/* Tidy the select so it visually matches .input */
.toolbar select {
  appearance: none;             /* optional: cleaner look */
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa0a6 50%),
    linear-gradient(135deg, #9aa0a6 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;          /* room for the chevron */
}

/* Range sliders align better if we remove default margins */
.toolbar input[type="range"] {
  margin: 0 4px;
  vertical-align: middle;
}

/* Buttons are already close; ensure same height */
.toolbar .btn {
  height: var(--ctl-h);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}