:root{
  --ca-pink:#eb3c8d;
  --ca-pink-dark:#b81f65;
  --ca-blue:#153f91;
  --ca-blue-soft:#eaf4ff;
  --ca-yellow:#f6bd31;
  --ca-teal:#24b9c5;
  --ca-green:#59a94a;
  --ca-ink:#153873;
  --ca-paper:#fffdfb;
  --ca-border:#dce6f4;
}
.ca-builder{
  max-width:1220px;
  margin:36px auto;
  padding:18px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  color:var(--ca-ink);
}
.ca-builder *{box-sizing:border-box}
.ca-builder button{font:inherit}
.ca-builder__top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:left;
  background:linear-gradient(180deg,#fff,#fff7fb);
  border:2px dashed var(--ca-pink);
  border-radius:30px;
  padding:20px 28px;
  box-shadow:0 8px 24px rgba(24,61,128,.06);
}
.ca-builder__brandmark{
  width:72px;height:72px;border-radius:24px;
  display:grid;place-items:center;
  color:#fff;background:var(--ca-pink);
  font-size:48px;line-height:1;
  transform:rotate(-5deg);
  box-shadow:0 6px 0 #c72870;
}
.ca-builder__eyebrow{
  margin:0 0 2px;
  font-weight:900;letter-spacing:.08em;
  color:var(--ca-blue);
}
.ca-builder h1{
  margin:0;
  color:var(--ca-pink);
  font-size:clamp(48px,7vw,82px);
  line-height:.9;
  letter-spacing:-.04em;
}
.ca-builder__intro{margin:8px 0 0;font-size:18px;font-weight:700}
.ca-progress-wrap{
  display:flex;align-items:center;gap:12px;
  max-width:820px;margin:18px auto 22px;
}
.ca-progress-track{
  height:14px;flex:1;background:#edf2fa;
  border-radius:999px;overflow:hidden;border:1px solid #dce6f4;
}
.ca-progress-bar{
  width:8.33%;height:100%;
  background:linear-gradient(90deg,var(--ca-pink),var(--ca-yellow));
  border-radius:999px;transition:width .25s ease;
}
.ca-progress-text{
  margin:0;font-size:13px;font-weight:900;white-space:nowrap;
}
.ca-builder__layout{
  display:grid;
  grid-template-columns:minmax(360px,1.1fr) minmax(320px,.9fr);
  gap:26px;
  align-items:start;
}
.ca-stage-card{
  position:relative;
  border:2px solid var(--ca-border);
  background:#fff;
  border-radius:34px;
  padding:18px;
  box-shadow:0 12px 30px rgba(36,68,120,.08);
}
.ca-stage{
  position:relative;
  width:min(100%,560px);
  aspect-ratio:2/3;
  margin:0 auto;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.98) 0 30%,rgba(244,251,255,.98) 70%),
    repeating-linear-gradient(0deg,rgba(20,63,145,.025),rgba(20,63,145,.025) 2px,transparent 2px,transparent 8px);
}
.ca-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;
}
.ca-stage-bubble{
  position:absolute;right:18px;bottom:18px;
  display:flex;align-items:center;gap:8px;
  background:#fff;border:2px solid #f3b4d3;
  border-radius:999px;padding:8px 14px;
  color:var(--ca-pink-dark);
  box-shadow:0 8px 18px rgba(235,60,141,.11);
}
.ca-stage-bubble span{color:var(--ca-pink);font-size:20px}
.ca-builder__controls{
  background:var(--ca-paper);
  border:2px solid var(--ca-border);
  border-radius:34px;
  padding:22px;
  box-shadow:0 12px 30px rgba(36,68,120,.08);
}
.ca-step-heading{
  display:flex;align-items:center;gap:14px;
  margin-bottom:18px;
}
.ca-step-number{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background:var(--ca-pink);color:#fff;
  font-weight:900;font-size:26px;
  box-shadow:0 5px 0 #c72870;
}
.ca-step-kicker{
  margin:0;text-transform:uppercase;
  font-size:12px;font-weight:900;letter-spacing:.08em;
  color:#7386ad;
}
.ca-step-heading h2{
  margin:1px 0 0;
  font-size:32px;color:var(--ca-blue);
}
.ca-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  min-height:260px;
  align-content:start;
}
.ca-option{
  min-height:96px;
  border:2px solid #e0e8f4;
  border-radius:22px;
  background:#fff;
  color:var(--ca-ink);
  padding:12px 9px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  text-align:center;font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}
