[data-ds-shape=square],:host([data-ds-shape="square"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: .5px}[data-ds-shape=rounded],:host([data-ds-shape="rounded"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=circular],:host([data-ds-shape="circular"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=rounded],:host([data-ds-shape="rounded"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root,:host,:where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:where(.ds-row):not(tr){box-sizing:border-box;display:flex;flex-direction:row;align-items:flex-end;gap:calc(4px * var(--ds-sf));min-width:0;height:var(--ds-row-height);margin:0;line-height:var(--ds-type-lineheight-default)}:where(.ds-row--auto):not(tr){height:auto;min-height:var(--ds-row-height)}:where(.ds-row--stacked):not(tr){flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;height:auto}a.ds-row,button.ds-row,.ds-row__target{appearance:none;box-sizing:border-box;margin:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;text-decoration:none;text-transform:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}a.ds-row,button.ds-row{position:relative;width:100%;line-height:var(--ds-type-lineheight-default);padding:0 var(--ds-row-padding, calc(4px * var(--ds-sf)));border-radius:var(--ds-row-radius, 0)}.ds-row__target{padding:0}.ds-row.ds-row--stacked{line-height:var(--ds-row-height)}.ds-row:has(.ds-row__target){position:relative;isolation:isolate}:where(.ds-row:has(.ds-row__target)):not(tr){padding-inline:var(--ds-row-padding, calc(4px * var(--ds-sf)))}.ds-row__target:before,.ds-row__target:after{content:"";position:absolute;inset:0;border-radius:var(--ds-row-radius, 0)}.ds-row__target:before{z-index:1}.ds-row__target:after{z-index:-1}.ds-row:has(.ds-row__target) :where(a[href],button,input,select,textarea,label,summary,[tabindex]):not(.ds-row__target){position:relative;z-index:2}a.ds-row,button.ds-row{isolation:isolate}a.ds-row:after,button.ds-row:after{content:"";position:absolute;z-index:-1;pointer-events:none}a.ds-row:after,button.ds-row:after,.ds-row__target:after{--ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));inset:calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang)) calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang)) calc(0px - var(--ds-row-overhang));border-radius:var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))))}:is(a,button).ds-row:is(.ds-row--stacked,.ds-row--auto):after,:is(.ds-row--stacked,.ds-row--auto) .ds-row__target:after{inset:0}a.ds-row[href]:hover:after,button.ds-row:hover:not(:disabled):after,.ds-row__target:is(a[href],button:not(:disabled)):hover:after{background:var(--ds-row-fill-hover, var(--ds-fill))}a.ds-row[href]:active:after,button.ds-row:active:not(:disabled):after,.ds-row__target:is(a[href],button:not(:disabled)):active:after{background:var(--ds-row-fill-press, var(--ds-fill-hover))}.ds-row:is(a,button)[aria-current]:not([aria-current=false]):after,.ds-row__target[aria-current]:not([aria-current=false]):after{background:var(--ds-row-fill-current, var(--ds-fill-hover))}.ds-row:is(a,button)[aria-current]:not([aria-current=false]),.ds-row:has(.ds-row__target[aria-current]:not([aria-current=false])){--ds-type-weight-default: var(--ds-row-current-weight, 500);font-weight:var(--ds-row-current-weight, 500)}a.ds-row:focus-visible:after,button.ds-row:focus-visible:after,.ds-row__target:focus-visible:after{outline:2px solid var(--ds-focus-ring);outline-offset:-2px}a.ds-row:not([href]),a.ds-row[aria-disabled=true],button.ds-row:disabled,button.ds-row[aria-disabled=true],.ds-row:has(.ds-row__target:is(:disabled,[aria-disabled=true],a:not([href]))){cursor:default;opacity:.5}.ds-row__target:is(:disabled,[aria-disabled=true],a:not([href])){cursor:default}a.ds-row[aria-disabled=true]:hover:after,button.ds-row[aria-disabled=true]:hover:after{background:none}.ds-row--nav{--ds-row-radius: calc(2px * var(--ds-sf))}.ds-sidebar{box-sizing:border-box;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none;color:var(--ds-text-color);font-family:var(--ds-typeface-regular);font-feature-settings:var(--ds-font-features);font-size:var(--ds-type-size-default);font-weight:var(--ds-type-weight-default);line-height:var(--ds-type-lineheight-default);letter-spacing:var(--ds-type-letterspacing-default)}.ds-sidebar__item{box-sizing:border-box;display:flex;align-items:flex-end;height:var(--ds-row-height);min-width:0;margin:0;padding-block:0;padding-inline:calc(var(--ds-sidebar-indent, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));white-space:nowrap;cursor:pointer;user-select:none;outline:none;-webkit-tap-highlight-color:transparent}.ds-sidebar__item[hidden]{display:none}.ds-sidebar__item[aria-level="2"]{--ds-sidebar-indent: 1}.ds-sidebar__item[aria-level="3"]{--ds-sidebar-indent: 2}.ds-sidebar__item[aria-level="4"]{--ds-sidebar-indent: 3}.ds-sidebar__item[aria-level="5"]{--ds-sidebar-indent: 4}.ds-sidebar__item[aria-level="6"]{--ds-sidebar-indent: 5}.ds-sidebar__item[aria-level="7"]{--ds-sidebar-indent: 6}.ds-sidebar__item[aria-level="8"]{--ds-sidebar-indent: 7}.ds-sidebar__item[aria-level="9"]{--ds-sidebar-indent: 8}.ds-sidebar__item[aria-level="10"]{--ds-sidebar-indent: 9}.ds-sidebar__item[aria-level="11"]{--ds-sidebar-indent: 10}.ds-sidebar__item[aria-level="12"]{--ds-sidebar-indent: 11}.ds-sidebar__item:hover:not([aria-disabled=true]){background:var(--ds-row-fill-hover, var(--ds-fill))}.ds-sidebar__item:active:not([aria-disabled=true]){background:var(--ds-row-fill-press, var(--ds-fill-hover))}.ds-sidebar__item[aria-selected=true]{--ds-type-weight-default: var(--ds-row-current-weight, 500);background:var(--ds-row-fill-current, var(--ds-fill-hover));font-weight:var(--ds-row-current-weight, 500)}.ds-sidebar__item:focus-visible{outline:2px solid var(--ds-focus-ring);outline-offset:-2px}.ds-sidebar__item[aria-disabled=true]{cursor:default;opacity:.5}.ds-sidebar__disclosure,.ds-sidebar__item>.ds-icon{flex:0 0 var(--ds-unit);width:var(--ds-unit);height:var(--ds-unit);-webkit-mask-size:var(--ds-icon-box, calc(14px * var(--ds-sf)));mask-size:var(--ds-icon-box, calc(14px * var(--ds-sf)));-webkit-mask-position:center calc(50% + 2px * var(--ds-sf));mask-position:center calc(50% + 2px * var(--ds-sf))}.ds-sidebar__disclosure{--ds-icon-box: calc(14px * var(--ds-sf));display:inline-block;color:var(--ds-text-color-muted);background-color:currentColor;-webkit-mask:var(--ds-sidebar-disclosure, url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;mask:var(--ds-sidebar-disclosure, url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;transform:rotate(0);transition:transform .12s ease-out}.ds-sidebar__item:not([aria-expanded])>.ds-sidebar__disclosure{visibility:hidden}.ds-sidebar__item[aria-expanded=true]>.ds-sidebar__disclosure{transform:rotate(90deg)}.ds-sidebar__label{flex:1 1 auto;min-width:0;padding-inline-start:calc(4px * var(--ds-sf));overflow:hidden;text-overflow:ellipsis}.ds-sidebar__meta{flex:none;padding-inline-start:calc(4px * var(--ds-sf));color:var(--ds-text-color-muted);font-size:var(--ds-type-size-small);font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.ds-sidebar__disclosure{transition:none}}@media(forced-colors:active){.ds-row:is(a,button)[aria-current]:not([aria-current=false]),.ds-row__target[aria-current]:not([aria-current=false]):after,.ds-sidebar__item[aria-selected=true]{outline:1px solid Highlight;outline-offset:-1px}.ds-sidebar__disclosure{background-color:CanvasText}}.ds-row[data-open]:not([data-open=false]){position:relative;isolation:isolate}.ds-row[data-open]:not([data-open=false]):after{content:"";position:absolute;z-index:-1;pointer-events:none;--ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));inset:calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang)) calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang)) calc(0px - var(--ds-row-overhang));border-radius:var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));background:var(--ds-row-fill-current, var(--ds-fill-hover))}.ds-row[data-open]:not([data-open=false]):not(a,button,.ds-row--stacked,.ds-row--auto,:has(.ds-row__target)):after{inset:calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang)) calc(0px - var(--ds-row-overhang)) calc(0px - var(--ds-row-overhang))}.ds-row[data-open]:is(.ds-row--stacked,.ds-row--auto):after{inset:0}@media(forced-colors:active){.ds-row[data-open]:not([data-open=false]):after{outline:1px solid Highlight;outline-offset:-1px}}html,body{height:100%;margin:0}body{display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--background);color:var(--text-color);font-family:var(--typeface-regular);font-size:var(--ds-type-size-default, 14px);line-height:var(--ds-unit, 20px)}.play-bar{display:flex;align-items:flex-end;gap:var(--ds-unit);padding:var(--ds-unit);border-bottom:1px solid var(--ds-border-color);line-height:calc(16px * var(--sf, 1))}.play-title{display:flex;align-items:flex-end;gap:calc(4px * var(--sf, 1));margin:0;font-family:var(--typeface-medium);white-space:nowrap}.play-title #play-library-button{font-family:var(--typeface-regular)}.play-check{margin-inline-start:auto}[aria-checked=false]>.play-check{visibility:hidden}.play-grow{flex:1}.play-panes{display:none}.play{display:grid;grid-template-columns:calc(10 * var(--ds-unit)) minmax(0,1fr) minmax(0,1fr);min-height:0}.play-files{display:flex;flex-direction:column;gap:0;min-height:0;padding:var(--ds-unit) calc(var(--ds-unit) / 2) var(--ds-unit) var(--ds-unit);overflow-y:auto;border-right:1px solid var(--ds-border-color)}.play-files-title{padding-top:calc(4px * var(--sf, 1));line-height:calc(16px * var(--sf, 1))}.play-files #play-file-list{display:grid;margin-top:calc(var(--ds-unit) / 2)}.play-file{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer}.play-code{display:flex;min-height:0;border-right:1px solid var(--ds-border-color)}#play-editor{--play-ink: #f5f5f5;display:flex;flex:1;min-width:0;min-height:0;overflow:auto;background:#1e1e1e;color:var(--play-ink);font-family:var(--typeface-mono);font-size:calc(13px * var(--sf, 1));line-height:var(--ds-unit);color-scheme:dark}#play-editor:focus-within{box-shadow:inset 0 0 0 2px var(--ds-focus-ring)}.play-lines{position:sticky;left:0;z-index:1;flex:none;display:flex;flex-direction:column;align-self:flex-start;min-width:calc(2 * var(--ds-unit));min-height:100%;padding:var(--ds-unit) calc(var(--ds-unit) / 2);background:#1e1e1e;color:#5f5f5f;text-align:end;user-select:none}.play-lines span{height:var(--ds-unit)}.play-lines .play-line-current{color:#cacaca}.play-aa{flex:1;min-width:max-content;padding:var(--ds-unit) var(--ds-unit) var(--ds-unit) calc(var(--ds-unit) / 2)}.play-aa .aa-block{min-height:100%;outline:none;white-space:pre;font:inherit;line-height:inherit;color:inherit;caret-color:var(--play-ink);tab-size:2}::highlight(play-tag){color:#f5aad1}::highlight(play-attribute){color:#fec20d}::highlight(play-string){color:#99ff73}::highlight(play-comment){color:#8a8a8a}::highlight(play-keyword){color:#ccf}::highlight(play-property){color:#69d8fb}::highlight(play-number){color:#fde70c}::highlight(play-punctuation){color:#b3b3b3}.play-preview{container-type:size;min-height:0;overflow:auto;background:var(--ds-fill)}.play-stage{box-sizing:border-box;padding:var(--ds-unit)}.play:not([data-phone]) .example-device-glass{position:relative}.play .example-device iframe{height:calc(100cqh - 2 * var(--ds-unit) - 34px * var(--sf, 1))}.play[data-phone] .example-device{width:min(calc(21 * var(--ds-unit)),calc((100cqh - 2 * var(--ds-unit)) * 910 / 1855))}.play[data-phone] .example-device iframe{height:0}@media(max-width:1100px){.play{grid-template-columns:calc(8 * var(--ds-unit)) minmax(0,1fr) minmax(0,1fr)}}@media(max-width:900px){.play-bar{flex-wrap:wrap}.play-grow{display:none}.play-panes{display:inline-flex}.play{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.play-files{flex-direction:row;align-items:flex-end;gap:calc(var(--ds-unit) / 2);padding:calc(var(--ds-unit) / 2) var(--ds-unit);overflow-x:auto;border-right:0;border-bottom:1px solid var(--ds-border-color)}.play-files-title{display:none}.play-files #play-file-list{display:flex;gap:calc(var(--ds-unit) / 2);margin:0}.play-file{width:auto;white-space:nowrap}.play-code{border-right:0}.play[data-pane=code] .play-preview,.play[data-pane=preview] :is(.play-code,.play-files){display:none}}@media(max-width:600px){.play-bar [data-preview-width],#play-copy{display:none}.play-stage{padding:0}.play .example-device-glass{border-radius:0;box-shadow:none}.play .example-window-chrome{display:none}.play .example-device iframe{height:100cqh}}