:root{--ink:#322555;--accent:#ed674e;--line:#e4dcef;--category-color:#6c46b9;color:var(--ink);background:#faf7fd}body{background:radial-gradient(ellipse at 0 10%,#f7e5ed88,transparent 45%),radial-gradient(ellipse at 100% 55%,#ddf2ec66,transparent 35%),#faf7fd}.brand-symbol{color:#ed674e;background:#fff1d2;border-radius:12px;padding:0 6px}.wordmark>span:last-child{font-size:18px}.store-link{color:#654b93;background:#f0e9fa;padding:10px 14px;border-radius:20px}header{border-bottom:0;padding-top:18px;padding-bottom:18px}.intro{position:relative;margin:8px 0 28px;padding:36px 40px;gap:25px;overflow:hidden;border-radius:28px;background:linear-gradient(120deg,#54389f,#8758c8 64%,#ac63bd);box-shadow:0 12px 30px #603b9716;color:#fff;grid-template-columns:1.25fr 1fr}.intro:before{content:'';position:absolute;width:280px;height:280px;right:-90px;top:-110px;border-radius:50%;border:45px solid #ffffff0b;pointer-events:none}.intro h1{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(35px,4vw,52px);letter-spacing:-1.7px;line-height:1.04;margin-bottom:14px}.intro .eyebrow{color:#ffdf81;font-size:9px;letter-spacing:1.8px}.intro p:not(.eyebrow){color:#f2e7ff;font-size:14px;line-height:1.6;max-width:340px}.intro-copy{position:relative;z-index:1}.intro-art{width:235px;height:235px;box-shadow:0 0 0 12px #ffffff11,0 12px 30px #20134f33;background:#fff4d7;transform:rotate(8deg);position:relative;z-index:1}.collection-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.collection-pills span{font-size:10px;font-weight:700;padding:7px 10px;border-radius:20px;background:#ffffff18;border:1px solid #ffffff22;color:white}.hero-spark{position:absolute;z-index:2;color:#ffdb69;font-size:34px}.spark-one{right:31px;top:34px}.spark-two{right:280px;bottom:23px;font-size:25px}.collection-controls{background:#fff;border:1px solid var(--line);border-radius:22px;padding:23px 26px;box-shadow:0 6px 25px #56358006}.choose-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.step-dot{display:grid;place-items:center;width:36px;height:36px;background:linear-gradient(135deg,#ffb83d,#f27645);color:#fff;border-radius:12px;font-size:16px;font-weight:800}.choose-heading h2{font-size:22px;letter-spacing:-.5px;margin:0 0 5px}.choose-heading p{font-size:12px;color:#7c718d;margin:0}.category-label{display:block;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#80738e;font-weight:800;margin-bottom:8px}#category-select{width:100%;max-width:100%;padding:14px 16px;min-height:52px;font-size:16px;font-weight:700;color:var(--category-color);border:2px solid color-mix(in srgb,var(--category-color) 24%,white);border-radius:13px;background:#fbf9ff;cursor:pointer;appearance:auto}.category-description{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-top:13px}.category-description p{font-size:12px;line-height:1.6;color:#7b6e89;margin:0}.category-description #design-count{color:var(--category-color);font-size:11px;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--category-color) 10%,white);border-radius:20px;padding:6px 10px}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:24px 2px 16px}.preview-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.preview-heading>span{font-size:11px;color:#7f6c96}.design-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.design-card{border-radius:19px;border:1px solid #e6dfed;box-shadow:0 5px 15px #48337307;transition:transform .16s,box-shadow .16s}.design-card:hover{transform:translateY(-3px);box-shadow:0 9px 25px #48337313;border-color:var(--card-tint)}.design-card .thumb{background:linear-gradient(135deg,#fff,#fcfbff);padding:18px;border-bottom:0}.design-card .thumb:before{content:'';position:absolute;inset:9px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #f0edf5;pointer-events:none}.thumb svg,.thumb img{position:relative;z-index:1}.design-card .card-copy{padding:15px 17px;background:color-mix(in srgb,var(--card-tint) 7%,white);border-top:1px solid #eee8f4}.card-copy small{color:var(--card-tint);font-size:8px}.card-copy strong{font-size:16px;line-height:1.25;letter-spacing:-.3px;min-height:40px}.card-copy .design-detail{font-size:10px;color:#80728a;align-items:center}.card-copy .design-detail>span:last-child{font-size:10px;color:var(--card-tint);font-weight:800;border-radius:50%;background:#fff;width:25px;height:25px;display:grid;place-items:center}.preview-chip{position:absolute;bottom:12px;right:12px;z-index:2;background:var(--card-tint);border:2px solid #fff;color:white;font-size:9px;border-radius:20px;padding:6px 10px}.saved-badge{background:#f4b643;color:#473428;z-index:3;font-size:9px}.empty-collection{grid-column:1/-1;background:#fff;padding:35px;border:1px dashed #cdbede;border-radius:18px;font-size:14px;line-height:1.7;color:#766489}.storage-note{color:#88798f;font-size:11px;padding:18px 0;margin:0}.studio-heading h1{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:28px;color:#382557;letter-spacing:-.8px}.studio-heading .eyebrow{color:#99723d}.primary{background:linear-gradient(110deg,#6c42b2,#9757c2);box-shadow:0 5px 12px #6c42b21a;border:0}.quiet{color:#684b8b;background:#fff}.paper{background:linear-gradient(130deg,#e5d6f5,#d9edec);box-shadow:0 7px 24px #5137760c}.tools{border-color:#e5dcec;box-shadow:0 8px 25px #51377608}.tool-heading h2{color:#4b306c}.active-color{box-shadow:0 0 0 2px #dcccea}.tool-options button[aria-pressed=true]{background:linear-gradient(135deg,#7250bb,#965fcb);border-color:#8255c0;box-shadow:0 4px 10px #7650b422}.tool-options button{background:#fbf8fe;border-color:#e9e0f0}.palette button[aria-pressed=true]{box-shadow:0 0 0 2px #7750af}input[type=range]{accent-color:#8b56bb}.custom-color{color:#705883}.save-status{color:#438668}.size-label,.palette-heading h3{color:#654e7c}.history-tools button{background:#faf5fd;color:#735291;border-color:#e5d9ed}.clear{color:#bc554d}.tool-note{color:#8a7a98}footer{border-color:#e6deed;color:#785797}footer span{color:#8d7d98}dialog{width:min(570px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #ded1ea;border-radius:25px;background:#faf7fd;padding:22px;box-shadow:0 20px 90px #26133d55;color:var(--ink)}dialog::backdrop{background:#24133799;backdrop-filter:blur(4px)}.preview-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.preview-top h2{font-size:22px;line-height:1.2;margin:0;letter-spacing:-.4px}.preview-top .eyebrow{color:var(--category-color);font-size:9px;letter-spacing:1.4px;margin-bottom:6px}.preview-top button{border-radius:50%;background:#fff;padding:0;width:40px;min-height:40px;flex-shrink:0}.preview-art{border-radius:16px;border:1px solid #e5ddec;background:#fff;padding:12px;max-width:410px;margin:auto}.preview-art svg{display:block;width:100%;height:auto}.preview-switcher{display:flex;align-items:center;justify-content:center;gap:20px;margin:13px 0}.preview-switcher button{width:42px;min-height:40px;padding:5px;font-size:20px;border-radius:12px}.preview-switcher span{font-size:11px;color:#8a759a}.preview-note{font-size:10px;color:#887494;text-align:center;line-height:1.5;margin-bottom:0}#start-coloring{display:block;width:100%;min-height:49px;font-size:14px}.preview-mode .studio-heading h1{font-size:24px}.preview-mode .paper{box-shadow:none}.preview-mode header{border-bottom:1px solid #e5dcec}.preview-mode .tools{box-shadow:none}@media(max-width:900px){.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.intro{padding:28px}.intro-art{width:205px;height:205px}.spark-two{right:225px}}@media(max-width:650px){.intro{grid-template-columns:1fr 115px;gap:13px;padding:25px 20px;margin-top:4px;margin-bottom:19px;border-radius:23px}.intro h1{font-size:34px;letter-spacing:-1.5px}.intro p:not(.eyebrow){font-size:12px;line-height:1.45}.intro .eyebrow{font-size:8px;letter-spacing:1.1px}.intro-art{width:112px;height:112px;box-shadow:0 0 0 6px #ffffff14,0 8px 20px #28164f20}.collection-pills{grid-column:1/-1;gap:6px;margin-top:14px}.collection-pills span{font-size:8px;padding:6px 8px}.hero-spark{font-size:21px}.spark-one{right:13px;top:17px}.spark-two{right:120px;bottom:15px;font-size:19px}.collection-controls{padding:18px;border-radius:19px}.choose-heading{gap:10px;margin-bottom:15px}.choose-heading h2{font-size:20px}.choose-heading p{font-size:11px}.step-dot{width:32px;height:32px;border-radius:10px}.category-description{gap:10px}.category-description p{font-size:11px}.category-description #design-count{font-size:9px;padding:6px 8px}#category-select{font-size:15px;min-height:50px;padding:12px}.preview-heading{align-items:start;flex-direction:column;gap:5px;padding:22px 0 14px}.preview-heading h2{font-size:19px}.preview-heading>span{font-size:10px}.design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.design-card .thumb{padding:13px}.design-card .thumb:before{inset:7px;border-radius:9px}.design-card .card-copy{padding:12px}.card-copy strong{font-size:14px;min-height:36px}.card-copy .design-detail{font-size:9px}.preview-chip{font-size:8px;bottom:8px;right:8px;padding:5px 8px}.saved-badge{font-size:8px;padding:5px 7px;right:9px;top:9px}.studio-heading h1{font-size:24px}dialog{padding:17px;border-radius:21px}.preview-top h2{font-size:20px}.preview-art{padding:8px}.store-link{font-size:9px;padding:9px 10px}}@media(max-width:370px){.intro{grid-template-columns:1fr 86px}.intro-art{display:block;width:82px;height:82px}.intro h1{font-size:29px}.intro p:not(.eyebrow){font-size:11px}.wordmark>span:last-child{font-size:16px}.collection-pills span{font-size:8px}.category-description{flex-direction:column;gap:7px}}@media(prefers-reduced-motion:reduce){.design-card{transition:none}.design-card:hover{transform:none}}

/* Expanded swatches stay compact and scroll within the toolkit. */
.palette-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;grid-column:1/-1;font-size:9px;color:#927b9d;margin:3px 0 7px}
.palette-caption>span:first-child{color:#715292;font-weight:700}
.palette{max-height:225px;overflow-y:auto;overscroll-behavior:contain;padding:4px;margin-top:0;scrollbar-width:thin;scrollbar-color:#bca5d4 transparent;grid-template-columns:repeat(6,minmax(0,1fr))}
.palette button{flex-shrink:0;min-width:0}
.color-picker-fields{display:flex;gap:9px;align-items:center}.color-picker-fields output{font-size:10px;font-weight:700;color:#705883}
.preview-mode .palette{max-height:64px;grid-template-columns:repeat(12,minmax(0,1fr));overflow-y:auto}
.preview-mode .palette-caption{font-size:8px;margin:2px 0 5px}.preview-mode .color-picker-fields output{font-size:9px}
@media(max-width:650px){.palette{grid-template-columns:repeat(6,minmax(0,1fr));max-height:225px;gap:9px}.palette-caption{font-size:10px}.preview-mode .palette{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}}

/* Browse the large library in comfortable batches. */
.design-search-label{display:flex;flex-direction:column;gap:8px;margin:18px 0 0;font-size:11px;font-weight:700;color:#7e6795}.design-search-label input{width:100%;padding:14px 16px;border:1px solid #ded1eb;background:#fff;border-radius:13px;color:#382557;font:inherit;font-size:16px;min-height:48px}.design-search-label input:focus{outline:2px solid #a079cf;outline-offset:2px}.library-pagination{display:flex;gap:18px;align-items:center;justify-content:center;padding:22px 0 4px}.library-pagination span{font-size:12px;color:#846b98}.library-pagination button{min-height:46px;padding:12px 20px}.library-pagination button[hidden]{display:none}
/* Color families make the full spectrum easy to explore by touch. */
.color-families{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:16px 0}.color-families button{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:0;min-height:52px;padding:6px 2px;border:1px solid transparent;border-radius:11px;background:#faf6fe;color:#735487;font-size:9px;font-weight:700}.color-families i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000010}.color-families button[aria-pressed=true]{border-color:#8d58b9;background:#f1e5fb;box-shadow:0 0 0 1px #8d58b9}.palette{max-height:306px;gap:8px}.palette button{min-height:42px;height:42px;border-radius:10px}.palette button[aria-pressed=true]{outline:3px solid #6e419f;outline-offset:2px;box-shadow:inset 0 0 0 3px #fff}.custom-color{background:#f7f0fc;border:1px solid #e5d6f0;padding:12px;border-radius:12px;margin-top:15px}.active-color{width:30px;height:30px;border:3px solid white}.preview-mode .color-families{display:none}.preview-mode .palette button{height:22px;min-height:22px;border-radius:5px}.preview-mode .custom-color{padding:3px 0;border:0;background:transparent;margin-top:5px}.preview-mode .active-color{width:25px;height:25px}
@media(max-width:650px){.library-pagination{flex-direction:column;gap:10px}.palette button{min-height:44px;height:44px}.preview-mode .palette button{height:22px;min-height:22px}.color-families button{min-height:56px;font-size:10px}}
.color-families{grid-column:1/-1}.palette{grid-template-columns:repeat(5,minmax(0,1fr))}.custom-color{gap:10px;flex-wrap:wrap}.palette-heading select{max-width:145px;min-height:40px}.preview-mode .palette-heading select{min-height:28px}
@media(max-width:850px) and (min-width:651px){.palette{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:650px){.palette{grid-template-columns:repeat(6,minmax(0,1fr))}}.preview-mode .palette{grid-template-columns:repeat(12,minmax(0,1fr))}

.children-section{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:16px 0;padding:14px 16px;border:2px solid #f0bf63;border-radius:16px;background:#fff5d9;color:#713c25;font:inherit;font-weight:800;text-align:left;cursor:pointer}.children-section span{font-size:.8rem;font-weight:600}.children-section:focus-visible{outline:3px solid #6c42b2;outline-offset:3px}#collection-controls{scroll-margin-top:80px}@media(max-width:400px){.children-section{align-items:flex-start;flex-direction:column;gap:4px}}

/* Library gallery shows the actual dropdown and complete design tiles. */
.library-preview .intro,.library-preview .design-search-label,.library-preview .library-pagination,.library-preview .storage-note{display:none}
.library-preview .collection-controls{margin:14px 0;padding:12px}
.library-preview .children-section{padding:9px;font-size:12px;margin:8px 0}
.library-preview .choose-heading h2{font-size:18px}.library-preview .choose-heading p{font-size:11px}
.library-preview .design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.library-preview .design-grid .thumb{aspect-ratio:1}.library-preview .card-copy{padding:9px}
.library-preview .card-copy strong{font-size:13px}.library-preview .card-copy small{font-size:8px}
.library-preview .preview-heading{margin:14px 0}.library-preview .preview-heading h2{font-size:18px}
.library-preview .category-description{font-size:10px}.library-preview .design-detail{display:none}
