*{box-sizing:border-box}body{margin:0;background:#f6f7f8;color:#162c3b;font:14px/1.5 Arial,sans-serif}button,input,select{font:inherit}button,.file-button{border:1px solid #d7dee5;background:#fff;color:#243e50;border-radius:8px;padding:10px 12px;cursor:pointer;min-height:42px}button:hover,.file-button:hover{background:#edf2f5}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.file-button:focus-visible{outline:3px solid #ff784e;outline-offset:2px}.primary{background:#f44a22;color:#fff;border-color:#f44a22}.primary:hover{background:#d73510;color:#fff}header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:#fff;border-bottom:1px solid #e0e5ea}.brand{color:#17354b;text-decoration:none;font-size:20px;font-weight:700;letter-spacing:2px}.brand span{font-size:12px;color:#f44a22}.head-note{font-size:13px;color:#6b7984}main{max-width:1600px;padding:24px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#a63a1e;font-weight:700}h1{font-size:clamp(26px,2.6vw,36px);line-height:1.2;font-weight:500;margin:8px 0}p{margin:8px 0;color:#667985}.badge{font-size:12px;border:1px solid #dbe2e7;border-radius:24px;padding:8px 12px;white-space:nowrap}.studio{display:grid;grid-template-columns:240px minmax(0,1fr) 270px;gap:16px;align-items:start}.tools,.properties{min-width:0;padding:18px;background:#fff;border:1px solid #dde4ea;border-radius:12px}.workspace{min-width:0;padding:16px;background:#eaf0f3;border:1px solid #dde4ea;border-radius:12px;position:sticky;top:16px}h2{font-size:16px;font-weight:500;margin:16px 0 12px}h3{font-size:14px;font-weight:500;margin:24px 0 12px}.hint{font-size:12px;line-height:1.6;color:#70808b}nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid #e3e8ec;padding-bottom:12px}nav button{font-size:12px;flex:1;padding:8px 6px;border-color:transparent}.active{background:#fff0ea!important;border-color:#ffbca8!important;color:#a33317!important}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.template-grid button{padding:0;overflow:hidden;font-size:11px}.template-grid svg{width:100%;height:70px;display:block}.template-grid span{display:block;padding:6px;background:#f9fafb}.palettes{display:flex;flex-wrap:wrap;gap:8px}.palettes button{display:flex;gap:3px;padding:7px}.palettes i{display:block;width:18px;height:18px;border:1px solid #0001;border-radius:50%}.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.icons button{padding:9px;min-width:0}.icons svg{display:block;width:26px;height:26px;margin:auto}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}.toolbar>div{display:flex;gap:5px}.toolbar button{font-size:12px;padding:8px 10px;min-height:38px}#save-status{font-size:11px;color:#607580;flex:1 1 90px}.canvas-wrap{width:100%;aspect-ratio:4/3;background:#fff;background-image:linear-gradient(45deg,#e9edef 25%,transparent 25%),linear-gradient(-45deg,#e9edef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9edef 75%),linear-gradient(-45deg,transparent 75%,#e9edef 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;box-shadow:0 4px 14px #132b3810}#canvas{width:100%;height:100%;display:block;touch-action:none}#canvas [data-id]{cursor:move}.canvas-caption{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:11px;color:#6c7e87}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.preview-heading h2{font-size:13px}.preview-heading span{font-size:11px;color:#6c7e87}.previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.preview{background:#fff;border-radius:8px;min-width:0;text-align:center;padding:7px}.preview .mini svg{width:100%;height:72px;display:block}.preview span{font-size:10px;color:#697e88}.preview.dark{background:#162f40}.preview.dark span{color:#bed0dc}.site-bar{font-size:8px;color:#aab5bd;text-align:left;border-bottom:1px solid #eee}.site .mini svg{height:56px}.site-lines{height:3px;width:55%;margin:3px auto 7px;background:#e3e8ec}.properties>h2:first-of-type{margin-top:0}label{display:block;font-size:13px;margin:14px 0;color:#536c7b}input:not([type=checkbox]):not([type=range]):not([type=color]),select{width:100%;min-width:0;display:block;border:1px solid #d0dbe3;padding:10px;border-radius:7px;background:#fff;color:#1b3646;margin-top:6px;min-height:42px}input[type=color]{display:block;margin-top:6px;width:100%;height:40px;border:1px solid #d0dbe3;border-radius:7px;background:white;padding:3px}input[type=range]{width:100%;display:block;accent-color:#f44a22;margin-top:10px;min-height:24px}input[type=checkbox]{accent-color:#f44a22;width:18px;height:18px;flex-shrink:0}.check{display:flex;align-items:flex-start;gap:8px}.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:14px 0}.two button{font-size:12px;padding:9px 6px}.two label{margin:0}.wide,.file-button{display:block;width:100%;text-align:center;margin:14px 0;font-size:13px}.danger{color:#b43d32}#layers{display:grid;gap:7px}#layers button{text-align:left;overflow-wrap:anywhere;min-width:0;font-size:13px}.selected{background:#fff1ec;border-color:#e7947b!important}.layers-title{border-top:1px solid #e0e7eb;padding-top:20px;margin-top:24px}.footnote{margin-top:20px}.about{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1000px;margin:32px 0}.about h2{font-size:24px}.about p{font-size:13px}dialog{position:fixed;margin:auto;width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:15px;padding:28px;color:#1c3546}dialog::backdrop{background:#102936b3}dialog h2{font-size:24px;padding-right:24px}dialog p{font-size:13px}.close{position:absolute;top:12px;right:12px;font-size:22px;width:40px;padding:0;border:0}.notice{font-size:12px;padding:12px;background:#fff6e7;border-radius:8px;color:#795d31}#downloads{display:grid;gap:8px;margin-top:16px}#downloads a{display:block;padding:12px;border:1px solid #d7e1e6;border-radius:8px;color:#183e52;text-align:center;text-decoration:none}#downloads a:hover{background:#edf3f6}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:#163b4e;color:white;padding:12px 18px;border-radius:10px;z-index:10;display:none;font-size:13px;pointer-events:none}.mobile-jump,.mobile-controls{display:none}[hidden]{display:none!important}
@media(max-width:1199px){.studio{grid-template-columns:220px minmax(0,1fr);align-items:start}.workspace{grid-column:2;grid-row:1 / span 2;position:sticky;top:12px}.properties{grid-column:1}.tools{grid-column:1;grid-row:1}.head-note{display:none}.badge{display:none}main{padding:20px}.preview-heading span{display:none}}
@media(max-width:1100px){main{padding:18px}.studio{display:flex;flex-direction:column;gap:12px}.workspace{order:0;position:static;width:100%}.mobile-controls{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%}.mobile-controls button{padding:10px 4px;font-size:13px}.tools,.properties{order:2;width:100%}.tools>nav{display:none}.studio[data-panel=properties]>.tools{display:none}.studio:not([data-panel=properties])>.properties{display:none}.template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.template-grid svg{height:82px}#props{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}#text-props{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}#text-props>label:first-child{grid-column:1/-1}#props>.two{align-self:end}#layers{grid-template-columns:repeat(3,minmax(0,1fr))}.properties>.two{max-width:350px}.icons{grid-template-columns:repeat(8,minmax(0,1fr))}.about{margin-top:24px}.canvas-wrap{max-width:660px;margin:auto}.properties,.tools{scroll-margin-top:12px}.preview-heading,.previews{display:none}}
@media(max-width:520px){header{padding:12px 14px;min-height:64px;gap:10px}.brand{font-size:16px}.brand span{display:none}header .primary{font-size:12px;padding:9px 11px}main{padding:16px 10px}.intro{margin-bottom:16px}h1{font-size:26px}.intro p{font-size:13px}.workspace{padding:10px}.toolbar{gap:6px}.toolbar button{padding:8px;font-size:11px}#save-status{font-size:10px;flex:1}.canvas-caption{font-size:10px}.tools,.properties{padding:16px}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-grid svg{height:66px}.icons{grid-template-columns:repeat(5,minmax(0,1fr))}#props,#text-props{gap:0 12px}#props>.two{grid-column:1/-1}#text-props>label:nth-child(2){grid-column:1/-1}input:not([type=range]):not([type=color]),select{font-size:16px}#layers{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr;gap:0}.about h2{font-size:22px}.two button{font-size:13px;min-height:44px}.file-button{min-height:44px}.mobile-controls button{font-size:12px;min-height:44px}dialog{padding:24px 18px}label{margin:12px 0}}

.brand-start,.saved-section{background:#fff;border:1px solid #dde4ea;border-radius:12px;padding:20px;margin:0 0 20px}.brand-start h2{margin:5px 0}.brand-start form{display:grid;grid-template-columns:1.4fr 1.4fr 1fr 1fr auto;gap:14px;align-items:end}.brand-start label{margin:8px 0}.brand-start button[type=submit]{margin-bottom:8px}.suggestions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px}.suggestions button{padding:0;overflow:hidden}.suggestions svg{width:100%;height:100px;display:block}.suggestions span{display:block;padding:7px;font-size:12px}.saved-section{margin-top:24px}.saved-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.saved-heading>div{flex:1}.saved-heading input{max-width:230px}.saved-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.saved-grid article,.compare-grid article{border:1px solid #dde4ea;border-radius:10px;padding:12px;min-width:0}.saved-grid svg{display:block;width:100%;height:130px}.saved-grid strong{font-weight:500;overflow-wrap:anywhere}.variant-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.variant-actions button{font-size:12px;padding:7px}.variant-actions [aria-pressed=true]{background:#fff0ea;border-color:#f44a22}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.compare-grid svg{display:block;width:100%;height:240px}.canvas-wrap{position:relative}#inline-text{position:absolute;z-index:3;font-size:20px;border:2px solid #f44a22;padding:8px;background:white;min-height:44px;margin:0}#design-check{margin:10px 0;font-size:12px}#design-check details{background:white;padding:10px;border-radius:8px}.check-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #eee}.check-row button{font-size:12px;padding:7px}.check-ok{color:#3d6857}summary{cursor:pointer}.preview-heading,.previews{display:none}.previews-open .preview-heading{display:flex}.previews-open .previews{display:grid}.header-sample{display:flex;align-items:center;gap:6px;height:66px;justify-content:center}.header-sample svg{width:160px;max-width:100%;height:48px}.header-sample i{font-size:9px;font-style:normal}.phone-sample svg{width:100px;height:32px;display:block;margin:10px auto}.avatar-sample{border-radius:50%;width:40px;height:40px;border:1px solid #ccc;overflow:hidden;margin:auto}.avatar-sample svg{width:100%;height:100%}.fav-samples{display:flex;gap:14px;align-items:center;justify-content:center;height:75px}.fav-samples svg:first-child{width:16px;height:16px}.fav-samples svg:last-child{width:32px;height:32px}#saved-recovery{border-top:1px solid #ddd;margin-top:18px;padding-top:16px}#saved-recovery button{margin:4px 8px 4px 0}#brand-form input,#brand-form select{min-width:0}#show-previews{font-size:12px}#brand-form button{white-space:normal}.previews-open .previews{grid-template-columns:1fr}.preview.live-site{min-width:0}@media(min-width:1400px){.previews-open .previews{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){.brand-start form{grid-template-columns:1fr 1fr}.brand-start button[type=submit]{grid-column:1/-1}.suggestions{grid-template-columns:repeat(3,minmax(0,1fr))}.saved-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.brand-start,.saved-section{padding:16px}.brand-start form{gap:6px 12px}.brand-start label:first-child,.brand-start label:nth-child(2){grid-column:1/-1}.suggestions{grid-template-columns:1fr 1fr}.suggestions svg{height:90px}.saved-heading input{max-width:none}.saved-grid{grid-template-columns:1fr}.compare-grid{gap:8px}.compare-grid article{padding:6px}.compare-grid h3{font-size:12px;overflow-wrap:anywhere}.compare-grid svg{height:140px}.check-row{align-items:flex-start}.previews-open .previews{grid-template-columns:1fr}.saved-heading button{width:100%}}
/* Library: readable labels and separate favorite controls. */
.icons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.icon-choice{position:relative;min-width:0;border:1px solid #e1e5e8;border-radius:10px;background:#fff;overflow:hidden}
.icons .icon-choice>button[data-icon]{width:100%;height:auto;min-height:88px;padding:19px 5px 7px;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.icons .icon-choice svg{width:32px;height:32px;flex-shrink:0}
.icon-choice span{font-size:10px;line-height:1.3;overflow-wrap:anywhere;font-weight:400}
.icons .icon-star{position:absolute;right:0;top:0;width:28px;height:28px;padding:0;border:0;background:transparent;font-size:18px;line-height:28px;color:#697683}
.icons .icon-star[aria-pressed=true]{color:#c36c20;background:#fff3e4}
#icon-search{min-width:0;width:100%}#icons-more{margin-top:12px}#icons-more[hidden]{display:none}
.logo-layouts{margin:12px 0;padding:10px;border:1px solid #e1e5e8;border-radius:10px}.logo-layouts summary{cursor:pointer;font-size:13px}.layout-buttons{display:flex;flex-wrap:wrap;gap:8px}.layout-buttons button{padding:8px;font-size:12px}
.curve-controls{margin:16px 0 0;padding:12px;border:1px solid #dce3e9;border-radius:10px;min-width:0}.curve-controls legend{font-size:13px;padding:0 5px}.curve-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.curve-presets button{font-size:11px;padding:8px 5px;white-space:normal;min-height:36px}.install-guide{margin:24px 0;padding:clamp(20px,4vw,40px);background:white;border:1px solid #dce3e9;border-radius:16px}.install-guide ol{padding-left:22px;max-width:850px}.install-guide li{margin:14px 0;line-height:1.65}.install-guide p{max-width:850px;line-height:1.65}.install-guide .file-button{display:inline-flex;margin-top:12px}.install-guide strong{font-weight:600}
.refine-section{margin:24px 0;padding:clamp(16px,3vw,32px);border:1px solid #dce3e9;border-radius:16px;background:#fff}.refine-section .saved-grid{margin-top:20px}.refine-section article>button{margin-top:12px;width:100%}.curve-controls output{display:block;font-size:12px;margin-top:4px;color:#657589}#sign-controls[hidden],#stroke-control[hidden]{display:none}
.refine-section .saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.refine-section .saved-grid svg{width:100%;height:160px;max-width:none}@media(max-width:800px){.refine-section .saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.refine-section .saved-grid{grid-template-columns:1fr}}
.multi-panel{margin-top:16px;padding:12px;border:1px solid #dce3e9;border-radius:10px}.multi-panel summary{cursor:pointer}.multi-panel .check{align-items:flex-start}.multi-panel .check span{overflow-wrap:anywhere}.multi-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.multi-actions button{min-height:40px;font-size:12px;white-space:normal;padding:8px}.multi-panel input[type=checkbox]{flex-shrink:0}

@media(max-width:1100px){#sign-controls{grid-column:1/-1}.multi-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:520px){#text-props>.curve-controls{grid-column:1/-1}.multi-actions{grid-template-columns:1fr 1fr}.curve-presets button{min-height:44px;font-size:12px}}
.logo-seo{display:block;max-width:none;margin:32px 0;padding:clamp(20px,4vw,40px);background:white;border:1px solid #dce3e9;border-radius:16px}.logo-seo h2{font-size:clamp(22px,2.3vw,28px);line-height:1.3;margin:32px 0 16px}.logo-seo h3{font-size:17px;margin:0 0 10px}.logo-seo p,.logo-seo li{font-size:16px;line-height:1.75;max-width:900px}.logo-seo ol{padding-left:24px}.logo-seo li{margin:14px 0}.logo-seo strong{font-weight:600}.logo-seo-features,.logo-seo-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.logo-seo-features>div{padding:20px;background:#f6f7f8;border-radius:10px}.logo-seo-links>a{display:block;padding:20px;border:1px solid #dce3e9;border-radius:10px;color:#16374a;text-decoration:none}.logo-seo-links>a:hover{border-color:#f44a22}.logo-seo-links span{display:block;font-size:14px;color:#617481;margin-top:8px}.logo-seo-faq details{padding:18px 0;border-top:1px solid #dce3e9}.logo-seo-faq summary{font-size:16px;font-weight:500}.seo-start{max-width:320px;text-decoration:none;color:#fff;background:#f44a22}.seo-start:hover{background:#d73510;color:white}@media(max-width:600px){.logo-seo-features,.logo-seo-links{grid-template-columns:1fr}.logo-seo{padding:20px 16px}.logo-seo-links>a{padding:16px}}