body.pbt-demo{margin:0;display:flex;flex-direction:column;height:100dvh;background:var(--paper);color:var(--ink)}.demo-toolbar{display:flex;align-items:center;gap:24px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}.demo-brand{font-size:32px;font-weight:800;letter-spacing:-3px}.demo-brand span{font-size:12px;color:var(--accent);margin-left:5px}.demo-title small{color:var(--muted);font-size:11px}.demo-title h1{font-size:18px;letter-spacing:-.4px;margin:3px 0}.demo-devices{display:flex;gap:4px;margin-inline:auto}.demo-devices button,.demo-utility button{border:1px solid var(--line);padding:8px 12px;background:var(--surface);color:var(--ink);min-height:44px}.demo-devices button[aria-pressed=true]{background:var(--ink);color:var(--surface)}.demo-actions{display:flex;align-items:center;gap:18px;font-size:13px}.demo-main{flex:1;min-height:0;display:flex;flex-direction:column}.demo-utility{display:flex;align-items:center;gap:16px;padding:8px 24px;font-size:12px;flex-wrap:wrap}.demo-utility a{margin-left:auto}.demo-stage{flex:1;min-height:0;padding:16px;display:flex;justify-content:center}.demo-viewport{width:100%;height:100%;background:white;border:1px solid var(--line)}.demo-frame{display:block;border:0;width:100%;height:100%;background:white}.demo-stage[data-device=tablet] .demo-viewport{width:min(768px,100%)}.demo-stage[data-device=mobile] .demo-viewport{width:min(390px,100%)}@media(max-width:700px){.demo-toolbar{gap:12px;padding:12px}.demo-devices{order:4;width:100%;justify-content:center}.demo-actions{gap:10px;flex-wrap:wrap;margin-left:auto}.demo-title{flex:1}.demo-actions .button{padding:10px}.demo-stage{padding:8px}.demo-utility{padding:8px 12px;gap:8px}.demo-utility a{margin-left:0}.demo-main .empty-state{padding:24px}} .pbt-demo [hidden]{display:none!important}
.demo-toolbar{flex-shrink:0;gap:16px}
.demo-brand{flex-shrink:0;white-space:nowrap}
.demo-title{min-width:0;flex:1}
.demo-title h1{overflow-wrap:anywhere;line-height:1.3}
.demo-title small{display:block}
.demo-actions{flex-shrink:0;flex-wrap:wrap}
.demo-actions>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.demo-utility{flex-shrink:0;gap:8px 12px}
.demo-host{min-width:0;overflow-wrap:anywhere}
.demo-utility [data-demo-dimensions]{white-space:nowrap;color:var(--muted)}
@media(min-width:800px) and (max-width:1099px){.demo-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto}.demo-devices{grid-column:1/3;margin:0;justify-content:flex-start}.demo-actions{grid-column:3;grid-row:1/3;justify-content:flex-end;max-width:360px}}
@media(max-width:799px){.demo-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:12px}.demo-devices{display:none}.demo-actions{grid-column:1/-1;display:flex;gap:8px;margin:0;width:100%;font-size:12px}.demo-actions>a{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:4px;text-align:center}.demo-title h1{font-size:19px;margin:2px 0}.demo-title small{font-size:11px}.demo-stage{padding:8px}.demo-utility{display:grid;grid-template-columns:minmax(0,1fr) auto auto;padding:10px 12px;gap:8px;font-size:11px}.demo-host{grid-column:1/3}.demo-utility [data-demo-dimensions]{grid-column:3;justify-self:end}.demo-utility>a{grid-column:1;margin:0;line-height:1.5}.demo-utility button{padding:7px 10px;font-size:11px}.demo-utility [data-demo-reload]{grid-column:2}.demo-utility [data-demo-fullscreen]{grid-column:3}}
@media(max-width:359px){.demo-actions{flex-wrap:wrap}.demo-actions>a{flex-basis:40%}.demo-utility>a{grid-column:1/-1}.demo-utility [data-demo-reload]{grid-column:2}.demo-utility [data-demo-fullscreen]{grid-column:3}}