.segmented-control[data-astro-cid-3y3ufmcd]{background:var(--color-surface);border-radius:999px;grid-auto-columns:auto;grid-auto-flow:column;gap:2px;max-width:100%;padding:4px;display:inline-grid;position:relative}.segmented-selection[data-astro-cid-3y3ufmcd]{inset-block:4px;left:var(--selection-left,4px);width:var(--selection-width,0px);border-radius:inherit;background:var(--color-blue-action);pointer-events:none;transition:left .32s var(--spring), width .32s var(--spring);position:absolute}.segmented-option[data-astro-cid-3y3ufmcd]{min-width:0;min-height:44px;color:var(--color-muted);white-space:nowrap;transition:background .18s, color .18s, transform .18s var(--ease-out);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.3;display:flex;position:relative}@media (hover:hover){.segmented-option[data-astro-cid-3y3ufmcd]:not([aria-pressed=true]):hover{color:var(--color-ink);background:#fff9}}.segmented-option[data-astro-cid-3y3ufmcd]:active{transform:scale(.97)}.segmented-option[data-astro-cid-3y3ufmcd][aria-pressed=true]{color:var(--color-canvas)}@media (width<=640px){.segmented-control[data-astro-cid-3y3ufmcd]{width:min(100%,400px);display:grid}.segmented-option[data-astro-cid-3y3ufmcd]{padding-inline:14px;font-size:13px}}@media (width<=360px){.segmented-option[data-astro-cid-3y3ufmcd]{padding-inline:6px}}@media (prefers-reduced-motion:reduce){.segmented-selection[data-astro-cid-3y3ufmcd],.segmented-option[data-astro-cid-3y3ufmcd]{transition:none}}@property --window-blur{syntax:"<number>";inherits:true;initial-value:0}@property --icon-size{syntax:"<number>";inherits:true;initial-value:15}@property --u{syntax:"<length>";inherits:true;initial-value:0}@property --macbook-scale{syntax:"<number>";inherits:true;initial-value:1}@property --macbook-offset{syntax:"<number>";inherits:true;initial-value:0}@property --shuffle-x{syntax:"<number>";inherits:true;initial-value:0}@property --connection-x{syntax:"<number>";inherits:true;initial-value:0}@property --connection-y{syntax:"<number>";inherits:true;initial-value:0}@property --desktop-count{syntax:"<number>";inherits:true;initial-value:1}@property --layout-count{syntax:"<number>";inherits:true;initial-value:1}.hero-demo{--macbook-scale:1;--macbook-offset:calc(var(--desk-span) / 2 - var(--macbook-width));--shuffle-x:calc((var(--desk-span) - var(--macbook-width)) / 2 + 14);--connection-x:var(--cable-x);--connection-y:var(--cable-y);--macbook-port-x:calc(var(--stage-width) / 2 + var(--macbook-offset) + var(--macbook-width) / 2 - var(--macbook-width) * var(--macbook-scale) * (.5 - var(--macbook-port-inset)));text-align:left;user-select:none;transition-property:--macbook-scale,--macbook-offset,--shuffle-x;transition-duration:var(--desktop-duration,.65s);transition-timing-function:var(--spring);margin:100px auto 0;position:relative;container-type:inline-size}.hero-demo{& .stage{aspect-ratio:var(--stage-width) / var(--stage-height);isolation:isolate;position:relative;container-type:inline-size}& .device{--u:calc(100cqw / var(--stage-width));bottom:calc((var(--stage-baseline) - var(--baseline-inset)) * var(--u));width:calc(var(--device-width) * var(--u));height:calc(var(--device-height) * var(--u));position:absolute}& .display-studio{left:calc(50% - var(--desk-span) / 2 * var(--u));z-index:2;opacity:1;transition:opacity .22s,visibility}& .macbook{width:calc(var(--macbook-width) * var(--u));transform:translateX(calc(var(--macbook-offset) * var(--u))) scale(var(--macbook-scale));transform-origin:50% calc(100% - var(--baseline-inset) * var(--u));z-index:2;left:50%}& .device-frame{pointer-events:none;user-select:none;width:100%;max-width:none;height:100%;position:absolute;inset:0}& .viewport{left:calc(var(--screen-left) * var(--u));top:calc(var(--screen-top) * var(--u));width:calc(var(--screen-width) * var(--u));height:calc(var(--screen-height) * var(--u));border-radius:calc(var(--screen-radius) * var(--u));position:absolute;container-type:size}& .screen-set{--f:var(--connected-f);--bar-top:var(--connected-bar-top);--lane-pad:var(--connected-lane-pad);border-radius:inherit;transition:--layout-count var(--desktop-duration,.65s) var(--spring);--bar-width:calc(var(--desktop-count) * var(--f) * 100% + (var(--desktop-count) - 1) * var(--desktop-gap) * 1%);--bar-left:calc((100% - var(--bar-width)) / 2);--slots-width:calc(var(--layout-count) * var(--f) * 100% + (var(--layout-count) - 1) * var(--desktop-gap) * 1%);--slots-left:calc((100% - var(--slots-width)) / 2);--desktop-icon:calc(var(--f) * 36);--thumb-icon:calc(var(--desktop-icon) * 1cqh);--desktop-window-radius:calc(var(--f) * var(--window-radius) * 1cqh);--desktop-inset:calc(var(--f) * var(--window-inset) * 1cqh);--desktop-radius:calc(var(--desktop-window-radius) + var(--desktop-inset));position:absolute;inset:0;container-type:size}& .screen-set[data-prepared],& .screen-set[data-prepared]>.lane{transition:none}& .screen{border-radius:inherit;visibility:hidden;position:absolute;inset:0;container-type:size}& .screen:not([data-phase=off]){visibility:visible}& .wall{border-radius:inherit;background:#15151f url(/images/hero-wallpaper.webp) 50%/cover;position:absolute;inset:0}& .macbook-chrome{z-index:90;pointer-events:none;clip-path:inset(0 40% 84%)}& .lane{z-index:30;left:calc(var(--bar-left) - var(--lane-pad) / var(--aspect) * 1%);top:calc(var(--bar-top) - var(--lane-pad) * 1%);width:calc(var(--bar-width) + 2 * var(--lane-pad) / var(--aspect) * 1%);height:calc((var(--f) * 100 + 2 * var(--lane-pad)) * 1%);border-radius:calc(var(--desktop-radius) + var(--lane-inset) * var(--u));backdrop-filter:blur(3cqh)saturate(110%);opacity:0;background:#ffffffd6;transition:opacity .18s;position:absolute;box-shadow:inset 0 0 0 1px #1d1d1f12,0 .8cqh 2.4cqh #1d1d1f12}& .space{z-index:31;left:calc(var(--slots-left) + var(--desktop-index) * (var(--f) * 100% + var(--desktop-gap) * 1%));top:var(--bar-top);width:calc(var(--f) * 100%);height:calc(var(--f) * 100%);border-radius:var(--desktop-radius);opacity:0;background:#1d1d1f0a;display:none;position:absolute;overflow:hidden;transform:none;box-shadow:inset 0 0 0 1px #1d1d1f0d}& .space[data-present=true],& .space[data-leaving]{display:block}& .space[data-leaving]{left:var(--exit-left);transition:none}& .screen-set[data-ready]>.lane{opacity:1}& .screen-set[data-ready]>.space[data-present=true]{opacity:1;transform:none}& .screen-set:not([data-ready]) :is(.lane,.space,.current-preview){visibility:hidden}& .current-preview{z-index:32;left:var(--slots-left);top:var(--bar-top);width:calc(var(--f) * 100%);height:calc(var(--f) * 100%);border-radius:var(--desktop-radius);position:absolute;overflow:hidden}& .window-layer{--u:calc(100cqw / var(--stage-width));z-index:80;pointer-events:none;position:absolute;inset:0}& .win,& .mini{--window-edge:inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, #ffffff29);background:color-mix(in srgb, var(--c) 24%, transparent);box-shadow:var(--window-edge);place-items:center;display:grid;position:absolute}& .win{backdrop-filter:blur(calc(var(--window-blur) * var(--u))) saturate(110%);opacity:0;display:none}& .win[data-active=true]{opacity:1;display:grid}& .win img,& .mini img{aspect-ratio:1;object-fit:contain;max-width:100%;height:auto;max-height:100%}& .win img{width:calc(var(--icon-size) * var(--u));filter:drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) #0000004d)}& .mini img{width:var(--thumb-icon);filter:drop-shadow(0 .5cqh 1cqh #0000004d)}& .mini{left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:var(--desktop-window-radius);opacity:0;backdrop-filter:blur(.7cqh)}& .screen[data-phase=tidy] .mini{opacity:1}& .demo-controls{justify-content:center;align-items:center;margin-top:clamp(40px,5vw,64px);display:flex}& .shuffle-button{--u:calc(100cqw / var(--stage-width));z-index:1;left:calc(50% + var(--shuffle-x) * var(--u));top:calc(42 * var(--u));background:var(--color-canvas);min-height:44px;color:var(--color-ink);text-align:center;white-space:nowrap;transition:background .18s, color .18s, transform .18s var(--ease-out);border:0;border-radius:999px;justify-content:center;align-items:center;padding:8px 17px;font-family:Bradley Hand,Segoe Print,cursive;font-size:19px;font-weight:400;line-height:1.2;display:inline-grid;position:absolute;transform:translate(-50%)}& .shuffle-button:before,& .shuffle-button>[data-shuffle-label]{grid-area:1/1}& .shuffle-button:before{content:attr(data-size-label);visibility:hidden}& .shuffle-outline,& .shuffle-arrow{pointer-events:none;fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;position:absolute;overflow:visible}& .shuffle-outline{width:100%;height:100%;inset:0}& .shuffle-outline path,& .shuffle-arrow path{vector-effect:non-scaling-stroke}& .shuffle-arrow{width:25%;height:max(14px, calc(32 * var(--u)));top:calc(100% + 6px);right:50%}@media (hover:hover){& .shuffle-button:hover{background:var(--color-surface);color:var(--color-blue-ink);transform:translate(-50%,-2px)}}& .shuffle-button:active{background:var(--color-surface);transform:translate(-50%)scale(.97)}& .shuffle-button[data-action=restore]{color:var(--color-blue)}& .display-cable{z-index:1;pointer-events:none;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%;position:absolute;inset:0;overflow:visible}& .loose-cable{--u:calc(100cqw / var(--stage-width));z-index:1;left:calc((var(--macbook-port-x) - 160) * var(--u));top:calc((var(--stage-height) - var(--stage-baseline) - 14) * var(--u));width:calc(160 * var(--u));height:calc(24 * var(--u));opacity:0;pointer-events:none;stroke-linecap:round;stroke-linejoin:round;position:absolute;overflow:visible}& .plug-tip{fill:var(--color-border);stroke:var(--color-muted);stroke-width:1px}& .plug-housing{fill:var(--color-surface);stroke:var(--color-muted);stroke-width:1px}& .plug-contact{stroke:var(--color-muted);stroke-width:1px}& .cable-sheath{stroke:var(--color-muted);stroke-width:3.2px}& .cable-highlight{stroke:var(--color-border);stroke-width:1.6px}& .connection-button{--u:calc(100cqw / var(--stage-width));z-index:3;left:calc(var(--connection-x) * var(--u));top:calc(var(--connection-y) * var(--u));width:44px;height:44px;color:var(--color-muted);background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:color .18s;display:grid;position:absolute;transform:translate(-50%,-50%)}& .connection-button:before{content:"";border:1px solid var(--color-border);border-radius:inherit;background:var(--color-canvas);transition:background .18s,transform .18s;position:absolute;inset:4px}& .connection-icon{width:19px;height:19px;position:relative}& .icon-disconnect{stroke:#d92d20}& .icon-connect{stroke:var(--color-success);display:none}& .connection-button:active:before{transform:scale(.92)}& .control-tooltip{z-index:5;background:var(--color-ink);width:200px;color:var(--color-canvas);font:400 var(--text-detail)/1.45 var(--font-sans);text-align:center;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;border-radius:8px;padding:8px 10px;transition:opacity .12s,visibility 0s .12s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 3px 10px #0000001f}& .shuffle-button .control-tooltip{transform-origin:100% 100%;width:220px;left:auto;right:0;transform:none}@media (hover:hover){& :is(.connection-button,.shuffle-button):hover>.control-tooltip{opacity:1;visibility:visible;transition-delay:.2s}}& :is(.connection-button,.shuffle-button):focus-visible>.control-tooltip{opacity:1;visibility:visible;transition-delay:0s}@media (hover:hover){& .connection-button:hover{color:var(--color-blue-ink)}& .connection-button:hover:before{background:var(--color-surface)}}&[data-connected=false]{--macbook-scale:var(--single-scale);--macbook-offset:calc(var(--macbook-width) / -2);--shuffle-x:14;--connection-x:calc(var(--macbook-port-x) - 80);--connection-y:var(--reconnect-y);& .display-studio{opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}& .connected-cable{opacity:0}& .loose-cable{opacity:1}& .macbook .screen-set{--f:var(--single-f);--bar-top:var(--single-bar-top);--lane-pad:var(--single-lane-pad)}& .shuffle-button{top:-24px}& .connection-button{color:var(--color-success)}& .connection-button .control-tooltip{left:0;transform:none}& .icon-connect{display:initial}& .icon-disconnect{display:none}}}@media (width<=900px){.hero-demo .shuffle-button{top:calc(18 * var(--u))}}@media (width<=640px){.hero-demo{margin-top:120px}.hero-demo .shuffle-button,.hero-demo[data-connected=false] .shuffle-button{min-height:44px;padding:8px 9px;font-size:15px;top:-54px}.hero-demo .connection-button:before{inset:8px}.hero-demo .connection-icon{width:17px;height:17px}}@media (width<=380px){.hero-demo .shuffle-button{padding-inline:8px;font-size:13px}}@media (prefers-reduced-motion:reduce){.hero-demo{transition:none}.hero-demo .lane,.hero-demo .screen-set,.hero-demo .space,.hero-demo .screen-set[data-ready]>.space[data-present=true],.hero-demo .current-preview{transition:opacity .18s}.hero-demo .shuffle-button,.hero-demo .macbook,.hero-demo .connection-button,.hero-demo .display-cable,.hero-demo .loose-cable,.hero-demo .display-studio,.hero-demo[data-connected=false] .display-studio{transition:none}}