.calcite-mode-light{color-scheme:light}.calcite-mode-dark{color-scheme:dark}.calcite-mode-light .preview iframe{color-scheme:light}.calcite-mode-dark .preview iframe{color-scheme:dark}body{height:100dvh;font-family:var(--calcite-font-family);background:var(--calcite-color-background);color:var(--calcite-color-text-1);flex-direction:column;margin:0;display:flex;overflow:hidden}.header-actions{align-items:center;height:100%;display:flex}#step-count{font-size:var(--calcite-font-size-sm);color:var(--calcite-color-text-2);white-space:nowrap;padding-inline:.75rem}body:not([data-presenting]) #step-count,body[data-presenting] :is(#theme-toggle,#copy-file,#download-file,#download-zip){display:none}.layout{grid-template-columns:var(--split,40%) auto minmax(0, 1fr);flex:1;min-height:0;display:grid}body[data-docs-hidden]{& .layout{grid-template-columns:auto minmax(0,1fr)}& .docs,& .splitter{display:none}& .docs-toggle{left:0;transform:translateY(-50%)}}.gutter{background:var(--calcite-color-border-3);width:4px;position:relative}.splitter,.preview-splitter{touch-action:none;background:var(--calcite-color-border-3);transition:background .15s;&:hover,&:focus-visible,.layout[data-resizing] &.splitter,.right[data-resizing] &.preview-splitter{background:var(--calcite-color-brand);outline:none}}.splitter{cursor:col-resize;height:100%}.preview-splitter{cursor:row-resize;flex:none;height:4px}.docs-toggle{z-index:1;--calcite-action-background-color:var(--calcite-color-foreground-1);border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-pill);box-shadow:var(--calcite-shadow-sm);position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}[data-resizing]{user-select:none;& iframe{pointer-events:none}}.layout[data-resizing]{cursor:col-resize}.right[data-resizing]{cursor:row-resize}.docs,.code{scrollbar-width:thin;scrollbar-color:var(--calcite-color-border-1) transparent}.docs{--gutter:1.5rem;overflow-wrap:break-word;counter-reset:step;min-width:0;min-height:0;padding:var(--gutter) 0 var(--tail,60vh);background:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size-md);color:var(--calcite-color-text-2);line-height:1.6;overflow-y:auto;&>:not(.step),& .intro>*,& .step>*{max-width:70ch}&>:not(.step){margin-inline:var(--gutter)}& h1,& h2,& h3{color:var(--calcite-color-text-1);font-weight:var(--calcite-font-weight-semibold);line-height:1.3}& h1{font-size:var(--calcite-font-size-2xl);margin-block:0 1.5rem}& p,& ul,& ol{margin-block:0 .75rem}& blockquote{border-inline-start:3px solid var(--calcite-color-brand);border-radius:var(--calcite-corner-radius-round);background:color-mix(in srgb, var(--calcite-color-brand) 8%, var(--calcite-color-foreground-1));color:var(--calcite-color-text-2);margin:1rem 0;padding:.75rem 1rem .75rem 1.125rem;&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}}& a{color:var(--calcite-color-text-link)}&>h2{font-size:var(--calcite-font-size-xl);margin-block:2.5rem .75rem}& :not(pre)>code{border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-round);background:var(--calcite-color-foreground-2);font-family:var(--calcite-font-family-code);color:var(--calcite-color-text-1);padding:.1em .35em;font-size:.875em}& .hint{display:inline-block;position:relative}& .hint-label{appearance:none;border:0;border-block-end:1px dashed var(--calcite-color-brand);color:inherit;font:inherit;text-align:inherit;cursor:help;background:0 0;padding:0;&:hover,&:focus-visible{color:var(--calcite-color-text-link);outline:none}}& .hint-popover{z-index:3;border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-round);opacity:0;visibility:hidden;pointer-events:none;background:var(--calcite-color-foreground-1);width:max-content;max-width:min(22rem,100vw - 1rem);box-shadow:var(--calcite-shadow-md);color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-sm);padding:.625rem .75rem;line-height:1.45;transition:opacity .15s,transform .15s,visibility .15s;position:fixed;top:0;left:0;transform:translateY(.25rem);&:after{content:"";border-inline-end:1px solid var(--calcite-color-border-2);border-block-end:1px solid var(--calcite-color-border-2);background:var(--calcite-color-foreground-1);width:.625rem;height:.625rem;position:absolute;inset-block-start:100%;inset-inline-start:var(--hint-arrow-left,50%);transform:translate(-50%,-50%)rotate(45deg)}&>:first-child{margin-block-start:0}&>:last-child{margin-block-end:0}}& .hint[data-open] .hint-popover{opacity:1;visibility:visible;pointer-events:auto;transform:none}& details{border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-round);background:color-mix(in srgb, var(--calcite-color-foreground-2) 72%, transparent);margin-block:1rem;overflow:clip;&[open]{border-color:var(--calcite-color-border-2);background:var(--calcite-color-foreground-1)}&>:not(summary){margin-inline:1rem}&>:last-child{margin-block-end:1rem}}& summary{color:var(--calcite-color-text-1);cursor:pointer;padding:.625rem 1rem;&:hover{background:var(--calcite-color-foreground-2)}&:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}}& pre{border:1px solid var(--calcite-color-border-2);border-radius:var(--calcite-corner-radius-round);background:var(--calcite-color-inverse);color:var(--calcite-color-text-inverse);font-family:var(--calcite-font-family-code);scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--calcite-color-text-inverse) 50%, transparent) transparent;margin-block:1rem;padding:.875rem 1rem;font-size:.875rem;line-height:1.55;position:relative;overflow:auto;& code{min-width:max-content;color:inherit;font:inherit;background:0 0;padding-inline-end:3.25rem;display:block}}& .docs-code-copy{z-index:1;border:1px solid color-mix(in srgb, var(--calcite-color-text-inverse) 18%, transparent);border-radius:var(--calcite-corner-radius-round);opacity:0;background:color-mix(in srgb, var(--calcite-color-inverse) 86%, var(--calcite-color-foreground-1));color:var(--calcite-color-text-inverse);font:var(--calcite-font-size-xs) / 1.2 var(--calcite-font-family);cursor:pointer;padding:.25rem .5rem;transition:opacity .15s,border-color .15s,background-color .15s;position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;&:hover,&:focus-visible{border-color:color-mix(in srgb, var(--calcite-color-text-inverse) 34%, transparent);background:color-mix(in srgb, var(--calcite-color-inverse) 76%, var(--calcite-color-foreground-1));outline:none}}& pre:hover .docs-code-copy,& pre:focus-within .docs-code-copy{opacity:1}}.intro{border-bottom:1px solid var(--calcite-color-border-3);color:var(--calcite-color-text-2);padding:0 0 1.5rem;&>:first-child{margin-top:0}&>:last-child{margin-bottom:0}& h2,& h3{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-xl);margin-block:0 .75rem}}.intro+.step{border-top:0}.step{counter-increment:step;padding:1.25rem var(--gutter);border-top:1px solid var(--calcite-color-border-3);cursor:pointer;transition:background-color .2s,box-shadow .2s;&:last-of-type{border-bottom:1px solid var(--calcite-color-border-3)}&>:first-child{margin-top:0}&>:last-child{margin-bottom:0}& h2,& h3{font-size:var(--calcite-font-size-lg);margin-block:0 .5rem}&>:is(h2,h3):first-child{align-items:baseline;gap:.625rem;display:flex;&:before{content:counter(step);border-radius:var(--calcite-corner-radius-pill);background:var(--calcite-color-foreground-3);width:1.5rem;height:1.5rem;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-medium);flex:none;align-self:center;place-items:center;display:grid}}&[data-active]{cursor:auto;background:var(--calcite-color-foreground-2);box-shadow:inset 3px 0 0 var(--calcite-color-brand);& :not(pre)>code{border-color:var(--calcite-color-border-2);background:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px color-mix(in srgb, var(--calcite-color-brand) 12%, transparent)}& details:not([open]){border-color:var(--calcite-color-border-2);background:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px color-mix(in srgb, var(--calcite-color-brand) 10%, transparent)}&>:is(h2,h3):first-child:before{background:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}}}.var-field{margin-block:1rem;& calcite-action[slot=action]{--calcite-action-background-color:var(--calcite-color-foreground-1);box-sizing:border-box;border:1px solid var(--calcite-color-border-input);border-inline-start:0}}.right{background:var(--calcite-color-foreground-1);min-width:0;min-height:0;color:var(--calcite-color-text-1);flex-direction:column;display:flex}.panel-header{background:var(--calcite-color-background);border-bottom:1px solid var(--calcite-color-border-3);flex:none;align-items:center;min-height:2.75rem;padding-inline:.25rem;display:flex;& calcite-tab-nav{flex:1;align-self:stretch;min-width:0}& calcite-tab-nav[hidden]{display:none}&>calcite-action,&>.zip-action,&>calcite-segmented-control,&>calcite-dropdown{flex:none}&>calcite-segmented-control,&>calcite-dropdown{margin-inline:.5rem 0}&>:is(calcite-segmented-control,calcite-dropdown)[hidden]{display:none}}.header-divider{background:var(--calcite-color-border-3);flex:none;width:1px;height:1.75rem;margin-inline:.75rem .25rem}#variant-notice{flex:none}.zip-action{display:inline-flex;position:relative;&[data-count]:after{content:attr(data-count);box-sizing:border-box;background:var(--calcite-color-foreground-3);min-width:.875rem;height:.875rem;color:var(--calcite-color-text-2);box-shadow:0 0 0 1.5px var(--calcite-color-background);font:var(--calcite-font-weight-medium) .5625rem/.875rem var(--calcite-font-family);font-variant-numeric:tabular-nums;text-align:center;pointer-events:none;border-radius:.4375rem;padding-inline:.1875rem;position:absolute;top:.125rem;right:0}}.panel-title{font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-medium);padding-inline:.75rem}.code-panel{flex-direction:column;flex:1;min-height:0;display:flex;&[hidden]{display:none}}.code{font-family:var(--calcite-font-family-code);flex:1;font-size:.8125rem;line-height:1.7;overflow:auto;&[hidden]{display:none}& .shiki{min-width:max-content;font:inherit;background:0 0;margin:0;padding:1rem 0}& .line{box-sizing:border-box;width:100%;padding-inline:0 1.25rem;transition:background-color .2s;display:inline-block;&:before{content:attr(data-line);box-sizing:border-box;width:2.75rem;color:var(--calcite-color-text-3);text-align:right;user-select:none;padding-inline-end:.875rem;display:inline-block}}body[data-code-wrap] &{overflow-x:hidden;& .shiki{white-space:normal;min-width:0}& .line{width:auto;white-space:pre-wrap;overflow-wrap:anywhere;min-block-size:1lh;padding-inline:2.75rem 1.25rem;display:block;position:relative;&:before{position:absolute;inset-block-start:0;inset-inline-start:0}}}& .shiki span{color:light-dark(var(--shiki-light),var(--shiki-dark));transition:color .2s}&[data-has-focus] .line:not([data-focus]) span{color:var(--calcite-color-text-3)}& .line[data-focus]{background:color-mix(in srgb, var(--calcite-color-brand) 14%, transparent);box-shadow:inset 2px 0 0 var(--calcite-color-brand)}}.media-panel{flex:1;place-items:center;min-height:0;padding:1.5rem;display:grid;container-type:size;&[hidden]{display:none}& calcite-carousel{width:100%}}.step-image{cursor:zoom-in;width:auto;max-width:100%;height:auto;max-height:calc(100cqh - 4rem);margin-inline:auto;display:block}:is(.preview,.result){flex:0 0 var(--preview-split,50%);flex-direction:column;min-height:0;display:flex;&[hidden]{display:none}&:not(:has(:is(.preview-frame,.result-frame):not([hidden]))){border-top:1px solid var(--calcite-color-border-3);flex:none;& .preview-splitter{display:none}}& .panel-header{gap:.25rem}& :is(#preview-toggle,.panel-title,.result-badge){margin-inline-end:auto}& .panel-header>[hidden],& .result-request>[hidden]{display:none}}body[data-maximized=code] :is(.code-panel,.media-panel):not([hidden]),body[data-maximized=preview] :is(.preview,.result):not([hidden]){z-index:10;background:var(--calcite-color-foreground-1);position:fixed;inset:0;& .preview-splitter{display:none}}body[data-maximized=preview] .right:after{content:"";flex:0 0 var(--preview-split,50%)}.media-restore{display:none}body[data-maximized=code] .media-panel:not([hidden])~.media-restore{z-index:11;background:var(--calcite-color-foreground-1);border-radius:var(--calcite-corner-radius-round);box-shadow:var(--calcite-shadow-sm);display:flex;position:fixed;top:.5rem;right:.5rem}.result-badge{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--calcite-font-size-xs);font-weight:var(--calcite-font-weight-medium);background:var(--calcite-color-foreground-3);color:var(--calcite-color-text-2);border-radius:1rem;padding:.125rem .625rem;overflow:hidden;&[hidden]{display:none}&[data-state=running]{color:light-dark(#00619b,#79c0ff);background:light-dark(#e2eff9,#0d2a40)}&:is([data-state=live],[data-state=kept]){color:light-dark(#24692e,#7ee787);background:light-dark(#e3f2e5,#1b3a22)}&[data-state=fallback]{color:light-dark(#5c4300,#e3b341);background:light-dark(#fff4d6,#3d3007)}&[data-state=error]{color:light-dark(#b3261e,#ff7b72);background:light-dark(#fdecea,#3d1512)}}.result-run-as{font-size:var(--calcite-font-size-sm);color:var(--calcite-color-text-2);white-space:nowrap;align-items:center;gap:.5rem;margin-inline-end:.25rem;display:flex}#result-run{margin-inline:.25rem .5rem}.result-live{flex-direction:column;flex:1;min-width:0;display:flex}.result-request{background:var(--calcite-color-foreground-2);border-bottom:1px solid var(--calcite-color-border-3);font-size:var(--calcite-font-size-xs);color:var(--calcite-color-text-2);flex:none;align-items:flex-start;gap:.625rem;padding:.125rem .5rem .125rem 1rem;display:flex;&[hidden]{display:none}& .result-request-line{overflow-wrap:anywhere;min-width:0;max-height:calc(4lh + .75rem);line-height:1.5;font-family:var(--calcite-font-family-code);flex:1;padding-block:.375rem;overflow-y:auto}& .result-request-source{white-space:nowrap;color:var(--calcite-color-text-3);padding-block:.375rem;line-height:1.5}}:is(#result-notice,#result-error){flex:none}#result-tabs{flex:none;padding-inline:.5rem;&[hidden]{display:none}}.result-headers{padding:.75rem 1rem;& table{border-collapse:collapse;width:100%;font:var(--calcite-font-size-sm) / 1.6 var(--calcite-font-family-code)}& tr+tr{border-top:1px solid var(--calcite-color-border-3)}& :is(th,td){vertical-align:top;text-align:start;padding:.25rem 0}& th{white-space:nowrap;width:1%;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);padding-inline-end:1.5rem}& td{overflow-wrap:anywhere;color:var(--calcite-color-text-1)}& .result-headers-note{font-size:var(--calcite-font-size-xs);color:var(--calcite-color-text-3);margin:.75rem 0 0}}.result-more{border-top:1px solid var(--calcite-color-border-3);font-size:var(--calcite-font-size-xs);color:var(--calcite-color-text-2);flex:none;align-items:center;gap:.75rem;padding:.5rem 1rem;display:flex}.result-frame{flex:1;min-height:0;display:flex;container:result-frame/size;&[hidden]{display:none}}@container result-frame (height<=16rem){.result-request .result-request-line{max-height:calc(2lh + .75rem)}.result-frame>.result-live{overflow-y:auto}.result-frame>.result-live>*{flex-shrink:0}.result-live>.result-body{flex:none;overflow:visible}}@container result-frame (width<=32rem){.result-request .result-request-source{display:none}}.result-body{flex-direction:column;flex:1;min-width:0;display:flex;overflow:auto;&:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}& pre{font:var(--calcite-font-size-sm) / 1.6 var(--calcite-font-family-code);white-space:pre-wrap;overflow-wrap:anywhere;flex:1;margin:0;padding:.75rem 1rem}& pre[data-error]{color:var(--calcite-color-status-danger);font-family:var(--calcite-font-family)}& pre.result-message{font-family:var(--calcite-font-family);color:var(--calcite-color-text-2);flex:none}}.result-json{font:var(--calcite-font-size-sm) / 1.6 var(--calcite-font-family-code);color:light-dark(#1f2328,#e6edf3);flex:1;padding:.75rem 1rem .75rem .5rem;& ul{margin:0;padding:0;list-style:none}& [role=group]{padding-inline-start:1.125rem}& [role=treeitem]{outline:none;&:focus-visible>.jt-row:first-child{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}&[aria-expanded]>.jt-row:first-child{cursor:pointer}&[aria-expanded=false]>:is([role=group],.jt-row:last-child:not(:first-child)),&[aria-expanded=true]>.jt-row>.jt-when-closed,&[aria-expanded=false]>.jt-row>.jt-when-open{display:none}}& .jt-row{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:2px;display:flex;&>:not(.jt-caret){min-width:0}}& .jt-caret{color:light-dark(#6a6a6a,#8b949e);user-select:none;flex:none;width:1rem}& [aria-expanded=true]>.jt-row:first-child>.jt-caret:before{content:"▾"}& [aria-expanded=false]>.jt-row:first-child>.jt-caret:before{content:"▸"}& .jt-key{color:light-dark(#0550ae,#79c0ff)}& .jt-str{color:light-dark(#0a3069,#a5d6ff)}& :is(.jt-num,.jt-lit){color:light-dark(#953800,#ffa657)}& .jt-dim{color:light-dark(#6a6a6a,#8b949e);user-select:none;margin-inline-start:1ch}& .jt-more{border:1px solid var(--calcite-color-border-1);background:var(--calcite-color-foreground-1);color:var(--calcite-color-brand);font:inherit;font-family:var(--calcite-font-family);cursor:pointer;border-radius:4px;margin:.125rem 0 .125rem 1rem;padding:.125rem .5rem;&:hover{background:var(--calcite-color-foreground-2)}&:focus-visible{outline:2px solid var(--calcite-color-brand);outline-offset:1px}}}.result-terminal{color:#c9d1d9;background:#1b1b1b;& .term-prompt{color:#3fb950;user-select:none}& .term-command{color:#fff;font-weight:600}& .term-black{color:#6e7681}& .term-red{color:#ff7b72}& .term-green{color:#3fb950}& .term-yellow{color:#d29922}& .term-blue{color:#58a6ff}& .term-magenta{color:#bc8cff}& .term-cyan{color:#39c5cf}& .term-white{color:#b1bac4}& .term-bright-black{color:#8b949e}& .term-bright-red{color:#ffa198}& .term-bright-green{color:#56d364}& .term-bright-yellow{color:#e3b341}& .term-bright-blue{color:#79c0ff}& .term-bright-magenta{color:#d2a8ff}& .term-bright-cyan{color:#56d4dd}& .term-bright-white{color:#fff}& .term-bold{font-weight:600}& .term-dim{opacity:.7}& .term-italic{font-style:italic}& .term-underline{text-decoration:underline}}.result-image{box-sizing:border-box;object-fit:contain;max-width:100%;max-height:100%;margin:auto;padding:.75rem;display:block}.result-empty{text-align:center;font-size:var(--calcite-font-size-sm);color:var(--calcite-color-text-3);margin:auto;padding:1rem}.preview-frame{flex:1;min-height:0;display:flex;&[hidden]{display:none}& iframe{background:#fff;border:0;flex:1}}#image-viewer{--calcite-dialog-size-x:96vw;--calcite-dialog-size-y:94vh;--calcite-dialog-content-space:.5rem;& img{object-fit:contain;width:100%;height:calc(94vh - 5rem);display:block}}.series-home{width:3rem;color:var(--calcite-color-text-3);border-inline-end:1px solid var(--calcite-color-border-3);justify-content:center;align-self:stretch;align-items:center;display:inline-flex;&:hover{color:var(--calcite-color-text-1);background:var(--calcite-color-foreground-2)}&:focus-visible{outline:2px solid var(--calcite-color-focus,var(--calcite-color-brand));outline-offset:-2px}}.family-switcher{align-items:center;height:100%;padding-inline:.5rem;display:flex}.family-prefix{color:var(--calcite-color-text-3)}@media (width<=720px){.family-prefix{display:none}}