.ts{border-top:var(--layout-hairline) solid var(--border-subtle);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:992px){.ts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}section:has(.ts)>.relative:before{content:"";inset-block:0;left:calc(50% - var(--layout-hairline));width:var(--layout-hairline);background-color:var(--border-subtle);pointer-events:none;position:absolute}section:has(.ts) .sh-fit{max-width:calc(50% - var(--space-xl))}}.ts-stage{top:var(--layout-nav-height);z-index:2;background-color:var(--bg-inset);border-bottom:var(--layout-hairline) solid var(--border-subtle);height:min(46svh,380px);margin:0;position:sticky;overflow:clip}.ts-stage-in{height:100%;padding-top:var(--space-md);place-items:start center;display:grid}.ts-stage-in>*{grid-area:1/1}@media (min-width:992px){.ts-stage{border-bottom:var(--layout-hairline) solid var(--border-subtle);border-right:var(--layout-hairline) solid var(--border-subtle);height:auto;position:static;overflow:visible}.ts-stage-in{top:var(--layout-nav-height);height:calc(100svh - var(--layout-nav-height));padding:var(--space-lg);align-items:center;position:sticky}}.ts-air{--air-w:240px}@media (min-width:992px){.ts-air{--air-w:320px}}@media (min-width:992px) and (max-height:799px){.ts-air{--air-w:280px}}.ts-air-frame{width:var(--air-w);aspect-ratio:991/2048;position:relative}.ts-air-body{width:100%;height:100%;display:block}.ts-air-glass{border-radius:calc(var(--air-w) * .9236 * .14);width:92.36%;height:96.89%;display:grid;position:absolute;top:1.555%;left:3.819%;overflow:hidden}.ts-shot{opacity:0;visibility:hidden;grid-area:1/1;width:100%;height:100%;display:block}:is(.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=blue]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=blue-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=blue]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=blue-dark],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=purple]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=purple-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=purple]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=purple-dark],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=pink]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=pink-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=pink]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=pink-dark],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=red]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=red-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=red]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=red-dark],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=orange]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=orange-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=orange]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=orange-dark],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=green]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=green-light],.ts:has(input[name=ts-radius][value="32"]:checked):has(input[name=tp-ramp][value=green]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=green-dark],.ts:has(input[name=ts-radius][value="16"]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=radius16-light],.ts:has(input[name=ts-radius][value="16"]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=radius16-dark],.ts:has(input[name=ts-radius][value="48"]:checked):has(input[name=tp-mode][value=light]:checked) .ts-shot[data-shot=radius48-light],.ts:has(input[name=ts-radius][value="48"]:checked):has(input[name=tp-mode][value=dark]:checked) .ts-shot[data-shot=radius48-dark]){z-index:1;opacity:1;visibility:visible;transition:var(--ts-shot-in)}.ts{--ts-shot-in:none;--ts-shot-out:none}.ts-shot{transition:var(--ts-shot-out)}@media (prefers-reduced-motion:no-preference){.ts{--ts-shot-in:opacity var(--dur-slow) var(--ease-standard), visibility 0s;--ts-shot-out:opacity 0s linear var(--dur-slow), visibility 0s linear var(--dur-slow)}}.ts-code{visibility:hidden;opacity:0}.ts:has(input[name=ts-face]:not([value=app]):checked) .ts-phone{visibility:hidden;opacity:0}.ts:has(input[name=ts-face]:not([value=app]):checked) .ts-code{visibility:visible;opacity:1}@media (prefers-reduced-motion:no-preference){.ts-phone,.ts-code{transition:opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard), translate var(--dur-base) var(--ease-standard)}.ts-code{translate:0 var(--space-xs)}.ts:has(input[name=ts-face]:not([value=app]):checked) .ts-code{translate:none}}.ts-code{width:min(100%,30rem);padding:0 var(--shell-inset);align-self:start}@media (min-width:992px){.ts-code{align-self:center;padding:0}}.ts-pane{border-radius:var(--radius-lg);background-color:var(--bg-canvas);margin:0;display:none;overflow:hidden}:is(.ts:has(input[name=ts-face][value=swiftui]:checked) .ts-pane[data-face=swiftui],.ts:has(input[name=ts-face][value=compose]:checked) .ts-pane[data-face=compose],.ts:has(input[name=ts-face][value=flutter]:checked) .ts-pane[data-face=flutter],.ts:has(input[name=ts-face][value=css]:checked) .ts-pane[data-face=css]){display:block}.ts-file{padding:var(--space-sm) var(--space-md);border-bottom:var(--layout-hairline) solid var(--border-subtle);font-size:var(--font-size-body-xs);line-height:var(--font-line-height-body-xs);color:var(--text-tertiary)}.ts-pre{padding:var(--space-sm) 0;color:var(--text-primary);font-family:var(--font-mono);margin:0;font-size:11px;line-height:1.7;overflow-x:auto}@media (min-width:992px){.ts-pre{padding:var(--space-md) 0;font-size:var(--font-size-body-sm)}}.ts-pre code{width:max-content;min-width:100%;font:inherit;display:block}.ts-line{width:100%;padding:0 var(--space-md);vertical-align:top;display:inline-block}.ts-line[data-mode=light]{background-color:color-mix(in srgb, var(--ts-brand) 10%, transparent);box-shadow:inset 2px 0 0 var(--ts-brand)}.ts:has(input[name=tp-mode][value=dark]:checked) .ts-line[data-mode=dark]{background-color:color-mix(in srgb, var(--ts-brand) 10%, transparent);box-shadow:inset 2px 0 0 var(--ts-brand)}.ts:has(input[name=tp-mode][value=dark]:checked) .ts-line[data-mode=light]{box-shadow:none;background-color:#0000}.ts-v{font-weight:var(--font-weight-medium)}.ts [data-v-ramp]:not([data-v-ramp=blue]),.ts [data-v-mode=dark],.ts [data-v-r]:not([data-v-r="32"]),:is(.ts:has(input[name=tp-ramp]:checked:not([value=blue])) [data-v-ramp=blue],.ts:has(input[name=tp-mode][value=dark]:checked) [data-v-mode=light],.ts:has(input[name=ts-radius]:checked:not([value="32"])) [data-v-r="32"]){display:none}:is(.ts:has(input[name=tp-ramp][value=purple]:checked) [data-v-ramp=purple],.ts:has(input[name=tp-ramp][value=pink]:checked) [data-v-ramp=pink],.ts:has(input[name=tp-ramp][value=red]:checked) [data-v-ramp=red],.ts:has(input[name=tp-ramp][value=orange]:checked) [data-v-ramp=orange],.ts:has(input[name=tp-ramp][value=green]:checked) [data-v-ramp=green],.ts:has(input[name=tp-mode][value=dark]:checked) [data-v-mode=dark],.ts:has(input[name=ts-radius][value="16"]:checked) [data-v-r="16"],.ts:has(input[name=ts-radius][value="48"]:checked) [data-v-r="48"]){display:inline}.ts{--ts-b-light:var(--p-blue-500);--ts-b-dark:var(--p-blue-400);--ts-brand:var(--ts-b-light)}.ts:has(input[name=tp-mode][value=dark]:checked){--ts-brand:var(--ts-b-dark)}.ts:has(input[name=tp-ramp][value=purple]:checked){--ts-b-light:var(--p-purple-500);--ts-b-dark:var(--p-purple-600)}.ts:has(input[name=tp-ramp][value=pink]:checked){--ts-b-light:var(--p-pink-500);--ts-b-dark:var(--p-pink-600)}.ts:has(input[name=tp-ramp][value=red]:checked){--ts-b-light:var(--p-red-500);--ts-b-dark:var(--p-red-500)}.ts:has(input[name=tp-ramp][value=orange]:checked){--ts-b-light:var(--p-orange-500);--ts-b-dark:var(--p-orange-600)}.ts:has(input[name=tp-ramp][value=green]:checked){--ts-b-light:var(--p-green-500);--ts-b-dark:var(--p-green-600)}.ts-steps{margin:0;padding:0;list-style:none}.ts-step{align-content:center;gap:var(--space-lg);min-width:0;padding:var(--space-2xl) var(--shell-inset);display:grid}.ts-step+.ts-step{border-top:var(--layout-hairline) solid var(--border-subtle)}@media (min-width:992px){.ts-step{min-height:72svh;padding:var(--space-3xl) var(--shell-inset) var(--space-3xl) var(--space-2xl)}.ts-step:last-child{min-height:calc(100svh - var(--layout-nav-height))}}.ts-copy{gap:var(--space-2xs);max-width:30rem;display:grid}.ts-h{align-items:baseline;gap:var(--space-xs);font-size:var(--font-size-h5);line-height:var(--font-line-height-h5);font-weight:var(--font-weight-medium);letter-spacing:calc(var(--font-tracking-h5) * 1em);text-wrap:balance;margin:0;display:flex}.ts-b{color:var(--text-secondary);margin:0}.ts-mark{fill:none;width:12px;height:12px;stroke:var(--border-strong);stroke-width:1.5px;stroke-linecap:round;flex:none;translate:0 1px}.ts-step[data-on] .ts-mark{stroke:var(--action-primary)}@media (prefers-reduced-motion:no-preference){.ts-mark{transition:stroke var(--motion-state)}}.ts-pick{border:0;min-width:0;margin:0;padding:0}.ts-legend{float:left;width:100%;margin-bottom:var(--space-xs);font-size:var(--font-size-body-sm);line-height:var(--font-line-height-body-sm);color:var(--text-tertiary);padding:0}.ts-legend+*{clear:both}.ts-seg{border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--text-primary) 6%, transparent);flex-wrap:wrap;gap:2px;max-width:100%;padding:3px;display:inline-flex}.ts-opt{border-radius:var(--radius-full);min-width:48px;height:32px;font-size:13px;line-height:16px;font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;padding:0 14px;display:inline-flex;position:relative}@media (max-width:479px){.ts-opt{min-width:32px;padding:0 10px}}.ts-opt:has(input:checked){background-color:var(--bg-surface);color:var(--text-primary);cursor:default}:root[data-theme=dark] .ts-opt:has(input:checked){background-color:color-mix(in srgb, var(--text-primary) 11%, transparent)}@media (pointer:coarse){.ts-opt:after{content:"";position:absolute;inset:-6px 0}}.ts-opt:has(input:focus-visible){outline:var(--focus-ring-width) solid var(--focus-ring,var(--action-primary));outline-offset:var(--focus-ring-gap)}.ts-swatch:has(input:focus-visible) .ts-swatch-dot{outline:var(--focus-ring-width) solid var(--focus-ring,var(--action-primary));outline-offset:var(--focus-ring-gap)}@media (hover:hover) and (pointer:fine){.ts-opt:not(:has(input:checked)):hover{color:var(--text-primary);background-color:color-mix(in srgb, var(--text-primary) 5%, transparent)}}@media (prefers-reduced-motion:no-preference){.ts-opt{transition:background-color var(--motion-state), color var(--motion-state)}}.ts-swatches{gap:var(--space-sm);flex-wrap:wrap;display:flex}@media (min-width:768px){.ts-swatches{gap:var(--space-md)}}.ts-swatch{justify-items:center;gap:var(--space-2xs);color:var(--text-secondary);cursor:pointer;font-size:13px;line-height:16px;display:grid}.ts-swatch-dot{border-radius:var(--radius-full);background-color:var(--sw);width:40px;height:40px}.ts-swatch:has(input:checked){color:var(--text-primary);cursor:default}.ts-swatch:has(input:checked) .ts-swatch-dot{box-shadow:0 0 0 2px var(--bg-canvas), 0 0 0 3.5px var(--text-primary)}@media (hover:hover) and (pointer:fine){.ts-swatch:not(:has(input:checked)):hover .ts-swatch-dot{box-shadow:0 0 0 2px var(--bg-canvas), 0 0 0 3.5px var(--border-strong)}}.ts-scheme{gap:var(--space-xs);margin:0;padding:0;list-style:none;display:grid}.ts-chain{align-items:center;row-gap:var(--space-3xs);flex-wrap:wrap;display:flex}.ts-node{border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--text-primary) 5%, transparent);font-variant-numeric:tabular-nums;white-space:nowrap;height:28px;color:var(--text-primary);align-items:center;gap:6px;padding:0 12px;font-size:13px;line-height:16px;display:inline-flex}.ts-node-end{color:var(--text-tertiary);background-color:#0000;padding-inline:4px}.ts-node-sw{border-radius:var(--radius-full);background-color:var(--ts-brand);width:10px;height:10px}.ts-node-sw[data-sw=white]{background-color:var(--p-on-color);box-shadow:inset 0 0 0 var(--layout-hairline) var(--border-strong)}.ts-link{width:var(--space-md);height:var(--layout-hairline);background-color:var(--border-strong)}@media (prefers-reduced-motion:no-preference){.ts-node-sw{transition:background-color var(--p-dur-base) var(--p-ease-standard)}}@media (hover:hover) and (pointer:fine){.ts-chain:hover .ts-node:not(.ts-node-end){background-color:color-mix(in srgb, var(--text-primary) 10%, transparent)}}
.tt{--tt-ink:var(--text-primary);height:100%;font-family:var(--font-product), ui-sans-serif, system-ui, sans-serif;color:var(--tt-ink);position:relative}.tt-obj{color:var(--tt-ink);justify-items:start;gap:6px;display:grid;position:absolute}.tt-k{color:color-mix(in srgb, var(--tt-ink) 60%, transparent);white-space:nowrap;font-size:11px;font-weight:500;line-height:16px}.tt-row{gap:4px;display:flex}.tt-field,.tt-tag{border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--tt-ink) 10%, transparent);white-space:nowrap;align-items:center;gap:8px;height:32px;padding:0 4px 0 12px;font-size:13px;line-height:16px;display:inline-flex}.tt-num{font-variant-numeric:tabular-nums;padding:0 14px}.tt-unit{color:color-mix(in srgb, var(--tt-ink) 60%, transparent);margin-left:6px}.tt-pill{border-radius:var(--radius-full);background-color:color-mix(in srgb, var(--tt-ink) 18%, transparent);align-items:center;gap:6px;height:24px;padding:0 10px;font-weight:500;display:inline-flex}.tt-field:has(>.tt-pill:first-child){padding-left:4px}.tt-sw{border-radius:var(--radius-full);background-color:var(--p-blue-500);width:12px;height:12px}.tt-glyph{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;opacity:.7;width:16px;height:16px}.tt-aa{letter-spacing:-.01em;opacity:.7;font-size:13px;font-weight:600}.tt-list{background-color:color-mix(in srgb, var(--tt-ink) 10%, transparent);border-radius:20px;padding:4px;display:grid}.tt-item{white-space:nowrap;grid-template-columns:auto auto auto;align-items:center;gap:10px;height:32px;padding:0 12px 0 8px;font-size:13px;line-height:16px;display:grid}.tt-val{font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--tt-ink) 60%, transparent);justify-self:end;margin-left:12px}.tt-half{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--tt-l) 50%, var(--tt-d) 50%);width:16px;height:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tt-ink) 24%, transparent)}.tt-half[data-sw=brand]{--tt-l:var(--p-blue-500);--tt-d:var(--p-blue-400)}.tt-half[data-sw=ink]{--tt-l:var(--p-static-black);--tt-d:var(--p-on-color)}.tt-tag{padding:0 14px}.tt-tag[data-on]{background-color:color-mix(in srgb, var(--tt-ink) 18%, transparent);font-weight:500}:root:not([data-theme=dark]) .tt{--tt-field:5%;--tt-bound:9%}:root:not([data-theme=dark]) :is(.tt-field,.tt-tag,.tt-list){background-color:color-mix(in srgb, var(--tt-ink) var(--tt-field), transparent)}:root:not([data-theme=dark]) :is(.tt-pill,.tt-tag[data-on]){background-color:color-mix(in srgb, var(--tt-ink) var(--tt-bound), transparent)}.tt-obj:is([data-pos=e],[data-pos=f]){display:none}@media (min-width:1200px){.tt-obj[data-pos=a]{top:132px;right:calc(50% + 470px);rotate:-4deg}.tt-obj[data-pos=b]{top:412px;right:calc(50% + 500px);rotate:3deg}.tt-obj[data-pos=c]{top:156px;left:calc(50% + 470px);rotate:4deg}.tt-obj[data-pos=d]{top:428px;left:calc(50% + 500px);rotate:-3deg}}@media (min-width:1200px) and (max-width:1439px){.tt-obj{scale:.85}.tt-obj[data-pos=a]{top:96px;right:auto;left:var(--space-md);transform-origin:0 0}.tt-obj[data-pos=c]{top:112px;left:auto;right:var(--space-md);transform-origin:100% 0}.tt-obj[data-pos=b]{transform-origin:100% 0;right:calc(50% + 440px)}.tt-obj[data-pos=d]{transform-origin:0 0;left:calc(50% + 440px)}}@media (min-width:1440px){.tt-obj[data-pos=a]{top:96px;right:calc(50% + 450px)}.tt-obj[data-pos=b]{top:330px;right:calc(50% + 500px)}.tt-obj[data-pos=c]{top:120px;left:calc(50% + 450px)}.tt-obj[data-pos=d]{top:340px;left:calc(50% + 470px)}.tt-obj[data-pos=e]{display:grid;top:520px;right:calc(50% + 430px);rotate:-2deg}.tt-obj[data-pos=f]{display:grid;top:540px;left:calc(50% + 430px);rotate:2deg}}@media (min-width:768px) and (max-width:1199px){.tt-obj:is([data-pos=a],[data-pos=c]){display:none}.tt-obj[data-pos=b]{bottom:40px;right:calc(50% + 140px);rotate:3deg}.tt-obj[data-pos=d]{bottom:32px;left:calc(50% + 140px);rotate:-3deg}.tt-obj:is([data-pos=b],[data-pos=d]){--tt-ink:var(--text-primary)}}@media (max-width:767px){.tt-obj:is([data-pos=a],[data-pos=c]){display:none}.tt-obj{scale:.85}.tt-obj[data-pos=b]{top:84px;left:var(--space-md);transform-origin:0 0;rotate:-4deg}.tt-obj[data-pos=d]{--tt-ink:var(--text-primary);bottom:var(--space-lg);right:var(--space-md);transform-origin:100% 100%;rotate:4deg}}.tt-obj[data-pos=a]{--tt-depth:-180px}.tt-obj[data-pos=b]{--tt-depth:-90px}.tt-obj[data-pos=c]{--tt-depth:-220px}.tt-obj[data-pos=d]{--tt-depth:-120px}.tt-obj[data-pos=e]{--tt-depth:-150px}.tt-obj[data-pos=f]{--tt-depth:-200px}@keyframes tt-rise{to{translate:0 var(--tt-depth,-120px)}}@supports (animation-timeline:scroll()){@media (min-width:768px) and (prefers-reduced-motion:no-preference){.tt-obj{animation:linear both tt-rise;animation-timeline:scroll(root);animation-range:0 800px}}}