html,body,#app{background:#fff;width:100%;height:100%;margin:0;padding:0;overflow:hidden}canvas{touch-action:none;display:block}button{touch-action:manipulation}.text-editor{z-index:20;resize:none;white-space:pre;touch-action:none;background:#fffffff5;border:1px dashed #2563eb;border-radius:2px;outline:none;min-width:48px;min-height:24px;margin:0;padding:2px 4px;position:fixed;overflow:hidden}.selection-delete-button{z-index:10;color:#374151;cursor:pointer;touch-action:none;background:#ffffffeb;border:1px solid #d1d5db;border-radius:10px;place-items:center;width:44px;height:44px;padding:0;display:grid;position:fixed;transform:translate(-50%,-50%)}.selection-delete-button:hover{color:#fff;background:#ef4444;border-color:#ef4444}.selection-delete-button svg{width:20px;height:20px;display:block}.eraser-indicator{z-index:5;pointer-events:none;background:#fda4af38;border:1px solid #fb71858c;border-radius:50%;position:fixed}.eraser-indicator[hidden]{display:none}.cursor-ring{z-index:5;pointer-events:none;background:#2563eb0f;border:1.5px solid #2563eba6;border-radius:50%;position:fixed}.cursor-ring__dot{background:#2563ebcc;border-radius:50%;width:3px;height:3px;margin-top:-1.5px;margin-left:-1.5px;position:absolute;top:50%;left:50%}.cursor-ring[hidden],.selection-delete-button[hidden]{display:none}:root{--drawings-panel-width:280px}.drawings-panel{z-index:20;width:var(--drawings-panel-width);box-sizing:border-box;-webkit-user-select:none;user-select:none;background:#fffffff5;border-left:1px solid #d1d5db;flex-direction:column;font-family:system-ui,sans-serif;transition:transform .36s;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(0);box-shadow:-8px 0 24px #0f172a1a}body.drawings-closed .drawings-panel{transform:translate(calc(100% + 1px))}.drawings-panel__header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:8px;padding:12px 12px 10px;display:flex}.drawings-panel__title{color:#111827;margin:0;font-size:14px;font-weight:600}.drawings-panel__new{align-items:center;gap:8px;display:flex}.drawings-panel__new .sidebar__history{border-radius:8px;width:35px;height:35px}.drawings-panel__new .sidebar__history img{width:19.5px;height:19.5px}.drawings-panel__list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:12px;padding:12px;display:flex;overflow-y:auto}.drawings-panel__list[hidden]{display:none}.drawings-card{background:#fff;border:1px solid #d1d5db;border-radius:12px;flex:none;height:230px;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden;box-shadow:0 1px 4px #0f172a0f}.drawings-card--active{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb,0 2px 8px #2563eb26}.drawings-card__open{cursor:pointer;text-align:left;background:0 0;border:0;width:100%;padding:0;font-family:inherit;display:block}.drawings-card__thumbnail{background:#f3f4f6;width:100%;height:190px}.drawings-card__thumbnail img{object-fit:contain;width:100%;height:100%;display:block}.drawings-card__name{color:#111827;white-space:nowrap;text-overflow:ellipsis;background:#fff;padding:10px 12px;font-size:12px;font-weight:500;line-height:1.4;display:block;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.drawings-card__actions{flex-direction:column;gap:4px;display:flex;position:absolute;top:6px;right:6px}.drawings-card__action{color:#374151;cursor:pointer;background:#ffffffeb;border:1px solid #d1d5db;border-radius:8px;place-items:center;width:44px;height:44px;padding:0;display:grid}.drawings-card__action:hover{color:#111827;background:#f3f4f6}.drawings-card__action--danger:hover{color:#fff;background:#ef4444;border-color:#ef4444}.drawings-card__action svg{width:20px;height:20px;display:block}.zoom-controls{z-index:15;background:#ffffffeb;border:1px solid #d1d5db;border-radius:12px;align-items:center;gap:4px;padding:4px;font-family:system-ui,sans-serif;display:flex;position:fixed;bottom:16px;left:16px;box-shadow:0 8px 24px #0f172a1f}.zoom-controls button{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;place-items:center;min-width:40px;height:40px;padding:0 8px;font-size:16px;font-weight:700;display:grid}.zoom-controls button:hover{background:#f3f4f6}.zoom-controls__label{min-width:56px;font-size:13px}body.board-mode .zoom-controls button{min-width:48px;height:48px}.drawings-panel__toggle{top:50%;right:var(--drawings-panel-width);z-index:30;color:#1e40af;cursor:pointer;background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;place-items:center;width:40px;height:48px;padding:0;transition:right .36s;display:grid;position:fixed;transform:translateY(-50%);box-shadow:0 2px 8px #0f172a1f}.drawings-panel__toggle svg{width:20px;height:20px;transition:transform .36s;display:block}body.drawings-closed .drawings-panel__toggle{right:0}body.drawings-closed .drawings-panel__toggle svg{transform:scaleX(-1)}.titlebar{z-index:100;box-sizing:border-box;color:#e2e8f0;-webkit-user-select:none;user-select:none;background:#6b7280;height:36px;font-family:system-ui,sans-serif;display:none;position:fixed;top:0;left:0;right:0}body.has-custom-titlebar .titlebar{justify-content:space-between;align-items:stretch;display:flex}.titlebar__drag{-webkit-app-region:drag;flex:1;align-items:center;gap:8px;min-width:0;padding:0 12px;display:flex}.titlebar__icon{object-fit:contain;pointer-events:none;width:18px;height:18px;display:block}.titlebar__title{white-space:nowrap;text-overflow:ellipsis;letter-spacing:.2px;color:#e2e8f0;font-size:13px;font-weight:600;overflow:hidden}.titlebar__controls{-webkit-app-region:no-drag;align-items:stretch;display:flex}.titlebar__button{color:#cbd5e1;cursor:pointer;-webkit-app-region:no-drag;background:0 0;border:0;place-items:center;width:46px;padding:0;display:grid}.titlebar__button:hover{color:#fff;background:#ffffff1f}.titlebar__button--close:hover{color:#fff;background:#e11d48}.titlebar__button svg{width:12px;height:12px;display:block}body.has-custom-titlebar #app{width:auto;height:auto;position:fixed;inset:36px 0 0}body.has-custom-titlebar .sidebar{top:auto}body.has-custom-titlebar .drawings-panel{top:36px}body.has-custom-titlebar .drawings-panel__toggle,body.has-custom-titlebar .toolbar-left-panel,body.has-custom-titlebar .toolbar-left-panel__toggle{top:calc(50% + 18px)}body.has-custom-titlebar .modal-backdrop{top:36px}.modal__input{box-sizing:border-box;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:6px;width:100%;margin:0 0 16px;padding:8px 10px;font:500 13px system-ui,sans-serif}.modal__input:focus-visible{outline-offset:1px;outline:2px solid #2563eb}@media (width<=767px){:root{--drawings-panel-width:60vw}}.sidebar{z-index:1;width:max-content;margin:0 auto;font-family:system-ui,sans-serif;transition:transform .36s;position:fixed;inset:auto 0 16px}body.sidebar-closed .sidebar{transform:translateY(calc(100% + 16px))}.sidebar__toggle{top:auto;bottom:var(--sidebar-toggle-bottom,82px);z-index:15;color:#1e40af;cursor:pointer;background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;place-items:center;width:48px;height:40px;padding:0;transition:transform .36s;display:grid;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0f172a1f}.sidebar__toggle[hidden]{display:none}.sidebar__toggle svg{width:18px;height:18px;transition:transform .36s;display:block;transform:rotate(180deg)}body.sidebar-closed .sidebar__toggle{transform:translate(-50%, calc(var(--sidebar-toggle-bottom,82px) - 8px))}body.sidebar-closed .sidebar__toggle svg{transform:none}.toolbar-left-panel{z-index:10;overscroll-behavior:contain;background:#ffffffeb;border:1px solid #d1d5db;border-radius:12px;flex-direction:column;align-items:center;gap:8px;max-height:calc(100vh - 32px);padding:8px;font-family:system-ui,sans-serif;transition:transform .36s;display:flex;position:fixed;top:50%;left:16px;overflow-y:auto;transform:translateY(-50%);box-shadow:0 8px 24px #0f172a1f}body.toolbar-left-closed .toolbar-left-panel{transform:translateY(-50%)translate(calc(-100% - 16px))}.toolbar-left-panel__list{flex-direction:column;align-items:center;gap:8px;display:flex}.toolbar-left-panel__toggle{top:50%;left:var(--toolbar-left-toggle-left,84px);z-index:30;color:#1e40af;cursor:pointer;background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;place-items:center;width:40px;height:48px;padding:0;transition:left .36s;display:grid;position:fixed;transform:translateY(-50%);box-shadow:0 2px 8px #0f172a1f}.toolbar-left-panel__toggle svg{width:20px;height:20px;transition:transform .36s;display:block}body.toolbar-left-closed .toolbar-left-panel__toggle{left:0}body.toolbar-left-closed .toolbar-left-panel__toggle svg{transform:rotate(180deg)}.sidebar__toolbar{background:#ffffffeb;border:1px solid #d1d5db;border-radius:12px;flex-direction:row;align-items:center;gap:8px;padding:8px;display:flex;box-shadow:0 8px 24px #0f172a1f}@media (width<=767px){.sidebar{width:max-content;max-width:100%;overflow:hidden;box-shadow:0 8px 24px #0f172a1f}.sidebar__toolbar{width:max-content;box-shadow:none;flex-wrap:nowrap}.sidebar__handle{z-index:1;touch-action:pan-x;position:sticky;left:0;box-shadow:1px 0 #d1d5db}}.sidebar__tool{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:47px;height:47px;padding:0;font-size:21.5px;display:flex}.sidebar__tool img,.sidebar__history img,.sidebar__pen-option img,.sidebar__eraser-option img,.sidebar__shape-option img,.sidebar__guideline-option img{pointer-events:none;-webkit-user-select:none;user-select:none;width:23px;height:23px;margin:auto;display:block}.sidebar__history{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:47px;height:47px;padding:0;font-size:22.5px;display:flex}.sidebar__history:disabled{color:#9ca3af;cursor:default}.sidebar__history:disabled img{opacity:.4;filter:grayscale()}.sidebar__handle{color:#111827;cursor:default;letter-spacing:.01em;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:0;border-radius:8px;width:47px;height:47px;padding:0;font-size:14.1px;font-weight:700}.sidebar__brand-accent{color:#2563eb}.sidebar__tool--selected{color:#1d4ed8;background:#eff6ff;border-color:#2563eb}.sidebar__control{position:relative}.sidebar__color-trigger,.sidebar__width-trigger{cursor:pointer;border:2px solid #fff;place-items:center;width:47px;height:47px;padding:0;display:grid;box-shadow:0 0 0 1px #d1d5db}.sidebar__color-trigger{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:47px;height:47px;padding:0;display:flex}.sidebar__color-preview{pointer-events:none;background:#111827;border:1px solid #0000001f;border-radius:50%;width:27px;height:27px}.sidebar__width-trigger{background:#fff;border-radius:8px}.sidebar__width-trigger:before{width:25px;height:var(--line-width);content:"";background:#111827;border-radius:999px;max-height:25px}.sidebar__flyout{background:#fffffff5;border:1px solid #d1d5db;border-radius:12px;flex-wrap:wrap;justify-content:center;gap:8px;max-width:min(480px,100vw - 24px);padding:8px;display:flex;position:absolute;top:50%;left:55px;transform:translateY(-50%);box-shadow:0 8px 24px #0f172a1f}.sidebar__flyout[hidden]{display:none}.sidebar__pen-palette,.sidebar__eraser-palette,.sidebar__shapes-palette,.sidebar__color-palette,.sidebar__width-palette{position:fixed;left:50%;transform:translate(-50%)}.sidebar__color{cursor:pointer;border:2px solid #0000;border-radius:50%;width:44px;height:44px;padding:0}.sidebar__color:focus-visible,.sidebar__color-trigger:focus-visible,.sidebar__width-trigger:focus-visible,.sidebar__tool:focus-visible,.sidebar__history:focus-visible,.sidebar__width:focus-visible,.sidebar__eraser-option:focus-visible,.sidebar__shape-option:focus-visible,.sidebar__guideline-option:focus-visible{outline-offset:-4px;border-color:#111827;outline:2px solid #fff}.sidebar__color--selected{border-color:#2563eb;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.sidebar__width{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;place-items:center;width:44px;height:44px;padding:0;font-size:12px;display:grid}.sidebar__width:before{width:25px;height:var(--line-width);content:"";background:#111827;border-radius:999px;max-height:24px}.sidebar__width--selected{background:#eff6ff;border-color:#2563eb}.sidebar__eraser-option,.sidebar__pen-option,.sidebar__shape-option{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:47px;height:47px;padding:0;font-size:13px;font-weight:700;display:flex}.sidebar__eraser-option--selected,.sidebar__pen-option--selected,.sidebar__shape-option--selected{color:#1d4ed8;background:#eff6ff;border-color:#2563eb}.sidebar__eraser-palette{margin-top:0}.sidebar__guideline-option{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;justify-content:center;align-items:center;width:47px;height:47px;padding:0;font-size:13px;font-weight:700;display:flex}.sidebar__guideline-option--selected{color:#1d4ed8;background:#eff6ff;border-color:#2563eb}.sidebar__guideline-palette{z-index:20;flex-direction:column;position:fixed;top:50%;left:88px;transform:translateY(-50%)}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a73;justify-content:center;align-items:center;animation:.15s ease-out modal-backdrop-in;display:flex;position:fixed;inset:0}.modal{background:#fff;border:1px solid #d1d5db;border-radius:8px;width:360px;max-width:calc(100vw - 32px);font-family:system-ui,sans-serif;animation:.18s ease-out modal-in;overflow:hidden;box-shadow:0 8px 32px #0f172a4d,0 2px 8px #0f172a26}.modal__titlebar{background:#f3f4f6;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:0 0 0 16px;display:flex}.modal__title{color:#111827;margin:0;font-size:13px;font-weight:600}.modal__close{color:#4b5563;cursor:pointer;background:0 0;border:0;width:42px;height:36px;font-size:18px;line-height:1}.modal__close:hover{color:#fff;background:#e11d48}.modal__body{padding:20px 24px 0}.modal__message{color:#374151;margin:0 0 20px;font-size:14px;line-height:1.5}.modal__actions{background:#f9fafb;border-top:1px solid #e5e7eb;justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}.modal__button{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:6px;min-width:84px;height:34px;padding:0 16px;font:500 13px system-ui,sans-serif;transition:background .15s,border-color .15s}.modal__button:hover{background:#f3f4f6}.modal__button:focus-visible{outline-offset:2px;outline:2px solid #2563eb}.modal__button--confirm{color:#fff;background:#2563eb;border-color:#0000}.modal__button--confirm:hover{background:#1d4ed8}@keyframes modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.96)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}body.board-mode .sidebar__toggle{width:64px;height:40px}body.board-mode .drawings-panel__title{font-size:20px}body.board-mode .drawings-card__name{font-size:17px}body.board-mode .modal__title,body.board-mode .modal__message{font-size:16px}body.board-mode .modal__button{min-width:110px;height:48px;font-size:15px}body.board-mode .modal__input{padding:12px 10px;font-size:16px}body.board-mode .titlebar__title{font-size:15px}body.board-mode .selection-delete-button{width:44px;height:44px}body.board-mode .selection-delete-button svg{width:22px;height:22px}body.board-mode .drawings-card__action{width:44px;height:44px}body.board-mode .drawings-card__action svg{width:20px;height:20px}body.board-mode .sidebar__color,body.board-mode .sidebar__width,body.board-mode .drawings-panel__new .sidebar__history{width:48px;height:48px}body.board-mode .drawings-panel__new .sidebar__history img{width:26px;height:26px}body.board-mode .toolbar-left-panel__toggle,body.board-mode .drawings-panel__toggle{width:40px;height:64px}