.app{width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#fafafa;transition:background .2s ease}.app.dark{background:#1a1a1a}.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fff;border-bottom:1px solid #e5e5e5;z-index:100;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;transition:background .2s ease,border-color .2s ease}.app.dark .toolbar{background:#252525;border-bottom-color:#333}.toolbar-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.divider{width:1px;height:24px;background:#e5e5e5;margin:0 4px;flex-shrink:0;transition:background .2s ease}.app.dark .divider{background:#444}.spacer{flex:1;min-width:8px}.tool-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:#666;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.app.dark .tool-btn{color:#999}.tool-btn:hover{background:#f0f0f0;color:#1a1a1a}.app.dark .tool-btn:hover{background:#333;color:#fff}.tool-btn:active{background:#e5e5e5}.app.dark .tool-btn:active{background:#444}.tool-btn.active{background:#1a1a1a;color:#fff}.app.dark .tool-btn.active{background:#fff;color:#1a1a1a}.tool-btn svg{width:20px;height:20px}.color-btn{width:28px;height:28px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;flex-shrink:0}.color-btn:hover{transform:scale(1.1)}.color-btn:active{transform:scale(.95)}.color-btn.active{border-color:#1a1a1a;box-shadow:0 0 0 2px #fff,0 0 0 4px #1a1a1a}.app.dark .color-btn.active{border-color:#fff;box-shadow:0 0 0 2px #252525,0 0 0 4px #fff}.size-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:6px;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.size-btn:hover{background:#f0f0f0}.app.dark .size-btn:hover{background:#333}.size-btn:active{background:#e0e0e0}.app.dark .size-btn:active{background:#444}.size-btn.active{background:#e5e5e5}.app.dark .size-btn.active{background:#444}.size-btn span{background:#1a1a1a;border-radius:50%}.app.dark .size-btn span{background:#fff}.zoom-info{font-size:12px;color:#999;font-weight:500;min-width:45px;text-align:center;flex-shrink:0}.app.dark .zoom-info{color:#777}.saving-indicator{font-size:11px;color:#999;padding:4px 8px;background:#f5f5f5;border-radius:4px;flex-shrink:0}.app.dark .saving-indicator{background:#333;color:#777}.canvas-container{flex:1;overflow:hidden;touch-action:none}.canvas-container canvas{display:block}.hint{position:fixed;bottom:16px;left:50%;transform:translate(-50%);font-size:12px;color:#999;background:#ffffffe6;padding:8px 16px;border-radius:20px;box-shadow:0 2px 8px #00000014;pointer-events:none;z-index:50;transition:background .2s ease,color .2s ease}.app.dark .hint{background:#252525e6;color:#777;box-shadow:0 2px 8px #0000004d}.desktop-hint{display:inline}.mobile-hint{display:none}::selection{background:#0000001a}.app.dark ::selection{background:#fff3}@media (max-width: 600px){.toolbar{padding:8px 12px;gap:6px}.tool-btn{width:44px;height:44px}.tool-btn svg{width:22px;height:22px}.color-btn{width:32px;height:32px}.divider{margin:0 2px}.hide-mobile{display:none}.hint{bottom:12px;padding:6px 12px;font-size:11px}.desktop-hint{display:none}.mobile-hint{display:inline}.zoom-info{font-size:11px;min-width:40px}.saving-indicator{font-size:10px;padding:3px 6px}}@supports (padding: env(safe-area-inset-bottom)){.hint{bottom:calc(16px + env(safe-area-inset-bottom))}.toolbar{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;background:#fafafa;color:#1a1a1a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh;overflow:hidden}