.whiteboard-app{color:#17251f;background:#ebece5;border:1px solid #b8b9ae;border-radius:24px;font-family:DM Sans,sans-serif;position:relative;overflow:hidden;box-shadow:0 28px 70px #17251f21}.wb-documentbar{background:#fffdf8;border-bottom:1px solid #cbcbbf;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:9px 12px 9px 16px;display:flex}.wb-title-wrap,.wb-doc-actions,.wb-stylebar,.wb-storage-note{align-items:center;display:flex}.wb-title-wrap{gap:12px;min-width:0}.wb-logo{color:#d7ff72;letter-spacing:-2px;background:#17251f;border-radius:9px;place-items:center;width:36px;height:36px;font-family:Monoton,cursive;font-size:11px;display:grid}.wb-title-wrap input{color:#17251f;background:0 0;border:0;border-bottom:1px solid #0000;width:min(260px,30vw);font:800 16px/1.2 DM Sans,sans-serif}.wb-title-wrap input:hover,.wb-title-wrap input:focus{border-bottom-color:#8a8d82;outline:0}.wb-doc-actions{gap:5px}.wb-documentbar button,.wb-stylebar button,.wb-zoom button,.wb-canvas-actions button,.wb-text-editor button{color:#2e3934;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;font:750 12px/1 DM Sans,sans-serif}.wb-documentbar button{min-height:37px;padding:0 11px}.wb-documentbar button:hover,.wb-stylebar button:hover{background:#eceee8}.wb-documentbar button:disabled{opacity:.35;cursor:not-allowed}.wb-save{border-color:#acafa4!important}.wb-save.is-on{background:#dff6a9!important;border-color:#7b9c41!important}.wb-save-dot{background:#999;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.wb-save.is-on .wb-save-dot{background:#3b741f}.wb-menu{position:relative}.wb-menu-panel{z-index:20;background:#fff;border:1px solid #c6c8bd;border-radius:12px;width:150px;padding:6px;display:none;position:absolute;top:38px;right:0;box-shadow:0 14px 35px #17251f2e}.wb-menu:hover .wb-menu-panel,.wb-menu:focus-within .wb-menu-panel{display:grid}.wb-menu-panel button{text-align:left}.wb-toolbar{z-index:8;background:#fffdf8f5;border:1px solid #bfc1b7;border-radius:13px;flex-direction:column;gap:4px;padding:6px;display:flex;position:absolute;top:78px;left:16px;box-shadow:0 8px 24px #17251f1f}.wb-toolbar button{color:#26332d;cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;width:40px;height:40px;font:700 21px/1 serif;display:grid;position:relative}.wb-toolbar button:hover{background:#e9ece4}.wb-toolbar button.is-active{color:#d7ff72;background:#17251f}.wb-toolbar small{opacity:.65;font:700 8px/1 DM Sans,sans-serif;position:absolute;bottom:2px;right:3px}.wb-divider{background:#d3d5cc;height:1px;margin:2px 4px}.wb-stylebar{text-transform:uppercase;letter-spacing:.06em;background:#f5f5ef;border-bottom:1px solid #c8cabf;justify-content:center;gap:12px;min-height:50px;padding:7px 76px;font-size:11px;font-weight:800}.wb-stylebar label{align-items:center;gap:6px;display:flex}.wb-color{border:2px solid #fff;border-radius:50%;width:23px;height:23px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #94978d}.wb-color input{opacity:0;cursor:pointer;width:40px;height:40px;position:absolute;inset:-8px}.wb-swatches{gap:3px;display:flex}.wb-swatches button{border:1px solid #00000026;border-radius:50%;width:17px;height:17px;padding:0}.wb-stylebar select{background:#fff;border:1px solid #c0c2b8;border-radius:7px;height:28px;font:700 11px DM Sans,sans-serif}.wb-stylebar input[type=range]{accent-color:#17251f;width:78px}.wb-stylebar>button{border-color:#c8cabf;min-height:28px;padding:0 9px}.wb-canvas-wrap{height:min(72vh,780px);min-height:560px;position:relative;overflow:hidden}.wb-canvas{touch-action:none;user-select:none;width:100%;height:100%;display:block}.wb-canvas.tool-hand{cursor:grab}.wb-canvas.tool-draw,.wb-canvas.tool-line,.wb-canvas.tool-arrow{cursor:crosshair}.wb-canvas.tool-eraser{cursor:not-allowed}.wb-shape{cursor:pointer}.wb-selection{fill:none;stroke:#2d6cdf;stroke-width:1.5px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}.wb-resize{fill:#fff;stroke:#2d6cdf;stroke-width:2px;vector-effect:non-scaling-stroke;cursor:nwse-resize}.wb-marquee{fill:#2d6cdf1a;stroke:#2d6cdf;stroke-width:1px;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}.wb-empty{color:#59615d;text-align:center;pointer-events:none;gap:7px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.wb-empty strong{color:#293630;font:800 clamp(24px,4vw,42px)/1.1 Fraunces,serif}.wb-empty span{font-size:14px}.wb-zoom,.wb-canvas-actions,.wb-status{z-index:6;background:#fffdf8f0;border:1px solid #bfc2b6;border-radius:11px;position:absolute;bottom:14px;box-shadow:0 5px 18px #17251f14}.wb-zoom{display:flex;left:14px;overflow:hidden}.wb-zoom button{border-radius:0;min-width:38px;height:36px;padding:0 8px}.wb-zoom button+button{border-left-color:#d1d3ca}.wb-canvas-actions{align-items:center;gap:8px;padding:5px 7px 5px 11px;font-size:12px;font-weight:750;display:flex;right:14px}.wb-canvas-actions label{gap:5px;display:flex}.wb-canvas-actions button{min-height:28px;padding:0 8px}.wb-status{color:#68716c;padding:7px 10px;font-size:11px;left:50%;transform:translate(-50%)}.wb-text-editor{z-index:15;background:#fff;border:1px solid #65726b;border-radius:12px;width:270px;padding:8px;position:absolute;box-shadow:0 12px 30px #17251f2e}.wb-text-editor.is-note{background:#ffd76f}.wb-text-editor textarea{resize:none;color:#17251f;background:0 0;border:0;outline:0;width:100%;height:92px;padding:8px;font:700 18px/1.35 DM Sans,sans-serif}.wb-text-editor div{justify-content:flex-end;gap:5px;display:flex}.wb-text-editor button{color:#fff;background:#17251f;min-height:29px;padding:0 9px}.wb-storage-note{color:#fff;background:#17251f;border-top:1px solid #c0c2b8;gap:14px;padding:15px 18px}.wb-lock{color:#d7ff72;border:1px solid #75827c;border-radius:50%;flex:0 0 38px;place-items:center;height:38px;font-size:22px;display:grid}.wb-storage-note div:nth-child(2){flex:1;min-width:0}.wb-storage-note strong{font-size:13px}.wb-storage-note p{color:#cbd2ce;max-width:850px;margin:3px 0 0;font-size:11px;line-height:1.5}.wb-storage-note>span{color:#cbd2ce;border:1px solid #66746d;border-radius:999px;flex:none;padding:7px 10px;font-size:10px;font-weight:800}.wb-storage-note>span.is-saved{color:#d7ff72;border-color:#779d43}@media (width<=900px){.wb-documentbar{flex-direction:column;align-items:flex-start}.wb-doc-actions{width:100%;overflow-x:auto}.wb-doc-actions .wb-quiet span{display:none}.wb-stylebar{white-space:nowrap;justify-content:flex-start;padding-left:70px;overflow-x:auto}.wb-canvas-wrap{height:68vh;min-height:500px}.wb-storage-note{align-items:flex-start}.wb-storage-note>span{display:none}}@media (width<=600px){.whiteboard-app{border-radius:16px}.wb-title-wrap input{width:210px}.wb-toolbar{top:132px;left:7px}.wb-toolbar button{width:36px;height:36px}.wb-stylebar{padding-left:55px}.wb-stylebar .wb-swatches,.wb-stylebar label:nth-of-type(3),.wb-canvas-actions{display:none}.wb-status{bottom:58px}.wb-storage-note{padding:13px}.wb-lock{display:none}.wb-storage-note p{font-size:10px}.wb-canvas-wrap{min-height:520px}}