:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.drawing-app-root{position:fixed;inset:0;width:100vw;height:100vh;margin:0;padding:0;background:#f7f7f7;z-index:0}.drawing-image-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80vw;max-height:80vh;width:auto;height:auto;opacity:.65;pointer-events:none;z-index:5;-webkit-user-select:none;user-select:none;object-fit:contain}.drawing-canvas-full{position:fixed;inset:0;width:100vw!important;height:100vh!important;background:#fff;touch-action:none;outline:none;z-index:4;display:block}.drawing-toolbar-full{position:fixed;bottom:2vw;left:50%;transform:translate(-50%);background:#fafafaeb;border-radius:12px;box-shadow:0 2px 18px #0002;display:flex;flex-direction:row;gap:1.2rem;padding:.7rem 1.6rem;align-items:center;z-index:10;min-width:220px;max-width:90vw;font-size:1.2rem}.tool-btn-full{background:none;border:2px solid transparent;color:#222;padding:.3rem .7rem;border-radius:8px;cursor:pointer;transition:border .2s,background .2s;display:flex;align-items:center;justify-content:center}.tool-btn-full:hover{background:#f1f1f1}.tool-btn-full.active{background:#e3e3e3;border:2px solid #fff}.tool-btn-full img{display:block}.btn-ctn{background:none;border:none;padding:.3rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.btn-ctn:hover{background:#e3e3e3}.btn-ctn img{display:block;width:24px;height:24px}.color-picker-popover{position:relative;display:flex;align-items:center;margin-left:1.2rem}.color-swatch-btn{border-radius:12%;width:40px;height:40px;background:var(--current-color, #222);cursor:pointer;transition:border .2s;display:flex;align-items:center;justify-content:center}.color-swatch-btn:hover,.color-swatch-btn:focus{border-color:#fff}.color-picker-popover-panel{position:absolute;left:50%;bottom:48px;transform:translate(-50%);z-index:999;background:#fff;box-shadow:0 4px 24px #0003;border-radius:12px;padding:12px;animation:fadeIn .18s}.drawing-loading-screen{position:fixed;inset:0;background:#fff;z-index:10000;display:flex;align-items:center;justify-content:center}.drawing-loading-gif{width:220px;height:220px;object-fit:contain}.hide-btn{display:block}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}.color-picker-popover-panel .react-colorful{width:180px;height:180px}@media (max-width: 560px){.hide-btn{display:none}}@media (max-width: 700px){.drawing-toolbar-full{bottom:2vw;font-size:1rem;gap:.7rem;padding:.5rem .9rem}.tool-btn-full{padding:.16rem .4rem;font-size:.96rem}.tool-btn-full img{width:22px;height:22px}.btn-ctn img{width:20px;height:20px}.color-picker-popover-panel .react-colorful{width:120px;height:120px}.color-picker-popover-panel{padding:6px}.color-swatch-btn{width:32px;height:32px}.drawing-image-overlay{max-width:96vw;max-height:60vh}.drawing-white-overlay{width:100vw;height:100vh}}