:root{
  --ynm-ip603010-border:#ddd9d0;
  --ynm-ip603010-bg:#fffefb;
  --ynm-ip603010-text:#1f2937;
  --ynm-ip603010-muted:#667085;
  --ynm-ip603010-primary:#1f7a63;
  --ynm-ip603010-primary-2:#2d8f77;
  --ynm-ip603010-radius:16px;
}

.ynm-ip603010{
  max-width:1100px; 
  margin:20px auto;
  padding:22px;
  border:1px solid var(--ynm-ip603010-border);
  border-radius:var(--ynm-ip603010-radius);
  background:linear-gradient(180deg,#fffefb 0%,#fff 65%,#f7f6f2 100%);
  color:var(--ynm-ip603010-text);
  box-shadow:0 8px 28px rgba(0,0,0,.05);
}

.ynm-ip603010__title{
  margin:0;
  font-family:"Playfair Display","Times New Roman",serif;
  font-size:34px;
  line-height:1.16;
}

.ynm-ip603010__desc{
  margin:9px 0 0;
  color:var(--ynm-ip603010-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.6;
}

.ynm-ip603010__controls{
  margin-top:16px;
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.ynm-ip603010__control{
  min-width:300px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ynm-ip603010__control span{
  color:var(--ynm-ip603010-muted);
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:12px;
}

.ynm-ip603010__input-row{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:10px;
}

.ynm-ip603010 [data-base-color],
.ynm-ip603010 [data-base-hex]{
  width:100%;
  height:44px;
  border:1px solid var(--ynm-ip603010-border);
  border-radius:10px;
  background:#fff;
  color:var(--ynm-ip603010-text);
  padding:8px 10px;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
  box-sizing:border-box;
}

.ynm-ip603010 [data-base-hex].is-invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

.ynm-ip603010__btn{
  border:1px solid var(--ynm-ip603010-border);
  border-radius:10px;
  background:#fff;
  color:var(--ynm-ip603010-text);
  padding:10px 14px;
  cursor:pointer;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
}

.ynm-ip603010__btn--primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(180deg,var(--ynm-ip603010-primary-2),var(--ynm-ip603010-primary));
}

.ynm-ip603010__layout{
  margin-top:16px;
  display:grid; 
  grid-template-columns:380px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

@media (max-width:980px){
  .ynm-ip603010{
    padding:16px;
  }

  .ynm-ip603010__layout{
    grid-template-columns:1fr;
  }

  .ynm-ip603010__control{
    min-width:100%;
  }
}
 
.ynm-ip603010__palettes{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  min-width:0;
  max-height:var(--ynm-ip603010-palettes-max-height, clamp(420px, 62vh, 560px));
  overflow:auto;
  padding-right:4px; 
}
 
.ynm-ip603010__palette{
  width:100%;
  border:1px solid var(--ynm-ip603010-border);
  background:#fff;
  color:var(--ynm-ip603010-text);
  border-radius:12px;
  padding:12px;
  text-align:left;
  cursor:pointer;
}

.ynm-ip603010__palette.is-active{
  border-color:#a3b5ab;
  box-shadow:0 0 0 3px rgba(44,126,102,.12);
}

.ynm-ip603010__palette-head{
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
}

.ynm-ip603010__palette-head strong{
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:14px;
  color:var(--ynm-ip603010-text);
}

.ynm-ip603010__swatches{
  margin-top:10px;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.ynm-ip603010__swatch{
  min-height:94px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.14);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.ynm-ip603010__swatch span,
.ynm-ip603010__swatch b,
.ynm-ip603010__swatch i{
  background:rgba(255,255,255,.85);
  color:#111827;
  font-family:"Montserrat","Segoe UI",sans-serif;
}

.ynm-ip603010__swatch span{
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 8px 0;
}

.ynm-ip603010__swatch b{
  font-size:11px;
  font-weight:700;
  padding:2px 8px 6px;
}

.ynm-ip603010__swatch i{
  position:absolute;
  right:6px;
  top:6px;
  font-size:10px;
  font-style:normal;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  padding:2px 7px;
}

.ynm-ip603010__preview{
  border:1px solid var(--ynm-ip603010-border);
  border-radius:14px;
  background:#fff;
  padding:12px;
  align-self:start;
  min-width:0;
}

.ynm-ip603010__preview-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.ynm-ip603010__selected-name{
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:13px;
  color:var(--ynm-ip603010-muted);
}

.ynm-ip603010__legend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ynm-ip603010__legend span{
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:#f5f6f8; 
  color:#374151;
}

.ynm-ip603010__scene,
.ynm-ip603010__scene-stack{
  margin-top:10px;
  display:block;
  width:100%; 
  height:auto;
  border-radius:10px;
  border:1px solid #ebe7de;
}

.ynm-ip603010__scene-stack{
  position:relative;
  min-height:220px; 
  aspect-ratio:1408 / 768;
  background:#f8f7f3;
  overflow:hidden;
  isolation:isolate;
}

.ynm-ip603010__scene-layer{
  position:absolute;
  inset:0;
   background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  pointer-events:none;
}

.ynm-ip603010__scene-layer--main{
  background-image:var(--ynm-scene-main);
  mix-blend-mode:normal;
  z-index:2;
}

.ynm-ip603010__scene-layer--secondary{
  background-image:var(--ynm-scene-secondary);
  mix-blend-mode:normal;
  z-index:3;
}

.ynm-ip603010__scene-layer--accent{
  background-image:var(--ynm-scene-accent);
  mix-blend-mode:normal;
  z-index:4;
}

.ynm-ip603010__scene-layer--full{
  background-image:var(--ynm-scene-full);
  mix-blend-mode:normal;
  z-index:1;
}

.ynm-ip603010__scene-layer--main::after,
.ynm-ip603010__scene-layer--secondary::after,
.ynm-ip603010__scene-layer--accent::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.92;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

.ynm-ip603010__scene-layer--main::after{
  background-color:var(--ynm-main-color, #D8D2C8);
}

.ynm-ip603010__scene-layer--secondary::after{
  background-color:var(--ynm-secondary-color, #7FA4AD);
}

.ynm-ip603010__scene-layer--accent::after{
  background-color:var(--ynm-accent-color, #D97862);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .ynm-ip603010__scene-layer--main::after{
    -webkit-mask-image:var(--ynm-scene-main);
    mask-image:var(--ynm-scene-main);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
  }

  .ynm-ip603010__scene-layer--secondary::after{
    -webkit-mask-image:var(--ynm-scene-secondary);
    mask-image:var(--ynm-scene-secondary);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
  }

  .ynm-ip603010__scene-layer--accent::after{
    -webkit-mask-image:var(--ynm-scene-accent);
    mask-image:var(--ynm-scene-accent);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:cover;
    mask-size:cover;
  }
}

.ynm-ip603010__scene-sr{
  position:absolute;
  inset:0;
}

.ynm-ip603010__scene-fallback{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Montserrat","Segoe UI",sans-serif;
  font-size:13px;
  color:var(--ynm-ip603010-muted);
}

.ynm-ip603010__scene-fallback[hidden]{
  display:none !important;
}

.ynm-ip603010__linework{
  fill:none;
  stroke:var(--ynm-line-color, rgba(0,0,0,.28));
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
 
@media (max-width:580px){
  .ynm-ip603010__preview{
    order:1;
  }

  .ynm-ip603010__palettes{ 
    order:2;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  .ynm-ip603010__palette{
    padding:10px;
  }

  .ynm-ip603010__palette-head strong{
    font-size:13px;
  }

  .ynm-ip603010__swatches{
    grid-template-columns:1fr;
    gap:6px;
  }

  .ynm-ip603010__swatch{
    min-height:76px;
  }
}