*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{background-color:#f6f8fa;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body header{background-color:#fff;border-bottom:1px solid #d0d7de;width:100%;height:70px;flex-shrink:0;padding:0 24px;display:flex;align-items:center;gap:24px;z-index:10}body header .logo_area{display:flex;align-items:center;gap:20px}body header .logo_area a{display:flex;align-items:center}body header .logo_area a img{height:40px;display:block;transition:transform .2s ease,box-shadow .2s ease;border-radius:50%;object-fit:cover}body header .logo_area a img:hover{transform:scale(1.05);box-shadow:0 4px 8px #0000001a}body header .logo_area a img:active{transform:scale(.95)}body header .logo_area h1{font-size:1.4rem;color:#24292f;margin:0;font-weight:600;white-space:nowrap;display:flex;align-items:center}body header .control_area{display:flex;align-items:center;gap:20px;margin-left:auto;height:45px;border-left:1.2px solid rgba(0,0,0,.08);padding-left:20px}body header .control_area .toggle{display:flex;align-items:center}body header .control_area .slider_row,body header .control_area .color_row{display:flex;align-items:center;gap:12px}body header .control_area p{margin:0;font-size:.95rem;color:#24292f;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}body header .control_area p span{font-weight:600;color:#0969da;font-family:ui-monospace,SFMono-Regular,SF Pro Text,Menlo,Monaco,Consolas,monospace;display:inline-block;text-align:left}body header .control_area #brushSizeValue{min-width:24px}body header .control_area #brushColorValue{min-width:80px}body header .control_area input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:140px;max-width:310px;height:6px;background:#e1e4e8;border-radius:3px;outline:none;cursor:pointer;transition:background .2s ease}body header .control_area input[type=range]:hover{background:#d1d5da}body header .control_area input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0969da;box-shadow:0 2px 4px #0000001a;transition:transform .1s ease,background .1s ease}body header .control_area input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);background:#0969da}body header .control_area input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d0d7de;border-radius:8px;background:none;cursor:pointer;width:38px;height:38px;padding:0;overflow:hidden;box-shadow:0 1px 3px #0000000d;transition:border-color .2s ease,transform .1s ease}body header .control_area input[type=color]::-webkit-color-swatch-wrapper{padding:0}body header .control_area input[type=color]::-webkit-color-swatch{border:none;border-radius:7px}body header .control_area input[type=color]:hover{border-color:#8c959f;transform:translateY(-1px)}body header .control_area input[type=color]:active{transform:translateY(0)}body .canvas_container{flex-grow:1;min-height:0;overflow:auto;background-color:#f6f8fa;display:flex;align-items:flex-start;justify-content:flex-start}body .canvas_container::-webkit-scrollbar{width:10px;height:10px}body .canvas_container::-webkit-scrollbar-track{background:transparent}body .canvas_container::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:10px;border:2px solid #f6f8fa;transition:background-color .2s ease}body .canvas_container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}body .canvas_container::-webkit-scrollbar-thumb:active{background-color:#0969da}body .canvas_container::-webkit-scrollbar-corner{background:transparent}body .canvas_container canvas{background-color:#fff;display:block;cursor:crosshair;touch-action:none;flex-shrink:0;border:1px solid #d0d7de;-webkit-user-select:none;user-select:none}body .canvas_container canvas.is-dragging{cursor:grab}body .canvas_container canvas.is-dragging:active{cursor:grabbing}@media (max-width: 768px){body header{height:auto;min-height:120px;padding:16px;flex-direction:column;align-items:flex-start;gap:16px}body header .logo_area{width:100%;gap:12px}body header .logo_area a img{height:36px}body header .logo_area h1{font-size:1.25rem}body header .control_area{width:100%;margin-left:0;padding-left:0;border-left:none;display:flex;flex-direction:column;gap:12px;height:auto}body header .control_area .toggle{width:100%}body header .control_area .slider_row,body header .control_area .color_row{display:flex;align-items:center;gap:12px;width:100%}body header .control_area input[type=range]{flex-grow:1;width:auto}body header .control_area p{font-size:.9rem;margin:0}body header .control_area #brushSizeValue{min-width:18px}body header .control_area #brushColorValue{min-width:65px}body header .control_area input[type=color]{width:34px;height:34px;flex-shrink:0}}.control_area{display:flex;align-items:center;gap:20px}.control_area .toggle{display:flex;align-items:center;gap:8px}.control_area .toggle .switch_label{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}.control_area .toggle .switch_label .switch_input{opacity:0;width:0;height:0}.control_area .toggle .switch_label .switch_input:checked+.switch_slider{background-color:#3b82f6}.control_area .toggle .switch_label .switch_input:checked+.switch_slider:before{transform:translate(20px)}.control_area .toggle .switch_label .switch_input:focus-visible+.switch_slider{box-shadow:0 0 0 2px #3b82f666}.control_area .toggle .switch_label .switch_slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#e2e8f0;border-radius:999px;transition:background-color .3s ease}.control_area .toggle .switch_label .switch_slider:hover{background-color:#d1dbe7}.control_area .toggle .switch_label .switch_slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #00000026}.control_area .toggle .toggle_text{font-size:14px;color:#333;font-weight:500;-webkit-user-select:none;user-select:none}