* { letter-spacing: 0 !important; }
h1 { font-size: 48px; }
.demo-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 12px max(16px, calc((100% - 1180px) / 2)); background: var(--app-surface); border-bottom: 1px solid var(--app-border); color: var(--app-text); font-size: 14px; line-height: 1.5; }
.demo-strip strong { color: var(--app-accent); }
.demo-strip a { margin-left: auto; color: var(--app-text); }
.demo-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 24px; }
select, input { max-width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--app-border); border-radius: 6px; font: inherit; color: var(--app-text); background: var(--app-surface); }
.demo-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 20px 0; margin-bottom: 24px; border-bottom: 1px solid var(--app-border); }
.demo-form label { display: grid; gap: 8px; }
.demo-account { display: flex; flex-direction: column; gap: 16px; }
.demo-account .button-row { margin-top: auto; }
.demo-section { margin-top: 40px; }
.demo-section > h2 { margin-bottom: 16px; }
.demo-settings { display: grid; gap: 24px; padding: 20px 0; }
.demo-settings label { display: flex; align-items: center; gap: 12px; }
.demo-settings button { width: fit-content; }
.demo-status { min-height: 24px; margin: 16px 0; color: var(--app-muted); }
@media (max-width: 640px) { h1 { font-size: 32px; } .demo-strip a { margin-left: 0; } header { align-items: start; flex-direction: column; gap: 16px; } .demo-form label { flex: 1 1 180px; } }