:root {
  --ink:#382b58;
  --muted:#716489;
  --pink:#ff6ba8;
  --purple:#8f6be8;
  --teal:#37bdb6;
  --paper:#fff;
  --line:#e9dcf4;
  --shadow:0 18px 45px #5831841c
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:ui-rounded,"Trebuchet MS","Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at 10% 0%,#ffe0ee,transparent 34%),radial-gradient(circle at 95% 12%,#dcf9f0,transparent 30%),#f9f3ff;
  min-height:100vh
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:3px
}
.wrap {
  max-width:1150px;
  margin:auto;
  padding:0 18px
}
header {
  padding:22px 0
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.logo {
  font-size:1.25rem;
  font-weight:900;
  text-decoration:none;
  color:var(--ink)
}
.logo span {
  color:var(--pink)
}
.back {
  color:var(--ink);
  text-decoration:none;
  background:#fff;
  padding:11px 16px;
  border-radius:30px;
  font-weight:800;
  box-shadow:var(--shadow)
}
.hero {
  text-align:center;
  padding:25px 0 18px
}
.eyebrow {
  display:inline-block;
  border-radius:99px;
  background:#fff1bf;
  color:#775212;
  font-weight:900;
  font-size:.82rem;
  padding:9px 16px;
  letter-spacing:.05em
}
.hero h1 {
  font-size:clamp(2.5rem,7vw,4.8rem);
  margin:17px 0 10px;
  letter-spacing:-2px
}
.gradient {
  background:linear-gradient(100deg,var(--pink),var(--purple),var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.hero p {
  color:var(--muted);
  line-height:1.6;
  margin:0 auto 12px;
  max-width:640px
}
.panel {
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  border-radius:26px;
  padding:20px;
  margin:20px 0
}
.heading {
  font-size:1.2rem;
  font-weight:900;
  margin:0 0 12px
}
.toolbar {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center
}
.tool-group {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px
}
.btn {
  border:2px solid transparent;
  background:#f4eeff;
  color:var(--ink);
  border-radius:13px;
  padding:10px 13px;
  cursor:pointer;
  font-weight:850;
  transition:transform .16s,background .16s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn[aria-pressed="true"] {
  background:#e4d7ff;
  border-color:#9671ed
}
.btn.primary {
  background:linear-gradient(110deg,var(--pink),var(--purple));
  color:white
}
.btn.danger {
  background:#ffeaf0
}
.btn:disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none
}
.palette {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.swatch {
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid white;
  box-shadow:0 0 0 1px #ccb9dd;
  cursor:pointer;
  background:var(--swatch)
}
.swatch[aria-pressed="true"] {
  box-shadow:0 0 0 3px var(--purple)
}
.size-area {
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800
}
.size-area input {
  accent-color:var(--purple);
  width:125px
}
.colour-custom {
  width:43px;
  height:38px;
  padding:2px;
  border:2px solid var(--line);
  border-radius:10px;
  background:white;
  cursor:pointer
}
.divider {
  height:1px;
  background:var(--line);
  margin:15px 0
}
.canvas-shell {
  background:repeating-conic-gradient(#f4eff8 0% 25%,#fff 0% 50%) 50%/22px 22px;
  padding:9px;
  border:3px solid #efe2ff;
  border-radius:20px;
  overflow:hidden
}
.canvas-shell canvas {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:8/5;
  touch-action:none;
  background:white;
  border-radius:12px;
  cursor:crosshair
}
.hint {
  color:var(--muted);
  font-size:.85rem;
  line-height:1.55;
  margin:12px 0 0
}
.actions {
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap;
  margin:15px 0 0
}
.name-input {
  min-width:170px;
  flex:1;
  max-width:285px;
  border:2px solid var(--line);
  border-radius:12px;
  padding:10px 12px
}
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:15px
}
.art-card {
  background:#fff;
  border:2px solid var(--line);
  border-radius:19px;
  overflow:hidden;
  box-shadow:0 5px 15px #58318410
}
.art-card img {
  width:100%;
  aspect-ratio:8/5;
  object-fit:contain;
  background:#fff;
  display:block
}
.art-info {
  padding:12px
}
.art-info strong {
  display:block;
  overflow-wrap:anywhere
}
.art-info small {
  display:block;
  color:var(--muted);
  margin-top:4px
}
.art-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:9px
}
.art-actions .btn {
  font-size:.82rem;
  padding:7px 10px
}
.empty {
  text-align:center;
  color:var(--muted);
  padding:30px;
  border:2px dashed #d7b9f1;
  border-radius:18px
}
.toast {
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  padding:12px 19px;
  border-radius:16px;
  background:#493266;
  color:white;
  font-weight:800;
  box-shadow:var(--shadow);
  z-index:10;
  max-width:calc(100vw - 36px);
  text-align:center
}
.hidden {
  display:none
}
.badge {
  font-size:.78rem;
  font-weight:800;
  color:#6b4e97;
  background:#f2eaff;
  border-radius:20px;
  padding:6px 10px
}
.footer {
  text-align:center;
  color:var(--muted);
  padding:17px 0 35px;
  font-size:.9rem
}
@media(max-width:650px) {
  .panel {
    padding:13px;
    border-radius:20px
  }
  .toolbar {
    gap:10px
  }
  .btn {
    padding:10px
  }
  .swatch {
    width:31px;
    height:31px
  }
  .canvas-shell {
    padding:4px
  }
  .hero {
    padding-top:12px
  }
  .actions .btn {
    flex:1
  }
  
}
@media(prefers-reduced-motion:reduce) {
  .btn {
    transition:none
  }
  
}