.pg-playground {
    --pg-accent: var(--bs-primary);
    --pg-surface: var(--bs-body-bg);
    --pg-canvas: var(--bs-tertiary-bg);
    background: var(--pg-canvas);
    font-family: "Segoe UI", system-ui, sans-serif;
}
.demo-card { max-width: 1480px; margin: 0 auto; }
.pg-header { padding: 32px 0 28px; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--bs-border-color); }
.pg-header h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.055em; }
.pg-header p { font-size: .95rem; }
.pg-eyebrow { display: flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--bs-secondary-color); }
.pg-brand { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--pg-accent); color: var(--bs-white); font-size: 1rem; letter-spacing: -.06em; }
.pg-workspace { padding: 28px 0; }
.pg-presets { align-items: center; }
.pg-presets > span { font-size: .75rem; }
.pg-playground .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); }
.pg-playground .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-border-subtle); }
.pg-playground .btn-link, .pg-reference > summary { color: var(--bs-primary-text-emphasis) !important; }
.pg-presets [aria-pressed="true"] { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.playground-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.pg-config { margin: 0; padding: 22px; background: var(--pg-surface); border: 1px solid var(--bs-border-color); border-radius: 16px; }
.pg-panel-heading { display: flex; align-items: center; gap: 12px; }
.pg-step { display: inline-grid; place-items: center; flex: 0 0 30px; height: 30px; border: 1px solid var(--bs-border-color); border-radius: 9px; color: var(--bs-secondary-color); font-family: monospace; font-size: .75rem; }
.pg-section-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 16px; }
.pg-config .form-label { font-size: .78rem; margin-bottom: 6px; }
.pg-config .form-text { font-size: .75rem; }
.pg-config .form-select, .pg-config .form-control { min-height: 36px; background-color: var(--pg-canvas); }
.pg-settings { border-top: 1px solid var(--bs-border-color); padding-top: 16px; }
.pg-settings summary { font-size: .85rem; font-weight: 600; }
.pg-apply { border-top: 1px solid var(--bs-border-color); padding-top: 18px; }
.playground-preview { min-width: 0; }
.pg-status { white-space: normal; text-align: end; font-size: .68rem; font-weight: 500; }
.preview-surface { margin-top: 0; padding: 24px; border: 1px solid var(--bs-border-color); border-radius: 16px; background-color: var(--pg-surface); background-image: radial-gradient(var(--bs-border-color) .65px, transparent .65px); background-size: 12px 12px; }
.pg-dropdown-demo { max-width: 580px; margin: 0 auto; padding: 18px; border-radius: 12px; background: var(--pg-surface); }
.pg-dropdown-demo .form-label { font-size: .82rem; }
.pg-dropdown-demo p { font-size: .75rem; }
.pg-stage-caption { display: flex; justify-content: space-between; align-items: center; max-width: 420px; margin: 0 auto 12px; color: var(--bs-secondary-color); }
#picker-inline { min-width: 0; max-width: 420px; margin: 0 auto; }
#picker-inline:has(.dtp-calendar-wrapper > :nth-child(2)) { max-width: 660px; }
#picker-inline:has(.dtp-layout-horizontal) { max-width: 960px; }
#picker-inline > .dtp-card { border-radius: 12px; box-shadow: 0 8px 24px color-mix(in srgb, var(--bs-emphasis-color) 8%, transparent); }
.pg-inspectors { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; }
.pg-inspectors > * { min-width: 0; }
.pg-inspectors h3, .pg-inspectors label { font-size: .85rem; }
.pg-event-log { background: var(--pg-surface); color: var(--bs-secondary-color); min-height: 180px; font-size: .75rem; line-height: 1.7; }
.pg-code { background: var(--pg-surface); border: 1px solid var(--bs-border-color); border-radius: 10px; }
#generated-code { white-space: pre; max-height: 260px; overflow: auto; font-size: .75rem; line-height: 1.7; color: var(--bs-body-color); }
.pg-reference { padding: 24px; border: 1px solid var(--bs-border-color); border-radius: 16px; background: var(--pg-surface); }
.fs-7 { font-size: .875rem; }
@media (max-width: 1100px) { .playground-grid { grid-template-columns: 310px minmax(0, 1fr); gap: 20px; } .pg-inspectors { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 991px) {
    .playground-grid { grid-template-columns: 1fr; }
    .pg-config { padding: 20px; }
    .pg-inspectors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 575px) {
    .pg-header { padding: 24px 0; }
    .pg-workspace { padding-top: 20px; }
    .pg-presets > span { width: 100%; }
    .pg-config { padding: 16px; }
    .preview-surface { padding: 12px; }
    .preview-surface > .col-12 { padding-inline: 0; }
    .pg-dropdown-demo { padding: 12px; }
    .pg-inspectors { grid-template-columns: 1fr; gap: 0; }
    .pg-reference { padding: 16px; }
    .pg-playground .form-select, .pg-playground input.form-control { font-size: 16px; }
    .pg-playground .btn { min-height: 40px; }
}