:root {
  color-scheme: dark;
  font: 16px/1.55 system-ui, sans-serif;
  color: #fcf6ff;
  background: #17141e;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  max-width: 90rem;
  min-height: 100svh;
  margin: auto;
  padding: clamp(1rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.65fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.brand { font-size: .78rem; font-weight: 750; letter-spacing: .18em; color: #ecc0ff; }
.brand span { margin: 0 .3em; color: #a68db2; }
h1 { font-size: clamp(2.3rem, 4.5vw, 4.7rem); line-height: .99; margin: .45em 0; }
p, li { color: #e0d4e6; }
ol { margin: 1.5rem 0 0; padding-left: 1.35rem; }
li + li { margin-top: .4rem; }
button {
  margin-top: .6rem;
  padding: .75rem 1rem;
  border: 0;
  border-radius: .55rem;
  background: #ecc0ff;
  color: #281635;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
progress { display: block; width: 100%; margin-top: 1rem; accent-color: #ecc0ff; }
[hidden] { display: none !important; }
#status { min-height: 3em; font-size: .92rem; }
.preview { border: 1px solid #4c3b56; border-radius: 1rem; overflow: hidden; background: #211b2a; }
.preview p { margin: .6rem 1rem; font-size: .83rem; }
#canvas { height: clamp(19rem, 64vh, 44rem); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  #canvas { height: 45vh; }
}