:root{color-scheme:light;--ink:#242046;--muted:#625c78;--purple:#6038c6;--line:#e8e0f2;--paper:#fff;font-family:"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:#f8f5fd}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;background:white;border:1px solid var(--line);border-radius:11px;min-height:42px;padding:0 12px;font-weight:700}button:hover:not(:disabled){border-color:#9d83df}button:disabled{cursor:default;opacity:.37}button:focus-visible,input:focus-visible{outline:3px solid #7755d5;outline-offset:3px}h1,h2,p{margin:0}.shell{width:min(1320px,calc(100% - 80px));margin:auto}.top{background:#fff;border-bottom:1px solid var(--line)}.bar,.brand,.work-head,.work-foot,.actions,.history,.dialog-head,.color-tools{display:flex;align-items:center}.bar,.work-head,.work-foot,.dialog-head,.color-tools{justify-content:space-between}.bar{height:66px}.brand{gap:10px;font-size:19px;font-weight:900;letter-spacing:-.6px}.brand b{color:var(--purple)}.logo{display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:#6a42d6;color:#fff;font-size:23px}.gallery{background:#f4edff;color:#4e2aa9;border:0}
.intro{position:relative;padding:32px 0 26px}.eyebrow,.step,.tag,footer span{font-size:11px;font-weight:900;letter-spacing:.14em}.eyebrow,.step{color:#6242ad}.eyebrow span{color:#a96000}.intro h1{font-size:clamp(39px,6vw,75px);letter-spacing:-.07em;line-height:1.04;margin:7px 0 10px;font-weight:900}.intro em{font-style:normal;color:#6d44ce}.intro p{color:var(--muted);font-size:16px}.spark{display:inline-block;color:#b98bea;font-size:.55em;vertical-align:top;margin-left:.32em;transform:rotate(13deg)}
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,355px);align-items:start;gap:19px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:21px;box-shadow:0 5px 15px #321b6010}.work{padding:18px}.work-head{gap:9px;margin:0 2px 14px}.tag{color:#6242ad;text-transform:uppercase;margin-bottom:4px}.work h2{font-size:25px;letter-spacing:-.04em}.history,.actions{gap:6px}.history button{width:42px;padding:0;font-size:23px}.mat{background-color:#f0eafa;background-image:radial-gradient(#cbb9e8 1px,transparent 1px);background-size:15px 15px;border-radius:14px;padding:17px;display:grid;place-items:center}.sheet{display:block;width:100%;height:auto}#drawing{width:min(100%,640px)}.mat .sheet{background:white;border-radius:12px;box-shadow:0 3px 14px #36226019;touch-action:manipulation}.region{cursor:pointer}.region:focus-visible{outline:none;stroke:#7849d5;stroke-width:5}.region:active{opacity:.78}.work-foot{margin-top:13px;gap:8px}.work-foot span{color:var(--muted);font-size:13px;font-weight:700}.primary{background:#6038c6;border-color:#6038c6;color:white}.primary:hover:not(:disabled){background:#4b28a3}.secondary{background:#f5efff;color:#5331a9}
.controls{display:grid;gap:15px;min-width:0}.palette,.library{padding:17px}.step{margin-bottom:4px}.controls h2,.dialog-head h2{font-size:23px;letter-spacing:-.045em;margin-bottom:11px}#swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.swatch{width:100%;aspect-ratio:1;min-height:0;padding:0;background:var(--color);border-radius:50%;border:1px solid #28204a26;position:relative}.swatch[aria-pressed=true]{outline:2px solid #402582;outline-offset:2px}.color-tools{margin-top:13px;gap:6px}.custom{min-height:42px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;cursor:pointer}.custom input{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#f8f4ff;padding:3px;cursor:pointer}#eraser{font-size:13px}#eraser[aria-pressed=true]{background:#eee3ff;border-color:#7854ca}
#categories{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}#categories button{border-radius:20px;min-height:36px;font-size:12px;padding:0 9px;white-space:nowrap;background:#faf8fd}#categories [aria-pressed=true]{background:#ece2ff;color:#4e2aa9;border-color:#c7acec}#pictures,#gallery-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.picture{padding:3px 2px 6px;font-size:11px;background:#faf7ff;overflow:hidden}.picture[aria-pressed=true]{border:2px solid #8156dc;background:#f2e8ff;padding:2px 1px 5px}.picture .sheet{pointer-events:none}.picture span{display:block}.dialog-head{gap:16px}.dialog-head h2{margin:0}dialog{width:min(570px,calc(100% - 24px));max-height:85vh;border:1px solid var(--line);border-radius:20px;padding:22px;color:var(--ink);box-shadow:0 18px 50px #21134544}dialog::backdrop{background:#21134588}dialog p:not(.step){margin:12px 0;color:var(--muted)}#gallery-items{margin-top:14px}.saved{border:1px solid var(--line);border-radius:12px;padding:5px;min-width:0}.saved button{width:100%;font-size:12px;margin-top:4px}.saved p{font-size:12px;text-align:center}#notice{position:fixed;z-index:2;bottom:16px;left:50%;transform:translateX(-50%);background:#2e2253;color:white;padding:10px 14px;border-radius:12px;width:max-content;max-width:calc(100% - 28px);text-align:center;font-size:14px}#notice:empty{display:none}footer{color:var(--muted);font-size:13px;padding:22px 0;display:flex;justify-content:space-between;gap:8px}
@media(max-width:850px){.shell{width:calc(100% - 32px)}.studio{grid-template-columns:minmax(0,1fr) minmax(250px,285px);gap:10px}.palette,.library,.work{padding:12px}.mat{padding:10px}}
@media(max-width:660px){.shell{width:calc(100% - 24px)}.bar{height:56px}.intro{padding:18px 0 15px}.intro p{font-size:14px}.studio{display:flex;flex-direction:column;gap:10px}.controls{display:contents}.studio>*,.controls>section{width:100%}.palette{order:-1}.palette h2{font-size:18px;margin-bottom:7px}.palette .step{display:none}#swatches{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.color-tools{margin-top:6px}.work-head{margin-bottom:8px}.work h2{font-size:20px}.history button{width:36px}.work-foot{margin-top:8px}.work-foot span{font-size:12px}.actions button{padding:0 8px}.mat{padding:7px}.library{order:1}.picture .sheet{max-height:85px}}
@media(max-width:360px){#swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.work-foot{flex-wrap:wrap}.intro h1{font-size:36px}}
#custom.selected{outline:2px solid #402582;outline-offset:2px}#gallery-message:empty{display:none}#gallery-items>p{grid-column:1/-1}
@media(max-width:660px){#swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.swatch{max-width:42px;justify-self:center}}