#appbar{position:absolute;z-index:100000;top:0;left:0;width:100%}#header{height:44px;width:100%;background:#f5f5f5;display:flex;flex-direction:row;justify-content:start;align-items:center}#main-menu{position:fixed;z-index:500;width:200px;background:#fff;display:flex;flex-direction:column;align-items:start;padding:8px 0;box-shadow:0 2px 4px #00000040}#main-menu>button{padding:10px 12px;font-size:12px;height:44px;width:100%;background:transparent;cursor:pointer}#main-menu>button:hover,.sub-menu>button:hover,.sub-menu>a:hover{background:#eee}#main-menu>button:active,.sub-menu>button:active,.sub-menu>a:active{font-size:12px}#main-menu>button:active>.menu-button-content,.sub-menu>button:active>.menu-button-content,.sub-menu>a:active>.menu-button-content{transform:scale(.95);transform-origin:center}.menu-button-content{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%;height:100%}#main-menu>button .menu-button-content>svg{width:24px;height:24px}.sub-menu{position:fixed;z-index:500;min-width:88px;background:#fff;display:flex;flex-direction:column;align-items:start;padding:8px 0;box-shadow:0 2px 4px #00000040}#languageMenu{z-index:100001}.hide{display:none}.sub-menu>button,.sub-menu>a{padding:10px 16px;font-size:12px;height:44px;width:100%;background:transparent;cursor:pointer;box-sizing:border-box;color:#191919;text-decoration:none;text-align:left}.flag-icon{width:20px;height:15px;border-radius:2px;border:1px solid rgba(0,0,0,.1);box-sizing:border-box}.header-button{height:44px;width:44px;cursor:pointer;background:transparent;display:flex;justify-content:center;align-items:center}.header-button:disabled{cursor:default}#menu-bar{display:flex;flex-direction:row;justify-content:start;align-items:center;padding-top:4px;padding-bottom:4px;width:100%;background:#fff;padding-left:8px;gap:8px;border-bottom:1px #e2e2e2 solid}.select-button{width:60px;height:80px;background:transparent;border-radius:8px;border:none;cursor:pointer;padding:11px 5px 8px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.select-button>p{font-size:12px}.select-split{display:flex;flex-direction:column;align-items:stretch;border-radius:8px}.select-split-main{height:62px;padding-bottom:2px;border-radius:8px 8px 0 0}.select-split-arrow{height:18px;width:60px;background:transparent;border:none;border-radius:0 0 8px 8px;cursor:pointer;display:flex;justify-content:center;align-items:center}.select-split-arrow:hover{background:#f5f5f5}.select-split.selected .select-split-arrow:hover{background:#e2e2e2}.mini-buttons{display:grid;grid-template-rows:repeat(2,40px);grid-auto-flow:column;grid-auto-columns:40px}.select-mini{width:40px;height:40px;border-radius:8px;background:transparent;cursor:pointer;border:none;display:flex;justify-content:center;align-items:center}.button-icon{width:44px;height:44px;display:flex;justify-content:center;align-items:center}.selected{background:#f5f5f5}.selected>svg *{fill:#3587ff}.stroke-icon-button.selected>svg *{fill:none;stroke:#3587ff}.div-bar{height:60px;width:1px;background:#0000001a}.brush-control-group{display:flex;flex-direction:column;padding-left:4px}.brush-control{display:flex;flex-direction:row;align-items:center;height:34px}.brush-control>p{font-size:12px}.brush-control>.label{width:48px}.brush-control>.value{width:40px}.slider-area{padding-left:12px;padding-right:8px;display:flex;justify-content:center;align-items:center}.custom-slider{position:relative;width:129px;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.custom-slider-track{width:100%;height:6px;border-radius:100px;background:#ccc}.custom-slider-thumb-hitbox{position:absolute;top:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);touch-action:none}.custom-slider-thumb{width:16px;height:16px;border-radius:50%;cursor:pointer;background:#444}#size-slider .custom-slider-track,#size-slider .custom-slider-thumb{background:#191919}#opacity-slider .custom-slider-track{background:#e3e3e3}#opacity-slider .custom-slider-thumb{background:#fff;border:1px solid #e3e3e3;box-sizing:border-box}#color-box{display:grid;grid-auto-flow:column;grid-auto-columns:auto;grid-template-rows:repeat(2,1fr)}.select-color{width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.circle-shape{width:24px;height:24px;border-radius:100px;background:#fafafa;border:1px solid #e3e3e3}#color-icon{width:32px;height:32px;border-radius:100px;background:#fafafa;border:1px solid #e3e3e3}html,body{margin:0;height:100%;overscroll-behavior:none;overscroll-behavior-x:none;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}p,button,h1,h2,h3,input{border:none;margin:0;padding:0}button:focus{outline:none}.body{display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;overflow:hidden}@tailwind base;@tailwind components;@tailwind utilities;*{font-family:Roboto,sans-serif}p,input,h1,h2,h3{color:#191919}*{flex-shrink:0}#container{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden;touch-action:none}#layer-area{width:100%;height:100%;background:#e8e8e8;image-rendering:pixelated;border:none;touch-action:none}canvas{image-rendering:pixelated;position:absolute;touch-action:none}#canvas{z-index:1;transform-origin:top left}#draw-canvas{z-index:2}#zoom-area{background:#0d99ff20;border:1px solid rgba(13,153,255,1);position:absolute;z-index:3000;box-sizing:border-box;touch-action:none;pointer-events:none}#selection-area,#shape-area,#resize-area{border:1px dashed rgba(255,255,255,.5);position:absolute;z-index:2900;box-sizing:border-box;visibility:hidden;mix-blend-mode:difference}#freeform-select-preview{position:absolute;inset:0;z-index:2900;width:100%;height:100%;visibility:hidden;pointer-events:none;touch-action:none;mix-blend-mode:difference}#freeform-select-preview-line{fill:none;stroke:#ffffffbf;stroke-width:1px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}.handle{z-index:2901;position:absolute;visibility:hidden;width:7px;height:7px;background:#fff;border:1px solid #404040;box-sizing:border-box;touch-action:none}#handle-rt{transform:translate(-1px)}#handle-rb{transform:translate(-1px,-1px)}#handle-lb{transform:translateY(-1px)}#shape-handle-rt{transform:translate(-1px)}#shape-handle-rb{transform:translate(-1px,-1px)}#shape-handle-lb{transform:translateY(-1px)}.resize-handle{--resize-handle-size: 7px;--resize-handle-width: 3px;z-index:2902;width:calc(var(--resize-handle-size) + var(--resize-handle-width) - 1px);height:calc(var(--resize-handle-size) + var(--resize-handle-width) - 1px);background:transparent;border:none}.resize-handle:before,.resize-handle:after{content:"";position:absolute;background:#b0b0b0}.resize-handle:before{width:100%;height:var(--resize-handle-width)}.resize-handle:after{width:var(--resize-handle-width);height:100%}#resize-handle-lt:before,#resize-handle-rt:before{top:0}#resize-handle-lb:before,#resize-handle-rb:before{bottom:0}#resize-handle-lt:after,#resize-handle-lb:after{left:0}#resize-handle-rt:after,#resize-handle-rb:after{right:0}#selection-size,#shape-size,#resize-size{display:flex;flex-direction:row;justify-content:center;align-items:center;position:absolute;z-index:2900;visibility:hidden}#selection-text,#shape-text,#resize-text{background:#c8c8c880;margin-top:16px;padding:4px 8px;border-radius:4px;font-size:12px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#brush-cursor{background:transparent;border:1px solid black;outline:1px solid white;border-radius:10000px;position:absolute;z-index:3000;pointer-events:none;mix-blend-mode:difference}#container.grab{cursor:grab}#container.grabbing{cursor:grabbing}#container.brush{cursor:crosshair}#container.zoom{cursor:zoom-in}#container.select,#container.colorPicker,#container.largeBrush{cursor:crosshair}#container.noCursor{cursor:none}#container.nwse-resize{cursor:nwse-resize}#container.nesw-resize{cursor:nesw-resize}#container.ns-resize{cursor:ns-resize}#container.ew-resize{cursor:ew-resize}#container.move{cursor:move}#cursor-position{position:absolute;display:flex;flex-direction:row;align-items:end;justify-content:start;bottom:0;left:0;padding-bottom:6px;padding-left:8px;z-index:4000}#cursor-icon{height:16px}#cursor-position>p{padding-left:4px;font-size:12px;color:#131313}#loading-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:#0003;z-index:9999;visibility:hidden}#color-menu{position:fixed;display:flex;flex-direction:column;align-items:start;justify-content:start;padding:16px 16px 24px;width:200px;background:#fff;border:1px solid #E8E8E8}#color-title-box{display:flex;flex-direction:row;align-items:center;padding-bottom:16px}#color-title{font-size:16px}#color-field{position:relative;width:200px;height:200px;background:linear-gradient(to bottom,#fff0,#000),linear-gradient(to right,rgb(255,255,255) 0%,var(--field-end-color) 100%);margin-bottom:12px;border-radius:4px}#color-picker{position:absolute;width:20px;height:20px;background:#b13e3e;border-radius:20px;border:white solid 2px;box-sizing:border-box;box-shadow:0 0 2px #00000080}.color-slider{-webkit-appearance:none;height:4px;border-radius:4px;outline:none;background:transparent;width:100%;padding:10px 0}.color-slider::-webkit-slider-runnable-track{border-radius:100px;height:4px}.color-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;margin-top:-6px}#color-h-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}#color-h-slider::-webkit-slider-thumb{background:var(--thumb-h-color)}#color-s-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--thumb-s-start-color) 0%,var(--thumb-s-end-color) 100%)}#color-s-slider::-webkit-slider-thumb{background:var(--thumb-s-color)}#color-v-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#000,#fff)}#color-v-slider::-webkit-slider-thumb{box-shadow:0 0 2px #00000080;background:var(--thumb-v-color)}#color-input-area{display:flex;flex-direction:row;width:100%;border:#E2E2E3 solid 1px;padding:3px 0;margin-top:12px;align-items:center;border-radius:4px}#color-type{padding:0 10px;font-size:12px}#color-input{font-size:12px;flex:1;border:none;outline:none;padding:0 10px}#color-replace-area{display:flex;flex-direction:row;width:100%;margin-top:12px;align-items:center;justify-content:space-between}#color-replace-label{font-size:12px}#color-replace-switch{position:relative;width:36px;height:20px;border:none;border-radius:10px;background:#d3d3d5;cursor:pointer;padding:0;transition:background .15s}#color-replace-switch.on{background:#3587ff}#color-replace-switch .switch-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 2px #0000004d;transition:left .15s}#color-replace-switch.on .switch-knob{left:18px}.tools-button{height:44px;width:50px;cursor:pointer;background:transparent;font-size:16px;display:flex;flex-direction:center;align-items:center}.tools-button>p{width:100%;line-height:19px}.tools-bar{width:100%;position:fixed;display:flex;flex-direction:row;background:#0000000f;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.size-button{height:44px;width:50px;cursor:pointer;background:transparent;font-size:14px;display:flex;flex-direction:center;align-items:center}.size-button>p{width:100%;line-height:19px;font-size:14px}.size-bar{position:fixed;display:flex;flex-direction:column;align-items:start;justify-content:start;padding:8px 20px;background:#fff;border:1px solid #E8E8E8}.mobile-appbar{height:44px;width:100%;display:flex;flex-direction:row;justify-content:start;align-items:center;background:#fff;border-bottom:1px solid #E8E8E8}.mobile-div-bar{height:28px;width:1px;background:#0000001a}#navigation{position:absolute;z-index:100000;bottom:0;left:0;width:100%}.mobile-navigation{height:44px;width:100%;display:flex;flex-direction:row;justify-content:start;align-items:center;background:#fff;border-top:1px solid #E8E8E8}.mobile-color-icon{width:24px;height:24px;border-radius:100px;background:#fafafa;border:1px solid #E3E3E3}.mobile-appbar .selected,.mobile-navigation .selected{background:transparent;color:#3587ff}.mobile-appbar .selected>svg *,.mobile-navigation .selected>svg *{fill:#3587ff}.mobile-appbar .stroke-icon-button.selected>svg *,.mobile-navigation .stroke-icon-button.selected>svg *{fill:none;stroke:#3587ff}#dashboard-root{--paper: #f4f7fa;--panel: #ffffff;--ink: #191919;--muted: #5b6570;--line: #e3e3e3;--accent: #3587ff;--display: "Bricolage Grotesque", system-ui, sans-serif;position:fixed;inset:0;overflow-y:auto;background:var(--paper);color:var(--ink);line-height:1.6;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased}#dashboard-root *{margin:0;padding:0;box-sizing:border-box}#dashboard-root a{color:inherit}#dashboard-root :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}#dashboard-root .wrap{max-width:1060px;margin:0 auto;padding:0 20px}#dashboard-root .topbar{position:sticky;top:0;z-index:10;background:#f4f7fae0;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}#dashboard-root .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}#dashboard-root .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.15rem;text-decoration:none}#dashboard-root .brand img{width:26px;height:26px;border-radius:6px}#dashboard-root .btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;border-radius:10px;padding:9px 18px;border:none;cursor:pointer;transition:filter .15s}#dashboard-root .btn:hover{filter:brightness(1.08)}#dashboard-root .dashboard-head{display:flex;align-items:baseline;gap:12px;padding:44px 0 28px}#dashboard-root h1{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4vw,2.3rem);letter-spacing:-.02em;line-height:1.15}#dashboard-root .count{color:var(--muted);font-size:.95rem}#dashboard-root .drawing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding-bottom:72px}#dashboard-root .drawing-card{position:relative;display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;transition:border-color .15s,transform .15s}#dashboard-root .drawing-card:hover{border-color:var(--accent);transform:translateY(-2px)}#dashboard-root .drawing-card .thumb{border-radius:8px;border:1px solid var(--line);aspect-ratio:4 / 3;overflow:hidden;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#eef1f5 0% 25%,#fff 0% 50%) 0 0 / 16px 16px}#dashboard-root .drawing-card .thumb img{max-width:100%;max-height:100%;object-fit:contain}#dashboard-root .drawing-card h3{font-family:var(--display);font-weight:700;font-size:1.02rem;margin-top:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#dashboard-root .drawing-card time{display:block;color:var(--muted);font-size:.82rem}#dashboard-root .delete-btn{position:absolute;top:20px;right:20px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#ffffffeb;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s}#dashboard-root .drawing-card:hover .delete-btn,#dashboard-root .delete-btn:focus-visible{opacity:1}#dashboard-root .delete-btn:hover{color:#e0442e;border-color:#e0442e}@media(hover:none){#dashboard-root .delete-btn{opacity:1}}#dashboard-root .empty{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:64px 24px;text-align:center;margin-bottom:72px}#dashboard-root .empty .board{width:120px;margin:0 auto 20px;border-radius:8px;border:1px solid var(--line);aspect-ratio:4 / 3;background:repeating-conic-gradient(#eef1f5 0% 25%,#fff 0% 50%) 0 0 / 14px 14px}#dashboard-root .empty p{color:var(--muted);margin-bottom:20px}