:root{--bg-start: #f6f7f2;--bg-end: #dbe6f1;--ink: #141414;--panel: rgba(255, 255, 255, .78);--panel-border: rgba(20, 20, 20, .12);--tool-active: #1c8b4b;--tool-active-bg: rgba(28, 139, 75, .15);--online: #18794e;--offline: #b22727;--connecting: #8f5600}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}body{display:flex;flex-direction:column;color:var(--ink);font-family:Avenir Next,Segoe UI,Helvetica Neue,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.9),transparent 38%),radial-gradient(circle at 80% 100%,rgba(255,255,255,.75),transparent 36%),linear-gradient(135deg,var(--bg-start),var(--bg-end))}#root{display:flex;flex-direction:column}.slim-topbar{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 max(.65rem,env(safe-area-inset-right)) 0 max(.65rem,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:10;flex-shrink:0}.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:.45rem}.topbar-left{min-width:0;flex-shrink:0}.topbar-center{position:relative}.topbar-right{position:relative;flex-shrink:0}.brand-stack{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.08rem}.brand-mark{font-size:1.2rem;font-weight:750;letter-spacing:.03em;line-height:1}.brand-version{font-size:.74rem;font-weight:620;letter-spacing:.02em;color:#1414149e;line-height:1}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.online{background:var(--online);box-shadow:0 0 6px #18794e73}.status-dot.offline{background:var(--offline);box-shadow:0 0 6px #b2272766}.status-dot.connecting{background:var(--connecting);box-shadow:0 0 6px #8f560066;animation:pulse-dot 1.4s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}.room-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border:1px solid rgba(20,20,20,.14);border-radius:999px;background:#ffffff8c;font-size:.8rem;font-weight:640;color:#141414b8;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}.room-pill:hover{background:#ffffffd9;border-color:#14141438}.room-pill__id{max-width:14ch;overflow:hidden;text-overflow:ellipsis}.room-pill__chevron{width:12px;height:12px;flex-shrink:0;opacity:.55}.presence-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border:1px solid rgba(20,20,20,.14);border-radius:999px;background:#ffffff8c;font-size:.82rem;font-weight:650;color:#141414b8;cursor:pointer;transition:background .15s,border-color .15s}.presence-pill:hover{background:#ffffffd9;border-color:#14141438}.presence-pill__icon{width:14px;height:14px;flex-shrink:0}.popover{position:absolute;z-index:20;min-width:180px;padding:.55rem;border:1px solid rgba(20,20,20,.12);border-radius:14px;background:#ffffffd1;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px #0000001a,0 2px 8px #0000000f;animation:popover-in .15s ease-out}@keyframes popover-in{0%{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.popover--room{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.popover--presence{top:calc(100% + 6px);right:0}.popover--more{bottom:calc(100% + 8px);right:0;min-width:200px}.popover__label{display:block;font-size:.72rem;font-weight:650;color:#14141480;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .35rem .3rem}.popover__input{display:block;width:100%;padding:.38rem .5rem;border:1px solid rgba(20,20,20,.18);border-radius:8px;background:#ffffffd9;color:var(--ink);font:inherit;font-size:.88rem;outline:none}.popover__input:focus{border-color:var(--tool-active);box-shadow:0 0 0 2px #1c8b4b26}.popover__divider{height:1px;margin:.4rem 0;background:#14141417}.popover__btn{display:block;width:100%;padding:.42rem .5rem;border:none;border-radius:8px;background:transparent;text-align:left;font:inherit;font-size:.85rem;font-weight:580;color:var(--ink);cursor:pointer;transition:background .12s}.popover__btn:hover{background:#1414140f}.popover__btn:active{background:#1414141a}.popover__btn--icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;flex-shrink:0;border:1px solid rgba(20,20,20,.15);border-radius:6px;background:#ffffffb3;font-size:1rem;font-weight:700;text-align:center}.popover__btn--danger{color:var(--offline)}.popover__toggle{display:flex;align-items:center;gap:.5rem;padding:.38rem .5rem;border-radius:8px;font-size:.85rem;font-weight:580;cursor:pointer;user-select:none;transition:background .12s}.popover__toggle:hover{background:#1414140f}.popover__toggle input[type=checkbox]{width:1rem;height:1rem;margin:0;accent-color:var(--tool-active)}.popover__user-list{display:flex;flex-direction:column;gap:.15rem;max-height:200px;overflow-y:auto}.popover__user{display:flex;align-items:center;gap:.4rem;padding:.3rem .45rem;border-radius:8px;font-size:.82rem;font-weight:580}.popover__user--self{background:#1c8b4b14}.popover__user-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.popover__user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover__section{padding:.15rem 0}.popover__zoom-row{display:flex;align-items:center;gap:.35rem;padding:.2rem .35rem}.popover__range{flex:1;min-width:0}.popover__zoom-readout{min-width:3rem;text-align:right;font-size:.78rem;font-weight:700;color:#141414a6}.start-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:1.25rem}.start-card{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:1.4rem;border:1px solid rgba(20,20,20,.12);border-radius:18px;background:#ffffffc7;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px #00000014,0 2px 10px #0000000d}.start-brand{font-size:1.4rem;font-weight:760;letter-spacing:.04em}.start-btn{min-width:130px;padding:.72rem 1.2rem;border:1px solid rgba(20,20,20,.15);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:680;letter-spacing:.01em;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease}.start-btn:hover{border-color:#14141440;box-shadow:0 4px 12px #00000014}.start-btn:active{transform:translateY(1px)}.start-btn:focus-visible{outline:2px solid rgba(28,139,75,.45);outline-offset:2px}.board-wrap{position:relative;flex:1;min-height:0;padding:0}canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}.local-cursor-preview{position:absolute;left:0;top:0;display:none;width:0;height:0;border:1.5px solid #111111;border-radius:999px;background:#ffffff14;box-shadow:0 0 0 1px #ffffffd9;transform:translate(-50%,-50%);pointer-events:none;z-index:1}.local-cursor-preview.eraser{border-style:dashed}.local-cursor-preview.eraser-partial{border-style:solid;box-shadow:0 0 0 1px #14141440,0 0 0 2px #ffffffd1}.bottom-toolbar{display:flex;align-items:center;justify-content:center;gap:.35rem;height:56px;padding:0 max(.65rem,env(safe-area-inset-right)) 0 max(.65rem,env(safe-area-inset-left));padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1cm);padding-top:calc(env(safe-area-inset-bottom,0px) + 1cm);border-top:1px solid var(--panel-border);background:var(--panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:10;flex-shrink:0}.toolbar-group{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .3rem;border-radius:10px;background:#1414140a}.toolbar-group--more{position:relative}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid transparent;border-radius:9px;background:transparent;color:var(--ink);padding:0;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.toolbar-btn svg{width:18px;height:18px}.toolbar-btn:hover{background:#1414140f}.toolbar-btn:active{transform:translateY(1px)}.toolbar-btn.active{border-color:var(--tool-active);color:var(--tool-active);background:var(--tool-active-bg)}.toolbar-btn.partial-mode{border-style:dashed}.toolbar-color{display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.toolbar-color input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.toolbar-color__swatch{display:block;width:26px;height:26px;border-radius:50%;border:2.5px solid #ffffff;box-shadow:0 0 0 1px #14141426,0 1px 4px #0000001f;pointer-events:none}.toolbar-range{width:min(18vw,7rem);accent-color:var(--tool-active)}.toolbar-range--zoom{width:min(16vw,6.5rem)}.toolbar-divider{width:1px;height:22px;background:#1414141a;margin:0 .1rem;flex-shrink:0}.toolbar-zoom-readout{min-width:2.8rem;text-align:right;font-size:.78rem;font-weight:700;color:#14141499}@media(min-width:1025px){.popover__zoom-mobile{display:none}.popover__zoom-mobile+.popover__divider{display:none}}@media(max-width:1024px){.toolbar-zoom-desktop,.toolbar-divider--before-more{display:none}.toolbar-btn{width:40px;height:40px}.toolbar-btn svg{width:19px;height:19px}}@media(max-width:768px){.slim-topbar{height:40px;padding-left:max(.45rem,env(safe-area-inset-left));padding-right:max(.45rem,env(safe-area-inset-right))}.brand-mark{font-size:1.05rem}.brand-version{font-size:.68rem}.room-pill{font-size:.74rem;padding:.2rem .45rem}.room-pill__id{max-width:10ch}.presence-pill{font-size:.78rem;padding:.2rem .45rem}.bottom-toolbar{height:52px;gap:.2rem}.toolbar-range{width:min(16vw,5.5rem)}.popover--room{left:0;right:0;transform:none;margin:0 .5rem;width:auto;min-width:0}.popover--presence{right:-.3rem;width:min(80vw,260px)}.popover--more{right:-.3rem;width:min(85vw,280px)}}@media(hover:none)and (pointer:coarse){.toolbar-btn{width:42px;height:42px}.toolbar-btn svg{width:20px;height:20px}.popover__btn{padding:.52rem .55rem;font-size:.9rem}.popover__toggle{padding:.48rem .55rem;font-size:.9rem}}@media(max-width:380px){.toolbar-divider{display:none}.bottom-toolbar{gap:.1rem}.toolbar-group{padding:.15rem .2rem}.toolbar-range{width:min(14vw,4rem)}.room-pill__id{max-width:7ch}}