.color-page{--color-violet:#6657f6;--color-ink:#17162d;--color-mint:#e9fff7}.color-hero{background:radial-gradient(circle at 88% 15%,#dff7ff 0,transparent 34%),linear-gradient(135deg,#fff 20%,#f4f1ff 100%)}.color-hero-media{margin:0;border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 24px 70px rgba(36,30,94,.16)}.color-hero-media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.color-hero-media figcaption,.color-card-media figcaption{padding:.8rem 1rem;background:#fff;color:#5b5874;font-size:.9rem}.color-editor{background:#f7f7ff}.color-workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);max-width:1120px;margin:auto;border:1px solid #e3e0f4;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:0 24px 70px rgba(35,30,88,.12)}.color-dropzone{position:relative;min-height:470px;cursor:pointer;overflow:hidden;background:#e8e8f2;outline:none}.color-dropzone:focus-visible{box-shadow:inset 0 0 0 4px #6b5cff}.color-dropzone>img{display:block;width:100%;height:100%;min-height:470px;object-fit:cover}.color-drop-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;color:#fff;background:linear-gradient(180deg,rgba(16,15,35,.18),rgba(16,15,35,.72));transition:.2s ease}.color-dropzone.is-dragging .color-drop-overlay{background:rgba(102,87,246,.82)}.color-drop-overlay>span:first-child{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:.75rem;background:#fff;color:#5a4af0;font-size:1.75rem}.color-drop-overlay strong{font-size:1.25rem}.color-drop-overlay small{margin:.35rem 0 1rem}.color-controls{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,4vw,3rem)}.color-controls label{font-weight:800;margin-bottom:.65rem}.color-controls textarea{min-height:140px;padding:1rem;border:1px solid #d9d5ed;border-radius:16px;resize:vertical}.color-controls textarea:focus{outline:3px solid rgba(102,87,246,.2);border-color:#6657f6}.color-swatches{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.4rem}.color-swatches button{border:1px solid #ddd8f2;background:#fff;border-radius:999px;padding:.42rem .75rem;color:#403b61}.color-swatches button:hover,.color-swatches button:focus-visible{background:#eeeaff;border-color:#6657f6}.color-split,.color-accuracy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}.color-split.reverse>div{order:2}.color-split.reverse>figure{order:1}.color-card-media{margin:0;border:1px solid #e4e0f3;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(30,26,70,.1)}.color-card-media img{display:block;width:100%;height:auto}.color-use{background:#131329;color:#fff}.color-use .section-heading p{color:#c9c7dd}.color-use-grid,.color-benefit-grid,.color-tip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.color-use-grid article,.color-benefit-grid article,.color-tip-grid article{border:1px solid rgba(113,99,255,.15);border-radius:22px;padding:1.4rem;background:#fff;color:#25223b}.color-use-grid article{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.13)}.color-use-grid span,.color-tip-grid strong{color:#8f82ff;font-weight:900}.color-benefits,.color-tips{background:#f8f7ff}.color-product{background:linear-gradient(135deg,#f1fff9,#fff)}.color-brand{background:#fffaf2}.color-accuracy-grid aside{padding:1rem 1.15rem;border-left:4px solid #6657f6;border-radius:0 14px 14px 0;background:#f0edff}.color-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.color-gallery figure{margin:0;overflow:hidden;border:1px solid #e2def0;border-radius:20px;background:#fff}.color-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}.color-gallery figure:last-child img{object-position:center 34%}.color-gallery figcaption{padding:.75rem 1rem;font-weight:700}.color-limit-card{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:clamp(1.5rem,4vw,3rem);border-radius:30px;background:#17162c;color:#fff}.color-limit-card img{width:100%;border-radius:20px}.color-final{background:linear-gradient(135deg,#5c4bef,#8d5af2)}.replace-step-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:991.98px){.color-workspace,.color-split,.color-accuracy-grid,.color-limit-card{grid-template-columns:1fr}.color-split.reverse>div,.color-split.reverse>figure{order:initial}.color-dropzone,.color-dropzone>img{min-height:380px}.color-use-grid,.color-benefit-grid,.color-tip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-gallery{grid-template-columns:1fr 1fr}.replace-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:575.98px){.color-hero-media{border-radius:20px}.color-workspace{border-radius:20px}.color-dropzone,.color-dropzone>img{min-height:300px}.color-use-grid,.color-benefit-grid,.color-tip-grid,.color-gallery,.replace-step-grid{grid-template-columns:1fr!important}.color-controls{padding:1.25rem}.color-limit-card{border-radius:22px}}
@media(prefers-reduced-motion:reduce){.color-drop-overlay{transition:none}}