.cf-demo{--demo-bar:56px;z-index:60;pointer-events:none;flex-direction:column;display:flex;position:fixed;inset:0}.cf-demo__bar{pointer-events:auto;box-sizing:border-box;height:var(--demo-bar);align-items:center;gap:var(--p-space-12);padding:0 var(--p-space-12);background:var(--p-color-stage-bg);color:var(--p-color-stage-text);border-bottom:1px solid color-mix(in srgb, var(--p-color-stage-edge) 12%, transparent);flex:none;display:flex}.cf-demo__home{color:var(--p-color-stage-text);font-weight:600;font-size:var(--p-type-body-l-size,16px);white-space:nowrap;align-items:center;min-height:44px;text-decoration:none;display:inline-flex}.cf-demo__label{color:var(--p-color-stage-text-secondary);white-space:nowrap;font-size:13px}.cf-demo__samples{gap:var(--p-space-4);margin:0 auto 0 var(--p-space-8);padding:0;list-style:none;display:flex}.cf-demo__sample{min-height:44px;padding:0 var(--p-space-12);border:1px solid color-mix(in srgb, var(--p-color-stage-edge) 14%, transparent);color:var(--p-color-stage-text);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border-radius:10px;font-size:14px}.cf-demo__sample[aria-pressed=true]{background:var(--p-color-stage-text);color:var(--p-color-stage-bg);border-color:var(--p-color-stage-text)}.cf-demo__link{color:var(--p-color-stage-text);white-space:nowrap;align-items:center;min-height:44px;font-size:14px;display:inline-flex}.cf-demo__start{min-height:44px;padding:0 var(--p-space-16);background:var(--p-color-stage-text);color:var(--p-color-stage-bg);font-weight:600;font-size:var(--p-type-body-l-size,16px);white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.cf-demo__bar a:focus-visible,.cf-demo__bar button:focus-visible{outline:2px solid var(--p-color-stage-text);outline-offset:2px}.cf-demo .cf-present{top:var(--demo-bar);pointer-events:auto}.cf-demo .cf-present__back,.cf-demo .cf-present__mirror{display:none}@media (width<=900px){.cf-demo__label,.cf-demo__link{display:none}}@media (width<=560px){.cf-demo{--demo-top:max(env(safe-area-inset-top,0px), 8px);--demo-bar:calc(var(--demo-top) + 44px + 32px + 6px)}.cf-demo__bar{padding:var(--demo-top) var(--p-space-12) 6px;align-content:start;gap:0 var(--p-space-8);grid-template-rows:44px 32px;grid-template-columns:minmax(0,1fr) auto;display:grid}.cf-demo__home,.cf-demo__label{display:none}.cf-demo__samples{scrollbar-width:none;grid-area:1/1;min-width:0;margin:0;overflow-x:auto}.cf-demo__sample{padding:0 var(--p-space-8);font-size:13px}.cf-demo__start{padding:0 var(--p-space-12);grid-area:1/2;font-size:14px}.cf-demo__link{min-height:32px;color:var(--p-color-stage-text-secondary);grid-area:2/1/3/3;font-size:13px;display:inline-flex}}:where([data-plain=button]):where(.cf-demo__sample){position:revert;display:revert;align-items:revert;justify-content:revert;gap:revert;min-height:revert;min-width:revert;max-width:revert;padding:revert;border:revert;border-radius:revert;background:revert;color:revert;box-shadow:revert;font:revert;letter-spacing:revert;white-space:revert;word-break:revert;cursor:revert;transition:revert}:where([data-plain=button]):where(.cf-demo__sample):after{content:revert;position:revert;left:revert;right:revert;top:revert;bottom:revert}@media (width<=560px){.cf-demo{--demo-bar:calc(var(--demo-top) + 44px + 6px)}.cf-demo__bar{grid-template-rows:44px}.cf-demo__link{z-index:55;top:calc(var(--demo-bar) + 10px);right:var(--p-space-12);grid-area:auto;min-height:40px;display:inline-flex;position:fixed}.cf-demo .cf-present__where{justify-content:flex-start;align-items:center;min-height:44px;padding-right:96px}.cf-demo__link{top:calc(var(--demo-bar) + 2px);min-height:36px}.cf-demo .cf-present__where{min-height:40px;padding-block:0}}