.pd-control-demo { --pd-control-blue:#0052D9; --pd-control-red:#C73540; --pd-control-green:color-mix(in srgb,var(--pd-color-success) 78%,#000); --pd-control-surface:#fff; --pd-control-bg:#f3f5f8; --pd-control-ink:#253042; --pd-control-muted:#697386; --pd-control-line:#d7dde7; --pd-control-neutral-fill:#657080; --pd-control-neutral-fg:#fff; --pd-control-soft-fill:#c9d5e5; --pd-control-soft-fg:#23364e; margin:0; background:var(--pd-control-bg); color:var(--pd-control-ink); font-family:var(--pd-font-system); font-size:var(--pd-fs-sm); }
.pd-control-demo.is-dark { --pd-control-surface:#222a36; --pd-control-bg:#141b25; --pd-control-ink:#e6ecf5; --pd-control-muted:#a0adbf; --pd-control-line:#465166; --pd-control-neutral-fill:#4e596a; --pd-control-neutral-fg:#f3f6fa; --pd-control-soft-fill:#536277; --pd-control-soft-fg:#f3f6fa; }
.pd-control-demo *, .pd-control-demo *::before, .pd-control-demo *::after { box-sizing:border-box; }
.pd-control-demo-main { max-width:var(--pd-page-max-width); margin:auto; padding:var(--pd-space-5) var(--pd-space-4); }
.pd-control-demo-header > span { color:var(--pd-control-blue); font-weight:var(--pd-fw-semibold); }
.pd-control-demo h1 { font-size:var(--pd-fs-display); font-weight:var(--pd-fw-semibold); margin:var(--pd-space-2) 0; }
.pd-control-demo p { color:var(--pd-control-muted); line-height:var(--pd-lh-relaxed); }
.pd-control-demo a { color:var(--pd-control-blue); }
.pd-control-demo-header nav { display:flex; gap:var(--pd-space-4); }
.pd-control-demo-toolbar { display:flex; justify-content:space-between; gap:var(--pd-space-2); flex-wrap:wrap; margin:var(--pd-space-4) 0; padding-block:var(--pd-space-1); position:sticky; top:0; z-index:5; background:var(--pd-control-bg); }
.pd-control-demo-toolbar > div { display:flex; flex-wrap:wrap; gap:calc(var(--pd-space-1)/2); }
.pd-control-demo-toolbar button, .pd-control-preview-choose { background:var(--pd-control-soft-fill); color:var(--pd-control-soft-fg); border:0; border-radius:var(--pd-radius-sm); font:inherit; padding:var(--pd-space-1) var(--pd-space-2); cursor:pointer; }
.pd-control-demo-toolbar button[aria-pressed=true] { background:var(--pd-control-blue); border-color:var(--pd-control-blue); color:#fff; }
.pd-control-options { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--pd-space-4); }
.pd-control-overview { margin-block:var(--pd-space-4); padding:var(--pd-space-3); background:var(--pd-control-surface); border-radius:var(--pd-radius-lg); }
.pd-control-overview h2 { margin:0 0 var(--pd-space-3); font-size:var(--pd-fs-md); font-weight:var(--pd-fw-semibold); }
.pd-control-overview-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-2); padding-block:var(--pd-space-2); }
.pd-control-overview-row > div { display:flex; flex-wrap:wrap; gap:var(--pd-space-1); }
.pd-control-overview-name { width:calc(var(--pd-space-5)*4); padding:0; text-align:left; border:0; background:transparent; color:var(--pd-control-ink); font:inherit; font-size:var(--pd-fs-xs); cursor:pointer; }
.pd-control-option, .pd-control-scene { background:var(--pd-control-surface); border:calc(var(--pd-tab-indicator)/2) solid var(--pd-control-line); border-radius:var(--pd-radius-lg); padding:var(--pd-space-4); }
.pd-control-option h2 { display:flex; gap:var(--pd-space-2); font-size:var(--pd-fs-lg); margin:0; font-weight:var(--pd-fw-semibold); }
.pd-control-option h2 span { color:var(--pd-control-muted); font-size:var(--pd-fs-sm); align-self:center; }
.pd-control-option header p { margin:var(--pd-space-1) 0 var(--pd-space-4); }
.pd-control-group { margin:var(--pd-space-3) 0; }
.pd-control-group > span { display:block; font-size:var(--pd-fs-xs); color:var(--pd-control-muted); margin-bottom:var(--pd-space-1); }
.pd-control-group > div, .pd-control-scene-row, .pd-control-user-actions, .pd-control-user-nav { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-1); }


