:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#242337;background:#faf9fc;font-synthesis:none;line-height:1.5;--ink:#242337;--muted:#6c6b7e;--line:#e8e5ee;--brand:#6a2c91;--suggested-primary:#6a2c91;--suggested-secondary:#a57ec5;--suggested-tertiary:#cfb3e6;--suggested-quaternary:#e8d2fa;--suggested-quinary:#f7edff}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,pre:focus-visible{outline:3px solid #9a6bc1;outline-offset:4px}button{color:inherit}a{color:var(--brand)}[hidden]{display:none!important}.page-width{max-width:1328px;margin:0 auto;padding-left:48px;padding-right:48px}.site-header{height:98px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;color:var(--ink);font-weight:780;font-size:26px;letter-spacing:-1.2px}.wordmark-dot{color:var(--brand)}.header-divider{width:1px;height:23px;background:#dad5e3}.product-name{font-size:14px;font-weight:550;letter-spacing:-.1px;color:#6b687c}.local-badge{margin-left:auto;display:flex;align-items:center;gap:8px;color:#6f6b7c;font-size:12px}.local-badge>span,.live-dot{width:6px;height:6px;display:inline-block;flex:none;border-radius:50%;background:#51a487}.intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:52px 0 43px}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:1.8px;font-weight:750;color:#8b6b9f;margin:0 0 12px}h1{font-size:44px;line-height:1.12;letter-spacing:-1.8px;font-weight:690;margin:0 0 18px}.intro-copy{font-size:15px;line-height:1.7;color:var(--muted);margin:0}.mini-palette{display:flex;align-items:center;padding:14px 0 14px 24px;transform:rotate(-7deg);margin-right:17px}.mini-palette i{display:block;width:42px;height:80px;margin-left:-6px;border:3px solid #faf9fc;border-radius:14px;box-shadow:0 5px 12px #34234b0a}.mini-palette i:nth-child(1){background:var(--suggested-primary);transform:rotate(-16deg) translateY(8px)}.mini-palette i:nth-child(2){background:var(--suggested-secondary);transform:rotate(-8deg) translateY(1px)}.mini-palette i:nth-child(3){background:var(--suggested-tertiary)}.mini-palette i:nth-child(4){background:var(--suggested-quaternary);transform:rotate(8deg) translateY(1px)}.mini-palette i:nth-child(5){background:var(--suggested-quinary);transform:rotate(16deg) translateY(8px)}.workspace{display:grid;grid-template-columns:314px minmax(0,1fr);gap:28px;align-items:start}.controls-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px 23px 0;box-shadow:0 4px 20px #29163b03;position:sticky;top:24px;overflow:hidden}.section-heading{display:flex;align-items:center;gap:11px}.step-number{display:inline-flex;align-items:center;justify-content:center;background:#f1edf7;color:#8c72a2;border-radius:7px;width:25px;height:25px;font-size:10px;font-weight:700}.section-heading h2{font-size:15px;letter-spacing:-.3px;font-weight:650;margin:0}.primary-control{padding-top:29px}.field-label{display:block;font-size:12px;font-weight:650;margin-bottom:11px;color:#555066}.primary-input-wrap{display:flex;align-items:center;border:1px solid #dcd5e5;border-radius:12px;overflow:hidden;padding:6px;gap:9px;background:#fff;box-shadow:0 2px 4px #29163b03}.primary-input-wrap:focus-within{border-color:#9b6db6;box-shadow:0 0 0 3px #6a2c910a}.primary-input-wrap input[type=color]{width:46px;height:46px;min-width:46px;cursor:pointer;background:transparent;border:0;padding:0;border-radius:7px;overflow:hidden}.primary-input-wrap input[type=color]::-webkit-color-swatch-wrapper,.tone-color::-webkit-color-swatch-wrapper{padding:0}.primary-input-wrap input[type=color]::-webkit-color-swatch,.tone-color::-webkit-color-swatch{border:0;border-radius:6px}.primary-input-wrap input[type=color]::-moz-color-swatch,.tone-color::-moz-color-swatch{border:0;border-radius:6px}.hex-mark{font-size:9px;font-weight:650;color:#9b94a7;align-self:flex-start;padding-top:6px;letter-spacing:.7px}.primary-input-wrap input[type=text]{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:19px;letter-spacing:-.7px;font-weight:550;width:100%;min-width:0;border:0;background:transparent;color:var(--ink);outline:none;padding:4px 2px 4px 0}.field-help{font-size:11px;color:#80798b;line-height:1.65;margin:12px 0 0}.input-error{font-size:11px;color:#a53342;margin:7px 0 0}.preset-row{display:flex;align-items:center;gap:9px;margin:21px 0 25px;padding-bottom:24px;border-bottom:1px solid #f0edf4}.preset-row>span{font-size:11px;color:#80798b;margin-right:7px}.preset{width:22px;height:22px;padding:0;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #e7e3ed;transition:box-shadow .15s,transform .15s}.preset:hover{transform:translateY(-2px)}.preset[aria-pressed=true]{box-shadow:0 0 0 2px #8d6aaa}.preset-purple{background:#6a2c91}.preset-blue{background:#2057a5}.preset-green{background:#22634d}.preset-coral{background:#b64032}.tone-heading{display:flex;align-items:center;justify-content:space-between}.tone-heading h3{font-size:12px;font-weight:650;margin:0}.text-button{border:0;background:none;padding:0;color:#7a4d98;font-size:11px;font-weight:600;white-space:nowrap}.text-button>span{margin-left:3px;font-size:14px}.text-button:hover{text-decoration:underline}.tone-description{font-size:11px;color:#80798b;margin:6px 0 17px}.tone-list{display:flex;flex-direction:column;gap:10px}.tone-row{display:grid;grid-template-columns:36px 1fr 86px;align-items:center;gap:11px;padding:9px 10px;border:1px solid #eeeaf3;border-radius:9px;background:#fff}.tone-color{height:35px;width:35px;padding:0;border:0;background:none;border-radius:6px;overflow:hidden;cursor:pointer}.tone-label{font-size:11px;font-weight:600;margin:0;display:flex;flex-direction:column;gap:1px;min-width:0}.tone-origin{font-size:9px;font-weight:400;color:#9a92a5}.tone-row input[type=text]{width:100%;border:0;background:none;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#797084;padding:5px 0 5px 2px;text-align:right;min-width:0;outline:none;letter-spacing:-.2px}.tone-row input[aria-invalid=true]{color:#ac3547}.tone-row input[type=text]:focus-visible{outline:2px solid #b39bc4;outline-offset:2px;border-radius:2px}.tone-error{grid-column:1/-1;font-size:10px;color:#a53342;margin:0}.palette-note{margin:17px 0 21px;font-size:10px;color:#887e92;line-height:1.7}.contrast-warning{background:#fff5df;border:1px solid #f3deb5;color:#845b1e;padding:11px;border-radius:8px;font-size:11px;line-height:1.65;margin:0 0 18px}.palette-footer{font-size:10px;line-height:1.6;color:#8b8295;border-top:1px solid var(--line);padding:15px 20px;margin:0 -23px;display:flex;gap:9px;background:#fdfcfe}.tiny-spark{font-size:20px;line-height:1.2;color:#9b7eb0}.preview-panel{min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:2px 0 19px}.preview-caption{font-size:11px;color:#8a8296;margin:7px 0 0 36px}.view-switch{display:flex;background:#efedf3;border:1px solid #e8e4ed;border-radius:9px;padding:3px;gap:2px}.view-switch button{font-size:11px;font-weight:550;border:0;background:none;padding:7px 12px;border-radius:6px;color:#8a8094;white-space:nowrap}.view-switch button[aria-pressed=true]{background:#fff;color:#493853;box-shadow:0 1px 4px #352a4a0d}.preview-canvas{padding:18px 21px 14px;background:#f1eff6;border:1px solid #e8e4ef;border-radius:16px;--canvas-card:#fff;--canvas-title:#42384f;--canvas-subtle:#978c9e;--canvas-border:#e9e3ef;transition:background .2s}.canvas-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.canvas-topline>span{font-size:9px;letter-spacing:1.6px;color:#9a8da7;font-weight:650}.canvas-switch{display:flex;gap:4px}.canvas-switch button{font-size:9px;line-height:1;background:transparent;border:1px solid transparent;padding:6px 8px;border-radius:5px;color:#9a8da7}.canvas-switch button[aria-pressed=true]{color:#6a537f;background:#ffffff94;border-color:#e6dfee}.icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.icon-card{background:var(--canvas-card);border:1px solid var(--canvas-border);border-radius:11px;padding:20px 8px 13px;text-align:center;min-width:0;transition:transform .16s,box-shadow .16s}.icon-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #27113809}.icon-imagebox{width:82px;height:82px;margin:0 auto 14px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:#fff}.icon-imagebox img{display:block;width:100%;height:100%;object-fit:contain}.icon-imagebox.loading{background:linear-gradient(110deg,#f6f3f9 30%,#fff 50%,#f6f3f9 70%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite}.icon-card h3{font-size:10px;font-weight:600;line-height:1.4;margin:0;color:var(--canvas-title);overflow-wrap:anywhere}.icon-card .slot-count{display:block;color:var(--canvas-subtle);font-size:9px;margin-top:3px;line-height:1.5}.canvas-bottomline{display:flex;align-items:center;justify-content:space-between;color:#9a8da7;font-size:9px;gap:12px;padding-top:17px}.canvas-bottomline>span:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;background:#a18db7}.preview-footnote{font-size:10px;line-height:1.7;color:#968c9e;padding:0 3px;margin:13px 0 27px}.preview-canvas.dark{background:#20232d;border-color:#20232d;--canvas-card:#2b2e39;--canvas-title:#f2edf7;--canvas-subtle:#aaa3b6;--canvas-border:#3a3d48}.preview-canvas.dark .canvas-topline>span,.preview-canvas.dark .canvas-bottomline{color:#a8a0b4}.preview-canvas.dark .canvas-switch button{color:#ada5b9}.preview-canvas.dark .canvas-switch button[aria-pressed=true]{background:#3a3647;border-color:#55465e;color:#f2edf7}.preview-error{padding:12px;font-size:11px;background:#fff7e7;color:#835a21;border-radius:7px;margin-top:12px}.export-panel{border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px}.export-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.export-topline .eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:7px}.export-topline h2{font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.5px;margin:0 0 6px}.export-topline p:not(.eyebrow){font-size:11px;color:#8a8094;margin:0}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#33223f;color:#fff;border:1px solid #33223f;border-radius:8px;padding:10px 13px;font-size:11px;font-weight:550;white-space:nowrap;box-shadow:0 2px 4px #33223f0a}.primary-button:hover{background:#51305f}.code-preview{border:1px solid #eee9f3;border-radius:9px;overflow:hidden;background:#faf8fc}.code-toolbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #eee9f3;background:#f5f2f8;color:#9b8fa5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px}.code-toolbar>span:last-child{font-family:inherit;color:#aa9db2;font-size:8px}pre{margin:0;padding:14px 18px;overflow:auto;font-size:11px;line-height:1.8;color:#87629e;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.export-actions{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.how-it-works{margin:22px 3px 0;color:#8c8195;font-size:11px;line-height:1.8}.how-it-works summary{cursor:pointer;font-weight:550;color:#75677f}.how-it-works>div{padding:3px 0 0}.how-it-works code{font-size:10px;background:#efeaf5;padding:2px 4px;border-radius:3px;color:#79588f}.how-it-works a{color:#79588f}.inline-button{font-size:inherit;color:#79588f;text-decoration:underline;background:none;border:0;padding:0}.site-footer{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#a69aad;margin-top:48px;padding-top:22px;padding-bottom:28px;border-top:1px solid var(--line)}.skip-link{position:absolute;top:-100px;left:20px;background:#fff;border:1px solid var(--line);padding:10px 16px;z-index:10}.skip-link:focus{top:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#302239;color:#fff;box-shadow:0 5px 25px #23163126;border-radius:10px;padding:12px 18px;font-size:13px;z-index:100;max-width:calc(100% - 32px);text-align:center}.noscript-message{padding:24px;text-align:center;background:#fff4df}@keyframes loading{to{background-position:-200% 0}}
@media(min-width:1450px){.page-width{max-width:1400px}.workspace{grid-template-columns:326px minmax(0,1fr);gap:35px}.icon-imagebox{width:92px;height:92px}.icon-card h3{font-size:11px}.icon-card{padding:23px 8px 16px}.icon-grid{gap:12px}.tone-row{padding:10px}.controls-panel{padding-top:27px}}
@media(max-width:1120px){.page-width{padding-left:30px;padding-right:30px}.workspace{grid-template-columns:290px minmax(0,1fr);gap:22px}.controls-panel{padding-left:19px;padding-right:19px}.palette-footer{margin-left:-19px;margin-right:-19px}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-canvas{padding-left:14px;padding-right:14px}.preview-toolbar{align-items:flex-start}.view-switch button{padding:7px 8px}.icon-card{padding-top:16px}.icon-imagebox{width:76px;height:76px}.export-panel{padding:20px}.export-topline{align-items:flex-start;flex-direction:column}.primary-button{align-self:flex-start}.mini-palette i{width:35px;height:70px}h1{font-size:39px}}
@media(max-width:820px){.page-width{padding-left:24px;padding-right:24px}.site-header{height:79px;gap:15px}.local-badge{font-size:0;gap:0}.local-badge>span{width:7px;height:7px}.intro{padding-top:35px;padding-bottom:31px}.intro h1{font-size:35px}.intro-copy{font-size:13px}.desktop-break{display:none}.mini-palette{display:none}.workspace{grid-template-columns:270px minmax(0,1fr);gap:18px}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-caption{margin-left:0;font-size:10px}.preview-toolbar{flex-direction:column;gap:12px}.view-switch{align-self:stretch}.view-switch button{flex:1}.icon-imagebox{width:74px;height:74px}.canvas-bottomline{align-items:flex-start}.canvas-bottomline>span:last-child{display:none}.preview-footnote{margin-bottom:20px}.section-heading{gap:8px}.section-heading h2{font-size:14px}.export-topline h2{font-size:18px}.export-topline p:not(.eyebrow){font-size:10px}.export-panel{padding:16px}.code-toolbar>span:last-child{display:none}.code-toolbar{padding-left:11px}pre{padding:12px;font-size:10px}.export-actions{gap:12px;flex-wrap:wrap}.text-button{font-size:10px}.site-footer{margin-top:32px;align-items:flex-start}}
@media(max-width:620px){.page-width{padding-left:20px;padding-right:20px}.site-header{gap:12px;height:73px}.wordmark{font-size:24px}.product-name{font-size:11px}.header-divider{height:20px}.workspace{grid-template-columns:1fr;gap:30px}.controls-panel{position:static;padding:23px 21px 0}.palette-footer{margin:0 -21px;padding-left:21px;padding-right:21px}.primary-input-wrap input[type=text]{font-size:22px}.primary-input-wrap input[type=color]{width:50px;height:50px}.primary-control{padding-top:23px}.preset-row{margin-bottom:22px;padding-bottom:22px}.tone-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tone-row{grid-template-columns:29px 1fr;gap:8px;padding:10px 9px}.tone-color{width:29px;height:29px;grid-row:1/3}.tone-row input[type=text]{grid-column:2;text-align:left;padding:0;font-size:11px;margin-top:-6px}.tone-label{font-size:10px;gap:0}.tone-origin{font-size:8px}.tone-row .tone-error{grid-column:1/-1;font-size:9px}.palette-note{font-size:11px}.palette-footer{font-size:10px}.tone-description{font-size:12px}.field-help{font-size:12px}.field-label{font-size:13px}.intro h1{font-size:32px;letter-spacing:-1.2px;max-width:340px}.intro-copy{font-size:14px;line-height:1.65}.eyebrow{font-size:9px}.intro{padding:30px 0}.preview-toolbar{flex-direction:row;align-items:center;gap:10px}.preview-toolbar .view-switch{align-self:center}.view-switch button{font-size:10px;padding:8px}.preview-caption{font-size:10px;margin-top:6px}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.preview-canvas{padding:14px 12px}.icon-imagebox{width:67px;height:67px}.icon-card{padding:15px 4px 11px}.icon-card h3{font-size:10px}.icon-card .slot-count{font-size:9px}.canvas-bottomline{font-size:8px}.export-panel{padding:21px}.export-topline{flex-direction:row;align-items:center}.export-topline h2{font-size:19px}.primary-button{padding:10px;font-size:10px;align-self:center}.primary-button svg{display:none}.export-topline p:not(.eyebrow){font-size:10px}.code-toolbar>span:last-child{display:block}.code-toolbar{font-size:9px}pre{font-size:11px;padding:13px 16px}.export-actions .text-button{font-size:11px}.how-it-works{font-size:12px}.site-footer{font-size:10px;line-height:1.6;flex-direction:column;gap:5px;padding-top:20px}.preview-footnote{font-size:10px}}
@media(max-width:360px){.page-width{padding-left:15px;padding-right:15px}.intro h1{font-size:30px}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.icon-imagebox{width:78px;height:78px}.preview-toolbar{flex-wrap:wrap}.preview-toolbar .view-switch{width:100%}.export-topline{flex-direction:column;align-items:flex-start}.primary-button{align-self:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}