@layer components{.stage{position:relative;color:var(--color-fog-300);background-color:var(--color-graphite-950);--stage-kb:"160\202F kB";--ah:100cqh;--u:min((100cqw - 2 * var(--sx))/var(--fw,100),(var(--ah) - var(--st) - var(--sb))/var(--fh,100))}.stage-grid{position:absolute;inset:0;--line:rgb(255 255 255/0.035);--major:rgb(255 255 255/0.06);background-image:linear-gradient(to right,var(--major) 1px,transparent 1px),linear-gradient(to bottom,var(--major) 1px,transparent 1px),linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:calc(var(--u) * 50) calc(var(--u) * 50),calc(var(--u) * 50) calc(var(--u) * 50),calc(var(--u) * 10) calc(var(--u) * 10),calc(var(--u) * 10) calc(var(--u) * 10);background-position:calc(var(--sx) + (100cqw - 2 * var(--sx) - var(--fw) * var(--u)) / 2 + var(--ox) * var(--u)) calc(var(--st) + (var(--ah) - var(--st) - var(--sb) - var(--fh) * var(--u)) / 2 + var(--oy) * var(--u));transition:opacity var(--dur-fade) var(--ease-in-out)}.stage-drawing{position:absolute;inset:var(--st) var(--sx) var(--sb);z-index:1;pointer-events:none}.stage-drawing>figure{position:absolute;inset:0;inline-size:100%;block-size:100%}.stage-drawing>.stage-scale{inset-block-end:calc(20px - var(--sb));inset-inline-start:calc(16px - var(--sx))}.stage-drawing [data-geom]{transition:opacity var(--dur-fade) var(--ease-in-out)}.stage[data-view="3d"] :is(.stage-drawing [data-geom],.stage-grid){opacity:0}.stage-host{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-fade) var(--ease-in-out);touch-action:pan-y;pointer-events:none}.stage[data-view="3d"] .stage-host{opacity:1;pointer-events:auto;cursor:grab}.stage-host[data-dragging]{cursor:grabbing}.stage-host:focus-visible{outline-offset:-4px}.stage-canvas,.stage-snap{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block}.stage-snap{pointer-events:none;transition:opacity var(--dur-panel-in) var(--ease-out)}.stage-tr{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:3;margin:0}.stage-note{max-inline-size:min(18rem,calc(100% - 32px));color:var(--color-fog-300)}.sc-caption,.stage-caption,.stage-note{font-size:13px;line-height:1.4;text-wrap:pretty}.sc-caption,.stage-caption{margin:0;color:var(--color-fog-400)}.stage-caption{inset-block-end:16px;inset-inline-end:16px;max-inline-size:min(22rem,52%)}.stage-caption,.stage-scale{position:absolute;z-index:2;pointer-events:none}.stage-scale{inset-block-end:20px;inset-inline-start:16px;block-size:27px;font-size:12px;line-height:1.4;color:var(--color-fog-400);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}.stage-scale [data-scale-bar]{--c:var(--color-fog-500);display:block;inline-size:calc(var(--u) * 20);block-size:6px;background:linear-gradient(var(--c),var(--c)) 0 100% /100% 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0 /1px 100% no-repeat,linear-gradient(var(--c),var(--c)) 50% 100% /1px 4px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0 /1px 100% no-repeat}.stage-scale>span[aria-hidden]{position:absolute;inset-block-start:9px;left:0;translate:-50% 0}.stage-scale>span:nth-child(3){left:50%}.stage-scale>span:nth-child(4){left:100%;translate:-.6em 0}.stage-seg{border-color:var(--color-fog-500);background-color:var(--color-graphite-950)}.stage-seg .segment{min-height:32px;padding-inline:12px;border-color:var(--color-graphite-800);color:var(--color-fog-300);font-family:var(--font-label);font-size:13px}@media (pointer:coarse){.stage-seg .segment{min-height:44px;padding-inline:14px}}.stage-seg .segment[aria-checked=true]{background-color:var(--color-white);color:var(--color-graphite-950)}.stage-seg .segment[aria-checked=true]:focus-visible{outline-color:var(--color-graphite-950)}@media (hover:hover) and (pointer:fine){.stage-seg .segment[aria-checked=false]:hover{background-color:var(--color-graphite-800);color:var(--color-white)}}.stage[aria-busy=true] .stage-seg{cursor:progress}.stage[aria-busy=true] .stage-seg .segment[aria-checked=true]:after{content:"";display:inline-block;inline-size:10px;block-size:10px;margin-inline-start:8px;border:1.5px solid;border-inline-end-color:transparent;border-radius:50%;vertical-align:-1px;animation:site-spin var(--dur-spin) linear infinite}.stage .btn[aria-busy=true]>.btn-busy{display:flex;gap:8px;align-items:center;justify-content:center}.stage .btn[aria-busy=true]>.btn-busy:after{content:var(--stage-kb);font-variant-numeric:tabular-nums lining-nums}.stage-media{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}@media (min-width:1024px){.stage-media-phone{display:none}}.stage-play{position:absolute;inset-block-end:16px;inset-inline-end:16px;z-index:3;display:grid;place-items:center;inline-size:44px;block-size:44px;border:1px solid var(--color-fog-500);border-radius:var(--radius-control);background-color:var(--color-graphite-950);color:var(--color-white);cursor:pointer;transition:background-color var(--dur-hover) var(--ease-out)}@media (hover:hover) and (pointer:fine){.stage-play:hover{background-color:var(--color-graphite-800)}}.stage:has(>.stage-play) .stage-caption{inset-inline-end:72px;padding:4px 8px;background-color:var(--color-graphite-950)}.showcase-stage{background-color:transparent}.showcase-stage .tabs-list{gap:32px;border-block-end-color:var(--color-graphite-800)}.showcase-stage .tab{min-inline-size:44px;color:var(--color-fog-400)}.showcase-stage .tab[aria-selected=true]{color:var(--color-white)}.showcase-stage .tabs-list:not([data-measured]) .tab[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--color-white)}.showcase-stage .tabs-indicator{background-color:var(--color-white)}@media (hover:hover) and (pointer:fine){.showcase-stage .tab:hover{color:var(--color-white)}}.showcase-stage .tab-panel{padding-block-start:32px}.sc-grid{display:grid;gap:32px}@media (min-width:1024px){.sc-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}.sc-frame{grid-column:1/span 8;align-self:start}.sc-panel{grid-column:9/span 4}}.sc-frame{position:relative;min-inline-size:0}.sc-frame-in{position:relative;aspect-ratio:1/1;overflow:hidden;--st:68px;--sb:64px;--sx:20px;--gap:28px}@media (min-width:768px){.sc-frame-in{aspect-ratio:16/11;--sx:40px;--sb:72px}}@media (max-width:767px){.sc-frame-in{aspect-ratio:auto;--st:16px;--sb:72px;--sx:16px}.sc-frame-in:before{content:"";display:block;aspect-ratio:1;margin-block-end:56px}.sc-frame-in>.stage-host{inset:0 0 56px}.sc-frame-in>.stage-tr{inset-block:auto 6px;inset-inline-end:8px}.showcase-stage .sc-static .stage-scale{inset-block-end:14px;inset-inline-start:16px}.sc-static .sc-tools{inset-block-end:64px}}.sc-static{position:absolute;inset:0;z-index:1;container-type:size;pointer-events:none;--u:min((100cqw - 2 * var(--sx))/var(--fw,100),(100cqh - var(--st) - var(--sb))/var(--fh,100))}@media (min-width:768px){.sc-static:is([data-place=left],[data-place=right],[data-place=free]){--u:min((100cqw - 2 * var(--sx) - var(--gap))/var(--vw,100),(100cqh - var(--st) - var(--sb))/var(--vh,100))}.sc-static:is([data-place=above],[data-place=below]){--u:min((100cqw - 2 * var(--sx))/var(--vw,100),(100cqh - var(--st) - var(--sb) - var(--gap))/var(--vh,100))}}.sc-views{position:absolute;inset:var(--st) var(--sx) var(--sb);display:flex;align-items:center;justify-content:center;gap:var(--gap);transition:opacity var(--dur-fade) var(--ease-in-out) var(--dur-panel-out),visibility 0s}.showcase-stage[data-view="3d"] .sc-views{opacity:0;visibility:hidden;transition:opacity var(--dur-panel-out) var(--ease-out),visibility 0s var(--dur-panel-out)}.showcase-stage .stage-host{transition:opacity var(--dur-panel-out) var(--ease-out)}.showcase-stage[data-view="3d"] .stage-host{transition:opacity var(--dur-fade) var(--ease-in-out) var(--dur-panel-out)}[data-place=left]>.sc-views{flex-direction:row-reverse}[data-place=above]>.sc-views{flex-direction:column-reverse}[data-place=below]>.sc-views{flex-direction:column}.sc-front,.sc-side{position:relative;flex:none;margin:0;inline-size:calc(var(--u) * var(--fw));block-size:calc(var(--u) * var(--fh))}.sc-side{inline-size:calc(var(--u) * var(--sw));block-size:calc(var(--u) * var(--sh))}:is(.sc-front,.sc-side)>figure{inline-size:100%;block-size:100%}.sc-side figcaption{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-start:0;font-size:12px;line-height:1.4;color:var(--color-fog-400);white-space:nowrap}@media (max-width:767px){.sc-side{display:none}}.sc-marker{position:absolute;top:0;left:0;z-index:2;display:grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border:0;background:none;color:var(--color-white);cursor:pointer;opacity:0;transition:opacity var(--dur-hover) var(--ease-out)}.sc-marker[data-placed]{opacity:1}.sc-static .sc-marker{pointer-events:auto}.showcase-stage:not([data-view="3d"]) .sc-marker{display:none}.sc-marker>span{display:grid;place-items:center;inline-size:24px;block-size:24px;border:1px solid var(--color-fog-300);border-radius:50%;background-color:var(--color-graphite-950);font-size:12px;line-height:1;transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}@media (hover:hover) and (pointer:fine){.sc-grid:has(.sc-feature[data-f="0"]:hover) [data-marker="0"]>span,.sc-grid:has(.sc-feature[data-f="1"]:hover) [data-marker="1"]>span,.sc-grid:has(.sc-feature[data-f="2"]:hover) [data-marker="2"]>span,.sc-grid:has(.sc-feature[data-f="3"]:hover) [data-marker="3"]>span,.sc-grid:has(.sc-feature[data-f="4"]:hover) [data-marker="4"]>span,.sc-grid:has(.sc-feature[data-f="5"]:hover) [data-marker="5"]>span,.sc-marker:hover>span{border-color:var(--color-white);box-shadow:0 0 0 1px var(--color-white)}.sc-grid:has([data-marker="0"]:hover) [data-f="0"],.sc-grid:has([data-marker="1"]:hover) [data-f="1"],.sc-grid:has([data-marker="2"]:hover) [data-f="2"],.sc-grid:has([data-marker="3"]:hover) [data-f="3"],.sc-grid:has([data-marker="4"]:hover) [data-f="4"],.sc-grid:has([data-marker="5"]:hover) [data-f="5"],button.sc-feature:hover{background-color:var(--color-graphite-900);color:var(--color-white)}}.sc-marker[aria-pressed=true]>span{border-color:var(--color-white);background-color:var(--color-white);color:var(--color-graphite-950)}.sc-marker:focus-visible{outline-offset:-6px;border-radius:50%}.sc-callout{position:absolute;inset:0;z-index:2;pointer-events:none}.sc-callout>svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}.sc-callout [data-lines]{fill:none;stroke:var(--color-fog-300);stroke-width:1px}.sc-callout [data-heads]{fill:var(--color-fog-300)}.sc-callout [data-heads],.sc-callout-label{opacity:0;transition:opacity var(--dur-hover) var(--ease-out)}.sc-callout[data-drawn] :is([data-heads],.sc-callout-label){opacity:1}.sc-callout-label{position:absolute;top:0;left:0;display:grid;grid-template-columns:20px auto;column-gap:10px;row-gap:2px;align-items:baseline;color:var(--color-white);white-space:nowrap}.sc-layer,.sc-row{display:contents}.sc-callout-label .sc-row>*{grid-column:2}.sc-callout-label .sc-row>.sc-balloon{grid-column:1;grid-row:1/span 3;align-self:start;margin-block-start:2px}.sc-ctol{font-size:14px;line-height:1.4;color:var(--color-fog-300);font-variant-numeric:tabular-nums lining-nums}.sc-callout-label .gdt-frame{margin-block-start:4px}.sc-balloon{display:inline-grid;place-items:center;inline-size:20px;block-size:20px;border:1px solid var(--color-fog-300);border-radius:50%;color:var(--color-white);font-size:12px;line-height:1}.sc-tools{position:absolute;inset-block-end:8px;inset-inline-start:8px;display:flex;pointer-events:auto}.showcase-stage:not([data-view="3d"]) .sc-tools{display:none}.sc-tool{min-inline-size:36px;min-block-size:36px;padding-inline:10px;border:0;border-radius:var(--radius-control);background:none;color:var(--color-fog-300);font-family:var(--font-label);font-size:13px;font-weight:var(--fw-ui);line-height:1.2;cursor:pointer;transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}@media (pointer:coarse){.sc-tool{min-inline-size:44px;min-block-size:44px;padding-inline:6px}}@media (hover:hover) and (pointer:fine){.sc-tool:hover{background-color:var(--color-graphite-800);color:var(--color-white)}}.sc-tool:active{transform:translateY(var(--press));transition-duration:var(--dur-press)}@media (min-width:768px){.stage[data-view="3d"] .sc-static .stage-scale{inset-block-end:56px;inset-inline-start:18px}}@media (min-width:768px) and (pointer:coarse){.stage[data-view="3d"] .sc-static .stage-scale{inset-block-end:64px}}.sc-caption{margin-block-start:12px}@media (min-width:768px){.sc-caption{position:absolute;inset-block-end:16px;inset-inline-end:16px;z-index:2;max-inline-size:min(22rem,46%);margin:0;pointer-events:none}}.sc-panel{min-inline-size:0}.sc-ftitle{margin:32px 0 0;padding-block-end:10px;border-block-end:1px solid var(--color-fog-500);color:var(--color-fog-400)}.sc-features{margin:0;padding:0;list-style:none}.sc-feature{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline;inline-size:100%;min-block-size:44px;padding:12px 8px 12px 0;border:0;border-block-end:1px solid var(--color-graphite-800);background:none;color:var(--color-fog-300);font:inherit;text-align:start;transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}button.sc-feature{cursor:pointer}.sc-feature .sc-balloon{grid-row:1/span 2;align-self:start;margin-block-start:1px}.sc-fname{grid-column:2/span 2;font-size:15px;line-height:1.45}.sc-fvalue{grid-column:2}.sc-feature .sc-ctol{grid-column:3;text-align:end}.sc-feature[aria-pressed=true]{color:var(--color-white)}.sc-feature[aria-pressed=true] .sc-balloon{border-color:var(--color-white);background-color:var(--color-white);color:var(--color-graphite-950)}.sc-feature:focus-visible{outline-offset:-2px}.sc-fnote{margin:12px 0 0;font-size:13px;line-height:1.4;color:var(--color-fog-400)}.gdt-frame{display:inline-flex;align-items:stretch;border:1px solid var(--color-fog-300);font-size:13px;line-height:1;font-variant-numeric:tabular-nums lining-nums}.gdt-frame>span{display:inline-grid;place-items:center;min-inline-size:22px;padding:3px 6px;border-inline-start:1px solid var(--color-fog-300)}.gdt-frame>span:first-child{border-inline-start:0}.stage-hint-load,.stage-hint-static{display:none}@media (hover:hover){.stage-hint-touch{display:none}}@media not all and (hover:hover){.stage-hint-pointer{display:none}}section:has(.showcase-stage:is([data-phase=offer],[data-phase=loading],[data-phase=failed])) .stage-hint-load,section:has(.showcase-stage[data-phase=unavailable]) .stage-hint-static{display:inline}section:has(.showcase-stage:is([data-phase=offer],[data-phase=loading],[data-phase=failed],[data-phase=unavailable])) :is(.stage-hint-pointer,.stage-hint-touch){display:none}}