#whiteboard{--wb-control:44px;isolation:isolate;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;margin-top:24px;padding:0;font-family:DM Sans Variable,sans-serif;position:relative;overflow:visible}#whiteboard [hidden]{display:none!important}#whiteboard :is(button,summary,select,input,textarea){font:inherit}#whiteboard :is(button,summary){cursor:pointer}#whiteboard :is(button,summary):focus-visible,#whiteboard :is(input,select,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:2px}#whiteboard :is(button,summary){transition:background-color .12s,border-color .12s}#whiteboard button:disabled{opacity:.4;cursor:default}#whiteboard :is(.wb-top,.wb-toolbar,.wb-selection,.wb-bottom){background:var(--surface);border:0;border-bottom:1px solid var(--line);border-radius:0;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;min-width:0;margin:0;padding:8px 12px;display:flex}#whiteboard .wb-top{border-radius:12px 12px 0 0;justify-content:space-between}#whiteboard .wb-top h2{letter-spacing:0;margin:0;font-size:16px}#whiteboard .wb-top-actions{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}#whiteboard :is(.wb-top,.wb-toolbar,.wb-selection,.wb-bottom,.wb-session-strip,.wb-floating,.wb-control-panel) :is(button,.button,summary){min-height:44px;color:var(--ink);box-shadow:none;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;margin:0;padding:8px 12px;font-size:14px;font-weight:600;line-height:1.3;text-decoration:none;display:inline-flex}#whiteboard :is(.wb-top,.wb-toolbar,.wb-selection,.wb-bottom,.wb-session-strip,.wb-floating,.wb-control-panel) :is(button,summary):hover{background:var(--paper);border-color:var(--line)}#whiteboard .button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}#whiteboard .button.primary:hover{filter:brightness(.94)}#whiteboard :is(.wb-icon-button,#wb-toggle-tools,#wb-undo,#wb-redo){width:44px;min-width:44px;padding:0}#whiteboard #wb-toggle-tools span{display:none}#whiteboard :is(button[aria-pressed=true],details[open]>summary){background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}#whiteboard .wb-toolbar{gap:4px}#whiteboard #wb-file-menu{margin-right:auto}#whiteboard .wb-control-menu,#whiteboard .wb-options{position:relative}#whiteboard summary{list-style:none}#whiteboard summary::-webkit-details-marker{display:none}#whiteboard :is(.wb-control-panel,.wb-settings){z-index:40;border:1px solid var(--line);background:var(--surface);width:280px;max-width:calc(100vw - 32px);max-height:min(470px,100dvh - 100px);color:var(--ink);border-radius:12px;padding:16px;position:absolute;top:calc(100% + 8px);right:0;overflow:auto;box-shadow:0 12px 32px #0002}#whiteboard :is(#wb-pen-menu,#wb-file-menu) .wb-control-panel{left:0;right:auto}#whiteboard .wb-control-panel h3{letter-spacing:0;margin:0 0 12px;font-size:15px}#whiteboard .wb-control-panel>button{justify-content:flex-start;width:100%}#whiteboard .wb-control-panel.wb-pens{grid-template-columns:1fr;gap:4px;display:grid}#whiteboard .wb-settings{grid-template-columns:1fr;gap:14px;width:300px;margin:0;display:grid}#whiteboard :is(.wb-settings,.wb-floating) label{gap:8px;min-width:0;margin:0;font-size:14px;font-weight:600;display:grid}#whiteboard :is(.wb-settings,.wb-floating) :is(input:not([type=checkbox]),select,textarea){border:1px solid var(--line);background:var(--paper);width:100%;min-width:0;min-height:44px;color:var(--ink);border-radius:8px;padding:10px 12px;font-size:16px;line-height:1.4}#whiteboard .wb-settings .check-label,#whiteboard .request-sound{align-items:center;gap:10px;min-height:44px;display:flex}#whiteboard input[type=checkbox]{width:20px;min-width:20px;height:20px;accent-color:var(--blue);margin:0}#whiteboard :is(.field-help,.wb-floating p,.wb-settings p){color:var(--muted);margin:0;font-size:14px;line-height:1.5}#whiteboard .wb-swatches{grid-template-columns:repeat(5,44px);gap:6px;display:grid}#whiteboard .wb-swatches button{border:1px solid var(--line);background:var(--swatch);width:44px;height:44px;box-shadow:inset 0 0 0 5px var(--surface);border-radius:8px;padding:5px}#whiteboard .wb-swatches button[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}#whiteboard #wb-ink-chip{background:var(--wb-ink,#243248);border:1px solid #8888;border-radius:5px;width:18px;height:18px}#whiteboard .wb-custom-color{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:12px;font-size:14px;display:flex}#whiteboard #wb-color{border:1px solid var(--line);background:var(--paper);border-radius:8px;width:52px;height:44px;padding:4px}#whiteboard .wb-tip-mini{place-items:center;width:20px;height:20px;display:grid}#whiteboard .wb-tip-mini i{width:var(--wb-tip-mini,3px);height:var(--wb-tip-mini,3px);background:var(--wb-ink,#243248);border:1px solid #8886;border-radius:50%}#whiteboard .wb-tip-heading{justify-content:space-between;align-items:baseline;display:flex}#whiteboard .wb-tip-heading output{color:var(--blue);font-size:14px;font-weight:600}#whiteboard .wb-tip-preview{border:1px solid var(--line);background:#fff;border-radius:8px;place-items:center;height:64px;margin-bottom:14px;display:grid}#whiteboard .wb-tip-preview i{width:var(--wb-tip,5px);height:var(--wb-tip,5px);background:var(--wb-ink,#243248);border-radius:50%}#whiteboard .wb-range-label{color:var(--muted);font-size:14px}#whiteboard #wb-width{width:100%;height:32px;accent-color:var(--blue);margin:4px 0}#whiteboard .wb-range-ends{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}#whiteboard .wb-tip-presets{gap:4px;margin-top:12px;display:flex}#whiteboard .wb-tip-presets button{flex:1;padding:6px}#whiteboard .wb-selection{font-size:14px}#whiteboard .wb-selection span{margin-right:auto}#whiteboard .wb-layout{min-width:0;margin:0;display:block;position:relative}#whiteboard .wb-desk{overscroll-behavior:contain;background:var(--paper);min-width:0;min-height:0;aspect-ratio:var(--wb-ratio,1.77778);padding:12px;display:block;overflow:auto}#whiteboard .wb-desk canvas{width:var(--canvas-width,100%);max-width:none;height:auto;max-height:none;margin:var(--canvas-top,0px) auto 0;touch-action:none;cursor:crosshair;box-shadow:none;background:#fff;flex:none;display:block}#whiteboard .wb-bottom{border-bottom:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px;flex-wrap:nowrap}#whiteboard .wb-pages{flex:1;align-items:center;gap:4px;min-width:0;display:flex}#whiteboard #wb-pages{scrollbar-width:none;gap:4px;min-width:0;max-width:240px;display:flex;overflow:auto}#whiteboard .wb-page{flex-shrink:0;font-weight:500}#whiteboard .wb-page small,#whiteboard :is(#wb-count,#wb-current){display:none}#whiteboard .wb-page[aria-current=true]{background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--blue)}#whiteboard .wb-page-jump select{border:1px solid var(--line);background:var(--surface);width:115px;min-height:44px;color:var(--ink);border-radius:8px;padding:8px;font-size:14px}#whiteboard :is(#wb-prev,#wb-next){font-size:24px}#whiteboard .code-actions{gap:4px;display:flex}#whiteboard .wb-viewbar{align-items:center;gap:8px;min-width:0;display:flex}#whiteboard .wb-zoom{flex-shrink:0;align-items:center;gap:2px;display:flex}#whiteboard .wb-zoom button{width:44px;min-width:44px;padding:0}#whiteboard #wb-zoom-fit{width:auto;padding:8px}#whiteboard .wb-zoom output{text-align:center;font-variant-numeric:tabular-nums;width:48px;font-size:14px;font-weight:600}#whiteboard .wb-help{flex-shrink:0;display:inline-block;position:relative}#whiteboard .wb-help>summary{border:1px solid var(--line);width:44px;min-height:44px;color:var(--muted);background:0 0;border-radius:8px;padding:0;font-size:16px}#whiteboard .wb-help>div{z-index:45;border:1px solid var(--line);background:var(--surface);border-radius:12px;width:280px;max-width:calc(100vw - 32px);padding:16px;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 12px 32px #0002}#whiteboard .wb-help>div p+p{margin-top:12px}#whiteboard #wb-save-state{display:none}#whiteboard .wb-floating{z-index:35;border:1px solid var(--line);background:var(--surface);border-radius:12px;gap:12px;width:320px;max-width:calc(100% - 24px);max-height:min(620px,100dvh - 88px);padding:16px;display:grid;position:absolute;top:68px;right:12px;overflow:auto;box-shadow:0 12px 32px #0002}#whiteboard .wb-floating h3{letter-spacing:0;margin:0;font-size:18px}#whiteboard .wb-floating .editor-top{justify-content:space-between;align-items:center;gap:8px;margin:0;display:flex}#whiteboard .wb-floating .editor-top h3{align-items:center;gap:8px;display:flex}#whiteboard #wb-share-panel>.wb-help{position:absolute;top:16px;right:64px}#whiteboard #wb-share-panel>.wb-help>div{width:270px;top:calc(100% + 8px);bottom:auto;right:-44px}#whiteboard #wb-share-panel .editor-top h3{font-size:17px}#whiteboard #wb-share-panel .editor-top h3 svg{width:18px}#whiteboard .wb-invite-actions{gap:8px;margin-top:8px;display:flex}#whiteboard .wb-invite-actions button{flex:1;padding:8px;font-size:13px}#whiteboard .wb-sharing-details{margin:0}#whiteboard .wb-sharing-details>summary{width:100%;color:var(--muted);justify-content:flex-start;font-size:14px}#whiteboard .wb-sharing-details>p,#whiteboard .wb-sharing-details>label{margin-top:8px}#whiteboard #wb-room-status{color:var(--muted);font-size:13px;line-height:1.45}#whiteboard :is(#wb-participants,#wb-waiting):empty{display:none}#whiteboard #wb-participants p{margin:0 0 8px;font-size:13px}#whiteboard :is(.wb-person,#wb-waiting>div){border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:4px;padding:8px 0;font-size:13px;display:flex}#whiteboard .wb-person>span{overflow-wrap:anywhere;flex:1;min-width:0}#whiteboard .wb-person button{padding:6px;font-size:12px}#whiteboard #wb-invite-qr{background:#fff;border-radius:8px;max-width:100%;height:auto;margin:12px auto;display:block}#whiteboard .wb-session-strip{background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0;align-items:center;gap:8px;padding:0 12px;display:flex}#whiteboard .wb-session-strip:has(#wb-inline-end-room[hidden]):has(.session-clock[hidden]){display:none}#whiteboard #wb-session-time{flex:1;min-width:0}#whiteboard .session-clock{box-shadow:none;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;gap:8px;min-width:0;margin:0;padding:8px 0;display:flex}#whiteboard .session-clock>div{align-items:center;gap:12px;min-width:0;display:flex}#whiteboard .session-clock strong,#whiteboard .session-clock>div>p,#whiteboard .session-clock>div>small{display:none}#whiteboard .session-clock output{font-variant-numeric:tabular-nums;color:var(--ink);font-size:18px;font-weight:650}#whiteboard .session-clock .session-clock-warning:not(:empty){max-width:200px;font-size:12px;display:block}#whiteboard #wb-share-time,#whiteboard .wb-panel-clock{display:none}#whiteboard .wb-show-tools{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:50;border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--ink);border-radius:8px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}#whiteboard .wb-mobile-menu,#whiteboard .wb-mobile-prompt,#whiteboard .wb-orientation-gate,#whiteboard .wb-rotate-hint,#whiteboard #wb-join-notice{display:none}#whiteboard:is(:fullscreen,.wb-expanded){border-radius:0;flex-direction:column;width:100%;height:100dvh;max-height:none;padding:0;display:flex;overflow:hidden}#whiteboard.wb-expanded{z-index:100;position:fixed;inset:0}#whiteboard:is(:fullscreen,.wb-expanded) .wb-layout{flex:1;align-items:stretch;min-height:0;display:flex}#whiteboard:is(:fullscreen,.wb-expanded) .wb-desk{aspect-ratio:auto;flex:1}#whiteboard.wb-tools-hidden :is(.wb-top,.wb-toolbar,.wb-selection,.wb-bottom,.wb-session-strip,#wb-result,.wb-mobile-prompt){display:none!important}#whiteboard .wb-result,#whiteboard #wb-result{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px;padding:16px;display:flex}.wb-remote-cursor{z-index:25;pointer-events:none;background:0 0;font:600 12px/1.3 DM Sans Variable,sans-serif;position:fixed;transform:none}.wb-remote-cursor span{text-overflow:ellipsis;white-space:nowrap;background:var(--peer-color);color:#fff;border-radius:0 6px 6px;max-width:140px;padding:4px 8px;display:block;overflow:hidden;transform:translate(12px,16px)}.wb-remote-cursor:before{content:"";background:var(--peer-color);clip-path:polygon(0 0,100% 68%,56% 72%,38% 100%);filter:drop-shadow(0 0 1px #fff);width:15px;height:19px;position:absolute;top:0;left:0}.wb-quickstart{flex-wrap:wrap;gap:24px;max-width:1080px;padding:24px 0;display:flex}.wb-quickstart>span{color:var(--muted);flex:220px;grid-template-columns:24px 1fr;gap:4px 12px;font-size:1rem;line-height:1.5;display:grid}.wb-quickstart svg{color:var(--blue);grid-row:1/3}.wb-quickstart strong{color:var(--ink)}@media (width<=1100px){#whiteboard #wb-pages,#whiteboard .code-actions{display:none}#whiteboard .wb-mobile-menu{display:block}#whiteboard .wb-toolbar{flex-wrap:wrap}#whiteboard .wb-tutorial-open span{display:none}}@media (width<=600px),(width<=1000px) and (height<=600px){#whiteboard .wb-top h2{display:none}#whiteboard .wb-top-actions{flex-wrap:nowrap;justify-content:space-between;gap:4px;width:100%;margin-left:0}#whiteboard .wb-top-actions #wb-export{display:none}#whiteboard .wb-top-actions #wb-options>summary{gap:0;width:44px;padding:0;font-size:0}#whiteboard .wb-top-actions #wb-options>summary svg{width:18px}#whiteboard .wb-top{padding:4px 8px}#whiteboard .wb-toolbar{gap:2px;padding:4px 8px}#whiteboard .wb-toolbar #wb-file-menu{margin-right:0}#whiteboard .wb-toolbar :is(.wb-control-name,#wb-pen-name,#wb-file-menu summary>span,.wb-tutorial-open span){display:none}#whiteboard .wb-toolbar .wb-control-menu>summary{gap:4px;padding:8px}#whiteboard .wb-toolbar .wb-chevron{display:none}#whiteboard .wb-toolbar #wb-tip-menu summary{font-size:13px}#whiteboard .wb-toolbar .wb-tutorial-open{width:44px;padding:0}#whiteboard :is(.wb-control-panel,.wb-settings){max-height:calc(100dvh - 120px);position:absolute;left:0;right:auto}#whiteboard :is(#wb-ink-menu,#wb-tip-menu) .wb-control-panel{width:280px;position:fixed;top:64px;left:50%;right:auto;transform:translate(-50%)}#whiteboard .wb-bottom{flex-wrap:wrap;gap:4px;padding:4px 8px}#whiteboard .wb-pages{flex:1;gap:2px}#whiteboard .wb-viewbar{gap:4px;margin-left:auto}#whiteboard .wb-help>summary{width:44px}#whiteboard .wb-page-jump select{width:100px}#whiteboard #wb-prev,#whiteboard #wb-next,#whiteboard #wb-zoom-fit span{display:none}#whiteboard #wb-zoom-fit{width:44px;padding:0}#whiteboard .wb-zoom output{width:40px}#whiteboard .wb-desk{aspect-ratio:auto;height:clamp(280px,55dvh,560px)}#whiteboard:is(:fullscreen,.wb-expanded).wb-tools-hidden .wb-desk{scrollbar-width:none;background:#fff;padding:0}#whiteboard:is(:fullscreen,.wb-expanded).wb-tools-hidden .wb-desk::-webkit-scrollbar{display:none}#whiteboard .wb-floating{width:300px;max-width:calc(100% - 16px);padding:14px;right:8px}#whiteboard .wb-session-strip{padding:0 8px}#whiteboard .session-clock>div{gap:6px}#whiteboard .session-clock button,#whiteboard .wb-session-strip>button{padding:6px;font-size:12px}#whiteboard .wb-mobile-prompt:not([hidden]){background:var(--surface);border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:12px;display:flex}#whiteboard .wb-mobile-prompt>div{flex:1;font-size:14px}#whiteboard .wb-mobile-prompt span{color:var(--muted);font-size:12px;display:block}#whiteboard.wb-orientation-blocked .wb-orientation-gate{z-index:80;text-align:center;background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}#whiteboard .wb-orientation-gate strong{font:650 24px Outfit Variable,sans-serif}#whiteboard .wb-orientation-gate p{max-width:300px;font-size:16px;line-height:1.5}#whiteboard .wb-orientation-gate button{min-height:44px}}@media (width<=380px){#whiteboard .wb-bottom .wb-pages{flex-basis:100%}#whiteboard .wb-bottom .wb-viewbar{justify-content:space-between;width:100%}}@media (prefers-reduced-motion:reduce){#whiteboard :is(button,summary){transition:none}}html[data-motion=off] #whiteboard :is(button,summary){transition:none}#whiteboard .wb-control-panel .wb-swatches button,#whiteboard .wb-control-panel .wb-swatches button[aria-pressed=true]{background:var(--swatch);box-shadow:inset 0 0 0 5px var(--surface)}#whiteboard .wb-help .status.error{color:var(--error,var(--ink))}#whiteboard .wb-save-help>summary{gap:8px;width:auto;padding:8px}#whiteboard #wb-save-state{font-size:12px;font-weight:500;display:inline}@media (width<=600px){#whiteboard #wb-save-state,#whiteboard :is(#wb-zoom-out,#wb-zoom-in){display:none}}#whiteboard .wb-session-strip:has(#wb-session-time:empty):has(#wb-inline-end-room[hidden]){display:none}#whiteboard :is(#wb-ink-menu,#wb-tip-menu) .wb-control-panel{transform:none}#whiteboard:is(:fullscreen,.wb-expanded){box-sizing:border-box;width:100vw;max-width:none;margin:0}#whiteboard .session-clock[data-extension-error=true],#whiteboard .session-clock[data-extension-error=true]>div:last-child{flex-wrap:wrap}#whiteboard .session-clock[data-extension-error=true]>div>small{white-space:normal;max-width:420px;color:var(--ink);flex-basis:100%;font-size:13px;line-height:1.5;display:block}html.wb-focus,html.wb-focus body{overflow:hidden}#whiteboard:is(:fullscreen,.wb-expanded) .wb-desk{height:auto}#whiteboard .wb-toolbar button[aria-pressed=true],#whiteboard .wb-zoom button[aria-pressed=true],#whiteboard .wb-control-menu[open]>summary,#whiteboard .wb-options[open]>summary{background:color-mix(in srgb,var(--blue) 10%,var(--surface));color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}@media (width<=1100px){#whiteboard .wb-toolbar>.wb-tutorial-open{display:none}}@media (width<=1000px) and (height<=600px) and (orientation:landscape){#whiteboard:is(:fullscreen,.wb-expanded) .wb-top{top:env(safe-area-inset-top,0px);left:env(safe-area-inset-left,0px);z-index:30;border-radius:0;width:192px;min-height:52px;padding:4px 8px;position:absolute}#whiteboard:is(:fullscreen,.wb-expanded) .wb-top-actions{gap:0}#whiteboard:is(:fullscreen,.wb-expanded) .wb-top-actions :is(#wb-share,#wb-fullscreen){width:44px;min-width:44px;padding:0}#whiteboard:is(:fullscreen,.wb-expanded) .wb-top-actions :is(.wb-control-name,#wb-fullscreen-label){display:none}#whiteboard:is(:fullscreen,.wb-expanded) .wb-toolbar{padding:4px max(8px,env(safe-area-inset-right)) 4px calc(192px + env(safe-area-inset-left,0px));padding-top:calc(4px + env(safe-area-inset-top,0px));scrollbar-width:thin;flex-wrap:nowrap;gap:2px;min-height:52px;overflow-x:auto}#whiteboard:is(:fullscreen,.wb-expanded) .wb-toolbar>*{flex-shrink:0}#whiteboard:is(:fullscreen,.wb-expanded) .wb-toolbar #wb-file-menu{margin-right:0}#whiteboard:is(:fullscreen,.wb-expanded) .wb-bottom{padding-bottom:max(4px,env(safe-area-inset-bottom));flex-wrap:nowrap;min-height:52px}#whiteboard:is(:fullscreen,.wb-expanded) .wb-desk{padding:8px}#whiteboard:is(:fullscreen,.wb-expanded) #wb-save-state{display:none}}.wb-invitation-entry{border:1px solid var(--line);background:var(--surface);border-radius:12px;justify-content:space-between;align-items:center;gap:24px;margin:0 0 24px;padding:24px;display:flex}.wb-invitation-entry h2{margin:0 0 8px;font-size:1.5rem}.wb-invitation-entry p{max-width:65ch;color:var(--muted);margin:0}.wb-invitation-entry .button{flex-shrink:0;min-height:48px}#wb-invitation-help{margin:12px 0 20px;line-height:1.6}#wb-start-separate{margin-top:12px}@media (width<=600px){.wb-invitation-entry{padding:20px;display:block}.wb-invitation-entry .button{width:100%;margin-top:20px}}.whiteboard-page .wb-page-intro{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);align-items:center;gap:56px;padding:24px 0 40px;display:grid}.whiteboard-page .wb-page-intro h1{letter-spacing:-.03em;margin:0 0 24px;font:700 clamp(2rem,3.5vw,3.5rem)/1.12 Outfit Variable,sans-serif}.whiteboard-page .wb-page-lead{max-width:62ch;font-size:1.125rem;line-height:1.75}.whiteboard-page .wb-page-start{justify-items:start;gap:16px;display:grid}.whiteboard-page .wb-page-start strong{font:650 1.5rem/1.3 Outfit Variable,sans-serif}.whiteboard-page .wb-page-start p{margin:0;line-height:1.6}.whiteboard-page .wb-feature-strip{color:var(--muted);flex-wrap:wrap;gap:8px 16px;font-size:.875rem;display:flex}@media (width<=900px){.whiteboard-page .wb-page-intro{grid-template-columns:1fr;gap:24px}}@media (width<=600px){.whiteboard-page .wb-page-intro{padding:16px 0}.whiteboard-page .wb-page-start{display:none}.whiteboard-page .wb-page-lead{font-size:1rem}}