.tlf-playground-frame .tlpg-bc-demo{position:relative;width:100%;height:100%;display:flex;align-items:center;overflow:hidden;container:tlpg-bc-stage / size;padding:16px calc(5% + 14.4px);background:var(--surface-experiment-canvas, #fafafa);font-family:var(--tlf-font);font-weight:400;--tlpg-bc-ms: .48s;--tlpg-bc-ease: cubic-bezier(.25, .8, .25, 1);--tlpg-bc-ink: #fff;--tlpg-bc-dim: #929292;--tlpg-bc-slash: #656565;--tlpg-bc-off: #4e4e4e;--tlpg-bc-bar: #141414}.tlf-playground-frame .tlpg-bc-demo,.tlf-playground-frame .tlpg-bc-demo *{box-sizing:border-box}.tlf-playground-frame .tlpg-bc-demo button{font-family:inherit;-webkit-tap-highlight-color:transparent}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-bar{display:flex;align-items:center;width:100%;min-width:0;height:48px;padding:0 18px;border-radius:8px;background:var(--tlpg-bc-bar)}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrows{display:flex;align-items:center;gap:8px;margin-right:32px;flex:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:var(--tlpg-bc-ink);cursor:pointer;transition:background .14s ease,color .14s ease}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow svg{width:14px;height:14px;flex:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow:hover:not(:disabled){background:#ffffff14}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow:active:not(:disabled){background:#ffffff24}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow:disabled{color:var(--tlpg-bc-off);cursor:default}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-trail{display:flex;align-items:center;margin:0;padding:0;list-style:none;min-width:0;flex:1}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb{display:inline-flex;align-items:center;min-width:0}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb[data-last=false]{flex:0 1 auto}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb[data-last=true]{flex:0 0 auto;max-width:100%;z-index:2}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-sep{color:var(--tlpg-bc-slash);margin:0 7px;font-size:12px;font-weight:400;-webkit-user-select:none;user-select:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current{position:relative;isolation:isolate;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;padding:4px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;height:28px;font-size:12px;line-height:1.45;white-space:nowrap;cursor:pointer;min-width:0;transition:color .18s ease}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid{color:var(--tlpg-bc-dim);font-weight:400}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid:hover{color:var(--tlpg-bc-ink)}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid:before,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;pointer-events:none;background:#242424;opacity:0;transition:opacity .2s ease}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid:hover:before,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid:focus-visible:before,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current:hover:before,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current:focus-visible:before,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current[aria-expanded=true]:before{opacity:1}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current{position:relative;color:var(--tlpg-bc-ink);font-weight:500;z-index:2}.tlf-playground-frame .tlpg-bc-demo[data-menu-overlap=true] .tlpg-bc-current{transition:color .18s ease,opacity .16s ease .16s}.tlf-playground-frame .tlpg-bc-demo[data-menu-overlap=true][data-open=true] .tlpg-bc-current{opacity:0;transition:color .18s ease,opacity 80ms ease 90ms}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current>svg{color:var(--tlpg-bc-ink);width:10px;height:10px;flex:none;transition:transform var(--tlpg-bc-ms) var(--tlpg-bc-ease)}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current[aria-expanded=true]>svg{transform:rotate(180deg)}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow:focus-visible,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid:focus-visible,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-value{position:relative;display:inline-block;overflow:hidden;height:1.45em}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-value-sizer{display:block;visibility:hidden}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-value-face{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-last{position:relative;display:inline-flex;min-width:0}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-morph-shape{position:absolute;top:0;left:0;z-index:1;pointer-events:none;width:var(--tlpg-bc-trigger-width);height:var(--tlpg-bc-trigger-height);border-radius:6px;background:var(--tlpg-bc-bar);transform:translate(0);border:1px solid transparent;box-shadow:0 0 0 transparent;opacity:1;transition:width calc(var(--tlpg-bc-ms) * .72) var(--tlpg-bc-ease) 80ms,height calc(var(--tlpg-bc-ms) * .72) var(--tlpg-bc-ease) 80ms,transform calc(var(--tlpg-bc-ms) * .8) var(--tlpg-bc-ease) 80ms,border-radius calc(var(--tlpg-bc-ms) * .72) var(--tlpg-bc-ease) 80ms,background-color .16s ease .16s,border-color .2s ease .1s,box-shadow .22s ease}.tlf-playground-frame .tlpg-bc-demo[data-open=true] .tlpg-bc-morph-shape{width:var(--tlpg-bc-panel-width);height:var(--tlpg-bc-panel-height);transform:translate(var(--tlpg-bc-panel-x),var(--tlpg-bc-panel-y));border-radius:10px;background:#202020;border-color:#ffffff14;box-shadow:0 12px 32px #00000024,0 2px 5px #00000014;transition:width var(--tlpg-bc-ms) var(--tlpg-bc-ease) 60ms,height var(--tlpg-bc-ms) var(--tlpg-bc-ease) 60ms,transform var(--tlpg-bc-ms) var(--tlpg-bc-ease) 30ms,border-radius var(--tlpg-bc-ms) var(--tlpg-bc-ease) 60ms,background-color 90ms ease,border-color .18s ease 90ms,box-shadow .3s ease 90ms}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-menu{position:absolute;top:var(--tlpg-bc-panel-y);left:var(--tlpg-bc-panel-x);z-index:4;width:var(--tlpg-bc-panel-width);height:var(--tlpg-bc-panel-height);padding:6px;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;border-radius:10px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 80ms ease,visibility 0s linear 80ms}.tlf-playground-frame .tlpg-bc-demo[data-open=true] .tlpg-bc-menu{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .18s ease .17s,visibility 0s}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-highlight{position:absolute;top:6px;left:6px;right:6px;height:var(--tlpg-bc-row-height);border-radius:6px;background:#ffffff13;pointer-events:none;transition:transform .18s var(--tlpg-bc-ease),opacity .1s ease}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option{position:relative;display:flex;flex:0 0 var(--tlpg-bc-row-height);align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:0;background:transparent;border-radius:6px;padding:0 8px;font-size:12px;font-weight:400;text-align:left;color:#d6d6d6;cursor:pointer;white-space:nowrap}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option>span{opacity:0;transform:translateY(6px);transition:opacity 80ms ease,transform .18s var(--tlpg-bc-ease)}.tlf-playground-frame .tlpg-bc-demo[data-open=true] .tlpg-bc-option>span{opacity:1;transform:translateY(0);transition:opacity .16s ease calc(.21s + var(--tlpg-bc-index, 0) * 30ms),transform .26s var(--tlpg-bc-ease) calc(.21s + var(--tlpg-bc-index, 0) * 30ms)}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option:hover,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option:focus-visible{color:#fff}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-menu .tlpg-bc-option:focus-visible{outline:1px solid #ffffff80;outline-offset:-2px;box-shadow:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option:active{background:#ffffff0a}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-option--empty{color:#a0a0a0;cursor:default}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container tlpg-bc-stage (max-width: 560px){.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-bar{padding:0 10px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrows{gap:4px;margin-right:12px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow{width:28px;height:34px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current{font-size:11px;height:34px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-sep{margin:0 4px;font-size:11px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-text{max-width:100px}}@container tlpg-bc-stage (max-width: 380px){.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-bar{padding:0 6px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrows{gap:0;margin-right:6px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-arrow{width:24px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb[data-last=false]{flex:0 1 auto}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb[data-last=false]:not(:nth-last-child(2)){display:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-crumb[data-last=false] .tlpg-bc-sep{display:none}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid{width:100%}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-text{max-width:100%}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-sep{margin:0 3px}}@container tlpg-bc-stage (max-height: 200px){.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-bar{height:40px}.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-mid,.tlf-playground-frame .tlpg-bc-demo .tlpg-bc-current{height:28px}}@media(prefers-reduced-motion:reduce){.tlf-playground-frame .tlpg-bc-demo *,.tlf-playground-frame .tlpg-bc-demo *:before,.tlf-playground-frame .tlpg-bc-demo *:after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}}.tlf-playground-frame .tlpg-bc-demo[data-reduced=true] *,.tlf-playground-frame .tlpg-bc-demo[data-reduced=true] *:before,.tlf-playground-frame .tlpg-bc-demo[data-reduced=true] *:after{animation:none!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}