/* The marketing site's demo: the playground dressed as a minimal Chrome window (tab strip, address bar,
   a blank page, the side panel docked right). Loaded after the playground's own styles, so it wins. */
#pg{height:100%}
html,body{height:100%!important}
body{padding:0!important;background:var(--surface)!important;display:block!important}
.pg{max-width:none!important;height:100%;gap:0!important}
.pg .note{display:none!important}
.pg .tools{padding:8px 12px;background:var(--surface-sunken);border-top:1px solid var(--border)}
.pg .tools button{height:28px!important}
.pg .tools button:not(:nth-child(1)):not(:nth-child(5)){display:none!important}
.pg .browser{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto minmax(0,1fr);border:0!important;border-radius:0!important}
.pg .strip{grid-column:1/-1;position:relative;flex-wrap:nowrap!important;overflow:hidden!important;padding:8px 8px 0 76px!important;min-height:40px;align-items:flex-end!important;gap:2px!important;border-bottom:1px solid var(--border)}
.pg .strip::before{content:"";position:absolute;left:16px;top:50%;width:12px;height:12px;margin-top:-2px;border-radius:50%;background:var(--border);box-shadow:20px 0 0 var(--border),40px 0 0 var(--border)}
.pg .grp{flex:0 1 auto;min-width:0;overflow:hidden;border:0!important;border-bottom:2px solid var(--gc)!important;border-radius:0!important;padding:0!important;gap:2px!important}
.pg .grp .pill{flex:0 0 auto;align-self:center;height:18px!important;font-size:11px;margin:0 4px}
.pg .ct{flex:0 1 160px;min-width:48px;max-width:180px!important;height:30px!important;border-radius:8px 8px 0 0!important;border:0!important;background:transparent!important}
.pg .ct.on{background:var(--surface)!important;box-shadow:0 0 0 1px var(--border)}
.pg .site{grid-column:1/-1;height:44px!important;border-bottom:1px solid var(--border);gap:12px!important}
.pg .site b{display:none}
.pg .site .u{flex:1;min-width:0;height:28px;line-height:28px;padding:0 14px;border-radius:14px;background:var(--surface-sunken);color:var(--text-muted)}
.pg .browser::after{content:"";grid-column:1;grid-row:3;margin:40px 48px;background:
 linear-gradient(var(--border-faint),var(--border-faint)) 0 0/55% 18px no-repeat,
 linear-gradient(var(--border-faint),var(--border-faint)) 0 44px/90% 8px no-repeat,
 linear-gradient(var(--border-faint),var(--border-faint)) 0 64px/84% 8px no-repeat,
 linear-gradient(var(--border-faint),var(--border-faint)) 0 84px/70% 8px no-repeat,
 linear-gradient(var(--border-faint),var(--border-faint)) 0 124px/88% 8px no-repeat,
 linear-gradient(var(--border-faint),var(--border-faint)) 0 144px/60% 8px no-repeat}
.pg .frame{grid-column:2;grid-row:3;height:auto!important;min-height:0;border-left:1px solid var(--border)}
@media (max-width:640px){
 .pg .browser{grid-template-columns:minmax(0,1fr)}
 .pg .browser::after{display:none}
 .pg .frame{grid-column:1;border-left:0}
 .pg .strip{padding-left:8px!important}
 .pg .strip::before{display:none}
}