.pd-control-reference { display:flex; flex-wrap:wrap; gap:var(--pd-space-2); align-items:center; padding-block:var(--pd-space-2); }
.pd-control-reference > span { width:calc(var(--pd-space-5)*4); font-size:var(--pd-fs-xs); color:var(--pd-control-muted); }
.pd-control {
    --pd-control-height:var(--pd-space-5); --pd-vista-blue:var(--pd-control-blue);
    width:auto; height:var(--pd-control-height); padding-inline:var(--pd-space-2);
    gap:calc(var(--pd-space-1)*3/4); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium);
}
.pd-control i { position:relative; z-index:2; font-size:var(--pd-icon-sm); }
.pd-control-success { --pd-vista-blue:var(--pd-control-green); }
.pd-control-danger { --pd-vista-blue:var(--pd-control-red); }
.pd-control-neutral, .pd-control-secondary { --pd-vista-blue:var(--pd-control-neutral-fill); }
.pd-control:is(.pd-control-success,.pd-control-danger,.pd-control-neutral,.pd-control-secondary) {
    --pd-control-glow:color-mix(in srgb,color-mix(in srgb,var(--pd-vista-blue) 40%,#fff) 67%,transparent);
    --pd-vista-edge:color-mix(in srgb,var(--pd-vista-blue) 58%,#17202e);
    --pd-vista-shadow:0 var(--pd-vista-depth) 0 var(--pd-vista-edge),0 calc(var(--pd-space-1)/2) var(--pd-space-1) #17233326;
    background:radial-gradient(ellipse 70% 100% at 50% 120%,var(--pd-control-glow),transparent 76%),linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 96%,#000),var(--pd-vista-blue) 60%,color-mix(in srgb,var(--pd-vista-blue) 88%,#000));
    box-shadow:inset 0 calc(var(--pd-space-1)/8) calc(var(--pd-space-1)/8) #ffffffad,inset 0 calc(var(--pd-space-1)/-8) calc(var(--pd-space-1)/8) color-mix(in srgb,var(--pd-control-glow) 75%,transparent),inset calc(var(--pd-space-1)/8) 0 calc(var(--pd-space-1)/8) #ffffff3b,inset calc(var(--pd-space-1)/-8) 0 calc(var(--pd-space-1)/8) #ffffff3b,var(--pd-vista-shadow);
    text-shadow:0 calc(var(--pd-space-1)/8) calc(var(--pd-space-1)/8) #17233370;
}
.pd-control-xs { --pd-control-height:var(--pd-space-4); padding-inline:var(--pd-space-1); font-size:var(--pd-fs-2xs); }
.pd-control-sm { --pd-control-height:calc(var(--pd-space-4) + var(--pd-space-1)/2); }
.pd-control-standard { --pd-control-height:var(--pd-btn-h); font-size:var(--pd-btn-fs); font-weight:var(--pd-btn-weight); }
.pd-control-lg { --pd-control-height:var(--pd-rail-btn-size); font-size:var(--pd-fs-sm); }
.pd-control-wide { width:var(--pd-sidebar-width); max-width:100%; }
.pd-control-icon, .pd-control-round { width:var(--pd-control-height); padding:0; }
.pd-control-round { border-radius:var(--pd-radius-round); }
.pd-control-status, .pd-control-status:hover { cursor:default; filter:none; transform:none; }
.pd-control-binding { display:inline-flex; align-items:center; }
.pd-control-binding-hint { color:var(--pd-control-muted); font-size:var(--pd-fs-xs); }
.pd-control:focus-visible, .pd-control-demo-toolbar button:focus-visible, .pd-control-preview-choose:focus-visible { outline:var(--pd-tab-indicator) solid var(--pd-control-blue); outline-offset:var(--pd-tab-indicator); }
[data-control-state=hover] button.pd-control { filter:brightness(1.08); transform:translateY(calc(-1 * var(--pd-space-1)/8)); }
[data-control-state=pressed] button.pd-control, button.pd-control:active {
    transform:translateY(var(--pd-vista-depth)); filter:brightness(.95);
    box-shadow:inset 0 calc(var(--pd-space-1)/8) var(--pd-vista-depth) color-mix(in srgb,var(--pd-vista-edge) 40%,transparent),inset 0 calc(var(--pd-space-1)/-8) 0 #ffffff26,0 calc(var(--pd-space-1)/8) 0 #17233340;
}
.pd-control:disabled { opacity:.46; cursor:not-allowed; filter:none; transform:none; }
.pd-control-scene-section { margin-top:var(--pd-space-5); scroll-margin-top:calc(var(--pd-space-5)*3); }
.pd-control-scene-section > header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--pd-space-2); }
.pd-control-scene-section h2 { font-size:var(--pd-fs-xl); font-weight:var(--pd-fw-semibold); }
.pd-control-scene-section > header > span { color:var(--pd-control-muted); font-size:var(--pd-fs-xs); }
.pd-control-user { display:flex; align-items:center; flex-wrap:wrap; gap:var(--pd-space-3); }
.pd-control-user img { border-radius:var(--pd-radius-round); }
.pd-control-user h3, .pd-control-user p { margin:0; }
.pd-control-user-actions { margin-inline-start:auto; }
.pd-control-user-nav { margin-block:var(--pd-space-4); padding-block:var(--pd-space-3); border-block:calc(var(--pd-tab-indicator)/2) solid var(--pd-control-line); }
.pd-control-scene-columns { display:grid; grid-template-columns:minmax(0,1fr) var(--pd-sidebar-width); gap:var(--pd-space-4); }
.pd-control-scene h3 { font-size:var(--pd-fs-md); font-weight:var(--pd-fw-semibold); }
.pd-control-scene-row { margin-bottom:var(--pd-space-2); }
.pd-control-scene aside { display:flex; flex-direction:column; align-items:flex-start; gap:var(--pd-space-3); }
.pd-control-scene aside > span { color:var(--pd-control-muted); font-size:var(--pd-fs-xs); }
.pd-control-scene .pd-vista-btn { max-width:100%; }
.pd-control-demo footer { color:var(--pd-control-muted); font-size:var(--pd-fs-xs); padding-block:var(--pd-space-4); line-height:var(--pd-lh-relaxed); }
.pd-control-feedback { position:fixed; bottom:var(--pd-space-4); left:50%; transform:translateX(-50%); background:var(--pd-control-ink); color:var(--pd-control-surface); border-radius:var(--pd-radius-md); padding:var(--pd-space-2) var(--pd-space-3); box-shadow:0 var(--pd-space-1) var(--pd-space-4) #00000020; pointer-events:none; opacity:0; }
.pd-control-feedback.is-visible { opacity:1; }
@media(max-width:800px) { .pd-control-options, .pd-control-scene-columns { grid-template-columns:minmax(0,1fr); } .pd-control-demo h1 { font-size:var(--pd-fs-xl); } .pd-control-demo-main { padding:var(--pd-space-4) var(--pd-space-3); } .pd-control-option, .pd-control-scene { padding:var(--pd-space-3); } }
@media(prefers-reduced-motion:reduce) { .pd-control { transition:none; } }