*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#283350;background:radial-gradient(ellipse at 12% 16%,#ffd4f6 0,transparent 32%),radial-gradient(ellipse at 86% 24%,#dbd8ff 0,transparent 28%),linear-gradient(140deg,#fff8ff,#e7f7ff 64%,#fff0de);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f8a049;outline-offset:3px}.fg-header{background:#17153c;min-height:69px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px max(3%,calc((100% - 1200px)/2));box-shadow:0 4px 17px #100c3d36}.fg-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-weight:950;white-space:nowrap;font-size:19px}.fg-brand strong{color:#ffa05e}.fg-brand img{height:39px;width:39px;max-height:39px;max-width:39px;border-radius:50%;object-fit:cover;flex:none}.fg-head-actions{display:flex;gap:8px;align-items:center}.back,.language{font-size:13px;font-weight:800;text-decoration:none;padding:10px 12px;border:0;border-radius:13px;white-space:nowrap;background:#ffe0a2;color:#322d59}.language{background:#3d387b;color:#fff;display:flex;align-items:center;gap:8px}.language img{width:24px;height:17px;object-fit:cover;border-radius:2px}.intro{text-align:center;padding:28px 14px 21px}.eyebrow{font-size:11px;font-weight:950;letter-spacing:2px;color:#aa3e8b}.intro h1{margin:6px 0;font-size:clamp(30px,4vw,49px);line-height:1.07;color:#432e70}.intro p{margin:8px auto 0;font-size:14px;color:#695b85;max-width:630px}.layout{display:grid;grid-template-columns:minmax(0,665px) minmax(230px,310px);gap:22px;max-width:1040px;margin:0 auto 36px;padding:0 14px;align-items:start}.draw-wrap,.sidebar{min-width:0;background:#fff;border:1px solid #e9d8f5;border-radius:21px;padding:15px;box-shadow:0 10px 28px #5543941c}.topline,.palette-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.topline{padding:2px 2px 10px}.topline strong{font-size:16px}.topline span{border-radius:99px;background:#fff1ff;color:#8e348d;font-weight:900;padding:7px 12px;white-space:nowrap}.board{position:relative;max-width:510px;margin:auto;border:3px solid #f6e9fa;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 3px 15px #42296712}.board canvas{display:block;width:100%;height:auto;aspect-ratio:700/906;touch-action:manipulation;cursor:crosshair}.busy{position:absolute;inset:0;display:grid;place-items:center;background:#fff9;color:#723676;font-size:16px;font-weight:900}.busy[hidden]{display:none!important}.palette{margin:15px auto 10px;max-width:560px;padding:11px 12px;background:#faf2ff;border:1px solid #edd6fa;border-radius:17px}.palette-title{font-size:13px;color:#5f337d;flex-wrap:wrap;margin:0 0 11px}.palette-title small{font-size:11px;color:#87669c}.swatches{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}.swatch{width:100%;aspect-ratio:1;background:var(--clr);border:3px solid white;box-shadow:0 0 0 1px #b5a5c8;border-radius:50%;min-width:0;position:relative}.swatch.active{box-shadow:0 0 0 3px #714aab,0 0 0 6px #fff;border-color:#fff}.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 13px}.actions button,.pager button{border:0;border-radius:11px;padding:11px 13px;font-size:12px;font-weight:900}.actions .soft{background:#eee6fa;color:#4d356f}.actions .save{background:#f6a058;color:#352343}.pager{display:flex;align-items:center;justify-content:space-between;gap:10px}.pager button{background:#6547a7;color:#fff;font-size:13px;min-height:44px;flex:0 1 170px}.pager b{font-size:13px;white-space:nowrap}.note{text-align:center;font-size:11px;color:#8c799d;margin:13px 0 4px}.side-title{display:flex;align-items:center;gap:10px;margin:0 0 11px}.side-title>span{font-size:34px}.side-title>div{display:flex;flex-direction:column;gap:3px}.side-title strong{font-size:17px}.side-title small{font-size:12px;color:#877596}.thumbnails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.thumb{border:2px solid #e5d7f6;border-radius:13px;background:#fff;min-width:0;padding:4px;display:flex;flex-direction:column;gap:4px;align-items:center}.thumb img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:7px;display:block}.thumb span{font-size:11px;font-weight:850;color:#684783;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.thumb.active{border-color:#d879b8;background:#fff0fa;box-shadow:0 0 0 2px #e09fcd45}.more{display:block;margin-top:16px;padding:13px;background:#fff2c7;border-radius:12px;text-decoration:none;color:#68448d;font-weight:850;text-align:center;font-size:12px}footer{text-align:center;padding:23px;color:#83748f;font-size:12px}footer a{color:#8141a1;text-decoration:none;font-weight:750}
@media(max-width:760px){.intro{padding:19px 12px 16px}.layout{display:flex;flex-direction:column;gap:12px;padding:0 9px 20px}.draw-wrap{order:0;width:100%;padding:9px;border-radius:14px}.sidebar{order:1;width:100%;padding:11px}.thumbnails{display:flex;overflow-x:auto;gap:8px;padding-bottom:8px;scroll-snap-type:x mandatory}.thumb{flex:0 0 100px;scroll-snap-align:start}.thumb img{aspect-ratio:4/5}.board{max-width:430px}.swatches{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.palette{margin:10px 0;padding:8px}.actions{margin:10px 0}.intro h1{font-size:clamp(25px,7vw,35px)}}
@media(max-width:430px){.fg-header{padding:7px 9px;min-height:56px;gap:5px}.fg-brand{font-size:13px;gap:5px}.fg-brand img{height:28px;width:28px;max-width:28px;max-height:28px}.fg-head-actions{gap:5px}.back,.language{font-size:10px;padding:8px 7px}.language img{height:14px;width:21px}.intro h1{font-size:28px}.intro p{font-size:12px}.topline strong{font-size:13px}.palette-title{font-size:12px}.swatches{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.swatch{min-height:29px}.actions button{font-size:11px;flex:1;padding:11px 7px}.pager button{font-size:12px}.palette-title small{font-size:10px}}