body{margin:0;color:#17202a;font-family:Arial,sans-serif}.site{max-width:1100px;margin:auto;padding:28px 18px 50px}.header{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.header h1{margin:0}.header p,.sub{color:#667085}.steps,.options{display:flex;gap:8px;flex-wrap:wrap}.step,.choice,.options button,.nav button,.order-btn{padding:12px 15px;border:1px solid #d9dee7;border-radius:10px;background:#fff;font-weight:700;cursor:pointer}.step{flex:1}.step.active,.selected{border-color:#2563eb!important;background:#eff6ff!important}.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.card{border:1px solid #d9dee7;border-radius:14px;padding:20px}.hidden{display:none}.row{display:flex;align-items:center;gap:10px;border:1px solid #d9dee7;border-radius:10px;padding:10px;margin:9px 0;flex-wrap:wrap}.row label{font-weight:700;min-width:70px}.colors,.mini-colors{display:flex;gap:7px;flex-wrap:wrap}.color{width:42px;height:42px;border-radius:9px;border:2px solid white;outline:1px solid #d9dee7}.mini-color{width:30px;height:30px;border-radius:7px;border:2px solid white;outline:1px solid #d9dee7}.color.selected,.mini-color.selected{outline:3px solid #2563eb}.color-group{display:grid;gap:4px}.color-group span{font-size:11px;font-weight:700;color:#667085}select,input{min-height:42px;border:1px solid #d9dee7;border-radius:8px;padding:7px}.preview{min-height:330px;background:#f7f8fa;border-radius:12px;padding:18px 6px;display:flex;align-items:center;justify-content:center;overflow:hidden}.assembly{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;flex-wrap:nowrap}.assembly.vertical{flex-direction:column}.unit{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1 1 0;min-width:0}.face{width:min(76px,100%);aspect-ratio:1;border-radius:18%;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;box-shadow:inset 0 -6px 0 #0002,0 3px 7px #0003;border:3px solid #0002}.face.plain{color:#333;text-shadow:none}.label{font-size:10px;color:#667085}.connector{width:7px;height:4px;background:#98a2b3;flex:0 0 auto}.vertical .connector{width:4px;height:7px}.summary{display:grid;gap:9px;margin-top:16px}.summary>div{display:flex;justify-content:space-between}.total{font-size:20px;font-weight:800;border-top:1px solid #d9dee7;padding-top:10px}.nav{display:flex;justify-content:space-between;margin-top:18px}.next,.order-btn{background:#2563eb!important;color:#fff}.order-btn{width:100%;margin-top:18px}@media(max-width:700px){.grid{grid-template-columns:1fr}.steps{display:grid;grid-template-columns:1fr 1fr}.face{width:60px;font-size:20px}.assembly{gap:3px}.connector{width:4px}}
.base-stack{position:relative;width:min(76px,100%);aspect-ratio:1}
.base-stack .base-body{position:absolute;inset:0;border-radius:18%;box-shadow:inset 0 -6px 0 #0002,0 3px 7px #0003;border:3px solid #0002}
.base-stack .cap-top{position:absolute;width:70%;height:70%;left:15%;top:8%;border-radius:18%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:21px;border:3px solid #0002;box-shadow:0 3px 5px #0003}
@media(max-width:700px){.base-stack{width:min(60px,100%)}.base-stack .cap-top{font-size:17px}}

/* Letter caps are always displayed in uppercase. */
input.letter-input {
  text-transform: uppercase;
}

/* Kman 3D Creations branding */
.brand-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}
.kman-logo {
  display: block;
  width: min(280px, 80vw);
  height: auto;
  object-fit: contain;
}
.builder-title {
  text-align: center;
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 8px 0 18px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

/* Make Your Own Clicker banner */
.site-banner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.site-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 330px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .site-banner img {
    max-height: 240px;
  }
}

/* Header logo positioned to the left of the banner, as in the original layout. */
.brand-row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.kman-header-logo {
  display: block;
  width: min(210px, 30vw);
  height: auto;
  object-fit: contain;
}
@media (max-width: 700px) {
  .kman-header-logo {
    width: 150px;
  }
}