@font-face{font-family:SocialSans;src:url('assets/fonts/DejaVuSans.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SocialSans;src:url('assets/fonts/DejaVuSans-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:SocialSerif;src:url('assets/fonts/DejaVuSerif.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--purple:#6941db;--ink:#24212f;--muted:#776f83;--line:#e9e5ee}*{box-sizing:border-box}body{margin:0;background:#eeecf1;color:var(--ink);font:16px/1.5 Arial,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b69cff;outline-offset:3px}header{height:82px;padding:0 32px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:27px;font-weight:800;letter-spacing:-1px;text-decoration:none;color:var(--ink)}.brand span{color:var(--purple);font-weight:400}.breadcrumb{color:var(--muted);font-size:14px}.breadcrumb span{margin:0 16px;color:#b4abba}.primary{background:var(--purple);color:#fff;border:0;padding:14px 21px;border-radius:9px;font-size:14px;font-weight:700}main{display:grid;grid-template-columns:385px minmax(0,1fr);max-width:1700px;margin:auto}aside{background:#fff;border-right:1px solid var(--line);padding:28px}.intro{padding-bottom:22px}.eyebrow{font-size:12px;letter-spacing:1.6px;color:var(--purple);font-weight:700}h1{font-size:28px;line-height:1.15;letter-spacing:-1px;margin:12px 0}.intro p{font-size:14px;color:var(--muted);margin:0}.control-section{padding:24px 0;border-top:1px solid var(--line)}.section-title{display:flex;gap:10px;align-items:center;margin-bottom:16px}.section-title span{font-size:12px;background:#f0eafa;color:var(--purple);padding:3px 7px;border-radius:5px}.section-title h2{font-size:16px;margin:0}label,legend{display:block;font-size:13px;font-weight:650;margin:15px 0 7px}input:not([type=range]),select,textarea{width:100%;padding:11px 12px;border:1px solid #ded9e7;border-radius:8px;background:#fff;color:var(--ink);font-size:14px}textarea{resize:vertical}input[type=color]{height:44px;padding:5px;width:100%}input[type=range]{width:100%;accent-color:var(--purple)}input[type=file]{font-size:12px;padding:8px}input[type=file]::file-selector-button{border:0;border-radius:5px;padding:7px;background:#f0eafa;color:var(--purple);margin-right:8px}.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0}.two{display:grid;grid-template-columns:1fr 74px;gap:12px}fieldset{border:0;padding:0;margin:18px 0 0}legend{margin-bottom:10px}.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.style-choice{padding:5px;border:1px solid var(--line);border-radius:8px;background:#f8f6fa;text-align:left;color:var(--ink)}.style-choice[aria-pressed=true]{border:2px solid var(--purple);padding:4px;background:#f1ebff;box-shadow:0 0 0 2px #6941db11}.style-choice canvas{display:block;width:100%;height:95px;object-fit:contain;background:#e7e3eb;border-radius:4px}.style-choice span{display:block;font-size:12px;font-weight:600;margin:6px 2px 2px}.small-actions{display:flex;gap:16px;margin:8px 0 18px}.small-actions button,.text-button{border:0;background:none;padding:0;color:var(--purple);font-size:12px}.text-button{margin-top:8px}.workspace{min-width:0;padding:24px 38px 50px;align-self:start;position:sticky;top:0}.toolbar{display:flex;justify-content:space-between;align-items:center;max-width:850px;margin:0 auto 20px}.toolbar strong{font-size:14px}.toolbar span:not(.tag){font-size:12px;color:var(--muted);margin-left:14px}.tag{border:1px solid #d9d2e3;border-radius:6px;background:#f7f5fa;padding:4px 9px;font-size:12px}.canvas-stage{display:flex;align-items:center;justify-content:center;min-height:200px;height:calc(100vh - 252px);max-height:850px;padding:10px;background-image:radial-gradient(#d7d1df .8px,transparent .8px);background-size:14px 14px;border-radius:12px}.canvas-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 14px 36px #25163728}.below{max-width:850px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px auto}.below p{font-size:12px;color:var(--muted);max-width:460px}.below .primary{flex-shrink:0}.caption{max-width:850px;margin:24px auto 0;padding:21px 24px;border:1px solid #e1dbe8;border-radius:12px;background:#ffffffa6}.caption summary{font-size:14px;font-weight:600;cursor:pointer}.caption p{font-size:14px;line-height:1.7;color:#686171}.caption button{border:1px solid #dcd3ea;background:#fff;border-radius:7px;padding:8px 14px;font-size:13px;color:var(--purple)}.caption small{display:block;font-size:12px;color:var(--muted);margin-top:12px}.privacy{font-size:12px;text-align:center;color:#8c8298;margin-top:22px}@media(min-width:1450px){main{grid-template-columns:410px 1fr}.style-choice canvas{height:110px}}@media(max-width:950px){main{grid-template-columns:320px 1fr}aside{padding:22px}.workspace{padding:24px 20px}.breadcrumb{display:none}.style-choice canvas{height:80px}.style-choice span{font-size:12px}.below{display:block}.below .primary{width:100%}}@media(max-width:680px){header{padding:0 18px;height:70px}.top-export{font-size:12px;padding:10px 12px}.brand{font-size:24px}main{display:flex;flex-direction:column}aside{width:100%;padding:22px;border-right:0;display:contents}.intro{padding:25px 22px 10px;background:white;order:0}.control-section{padding:20px 22px;background:#fff;order:2}.control-section:first-of-type{order:1}.workspace{order:1;width:100%;position:static;padding:22px 18px}.canvas-stage{height:auto;max-height:none;min-height:0}.canvas-stage canvas{max-height:62vh;max-width:100%;width:auto}.style-choice canvas{height:105px}.style-grid{grid-template-columns:repeat(3,1fr)}.style-choice span{font-size:12px}.below{margin-bottom:0}.caption{margin-top:18px}.privacy{display:none}.toolbar span:not(.tag){margin-left:8px}.control-section:has(#sector){order:0}.intro h1{font-size:25px}.control-section:has(#sector) .style-grid{grid-template-columns:repeat(6,minmax(85px,1fr));overflow-x:auto;padding:3px}.control-section:has(#sector) .style-choice canvas{height:85px}.control-section:has(#sector) .style-choice span{font-size:12px}}
.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.palette-choice{display:flex;height:38px;border:1px solid #ddd5e6;background:#fff;padding:4px;border-radius:7px;overflow:hidden}.palette-choice span{flex:1;min-width:0}.palette-choice span:first-child{border-radius:3px 0 0 3px}.palette-choice span:last-child{border-radius:0 3px 3px 0}.palette-choice[aria-pressed=true]{outline:2px solid var(--purple);outline-offset:2px}.surprise{width:100%;padding:12px;margin-top:9px;border:1px solid #bba1ee;border-radius:9px;background:#f1eafa;color:#6034b6;font-size:14px;font-weight:600}.style-grid{max-height:430px;overflow-y:auto;padding:3px;scrollbar-width:thin}@media(max-width:680px){.control-section:has(#sector) .style-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:285px;overflow-y:auto;overflow-x:hidden}.control-section:has(#sector) .style-choice canvas{height:94px}.control-section:has(#sector) .style-choice span{font-size:12px}}