.connector-demo{--demo-desk:#0b0e10;--demo-app:#101416;--demo-view:#191f23;--demo-line:#303a3f;--demo-fg:#eceeed;--demo-muted:#a5afb4;--demo-subtle:#89969d;--demo-attention:#69cafa;--demo-win:#202020;--demo-win-bar:#1a1a1a;--demo-win-field:#2c2c2c;--demo-win-line:#333333;--demo-win-fg:#f3f3f3;--demo-win-muted:#b9b9b9;--demo-win-accent:#4cc2ff;--demo-win-folder:#dcb35c;--demo-row:28px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:14px;min-width:0;margin:0;container:connector-demo/inline-size}.connector-demo__stage{grid-column:1/-1;position:relative;display:grid;grid-template-columns:8% 46% 46%;grid-template-rows:62% 14% 24%;aspect-ratio:1.22;isolation:isolate;font-family:var(--font-sans);user-select:none}.connector-demo__window{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-dialog)}.connector-demo__app{grid-column:2/4;grid-row:1/3;z-index:2;border:1px solid var(--demo-line);background:var(--demo-app);color:var(--demo-fg)}.connector-demo__explorer{grid-column:1/3;grid-row:2/4;z-index:3;border:1px solid var(--demo-win-line);background:var(--demo-win);color:var(--demo-win-fg)}.connector-demo__chrome{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;height:30px;padding:0 6px 0 10px}.connector-demo__explorer .connector-demo__chrome{background:var(--demo-win-bar)}.connector-demo__app .connector-demo__chrome{border-bottom:1px solid var(--demo-line)}.connector-demo__title{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:var(--type-caption);line-height:1;white-space:nowrap}.connector-demo__app .connector-demo__title{opacity:.5}.connector-demo__tab{align-self:stretch;margin:5px 0 0 -4px;padding:0 14px 0 8px;border-radius:6px 6px 0 0;background:var(--demo-win)}.connector-demo__tab svg{color:var(--demo-win-folder)}.connector-demo__brand{font-family:var(--font-display);font-size:var(--type-label);font-weight:700;letter-spacing:-.01em}.connector-demo__brand img{width:14px;height:14px}.connector-demo__controls{display:inline-flex;align-items:center;gap:15px;padding-right:6px;color:var(--demo-subtle)}.connector-demo__address,.connector-demo__explorer .connector-demo__controls{color:var(--demo-win-muted)}.connector-demo__address{display:flex;flex:none;align-items:center;gap:12px;height:32px;padding:0 10px;border-bottom:1px solid var(--demo-win-line)}.connector-demo__address span{flex:1;min-width:0;overflow:hidden;padding:4px 9px;border-radius:var(--radius-sm);background:var(--demo-win-field);color:var(--demo-win-fg);font-size:var(--type-caption);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.connector-demo__columns,.connector-demo__row{display:grid;grid-template-columns:minmax(0,1fr) 4.8rem 4.4rem;align-items:center;column-gap:10px;padding:0 12px 0 14px}.connector-demo__columns{flex:none;height:26px;border-bottom:1px solid var(--demo-win-line);color:var(--demo-win-muted);font-size:var(--type-caption)}.connector-demo__rows{position:relative;padding-top:3px}.connector-demo__row{position:relative;height:var(--demo-row);color:var(--demo-win-muted);font-size:var(--type-caption);white-space:nowrap;font-variant-numeric:tabular-nums}.connector-demo__row>span:last-child{text-align:right}.connector-demo__name{display:flex;align-items:center;gap:8px;min-width:0;color:var(--demo-win-fg)}.connector-demo__name>span{overflow:hidden;text-overflow:ellipsis}.connector-demo__selection{position:absolute;inset:1px 4px;border-radius:var(--radius-sm);background:rgb(255 255 255/.1);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14);opacity:0}.connector-demo__row>:not(.connector-demo__selection){position:relative}.connector-demo__row[data-row=upper]{transform:translate3d(0,calc(-1 * var(--demo-row)),0)}.connector-demo__row[data-row=corrected]{opacity:0}.connector-demo__body{display:grid;flex:1;grid-template-columns:minmax(0,1fr) clamp(188px,35%,244px);min-height:0}.connector-demo__view{position:relative;min-width:0;overflow:hidden;background:var(--demo-view)}.connector-demo__canvas,.connector-demo__poster{position:absolute;inset:0}.connector-demo__canvas{opacity:0;transform:scale(.965)}.connector-demo__canvas canvas{display:block;width:100%;height:100%}.connector-demo__poster{display:none}.connector-demo__poster img{width:100%;height:100%;max-width:none;object-fit:contain}.connector-demo__hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:0;padding:0 18%;color:var(--demo-muted);font-size:var(--type-label);line-height:1.45;text-align:center;text-wrap:balance}.connector-demo__hint svg{color:var(--demo-subtle)}.connector-demo__ring{position:absolute;inset:10px;border:1.5px solid color-mix(in srgb,var(--demo-attention) 70%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--demo-attention) 6%,transparent);opacity:0}.connector-demo__column{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;min-width:0;padding:14px;border-left:1px solid var(--demo-line)}.connector-demo__headings,.connector-demo__panes,.connector-demo__phases,.connector-demo__save,.connector-demo__slot-value{display:grid}:is(.connector-demo__headings,.connector-demo__panes,.connector-demo__slot-value,.connector-demo__phases,.connector-demo__save)>*{grid-area:1/1}.connector-demo__headings p{display:flex;align-items:center;gap:7px;margin:0;font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.01em;opacity:0;transform:translate3d(0,6px,0)}.connector-demo__headings p[data-heading=empty]{opacity:1;transform:none}.connector-demo__headings svg{flex:none;transform:scale(.6)}.connector-demo__pane{display:flex;flex-direction:column;gap:8px;min-height:0;opacity:0;transform:translate3d(0,6px,0)}.connector-demo__pane[data-pane=prepare]{opacity:1;transform:none}.connector-demo__slot{display:grid;gap:3px;padding:7px 9px;border:1px solid var(--demo-line);border-radius:var(--radius-sm);color:var(--demo-subtle);font-size:var(--type-caption);line-height:1.3}.connector-demo__slot-value{font-size:var(--type-label)}.connector-demo__slot-value strong{overflow:hidden;color:var(--demo-fg);font-weight:600;text-overflow:ellipsis;white-space:nowrap;opacity:0}.connector-demo__slot-value [data-drop]{overflow:hidden;color:var(--demo-attention);text-overflow:ellipsis;white-space:nowrap;opacity:0}.connector-demo__button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:0 10px;border-radius:var(--radius-sm);background:var(--demo-fg);color:var(--demo-app);font-size:var(--type-label);font-weight:600;white-space:nowrap}.connector-demo__fix{margin-top:auto;opacity:.42}.connector-demo__job{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--demo-line);border-radius:var(--radius-sm);color:var(--demo-fg)}.connector-demo__phases{min-width:0}.connector-demo__phases>span{display:grid;gap:3px;color:var(--demo-muted);font-size:var(--type-caption);line-height:1.35}.connector-demo__phases strong{color:var(--demo-fg);font-size:var(--type-caption);font-weight:700;letter-spacing:.03em;text-transform:uppercase}.connector-demo__phases [data-phase=analyze]{opacity:0}.connector-demo__aside{margin:0;color:var(--demo-muted);font-size:var(--type-caption);line-height:1.45}.connector-demo__button.connector-demo__save{display:grid;place-items:center}.connector-demo__save [data-label=saved]{display:inline-flex;align-items:center;gap:6px;opacity:0}.connector-demo__saved{display:flex;gap:8px;margin:2px 0 0;color:var(--demo-muted);font-size:var(--type-caption);line-height:1.4;opacity:0;transform:translate3d(0,6px,0)}.connector-demo__saved svg{flex:none;margin-top:1px;color:var(--demo-fg)}.connector-demo__saved span{display:grid;gap:2px;min-width:0}.connector-demo__saved strong{color:var(--demo-fg);font-weight:600;overflow-wrap:anywhere}.connector-demo__cursor,.connector-demo__file,.connector-demo__ghost{position:absolute;top:0;left:0;z-index:10;pointer-events:none;opacity:0;will-change:transform,opacity}.connector-demo__cursor{margin:-3px 0 0 -3px;color:#fff;filter:drop-shadow(0 0 .6px #000) drop-shadow(0 0 .6px #000) drop-shadow(0 2px 3px rgb(0 0 0/.4))}.connector-demo__cursor svg{display:block}.connector-demo__ghost{display:grid;width:44px;height:44px;transform-origin:0 0;color:var(--demo-win-fg)}.connector-demo__ghost svg{grid-area:1/1;opacity:.85}.connector-demo__ghost svg+svg{transform:translate(7px,6px)}.connector-demo__ghost span{position:absolute;right:0;bottom:2px;min-width:16px;padding:1px 4px;border-radius:3px;background:var(--demo-win-accent);color:#0b0e10;font-size:var(--type-caption);font-weight:700;line-height:1.3;text-align:center}.connector-demo__file{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border:1px solid rgb(255 255 255/.14);border-radius:var(--radius-sm);background:#2b2b2b;box-shadow:var(--shadow-popover);color:var(--demo-win-fg);font-size:var(--type-caption);line-height:1.2;white-space:nowrap}.connector-demo__play{grid-row:2;grid-column:2;display:grid;place-items:center;width:32px;height:32px;margin:6px -8px 0 0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--sub);cursor:pointer}.connector-demo__play:hover{color:var(--ink)}.connector-demo:not([data-mode=live]) .connector-demo__play{visibility:hidden}.connector-demo[data-playing=false] .oc-loader-ring{animation-play-state:paused}.connector-demo>figcaption{grid-row:2;grid-column:1;max-width:72ch;margin-top:12px;color:var(--sub);font-size:var(--type-caption);line-height:1.45}.connector-demo__description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.connector-demo[data-mode=still] .connector-demo__poster{display:block}.connector-demo[data-mode=still] :is(.connector-demo__canvas,.connector-demo__hint,.connector-demo__ring,.connector-demo__cursor,.connector-demo__ghost,.connector-demo__file){display:none}.connector-demo[data-mode=still] .connector-demo__row[data-row=upper]{transform:none}.connector-demo[data-mode=still] .connector-demo__row[data-row=corrected],.connector-demo[data-mode=still] [data-row=corrected] .connector-demo__selection{opacity:1}.connector-demo[data-mode=still] .connector-demo__headings p[data-heading=empty],.connector-demo[data-mode=still] .connector-demo__pane[data-pane=prepare],.connector-demo[data-mode=still] [data-label=save]{opacity:0}.connector-demo[data-mode=still] :is(.connector-demo__headings p[data-heading=done],.connector-demo__pane[data-pane=done],.connector-demo__saved){opacity:1;transform:none}.connector-demo[data-mode=still] .connector-demo__headings svg{transform:none}.connector-demo[data-mode=still] [data-label=saved]{opacity:1}@container connector-demo (max-width: 599px){.connector-demo__stage{display:flex;flex-direction:column;gap:10px;aspect-ratio:auto}.connector-demo__app{order:1}.connector-demo__explorer{order:2}.connector-demo__body{grid-template-columns:minmax(0,1fr)}.connector-demo__view{aspect-ratio:1.6}.connector-demo__column{grid-template-rows:auto;min-height:150px;border-top:1px solid var(--demo-line);border-left:0}.connector-demo__slot{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px}.connector-demo__slot-value{justify-items:end}.connector-demo__pane[data-pane=prepare] .connector-demo__fix{margin-top:2px}.connector-demo__address,.connector-demo__columns{display:none}.connector-demo__rows{padding-block:4px 6px}.connector-demo__columns,.connector-demo__row{grid-template-columns:minmax(0,1fr) 4.4rem}.connector-demo__row>span:nth-child(3){display:none}}