#drawing-surface { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#drawing-surface path { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#drawing-surface.pencil-active { z-index: 4; pointer-events: auto; touch-action: none; cursor: crosshair; }
.pencil-tools { position: fixed; right: 20px; bottom: 20px; z-index: 6; display: flex; flex-direction: column; gap: 12px; align-items: center; }
#pencil-modes { display: flex; flex-direction: column; gap: 12px; }
.pencil-fab { width: 48px; height: 48px; padding: 12px; display: grid; place-items: center; border-radius: 50%; color: CanvasText; background: Canvas; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent); box-shadow: 0 3px 12px #00000020; }
.pencil-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pencil-fab[aria-pressed="true"] { color: Canvas; background: CanvasText; }