twombly 0.4.4 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/dist/cli.js +9 -9
- package/dist/ui/assets/Landing-BHVJ-k0j.js +111 -0
- package/dist/ui/assets/{Landing-CrWkZ8qH.css → Landing-C6mswfqx.css} +1 -1
- package/dist/ui/assets/{LandingStage-DlOW_YOx.js → LandingStage-CZwtv1du.js} +1 -1
- package/dist/ui/assets/agentPrompt-Dxy3aH2W.js +1 -0
- package/dist/ui/assets/{index-CJ7B-FU8.css → index-BkX_x_hA.css} +1 -1
- package/dist/ui/assets/{index-DgaQcoTH.js → index-BsjjBUS_.js} +3 -3
- package/dist/ui/index.html +21 -5
- package/dist/ui/llms.txt +23 -0
- package/package.json +5 -2
- package/dist/ui/assets/Landing-CMSAED8E.js +0 -111
- package/dist/ui/assets/agentPrompt-Va8atsXW.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./rolldown-runtime-WkwZ5CU-.js";var n=t((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.portal`),r=Symbol.for(`react.fragment`),i=Symbol.for(`react.strict_mode`),a=Symbol.for(`react.profiler`),o=Symbol.for(`react.consumer`),s=Symbol.for(`react.context`),c=Symbol.for(`react.forward_ref`),l=Symbol.for(`react.suspense`),u=Symbol.for(`react.memo`),ee=Symbol.for(`react.lazy`),d=Symbol.for(`react.activity`),te=Symbol.for(`react.view_transition`),ne=Symbol.iterator;function re(e){return typeof e!=`object`||!e?null:(e=ne&&e[ne]||e[`@@iterator`],typeof e==`function`?e:null)}var f={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},p=Object.assign,m={};function h(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||f}h.prototype.isReactComponent={},h.prototype.setState=function(e,t){if(typeof e!=`object`&&typeof e!=`function`&&e!=null)throw Error(`takes an object of state variables to update or a function which returns an object of state variables.`);this.updater.enqueueSetState(this,e,t,`setState`)},h.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,`forceUpdate`)};function ie(){}ie.prototype=h.prototype;function g(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||f}var _=g.prototype=new ie;_.constructor=g,p(_,h.prototype),_.isPureReactComponent=!0;var ae=Array.isArray;function v(){}var y={H:null,A:null,T:null,S:null},b=Object.prototype.hasOwnProperty;function x(e,n,r){var i=r.ref;return{$$typeof:t,type:e,key:n,ref:i===void 0?null:i,props:r}}function oe(e,t){return x(e.type,t,e.props)}function S(e){return typeof e==`object`&&!!e&&e.$$typeof===t}function C(e){var t={"=":`=0`,":":`=2`};return`$`+e.replace(/[=:]/g,function(e){return t[e]})}var w=/\/+/g;function T(e,t){return typeof e==`object`&&e&&e.key!=null?C(``+e.key):t.toString(36)}function se(e){switch(e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason;default:switch(typeof e.status==`string`?e.then(v,v):(e.status=`pending`,e.then(function(t){e.status===`pending`&&(e.status=`fulfilled`,e.value=t)},function(t){e.status===`pending`&&(e.status=`rejected`,e.reason=t)})),e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason}}throw e}function E(e,r,i,a,o){var s=typeof e;(s===`undefined`||s===`boolean`)&&(e=null);var c=!1;if(e===null)c=!0;else switch(s){case`bigint`:case`string`:case`number`:c=!0;break;case`object`:switch(e.$$typeof){case t:case n:c=!0;break;case ee:return c=e._init,E(c(e._payload),r,i,a,o)}}if(c)return o=o(e),c=a===``?`.`+T(e,0):a,ae(o)?(i=``,c!=null&&(i=c.replace(w,`$&/`)+`/`),E(o,r,i,``,function(e){return e})):o!=null&&(S(o)&&(o=oe(o,i+(o.key==null||e&&e.key===o.key?``:(``+o.key).replace(w,`$&/`)+`/`)+c)),r.push(o)),1;c=0;var l=a===``?`.`:a+`:`;if(ae(e))for(var u=0;u<e.length;u++)a=e[u],s=l+T(a,u),c+=E(a,r,i,s,o);else if(u=re(e),typeof u==`function`)for(e=u.call(e),u=0;!(a=e.next()).done;)a=a.value,s=l+T(a,u++),c+=E(a,r,i,s,o);else if(s===`object`){if(typeof e.then==`function`)return E(se(e),r,i,a,o);throw r=String(e),Error(`Objects are not valid as a React child (found: `+(r===`[object Object]`?`object with keys {`+Object.keys(e).join(`, `)+`}`:r)+`). If you meant to render a collection of children, use an array instead.`)}return c}function D(e,t,n){if(e==null)return e;var r=[],i=0;return E(e,r,``,``,function(e){return t.call(n,e,i++)}),r}function O(e){if(e._status===-1){var t=e._result,n=t();n.then(function(t){(e._status===0||e._status===-1)&&(e._status=1,e._result=t,n.status===void 0&&(n.status=`fulfilled`,n.value=t))},function(t){(e._status===0||e._status===-1)&&(e._status=2,e._result=t,n.status===void 0&&(n.status=`rejected`,n.reason=t))}),e._status===-1&&(e._status=0,e._result=n)}if(e._status===1)return e._result.default;throw e._result}var k=typeof reportError==`function`?reportError:function(e){if(typeof window==`object`&&typeof window.ErrorEvent==`function`){var t=new window.ErrorEvent(`error`,{bubbles:!0,cancelable:!0,message:typeof e==`object`&&e&&typeof e.message==`string`?String(e.message):String(e),error:e});if(!window.dispatchEvent(t))return}else if(typeof process==`object`&&typeof process.emit==`function`){process.emit(`uncaughtException`,e);return}console.error(e)};function A(e){var t=y.T,n={};n.types=t===null?null:t.types,y.T=n;try{var r=e(),i=y.S;i!==null&&i(n,r),typeof r==`object`&&r&&typeof r.then==`function`&&r.then(v,k)}catch(e){k(e)}finally{t!==null&&n.types!==null&&(t.types=n.types),y.T=t}}function j(e){var t=y.T;if(t!==null){var n=t.types;n===null?t.types=[e]:n.indexOf(e)===-1&&n.push(e)}else A(j.bind(null,e))}var M={map:D,forEach:function(e,t,n){D(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return D(e,function(){t++}),t},toArray:function(e){return D(e,function(e){return e})||[]},only:function(e){if(!S(e))throw Error(`React.Children.only expected to receive a single React element child.`);return e}};e.Activity=d,e.Children=M,e.Component=h,e.Fragment=r,e.Profiler=a,e.PureComponent=g,e.StrictMode=i,e.Suspense=l,e.ViewTransition=te,e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=y,e.__COMPILER_RUNTIME={__proto__:null,c:function(e){return y.H.useMemoCache(e)}},e.addTransitionType=j,e.cache=function(e){return function(){return e.apply(null,arguments)}},e.cacheSignal=function(){return null},e.cloneElement=function(e,t,n){if(e==null)throw Error(`The argument must be a React element, but you passed `+e+`.`);var r=p({},e.props),i=e.key;if(t!=null)for(a in t.key!==void 0&&(i=``+t.key),t)!b.call(t,a)||a===`key`||a===`__self`||a===`__source`||a===`ref`&&t.ref===void 0||(r[a]=t[a]);var a=arguments.length-2;if(a===1)r.children=n;else if(1<a){for(var o=Array(a),s=0;s<a;s++)o[s]=arguments[s+2];r.children=o}return x(e.type,i,r)},e.createContext=function(e){return e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider=e,e.Consumer={$$typeof:o,_context:e},e},e.createElement=function(e,t,n){var r,i={},a=null;if(t!=null)for(r in t.key!==void 0&&(a=``+t.key),t)b.call(t,r)&&r!==`key`&&r!==`__self`&&r!==`__source`&&(i[r]=t[r]);var o=arguments.length-2;if(o===1)i.children=n;else if(1<o){for(var s=Array(o),c=0;c<o;c++)s[c]=arguments[c+2];i.children=s}if(e&&e.defaultProps)for(r in o=e.defaultProps,o)i[r]===void 0&&(i[r]=o[r]);return x(e,a,i)},e.createRef=function(){return{current:null}},e.forwardRef=function(e){return{$$typeof:c,render:e}},e.isValidElement=S,e.lazy=function(e){return{$$typeof:ee,_payload:{_status:-1,_result:e},_init:O}},e.memo=function(e,t){return{$$typeof:u,type:e,compare:t===void 0?null:t}},e.startTransition=A,e.unstable_useCacheRefresh=function(){return y.H.useCacheRefresh()},e.use=function(e){return y.H.use(e)},e.useActionState=function(e,t,n){return y.H.useActionState(e,t,n)},e.useCallback=function(e,t){return y.H.useCallback(e,t)},e.useContext=function(e){return y.H.useContext(e)},e.useDebugValue=function(){},e.useDeferredValue=function(e,t){return y.H.useDeferredValue(e,t)},e.useEffect=function(e,t){return y.H.useEffect(e,t)},e.useEffectEvent=function(e){return y.H.useEffectEvent(e)},e.useId=function(){return y.H.useId()},e.useImperativeHandle=function(e,t,n){return y.H.useImperativeHandle(e,t,n)},e.useInsertionEffect=function(e,t){return y.H.useInsertionEffect(e,t)},e.useLayoutEffect=function(e,t){return y.H.useLayoutEffect(e,t)},e.useMemo=function(e,t){return y.H.useMemo(e,t)},e.useOptimistic=function(e,t){return y.H.useOptimistic(e,t)},e.useReducer=function(e,t,n){return y.H.useReducer(e,t,n)},e.useRef=function(e){return y.H.useRef(e)},e.useState=function(e){return y.H.useState(e)},e.useSyncExternalStore=function(e,t,n){return y.H.useSyncExternalStore(e,t,n)},e.useTransition=function(){return y.H.useTransition()},e.version=`19.3.1`})),r=t(((e,t)=>{t.exports=n()})),i=e(r(),1);async function a(e,t){let n=await fetch(e,{credentials:`same-origin`,...t,headers:{...t?.body?{"content-type":`application/json`}:{},...t?.headers}}),r=await n.json().catch(()=>({}));if(!n.ok)throw Object.assign(Error(r.error||`Failed (${n.status})`),{status:n.status});return r}function o(e,t){fetch(e,{method:`POST`,credentials:`same-origin`,keepalive:!0,headers:{"content-type":`application/json`},body:JSON.stringify(t)}).catch(()=>{})}var s={bootstrap:e=>a(`/api/bootstrap${e?`?canvas=${encodeURIComponent(e)}`:``}`),ticket:(e,t)=>a(`/api/canvases/${e}/ticket`,{method:`POST`,body:JSON.stringify({name:t})}),share:e=>a(`/api/canvases/${e}/share`,{method:`POST`,body:`{}`}),unshare:e=>a(`/api/canvases/${e}/unshare`,{method:`POST`,body:`{}`}),list:()=>a(`/api/canvases`),forget:e=>a(`/api/shared/${e}`,{method:`DELETE`}),doc:e=>a(`/api/canvases/${e}`),update:(e,t)=>a(`/api/canvases/${e}`,{method:`PATCH`,body:JSON.stringify(t)}),remove:e=>a(`/api/canvases/${e}`,{method:`DELETE`}),login:()=>a(`/api/login`,{method:`POST`,body:`{}`}),saveSettings:e=>a(`/api/settings`,{method:`POST`,body:JSON.stringify(e)}),signOut:()=>a(`/auth/signout`,{method:`POST`,body:`{}`})},c=5e3;function l(e){return typeof e==`string`?e.replace(/[\u0000-\u001f\u007f]+/g,` `).slice(0,52):null}var u=`abcdefghijkmnpqrstuvwxyz23456789`;function ee(e=12){let t=crypto.getRandomValues(new Uint8Array(e)),n=``;for(let e of t)n+=u[e%32];return n}var d=e=>{let t,n=new Set,r=(e,r)=>{let i=typeof e==`function`?e(t):e;if(!Object.is(i,t)){let e=t;t=r??(typeof i!=`object`||!i)?i:Object.assign({},t,i),n.forEach(n=>n(t,e))}},i=()=>t,a={setState:r,getState:i,getInitialState:()=>o,subscribe:e=>(n.add(e),()=>n.delete(e))},o=t=e(r,i,a);return a},te=(e=>e?d(e):d),ne=e=>e;function re(e,t=ne){let n=i.useSyncExternalStore(e.subscribe,i.useCallback(()=>t(e.getState()),[e,t]),()=>t(e.getInitialState()));return i.useDebugValue(n),n}var f=e=>{let t=te(e),n=e=>re(t,e);return Object.assign(n,t),n},p=(e=>e?f(e):f),m=.05,h=e=>Math.min(8,Math.max(m,e)),ie=(e,t)=>({x:(e.x-t.x)/t.z,y:(e.y-t.y)/t.z}),g=(e,t)=>({x:t.x+e.x*t.z,y:t.y+e.y*t.z}),_=(e,t,n)=>({...e,x:e.x+t,y:e.y+n});function ae(e,t,n){let r=h(e.z*t),i=r/e.z;return{z:r,x:n.x-(n.x-e.x)*i,y:n.y-(n.y-e.y)*i}}function v(e,t){return{x:Math.min(e.x,t.x),y:Math.min(e.y,t.y),w:Math.abs(t.x-e.x),h:Math.abs(t.y-e.y)}}var y=(e,t)=>e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y;function b(e){if(!e.length)return null;let t=Math.min(...e.map(e=>e.x)),n=Math.min(...e.map(e=>e.y));return{x:t,y:n,w:Math.max(...e.map(e=>e.x+e.w))-t,h:Math.max(...e.map(e=>e.y+e.h))-n}}function x(e,t,n=null,r={x:0,y:0}){let i=t.width<700?16:48,a=h(n===null?Math.min(2,(t.width-i*2)/Math.max(1,e.w),(t.height-i*2)/Math.max(1,e.h)):n),o=(e,t,n)=>{let r=t>n?(t-n)/2+48:0;return Math.max(-r,Math.min(r,e))};return{z:a,x:(t.width-e.w*a)/2-e.x*a+o(r.x,e.w*a,t.width),y:(t.height-e.h*a)/2-e.y*a+o(r.y,e.h*a,t.height)}}function oe(e,t,n){let r=t<640?24:96,i=h(Math.min(1,(t-r*2)/Math.max(1,e.w),(n-r*2)/Math.max(1,e.h)));return{z:i,x:t/2-(e.x+e.w/2)*i,y:n/2-(e.y+e.h/2)*i}}var S=e=>[e.x,e.x+e.w/2,e.x+e.w],C=e=>[e.y,e.y+e.h/2,e.y+e.h];function w(e,t,n){let r=null;for(let i of t)for(let t of e){let e=i-t;Math.abs(e)<=n&&(r===null||Math.abs(e)<Math.abs(r))&&(r=e)}return r}function T(e,t,n){let r=w(S(e),t.flatMap(S),n)??0,i=w(C(e),t.flatMap(C),n)??0,a={...e,x:e.x+r,y:e.y+i},o=[];for(let e of t){for(let t of S(a))S(e).some(e=>Math.abs(e-t)<.5)&&o.push({axis:`x`,pos:t,start:Math.min(a.y,e.y),end:Math.max(a.y+a.h,e.y+e.h)});for(let t of C(a))C(e).some(e=>Math.abs(e-t)<.5)&&o.push({axis:`y`,pos:t,start:Math.min(a.x,e.x),end:Math.max(a.x+a.w,e.x+e.w)})}return{dx:r,dy:i,guides:o}}var se=class{ticket;onMessage;onState;socket=null;closed=!1;attempts=0;pingTimer=0;retryTimer=0;nextRpc=1;calls=new Map;constructor(e,t,n){this.ticket=e,this.onMessage=t,this.onState=n,this.connect()}async connect(){if(this.closed)return;let e;try{e=await this.ticket()}catch{return this.retry()}if(this.closed)return;let t=new WebSocket(e);this.socket=t,t.onopen=()=>{this.attempts=0,this.onState(!0),window.clearInterval(this.pingTimer),this.pingTimer=window.setInterval(()=>this.send({t:`ping`}),25e3)},t.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(t.t===`rpc`){let e=this.calls.get(t.id);if(!e)return;this.calls.delete(t.id),t.error?e.reject(Error(t.error)):e.resolve(t.result)}else this.onMessage(t)},t.onclose=e=>{if(this.socket===t){window.clearInterval(this.pingTimer),this.onState(!1);for(let e of this.calls.values())e.reject(Error(`Disconnected`));this.calls.clear(),e.code!==4004&&this.retry()}}}retry(){if(this.closed)return;let e=Math.min(8e3,400*2**this.attempts++)+Math.random()*200;window.clearTimeout(this.retryTimer),this.retryTimer=window.setTimeout(()=>this.connect(),e)}send(e){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify(e))}rpc(e,t){return new Promise((n,r)=>{if(this.socket?.readyState!==WebSocket.OPEN)return r(Error(`Disconnected`));let i=this.nextRpc++;this.calls.set(i,{resolve:n,reject:r}),this.send({t:`rpc`,id:i,op:e,body:t})})}close(){this.closed=!0,window.clearInterval(this.pingTimer),window.clearTimeout(this.retryTimer),this.socket?.close()}};function E(e,t,n,r){let i=(e,t,n)=>3*e*(1-n)**2*n+3*t*(1-n)*n**2+n**3;return a=>{let o=0,s=1;for(let t=0;t<20;t++){let t=(o+s)/2;i(e,n,t)<a?o=t:s=t}return i(t,r,(o+s)/2)}}function D(e,t){let n=2*Math.PI/(e*1.2),r=Math.min(1,Math.max(.05,1-t)),i=e=>{let t=e/1e3;if(t<=0)return 0;if(r>=1)return 1-Math.exp(-n*t)*(1+n*t);let i=n*Math.sqrt(1-r*r);return 1-Math.exp(-r*n*t)*(Math.cos(i*t)+r*n/i*Math.sin(i*t))},a=10;for(;a<6e3&&!(Math.abs(1-i(a))<.001&&Math.abs(i(a)-i(a-10))<5e-4);)a+=10;let o=Array.from({length:61},(e,t)=>t===60?1:Number(i(a*t/60).toFixed(4)));return{ms:a,at:i,css:`linear(${o.join(`, `)})`}}var O=p(()=>({boot:null,canvasId:``,name:``,link:null,connected:!1,ready:!1,gone:!1,role:`guest`,self:``,capabilities:{comments:!1,huddle:!1},peers:[],frames:{},threads:{},camera:{x:0,y:0,z:1},tool:`move`,pencil:{color:matchMedia(`(prefers-color-scheme: dark)`).matches?`#ffffff`:`#1a1a1a`,size:6},strokes:{},liveStroke:null,selectedStroke:null,selection:[],interacting:null,focusId:null,focusReturning:!1,following:null,activeThread:null,draft:null,showResolved:!1,guides:[],marquee:null,spacePanning:!1,awaitingSignIn:!1,shareCopied:!1,sharing:null,namePrompt:null,notice:null,noticeFailed:!1,size:{width:window.innerWidth,height:window.innerHeight},working:!1,invertScroll:!1,dark:!1,chatting:!1,chats:{}})),k=O.setState,A=O.getState,j=new Map,M=new Map,ce=new Set,le={x:window.innerWidth/2,y:window.innerHeight/2},ue=new Set,de=e=>(ue.add(e),()=>{ue.delete(e)}),N=null,P=null,fe=!1,pe,F=!0;function me(){R&&A().focusId||(F=!1,A().following&&k({following:null}))}function he(){F?Ae():A().focusId&&L(A().camera)}var I=e=>N?.send(e),ge=()=>N;function L(e){let{focusId:t,frames:n,size:r}=A(),i=t?n[t]:null;if(R){if(i)return;B(),ye()}if(i){let t=x(i,r,e.z);k({camera:x(i,r,e.z,{x:e.x-t.x,y:e.y-t.y})})}else k({camera:{...e,z:h(e.z)}});De()}var _e=360,ve=E(.22,1,.36,1),R=0,z=null;function B(){cancelAnimationFrame(R),R=0}function ye(){z=null,k({focusReturning:!1})}function be(e,t,n){if(B(),!t||matchMedia(`(prefers-reduced-motion: reduce)`).matches)return k({camera:e}),De(),n?.();let r=A().camera,i=performance.now(),a=t=>{let o=Math.min(1,Math.max(0,t-i)/_e),s=ve(o);k({camera:{x:r.x+(e.x-r.x)*s,y:r.y+(e.y-r.y)*s,z:r.z+(e.z-r.z)*s}}),De(),o<1?R=requestAnimationFrame(a):(R=0,n?.())};R=requestAnimationFrame(a)}function xe(e,t=null){let{frames:n,size:r,camera:i,role:a}=A(),o=n[e];o&&(z??={camera:i,autoFit:F},F=!0,k({focusId:e,focusReturning:!1,following:t,interacting:null,selection:a===`owner`?[e]:[],selectedStroke:null,activeThread:null,draft:null}),be(x(o,r),!0))}function V(e=!0){let{focusId:t,frames:n,role:r,size:i}=A();if(!t||!z)return;F=z.autoFit;let a=b(Oe()),o=F&&a?oe(a,i.width,i.height):z.camera;k({focusId:null,focusReturning:!0,selection:r===`owner`&&n[t]?[t]:[],activeThread:null,draft:null}),be(o,e,ye)}function Se(e){let{focusId:t,frames:n,following:r}=A();if(e!==t){if(e&&n[e])return xe(e,r);t&&(B(),z&&(F=z.autoFit),z=null,k({focusId:null,focusReturning:!1,selection:[],activeThread:null,draft:null}))}}var Ce=8,we=8,Te=e=>e*Math.min(we,Math.max(1,A().peers.length/Ce)),Ee=0;function De(){Ee||=window.setTimeout(()=>{Ee=0,H()},Te(66))}function H(){let{camera:e,size:t,peers:n,focusId:r}=A();n.length<2||I({t:`view`,v:{x:(t.width/2-e.x)/e.z,y:(t.height/2-e.y)/e.z,z:e.z,w:t.width,h:t.height,f:r??void 0}})}var Oe=()=>Object.values(A().frames),ke=e=>Object.values(e).sort((e,t)=>e.z-t.z||e.id.localeCompare(t.id));function Ae(){let e={width:window.innerWidth,height:window.innerHeight},{focusId:t,frames:n}=A();if(t&&n[t])return L(x(n[t],e));let r=b(Oe());r&&e.width>0&&e.height>0&&L(oe(r,e.width,e.height))}function je(){k({size:{width:window.innerWidth,height:window.innerHeight}}),he()}function Me(){F=!0,A().following&&k({following:null}),Ae()}function Ne(e,t){if(!e.frameId)return{x:e.x,y:e.y};let n=t[e.frameId];return n?{x:n.x+e.x*n.w,y:n.y+e.y*n.h}:null}function Pe(e,t=!1){t&&A().focusId&&A().threads[e]&&A().threads[e].frameId!==A().focusId&&V(!1);let{threads:n,frames:r,camera:i,size:a}=A(),o=n[e];if(!o||(Le(o),k({activeThread:e,draft:null,showResolved:o.resolved?!0:A().showResolved}),!t))return;F=!1;let s=Ne(o,r);s&&L({...i,x:a.width/2-180-s.x*i.z,y:a.height/2+60-s.y*i.z})}var Fe=()=>`oc:read:${A().canvasId}`,U=null;function Ie(){if(U)return U;try{U=JSON.parse(localStorage.getItem(Fe())||`{}`)}catch{U={}}return U}function Le(e){let t=e.comments[e.comments.length-1]?.createdAt||0;Ie()[e.id]=t;try{localStorage.setItem(Fe(),JSON.stringify(U))}catch{}}function Re(e,t){let n=e.comments[e.comments.length-1];return!!n&&n.author.id!==t&&n.createdAt>(Ie()[e.id]||0)}var ze=`oc:name`;function W(){try{return localStorage.getItem(ze)||``}catch{return``}}function Be(){return!A().peers.find(e=>e.id===A().self)?.guest||W()?Promise.resolve(!0):new Promise(e=>{k({namePrompt:t=>{k({namePrompt:null});let n=t?.trim();if(!n)return e(!1);try{localStorage.setItem(ze,n)}catch{}I({t:`name`,name:n}),e(!0)}})})}var Ve=`twombly:invert-scroll`;function He(){try{return localStorage.getItem(Ve)===`1`}catch{return!1}}var Ue=()=>A().boot?.mode===`local`||!!A().boot?.me;function We(){let e=!A().invertScroll;if(k({invertScroll:e}),Ue())s.saveSettings({invertScroll:e}).catch(()=>X(`Could not save that`));else try{localStorage.setItem(Ve,e?`1`:`0`)}catch{}}var Ge=`twombly:theme`,Ke=matchMedia(`(prefers-color-scheme: dark)`),G=null;try{let e=localStorage.getItem(Ge);(e===`light`||e===`dark`)&&(G=e)}catch{}function K(){let e=G?G===`dark`:Ke.matches;document.documentElement.dataset.colorScheme=e?`dark`:`light`;let{pencil:t}=A(),[n,r]=e?[`#1a1a1a`,`#ffffff`]:[`#ffffff`,`#1a1a1a`];k({dark:e,pencil:t.color===n?{...t,color:r}:t})}Ke.addEventListener(`change`,K),K();function qe(e){G=e;try{localStorage.setItem(Ge,e)}catch{}K()}function Je(){G=null,K()}function Ye(){let e=A().dark?`light`:`dark`;qe(e),Ue()&&s.saveSettings({theme:e}).catch(()=>X(`Could not save that`))}var Xe=0;function Ze(e){window.clearTimeout(Xe),k({working:e>0}),e>0&&(Xe=window.setTimeout(()=>k({working:!1}),e))}var q=[],Qe=[];function J(e){q.push(e),q.length>50&&q.shift(),Qe.length=0}function $e(e){let{frames:t}=A();if(e.kind===`stroke-added`)return A().strokes[e.stroke.id]?(st(e.stroke.id),{kind:`stroke-removed`,stroke:e.stroke}):null;if(e.kind===`stroke-removed`)return ot(e.stroke),{kind:`stroke-added`,stroke:e.stroke};if(e.kind===`remove`){for(let t of e.frames)I({t:`frame.restore`,frame:t});return{kind:`restore`,frames:e.frames}}if(e.kind===`restore`){for(let t of e.frames)I({t:`frame.remove`,id:t.id});return{kind:`remove`,frames:e.frames.map(e=>t[e.id]??e)}}let n=e.frames.filter(({id:e})=>t[e]);if(!n.length)return null;let r=n.map(({id:e,before:n})=>({id:e,before:Object.fromEntries(Object.keys(n).map(n=>[n,t[e][n]]))}));for(let{id:e,before:t}of n)rt(e,t);return{kind:`patch`,frames:r}}function et(e,t){for(;e.length;){let n=$e(e.pop());if(n){t.push(n);return}}}function tt(){et(q,Qe)}function nt(){et(Qe,q)}function rt(e,t){let{frames:n}=A();n[e]&&(k({frames:{...n,[e]:{...n[e],...t}}}),I({t:`frame.patch`,id:e,patch:t}))}function it(e){pt();let t=e===`pencil`||e===`comment`?{selection:[]}:{};k({tool:e,draft:null,selectedStroke:null,...e===`move`?{}:{interacting:null},...t})}function at(e){k({pencil:{...A().pencil,...e}})}function ot(e){k({strokes:{...A().strokes,[e.id]:e}}),I({t:`stroke.add`,stroke:e})}function st(e){let{[e]:t,...n}=A().strokes;k({strokes:n,selectedStroke:A().selectedStroke===e?null:A().selectedStroke}),I({t:`stroke.remove`,id:e})}function ct(e){ot(e),J({kind:`stroke-added`,stroke:e})}function lt(){let{selection:e,frames:t,role:n,selectedStroke:r,strokes:i}=A();if(r&&i[r])return J({kind:`stroke-removed`,stroke:i[r]}),st(r);if(n!==`owner`||!e.length||A().focusId)return;let a=e.map(e=>t[e]).filter(Boolean);J({kind:`remove`,frames:a});for(let e of a)I({t:`frame.remove`,id:e.id});k({selection:[]})}var ut=300,Y=new Map;function dt(e,t){window.clearTimeout(Y.get(e));let n=A().chats[e],r=()=>{let{[e]:t,...n}=A().chats;k({chats:n}),Y.delete(e)},i=()=>{let t=A().chats[e];if(!t)return r();k({chats:{...A().chats,[e]:{...t,live:!1}}}),Y.set(e,window.setTimeout(r,ut))};t?(k({chats:{...A().chats,[e]:{text:t,live:!0}}}),Y.set(e,window.setTimeout(i,c))):n&&i()}function ft(){k({chatting:!0})}function pt(){A().chatting&&(k({chatting:!1}),I({t:`chat`,text:null}))}function mt(e){let t=A();switch(e.t){case`hello`:{let n={};for(let t of e.doc.frames)n[t.id]=t;let r={};for(let t of e.threads)r[t.id]=t;let i={};for(let t of e.doc.strokes??[])i[t.id]=t;k({self:e.self,role:e.role,frames:n,threads:r,strokes:i,peers:e.peers,capabilities:e.capabilities,name:e.doc.name,ready:!0}),t.focusId&&!n[t.focusId]&&V(),Ze(e.working),document.title=`${e.doc.name} – Twombly`,he();let a=new URLSearchParams(location.search).get(`comment`);a&&r[a]&&(Pe(a,!0),history.replaceState(null,``,location.pathname));let o=W(),s=e.peers.find(t=>t.id===e.self);s?.guest&&o&&s.name!==o&&I({t:`name`,name:o}),setTimeout(H,100);break}case`peers`:{for(let t of j.keys())e.peers.some(e=>e.id===t)||(j.delete(t),M.delete(t));for(let n of Object.keys(t.chats))e.peers.some(e=>e.id===n)||dt(n,null);let n=t.following&&e.peers.some(e=>e.id===t.following)?t.following:null;k({peers:e.peers,following:n}),e.peers.length>t.peers.length&&setTimeout(H,50);break}case`pointer`:j.set(e.from,e.p);break;case`chat`:dt(e.from,l(e.text));break;case`view`:M.set(e.from,{...e.v,at:performance.now()});break;case`frame.upsert`:{let n=ce.has(e.frame.id)?t.frames[e.frame.id]:null,r=n?{...e.frame,x:n.x,y:n.y,w:n.w,h:n.h}:e.frame;k({frames:{...A().frames,[r.id]:r}}),n||he();break}case`frame.remove`:{let{[e.id]:n,...r}=A().frames;k({frames:r,selection:t.selection.filter(t=>t!==e.id),interacting:t.interacting===e.id?null:t.interacting}),t.focusId===e.id&&V();break}case`strokes`:{let t={...A().strokes};for(let n of e.strokes)t[n.id]=n;k({strokes:t});break}case`stroke.remove`:{let{[e.id]:n,...r}=A().strokes;k({strokes:r,selectedStroke:t.selectedStroke===e.id?null:t.selectedStroke});break}case`canvas`:k({name:e.name}),document.title=`${e.name} – Twombly`;break;case`working`:Ze(e.ms);break;case`thread`:k({threads:{...A().threads,[e.thread.id]:e.thread}}),t.activeThread===e.thread.id&&Le(e.thread);break;case`thread.remove`:{let{[e.id]:n,...r}=A().threads;k({threads:r,activeThread:t.activeThread===e.id?null:t.activeThread});break}case`deleted`:ht();break;case`error`:X(e.message)}for(let t of ue)t(e)}async function ht(){let{boot:e}=A();if(e?.mode===`local`)return k({link:null,awaitingSignIn:!1}),await s.bootstrap(A().canvasId).catch(()=>null),Z();N?.close(),k({gone:!0})}var gt=0;function X(e,t=!1){k({notice:e,noticeFailed:t}),window.clearTimeout(gt),gt=window.setTimeout(()=>k({notice:null}),t?5e3:2600)}function Z(){N?.close();let e=A().canvasId;N=new se(()=>s.ticket(e,W()||void 0).then(e=>e.url),mt,e=>k({connected:e}))}var _t=``;function vt(){let{focusId:e,interacting:t,selection:n,activeThread:r}=A();return e?{via:`fullscreen`,frames:[e],thread:r}:t?{via:`interacting`,frames:[t],thread:r}:{via:n.length?`selected`:null,frames:n,thread:r}}function yt(e=!1){let t=vt(),n=JSON.stringify(t);n===_t&&!e||P?.readyState!==WebSocket.OPEN||(_t=n,P.send(JSON.stringify({t:`context`,context:t})))}function bt(e){O.subscribe((e,t)=>{(e.focusId!==t.focusId||e.interacting!==t.interacting||e.selection!==t.selection||e.activeThread!==t.activeThread)&&yt()});let t=()=>{let n=new WebSocket(`${location.origin.replace(/^http/,`ws`)}/local/${e}?events=1`);P=n,n.onopen=()=>yt(!0),n.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(t.t===`auth`){let e=A().boot;k({boot:e&&{...e,me:t.me}}),t.me&&fe?(fe=!1,xt()):t.me&&A().link&&Z()}else t.t===`settings`?(k({invertScroll:t.settings.invertScroll}),t.settings.theme&&qe(t.settings.theme)):t.t===`share-progress`?k({sharing:{done:t.done,total:t.total}}):t.t===`shared`&&(k({link:t.url,sharing:null}),Z())},n.onclose=()=>{P===n&&setTimeout(t,1500)}};t()}async function xt(){let{canvasId:e,link:t}=A();if(!t){k({awaitingSignIn:!1,sharing:{done:0,total:Oe().length}});try{let{url:t}=await s.share(e);k({link:t,sharing:null}),wt(t)}catch(e){k({sharing:null}),X(e instanceof Error?e.message:`Could not share`,!0)}}}function St(){let{boot:e,link:t}=A();e?.mode===`local`&&!e.me?(fe=!t,k({awaitingSignIn:!t,sharing:null}),s.login().catch(()=>{k({awaitingSignIn:!1}),X(`Could not open sign-in`,!0)})):e?.mode!==`hosted`&&xt()}function Ct(e){navigator.clipboard?.writeText(e).then(()=>X(`Link copied`)).catch(()=>{})}function wt(e){navigator.clipboard?.writeText(e).then(()=>{k({shareCopied:!0}),clearTimeout(pe),pe=setTimeout(()=>k({shareCopied:!1}),1400)}).catch(()=>{})}async function Tt(){let{boot:e,canvasId:t}=A();e?.mode===`local`?(await s.unshare(t),k({link:null,awaitingSignIn:!1})):(await s.remove(t),location.href=`/`)}function Et(e){let t=e.canvas;k({boot:e,canvasId:t.id,name:t.name,link:t.url,invertScroll:e.settings?.invertScroll??He()}),e.mode===`hosted`&&e.me&&!e.settings&&(He()||G)&&s.saveSettings({invertScroll:He(),...G&&{theme:G}}).catch(()=>{}),e.mode===`local`&&bt(t.id),Z()}var Dt=t((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),Ot=t(((e,t)=>{t.exports=Dt()})),Q=Ot();function kt({name:e,picture:t,color:n,size:r=24,style:i}){return(0,Q.jsx)(`span`,{className:`face`,style:{width:r,height:r,background:n,fontSize:Math.round(r*.46),...i},children:t?(0,Q.jsx)(`img`,{src:t,alt:``,referrerPolicy:`no-referrer`}):(e||`?`)[0].toUpperCase()})}function At(){let e=O(e=>e.peers),t=O(e=>e.self),n=O(e=>e.following),r=e.find(e=>e.id===t),i=new Set(r?[r.userId]:[]),a=e.filter(e=>!i.has(e.userId)&&(i.add(e.userId),!0)),o=a.slice(0,5),s=a.length-o.length;return a.length?(0,Q.jsxs)(`div`,{className:`faces`,children:[s>0&&(0,Q.jsxs)(`span`,{className:`face more`,children:[`+`,s]}),o.map(e=>(0,Q.jsx)(`button`,{className:`face-button`+(n===e.id?` following`:``),style:{"--peer":e.color},title:n===e.id?`Stop following ${e.name}`:`Follow ${e.name}`,"aria-label":n===e.id?`Stop following ${e.name}`:`Follow ${e.name}`,onClick:()=>O.setState({following:n===e.id?null:e.id,interacting:null}),children:(0,Q.jsx)(kt,{name:e.name,picture:e.picture,color:e.color})},e.id))]}):null}var $=(e,t=`0 0 24 24`)=>({size:n=16})=>(0,Q.jsx)(`svg`,{width:n,height:n,viewBox:t,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:e}),jt=`M9.80282 4.62973L15.8364 6.99069C19.3164 8.35243 21.0564 9.03329 20.9987 10.1133C20.941 11.1934 19.1251 11.6886 15.4933 12.6791C14.412 12.974 13.8713 13.1215 13.4964 13.4963C13.1215 13.8712 12.9741 14.4119 12.6791 15.4933C11.6887 19.125 11.1934 20.9409 10.1134 20.9986C9.03335 21.0563 8.35249 19.3163 6.99075 15.8363L4.62979 9.80276C3.20411 6.15934 2.49127 4.33764 3.41448 3.41442C4.3377 2.49121 6.15941 3.20405 9.80282 4.62973Z`,Mt=$((0,Q.jsx)(`path`,{d:jt})),Nt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M18.5 11.5V8.75C18.5 7.7835 19.2835 7 20.25 7C21.2165 7 22 7.7835 22 8.75V14.8C22 18.7765 18.7764 22 14.8 22H12.0588M8 14L5.61507 11.2176C5.22468 10.7621 4.65476 10.5 4.05489 10.5H3.91898C2.85916 10.5 2 11.3592 2 12.419C2 12.7978 2.11214 13.1682 2.32229 13.4834L5.7812 18.6718C7.16738 20.7511 9.50102 22 12 22`}),(0,Q.jsx)(`path`,{d:`M18.5 8.5V5.75C18.5 4.7835 17.7165 4 16.75 4C15.7835 4 15 4.7835 15 5.75V10.5`}),(0,Q.jsx)(`path`,{d:`M15 10.5V3.75C15 2.7835 14.2165 2 13.25 2C12.2835 2 11.5 2.7835 11.5 3.75V10`}),(0,Q.jsx)(`path`,{d:`M11.5 10V5.75C11.5 4.7835 10.7165 4 9.75 4C8.7835 4 8 4.7835 8 5.75V14`})]})),Pt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M3.78181 16.3092L3 21L7.69086 20.2182C8.50544 20.0825 9.25725 19.6956 9.84119 19.1116L20.4198 8.53288C21.1934 7.75922 21.1934 6.5049 20.4197 5.73126L18.2687 3.58024C17.495 2.80658 16.2406 2.80659 15.4669 3.58027L4.88841 14.159C4.30447 14.7429 3.91757 15.4947 3.78181 16.3092Z`}),(0,Q.jsx)(`path`,{d:`M14 6L18 10`})]})),Ft=$((0,Q.jsx)(`path`,{d:`M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9`})),It=$((0,Q.jsx)(`path`,{d:`M5 13.2592L7.58583 15.9568C8.2525 16.6523 8.58583 17 9.00004 17C9.41425 17 9.74759 16.6523 10.4143 15.9568L19 7`})),Lt=$((0,Q.jsx)(`path`,{d:`M12 3.5a8.5 8.5 0 0 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5Z`})),Rt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M4 15v-3a8 8 0 0 1 16 0v3`}),(0,Q.jsx)(`rect`,{x:`3`,y:`14`,width:`4.5`,height:`6.5`,rx:`1.5`}),(0,Q.jsx)(`rect`,{x:`16.5`,y:`14`,width:`4.5`,height:`6.5`,rx:`1.5`})]})),zt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`rect`,{x:`9`,y:`3`,width:`6`,height:`11`,rx:`3`}),(0,Q.jsx)(`path`,{d:`M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3`})]})),Bt=$((0,Q.jsx)(Q.Fragment,{children:(0,Q.jsx)(`path`,{d:`m3.5 3.5 17 17M9 9v2a3 3 0 0 0 4.9 2.3M15 10.5V6a3 3 0 0 0-5.7-1.3M5.5 11.5a6.5 6.5 0 0 0 10.2 5.3M18.5 11.5c0 .7-.1 1.3-.3 1.9M12 18v3`})})),Vt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4`}),(0,Q.jsx)(`path`,{d:`m15 8 4 4-4 4M19 12H9`})]})),Ht=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`8.5`}),(0,Q.jsx)(`path`,{d:`m8.5 12.2 2.4 2.4 4.6-5`})]})),Ut=$((0,Q.jsx)(`path`,{d:`m6.5 6.5 11 11m0-11-11 11`})),Wt=({size:e=16})=>(0,Q.jsxs)(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,children:[(0,Q.jsx)(`circle`,{cx:`5`,cy:`12`,r:`1.8`}),(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`1.8`}),(0,Q.jsx)(`circle`,{cx:`19`,cy:`12`,r:`1.8`})]}),Gt=`M12 20.5s-8.5-5-8.5-11A4.75 4.75 0 0 1 12 6.6a4.75 4.75 0 0 1 8.5 2.9c0 6-8.5 11-8.5 11Z`,Kt=$((0,Q.jsx)(`path`,{fill:`currentColor`,d:Gt})),qt=$((0,Q.jsx)(`path`,{d:Gt})),Jt=$((0,Q.jsx)(`path`,{d:`M4.5 6.5h15M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5m3.5 0-.7 12a2 2 0 0 1-2 2H8.7a2 2 0 0 1-2-2L6 6.5`})),Yt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`}),(0,Q.jsx)(`path`,{d:`M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z`})]})),Xt=$((0,Q.jsx)(`path`,{d:`M12 19V5m-6.5 6.5L12 5l6.5 6.5`})),Zt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`8.5`}),(0,Q.jsx)(`path`,{d:`M8.5 14.5a4.5 4.5 0 0 0 7 0`}),(0,Q.jsx)(`path`,{d:`M9 9.5v.01M15 9.5v.01`,strokeWidth:`2`})]})),Qt=$((0,Q.jsx)(`path`,{d:`M12 5.5v13m-6.5-6.5h13`})),$t=$((0,Q.jsx)(`path`,{d:`M5.5 12h13`})),en=$((0,Q.jsx)(`path`,{d:`M10 14a4 4 0 0 0 5.7 0l3-3A4 4 0 0 0 13 5.3l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1`})),tn=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M4.5 6h15`,strokeWidth:`1.25`}),(0,Q.jsx)(`path`,{d:`M4.5 12h15`,strokeWidth:`2.25`}),(0,Q.jsx)(`path`,{d:`M4.5 18h15`,strokeWidth:`3.5`})]})),nn=$((0,Q.jsx)(`path`,{d:`M3 12v2.5c0 3.3 0 4.95 1.03 5.97C5.05 21.5 6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.97-1.03C21 19.45 21 17.8 21 14.5V12c0-1.68 0-2.52-.36-3.25-.35-.73-1.02-1.24-2.34-2.28l-2-1.56C14.23 3.3 13.2 2.5 12 2.5s-2.23.8-4.3 2.41l-2 1.56C4.38 7.5 3.71 8.01 3.36 8.74 3 9.47 3 10.31 3 12Z`})),rn=$((0,Q.jsx)(`path`,{d:`M19 12V9c0-1.89 0-2.83-.59-3.41C17.83 5 16.89 5 15 5h-3M5 12v3c0 1.89 0 2.83.59 3.41C6.17 19 7.11 19 9 19h3`})),an=$((0,Q.jsx)(`path`,{d:`M13 4v3c0 1.89 0 2.83.59 3.41.58.59 1.52.59 3.41.59h3M11 20v-3c0-1.89 0-2.83-.59-3.41C9.83 13 8.89 13 7 13H4`})),on=$((0,Q.jsx)(`path`,{d:`M8 19V5M3.5 9.5 8 5l4.5 4.5M16 5v14m4.5-4.5L16 19l-4.5-4.5`})),sn=`url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Cpath%20d%3D'M14%203.5a10.5%2010.5%200%200%201%200%2021H3.5V14A10.5%2010.5%200%200%201%2014%203.5Z'%20fill%3D'%23fff'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E") 3 25, crosshair`,cn=`Run npx skills add materic-inc/twombly-skill -g -y, then use the Twombly skill to put this project's main screens on a canvas.`;export{le as $,Jt as A,ie as At,wt as B,Wt as C,E as Ct,on as D,y as Dt,Qt as E,h as Et,me as F,l as Ft,X as G,xe as H,qe as I,ee as It,ke as J,Se as K,St as L,s as Lt,At as M,ae as Mt,Ot as N,p as Nt,Yt as O,v as Ot,ct as P,c as Pt,Le as Q,pt as R,o as Rt,$t as S,M as St,Pt as T,g as Tt,V as U,Be as V,Me as W,Re as X,ce as Y,Te as Z,nn as _,Ne as _t,Ht as a,J as at,zt as b,tt as bt,Ut as c,je as ct,Zt as d,H as dt,de as et,rn as f,L as ft,qt as g,Tt as gt,Kt as h,Et as ht,jt as i,j as it,kt as j,T as jt,tn as k,_ as kt,an as l,ge as lt,Rt as m,it as mt,Xt as n,Pe as nt,It as o,nt as ot,Nt as p,at as pt,Je as q,sn as r,rt,Ft as s,lt as st,cn as t,ft as tt,Lt as u,I as ut,Vt as v,We as vt,Mt as w,D as wt,Bt as x,O as xt,en as y,Ye as yt,Ct as z,r as zt};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:oklch(97% 0 0);--surface:oklch(100% 0 0);--surface-2:oklch(95.5% 0 0);--surface-hover:oklch(0% 0 0/.05);--surface-pressed:oklch(0% 0 0/.09);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--island:oklch(0% 0 0);--island-line:transparent;--island-hover:oklch(100% 0 0/.11);--text:oklch(0% 0 0);--secondary:oklch(42% 0 0);--muted:oklch(53% 0 0);--line:oklch(0% 0 0/.09);--line-subtle:oklch(0% 0 0/.06);--icon-muted:.58;--icon-secondary:.72;--frame-bg:oklch(100% 0 0);--accent:#06f;--selection:#0066ff1f;--guide:#06f9;--signal:#06f;--signal-soft:#0066ff21;--signal-soft-hover:#06f3;--danger:oklch(56% .21 27);--danger-soft:oklch(96% .025 25);--live:oklch(50% .14 150);--live-soft:oklch(96% .03 150);--backdrop:oklch(0% 0 0/.24);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.1), 0 14px 32px -8px oklch(0% 0 0/.3);--shadow-sm:0 0 0 1px var(--line);--pill:999px;--radius-menu:18px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:root[data-color-scheme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:oklch(17.8% 0 0);--surface:oklch(16% 0 0);--surface-2:oklch(22% 0 0);--surface-hover:oklch(100% 0 0/.07);--surface-pressed:oklch(100% 0 0/.11);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--island-line:oklch(100% 0 0/.13);--text:oklch(98.5% 0 0);--secondary:oklch(80% 0 0);--muted:oklch(66% 0 0);--line:oklch(100% 0 0/.09);--line-subtle:oklch(100% 0 0/.06);--icon-muted:.6;--icon-secondary:.74;--accent:#06f;--selection:#0066ff2e;--guide:#0066ffa6;--signal:#06f;--signal-soft:#06f3;--signal-soft-hover:#0066ff47;--danger:oklch(72% .18 25);--danger-soft:oklch(28% .06 25);--live:oklch(80% .15 150);--live-soft:oklch(28% .05 150);--backdrop:oklch(0% 0 0/.6);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.3), 0 14px 32px -8px oklch(0% 0 0/.5)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas);color:var(--text);font:400 13px/18px var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:default;background:0 0;border:0;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}a{color:inherit}.muted{color:var(--muted)}.spacer{flex:1}.full-message{height:100%;color:var(--muted);place-items:center;display:grid}.stage{background:var(--canvas);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:clip}.world{transform-origin:0 0;--inv:1;--zoom:1;width:0;height:0;position:absolute;top:0;left:0}.world[data-moving]{will-change:transform}.empty-canvas{color:var(--muted);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.frame{transition:opacity .12s ease-out;position:absolute;top:0;left:0}.frame-surface{box-shadow:0 0 0 calc(1px * var(--inv)) var(--line);position:absolute;inset:0;overflow:hidden}.frame-surface:before{content:"";inset:calc(1px * var(--inv));background:var(--frame-bg);position:absolute}.frame iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}[data-dragging] .frame iframe{pointer-events:none!important}.world[data-moving]:not(:has(.frame.focused)) .frame iframe{pointer-events:none!important}.frame-poster{object-fit:cover;object-position:top left;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.frame-shield{cursor:var(--stage-cursor,default);position:absolute;inset:0}.stage[data-role=guest][data-tool=move] .frame-shield{cursor:pointer}.frame.selected .frame-surface,.frame.interacting .frame-surface{box-shadow:0 0 0 calc(1.5px * var(--inv)) var(--accent)}.frame-title{width:calc(100% * var(--zoom));height:26px;transform:scale(var(--inv));transform-origin:0 100%;color:var(--muted);white-space:nowrap;align-items:flex-end;padding-bottom:6px;font-size:12px;line-height:16px;display:flex;position:absolute;bottom:100%;left:0}.frame-title span{text-overflow:ellipsis;overflow:hidden}.frame.selected .frame-title,.frame.interacting .frame-title{color:var(--accent)}.frame-title input{border-radius:var(--pill);background:var(--surface-2);width:100%;max-width:280px;height:20px;color:var(--text);-webkit-user-select:text;user-select:text;border:0;outline:0;margin-left:-4px;padding:0 4px;font-size:12px}.frame-actions{z-index:1;transform:scale(var(--inv)) translate(var(--step-x,0), var(--step-y,0));transform-origin:100% 100%;opacity:0;pointer-events:none;padding-bottom:10px;transition:opacity .12s ease-out;display:flex;position:absolute;bottom:100%;right:0}.frame-actions[data-visible]{opacity:1;pointer-events:auto}.frame-actions:has(:focus-visible){opacity:1;pointer-events:auto}@media (hover:hover){.frame:hover>.frame-actions{opacity:1;pointer-events:auto}}.frame-focus{border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);color:var(--text);cursor:default;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.frame-focus svg{opacity:var(--icon-muted);transition:opacity .1s}.frame-focus:hover{background:linear-gradient(var(--surface-hover) 0 0), var(--surface)}.frame-focus:hover svg{opacity:var(--icon-secondary)}.frame-focus:active{background:linear-gradient(var(--surface-pressed) 0 0), var(--surface)}.frame:hover>.frame-title,.frame.selected>.frame-title{padding-right:34px}.stage[data-tool=pencil] .frame:not(.focused) .frame-actions{display:none}.stage[data-focus] .frame:not(.focused){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s .12s}.stage[data-focus] .frame-surface{box-shadow:none}.frame-title{transition:opacity .12s ease-out}.stage[data-focus] .frame-title{opacity:0;pointer-events:none}.stage[data-returning] .frame,.stage[data-returning] .frame *{pointer-events:none!important}@media (prefers-reduced-motion:reduce){.frame,.stage[data-focus] .frame:not(.focused),.frame-actions{transition:none}}.guide{background:var(--guide);pointer-events:none;z-index:1000000;position:absolute}.marquee{background:var(--selection);box-shadow:0 0 0 calc(1px * var(--inv)) var(--accent);pointer-events:none;z-index:1000000;position:absolute}.cursors{pointer-events:none;z-index:40;position:absolute;inset:0;overflow:hidden}.cursor{will-change:transform;transition:opacity .18s ease-out;position:absolute;top:-4px;left:-3px}.cursor svg{filter:drop-shadow(0 1px 2px #00000040);display:block}.cursor-label{border-radius:var(--pill);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:180px;padding:3px 7px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:18px;left:16px;overflow:hidden;box-shadow:0 1px 3px #0003}.chat-anchor{z-index:41;will-change:transform;position:fixed;top:0;left:0}.chat-bubble{color:#fff;white-space:pre;border-radius:4px 16px 16px;padding:7px 12px;font-size:13px;font-weight:500;line-height:18px;transition:opacity .3s ease-out;position:absolute;top:14px;left:13px;box-shadow:0 1px 3px #0003}.cursor .chat-bubble{animation:.12s ease-out chat-in;top:18px;left:16px}.chat-bubble.fading{opacity:0}.chat-anchor .chat-bubble.fading{opacity:1}.chat-anchor .chat-bubble.fading :is(.chat-line,.chat-previous){opacity:0;transition:opacity .3s ease-out}.chat-previous{opacity:.7}.chat-line{align-items:center;display:flex}.chat-caret{background:#fff;flex:none;width:1.5px;height:16px;margin-left:1px;animation:1s step-end infinite chat-caret}.chat-placeholder{color:#ffffffb3}@keyframes chat-caret{50%{opacity:0}}@keyframes chat-in{0%{opacity:0;transform-origin:0 0;transform:scale(.96)}}.follow-ring{pointer-events:none;z-index:60;position:fixed;inset:0}.follow-tab{border-radius:var(--pill);color:#fff;white-space:nowrap;z-index:61;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12px;font-weight:500;display:flex;position:fixed;top:50px;left:50%;transform:translate(-50%)}.face{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;display:block}.face.more{background:var(--surface-2);width:24px;height:24px;color:var(--text);font-size:10px}.faces{flex-direction:row-reverse;align-items:center;padding:0 6px 0 10px;display:flex}.face-button{box-shadow:0 0 0 2px var(--surface);border-radius:50%;margin-left:-6px;transition:transform .1s ease-out;position:relative}.face-button:hover{z-index:2;transform:translateY(-1px)}.face-button.following{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--peer);z-index:2}.face-button .face{display:flex}.chrome{z-index:50;-webkit-user-select:none;user-select:none;cursor:default}.shell{border-radius:var(--pill);background:var(--surface);height:38px;box-shadow:var(--shadow-sm);align-items:center;gap:2px;padding:3px;display:flex;position:fixed}:root[data-color-scheme=dark] .stage :is(.shell,.frame-focus){--surface:oklch(25% 0 0);box-shadow:none}.shell-divider{background:var(--line);flex:none;width:1px;height:20px;margin:0 4px}.top-left,.top-right,.toolbar{top:calc(6px + env(safe-area-inset-top))}.top-left{max-width:calc(50vw - 48px);left:6px}.top-right{right:6px}.wordmark{color:var(--text);flex:none;padding-right:2px;display:inline-flex}.wordmark svg{width:auto;height:14px;display:block}.canvas-name{border-radius:var(--pill);text-overflow:ellipsis;white-space:nowrap;min-width:0;height:32px;color:var(--muted);text-align:left;padding:0 8px;line-height:32px;transition:background-color .1s,color .1s;display:block;overflow:hidden}button.canvas-name:hover{background:var(--surface-hover);color:var(--text)}.canvas-name-field{border-radius:var(--pill);background:var(--surface-hover);flex:0 auto;grid-template-columns:minmax(0,max-content);min-width:48px;height:32px;display:inline-grid}.canvas-name-field:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1/1;height:0;padding:0 8px;overflow:hidden}.canvas-name-input{-webkit-user-select:text;user-select:text;background:0 0;border:0;grid-area:1/1;width:0;min-width:100%;height:32px;padding:0 8px}.canvas-name-input:focus-visible,.frame-title input:focus-visible,.canvas-card-rename:focus-visible{outline:0}.canvas-name-input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.frame-title input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.canvas-card-rename::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.primary-button{border-radius:var(--pill);background:var(--solid);height:32px;color:var(--on-solid);flex:none;justify-content:center;align-items:center;padding:0 12px;font-weight:500;transition:opacity .1s;display:inline-flex}.primary-button:hover{opacity:.85}.primary-button:disabled{opacity:.4}.sign-in{border-radius:var(--pill);height:32px;color:var(--secondary);align-items:center;padding:0 10px;font-weight:500;text-decoration:none;transition:background-color .1s;display:inline-flex}.sign-in:hover{background:var(--surface-hover)}.icon-button{border-radius:var(--pill);width:28px;height:28px;color:var(--text);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:inline-flex}.icon-button svg,.tool svg{opacity:var(--icon-muted);transition:opacity .1s}.icon-button:hover{background:var(--surface-hover)}.icon-button:hover svg,.tool:hover svg{opacity:var(--icon-secondary)}.icon-button:active:not(:disabled),.tool:active{background:var(--surface-pressed)}.icon-button:disabled{opacity:.4}.icon-button.small{border-radius:var(--pill);width:24px;height:24px}.icon-button.on,.icon-button.danger-text{background:0 0}.icon-button.on{color:var(--signal)}.icon-button.danger-text{color:var(--danger)}.icon-button.on svg,.icon-button.danger-text svg{opacity:1}.shell .icon-button{border-radius:var(--pill);width:32px;height:32px}.link-button{font-size:12px;font-weight:500;text-decoration:none}.link-button:hover{text-decoration:underline}.link-button.quiet{color:var(--muted)}.link-button.danger{color:var(--danger)}.toolbar{left:50%;transform:translate(-50%)}.tool{border-radius:var(--pill);width:32px;height:32px;color:var(--text);justify-content:center;align-items:center;transition:background-color .1s,color .1s;display:flex}.tool:hover{background:var(--surface-hover)}.tool.on,.shell .icon-button.on{background:var(--signal-soft);color:var(--signal)}.tool.on:hover,.shell .icon-button.on:hover{background:var(--signal-soft-hover)}.tool.on svg,.tool.on:hover svg{opacity:1}.zoom{right:6px;bottom:calc(6px + env(safe-area-inset-bottom))}.zoom-value{border-radius:var(--pill);min-width:44px;height:32px;color:var(--secondary);text-align:center;font-variant-numeric:tabular-nums;font-size:12px;transition:background-color .1s}.zoom-value:hover{background:var(--surface-hover)}.notice{border-radius:var(--pill);background:var(--island);color:#fff;height:32px;box-shadow:inset 0 0 0 1px var(--island-line);white-space:nowrap;align-items:center;gap:6px;max-width:min(560px,100vw - 24px);padding:0 12px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.notice span{text-overflow:ellipsis;overflow:hidden}.working-bubble{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));color:var(--secondary);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;gap:8px;padding:0 14px 0 12px;font-size:12px;transition:opacity .15s ease-out,transform .15s ease-out,visibility .15s;transform:translate(-50%)translateY(8px)scale(.97)}.working-bubble[data-show]{opacity:1;visibility:visible;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility;transform:translate(-50%)}.working-scribble{flex:none}.working-scribble path{fill:none;stroke:var(--signal);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;animation:1.8s cubic-bezier(.65,0,.35,1) infinite paused scribble}.working-bubble[data-show] .working-scribble path{animation-play-state:running}@keyframes scribble{0%{stroke-dashoffset:1.1px}55%{stroke-dashoffset:0}to{stroke-dashoffset:-1.1px}}.reconnecting{border-radius:var(--pill);background:var(--surface);height:28px;box-shadow:var(--shadow-sm);color:var(--muted);padding:5px 10px;font-size:12px;position:fixed;top:50px;left:50%;transform:translate(-50%)}.share-group{align-items:center;gap:6px;display:flex;position:fixed}.share-group .shell{position:static}.share-group .shell:empty{display:none}.share-group .primary-button{height:38px}.share-split{flex:none;gap:1px;display:inline-flex}.share-split .primary-button:first-child{border-radius:var(--pill) 6px 6px var(--pill);gap:4px;min-width:84px;padding:0 10px 0 12px}.share-split .primary-button:not(:first-child){border-radius:6px var(--pill) var(--pill) 6px;width:28px;padding:0 3px 0 0}.share-sharing,.share-sharing:hover{background:var(--surface-2);color:var(--muted);opacity:1;position:relative;overflow:hidden}.share-sharing i{background:var(--surface-pressed);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-sharing span{position:relative}.share-uploading,.share-uploading:hover{background:linear-gradient(var(--signal-soft) 0 0), var(--surface);min-width:120px;color:var(--signal);opacity:1;position:relative;overflow:hidden}.share-uploading i{background:var(--signal-soft-hover);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-uploading span{position:relative}.share-note{max-width:240px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:12px;line-height:32px;overflow:hidden}.share-menu{width:212px}.share-menu .canvas-menu-item{padding:0 12px}.share-menu-link{color:oklch(100% 0 0/.6);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;padding:6px 12px;font-size:12px;overflow:hidden}.modal-backdrop{background:var(--backdrop);z-index:70;place-items:center;display:grid;position:fixed;inset:0}.name-prompt{border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);gap:6px;padding:8px;display:flex}.name-prompt input{border-radius:var(--pill);background:var(--surface-2);-webkit-user-select:text;user-select:text;border:0;flex:1;min-width:0;height:32px;padding:0 10px}.name-prompt .primary-button{border-radius:var(--pill)}.huddle-faces{align-items:center;display:inline-flex}.huddle-bar{align-items:center;gap:2px;padding-left:7px;display:inline-flex}.huddle-bar .huddle-faces{padding-right:5px}.huddle-face{--level:0;box-shadow:0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--level) * 2px) color-mix(in oklab, var(--live) calc(min(1, var(--level) * 10) * 100%), transparent);border-radius:50%;margin-left:-5px;transition:box-shadow .1s ease-out;display:inline-flex;position:relative}.huddle-faces .huddle-face:first-child{margin-left:0}.huddle-face.muted{box-shadow:0 0 0 2px var(--surface)}.huddle-face.muted:after{content:"";width:12px;height:12px;box-shadow:0 0 0 1.5px var(--surface);background:var(--danger) no-repeat center / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M8 8v3.5a4 4 0 0 0 6.5 3.1M16 11.5V6.5a4 4 0 0 0-7.6-1.7'/%3E%3C/svg%3E");border-radius:50%;position:absolute;bottom:-3px;right:-3px}.huddle-bar.joining .huddle-face{opacity:.55}.shell .huddle-leave,.shell .huddle-leave:hover{background:var(--danger-soft);color:var(--danger)}.huddle-leave svg,.huddle-leave:hover svg{opacity:1}.huddle-button.live{border-radius:var(--pill);height:32px;color:var(--live);align-items:center;gap:6px;padding:0 6px 0 8px;transition:background-color .1s;display:inline-flex}.huddle-button.live:hover{background:var(--surface-hover)}.huddle-button.live .huddle-faces .face{box-shadow:0 0 0 2px var(--surface);margin-left:-5px}.huddle-button.live .huddle-faces .face:first-child{margin-left:0}.huddle-notice{white-space:nowrap;align-items:center;gap:8px;height:32px;padding:0 0 0 6px;display:inline-flex}.huddle-notice b{font-weight:500}.huddle-notice .join{border-radius:var(--pill);background:var(--live-soft);height:32px;color:var(--live);align-items:center;padding:0 10px;font-weight:500;display:inline-flex}.huddle-error{height:32px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 8px;display:inline-flex}.comments-layer{pointer-events:none;z-index:30;position:absolute;inset:0;overflow:hidden}.comments-layer>*{pointer-events:auto}.comment-pin{background:var(--surface);width:32px;max-width:32px;height:32px;max-height:32px;box-shadow:var(--shadow);text-align:left;touch-action:none;border-radius:16px 16px 16px 0;align-items:flex-start;gap:8px;padding:4px;transition:max-width .1s ease-in-out,max-height .1s ease-in-out,padding .1s ease-in-out;display:flex;position:absolute;overflow:hidden;transform:translateY(-100%)}.comment-pin.new{background:var(--accent)}.comment-pin.active,.comment-pin.unread{box-shadow:0 0 0 2px var(--accent), var(--shadow)}.comment-pin.resolved .face{opacity:.45}.comment-pin-preview{opacity:0;flex-direction:column;gap:0;min-width:0;font-size:11px;line-height:16px;transition:opacity .1s ease-in-out;display:flex}.comment-pin-preview b{font-weight:500}.comment-pin-head{white-space:nowrap}.comment-pin-text{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comment-pin.expanded{z-index:5;width:240px;max-width:240px;height:auto;max-height:112px;padding:12px}.comment-pin.expanded .face{width:26px!important;height:26px!important}.comment-pin.expanded .comment-pin-preview{opacity:1;flex:1}.composer{background:var(--surface);box-shadow:0 0 0 1px var(--accent), var(--shadow);-webkit-user-select:text;user-select:text;cursor:auto;border-radius:13px;flex-direction:column;display:flex;position:absolute}.composer-input{align-items:flex-start;gap:8px;padding:8px 16px;display:flex}.composer-input textarea{flex:1;min-width:0}.composer textarea,.thread-reply textarea{resize:none;padding:0;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;width:100%;padding-block:calc(12px - .675em);font-size:13px;line-height:1.35;display:block;overflow-y:auto}.composer textarea::placeholder,.thread-reply textarea::placeholder{color:var(--muted)}.composer-actions{border-top:1px solid var(--line);align-items:center;height:40px;padding:4px 8px;display:none}.composer.has-text .composer-actions{display:flex}.composer:not(.has-text) .composer-input{padding-right:8px}.send-button{background:var(--solid);width:24px;height:24px;color:var(--on-solid);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.send-button:disabled{background:var(--surface-2);color:var(--muted)}.emoji-wrap{display:inline-flex;position:relative}.emoji-menu{border-radius:var(--radius-menu);background:var(--surface);box-shadow:var(--shadow);z-index:5;grid-template-columns:repeat(6,28px);gap:2px;padding:4px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.emoji-menu button{border-radius:var(--pill);width:28px;height:28px;font-size:16px}.emoji-menu button:hover{background:var(--surface-hover)}.comment-card{background:var(--surface);max-height:min(520px,100vh - 72px);box-shadow:var(--shadow);cursor:auto;border-radius:13px;flex-direction:column;font-size:11px;line-height:16px;display:flex;position:absolute}.thread-header{border-bottom:1px solid var(--line);flex:none;align-items:center;height:42px;padding:4px 8px 4px 16px;display:flex}.thread-title{flex:1;font-weight:550}.thread-actions{align-items:center;gap:4px;display:flex}.menu-wrap{display:inline-flex;position:relative}.menu{border-radius:var(--radius-menu);background:var(--island);min-width:140px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);z-index:6;padding:4px;position:absolute;top:calc(100% + 4px);right:0}.menu button{border-radius:var(--pill);color:#fff;text-align:left;white-space:nowrap;width:100%;height:28px;padding:0 8px;font-size:12px;display:block}.menu button:hover{background:var(--island-hover)}.thread-list{-webkit-user-select:text;user-select:text;flex:1;min-height:0;padding:8px 0 0;overflow-y:auto}.thread-comment{padding:4px 16px 8px;position:relative}.thread-comment-head{align-items:center;gap:8px;height:32px;display:flex}.thread-comment-name{font-size:13px;font-weight:500;line-height:24px}.thread-comment-time{font-size:13px;line-height:24px}.thread-comment-more{opacity:0;margin-left:auto;position:relative}.thread-comment:hover .thread-comment-more,.thread-comment-more:focus-within{opacity:1}.thread-comment-text{white-space:pre-wrap;word-break:break-word;padding-left:32px;font-size:13px;line-height:24px}.thread-reply{flex:none;align-items:flex-start;gap:8px;padding:8px 16px 16px;display:flex}.thread-reply>.face{margin-top:8px}.thread-reply-field{background:var(--surface-2);border-radius:8px;flex:1;align-items:flex-start;gap:8px;min-width:0;padding:8px 8px 8px 12px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0000}.thread-reply-field:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}.thread-reply-field textarea{flex:1;min-width:0}.comments-panel{border-radius:var(--radius-menu);background:var(--surface);width:248px;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:fixed;top:50px;bottom:50px;right:6px}.comments-panel-head{border-bottom:1px solid var(--line-subtle);flex:none;justify-content:space-between;align-items:center;height:42px;padding:0 12px 0 16px;font-size:12px;font-weight:500;display:flex}.resolved-toggle{color:var(--muted);align-items:center;gap:4px;font-weight:400;display:flex}.resolved-toggle input{accent-color:var(--accent);margin:0}.comments-panel-list{flex:1;min-height:0;padding:6px;overflow-y:auto}.comments-empty{margin:0;padding:10px;font-size:12px}.comments-panel-item{text-align:left;border-radius:8px;width:100%;padding:8px 10px;font-size:12px;line-height:16px;display:block}.comments-panel-item:hover{background:var(--surface-hover)}.comments-panel-item.active{background:var(--selection)}.comments-panel-item>span{display:block}.comments-panel-item b{font-weight:500}.comments-panel-face{width:24px;margin-bottom:4px;position:relative}.comments-panel-face .face{display:flex}.unread-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;position:absolute;top:-1px;right:-3px}.comments-panel-text{-webkit-line-clamp:3;word-break:break-word;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box!important}body:has(.home){overflow:auto}.home{flex-direction:column;min-height:100%;display:flex}.home-top .wordmark svg{height:18px}.home-top{justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.home-me{border-radius:50%;transition:box-shadow .1s;display:flex}.home-me:hover,.home-me[data-popup-open]{box-shadow:0 0 0 3px var(--surface-hover)}.home-main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 20px}.install{text-align:center;flex-direction:column;align-items:center;gap:20px;padding-top:22vh;display:flex}.install h1{letter-spacing:-.028em;margin:0;font-size:24px;font-weight:500;line-height:32px}.canvas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none;display:grid}.canvas-card{min-width:0;display:block;position:relative}.canvas-card-link{z-index:1;border-radius:var(--radius-menu);outline:0;position:absolute;inset:0}.canvas-card-meta{font-size:12px;display:block}.canvas-card-name{text-overflow:ellipsis;white-space:nowrap;margin-top:10px;font-weight:500;display:block;overflow:hidden}.canvas-card-rename{z-index:2;border-radius:var(--pill);background:var(--surface-2);width:calc(100% + 8px);height:24px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;outline:0;margin:7px 0 -3px -8px;padding:0 8px;font-weight:500;display:block;position:relative}.canvas-thumb{aspect-ratio:16/10;border-radius:var(--radius-menu);background:var(--surface-2);box-shadow:var(--shadow-sm);transition:box-shadow .18s cubic-bezier(.22,1,.36,1);overflow:hidden}.canvas-card:hover .canvas-thumb,.canvas-card[data-popup-open] .canvas-thumb{box-shadow:var(--shadow)}.canvas-card:has(.canvas-card-more[data-popup-open]) .canvas-thumb{box-shadow:var(--shadow)}.canvas-card-link:focus-visible~.canvas-thumb{box-shadow:0 0 0 2px var(--accent)}.canvas-thumb img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .2s;display:block}.canvas-thumb img.loaded{opacity:1}.canvas-card-more,.canvas-card-heart{z-index:2;border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);place-items:center;display:grid;position:absolute;top:8px}.canvas-card-more{color:var(--secondary);opacity:0;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1),color .1s;right:8px;transform:scale(.8)}.canvas-card-more:hover,.canvas-card-more[data-popup-open]{color:var(--text)}.canvas-card:hover .canvas-card-more,.canvas-card-more[data-popup-open],.canvas-card-more:focus-visible{opacity:1;transform:none}.canvas-card:hover .canvas-card-more:active{transform:scale(.92)}.canvas-card-heart{color:oklch(58% .22 12);pointer-events:none;animation:.18s cubic-bezier(.22,1,.36,1) tool-pop;left:8px}@media (hover:none){.canvas-card-more{opacity:1;transform:none}}@media (width<=900px){.canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.canvas-grid{grid-template-columns:minmax(0,1fr)}}.canvas-menu-positioner{z-index:60}.canvas-menu{border-radius:var(--radius-menu);background:var(--island);min-width:160px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);transform-origin:var(--transform-origin);outline:0;padding:4px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1)}.canvas-menu[data-starting-style],.canvas-menu[data-ending-style]{opacity:0;transform:scale(.96)}.canvas-menu-item{border-radius:var(--pill);color:#fff;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:0;align-items:center;gap:8px;height:32px;padding:0 12px 0 7px;display:flex}.canvas-menu-item svg{stroke-width:2px;flex:none}.canvas-menu-item[data-highlighted]{background:var(--island-hover)}.canvas-menu-item.danger{color:oklch(72% .19 27)}.canvas-menu-item.danger[data-highlighted]{background:oklch(72% .19 27/.18)}.canvas-menu-separator{background:oklch(100% 0 0/.13);height:1px;margin:4px 8px}.canvas-menu-check{flex:none;display:flex}.canvas-menu-check[data-unchecked]{visibility:hidden}.shell .icon-button[data-popup-open]{background:var(--surface-pressed)}.shell .icon-button[data-popup-open] svg{opacity:1}.canvas-delete{z-index:71;border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);outline:0;flex-direction:column;gap:16px;padding:16px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-delete[data-starting-style],.canvas-delete[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}.canvas-delete-backdrop{transition:opacity .15s}.canvas-delete-backdrop[data-starting-style],.canvas-delete-backdrop[data-ending-style]{opacity:0}.canvas-delete-title{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:500;line-height:18px}.canvas-delete-error{color:var(--danger);margin:-8px 0 0;font-size:12px}.canvas-delete-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.canvas-delete-cancel{border-radius:var(--pill);height:32px;color:var(--secondary);padding:0 12px;font-weight:500;transition:background-color .1s}.canvas-delete-cancel:hover{background:var(--surface-hover)}.primary-button.canvas-delete-confirm{background:var(--danger);color:#fff}.home-foot{color:var(--muted);justify-content:center;gap:16px;padding:16px;font-size:12px;display:flex}.home-foot a{text-decoration:none;transition:color .1s}.home-foot a:hover{color:var(--text)}@media (width<=700px){.stage .toolbar{top:auto;bottom:calc(6px + env(safe-area-inset-bottom));left:6px;transform:none}.stage .top-left{max-width:max(72px, calc(100vw - var(--top-right-width,144px) - 18px))}}@media (width<=640px){.working-bubble,.notice{bottom:calc(50px + env(safe-area-inset-bottom))}.stage[data-tool=pencil] .zoom,.comments-panel{display:none}.comment-card,.composer{width:calc(100vw - 16px)!important;left:8px!important}.faces .face-button:nth-child(n+4){display:none}}.toolbar{transition:width .24s cubic-bezier(.22,1,.36,1)}.toolbar-clip{border-radius:var(--pill);width:100%;height:32px;overflow:hidden}.toolbar-row{align-items:center;gap:2px;width:max-content;height:32px;display:flex;position:relative}.tool-slider{border-radius:var(--pill);background:var(--signal-soft);pointer-events:none;height:32px;transition:transform .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.tool-slider[data-hidden]{opacity:0}.toolbar .tool{flex:none;position:relative}.toolbar .tool svg{stroke-width:2px}.toolbar .tool[aria-pressed=true]{color:var(--signal)}.toolbar .tool[aria-pressed=true] svg{opacity:1}.toolbar .tool.held{background:var(--signal-soft)}.toolbar .shell-divider{margin:0 4px}.pencil-tray{align-items:center;gap:6px;margin:0 6px 0 4px;display:flex}.swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--line);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);border-radius:50%;flex:none;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch:active{transform:scale(.9)}.swatch.closed{width:24px;height:24px}.swatch.current{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--signal)}.size-choice{border-radius:var(--pill);width:28px;height:28px;color:var(--secondary);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.size-choice:hover{background:var(--surface-hover)}.size-choice.current{background:var(--surface-hover);color:var(--signal)}.size-choice.closed{width:24px;height:24px}@keyframes tool-pop{0%{opacity:0;transform:scale(.8)}}.strokes{pointer-events:none;z-index:1000000;position:absolute;top:0;left:0;overflow:visible}.stroke-selection{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage[data-tool=move] .stroke-mine{pointer-events:auto;cursor:pointer}@media (prefers-reduced-motion:reduce){.toolbar,.tool-slider,.canvas-menu,.canvas-delete,.canvas-delete-backdrop,.canvas-card-more{transition:none}.canvas-card-heart,.swatch,.size-choice{animation:none}.working-bubble,.working-bubble[data-show]{transition:opacity .2s ease-out,visibility .2s;transform:translate(-50%)}.working-scribble path{stroke-dashoffset:0;animation:none}}
|
|
1
|
+
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:oklch(97% 0 0);--surface:oklch(100% 0 0);--surface-2:oklch(95.5% 0 0);--surface-hover:oklch(0% 0 0/.05);--surface-pressed:oklch(0% 0 0/.09);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--island:oklch(0% 0 0);--island-line:transparent;--island-hover:oklch(100% 0 0/.11);--text:oklch(0% 0 0);--secondary:oklch(42% 0 0);--muted:oklch(53% 0 0);--line:oklch(0% 0 0/.09);--line-subtle:oklch(0% 0 0/.06);--icon-muted:.58;--icon-secondary:.72;--frame-bg:oklch(100% 0 0);--accent:#06f;--selection:#0066ff1f;--guide:#06f9;--signal:#06f;--signal-soft:#0066ff21;--signal-soft-hover:#06f3;--danger:oklch(56% .21 27);--danger-soft:oklch(96% .025 25);--live:oklch(50% .14 150);--live-soft:oklch(96% .03 150);--backdrop:oklch(0% 0 0/.24);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.1), 0 14px 32px -8px oklch(0% 0 0/.3);--shadow-sm:0 0 0 1px var(--line);--pill:999px;--radius-menu:18px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:root[data-color-scheme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:oklch(17.8% 0 0);--surface:oklch(16% 0 0);--surface-2:oklch(22% 0 0);--surface-hover:oklch(100% 0 0/.07);--surface-pressed:oklch(100% 0 0/.11);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--island-line:oklch(100% 0 0/.13);--text:oklch(98.5% 0 0);--secondary:oklch(80% 0 0);--muted:oklch(66% 0 0);--line:oklch(100% 0 0/.09);--line-subtle:oklch(100% 0 0/.06);--icon-muted:.6;--icon-secondary:.74;--accent:#06f;--selection:#0066ff2e;--guide:#0066ffa6;--signal:#06f;--signal-soft:#06f3;--signal-soft-hover:#0066ff47;--danger:oklch(72% .18 25);--danger-soft:oklch(28% .06 25);--live:oklch(80% .15 150);--live-soft:oklch(28% .05 150);--backdrop:oklch(0% 0 0/.6);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.3), 0 14px 32px -8px oklch(0% 0 0/.5)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas);color:var(--text);font:400 13px/18px var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:default;background:0 0;border:0;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}a{color:inherit}.muted{color:var(--muted)}.spacer{flex:1}.full-message{height:100%;color:var(--muted);place-items:center;display:grid}.stage{background:var(--canvas);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:clip}.world{transform-origin:0 0;--inv:1;--zoom:1;width:0;height:0;position:absolute;top:0;left:0}.world[data-moving]{will-change:transform}.empty-canvas{color:var(--muted);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.frame{transition:opacity .12s ease-out;position:absolute;top:0;left:0}.frame-surface{box-shadow:0 0 0 calc(1px * var(--inv)) var(--line);position:absolute;inset:0;overflow:hidden}.frame-surface:before{content:"";inset:calc(1px * var(--inv));background:var(--frame-bg);position:absolute}.frame iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}[data-dragging] .frame iframe{pointer-events:none!important}.world[data-moving]:not(:has(.frame.focused)) .frame iframe{pointer-events:none!important}.frame-poster{object-fit:cover;object-position:top left;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.frame-shield{cursor:var(--stage-cursor,default);position:absolute;inset:0}.stage[data-role=guest][data-tool=move] .frame-shield{cursor:pointer}.frame.selected .frame-surface,.frame.interacting .frame-surface{box-shadow:0 0 0 calc(1.5px * var(--inv)) var(--accent)}.frame-title{width:calc(100% * var(--zoom));height:26px;transform:scale(var(--inv));transform-origin:0 100%;color:var(--muted);white-space:nowrap;align-items:flex-end;padding-bottom:6px;font-size:12px;line-height:16px;display:flex;position:absolute;bottom:100%;left:0}.frame-title span{text-overflow:ellipsis;overflow:hidden}.frame.selected .frame-title,.frame.interacting .frame-title{color:var(--accent)}.frame-title input{border-radius:var(--pill);background:var(--surface-2);width:100%;max-width:280px;height:20px;color:var(--text);-webkit-user-select:text;user-select:text;border:0;outline:0;margin-left:-4px;padding:0 4px;font-size:12px}.frame-actions{z-index:1;transform:scale(var(--inv)) translate(var(--step-x,0), var(--step-y,0));transform-origin:100% 100%;opacity:0;pointer-events:none;padding-bottom:10px;transition:opacity .12s ease-out;display:flex;position:absolute;bottom:100%;right:0}.frame-actions[data-visible]{opacity:1;pointer-events:auto}.frame-actions:has(:focus-visible){opacity:1;pointer-events:auto}@media (hover:hover){.frame:hover>.frame-actions{opacity:1;pointer-events:auto}}.frame-focus{border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);color:var(--text);cursor:default;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.frame-focus svg{opacity:var(--icon-muted);transition:opacity .1s}.frame-focus:hover{background:linear-gradient(var(--surface-hover) 0 0), var(--surface)}.frame-focus:hover svg{opacity:var(--icon-secondary)}.frame-focus:active{background:linear-gradient(var(--surface-pressed) 0 0), var(--surface)}.frame:hover>.frame-title,.frame.selected>.frame-title{padding-right:34px}.stage[data-tool=pencil] .frame:not(.focused) .frame-actions{display:none}.stage[data-focus] .frame:not(.focused){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s .12s}.stage[data-focus] .frame-surface{box-shadow:none}.frame-title{transition:opacity .12s ease-out}.stage[data-focus] .frame-title{opacity:0;pointer-events:none}.stage[data-returning] .frame,.stage[data-returning] .frame *{pointer-events:none!important}@media (prefers-reduced-motion:reduce){.frame,.stage[data-focus] .frame:not(.focused),.frame-actions{transition:none}}.guide{background:var(--guide);pointer-events:none;z-index:1000000;position:absolute}.marquee{background:var(--selection);box-shadow:0 0 0 calc(1px * var(--inv)) var(--accent);pointer-events:none;z-index:1000000;position:absolute}.cursors{pointer-events:none;z-index:40;position:absolute;inset:0;overflow:hidden}.cursor{will-change:transform;transition:opacity .18s ease-out;position:absolute;top:-4px;left:-3px}.cursor svg{filter:drop-shadow(0 1px 2px #00000040);display:block}.cursor-label{border-radius:var(--pill);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:180px;padding:3px 7px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:18px;left:16px;overflow:hidden;box-shadow:0 1px 3px #0003}.chat-anchor{z-index:41;will-change:transform;position:fixed;top:0;left:0}.chat-bubble{color:#fff;white-space:pre;border-radius:4px 16px 16px;padding:7px 12px;font-size:13px;font-weight:500;line-height:18px;transition:opacity .3s ease-out;position:absolute;top:14px;left:13px;box-shadow:0 1px 3px #0003}.cursor .chat-bubble{animation:.12s ease-out chat-in;top:18px;left:16px}.chat-bubble.fading{opacity:0}.chat-anchor .chat-bubble.fading{opacity:1}.chat-anchor .chat-bubble.fading :is(.chat-line,.chat-previous){opacity:0;transition:opacity .3s ease-out}.chat-previous{opacity:.7}.chat-line{align-items:center;display:flex}.chat-caret{background:#fff;flex:none;width:1.5px;height:16px;margin-left:1px;animation:1s step-end infinite chat-caret}.chat-placeholder{color:#ffffffb3}@keyframes chat-caret{50%{opacity:0}}@keyframes chat-in{0%{opacity:0;transform-origin:0 0;transform:scale(.96)}}.follow-ring{pointer-events:none;z-index:60;position:fixed;inset:0}.follow-tab{border-radius:var(--pill);color:#fff;white-space:nowrap;z-index:61;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12px;font-weight:500;display:flex;position:fixed;top:50px;left:50%;transform:translate(-50%)}.face{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;display:block}.face.more{background:var(--surface-2);width:24px;height:24px;color:var(--text);font-size:10px}.faces{flex-direction:row-reverse;align-items:center;padding:0 6px 0 10px;display:flex}.face-button{box-shadow:0 0 0 2px var(--surface);border-radius:50%;margin-left:-6px;transition:transform .1s ease-out;position:relative}.face-button:hover{z-index:2;transform:translateY(-1px)}.face-button.following{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--peer);z-index:2}.face-button .face{display:flex}.chrome{z-index:50;-webkit-user-select:none;user-select:none;cursor:default}.shell{border-radius:var(--pill);background:var(--surface);height:38px;box-shadow:var(--shadow-sm);align-items:center;gap:2px;padding:3px;display:flex;position:fixed}:root[data-color-scheme=dark] .stage :is(.shell,.frame-focus){--surface:oklch(25% 0 0);box-shadow:none}.shell-divider{background:var(--line);flex:none;width:1px;height:20px;margin:0 4px}.top-left,.top-right,.toolbar{top:calc(6px + env(safe-area-inset-top))}.top-left{max-width:calc(50vw - 48px);left:6px}.top-right{right:6px}.wordmark{color:var(--text);flex:none;padding-right:2px;display:inline-flex}.wordmark svg{width:auto;height:14px;display:block}.canvas-name{border-radius:var(--pill);text-overflow:ellipsis;white-space:nowrap;min-width:0;height:32px;color:var(--muted);text-align:left;padding:0 8px;line-height:32px;transition:background-color .1s,color .1s;display:block;overflow:hidden}button.canvas-name:hover{background:var(--surface-hover);color:var(--text)}.canvas-name-field{border-radius:var(--pill);background:var(--surface-hover);flex:0 auto;grid-template-columns:minmax(0,max-content);min-width:48px;height:32px;display:inline-grid}.canvas-name-field:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1/1;height:0;padding:0 8px;overflow:hidden}.canvas-name-input{-webkit-user-select:text;user-select:text;background:0 0;border:0;grid-area:1/1;width:0;min-width:100%;height:32px;padding:0 8px}.canvas-name-input:focus-visible,.frame-title input:focus-visible,.canvas-card-rename:focus-visible{outline:0}.canvas-name-input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.frame-title input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.canvas-card-rename::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.primary-button{border-radius:var(--pill);background:var(--solid);height:32px;color:var(--on-solid);flex:none;justify-content:center;align-items:center;padding:0 12px;font-weight:500;transition:opacity .1s;display:inline-flex}.primary-button:hover{opacity:.85}.primary-button:disabled{opacity:.4}.sign-in{border-radius:var(--pill);height:32px;color:var(--secondary);align-items:center;padding:0 10px;font-weight:500;text-decoration:none;transition:background-color .1s;display:inline-flex}.sign-in:hover{background:var(--surface-hover)}.icon-button{border-radius:var(--pill);width:28px;height:28px;color:var(--text);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:inline-flex}.icon-button svg,.tool svg{opacity:var(--icon-muted);transition:opacity .1s}.icon-button:hover{background:var(--surface-hover)}.icon-button:hover svg,.tool:hover svg{opacity:var(--icon-secondary)}.icon-button:active:not(:disabled),.tool:active{background:var(--surface-pressed)}.icon-button:disabled{opacity:.4}.icon-button.small{border-radius:var(--pill);width:24px;height:24px}.icon-button.on,.icon-button.danger-text{background:0 0}.icon-button.on{color:var(--signal)}.icon-button.danger-text{color:var(--danger)}.icon-button.on svg,.icon-button.danger-text svg{opacity:1}.shell .icon-button{border-radius:var(--pill);width:32px;height:32px}.link-button{font-size:12px;font-weight:500;text-decoration:none}.link-button:hover{text-decoration:underline}.link-button.quiet{color:var(--muted)}.link-button.danger{color:var(--danger)}.toolbar{left:50%;transform:translate(-50%)}.tool{border-radius:var(--pill);width:32px;height:32px;color:var(--text);justify-content:center;align-items:center;transition:background-color .1s,color .1s;display:flex}.tool:hover{background:var(--surface-hover)}.tool.on,.shell .icon-button.on{background:var(--signal-soft);color:var(--signal)}.tool.on:hover,.shell .icon-button.on:hover{background:var(--signal-soft-hover)}.tool.on svg,.tool.on:hover svg{opacity:1}.zoom{right:6px;bottom:calc(6px + env(safe-area-inset-bottom))}.zoom-value{border-radius:var(--pill);min-width:44px;height:32px;color:var(--secondary);text-align:center;font-variant-numeric:tabular-nums;font-size:12px;transition:background-color .1s}.zoom-value:hover{background:var(--surface-hover)}.notice{border-radius:var(--pill);background:var(--island);color:#fff;height:32px;box-shadow:inset 0 0 0 1px var(--island-line);white-space:nowrap;align-items:center;gap:6px;max-width:min(560px,100vw - 24px);padding:0 12px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.notice span{text-overflow:ellipsis;overflow:hidden}.working-bubble{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));color:var(--secondary);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;gap:8px;padding:0 14px 0 12px;font-size:12px;transition:opacity .15s ease-out,transform .15s ease-out,visibility .15s;transform:translate(-50%)translateY(8px)scale(.97)}.working-bubble[data-show]{opacity:1;visibility:visible;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility;transform:translate(-50%)}.working-scribble{flex:none}.working-scribble path{fill:none;stroke:var(--signal);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;animation:1.8s cubic-bezier(.65,0,.35,1) infinite paused scribble}.working-bubble[data-show] .working-scribble path{animation-play-state:running}@keyframes scribble{0%{stroke-dashoffset:1.1px}55%{stroke-dashoffset:0}to{stroke-dashoffset:-1.1px}}.reconnecting{border-radius:var(--pill);background:var(--surface);height:28px;box-shadow:var(--shadow-sm);color:var(--muted);padding:5px 10px;font-size:12px;position:fixed;top:50px;left:50%;transform:translate(-50%)}.share-group{align-items:center;gap:6px;display:flex;position:fixed}.share-group .shell{position:static}.share-group .shell:empty{display:none}.share-group .primary-button{height:38px}.share-split{flex:none;gap:1px;display:inline-flex}.share-split .primary-button:first-child{border-radius:var(--pill) 6px 6px var(--pill);gap:4px;min-width:84px;padding:0 10px 0 12px}.share-split .primary-button:not(:first-child){border-radius:6px var(--pill) var(--pill) 6px;width:28px;padding:0 3px 0 0}.share-sharing,.share-sharing:hover{background:var(--surface-2);color:var(--muted);opacity:1;position:relative;overflow:hidden}.share-sharing i{background:var(--surface-pressed);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-sharing span{position:relative}.share-uploading,.share-uploading:hover{background:linear-gradient(var(--signal-soft) 0 0), var(--surface);min-width:120px;color:var(--signal);opacity:1;position:relative;overflow:hidden}.share-uploading i{background:var(--signal-soft-hover);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-uploading span{position:relative}.share-note{max-width:240px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:12px;line-height:32px;overflow:hidden}.share-menu{width:212px}.share-menu .canvas-menu-item{padding:0 12px}.share-menu-link{color:oklch(100% 0 0/.6);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;padding:6px 12px;font-size:12px;overflow:hidden}.modal-backdrop{background:var(--backdrop);z-index:70;place-items:center;display:grid;position:fixed;inset:0}.name-prompt{border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);gap:6px;padding:8px;display:flex}.name-prompt input{border-radius:var(--pill);background:var(--surface-2);-webkit-user-select:text;user-select:text;border:0;flex:1;min-width:0;height:32px;padding:0 10px}.name-prompt .primary-button{border-radius:var(--pill)}.huddle-faces{align-items:center;display:inline-flex}.huddle-bar{align-items:center;gap:2px;padding-left:7px;display:inline-flex}.huddle-bar .huddle-faces{padding-right:5px}.huddle-face{--level:0;box-shadow:0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--level) * 2px) color-mix(in oklab, var(--live) calc(min(1, var(--level) * 10) * 100%), transparent);border-radius:50%;margin-left:-5px;transition:box-shadow .1s ease-out;display:inline-flex;position:relative}.huddle-faces .huddle-face:first-child{margin-left:0}.huddle-face.muted{box-shadow:0 0 0 2px var(--surface)}.huddle-face.muted:after{content:"";width:12px;height:12px;box-shadow:0 0 0 1.5px var(--surface);background:var(--danger) no-repeat center / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M8 8v3.5a4 4 0 0 0 6.5 3.1M16 11.5V6.5a4 4 0 0 0-7.6-1.7'/%3E%3C/svg%3E");border-radius:50%;position:absolute;bottom:-3px;right:-3px}.huddle-bar.joining .huddle-face{opacity:.55}.shell .huddle-leave,.shell .huddle-leave:hover{background:var(--danger-soft);color:var(--danger)}.huddle-leave svg,.huddle-leave:hover svg{opacity:1}.huddle-button.live{border-radius:var(--pill);height:32px;color:var(--live);align-items:center;gap:6px;padding:0 6px 0 8px;transition:background-color .1s;display:inline-flex}.huddle-button.live:hover{background:var(--surface-hover)}.huddle-button.live .huddle-faces .face{box-shadow:0 0 0 2px var(--surface);margin-left:-5px}.huddle-button.live .huddle-faces .face:first-child{margin-left:0}.huddle-notice{white-space:nowrap;align-items:center;gap:8px;height:32px;padding:0 0 0 6px;display:inline-flex}.huddle-notice b{font-weight:500}.huddle-notice .join{border-radius:var(--pill);background:var(--live-soft);height:32px;color:var(--live);align-items:center;padding:0 10px;font-weight:500;display:inline-flex}.huddle-error{height:32px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 8px;display:inline-flex}.comments-layer{pointer-events:none;z-index:30;position:absolute;inset:0;overflow:hidden}.comments-layer>*{pointer-events:auto}.comment-pin{background:var(--surface);width:32px;max-width:32px;height:32px;max-height:32px;box-shadow:var(--shadow);text-align:left;touch-action:none;border-radius:16px 16px 16px 0;align-items:flex-start;gap:8px;padding:4px;transition:max-width .1s ease-in-out,max-height .1s ease-in-out,padding .1s ease-in-out;display:flex;position:absolute;overflow:hidden;transform:translateY(-100%)}.comment-pin.new{background:var(--accent)}.comment-pin.active,.comment-pin.unread{box-shadow:0 0 0 2px var(--accent), var(--shadow)}.comment-pin.resolved .face{opacity:.45}.comment-pin-preview{opacity:0;flex-direction:column;gap:0;min-width:0;font-size:11px;line-height:16px;transition:opacity .1s ease-in-out;display:flex}.comment-pin-preview b{font-weight:500}.comment-pin-head{white-space:nowrap}.comment-pin-text{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comment-pin.expanded{z-index:5;width:240px;max-width:240px;height:auto;max-height:112px;padding:12px}.comment-pin.expanded .face{width:26px!important;height:26px!important}.comment-pin.expanded .comment-pin-preview{opacity:1;flex:1}.composer{background:var(--surface);box-shadow:0 0 0 1px var(--accent), var(--shadow);-webkit-user-select:text;user-select:text;cursor:auto;border-radius:13px;flex-direction:column;display:flex;position:absolute}.composer-input{align-items:flex-start;gap:8px;padding:8px 16px;display:flex}.composer-input textarea{flex:1;min-width:0}.composer textarea,.thread-reply textarea{resize:none;padding:0;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;width:100%;padding-block:calc(12px - .675em);font-size:13px;line-height:1.35;display:block;overflow-y:auto}.composer textarea::placeholder,.thread-reply textarea::placeholder{color:var(--muted)}.composer-actions{border-top:1px solid var(--line);align-items:center;height:40px;padding:4px 8px;display:none}.composer.has-text .composer-actions{display:flex}.composer:not(.has-text) .composer-input{padding-right:8px}.send-button{background:var(--solid);width:24px;height:24px;color:var(--on-solid);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.send-button:disabled{background:var(--surface-2);color:var(--muted)}.emoji-wrap{display:inline-flex;position:relative}.emoji-menu{border-radius:var(--radius-menu);background:var(--surface);box-shadow:var(--shadow);z-index:5;grid-template-columns:repeat(6,28px);gap:2px;padding:4px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.emoji-menu button{border-radius:var(--pill);width:28px;height:28px;font-size:16px}.emoji-menu button:hover{background:var(--surface-hover)}.comment-card{background:var(--surface);max-height:min(520px,100vh - 72px);box-shadow:var(--shadow);cursor:auto;border-radius:13px;flex-direction:column;font-size:11px;line-height:16px;display:flex;position:absolute}.thread-header{border-bottom:1px solid var(--line);flex:none;align-items:center;height:42px;padding:4px 8px 4px 16px;display:flex}.thread-title{flex:1;font-weight:550}.thread-actions{align-items:center;gap:4px;display:flex}.menu-wrap{display:inline-flex;position:relative}.menu{border-radius:var(--radius-menu);background:var(--island);min-width:140px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);z-index:6;padding:4px;position:absolute;top:calc(100% + 4px);right:0}.menu button{border-radius:var(--pill);color:#fff;text-align:left;white-space:nowrap;width:100%;height:28px;padding:0 8px;font-size:12px;display:block}.menu button:hover{background:var(--island-hover)}.thread-list{-webkit-user-select:text;user-select:text;flex:1;min-height:0;padding:8px 0 0;overflow-y:auto}.thread-comment{padding:4px 16px 8px;position:relative}.thread-comment-head{align-items:center;gap:8px;height:32px;display:flex}.thread-comment-name{font-size:13px;font-weight:500;line-height:24px}.thread-comment-time{font-size:13px;line-height:24px}.thread-comment-more{opacity:0;margin-left:auto;position:relative}.thread-comment:hover .thread-comment-more,.thread-comment-more:focus-within{opacity:1}.thread-comment-text{white-space:pre-wrap;word-break:break-word;padding-left:32px;font-size:13px;line-height:24px}.thread-reply{flex:none;align-items:flex-start;gap:8px;padding:8px 16px 16px;display:flex}.thread-reply>.face{margin-top:8px}.thread-reply-field{background:var(--surface-2);border-radius:8px;flex:1;align-items:flex-start;gap:8px;min-width:0;padding:8px 8px 8px 12px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0000}.thread-reply-field:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}.thread-reply-field textarea{flex:1;min-width:0}.comments-panel{border-radius:var(--radius-menu);background:var(--surface);width:248px;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:fixed;top:50px;bottom:50px;right:6px}.comments-panel-head{border-bottom:1px solid var(--line-subtle);flex:none;justify-content:space-between;align-items:center;height:42px;padding:0 12px 0 16px;font-size:12px;font-weight:500;display:flex}.resolved-toggle{color:var(--muted);align-items:center;gap:4px;font-weight:400;display:flex}.resolved-toggle input{accent-color:var(--accent);margin:0}.comments-panel-list{flex:1;min-height:0;padding:6px;overflow-y:auto}.comments-empty{margin:0;padding:10px;font-size:12px}.comments-panel-item{text-align:left;border-radius:8px;width:100%;padding:8px 10px;font-size:12px;line-height:16px;display:block}.comments-panel-item:hover{background:var(--surface-hover)}.comments-panel-item.active{background:var(--selection)}.comments-panel-item>span{display:block}.comments-panel-item b{font-weight:500}.comments-panel-face{width:24px;margin-bottom:4px;position:relative}.comments-panel-face .face{display:flex}.unread-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;position:absolute;top:-1px;right:-3px}.comments-panel-text{-webkit-line-clamp:3;word-break:break-word;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box!important}body:has(.home){overflow:auto}.home{flex-direction:column;min-height:100%;display:flex}.home-top .wordmark svg{height:18px}.home-top{justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.home-me{border-radius:50%;transition:box-shadow .1s;display:flex}.home-me:hover,.home-me[data-popup-open]{box-shadow:0 0 0 3px var(--surface-hover)}.home-main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 20px}.install{text-align:center;flex-direction:column;align-items:center;gap:20px;padding-top:22vh;display:flex}.install h1{letter-spacing:-.028em;margin:0;font-size:24px;font-weight:500;line-height:32px}.home-shared{margin-top:48px}.home-section-title{color:var(--secondary);margin:0 0 16px;font-size:13px;font-weight:500;line-height:20px}.canvas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none;display:grid}.canvas-card{min-width:0;display:block;position:relative}.canvas-card-link{z-index:1;border-radius:var(--radius-menu);outline:0;position:absolute;inset:0}.canvas-card-meta{font-size:12px;display:block}.canvas-card-name{text-overflow:ellipsis;white-space:nowrap;margin-top:10px;font-weight:500;display:block;overflow:hidden}.canvas-card-rename{z-index:2;border-radius:var(--pill);background:var(--surface-2);width:calc(100% + 8px);height:24px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;outline:0;margin:7px 0 -3px -8px;padding:0 8px;font-weight:500;display:block;position:relative}.canvas-thumb{aspect-ratio:16/10;border-radius:var(--radius-menu);background:var(--surface-2);box-shadow:var(--shadow-sm);transition:box-shadow .18s cubic-bezier(.22,1,.36,1);overflow:hidden}.canvas-card:hover .canvas-thumb,.canvas-card[data-popup-open] .canvas-thumb{box-shadow:var(--shadow)}.canvas-card:has(.canvas-card-more[data-popup-open]) .canvas-thumb{box-shadow:var(--shadow)}.canvas-card-link:focus-visible~.canvas-thumb{box-shadow:0 0 0 2px var(--accent)}.canvas-thumb img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .2s;display:block}.canvas-thumb img.loaded{opacity:1}.canvas-card-more,.canvas-card-heart{z-index:2;border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);place-items:center;display:grid;position:absolute;top:8px}.canvas-card-more{color:var(--secondary);opacity:0;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1),color .1s;right:8px;transform:scale(.8)}.canvas-card-more:hover,.canvas-card-more[data-popup-open]{color:var(--text)}.canvas-card:hover .canvas-card-more,.canvas-card-more[data-popup-open],.canvas-card-more:focus-visible{opacity:1;transform:none}.canvas-card:hover .canvas-card-more:active{transform:scale(.92)}.canvas-card-heart{color:oklch(58% .22 12);pointer-events:none;animation:.18s cubic-bezier(.22,1,.36,1) tool-pop;left:8px}@media (hover:none){.canvas-card-more{opacity:1;transform:none}}@media (width<=900px){.canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.canvas-grid{grid-template-columns:minmax(0,1fr)}}.canvas-menu-positioner{z-index:60}.canvas-menu{border-radius:var(--radius-menu);background:var(--island);min-width:160px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);transform-origin:var(--transform-origin);outline:0;padding:4px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1)}.canvas-menu[data-starting-style],.canvas-menu[data-ending-style]{opacity:0;transform:scale(.96)}.canvas-menu-item{border-radius:var(--pill);color:#fff;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:0;align-items:center;gap:8px;height:32px;padding:0 12px 0 7px;display:flex}.canvas-menu-item svg{stroke-width:2px;flex:none}.canvas-menu-item[data-highlighted]{background:var(--island-hover)}.canvas-menu-item.danger{color:oklch(72% .19 27)}.canvas-menu-item.danger[data-highlighted]{background:oklch(72% .19 27/.18)}.canvas-menu-separator{background:oklch(100% 0 0/.13);height:1px;margin:4px 8px}.canvas-menu-check{flex:none;display:flex}.canvas-menu-check[data-unchecked]{visibility:hidden}.canvas-menu-item.check-after{justify-content:space-between;gap:16px;padding:0 9px 0 12px}.theme-toggle{--shift:.56s cubic-bezier(.2, .8, .2, 1)}.theme-toggle .light-glyph{width:16px;height:16px}.shell .icon-button[data-popup-open]{background:var(--surface-pressed)}.shell .icon-button[data-popup-open] svg{opacity:1}.canvas-delete{z-index:71;border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);outline:0;flex-direction:column;gap:16px;padding:16px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-delete[data-starting-style],.canvas-delete[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}.canvas-delete-backdrop{transition:opacity .15s}.canvas-delete-backdrop[data-starting-style],.canvas-delete-backdrop[data-ending-style]{opacity:0}.canvas-delete-title{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:500;line-height:18px}.canvas-delete-error{color:var(--danger);margin:-8px 0 0;font-size:12px}.canvas-delete-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.canvas-delete-cancel{border-radius:var(--pill);height:32px;color:var(--secondary);padding:0 12px;font-weight:500;transition:background-color .1s}.canvas-delete-cancel:hover{background:var(--surface-hover)}.primary-button.canvas-delete-confirm{background:var(--danger);color:#fff}.home-foot{color:var(--muted);justify-content:center;gap:16px;padding:16px;font-size:12px;display:flex}.home-foot a{text-decoration:none;transition:color .1s}.home-foot a:hover{color:var(--text)}@media (width<=700px){.stage .toolbar{top:auto;bottom:calc(6px + env(safe-area-inset-bottom));left:6px;transform:none}.stage .top-left{max-width:max(72px, calc(100vw - var(--top-right-width,144px) - 18px))}}@media (width<=640px){.working-bubble,.notice{bottom:calc(50px + env(safe-area-inset-bottom))}.stage[data-tool=pencil] .zoom,.comments-panel{display:none}.comment-card,.composer{width:calc(100vw - 16px)!important;left:8px!important}.faces .face-button:nth-child(n+4){display:none}}.toolbar{transition:width .24s cubic-bezier(.22,1,.36,1)}.toolbar-clip{border-radius:var(--pill);width:100%;height:32px;overflow:hidden}.toolbar-row{align-items:center;gap:2px;width:max-content;height:32px;display:flex;position:relative}.tool-slider{border-radius:var(--pill);background:var(--signal-soft);pointer-events:none;height:32px;transition:transform .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.tool-slider[data-hidden]{opacity:0}.toolbar .tool{flex:none;position:relative}.toolbar .tool svg{stroke-width:2px}.toolbar .tool[aria-pressed=true]{color:var(--signal)}.toolbar .tool[aria-pressed=true] svg{opacity:1}.toolbar .tool.held{background:var(--signal-soft)}.toolbar .shell-divider{margin:0 4px}.pencil-tray{align-items:center;gap:6px;margin:0 6px 0 4px;display:flex}.swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--line);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);border-radius:50%;flex:none;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch:active{transform:scale(.9)}.swatch.closed{width:24px;height:24px}.swatch.current{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--signal)}.size-choice{border-radius:var(--pill);width:28px;height:28px;color:var(--secondary);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.size-choice:hover{background:var(--surface-hover)}.size-choice.current{background:var(--surface-hover);color:var(--signal)}.size-choice.closed{width:24px;height:24px}@keyframes tool-pop{0%{opacity:0;transform:scale(.8)}}.strokes{pointer-events:none;z-index:1000000;position:absolute;top:0;left:0;overflow:visible}.stroke-selection{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage[data-tool=move] .stroke-mine{pointer-events:auto;cursor:pointer}@media (prefers-reduced-motion:reduce){.toolbar,.tool-slider,.canvas-menu,.canvas-delete,.canvas-delete-backdrop,.canvas-card-more{transition:none}.canvas-card-heart,.swatch,.size-choice{animation:none}.working-bubble,.working-bubble[data-show]{transition:opacity .2s ease-out,visibility .2s;transform:translate(-50%)}.working-scribble path{stroke-dashoffset:0;animation:none}}.light-switch{--open:196px;--end:40px;flex:none;width:40px;height:40px;position:relative}.light-pill{border-radius:var(--pill);background:var(--surface-2);align-items:center;width:40px;height:40px;transition:width .32s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;right:0;overflow:hidden}.light-switch[data-open] .light-pill{width:var(--open)}.light-toggle{width:var(--end);border-radius:var(--pill);height:40px;color:var(--text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;right:0}.light-toggle:focus-visible,.light-track:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}.light-track{left:18px;right:var(--end);cursor:pointer;touch-action:none;opacity:0;transition:opacity .16s ease-out;position:absolute;top:0;bottom:0}.light-switch[data-open] .light-track{opacity:1;transition-delay:.1s}.light-track:before{content:"";background:linear-gradient(90deg,#f6c7a8,#fff 40%,#fbe3c4 62%,#e9a27c 75%,#8f7fa6 85%,#2a3755);border-radius:2px;height:4px;margin-top:-2px;position:absolute;top:50%;left:0;right:0;box-shadow:inset 0 0 0 .5px #00000024}.light-dot{top:50%;left:calc(var(--x) * 100%);background:var(--text);width:14px;height:14px;box-shadow:0 0 0 2px var(--lit), 0 1px 4px #0003;border-radius:50%;margin:-7px 0 0 -7px;transition:left .3s cubic-bezier(.2,.8,.2,1);position:absolute}.light-switch[data-dragging] .light-dot{transition:none}.light-switch[data-dragging] .light-track{cursor:grabbing}.light-glyph{width:18px;height:18px;overflow:visible}.light-glyph g,.light-glyph circle,.light-glyph path{transform-box:view-box;transform-origin:12px 12px;transition:transform var(--shift), opacity var(--shift)}@media (prefers-reduced-motion:reduce){.light-pill,.light-dot,.light-glyph *{transition:none}}
|