.sidebar{position:fixed;left:0;top:0;height:100vh;width:48px;padding-inline:15px;padding-block:50px;display:flex;transition:width .3s ease-in-out;align-items:center;background:transparent;transition:width .3s ease;overflow:hidden;z-index:1000}.sidebar.open{width:303px}.toggle-btn{position:absolute;left:10px;top:10px;padding:3px;border-radius:10%;background:#fcf9f7;border:none;cursor:pointer;z-index:1001}.sidebar-content{padding:20px;width:280px;height:500px;max-height:70vh;background:#fcf9f7;transition:opacity .3s ease,max-width .3s ease;overflow-y:auto;border-radius:10px;box-shadow:2px 0 10px #0003;opacity:1;max-width:280px;visibility:visible}.sidebar-content.closed{opacity:0;max-width:0;visibility:hidden;overflow:hidden}.showContent{opacity:0;transition:opacity .3s ease}.section{margin-bottom:16px}.section h3{font-size:16px;margin-bottom:12px;color:#333}.color-buttons{display:flex;gap:8px;flex-wrap:wrap}.color-btn{width:40px;height:40px;border-radius:8px;border:none;cursor:pointer;border:#666 solid 1px}.color-btn.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)}.color-btn.selected{outline:2px solid #3b82f6;outline-offset:2px}.option-buttons{display:flex;gap:8px}.option-btn{width:48px;height:48px;background:#f3f4f6;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.option-btn:hover{background:#e5e7eb}.option-btn.selected{background:#e0dffe}.stroke-line{width:24px;background:#000}.slider-container{padding:0 8px}.opacity-slider{width:100%;height:4px;background:#e5e7eb;border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;color:#666;font-size:14px}.fill-pattern{width:24px;height:24px;border-radius:4px}.pattern{background:repeating-linear-gradient(45deg,#000,#000 2px,transparent 2px,transparent 8px)}.pattern2{background:radial-gradient(#000 20%,transparent 20%) 0 0 / 8px 8px}.pattern3{background:radial-gradient(#000 50%,transparent 50%) 0 0 / 8px 8px}.solid{background:#000}.solid-line,.dotted-line{display:inline-block;width:20px;height:2px;background-color:currentColor}.dotted-line{border-bottom:2px dotted currentColor;background-color:transparent}*{margin:0;padding:0;box-sizing:border-box}body.light{background-color:#f8f9fa}body.dark{background-color:#1e1f21}body{margin:0;background-color:#fff;background-image:linear-gradient(0deg,transparent 95%,#ddd 100%),linear-gradient(90deg,transparent 95%,#ddd 100%);background-size:30px 30px}.light{margin:0;background-color:#f8f9fa;background-image:linear-gradient(0deg,transparent 95%,#ddd 100%),linear-gradient(90deg,transparent 95%,#ddd 100%);background-size:30px 30px}.button{cursor:pointer;display:flex;justify-content:center;align-items:center;padding-inline:15px;padding-block:10px;background-color:#111827;border-radius:10px;margin:0 3px}.button.selected{background-color:#2f3542}.topbar{position:absolute;display:flex;justify-content:space-between;align-items:center;color:#fff;padding-inline-start:20px;padding-inline-end:15px;z-index:100;border-radius:15px;top:10px;left:50%;transform:translate(-50%)}.drawing-panel{position:absolute;top:50%;left:10px;transform:translateY(-50%);display:inline-flex;flex-direction:column;z-index:100;gap:20px;padding:10px;padding-inline:21px;margin-top:10px;border-radius:15px;background-color:#2d3b5b;color:#fff;user-select:none;-webkit-user-select:none;-moz-user-select:none}.pattern1{width:100px;height:100px;background-image:linear-gradient(to bottom right,#000 50%,#fff 50%);background-size:25% 25%;background-position:0 0,25% 25%,50% 0,0 25%}@media screen and (max-width: 580px){.button{padding-inline:8px;padding-block:6px;background-color:#111827;border-radius:10px;margin:0 1px}}@media screen and (max-width: 400px){.topbar{border-radius:15px;overflow:hidden;padding:0}.button{padding-inline:5px;padding-block:3px;background-color:#111827;border-radius:0;margin:0}}