twombly 0.3.0 → 0.4.1

package/dist/ui/assets/rolldown-runtime-WkwZ5CU-.js

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t,t.exports),e=null),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,o)=>(o=n==null?{}:e(i(n)),s(r||!n||!n.__esModule||!a.call(n,`default`)?t(o,`default`,{value:n,enumerable:!0}):o,n));export{c as n,o as t};

package/dist/ui/index.html

@@ -4,15 +4,25 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="color-scheme" content="light dark" />
-    <title>Twombly</title>
+    <title>Twombly – A canvas for your agent’s explorations</title>
+    <meta name="description" content="Your agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link." />
+    <link rel="canonical" href="https://twombly.app/" />
     <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Twombly" />
+    <meta property="og:url" content="https://twombly.app/" />
     <meta property="og:title" content="Twombly" />
+    <meta property="og:description" content="A canvas for your agent’s explorations. Then share, comment, and huddle with one link." />
     <meta property="og:image" content="https://twombly.app/og.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
-    <script type="module" crossorigin src="/assets/index-B5osE1GC.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Dw-Z6e31.css">
+    <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Twombly","url":"https://twombly.app/","applicationCategory":"DesignApplication","operatingSystem":"macOS, Windows, Linux","description":"Your agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link.","publisher":{"@type":"Organization","name":"Materic, Inc."}}</script>
+    <script src="/theme.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dk5KUFe_.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-WkwZ5CU-.js">
+    <link rel="modulepreload" crossorigin href="/assets/agentPrompt-osLcSdHt.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-DHQst-JO.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/ui/legal.css