.ca-option:hover{
  transform:translateY(-2px);
  border-color:#f0a1c7;
  box-shadow:0 8px 18px rgba(235,60,141,.08);
}
.ca-option.is-selected{
  border-color:var(--ca-pink);
  background:#fff2f8;
  box-shadow:0 0 0 4px rgba(235,60,141,.09);
}
.ca-option__icon{
  width:52px;height:52px;
  border-radius:18px;
  background:#f2f6fc;
  display:grid;place-items:center;
  font-size:26px;
}
.ca-swatch{
  width:52px;height:52px;border-radius:18px;
  border:2px solid rgba(0,0,0,.06);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.ca-builder__nav{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:18px;
}
.ca-nav-button{
  border:0;border-radius:18px;
  padding:15px 16px;font-weight:900;cursor:pointer;
}
.ca-nav-button--secondary{
  background:#edf3fb;color:var(--ca-blue);
}
.ca-nav-button--primary{
  background:var(--ca-pink);color:#fff;
  box-shadow:0 5px 0 #c72870;
}
.ca-nav-button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.ca-builder__quick-actions{
  display:flex;justify-content:center;gap:8px;
  margin-top:12px;flex-wrap:wrap;
}
.ca-builder__quick-actions button{
  border:0;background:transparent;color:#6b7da4;
  font-weight:800;cursor:pointer;padding:8px;
}
.ca-finish{
  text-align:center;
  margin-top:24px;padding:34px 20px;
  background:linear-gradient(180deg,#fff7fb,#fff);
  border:2px dashed var(--ca-pink);
  border-radius:34px;
}
.ca-finish__heart{
  width:72px;height:72px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:26px;
  background:var(--ca-pink);color:#fff;font-size:46px;
  transform:rotate(-5deg);
}
.ca-finish__eyebrow{
  margin:0;color:var(--ca-blue);font-weight:900;letter-spacing:.1em;
}
.ca-finish h2{
  color:var(--ca-pink);font-size:52px;line-height:1;margin:4px 0 8px;
}
.ca-finish__actions{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;
}
.ca-finish__actions button{
  border:2px solid var(--ca-blue);
  border-radius:18px;padding:14px 18px;
  background:#fff;color:var(--ca-blue);font-weight:900;cursor:pointer;
}
.ca-finish__actions .ca-finish__save{
  background:var(--ca-pink);color:#fff;border-color:var(--ca-pink);
}
.ca-builder__privacy{font-size:13px;opacity:.7}
.ca-demo-character{position:absolute;inset:0;transition:.2s ease}
.ca-demo-head{
  position:absolute;width:43%;height:31%;left:28.5%;top:10%;
  border-radius:46% 46% 44% 44%;
  background:var(--demo-skin,#e8b18b);
  box-shadow:none;
}
.ca-demo-eye{
  position:absolute;top:42%;width:14%;height:18%;
  background:#fff;border-radius:50%;
}
.ca-demo-eye span{
  position:absolute;width:13%;height:13%;border-radius:50%;
  background:#111;left:43.5%;top:43.5%;
}
.ca-demo-eye--left{left:25%}.ca-demo-eye--right{right:25%}
.ca-demo-nose{
  position:absolute;left:47%;top:58%;width:6%;height:7%;
  border-radius:50%;background:color-mix(in srgb,var(--demo-skin,#e8b18b) 88%,#8b4b37);
}
.ca-demo-mouth{
  position:absolute;left:42%;top:72%;width:16%;height:7%;
  border-bottom:4px solid #c92935;border-radius:0 0 50% 50%;
}
.ca-demo-body{position:absolute;left:27%;top:38%;width:46%;height:50%}
.ca-demo-arm{
  position:absolute;top:5%;width:14%;height:43%;
  background:var(--demo-skin,#e8b18b);
  border-radius:999px;
}
.ca-demo-arm--left{left:0;transform:rotate(6deg)}
.ca-demo-arm--right{right:0;transform:rotate(-6deg)}
.ca-demo-top{
  position:absolute;left:8%;top:0;width:84%;height:48%;
  background:var(--demo-top,#237043);
  border-radius:18% 18% 10% 10%;
}
.ca-demo-bottom{
  position:absolute;left:20%;top:42%;width:60%;height:30%;
  background:var(--demo-bottom,#62636a);
}
.ca-demo-leg{
  position:absolute;top:64%;width:18%;height:27%;
  background:var(--demo-skin,#e8b18b);
  border-radius:8px;
}
.ca-demo-leg--left{left:25%}.ca-demo-leg--right{right:25%}
.ca-demo-shoe{
  position:absolute;bottom:2%;width:28%;height:9%;
  border-radius:45% 45% 28% 28%;background:#151515;
}
.ca-demo-shoe--left{left:17%}.ca-demo-shoe--right{right:17%}
.ca-demo-hair-front{
  position:absolute;left:29%;top:7.5%;width:42%;height:15%;
  background:var(--demo-hair,#6a3b21);
  clip-path:polygon(0 55%,8% 28%,17% 38%,27% 10%,38% 27%,50% 0,60% 28%,73% 14%,82% 40%,94% 30%,100% 70%,91% 64%,83% 79%,71% 65%,58% 83%,47% 69%,35% 85%,22% 67%,10% 78%);
}
.ca-demo-hair-back{display:none}
@media(max-width:840px){
  .ca-builder__layout{grid-template-columns:1fr}
  .ca-builder__controls{order:2}
  .ca-builder__stage-wrap{order:1}
}
@media(max-width:560px){
  .ca-builder{padding:8px}
  .ca-builder__top{padding:16px;gap:12px}
  .ca-builder__brandmark{width:56px;height:56px;font-size:36px;border-radius:18px}
  .ca-builder__intro{font-size:15px}
  .ca-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ca-stage-card,.ca-builder__controls{border-radius:24px}
}