.wb-wrap{margin-top:0;padding-inline:0;width:100%}.wb{position:relative;width:100%;height:70vh;min-height:540px;background-color:var(--paper);background-image:radial-gradient(circle,var(--rule) 1px,transparent 1.2px);background-size:24px 24px;background-position:12px 12px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}@media(min-width:1024px){.wb{height:clamp(620px,75vh,820px)}}.wb[data-mode=text]{cursor:text}.wb[data-mode=draw]{cursor:crosshair}.wb[data-mode=move]{cursor:default}.wb__ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.wb__stroke{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.wb__stroke-group{pointer-events:none}.wb[data-mode=move] .wb__stroke-group{pointer-events:auto;cursor:grab}.wb[data-mode=move] .wb__stroke-group:active{cursor:grabbing}.wb__stroke-hit{fill:transparent;stroke:transparent;stroke-width:18}.wb__text{position:absolute;font-family:var(--font-sans);font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);line-height:1.45;color:var(--ink);min-width:6ch;max-width:min(36ch,60vw);padding:2px 4px;margin:-2px -4px;background:transparent;border-radius:2px;outline:none;white-space:pre-wrap;overflow-wrap:break-word;caret-color:var(--ink);-webkit-user-select:text;user-select:text;pointer-events:none}.wb[data-mode=text] .wb__text{pointer-events:auto;cursor:text}.wb[data-mode=move] .wb__text{pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none}.wb[data-mode=move] .wb__text:active{cursor:grabbing}.wb__text--prompt{font-style:italic;color:var(--ink-faint)}.wb__text:focus-visible{outline:1px dashed var(--ink-mute);outline-offset:4px}.wb__toolbar{position:absolute;bottom:clamp(1rem,2vh,1.5rem);left:clamp(1rem,2vw,1.5rem);display:flex;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--rule);font-family:var(--font-sans);z-index:5}.wb__tool{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink-mute);border-right:1px solid var(--rule);transition:color .18s var(--ease-out),background .18s var(--ease-out)}.wb__tool:last-of-type{border-right:0}.wb__tool:hover{color:var(--ink);background:#f5f5f5}.wb__tool[aria-pressed=true]{color:var(--ink)}.wb__tool[aria-pressed=true]:after{content:"";position:absolute;bottom:6px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--ink)}.wb__tool svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}.wb__tool--text-label{font-size:1rem;font-weight:500;letter-spacing:-.01em}.wb__pen-options{display:flex;align-items:stretch;border-left:1px solid var(--rule);border-right:1px solid var(--rule);background:var(--paper)}.wb__pen-widths,.wb__pen-colors{display:flex;align-items:center;padding-inline:.4rem}.wb__pen-divider{width:1px;background:var(--rule);margin-block:8px}.wb__pen-width{width:28px;height:28px;margin-inline:2px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-mute)}.wb__pen-width:hover{background:#f5f5f5}.wb__pen-width[aria-checked=true]{background:#f5f5f5;outline:1px solid var(--ink)}.wb__pen-width-dot{display:inline-block;background:currentColor;border-radius:50%}.wb__pen-color{width:22px;height:22px;margin-inline:3px;border-radius:50%;box-shadow:0 0 0 1px var(--rule)}.wb__pen-color[aria-checked=true]{box-shadow:0 0 0 1px var(--paper),0 0 0 2px var(--ink)}.wb__hint{position:absolute;top:clamp(.875rem,2vh,1.25rem);right:clamp(1rem,2vw,1.5rem);font-size:var(--text-xs);color:var(--ink-faint);pointer-events:none;letter-spacing:.02em}.wb__send{position:absolute;bottom:clamp(1rem,2vh,1.5rem);right:clamp(1rem,2vw,1.5rem);font-weight:500;font-size:var(--text-base);color:var(--ink);padding:.5rem .25rem;z-index:5;text-decoration:underline;text-decoration-color:var(--ink-faint);text-underline-offset:5px;text-transform:lowercase}.wb__send:hover{text-decoration-color:var(--ink)}.wb__tool--clear[data-confirming=true]{color:var(--ink)}.wb__modal-backdrop{position:fixed;inset:0;background:color-mix(in srgb,var(--paper) 88%,transparent);z-index:50;display:flex;align-items:center;justify-content:center;padding:var(--pad-x)}.wb__modal{background:var(--paper);border:1px solid var(--rule);width:min(100%,460px);padding:clamp(1.75rem,3vh,2.5rem) clamp(1.75rem,3vw,2.5rem) clamp(1.5rem,2.5vh,2rem)}.wb__modal h2{font-size:var(--text-lg);font-weight:400;letter-spacing:-.02em;margin-bottom:clamp(1.25rem,2vh,1.75rem)}.wb__modal-field{display:flex;flex-direction:column;border-bottom:1px solid var(--rule);padding-block:.75rem}.wb__modal-field:focus-within{border-bottom-color:var(--ink)}.wb__modal-field label{font-size:var(--text-xs);color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem}.wb__modal-field input{background:transparent;border:0;font:inherit;font-size:var(--text-base);color:var(--ink);padding:0;outline:none}.wb__modal-field input::placeholder{color:var(--ink-faint)}.wb__modal-actions{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(1.5rem,2.5vh,2rem)}.wb__modal-cancel,.wb__modal-submit{font-weight:500;font-size:var(--text-sm);color:var(--ink-mute);text-transform:lowercase}.wb__modal-submit{color:var(--ink)}.wb__modal-submit:disabled{color:var(--ink-faint);cursor:not-allowed}.wb__modal-confirm{font-size:var(--text-md);line-height:1.4;max-width:34ch}
