:root{--ease:cubic-bezier(.16, 1, .3, 1);--bg:#f7f8fa;--panel:#fff;--ink:#16181d;--muted:#6a7080;--rule:#e3e6eb;--hover:#eceff4;--accent:#2f4e8c;--accent-ink:#fff;--accent-soft:color-mix(in srgb, var(--accent) 9%, transparent);--live:#2e9e5b;--canvas:#eef0f4;--checker:#e2e5ea;--danger:#b4322f;--danger-soft:#fbeeee;--shadow:0 1px 2px #16181d0d, 0 12px 32px -12px #16181d2e;--focus:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#101216;--panel:#14161b;--ink:#eceef2;--muted:#8e95a3;--rule:#23262d;--hover:#1a1d23;--accent:#8fa9e0;--accent-ink:#0f1115;--live:#3dbb6f;--canvas:#0c0d10;--checker:#15171c;--danger:#ff8a85;--danger-soft:#331b1b;--shadow:0 1px 2px #00000080, 0 16px 40px -16px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}[hidden]{display:none!important}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;flex-direction:column;font:400 14px/1.5 Geist,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;display:flex}a{color:inherit;text-decoration:none}.visually-hidden,.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{box-shadow:var(--focus);border-radius:6px;outline:none}.job-line{z-index:60;background:var(--accent);transform-origin:0;height:2px;transform:scaleX(var(--p,0));opacity:0;transition:transform .3s var(--ease), opacity .4s var(--ease);pointer-events:none;position:fixed;top:0;left:0;right:0}.job-line.on{opacity:1}.topbar{border-bottom:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex}.brand{align-items:baseline;gap:10px;display:flex}.mark{fill:none;width:22px;height:22px;stroke:var(--accent);stroke-width:4px;stroke-linecap:round;align-self:center}html.motion .mark path{stroke-dasharray:40;stroke-dashoffset:40px;animation:draw 1.4s var(--ease) .2s forwards}@keyframes draw{to{stroke-dashoffset:0}}.brand-name{letter-spacing:-.02em;font-size:16px;font-weight:600}.byline{color:var(--muted);font-size:13px}.underline{background:linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat, linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat;transition:background-size .5s var(--ease), color .3s;padding-bottom:2px}.underline:hover{color:var(--accent);background-size:100% 1px,100% 1px}.actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.icon-link{width:34px;height:34px;color:var(--muted);border-radius:8px;place-items:center;transition:color .3s,background .3s;display:grid}.icon-link:hover{color:var(--ink);background:var(--hover)}.icon-link svg{fill:currentColor;width:18px;height:18px}.button{appearance:none;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;white-space:nowrap;transition:border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease);border-radius:8px;padding:7px 14px;font-weight:500}.button:hover:not(:disabled){border-color:color-mix(in srgb, var(--accent) 60%, var(--rule))}.button:active:not(:disabled){transform:scale(.97)}.button:disabled{opacity:.4;cursor:default}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.button.small{padding:3px 10px}label.button:focus-within{box-shadow:var(--focus)}.layout{flex:1;grid-template-columns:300px 1fr;grid-template-areas:"panel viewer";min-height:0;display:grid}.panel{border-right:1px solid var(--rule);flex-direction:column;grid-area:panel;gap:24px;padding:20px;display:flex;overflow-y:auto}html.motion .stagger,html.motion .reveal{opacity:0;animation:rise .9s var(--ease) forwards;animation-delay:calc(.15s + var(--i,0) * 90ms);transform:translateY(8px)}html.motion .reveal{animation-delay:0s}@keyframes rise{to{opacity:1;transform:none}}.viewer{flex-direction:column;grid-area:viewer;min-width:0;min-height:0;display:flex;position:relative}.group{border:0;min-width:0;margin:0;padding:0}.group legend,.group h2{color:var(--muted);margin:0 0 10px;padding:0;font-size:12px;font-weight:500}.tiles{grid-template-columns:1fr;grid-auto-rows:1fr;gap:6px;display:grid}.tile{border:1px solid var(--rule);cursor:pointer;transition:border-color .35s var(--ease), background .35s var(--ease);border-radius:9px;align-items:center;gap:10px;padding:10px 12px;font-weight:500;display:flex;position:relative}.tile span:not(.tip){transition:transform .6s var(--ease)}.tile:hover{background:var(--hover)}.tile:hover span:not(.tip){transform:translate(3px)}.tile input{accent-color:var(--accent);flex:none;margin:0}.tile:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.tile:has(input:focus-visible){box-shadow:var(--focus)}.tip{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.floating-tip{z-index:50;background:var(--ink);max-width:260px;color:var(--bg);box-shadow:var(--shadow);pointer-events:none;animation:tip-in .35s var(--ease);border-radius:8px;padding:8px 11px;font-size:12.5px;line-height:1.45;position:fixed}@keyframes tip-in{0%{opacity:0;transform:translate(-4px)}}.segmented{background:var(--hover);border-radius:9px;gap:2px;padding:3px;display:flex}.segmented button,.segmented label{appearance:none;color:var(--muted);font:inherit;cursor:pointer;text-align:center;transition:color .3s, background .3s var(--ease), box-shadow .3s var(--ease);background:0 0;border:0;border-radius:7px;flex:1;padding:6px 4px;font-weight:500}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented button[aria-pressed=true]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #16181d1a}.segmented label:has(input:checked){background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #16181d1a}.segmented label:has(input:focus-visible){box-shadow:var(--focus)}.segmented.small button{padding:3px 10px}.hint{color:var(--muted);margin:8px 0 0;font-size:12.5px}.split-button{display:flex;position:relative}.split-button .button:first-child{border-radius:8px 0 0 8px}.split-button .more{border-left:1px solid color-mix(in srgb, var(--accent-ink) 25%, transparent);border-radius:0 8px 8px 0;padding:7px 10px}.split-button .more:after{content:"";border-bottom:1.5px solid;border-right:1.5px solid;width:7px;height:7px;display:block;transform:rotate(45deg)translateY(-2px)}.menu{z-index:40;border:1px solid var(--rule);background:var(--panel);width:300px;box-shadow:var(--shadow);animation:drop-open .35s var(--ease);border-radius:10px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 6px);right:0}.menu li{cursor:pointer;border-radius:7px;gap:2px;padding:8px 10px;display:grid}.menu li:hover,.menu li:focus{background:var(--hover);outline:none}.menu b{font-weight:500}.menu span{color:var(--muted);font-size:12.5px}.picker{position:relative}.picker-button,.picker-list li{justify-content:space-between;align-items:center;gap:10px;width:100%;display:flex}.picker-button{appearance:none;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;text-align:left;transition:border-color .3s var(--ease);border-radius:9px;padding:8px 10px}.picker-button:hover{border-color:color-mix(in srgb, var(--accent) 60%, var(--rule))}.picker-button:after{content:"";border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);width:7px;height:7px;transition:transform .4s var(--ease);flex:none;transform:rotate(45deg)translateY(-2px)}.picker-button[aria-expanded=true]:after{transform:rotate(-135deg)translate(-2px,-1px)}.picker-list{z-index:30;border:1px solid var(--rule);background:var(--panel);max-height:320px;box-shadow:var(--shadow);transform-origin:top;animation:drop-open .35s var(--ease);border-radius:10px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto}@keyframes drop-open{0%{opacity:0;transform:translateY(-4px)scaleY(.96)}}.picker-list li{cursor:pointer;border-radius:7px;padding:6px 8px;transition:background .2s}.picker-list li:hover{background:var(--hover)}.picker-list li[aria-selected=true]{background:var(--accent-soft);font-weight:600}.picker-list li.active{outline:1.5px solid var(--accent);outline-offset:-1.5px}.option-label{white-space:nowrap}.swatches{flex-wrap:wrap;justify-content:flex-end;gap:2px;min-width:0;display:flex}.swatch{background-image:linear-gradient(var(--c), var(--c)), conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0);background-size:100% 100%,8px 8px;border-radius:3px;width:14px;height:14px;box-shadow:inset 0 0 0 1px #7f7f7f66}html.motion .picker-list .swatch,html.motion .picker-button .swatch{animation:pop .5s var(--ease) backwards}.swatch:nth-child(2){animation-delay:30ms}.swatch:nth-child(3){animation-delay:60ms}.swatch:nth-child(4){animation-delay:90ms}.swatch:nth-child(5){animation-delay:.12s}.swatch:nth-child(6){animation-delay:.15s}.swatch:nth-child(n+7){animation-delay:.18s}@keyframes pop{0%{opacity:0;transform:scale(.4)}}.swatch-more{color:var(--muted);font-size:12px}.stats{grid-template-columns:auto 1fr;margin:0;display:grid}.stats dt,.stats dd{border-top:1px solid var(--rule);padding:6px 0}.stats dt:first-of-type,.stats dd:first-of-type{border-top:0}.stats dt{color:var(--muted)}.stats dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}html.motion .stats.fresh dt,html.motion .stats.fresh dd{animation:rise .7s var(--ease) backwards}.error-box{background:var(--danger-soft);color:var(--danger);border-radius:10px;margin-top:12px;padding:10px 12px}.error-box p{margin:0 0 8px}.privacy{border-top:1px solid var(--rule);color:var(--muted);gap:10px;margin-top:auto;padding-top:16px;font-size:12.5px;display:grid}.privacy p{margin:0}.private{align-items:baseline;gap:10px;display:flex}.dot{background:var(--live);width:7px;height:7px;box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent);border-radius:50%;flex:none;display:inline-block;transform:translateY(-1px)}html.motion .dot{animation:pulse 2.4s var(--ease) infinite}@keyframes pulse{70%,to{box-shadow:0 0 0 .5rem color-mix(in srgb, var(--live) 0%, transparent)}}.credits{flex-wrap:wrap;gap:14px;display:flex}.link-button{appearance:none;font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0 0 2px}.drop{isolation:isolate;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:44px;padding:40px clamp(20px,5vw,64px);display:flex;position:relative;overflow:hidden auto}.hero{flex-direction:column;align-items:center;max-width:640px;display:flex;position:relative}.eyebrow{color:var(--muted);align-items:center;gap:8px;margin:0 0 18px;font-size:13px;display:inline-flex}.headline{letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(32px,4.6vw,56px);font-weight:500;line-height:1.08}.intro{max-width:34rem;color:var(--muted);margin:18px 0 0;font-size:16px;line-height:1.6}.split .w{vertical-align:top;margin-bottom:-.12em;padding-bottom:.12em;display:inline-block;overflow:hidden}.split .w>span{display:inline-block}html.motion .split .w>span{transform-origin:0 100%;transition:transform 1.2s var(--ease);transition-delay:calc(var(--d,0s) + var(--i) * 55ms);transform:translateY(115%)rotate(4deg)}html.motion .split.in .w>span{transform:none}html.motion .fade{opacity:0;transition:opacity 1s var(--ease), transform 1s var(--ease);transition-delay:var(--d,0s);transform:translateY(10px)}html.motion .fade.in{opacity:1;transform:none}.drop-card{background:color-mix(in srgb, var(--bg) 90%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent);width:min(560px,100%);transition:border-color .4s var(--ease), background .4s var(--ease), transform .6s var(--ease);border-radius:14px;margin:36px auto 0;padding:52px 32px}.drop-card p{margin:6px 0 0;font-size:15px}.drop-card .hint{font-size:13px}.drop-card svg{fill:none;width:42px;height:42px;stroke:var(--accent);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease);margin-bottom:6px}.drop-card:hover svg,.drop.over .drop-card svg{transform:translateY(-3px)}.drop.over .drop-card{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.015)}.link{color:var(--accent);cursor:pointer;text-underline-offset:3px;text-decoration:underline}.link:focus-within{box-shadow:var(--focus)}.backdrop{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.grid{background-image:linear-gradient(color-mix(in srgb, var(--muted) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--muted) 7%, transparent) 1px, transparent 1px);background-position:50%;background-size:24px 24px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(120% 100% at 75% 80%,#000 25%,#0000 85%);mask-image:radial-gradient(120% 100% at 75% 80%,#000 25%,#0000 85%)}html.motion .grid{opacity:0;animation:2.6s .2s forwards grid-in,40s linear infinite grid-drift}@keyframes grid-in{to{opacity:1}}@keyframes grid-drift{to{background-position:calc(50% + 24px) calc(50% + 24px)}}.demo{opacity:.6;width:max(360px,min(46vw,64vh,760px));height:auto;position:absolute;bottom:0;right:0;translate:36% 34%;-webkit-mask-image:radial-gradient(circle,#000 45%,#0000 75%);mask-image:radial-gradient(circle,#000 45%,#0000 75%)}html.motion .demo{opacity:0;animation:2.4s .6s forwards backdrop-in}@keyframes backdrop-in{to{opacity:.6}}.demo .px{fill:var(--muted);opacity:.18;transform-box:fill-box;transform-origin:50%}.demo .stairs{fill:none;stroke:var(--muted);stroke-width:1px;opacity:.55}.demo .curve{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5px;stroke-linecap:round}.demo .handle{stroke:var(--accent);stroke-width:1px;opacity:.6}.demo .node{fill:var(--panel);stroke:var(--accent);stroke-width:1.5px}html.motion .demo .px{animation:px-cycle 7s var(--ease) infinite;animation-delay:calc(var(--k) * 12ms)}html.motion .demo .stairs{animation:stairs-cycle 7s var(--ease) infinite}html.motion .demo .curve{stroke-dasharray:460;animation:curve-cycle 7s var(--ease) infinite}html.motion .demo .handle,html.motion .demo .node{animation:nodes-cycle 7s var(--ease) infinite}@keyframes px-cycle{0%{opacity:0;transform:scale(.6)}10%,45%{opacity:.18;transform:none}60%,to{opacity:0;transform:none}}@keyframes stairs-cycle{0%,12%{opacity:0}20%,50%{opacity:.55}62%,to{opacity:0}}@keyframes curve-cycle{0%,25%{stroke-dashoffset:460px;fill-opacity:0;opacity:1}50%{stroke-dashoffset:0;fill-opacity:0}62%,92%{stroke-dashoffset:0;fill-opacity:1;opacity:1}to{stroke-dashoffset:0;fill-opacity:0;opacity:0}}@keyframes nodes-cycle{0%,48%{opacity:0}56%,88%{opacity:1}to{opacity:0}}.features{border:1px solid var(--rule);background:color-mix(in srgb, var(--bg) 90%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));width:min(760px,100%);margin:0;padding:0;list-style:none;display:grid;position:relative}.features li{padding:16px 18px}.features li+li{border-left:1px solid var(--rule)}.features b{font-weight:500;display:block}.features span{color:var(--muted);font-size:13px}.usage{color:var(--muted);font-variant-numeric:tabular-nums;margin:-20px 0 0;font-size:13px}.usage b{color:var(--ink);font-weight:500}html.motion .usage{animation:rise .9s var(--ease)}.canvas{cursor:grab;background-color:var(--canvas);background-image:conic-gradient(var(--checker) 25%, transparent 0 50%, var(--checker) 0 75%, transparent 0);touch-action:none;background-size:20px 20px;flex:1;position:relative;overflow:hidden}html.motion .canvas{animation:rise .8s var(--ease)}.canvas.panning{cursor:grabbing}.content{transform-origin:0 0;position:absolute;top:0;left:0}.content img{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0}#original{image-rendering:pixelated}html.motion #vector.wipe{animation:wipe 1.1s var(--ease)}@keyframes wipe{0%{opacity:0;filter:blur(6px)}}.split-handle{cursor:ew-resize;touch-action:none;justify-content:center;width:28px;margin-left:-14px;display:flex;position:absolute;top:0;bottom:0}.split-handle span{background:var(--accent);width:1.5px;box-shadow:0 0 0 1px #ffffff80}.split-handle span:after{content:"";background:var(--accent);width:26px;height:26px;box-shadow:var(--shadow);transition:transform .4s var(--ease);border:2px solid #fff;border-radius:50%;margin:-13px 0 0 -13px;position:absolute;top:50%;left:50%}.split-handle:hover span:after,.split-handle:focus-visible span:after{transform:scale(1.12)}.tag{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;pointer-events:none;background:#10121699;border-radius:6px;padding:3px 9px;font-size:12px;position:absolute;top:12px}.tag.left{left:12px}.tag.right{right:12px}.job{background:var(--panel);border:1px solid var(--rule);width:min(360px,100% - 32px);box-shadow:var(--shadow);border-radius:12px;gap:8px;padding:12px 14px;display:grid;position:absolute;bottom:18px;left:50%;translate:-50%}html.motion .job{animation:rise .5s var(--ease)}.job-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.job-row .hint{margin:0}#jobPercent{font-variant-numeric:tabular-nums;color:var(--muted)}.bar{background:var(--hover);border-radius:2px;height:4px;overflow:hidden}.bar span{background:var(--accent);width:0;height:100%;transition:width .3s var(--ease);border-radius:2px;display:block}.toolbar{border-top:1px solid var(--rule);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;display:flex}.zoom{align-items:center;gap:6px;display:flex}#zoomLabel{text-align:right;min-width:48px;color:var(--muted);font-variant-numeric:tabular-nums}dialog{border:1px solid var(--rule);background:var(--panel);max-width:min(520px,100% - 32px);color:var(--ink);box-shadow:var(--shadow);border-radius:14px;padding:22px 24px}dialog[open]{animation:rise .5s var(--ease)}dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#10121673}dialog h2{letter-spacing:-.02em;margin:0 0 8px;font-size:18px;font-weight:600}dialog h3{margin:18px 0 4px;font-size:14px;font-weight:500}dialog p,dialog ul{color:var(--muted);margin:0}dialog form{text-align:right;margin-top:20px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (max-width:760px){.demo{width:110vw;top:0;bottom:auto;translate:38% -22%}body{height:auto;min-height:100%}.layout{grid-template-columns:1fr;grid-template-areas:"viewer""panel"}.viewer,.canvas{min-height:62vh}.drop{padding:28px 18px}.features{grid-template-columns:1fr}.features li+li{border-left:0;border-top:1px solid var(--rule)}.panel{border-right:0;border-top:1px solid var(--rule);overflow:visible}.actions{width:100%}.actions .button{text-align:center;flex:1}}