:root{--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--fill-soft:color-mix(in srgb, var(--mc-accent) 14%, transparent);--fill-hover:color-mix(in srgb, var(--mc-ink) 7%, transparent);--shadow:0 6px 24px color-mix(in srgb, var(--mc-ink) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--mc-ink) 14%, transparent)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--mc-surface);color:var(--mc-ink);font:14px/1.4 var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;overflow:hidden}button,input{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--mc-accent);outline-offset:1px}.app{grid-template-rows:auto minmax(0,1fr);height:100dvh;display:grid}.btn{border:1px solid var(--mc-line);background:var(--mc-surface-raised);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:7px 14px;font-weight:550;display:inline-flex}.btn:hover{background:color-mix(in srgb, var(--mc-surface-raised) 92%, var(--mc-ink))}.btn-primary{background:var(--mc-accent);color:var(--mc-on-accent);border-color:#0000}.btn-primary:hover{background:color-mix(in srgb, var(--mc-accent) 90%, var(--mc-ink))}.btn-quiet{background:0 0;border-color:#0000}.btn-quiet:hover{background:var(--fill-hover)}.tool{cursor:pointer;background:0 0;border:0;border-radius:8px;flex:none;place-items:center;width:32px;height:32px;padding:0;display:inline-grid}.tool:hover:not(:disabled){background:var(--fill-hover)}.tool:disabled{opacity:.35;cursor:default}.tool-small{width:26px;height:26px}.tool[aria-checked=true]{background:var(--fill-soft)}.tool-wide{grid-auto-flow:column;gap:4px;width:auto;padding:0 8px}.tool-label{font-weight:550}.tabbar{background:var(--mc-surface);border-bottom:1px solid var(--mc-line);align-items:center;gap:4px;padding:6px 8px;display:flex}.tabs{scrollbar-width:thin;gap:2px;min-width:0;padding-right:8px;display:flex;overflow-x:auto}.tab{border-radius:8px;flex:none;align-items:center;display:flex}.tab:hover{background:var(--fill-hover)}.tab.is-current,.tab.is-current:hover{background:var(--fill-soft)}.tab-main{cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:6px 2px 6px 10px;font-weight:500;display:flex}.tab.is-current .tab-main{font-weight:650}.tab-name{grid-template-columns:minmax(0,1fr);max-width:160px;display:inline-grid}.tab-label{text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;overflow:hidden}.tab-name:after{content:attr(data-name);visibility:hidden;white-space:nowrap;grid-area:1/1;height:0;font-weight:650;overflow:hidden}.tab-more{width:24px;height:24px;color:var(--mc-ink-muted);cursor:pointer;opacity:.6;background:0 0;border:0;border-radius:6px;place-items:center;margin-right:4px;padding:0;display:inline-grid}.tab:hover .tab-more,.tab.is-current .tab-more,.tab-more:focus-visible,.tab-more[aria-expanded=true]{opacity:1}.tab-more:hover{background:var(--fill-hover)}.tab-rename{border:1px solid var(--mc-line);background:var(--mc-surface-raised);border-radius:6px;width:150px;margin:2px;padding:4px 8px}.avatars{align-items:center;display:inline-flex}.avatar{object-fit:cover;background:var(--mc-line);width:20px;height:20px;box-shadow:0 0 0 2px var(--mc-surface);border-radius:50%;flex:none}.avatar+.avatar{margin-left:-6px}.avatar-blank{color:var(--mc-ink-muted);place-items:end center;display:inline-grid;overflow:hidden}.avatar-blank svg{width:80%;height:80%}.avatar-more{color:var(--mc-ink-muted);margin-left:4px;font-size:11px;font-weight:600}.menu{z-index:30;border:1px solid var(--mc-line);background:var(--mc-surface-raised);min-width:180px;box-shadow:var(--shadow);border-radius:10px;padding:4px;position:fixed}.menu button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;width:100%;padding:8px 10px;display:block}.menu button:hover,.menu button:focus-visible{background:var(--fill-hover);outline:none}.stage{min-height:0;position:relative;overflow:hidden}.board{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.is-offline .board{cursor:default}.toolbar,.zoom,.toast,.banner{border:1px solid var(--mc-line);background:var(--mc-surface-raised);box-shadow:var(--shadow)}.toolbar{border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);padding:6px 10px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.toolbar-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:100%;display:flex}.toolbar-gap{background:var(--mc-line);width:1px;height:20px;margin:0 4px}.toolbar-gap[data-edge]{visibility:hidden}.swatch{background:var(--swatch);width:22px;height:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc-ink) 22%, transparent);cursor:pointer;border:0;border-radius:50%;padding:0}.swatch[aria-checked=true]{outline:2px solid var(--mc-ink);outline-offset:2px}.size{cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;width:30px;height:30px;padding:0;display:inline-grid}.size:hover{background:var(--fill-hover)}.size[aria-checked=true]{background:var(--fill-soft)}.size-dot{background:var(--swatch);box-shadow:0 0 0 1.5px color-mix(in srgb, var(--mc-ink) 45%, transparent);border-radius:50%}.color-wrap{display:inline-flex;position:relative}.color-input{opacity:0;pointer-events:none;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.tool.palette.is-own,.tool.palette.is-own:hover:not(:disabled){background:var(--swatch);width:22px;height:22px;color:var(--on-swatch);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc-ink) 22%, transparent);outline:2px solid var(--mc-ink);outline-offset:2px;border-radius:50%}.palette.is-own svg{width:14px;height:14px}.is-narrow .toolbar-gap{display:none}.popover-wrap{position:relative}.popover{z-index:30;border:1px solid var(--mc-line);background:var(--mc-surface-raised);min-width:170px;box-shadow:var(--shadow);border-radius:10px;flex-direction:column;gap:2px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 10px);left:0}.popover-more{align-items:stretch;min-width:200px;padding:6px;left:auto;right:0}.popover-colors{align-items:stretch;min-width:190px;left:auto;right:0}.popover-swatches{border-top:1px solid var(--mc-line);flex-wrap:wrap;gap:10px;margin-top:2px;padding:10px 10px 8px;display:flex}.popover-section{border-bottom:1px solid var(--mc-line);flex-direction:column;gap:2px;padding-bottom:4px;display:flex}.popover-section+.popover-section,.popover-section+.btn{margin-top:2px}.popover-section:last-of-type{margin-bottom:2px}.popover-item{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:10px;width:100%;padding:8px 10px;display:flex}.popover-item:hover,.popover-item:focus-visible{background:var(--fill-hover);outline:none}.popover-item[aria-checked=true]{background:var(--fill-soft);font-weight:650}.popover-more .btn{justify-content:flex-start}.zoom{border-radius:10px;align-items:center;padding:3px;display:flex;position:absolute;top:12px;right:12px}.zoom-value{font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;min-width:48px;padding:4px 2px}.banner{border-radius:10px;padding:8px 14px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.toasts{pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);display:flex;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;border-radius:10px;align-items:center;gap:8px;padding:6px 6px 6px 14px;display:flex}.toast-action{cursor:pointer;background:0 0;border:0;padding:0;font-weight:650;text-decoration:underline}.scrim{z-index:40;background:color-mix(in srgb, var(--mc-ink) 40%, transparent);place-items:center;display:grid;position:fixed;inset:0}.dialog{border:1px solid var(--mc-line);background:var(--mc-surface-raised);width:min(400px,100vw - 32px);box-shadow:var(--shadow);border-radius:12px;padding:20px}.dialog h2{margin:0 0 8px;font-size:16px;font-weight:650}.dialog p{color:var(--mc-ink-muted);margin:0 0 18px;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.state{place-items:center;min-height:100dvh;padding:24px;display:grid}.state-card{text-align:center;max-width:420px}.state-card h1{margin:0 0 8px;font-size:18px;font-weight:650}.state-card p{color:var(--mc-ink-muted);margin:0 0 16px;line-height:1.5}