@@ -1,10 +1,34 @@
-:root { color-scheme: light dark; --text: #1e1e1e; --muted: #757575; --bg: #fff; }
-@media (prefers-color-scheme: dark) { :root { --text: #f5f5f5; --muted: #a0a0a0; --bg: #1e1e1e; } }
-body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 -apple-system, system-ui, sans-serif; }
-main { max-width: 620px; margin: 0 auto; padding: 48px 16px 96px; }
-h1 { font-size: 24px; font-weight: 600; margin: 32px 0 4px; }
-h2 { font-size: 14px; font-weight: 600; margin: 32px 0 4px; }
-a { color: inherit; }
-ul { padding-left: 20px; }
-.muted { color: var(--muted); }
-.wordmark { display: block; width: 75px; height: 18px; background: currentColor; mask: url(/twombly-wordmark.svg) no-repeat left center / contain; }
+/* Privacy and Terms. The app's tokens and the landing's type, on a plain page. theme.js sets the scheme. */
+:root { color-scheme: light; --bg: oklch(0.97 0 0); --text: oklch(0 0 0); --secondary: oklch(0.36 0 0); --muted: oklch(0.53 0 0); --line: oklch(0 0 0 / 9%); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+:root[data-color-scheme='dark'] { color-scheme: dark; --bg: oklch(0.178 0 0); --text: oklch(0.985 0 0); --secondary: oklch(0.8 0 0); --muted: oklch(0.66 0 0); --line: oklch(1 0 0 / 9%); }
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--secondary); font: 400 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
+a { color: inherit; text-decoration: none; }
+a:focus-visible { outline: 2px solid #0066FF; outline-offset: 2px; border-radius: 4px; }
+
+nav, main, footer { width: 100%; max-width: 640px; margin: 0 auto; padding-inline: 24px; }
+nav { padding-block: 20px; }
+.wordmark { display: block; width: 75px; height: 18px; background: var(--text); mask: url(/twombly-wordmark.svg) no-repeat left center / contain; }
+
+main { padding-block: 72px 24px; }
+h1 { margin: 0; color: var(--text); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
+.updated { margin: 12px 0 48px; color: var(--muted); font-size: 13px; }
+h2 { margin: 40px 0 8px; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
+p, ul { margin: 0 0 12px; }
+ul { padding-left: 18px; }
+li { margin-bottom: 6px; }
+li::marker { color: var(--muted); }
+strong { color: var(--text); font-weight: 500; }
+main a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 150ms; }
+main a:hover { text-decoration-color: currentColor; }
+
+footer { display: flex; gap: 24px; padding-block: 48px 32px; color: var(--muted); font-size: 13px; }
+footer a:hover, footer a[aria-current] { color: var(--text); }
+
+@media (max-width: 640px) {
+  nav, main, footer { padding-inline: 16px; }
+  main { padding-top: 40px; }
+  h1 { font-size: 32px; }
+  .updated { margin-bottom: 32px; }
+}
+code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }

package/dist/ui/privacy.html

@@ -5,34 +5,41 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="light dark">
 <title>Privacy – Twombly</title>
+<meta name="description" content="What Twombly keeps, why, and what you can do about it.">
+<link rel="canonical" href="https://twombly.app/privacy">
 <link rel="icon" type="image/png" href="/favicon.png">
 <link rel="stylesheet" href="/legal.css">
+<script src="/theme.js"></script>
 </head>
 <body>
+<nav><a class="wordmark" href="/" aria-label="Twombly"></a></nav>
 <main>
-<p><a class="wordmark" href="/" aria-label="Twombly"></a></p>
 <h1>Privacy</h1>
-<p class="muted">Updated November 4, 2026</p>
+<p class="updated">Updated November 5, 2026</p>
 <p>Twombly is run by Materic, Inc. This explains what we keep, why, and what you can do about it.</p>
 <h2>What we keep</h2>
 <ul>
-<li><strong>Your Google account:</strong> your name, email address, profile picture and account ID, from signing in with Google. We don't read your Gmail, contacts, files or anything else in your Google account.</li>
+<li><strong>Your account:</strong> your name, email address, profile picture and account ID, from signing in with Google. We don't read your email, contacts, files or anything else in your Google account.</li>
 <li><strong>Shared canvases:</strong> the files, frame positions, titles and comments on any canvas you share.</li>
 <li><strong>Comments:</strong> the text and the name you gave. If you comment as a guest, we set a cookie so your comments stay yours on that browser.</li>
-<li><strong>Service logs:</strong> basic request data such as IP address and browser, held by our hosting provider, for keeping the service running and stopping abuse.</li>
+<li><strong>Usage:</strong> what happens on Twombly, such as signing in, sharing, opening a shared canvas, commenting and joining a huddle. It's recorded against your account or guest ID, never your name, email or what's on a canvas.</li>
+<li><strong>Website visits:</strong> which page you opened, the site or campaign that sent you, your country, and whether you copied the agent prompt or pressed Sign in. It's counted with a code that changes every day, made from your IP address and browser, and no cookie is set.</li>
+<li><strong>Service logs:</strong> basic request data such as IP address and browser, for keeping the service running and stopping abuse.</li>
 </ul>
 <h2>What stays on your computer</h2>
-<p>A canvas you haven't shared stays on your computer. Nothing is uploaded until you click Share. Signing in saves a token in your Mac's Keychain, or in a private file on other systems, so you stay signed in.</p>
+<p>A canvas you haven't shared stays on your computer. Nothing is uploaded until you click Share. Signing in saves a private token on your computer so you stay signed in.</p>
+<p>Once a day the Twombly tool sends a few counts, such as how many canvases and frames were made, with a random ID for the machine and the tool's version. When something breaks it sends an error report, with your home folder removed from any file path. Neither includes names, titles, files or comments. Run <code>twombly usage off</code> to stop both.</p>
 <h2>Shared links are public</h2>
 <p>Anyone with a shared link can see the canvas, its comments and who is present, and can join its huddle. Links are hard to guess and we ask search engines not to index them, but they aren't private. Don't share anything you wouldn't want the person you send it to, or anyone they send it to, to see.</p>
 <h2>Huddles</h2>
-<p>Huddle audio passes through Cloudflare to reach the other people in it. We don't record or store it.</p>
+<p>Huddle audio passes through our hosting provider to reach the other people in it. We don't record or store it.</p>
 <h2>Who else handles data</h2>
-<p>We use Cloudflare for hosting, storage and huddle audio, and Google for sign-in. We don't sell your data, use it for advertising, or use your canvases to train AI models.</p>
+<p>A hosting provider stores and serves Twombly and carries huddle audio, an analytics provider holds usage counts and error reports, and Google handles sign-in. We don't sell your data, use it for advertising, or use your canvases to train AI models.</p>
 <h2>Deleting things</h2>
 <p>Stop sharing a canvas, or delete it from your list, and its files and comments are deleted from our storage straight away. Backups and caches may take up to 30 days to clear. To delete your account, email us.</p>
 <h2>Contact</h2>
 <p>Email <a href="mailto:jaytel@materic.inc">jaytel@materic.inc</a> with any question, or to report a canvas that shouldn't be online.</p>
 </main>
+<footer><a href="/privacy" aria-current="page">Privacy</a><a href="/terms">Terms</a></footer>
 </body>
 </html>

package/dist/ui/sitemap.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://twombly.app/</loc></url>
+  <url><loc>https://twombly.app/privacy</loc></url>
+  <url><loc>https://twombly.app/terms</loc></url>
+</urlset>

package/dist/ui/terms.html

@@ -5,14 +5,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="light dark">
 <title>Terms – Twombly</title>
+<meta name="description" content="The terms for using Twombly.">
+<link rel="canonical" href="https://twombly.app/terms">
 <link rel="icon" type="image/png" href="/favicon.png">
 <link rel="stylesheet" href="/legal.css">
+<script src="/theme.js"></script>
 </head>
 <body>
+<nav><a class="wordmark" href="/" aria-label="Twombly"></a></nav>
 <main>
-<p><a class="wordmark" href="/" aria-label="Twombly"></a></p>
 <h1>Terms</h1>
-<p class="muted">Updated November 4, 2026</p>
+<p class="updated">Updated November 4, 2026</p>
 <p>These terms are between you and Materic, Inc. Using Twombly means you agree to them.</p>
 <h2>What you share</h2>
 <p>Your work stays yours. You give us permission to store it and show it to anyone with its link, only so the service can work. You're responsible for what you share, including having the rights to any code, images, fonts and data in it.</p>
@@ -32,5 +35,6 @@
 <h2>Contact</h2>
 <p>Email <a href="mailto:jaytel@materic.inc">jaytel@materic.inc</a>.</p>
 </main>
+<footer><a href="/privacy">Privacy</a><a href="/terms" aria-current="page">Terms</a></footer>
 </body>
 </html>

package/dist/ui/theme.js

@@ -0,0 +1,6 @@
+// Sets light or dark before the first paint. A file of its own because the interface's security rules refuse inline scripts. store.ts takes over from here.
+{
+  let theme = null;
+  try { theme = localStorage.getItem('twombly:theme'); } catch {}
+  document.documentElement.dataset.colorScheme = theme === 'light' || theme === 'dark' ? theme : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twombly",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Put design explorations on a shared canvas. Built for agents.",
   "type": "module",
   "bin": { "twombly": "dist/cli.js" },

package/dist/ui/assets/Landing-BKJA0CJt.js

@@ -1,111 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-DyrNB5Ea.js","assets/index-B5osE1GC.js","assets/index-Dw-Z6e31.css","assets/LandingStage-CqdIuQDE.css"])))=>i.map(i=>d[i]);
-import{_ as e,a as t,b as n,c as r,d as i,f as a,g as o,h as s,i as c,l,m as u,n as d,o as f,p,r as m,s as h,t as g,v as _,x as ee}from"./index-B5osE1GC.js";var v=ee(n(),1),y=e();function b(){return(0,y.jsxs)(`span`,{className:`landing-marks`,"aria-hidden":`true`,children:[(0,y.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,y.jsx)(`path`,{d:`m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z`})}),(0,y.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,y.jsx)(`path`,{d:`M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z`})})]})}var x=`twombly:show-copied`,S=.41960295031576633,C=.15,w=.2765523188064277,T=.5783555327868779,E=-44*Math.PI/180,D={x:Math.sin(E),y:-Math.cos(E)},O=(e,t=0,n=1)=>Math.min(n,Math.max(t,e)),k=(e,t,n)=>({x:e.x+t.x*n,y:e.y+t.y*n}),A=e=>Math.hypot(e.x,e.y),j=e=>{let t=A(e);return t<.001?{x:1,y:0}:{x:e.x/t,y:e.y/t}},M=(e,t,n,r)=>({start:e,outgoing:t,incoming:n,end:r});function N(e,t){let n=1-t;return{x:n**3*e.start.x+3*n*n*t*e.outgoing.x+3*n*t*t*e.incoming.x+t**3*e.end.x,y:n**3*e.start.y+3*n*n*t*e.outgoing.y+3*n*t*t*e.incoming.y+t**3*e.end.y}}function P(e,t){let n=O(t),r=Math.min(e.curves.length-1,Math.floor(n*e.curves.length)),i=n===1?1:n*e.curves.length-r,a=e.curves[r],o=1-i,s={x:3*(o*o*(a.outgoing.x-a.start.x)+2*o*i*(a.incoming.x-a.outgoing.x)+i*i*(a.end.x-a.incoming.x))*e.curves.length,y:3*(o*o*(a.outgoing.y-a.start.y)+2*o*i*(a.incoming.y-a.outgoing.y)+i*i*(a.end.y-a.incoming.y))*e.curves.length},c=j(s),l=1-(1-O((n-.99)/.01))**3,u=j({x:c.x*(1-l)+D.x*l,y:c.y*(1-l)+D.y*l});return{point:N(a,i),derivative:s,heading:u}}function F(e,t){let n=e=>!t||e.x>=t.x+20&&e.x<t.x+t.width-20&&e.y>=t.y+20&&e.y<t.y+t.height-20,r=e[0].start,i,a=0,o=0,s=0,c=0,l=n(r);for(let t of e)for(let e=1;e<=24;e++){let u=N(t,e/24),d=u.x-r.x,f=u.y-r.y,p=Math.hypot(d,f);if(a+=p,l&&=n(u),p>.01){let e=Math.atan2(f,d);if(i!==void 0){let t=Math.atan2(Math.sin(e-i),Math.cos(e-i));o+=t*t,s+=Math.abs(t),c=Math.max(c,Math.abs(t))}i=e}r=u}return{length:a,turnEnergy:o,totalTurn:s,sharpestTurn:c,inBounds:l}}function te(e,t,n){let r={x:t.x-e.x,y:t.y-e.y},i=A(r),a=j(r),o=[];if(i<=10)o.push([M(e,k(e,r,1/3),k(e,r,2/3),t)]);else{let n=Math.min(i*S,i*.9,640),r=Math.min(i*C,i*.9,640),s=k(e,D,n),c=k(t,D,-r);o.push([M(e,s,c,t)]),o.push([M(e,k(e,D,n*.65),k(t,D,-r*.65),t)]);let l=D.x*a.y-D.y*a.x<0?-1:1,u={x:a.y*l,y:-a.x*l},d=k({x:(e.x+t.x)/2,y:(e.y+t.y)/2},D,n*.16),f=Math.min(i*w,520),p=Math.min(i*T,440);for(let n of[.55,.8,1.05])for(let r of[.65,1,1.35])for(let i of[1,-1]){let l=k(d,u,f*n*i);o.push([M(e,s,k(l,a,-p*r),l),M(l,k(l,a,p*r),c,t)])}}let s=O((-.08-D.x*a.x-D.y*a.y)/.92);return o.map(e=>{let t=F(e,n),r=Math.max(0,t.length/Math.max(1,i)-1),a=e.length>1,o=t.length+320*r+140*t.turnEnergy+180*t.sharpestTurn+18*t.totalTurn+(a?45:0)+90*s,c=O(.42*O(r/.55)+.38*O(t.totalTurn/(1.4*Math.PI))+.2*O(t.turnEnergy/1.25))*.12,l=O((a?.9:1)*.9*((a?.04:0)+.28*s+.22*O((t.length-180)/760)+.42+c),.12,2.2);return{curves:e,...t,score:o,response:l}})}function I(e,t,n){let r=te(e,t,n),i=r.filter(e=>e.inBounds);return(i.length?i:r).reduce((e,t)=>t.score<e.score?t:e)}var L=(e=0)=>({value:e,velocity:0}),R=Math.atan2(D.y,D.x)*180/Math.PI,z=1600;function B(e,t,n,r,i){let a=2*Math.PI/n,o=r*a,s=a*Math.sqrt(1-r*r),c=e.value-t,l=(e.velocity+o*c)/s,u=Math.cos(s*i),d=Math.sin(s*i),f=Math.exp(-o*i);e.value=t+f*(c*u+l*d),e.velocity=f*(-o*(c*u+l*d)+s*(-c*d+l*u))}function V(e,t){return e+Math.atan2(Math.sin((t-e)*Math.PI/180),Math.cos((t-e)*Math.PI/180))*180/Math.PI}var ne=class{position;velocity={x:0,y:0};kind=`idle`;target;path;pathScale=1;progress=L();horizontal;vertical;axis=L();baseRotation=L();lean=L();stretch=L();heading=0;constructor(e){this.position={...e},this.target={...e},this.horizontal=L(e.x),this.vertical=L(e.y)}moveTo(e,t,n=!1){if(!Number.isFinite(e.x)||!Number.isFinite(e.y))return;if(this.target={...e},n){this.jumpTo(e);return}this.pathScale=Math.max(.001,t.z);let r=Math.hypot(e.x-this.position.x,e.y-this.position.y)*this.pathScale;if(r<.01&&Math.hypot(this.velocity.x,this.velocity.y)*this.pathScale<12){this.jumpTo(e);return}if(this.horizontal={value:this.position.x,velocity:this.velocity.x},this.vertical={value:this.position.y,velocity:this.velocity.y},this.kind=r<=196?`scoot`:`curve`,this.kind===`scoot`){this.path=void 0;return}let i=e=>({x:e.x*this.pathScale,y:e.y*this.pathScale});this.path=I(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=P(this.path,0),o=a.x**2+a.y**2,s=o?(this.velocity.x*a.x+this.velocity.y*a.y)*this.pathScale/o:0;this.progress={value:0,velocity:O(s,0,5/this.path.response)}}jumpTo(e){Object.assign(this.position,e),this.target={...e},this.velocity.x=this.velocity.y=0,this.horizontal=L(e.x),this.vertical=L(e.y),this.axis=L(),this.baseRotation=L(),this.lean=L(),this.stretch=L(),this.progress=L(),this.path=void 0,this.heading=0,this.kind=`idle`}translateBy(e,t){if(Number.isFinite(e)&&Number.isFinite(t)&&(e||t)&&(this.position.x+=e,this.position.y+=t,this.target.x+=e,this.target.y+=t,this.horizontal.value+=e,this.vertical.value+=t,this.path)){let n=n=>({x:n.x+e*this.pathScale,y:n.y+t*this.pathScale});this.path.curves=this.path.curves.map(e=>({start:n(e.start),outgoing:n(e.outgoing),incoming:n(e.incoming),end:n(e.end)}))}}advance(e,t=this.pathScale){if(!(e>0)||!Number.isFinite(e)||this.kind===`idle`&&this.deformationSettled())return!1;if(this.kind===`scoot`)B(this.horizontal,this.target.x,.24,.84,e),B(this.vertical,this.target.y,.24,.84,e),this.position.x=this.horizontal.value,this.position.y=this.vertical.value,this.velocity.x=this.horizontal.velocity,this.velocity.y=this.vertical.velocity;else if(this.kind===`curve`&&this.path){B(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=P(this.path,this.progress.value);this.position.x=t.x/this.pathScale,this.position.y=t.y/this.pathScale;let i=this.progress.value>=1?0:this.progress.velocity/this.pathScale;this.velocity.x=n.x*i,this.velocity.y=n.y*i,this.heading=V(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-R)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?O(n/z):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;B(this.axis,V(this.axis.value,i),.07,.82,e),B(this.baseRotation,this.kind===`curve`?this.heading:V(this.baseRotation.value,0),.09,.86,e),B(this.stretch,r,.095,.72,e);let a=n>12?O(this.velocity.x*t/n*76*r,-76,76):0;return B(this.lean,a,.055,.76,e),Math.hypot(this.target.x-this.position.x,this.target.y-this.position.y)*t<.05&&n<12&&(this.kind!==`curve`||Math.abs(this.progress.value-1)<.001)&&(Object.assign(this.position,this.target),this.velocity.x=this.velocity.y=0,this.kind=`idle`,this.path=void 0),this.kind===`idle`&&this.deformationSettled()&&(this.baseRotation=L(),this.lean=L(),this.stretch=L()),!0}deformationSettled(){let e=V(0,this.baseRotation.value);return Math.abs(e)<.01&&Math.abs(this.baseRotation.velocity)<.1&&Math.abs(this.lean.value)<.01&&Math.abs(this.lean.velocity)<.1&&Math.abs(this.stretch.value)<1e-4&&Math.abs(this.stretch.velocity)<.001}get bodyTransform(){let e=O(this.stretch.value,0,1);return`rotate(${this.baseRotation.value+this.lean.value}deg) rotate(${this.axis.value}deg) scale(${1+.38*e}, ${1-.18*e}) rotate(${-this.axis.value}deg)`}},re={wide:{width:1280,height:720,columns:3},narrow:{width:640,height:760,columns:2}},H=440,U=340,W={top:84,right:64,bottom:64,left:64},G=[1,2,3,4,5,6],K=[{name:`Avery Kim`,color:`#3b82f6`},{name:`Mo Rivera`,color:`#10b981`},{name:`Jules Sato`,color:`#f59e0b`}],ie=[[`AK`,`#3b82f6`,`Avery Kim`,`commented on Checkout redesign`,`2m`],[`MR`,`#10b981`,`Mo Rivera`,`approved your pull request`,`14m`],[`JS`,`#f59e0b`,`Jules Sato`,`shared Q4 roadmap with you`,`1h`],[`TN`,`#ef4444`,`Tess Novak`,`mentioned you in Launch plan`,`3h`],[`RO`,`#8b5cf6`,`Rae Okafor`,`invited you to Brand review`,`5h`],[`LB`,`#0ea5e9`,`Lee Brandt`,`resolved your comment`,`1d`],[`NH`,`#ec4899`,`Noor Haddad`,`added you to Onboarding`,`2d`],[`IC`,`#14b8a6`,`Ines Costa`,`replied to your comment`,`2d`],[`DV`,`#f97316`,`Dev Varma`,`shared Pricing page with you`,`3d`]],ae=`#e5484d`,oe=5,se=_(.45,.28),ce=_(1.1,0),le=_(.3,0),q=(e,t)=>({x:e%t*496,y:Math.floor(e/t)*412});function ue(e,t,n){let r=.5,i=e-.5,a=t-.5;return`M ${r+n} ${r} H ${i-n} A ${n} ${n} 0 0 1 ${i} ${r+n} V ${a-n} A ${n} ${n} 0 0 1 ${i-n} ${a} H ${r+n} A ${n} ${n} 0 0 1 ${r} ${a-n} V ${r+n} A ${n} ${n} 0 0 1 ${r+n} ${r} Z`}function de({version:e,rows:t=4}){return(0,y.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,y.jsx)(`h1`,{children:`Notifications`}),ie.slice(0,t).map(([e,t,n,r,i])=>(0,y.jsxs)(`div`,{className:`ld-n`,children:[(0,y.jsx)(`span`,{className:`ld-av`,style:{background:t},children:e}),(0,y.jsxs)(`div`,{children:[(0,y.jsx)(`div`,{className:`ld-t`,children:n}),(0,y.jsx)(`div`,{className:`ld-d`,children:r})]}),(0,y.jsx)(`span`,{className:`ld-w`,children:i})]},n))]})}function J({color:e,name:n,id:r}){return(0,y.jsxs)(`div`,{className:`cursor ld-cursor`,"data-cursor":r,style:{color:e},children:[(0,y.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,children:(0,y.jsx)(`path`,{d:t,fill:`currentColor`,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),n&&(0,y.jsx)(`span`,{className:`cursor-label`,style:{background:e},children:n})]})}function fe({id:e,person:t,text:n}){let{name:r,color:i}=K[t];return(0,y.jsxs)(`div`,{className:`comment-pin ld-pin`,"data-pin":e,children:[(0,y.jsx)(o,{name:r,picture:null,color:i}),(0,y.jsxs)(`span`,{className:`comment-pin-preview`,children:[(0,y.jsxs)(`span`,{className:`comment-pin-head`,children:[(0,y.jsx)(`b`,{children:r}),` `,(0,y.jsx)(`span`,{className:`muted`,children:`now`})]}),(0,y.jsx)(`span`,{className:`comment-pin-text`,children:n})]})]})}function pe(e,t){let n=re[t],r=t=>e.querySelector(t),i=r(`.ld-world`),a=r(`[data-zoom]`),o=r(`.ld-scene`),s=r(`.faces`),c=r(`.share-button`),l=r(`.share-sharing`),u=r(`.share-sharing i`),d=r(`.share-split`),f=r(`.ld-strokes path`),p=[...e.querySelectorAll(`.ld-frame`)],h=[...s.children],g={a:r(`[data-pin="a"]`),b:r(`[data-pin="b"]`)},ee={width:n.width,height:n.height,x:0,y:0,z:1},v=new Set,y=0,b=0,x=!1,S=e=>{y=requestAnimationFrame(S);let t=Math.min(50,e-b);b=e;for(let e of v)e(t)||v.delete(e)},C=e=>{e!==x&&(x=e,cancelAnimationFrame(y),e&&(b=performance.now(),y=requestAnimationFrame(S)))},w=e=>new Promise(t=>{let n=e;v.add(e=>(n-=e,n>0||(t(),!1)))}),T=(e,t)=>new Promise(n=>{let r=0;v.add(i=>(r+=i,r<e.ms?(t(e.at(r)),!0):(t(1),n(),!1)))}),E=(e,t)=>T({ms:e,at:t=>t/e,css:``},t),D={x:0,y:0,z:1},O=e=>{D=e,i.style.transform=`translate(${e.x}px, ${e.y}px) scale(${e.z})`,i.style.setProperty(`--inv`,String(1/e.z)),i.style.setProperty(`--zoom`,String(e.z)),a.textContent=`${Math.round(e.z*100)}%`},k=e=>{let t=G.slice(0,e).map((e,t)=>q(t,n.columns)),r=Math.max(...t.map(e=>e.x))+H,i=Math.max(...t.map(e=>e.y))+U,a={width:n.width-W.left-W.right,height:n.height-W.top-W.bottom},o=Math.min(1,a.width/r,a.height/i);return{z:o,x:W.left+(a.width-r*o)/2,y:W.top+(a.height-i*o)/2}},A=e=>{let t=D;return T(ce,n=>O({x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n,z:t.z+(e.z-t.z)*n}))},j=(e,t,r,i=k(G.length))=>{let a=q(e-1,n.columns);return{x:i.x+(a.x+H*t)*i.z,y:i.y+(a.y+U*r)*i.z}},M=e=>{let t=r(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),i=new ne({x:0,y:0}),a=()=>{t.style.transform=`translate3d(${i.position.x}px, ${i.position.y}px, 0)`,n.style.transform=i.bodyTransform};return v.add(e=>(i.advance(e/1e3,1),a(),!0)),{el:t,place(e){i.jumpTo(e),t.style.opacity=`1`,a()},hide(){t.style.opacity=`0`},move(e){return i.moveTo(e,ee),new Promise(e=>v.add(()=>i.kind!==`idle`||(e(),!1)))}}},N=M(`you`),P=[M(`0`),M(`1`),M(`2`)],F=e=>T(se,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),te=async e=>{await E(90,t=>{e.style.scale=String(1-.05*t)}),await E(120,t=>{e.style.scale=String(.95+.05*t)})},I=e=>(s.style.display=``,e.style.display=``,F(e)),L=(e,t)=>{e.style.left=`${t.x}px`,e.style.top=`${t.y}px`},R=()=>{let e=j(3,.5,.5),t=k(G.length),n=H*t.z*.56,r=U*t.z*.58;return Array.from({length:110},(t,i)=>{let a=i/109,o=-2.4+a*1.85*Math.PI*2,s=1+.06*Math.sin(a*9)+a*.05;return[e.x+Math.cos(o)*n*s+a*8,e.y+Math.sin(o)*r*s-a*6,.5]})},z=()=>{for(let e of p)e.style.opacity=`0`,e.style.scale=`0.6`;for(let e of h)e.style.opacity=`0`,e.style.scale=`0.6`,e.style.display=`none`;s.style.display=`none`;for(let e of Object.values(g))e.style.opacity=`0`,e.style.scale=`0.6`,e.classList.remove(`expanded`);for(let e of[N,...P])e.hide();c.style.display=``,l.style.display=`none`,d.style.display=`none`,f.setAttribute(`d`,``),o.style.opacity=`1`,s.style.opacity=`1`,O(k(1))},B=()=>{for(let e of[...p,...h,...Object.values(g)])e.style.opacity=`1`,e.style.scale=`1`;for(let e of h)e.style.display=``;s.style.display=``,L(g.a,j(2,.72,.34)),L(g.b,j(5,.3,.36)),g.b.classList.add(`expanded`),O(k(G.length)),f.setAttribute(`d`,m({points:R(),size:oe})),P[0].place(j(2,.34,.8)),P[1].place(j(5,.86,.7)),P[2].place(j(3,.92,.9))},V=async()=>{let t=1500;for(;;){z(),await w(t),t=500;for(let e=0;e<p.length;e++)F(p[e]),e&&A(k(e+1)),await w(e?720:1e3);await w(700),N.place({x:n.width*.74,y:n.height+30});let r=e.getBoundingClientRect(),i=r.width/n.width;await N.move((e=>{let t=e.getBoundingClientRect();return{x:(t.left+t.width/2-r.left)/i,y:(t.top+t.height/2-r.top)/i}})(c)),await te(c),c.style.display=`none`,l.style.display=``,u.style.width=`6%`,await T(_(1,0),e=>{u.style.width=`${6+94*e}%`}),l.style.display=`none`,d.style.display=``,d.dataset.copied=``,N.move(j(1,.8,1.08)),await w(1e3),delete d.dataset.copied,P[0].place({x:-30,y:n.height*.42}),I(h[2]),await P[0].move(j(2,.72,.34)),P[1].place({x:n.width*.3,y:n.height+30}),I(h[1]),L(g.a,j(2,.72,.34)),F(g.a),P[0].move(j(2,.34,.8)),await P[1].move(j(5,.3,.36)),L(g.b,j(5,.3,.36)),await F(g.b),await w(250),g.b.classList.add(`expanded`),P[1].move(j(5,.86,.7));let a=R();P[2].place({x:n.width+30,y:n.height*.3}),I(h[0]),await P[2].move({x:a[0][0],y:a[0][1]}),await E(1500,e=>{let t=Math.max(2,Math.ceil(e*a.length));f.setAttribute(`d`,m({points:a.slice(0,t),size:oe}));let[n,r]=a[t-1];P[2].place({x:n,y:r})}),await w(400),P[2].move(j(3,.92,.9)),await w(1400),P[0].move(j(1,.5,.42)),await w(1100),P[1].move(j(4,.72,.62)),await w(2200),await E(420,e=>{o.style.opacity=String(1-e),s.style.opacity=String(1-e)}),await T(le,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return z(),B(),()=>{};V();let K=new IntersectionObserver(([e])=>C(e.isIntersecting));return K.observe(e),()=>{K.disconnect(),C(!1),v.clear()}}function me(){let e=(0,v.useRef)(null),t=(0,v.useRef)(null),[n,c]=(0,v.useState)(0),d=n&&n<720?`narrow`:`wide`,m=re[d];(0,v.useLayoutEffect)(()=>{let t=new ResizeObserver(([e])=>c(e.contentRect.width));return t.observe(e.current),()=>t.disconnect()},[]),(0,v.useEffect)(()=>{if(n)return pe(t.current,d)},[d,n>0]);let g=n/m.width,_=25*g,[ee]=(0,v.useState)(()=>window.innerWidth*1.15/Math.min(1200,window.innerWidth-32)),b=(0,v.useMemo)(()=>G.map((e,t)=>q(t,m.columns)),[m.columns]);return(0,y.jsxs)(`div`,{ref:e,className:`ld-shell`,style:{height:n?m.height*g:void 0,borderRadius:_,"--ld-from":ee},"aria-hidden":`true`,children:[n>0&&(0,y.jsx)(`svg`,{className:`ld-draw`,children:(0,y.jsx)(`path`,{d:ue(n,m.height*g,_-.5),pathLength:`1`})}),n>0&&(0,y.jsxs)(`div`,{ref:t,className:`ld-stage ld-${d}`,style:{width:m.width,height:m.height,transform:`scale(${g})`},children:[(0,y.jsxs)(`div`,{className:`ld-scene`,children:[(0,y.jsx)(`div`,{className:`world ld-world`,children:G.map((e,t)=>(0,y.jsxs)(`div`,{className:`frame ld-frame`,style:{left:b[t].x,top:b[t].y,width:H,height:U},children:[(0,y.jsx)(`div`,{className:`frame-title`,children:(0,y.jsxs)(`span`,{children:[`V`,e]})}),(0,y.jsx)(`div`,{className:`frame-surface`,children:(0,y.jsx)(de,{version:e})})]},e))}),(0,y.jsx)(`svg`,{className:`ld-strokes`,width:m.width,height:m.height,children:(0,y.jsx)(`path`,{fill:ae})}),(0,y.jsx)(fe,{id:`a`,person:0,text:``}),(0,y.jsx)(fe,{id:`b`,person:1,text:`Can we try this one darker?`})]}),(0,y.jsx)(`div`,{className:`chrome shell top-left ld-rise`,children:(0,y.jsx)(`span`,{className:`canvas-name`,children:`Notification Explorations`})}),(0,y.jsx)(`div`,{className:`chrome shell toolbar ld-rise`,children:(0,y.jsx)(`div`,{className:`toolbar-clip`,children:(0,y.jsxs)(`div`,{className:`toolbar-row`,children:[(0,y.jsx)(`span`,{className:`tool-slider`,style:{width:50}}),(0,y.jsxs)(`span`,{className:`tool mode-tool`,"aria-pressed":`true`,children:[(0,y.jsx)(a,{size:18}),(0,y.jsx)(`span`,{className:`mode-chevron`,children:(0,y.jsx)(h,{size:12})})]}),(0,y.jsx)(`span`,{className:`tool`,children:(0,y.jsx)(l,{size:18})}),(0,y.jsx)(`span`,{className:`tool`,children:(0,y.jsx)(r,{size:18})}),(0,y.jsx)(`span`,{className:`shell-divider`}),(0,y.jsx)(`span`,{className:`tool`,children:(0,y.jsx)(p,{size:18})})]})})}),(0,y.jsxs)(`div`,{className:`chrome shell top-right ld-rise`,children:[(0,y.jsx)(`div`,{className:`faces`,children:[2,1,0].map(e=>(0,y.jsx)(`span`,{className:`face-button`,children:(0,y.jsx)(o,{name:K[e].name,picture:null,color:K[e].color})},e))}),(0,y.jsx)(`span`,{className:`primary-button share-button`,children:`Share`}),(0,y.jsxs)(`span`,{className:`primary-button share-sharing`,style:{display:`none`},children:[(0,y.jsx)(`i`,{}),(0,y.jsx)(`span`,{children:`Share`})]}),(0,y.jsxs)(`span`,{className:`share-split`,style:{display:`none`},children:[(0,y.jsxs)(`span`,{className:`primary-button`,children:[(0,y.jsxs)(`span`,{className:`ld-copied`,children:[(0,y.jsx)(f,{size:14}),`Copied`]}),(0,y.jsx)(`span`,{className:`ld-copy`,children:`Copy link`})]}),(0,y.jsx)(`span`,{className:`primary-button`,children:(0,y.jsx)(h,{size:14})})]})]}),(0,y.jsxs)(`div`,{className:`chrome shell zoom ld-rise`,children:[(0,y.jsx)(`span`,{className:`icon-button`,children:(0,y.jsx)(s,{})}),(0,y.jsx)(`span`,{className:`shell-divider`}),(0,y.jsx)(`span`,{className:`icon-button`,children:(0,y.jsx)(i,{})}),(0,y.jsx)(`span`,{className:`zoom-value`,"data-zoom":!0,children:`100%`}),(0,y.jsx)(`span`,{className:`icon-button`,children:(0,y.jsx)(u,{})})]}),(0,y.jsxs)(`div`,{className:`ld-cursors`,children:[(0,y.jsx)(J,{id:`0`,color:K[0].color,name:K[0].name}),(0,y.jsx)(J,{id:`1`,color:K[1].color,name:K[1].name}),(0,y.jsx)(J,{id:`2`,color:K[2].color,name:K[2].name}),(0,y.jsx)(J,{id:`you`,color:`#000`})]})]},d)]})}var Y=[[0,6],[.4,13],[.75,19],[.88,20.2],[1,22]],he=Y[1][0],ge=e=>Math.min(1,Math.max(0,e)),X=e=>{let t=Math.max(1,Y.findIndex(([t])=>t>=e)),[n,r]=Y[t-1],[i,a]=Y[t];return r+(e-n)/(i-n)*(a-r)},_e=e=>{if(e<Y[0][1]||e>=Y[Y.length-1][1])return 1;let t=Y.findIndex(([,t])=>t>=e);if(t<=0)return 0;let[n,r]=Y[t-1],[i,a]=Y[t];return n+(e-r)/(a-r)*(i-n)},ve=[[0,0],[.12,.5],[.28,1],[.58,.5],[.72,0],[.84,null]],ye=e=>[...ve].reverse().find(([t])=>e>=t)[1],be=Array.from({length:8},(e,t)=>{let n=t*Math.PI/4,r=e=>`${(12+Math.cos(n)*e).toFixed(2)} ${(12+Math.sin(n)*e).toFixed(2)}`;return`M${r(8.2)}L${r(10.6)}`}).join(``);function xe({rays:e}){let t=(0,v.useId)(),n=e===null;return(0,y.jsxs)(`svg`,{className:`light-glyph`,viewBox:`0 0 24 24`,"aria-hidden":`true`,children:[(0,y.jsxs)(`mask`,{id:t,children:[(0,y.jsx)(`rect`,{x:`-4`,y:`-4`,width:`32`,height:`32`,fill:`#fff`}),(0,y.jsx)(`circle`,{className:`light-cut`,cx:`6.5`,cy:`17.5`,r:`8`,fill:`#000`,style:{transform:n?`none`:`translate(-9px, 9px)`}})]}),(0,y.jsxs)(`g`,{className:`light-turn`,style:{transform:`rotate(${n?180:0}deg)`},children:[(0,y.jsx)(`circle`,{className:`light-core`,cx:`12`,cy:`12`,r:`9`,fill:`currentColor`,mask:`url(#${t})`,style:{transform:`scale(${n?1:.56})`,opacity:n?1:.7+.3*e}}),(0,y.jsx)(`path`,{className:`light-rays`,d:be,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,style:{transform:n?`rotate(-90deg) scale(0.5)`:`scale(${.74+.26*e})`,opacity:n?0:.55+.45*e}})]})]})}function Se({hour:e,onHour:t}){let[n,r]=(0,v.useState)(!1),[i,a]=(0,v.useState)(!1),[o,s]=(0,v.useState)(!1),c=(0,v.useRef)(null),l=n||i||o,u=_e(e),d=e=>{let n=c.current.getBoundingClientRect();t(X(ge((e.clientX-n.left)/n.width)))},f=e=>{e.currentTarget.setPointerCapture(e.pointerId),s(!0),d(e)},p=e=>{let n={ArrowLeft:-.05,ArrowDown:-.05,ArrowRight:.05,ArrowUp:.05}[e.key];n!==void 0&&(e.preventDefault(),t(X(ge(u+n))))},m=u>.85;return(0,y.jsx)(`div`,{className:`light-switch`,"data-open":l||void 0,"data-dragging":o||void 0,style:{"--x":u},onPointerEnter:e=>e.pointerType===`mouse`&&r(!0),onPointerLeave:e=>e.pointerType===`mouse`&&r(!1),onFocus:e=>e.target.matches(`:focus-visible`)&&a(!0),onBlur:()=>a(!1),children:(0,y.jsxs)(`div`,{className:`light-pill`,children:[(0,y.jsx)(`div`,{ref:c,className:`light-track`,role:`slider`,"aria-label":`Time of day`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(u*100),"aria-valuetext":m?`Night`:u<he?`Morning`:`Evening`,tabIndex:0,onPointerDown:f,onPointerMove:e=>o&&d(e),onPointerUp:()=>s(!1),onPointerCancel:()=>s(!1),onKeyDown:p,children:(0,y.jsx)(`span`,{className:`light-dot`})}),(0,y.jsx)(`button`,{type:`button`,className:`light-toggle`,"aria-label":m?`Switch to day`:`Switch to night`,onClick:()=>t(X(m?he:1)),children:(0,y.jsx)(xe,{rays:ye(u)})})]})})}var Ce=[[0,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`],[4.5,`#1a2132`,`#0d111d`,`#25304c`,`#0a0f1b`],[5.5,`#555b7c`,`#2c3149`,`#8f91b4`,`#3a4252`],[6.5,`#efc4ae`,`#8a7a84`,`#ffe1c9`,`#a79a78`],[7.5,`#f8e2c8`,`#a89c94`,`#fff5e4`,`#b9c39a`],[10,`#fcfaf4`,`#adaca6`,`#ffffff`,`#c9d8bb`],[13,`#ffffff`,`#acadac`,`#ffffff`,`#d3e0c8`],[16,`#faf2e3`,`#aaa193`,`#fffbf1`,`#c7d0a7`],[18,`#e9bd95`,`#a07f62`,`#ffdcb2`,`#a89a62`],[19,`#da9570`,`#7a5a50`,`#ffb78c`,`#6d5f4b`],[19.75,`#84678a`,`#4a4262`,`#b78fa8`,`#3b3550`],[20.75,`#2f3756`,`#1a1f33`,`#3f4a70`,`#141a2c`],[24,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`]],we=e=>[1,3,5].map(t=>(parseInt(e.slice(t,t+2),16)/255)**2.2),Te=e=>`#${e.map(e=>Math.round(e**(1/2.2)*255).toString(16).padStart(2,`0`)).join(``)}`,Ee=new URLSearchParams(location.search).get(`hour`),De=()=>{if(Ee!==null)return Number(Ee);let e=new Date;return e.getHours()+e.getMinutes()/60};function Oe(){let[e,t]=(0,v.useState)(De);return(0,v.useEffect)(()=>{let e=()=>t(De()),n=window.setInterval(e,3e4);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(n),document.removeEventListener(`visibilitychange`,e)}},[]),e}function ke(e){let{lit:t,shade:n}=Ae(e),[r,i,a]=t.map((e,t)=>n[t]+(e-n[t])*.6);return{lit:Te(t),shade:Te(n),dark:.2126*r+.7152*i+.0722*a<.18}}function Ae(e){let t=Math.max(1,Ce.findIndex(([t])=>t>=e)),[n,...r]=Ce[t-1],[i,...a]=Ce[t],o=(e-n)/(i-n),s=o*o*(3-2*o),[c,l,u,d]=r.map((e,t)=>{let n=we(a[t]);return we(e).map((e,t)=>e+(n[t]-e)*s)}),f=2*Math.PI*(e-12.5)/24,p=(9+36*Math.abs(Math.cos(f)))*Math.PI/180,m=Math.sin(f)*52*Math.PI/180;return{lit:c,shade:l,sky:u,leaf:d,sun:[-Math.cos(p)*Math.cos(m),Math.sin(p),Math.cos(p)*Math.sin(m)]}}var Z={wind:1.1,gust:1,flutter:1.65,leafSize:1,shadow:.55,softness:1,sun:.61,skyLeaves:.29},je=`#version 300 es
-in vec2 a;
-void main() { gl_Position = vec4(a, 0., 1.); }`,Me=`#version 300 es
-precision highp float;
-out vec4 fragColor;
-uniform vec2 uRes;
-uniform float uTime;
-uniform vec3 uSun, uLit, uShade, uSky, uLeaf;
-uniform sampler2D uLeaves;
-// Tuning, from LIGHT below.
-uniform float uGust, uFlutter, uLeafSize, uShadow, uSoft, uSunStrength, uSkyLeaves;
-
-// How far the corners melt. Lower is softer.
-const float CORNER = 5.5;
-// Half the height of the box, and how much of the screen its far wall fills.
-const float HALF = 3.;
-const float FAR_WALL = .5;
-
-float dither(vec2 p) {
-  vec3 h = fract(p.xyx * .1031);
-  h += dot(h, h.yzx + 33.33);
-  return fract((h.x + h.y) * h.z);
-}
-
-float band(float x, float a, float b, float soft) {
-  return smoothstep(a - soft, a + soft, x) * (1. - smoothstep(b - soft, b + soft, x));
-}
-
-// Wind moving through the trees: gusts travel along the canopy, leaning the branches as they pass,
-// stirring the leaves and opening small gaps that let more light through.
-float foliage(vec2 zy) {
-  float t = uTime;
-  float gust = sin(t * .42 - zy.x * .3) + .6 * sin(t * .67 - zy.x * .5 + zy.y * .2 + 1.3);
-  float stir = (.12 + .2 * abs(gust)) * uFlutter;
-  vec2 lean = .6 * gust * uGust * vec2(1., .3);
-  vec2 flutter = stir * vec2(sin(t * 1.3 + zy.y * 1.7), cos(t * 1.1 + zy.x * 1.5));
-  float near = texture(uLeaves, (zy + lean + flutter) * .21 / uLeafSize + vec2(.17, .31)).r;
-  float far = texture(uLeaves, (zy + lean * .4 + flutter * .3) * .09 / uLeafSize + vec2(.61, .09)).r;
-  float gap = .03 * gust;
-  return max(smoothstep(.1 + gap, .42 + gap, near), .75 * smoothstep(.1, .4, far));
-}
-
-// Sun reaching a point through a tall opening down the left side, then through the leaves.
-// The further the light has travelled from the opening, the wider its edges.
-float sunlight(vec3 p, float wall) {
-  vec3 hit = p + uSun * ((-wall - p.x) / uSun.x);
-  float soft = (.25 + .07 * length(hit - p)) * uSoft;
-  float open = band(hit.y, -HALF + .3, HALF - .3, soft) * band(hit.z, -30., 60., soft);
-  float bar = mod(hit.z, 4.) - 2.;
-  open *= 1. - min(1., .22 / soft) * exp(-bar * bar / (soft * soft));
-  vec3 leaf = p + uSun * ((-wall - 3. - p.x) / uSun.x);
-  return open * (1. - uShadow * foliage(leaf.zy));
-}
-
-void main() {
-  float aspect = uRes.x / uRes.y;
-  vec2 p = (gl_FragCoord.xy - uRes * .5) / uRes.y;
-
-  // The far wall has the same shape as the screen, so the corners run straight to the screen's corners.
-  vec2 back = vec2(aspect, 1.) * .5 * FAR_WALL;
-  float wall = HALF * aspect;
-  float depth = HALF / back.y;
-
-  // How far past the far wall's outline this pixel is, and how much it belongs to each face.
-  vec2 reach = abs(p) / back;
-  vec3 weights = exp(CORNER * vec3(reach, 1.));
-  weights /= weights.x + weights.y + weights.z;
-  float besides = weights.x;
-  float above = weights.y;
-  float ahead = weights.z;
-
-  float leftFace = besides * (1. - smoothstep(-.1, .1, p.x / back.x));
-  float rightFace = besides - leftFace;
-  float floorFace = above * (1. - smoothstep(-.1, .1, p.y / back.y));
-  float ceilingFace = above - floorFace;
-
-  // Points on each face, for the sun.
-  float tWall = min(wall / max(abs(p.x), .01), depth);
-  float tFlat = min(HALF / max(abs(p.y), .01), depth);
-  vec3 onRight = vec3(wall, p.y * tWall, tWall);
-  vec3 onLeft = vec3(-wall, p.y * tWall, tWall);
-  vec3 onFloor = vec3(p.x * tFlat, -HALF, tFlat);
-  vec3 onBack = vec3(p.x * depth, p.y * depth, depth);
-
-  // Daylight fills the box from the left, thinning toward the right.
-  float x = p.x / (back.x * 2.);
-  float fill = 1. - .55 * smoothstep(-1.2, 1.5, x);
-  fill *= leftFace + floorFace + ahead * .9 + ceilingFace * .74 + rightFace * .8;
-
-  // The corners are only a slight gathering of shade where two faces meet.
-  float crease = 1. - max(besides, max(above, ahead));
-  fill *= 1. - crease * .3;
-  vec3 color = mix(uShade, uLit, fill);
-
-  // Sun.
-  vec3 s = uSun;
-  float sun = 0.;
-  if (floorFace > .02) sun += floorFace * sunlight(onFloor, wall) * min(1., s.y * 3.);
-  if (ahead > .02) sun += ahead * sunlight(onBack, wall) * min(1., max(-s.z, 0.) * 2.5);
-  if (rightFace > .02) sun += rightFace * sunlight(onRight, wall) * min(1., -s.x * 2.);
-  color += uLit * sun * uSunStrength;
-
-  // The left side is the light itself: bright sky with trees far out of focus.
-  color = mix(color, mix(uSky, uLeaf, foliage(onLeft.zy) * uSkyLeaves), leftFace);
-
-  color = pow(min(color, vec3(1.)), vec3(1. / 2.2));
-  // A single level of 8-bit noise: invisible, but it stops the gradients from banding.
-  color += (dither(gl_FragCoord.xy + 17.) - .5) / 255.;
-  fragColor = vec4(color, 1.);
-}`;function Ne(){let e=1024,t=document.createElement(`canvas`);t.width=t.height=e;let n=t.getContext(`2d`),r=606,i=()=>(r=r*16807%2147483647)/2147483647;n.fillStyle=`#000`,n.fillRect(0,0,e,e),n.fillStyle=n.strokeStyle=`#fff`,n.lineCap=`round`;for(let t=0;t<22;t++){let t=i()*e,r=i()*e,a=i()*Math.PI*2,o=260+i()*460;for(let e=0;e<o;e+=14){a+=(i()-.5)*.3;let s=t+Math.cos(a)*14,c=r+Math.sin(a)*14;if(n.lineWidth=Math.max(1.5,6*(1-e/o)),n.beginPath(),n.moveTo(t,r),n.lineTo(s,c),n.stroke(),t=s,r=c,!(i()>.42))for(let e of[-1,1]){if(i()>.8)continue;let o=a+e*(.5+i()*.7),s=34+i()*40;n.save(),n.translate(t+Math.cos(o)*s*.55,r+Math.sin(o)*s*.55),n.rotate(o),n.beginPath(),n.ellipse(0,0,s*.55,s*.2,0,0,Math.PI*2),n.fill(),n.restore()}}}return Pe(t)}function Pe(e){let t=document.createElement(`canvas`);t.width=t.height=128;let n=t.getContext(`2d`,{willReadFrequently:!0});n.drawImage(e,0,0,128,128);let r=n.getImageData(0,0,128,128),i=Float32Array.from({length:16384},(e,t)=>r.data[t*4]);for(let e=0;e<6;e++){let t=new Float32Array(16384);for(let n=0;n<128;n++)for(let r=0;r<128;r++){let a=0;for(let t=-13;t<=13;t++){let o=e%2?(n+t+128)%128*128+r:n*128+(r+t+128)%128;a+=i[o]}t[n*128+r]=a/27}i=t}return i.forEach((e,t)=>{r.data[t*4]=r.data[t*4+1]=r.data[t*4+2]=e}),n.putImageData(r,0,0),t}function Fe({hour:e}){let t=(0,v.useRef)(null),n=(0,v.useRef)(e),r=(0,v.useRef)(null);return(0,v.useEffect)(()=>{n.current=e,r.current?.()},[e]),(0,v.useEffect)(()=>{let e=t.current,i=e.getContext(`webgl2`,{antialias:!1,alpha:!1});if(!i)return;let a=i.createProgram();for(let[e,t]of[[i.VERTEX_SHADER,je],[i.FRAGMENT_SHADER,Me]]){let n=i.createShader(e);i.shaderSource(n,t),i.compileShader(n),i.attachShader(a,n)}i.bindAttribLocation(a,0,`a`),i.linkProgram(a),i.useProgram(a),i.bindBuffer(i.ARRAY_BUFFER,i.createBuffer()),i.bufferData(i.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),i.STATIC_DRAW),i.enableVertexAttribArray(0),i.vertexAttribPointer(0,2,i.FLOAT,!1,0,0),i.bindTexture(i.TEXTURE_2D,i.createTexture()),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,Ne()),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,i.REPEAT),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,i.REPEAT);let o=e=>i.getUniformLocation(a,e),s=(t,n)=>{let{clientWidth:r,clientHeight:a}=e;(e.width!==r||e.height!==a)&&(e.width=r,e.height=a,i.viewport(0,0,r,a));let s=Ae(n);i.uniform2f(o(`uRes`),r,a),i.uniform1f(o(`uTime`),t),i.uniform1f(o(`uGust`),Z.gust),i.uniform1f(o(`uFlutter`),Z.flutter),i.uniform1f(o(`uLeafSize`),Z.leafSize),i.uniform1f(o(`uShadow`),Z.shadow),i.uniform1f(o(`uSoft`),Z.softness),i.uniform1f(o(`uSunStrength`),Z.sun),i.uniform1f(o(`uSkyLeaves`),Z.skyLeaves),i.uniform3fv(o(`uSun`),s.sun),i.uniform3fv(o(`uLit`),s.lit),i.uniform3fv(o(`uShade`),s.shade),i.uniform3fv(o(`uSky`),s.sky),i.uniform3fv(o(`uLeaf`),s.leaf),i.drawArrays(i.TRIANGLES,0,3)};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches){r.current=()=>s(0,n.current);let t=new ResizeObserver(()=>s(0,n.current));return t.observe(e),()=>{r.current=null,t.disconnect()}}let c=n.current,l=performance.now(),u=l/1e3,d=requestAnimationFrame(function e(t){c+=(n.current-c)*(1-Math.exp((l-t)*.002)),u+=(t-l)/1e3*Z.wind,l=t,s(u,c),d=requestAnimationFrame(e)});return()=>cancelAnimationFrame(d)},[]),(0,y.jsx)(`canvas`,{ref:t,className:`window-light`,"aria-hidden":`true`})}var Ie=new URLSearchParams(location.search).get(`hero`)!==`1`,Le=(0,v.lazy)(()=>g(()=>import(`./LandingStage-DyrNB5Ea.js`),__vite__mapDeps([0,1,2,3]))),Re=[[`A`,`canvas`,`for`,`your`],[`agent’s`,`explorations`]],ze=_(.8,0),Be=_(1.1,0),Ve=.1,He=3,Ue=.14,Q=8,We=500,$=32,Ge=1500;function Ke(){let e=(0,v.useRef)(null),t=(0,v.useRef)(null);return(0,v.useEffect)(()=>{if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;let n=[0,0,0,0],r=[0,0,0,0],i=0,a=!1,o=()=>{let e=!0;r.forEach((t,i)=>{r[i]=t+(n[i]-t)*Ue,Math.abs(n[i]-r[i])>.01&&(e=!1)}),e&&r.splice(0,4,...n);let[a,s,c,l]=r.map(e=>e.toFixed(2));t.current&&(t.current.style.transform=r.some(Boolean)?`perspective(${We}px) translate(${a}px, ${s}px) rotateX(${c}deg) rotateY(${l}deg)`:``),i=e?0:requestAnimationFrame(o)},s=()=>{i||=requestAnimationFrame(o)},c=(e,t)=>Math.max(-t,Math.min(t,e)),l=()=>{a&&(a=!1,n.fill(0),s())},u=t=>{if(t.pointerType!==`mouse`||!e.current)return;let r=e.current.getBoundingClientRect();if(t.clientX<=r.left-$||t.clientX>=r.right+$||t.clientY<=r.top-$||t.clientY>=r.bottom+$)return l();a=!0;let i=t.clientX-r.left-r.width/2,o=t.clientY-r.top-r.height/2;n[0]=c(i*Ve,He),n[1]=c(o*Ve,He),n[2]=c(-o/(r.height/2)*Q,Q),n[3]=c(i/(r.width/2)*Q,Q),s()};return window.addEventListener(`pointermove`,u),document.documentElement.addEventListener(`pointerleave`,l),()=>{cancelAnimationFrame(i),window.removeEventListener(`pointermove`,u),document.documentElement.removeEventListener(`pointerleave`,l)}},[]),[e,t]}function qe(){let[e,t]=(0,v.useState)(!1),n=(0,v.useRef)(0);(0,v.useEffect)(()=>()=>window.clearTimeout(n.current),[]);let r=()=>{t(!0),window.clearTimeout(n.current),n.current=window.setTimeout(()=>t(!1),Ge)};return[e,e=>{navigator.clipboard?.writeText(e).then(r).catch(()=>{})},r]}function Je(){let[e,t,n]=qe(),[r,i]=Ke();return(0,v.useEffect)(()=>(window.addEventListener(x,n),()=>window.removeEventListener(x,n)),[]),(0,y.jsx)(`span`,{ref:r,className:`landing-magnet`,children:(0,y.jsx)(`div`,{ref:i,className:`landing-cta`,children:(0,y.jsxs)(`button`,{type:`button`,className:`landing-button`,"data-copied":e||void 0,onClick:()=>t(d),children:[(0,y.jsxs)(`span`,{className:`landing-states`,children:[(0,y.jsxs)(`span`,{className:`landing-state`,children:[(0,y.jsx)(b,{}),(0,y.jsx)(`span`,{className:`landing-label`,children:`Copy agent prompt`})]}),(0,y.jsxs)(`span`,{className:`landing-state`,"aria-hidden":`true`,children:[(0,y.jsx)(`svg`,{className:`landing-check`,viewBox:`0 0 18 18`,children:(0,y.jsx)(`path`,{d:`M3.5 9.5 7.25 13.25 14.5 5`,pathLength:`1`})}),(0,y.jsx)(`span`,{className:`landing-done`,children:`Copied`})]})]}),(0,y.jsx)(`span`,{className:`landing-sr`,"aria-live":`polite`,children:e?`Copied`:``})]})})})}function Ye(){let e=0;return(0,y.jsx)(`h1`,{className:`landing-title`,children:Re.map((t,n)=>(0,y.jsxs)(v.Fragment,{children:[n>0&&(0,y.jsx)(`br`,{}),t.map(t=>(0,y.jsxs)(v.Fragment,{children:[(0,y.jsx)(`span`,{className:`landing-word`,style:{"--delay":`${100+e++*80}ms`},children:t}),` `]},t))]},n))})}function Xe(){let e=Oe(),[t,n]=(0,v.useState)(null),r=t??e,{lit:i,shade:a,dark:o}=ke(r);return(0,v.useEffect)(()=>{document.body.style.background=i,document.body.style.colorScheme=o?`dark`:`light`},[i,o]),(0,y.jsxs)(`div`,{className:`landing`,"data-dark":o||void 0,style:{"--lit":i,"--shade":a,"--word-ease":ze.css,"--word-ms":`${ze.ms}ms`,"--rise-ease":Be.css,"--rise-ms":`${Be.ms}ms`},children:[(0,y.jsx)(Fe,{hour:r}),(0,y.jsxs)(`nav`,{className:`landing-nav`,"aria-label":`Main`,children:[(0,y.jsx)(`a`,{className:`wordmark`,href:`/`,children:(0,y.jsx)(c,{})}),(0,y.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,y.jsx)(Se,{hour:r,onHour:n}),(0,y.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,children:`Sign in`})]})]}),(0,y.jsxs)(`main`,{className:`landing-hero`,children:[(0,y.jsx)(Ye,{}),(0,y.jsx)(`p`,{className:`landing-body`,children:`Then share, comment, and huddle with one link.`}),(0,y.jsx)(`div`,{className:`landing-actions`,children:(0,y.jsx)(Je,{})}),Ie?(0,y.jsx)(`div`,{className:`landing-slot`,children:(0,y.jsx)(v.Suspense,{fallback:null,children:(0,y.jsx)(Le,{dark:o})})}):(0,y.jsx)(me,{})]}),(0,y.jsxs)(`footer`,{className:`landing-foot`,children:[(0,y.jsx)(`a`,{href:`/privacy`,children:`Privacy`}),(0,y.jsx)(`a`,{href:`/terms`,children:`Terms`})]})]})}export{Xe as Landing,x as t};

package/dist/ui/assets/Landing-Da4YRp2T.css

@@ -1 +0,0 @@
-body:has(.landing){text-wrap:balance;overflow:auto}.landing{isolation:isolate;min-height:100%;color:var(--text);--text:oklch(0% 0 0);--muted:oklch(40% 0 0);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--surface-2:oklch(100% 0 0/.45);--surface-pressed:oklch(100% 0 0/.7);--signal:#06f;flex-direction:column;font-size:15px;line-height:1.4;transition:color .6s;display:flex;position:relative;overflow-x:clip}.landing[data-dark]{--text:oklch(98.5% 0 0);--muted:oklch(78% 0 0);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--surface-2:oklch(100% 0 0/.12);--surface-pressed:oklch(100% 0 0/.2)}.window-light{z-index:-1;background:linear-gradient(90deg, var(--lit), var(--shade));pointer-events:none;width:100vw;height:100lvh;position:fixed;top:0;left:0}.landing a:not(.wordmark){text-decoration:none}.landing-nav{justify-content:space-between;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:20px 24px;display:flex}.landing-nav .wordmark svg{height:18px}.landing-nav-end{align-items:center;gap:8px;display:flex}.landing-sign-in{border-radius:var(--pill);background:var(--surface-2);align-items:center;height:40px;padding:0 16px;font-weight:500;transition:background-color .2s;display:inline-flex}.landing-sign-in:hover{background:var(--surface-pressed)}.landing-hero{text-align:center;flex-direction:column;flex:1;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:72px 24px 0;display:flex}.landing-title{perspective:1200px;letter-spacing:-.02em;margin:0;font-size:clamp(40px,6.6vw,76px);font-weight:700;line-height:.95}.landing-word{animation:landing-word var(--word-ms) var(--word-ease) var(--delay) both;display:inline-block}.landing-actions{animation:landing-rise var(--rise-ms) var(--rise-ease) .55s both;justify-content:center;margin-top:32px;display:flex}.landing-magnet{flex:none;display:inline-flex}.landing-cta{border-radius:var(--pill);will-change:transform;flex:none}.landing-button{border-radius:var(--pill);background:var(--solid);height:52px;color:var(--on-solid);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;padding:0 26px;font-size:15px;font-weight:500;transition:transform .16s ease-out;display:inline-flex}.landing-button:active{transform:scale(.97)}.landing-swap{justify-items:center;display:inline-grid}.landing-swap>span{grid-area:1/1;transition:opacity .15s}.landing-swap>[data-shown=false]{opacity:0}.landing-foot{color:var(--muted);justify-content:center;gap:24px;padding:48px 24px 32px;font-size:13px;display:flex}.landing-foot a:hover{color:var(--text)}.ld-shell{background:var(--canvas);text-align:left;text-wrap:initial;flex:none;width:100%;margin-top:64px;font-size:13px;line-height:18px;animation:2.6s cubic-bezier(.22,1,.36,1) both ld-settle,1.6s ease-out both ld-focus,.9s .5s both ld-fill;position:relative;overflow:hidden;box-shadow:0 40px 100px -40px #00000024,0 12px 32px -16px #0000000f}.ld-draw{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ld-draw path{fill:none;stroke:var(--line);stroke-width:1px;stroke-dasharray:1;stroke-dashoffset:1px;animation:1.4s cubic-bezier(.65,0,.35,1) both ld-trace}.ld-stage{transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.ld-scene{position:absolute;inset:0}.ld-rise{animation:.9s cubic-bezier(.2,.8,.2,1) 1.1s both ld-rise}.ld-stage .shell{position:absolute}.ld-stage .top-left{max-width:none;padding-left:3px;top:6px;left:6px}.ld-stage .top-right{top:6px;right:6px}.ld-stage .toolbar{top:6px;left:50%;transform:translate(-50%)}.ld-stage .toolbar-clip{width:auto}.ld-stage .zoom{bottom:6px;right:6px}.ld-stage .canvas-name{line-height:32px}.ld-stage .zoom-value{justify-content:center;align-items:center;display:inline-flex}.ld-stage .tool-slider{top:0}.ld-stage .tool[aria-pressed=true]{color:var(--signal);position:relative}.ld-stage .tool[aria-pressed=true] svg{opacity:1}.ld-stage .face-button{transform-origin:50%;display:inline-flex}.ld-copied{align-items:center;gap:4px;display:inline-flex}.share-split[data-copied] .ld-copy,.share-split:not([data-copied]) .ld-copied{display:none}.ld-strokes{pointer-events:none;position:absolute;inset:0}.ld-pin{z-index:3;transform-origin:0 100%}.ld-cursors{pointer-events:none;z-index:6;position:absolute;inset:0}.ld-cursor{opacity:0;will-change:transform;transition:none;top:-4px;left:-3px}.ld-cursor svg{transform-origin:3px 4px}.ld-frame{transform-origin:50%}.ld-design{color:#111;background:#f3f2ef;flex-direction:column;gap:10px;height:100%;padding:22px;font:13px/18px -apple-system,system-ui,sans-serif;display:flex;overflow:hidden}.ld-design h1{margin:0 0 2px;font-size:14px;font-weight:600;line-height:20px}.ld-n{background:#fff;border-radius:12px;flex:none;align-items:flex-start;gap:12px;padding:11px 12px;display:flex;box-shadow:0 1px 2px #00000014}.ld-av{color:#fff;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;font-size:11px;font-weight:600;display:grid}.ld-t{font-weight:600}.ld-d{color:#666}.ld-w{color:#999;flex:none;margin-left:auto;font-size:11px}.ld-design[data-v="2"]{color:#eee;background:#101114}.ld-design[data-v="2"] .ld-n{box-shadow:none;background:#1b1d22}.ld-design[data-v="2"] .ld-d{color:#9aa}.ld-design[data-v="3"]{background:#fff;gap:0}.ld-design[data-v="3"] .ld-n{box-shadow:none;background:0 0;border-bottom:1px solid #ddd;border-radius:0;padding:11px 0}.ld-design[data-v="4"]{gap:6px;padding:16px}.ld-design[data-v="4"] .ld-n{border-radius:8px;align-items:center;padding:10px}.ld-design[data-v="4"] .ld-av{width:22px;height:22px;font-size:9px}.ld-design[data-v="4"] .ld-d{display:none}.ld-design[data-v="5"]{background:linear-gradient(160deg,#ffe8d6,#f6d6ff)}.ld-design[data-v="5"] .ld-n{box-shadow:none;background:#fff9;border-radius:18px}.ld-design[data-v="6"]{background:#fffbe9}.ld-design[data-v="6"] .ld-n{border:1.5px solid #111;border-radius:6px;box-shadow:3px 3px #111}.ld-design[data-v="6"] .ld-av{color:#111;border:1.5px solid #111;border-radius:6px;background:0 0!important}@keyframes landing-word{0%{opacity:0;transform:translateY(45%)rotateX(-40deg)}}@keyframes landing-rise{0%{opacity:0;filter:blur(12px);transform:translateY(10px)}}@keyframes ld-settle{0%{transform:translateY(40px) scale(var(--ld-from,1.3))}}@keyframes ld-focus{0%{filter:blur(6px);opacity:0}40%{opacity:1}}@keyframes ld-fill{0%{background-color:#0000;box-shadow:0 40px 100px -40px #0000,0 12px 32px -16px #0000}}@keyframes ld-trace{to{stroke-dashoffset:0}}@keyframes ld-rise{0%{opacity:0}}@media (width<=640px){.landing-nav{padding:12px 16px}.landing-hero{padding:40px 16px 0}.landing-title br{display:none}.ld-shell{margin-top:40px}}@media (prefers-reduced-motion:reduce){.landing-word,.landing-actions,.ld-shell,.ld-rise{animation:none}.ld-draw path{stroke-dashoffset:0;animation:none}}.landing .landing-button{position:relative}.landing-states{place-items:center;display:grid}.landing-state{white-space:nowrap;grid-area:1/1;align-items:center;gap:10px;display:inline-flex}.landing-marks{align-items:center;gap:6px;display:inline-flex}.landing-marks svg{width:16px;height:16px;display:block}.landing-sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.landing-marks svg,.landing-label,.landing-check,.landing-done{transition:opacity .18s ease-out,translate .32s cubic-bezier(.34,1.56,.64,1),scale .32s cubic-bezier(.34,1.56,.64,1),filter .18s ease-out}.landing-marks svg:nth-child(2){transition-delay:45ms}.landing-label{transition-delay:70ms;transition-timing-function:ease-out,cubic-bezier(.22,1,.36,1),ease-out,ease-out}.landing-button[data-copied] .landing-marks svg,.landing-button[data-copied] .landing-label{opacity:0;filter:blur(3px);transition:opacity .12s ease-in,translate .16s ease-in,scale .16s ease-in,filter .12s ease-in;translate:0 -10px;scale:.8}.landing-button[data-copied] .landing-marks svg:first-child{transition-delay:40ms}.landing-button[data-copied] .landing-label{translate:0 -8px;scale:1}.landing-check,.landing-done{opacity:0;filter:blur(3px);transition-duration:.12s;translate:0 10px}.landing-button[data-copied] .landing-check,.landing-button[data-copied] .landing-done{opacity:1;filter:blur();transition:opacity .18s ease-out 70ms,translate .36s cubic-bezier(.34,1.56,.64,1) 70ms,filter .18s ease-out 70ms;translate:0}.landing-check{fill:none;stroke:currentColor;stroke-width:2.25px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;display:block}.landing-check path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .1s ease-in}.landing-button[data-copied] .landing-check path{stroke-dashoffset:0;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .12s}.landing-button[data-copied]{animation:.48s cubic-bezier(.22,1,.36,1) landing-copied}@keyframes landing-copied{0%{scale:.97}45%{scale:1.035}to{scale:1}}@media (prefers-reduced-motion:reduce){.landing-marks svg,.landing-label,.landing-check,.landing-done,.landing-button[data-copied] .landing-marks svg,.landing-button[data-copied] .landing-label,.landing-button[data-copied] .landing-check,.landing-button[data-copied] .landing-done{filter:none;transition:opacity .15s;translate:none;scale:none}.landing-check path,.landing-button[data-copied] .landing-check path{stroke-dashoffset:0;transition:none}.landing-button[data-copied]{animation:none}}.landing-body{max-width:560px;color:var(--muted);animation:landing-rise var(--rise-ms) var(--rise-ease) .5s both;margin:24px 0 0;font-size:18px;line-height:1.45}@media (width<=640px){.landing-body{margin-top:16px;font-size:16px}}.landing-body{text-wrap:balance}@media (prefers-reduced-motion:reduce){.landing-body{animation:none}}.landing .landing-button{transition:transform .16s ease-out,background-color .2s ease-out,color .2s ease-out}.landing .landing-button[data-copied]{color:#fff;background:#06f}@media (width>=769px){.landing{--h:max(100svh, 850px);height:var(--h)}.landing-nav{padding-block:clamp(10px, calc(var(--h) * .022), 20px);flex:none}.landing-hero{min-height:0;padding-top:clamp(4px, calc(var(--h) * .024), 72px);justify-content:center}.landing-title{font-size:clamp(40px, min(6.6vw, calc(var(--h) * .062)), 76px)}.landing-body{margin-top:clamp(10px, calc(var(--h) * .02), 24px)}.landing-actions{margin-top:clamp(14px, calc(var(--h) * .024), 32px)}.landing-foot{padding-block:clamp(6px, calc(var(--h) * .011), 32px);flex:none}.landing-slot{width:100%;min-height:456px;max-height:760px;margin-top:clamp(8px, calc(var(--h) * .018), 40px);flex:1 1 0;justify-content:center;display:flex;container-type:size}.landing-slot .ls{flex:none;width:min(100cqw,157.895cqh);margin:0}}@media (width<=768px){.landing-nav{padding-block:10px}.landing-hero{padding-top:12px}.landing-body{margin-top:12px}.landing-actions{margin-top:16px}.landing-slot{width:100%;margin-top:16px}.landing-slot .ls{margin:0}.landing-foot{padding-block:16px}}.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),background-color .2s;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 .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}@media (prefers-reduced-motion:reduce){.light-pill,.light-dot,.light-glyph *{transition:none}}