/* The drawing board (public/site/drawboard.js): a full-window canvas over the lesson, a toolbar and a floating ✏️ button. */
.db-canvas{position:fixed;inset:0;z-index:950;pointer-events:none;touch-action:none}
.db-canvas.live{pointer-events:auto}
.db-fab{position:fixed;right:18px;bottom:96px;z-index:960;width:52px;height:52px;border:3px solid #1b1340;border-radius:50%;background:#ffd23f;font-size:24px;line-height:1;cursor:pointer;box-shadow:3px 3px 0 #1b1340;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.db-fab:hover{transform:rotate(-12deg) scale(1.06)}.db-fab.on{background:#38d9a9}
.db-bar{position:fixed;left:50%;bottom:16px;z-index:1002;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:calc(100vw - 24px);padding:8px 10px;border:3px solid #1b1340;border-radius:18px;background:#fff;box-shadow:5px 5px 0 #1b1340;transform:translateX(-50%)}
.db-bar[hidden]{display:none}
.db-b{min-width:38px;height:38px;padding:0 9px;border:2px solid #1b1340;border-radius:11px;background:#fff;font:700 16px/1 system-ui;cursor:pointer}
.db-b[aria-pressed=true]{background:#ffd23f;box-shadow:0 3px 0 #1b1340}
.db-col{width:30px;min-width:30px;height:30px;padding:0;border-radius:50%}.db-col[aria-pressed=true]{outline:3px solid #ffd23f;outline-offset:2px;box-shadow:none}
.db-sep{width:2px;height:28px;background:#e3def8}
.db-close{background:#1b1340;color:#fff}
@media(min-width:720px){.db-bar{flex-wrap:nowrap}}
@media print{.db-canvas,.db-fab,.db-bar{display:none!important}}