:root{font-family:Segoe UI,system-ui,sans-serif;color:#233044;background:#f6f7fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;display:flex;flex-direction:column}header{height:82px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #e7eaf0;background:#fff}.brand{display:flex;align-items:center;gap:13px}.brand-icon{display:grid;place-items:center;background:#eaf0ff;color:#3269df;width:42px;height:42px;border-radius:13px;font-size:30px}.brand strong{font-size:21px;letter-spacing:-.6px}.brand small{display:block;color:#7c8697;font-size:12px;margin-top:2px}.badge{font-size:10px;letter-spacing:1.5px;border:1px solid #e3e7ef;border-radius:6px;padding:7px 10px;color:#8a93a3}main{position:relative;flex:1;min-height:0;background:white;margin:18px 18px 118px;border:1px solid #e8ebf0;border-radius:16px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#b3bac7;gap:9px}.welcome span{font-size:24px;font-weight:500;letter-spacing:-.5px}.welcome small{font-size:15px;color:#c0c6d0}.welcome.hidden{display:none}.toolbar{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e3e7ef;border-radius:20px;padding:12px 16px;box-shadow:0 8px 30px #25395d0c;max-width:calc(100% - 24px)}button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;touch-action:manipulation;flex-shrink:0}button:focus-visible{outline:3px solid #3269df;outline-offset:3px}.tool-group{display:flex;gap:5px}.tool{height:64px;min-width:72px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600}.tool:hover,.size:hover{background:#f2f5fa}.tool.active{background:#eaf0ff;color:#3269df}.symbol{font-size:32px;line-height:34px}.tool svg{width:29px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button:disabled{opacity:.3;cursor:default}.divider{width:1px;height:44px;background:#e9edf3;flex-shrink:0}fieldset{padding:0;margin:0;border:0;display:flex;gap:5px;position:relative}legend{font-size:10px;color:#8a93a3;position:absolute;top:-9px;left:7px;white-space:nowrap}.color{width:48px;height:58px;position:relative;border-radius:12px}.color:before{content:'';display:block;background:var(--color);width:28px;height:28px;border-radius:50%;margin:auto}.color.selected:after{content:'';position:absolute;width:36px;height:36px;border:2px solid var(--color);border-radius:50%;top:11px;left:6px}.size{width:48px;height:58px;border-radius:12px;display:grid;place-items:center}.size i{background:currentColor;width:var(--size);height:var(--size);border-radius:50%}.size.selected{background:#eef2f8;color:#3269df}footer{height:30px;position:absolute;bottom:8px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#939dad}@media(max-width:850px){.toolbar{gap:6px;padding:10px}.tool{min-width:58px}.color,.size{width:42px}.color.selected:after{left:3px}header{padding:0 20px}.welcome span{font-size:20px}}@media(max-width:640px){header{height:66px}.toolbar{flex-wrap:wrap;justify-content:center;width:calc(100% - 24px);bottom:38px;gap:4px}.divider{display:none}.colors{order:3}.sizes{order:4}legend{display:none}main{margin:10px 10px 168px}.tool{height:55px}.color,.size{height:48px}.color.selected:after{top:6px}.welcome span{font-size:16px}footer{left:16px;right:16px}footer span:last-child{display:none}}