/* Faixa persistente exclusiva da edição de demonstração. */
:root { --demo-height:142px; scroll-padding-top:calc(var(--player-height) + var(--demo-height) + 20px); }
body { padding-top:calc(var(--player-height) + var(--demo-height)); }
.player-bar { top:var(--demo-height); }
.demo-notice { position:fixed; inset:0 0 auto; z-index:110; background:#14181c; color:#fff; border-bottom:1px solid #ffffff30; box-shadow:0 2px 8px #0002; font-family:Manrope,Arial,sans-serif; }
.demo-notice-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:13px; padding-bottom:13px; }
.demo-notice-copy { min-width:0; display:grid; gap:4px; }
.demo-notice-heading { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
.demo-brand-link { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:126px; min-height:44px; padding:7px 9px; border:1px solid #fff; border-radius:5px; background:#fff; transition:background .18s,border-color .18s; }
.demo-brand-link img { display:block; width:106px; max-width:100%; height:auto; object-fit:contain; }
.demo-brand-link:hover { background:#eaf0f5; border-color:#eaf0f5; }
.demo-brand-link:focus-visible { outline:3px solid #7bdbe9; outline-offset:3px; }
.demo-notice-copy strong { font-size:14px; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:#fff; }
.demo-notice-copy span { font-size:12px; line-height:1.45; color:#d7dde3; }
.demo-theme-form { display:flex; align-items:center; gap:8px; flex-shrink:0; margin:0; }
.demo-theme-form label { font-size:12px; font-weight:600; white-space:nowrap; flex-shrink:0; color:#e4e9ef; margin:0 4px 0 0; }
.demo-theme-form select { width:140px; min-width:120px; min-height:40px; margin:0; padding:8px 30px 8px 12px; background:#252b32; border:1px solid #5d6874; color:#fff; border-radius:6px; font:600 12px Manrope,Arial,sans-serif; }
.demo-theme-form option { background:#252b32; color:#fff; }
.demo-theme-form button { white-space:nowrap; min-height:40px; padding:9px 14px; border:1px solid #fff; border-radius:6px; font:700 12px Manrope,Arial,sans-serif; background:#fff; color:#14181c; cursor:pointer; transition:background .18s,border-color .18s; }
.demo-theme-form button:hover { background:#dce5ec; border-color:#dce5ec; }
.demo-theme-form :is(select,button):focus-visible { outline:3px solid #7bdbe9; outline-offset:3px; }
@media(max-width:800px) { :root {--demo-height:218px;} .demo-notice-inner {flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px;} .demo-notice-copy {width:100%;} .demo-theme-form {width:100%;} .demo-theme-form label {flex:1;} }
@media(max-width:360px) { :root {--demo-height:246px;} .demo-theme-form label {font-size:11px;} .demo-theme-form select {min-width:105px;} .demo-theme-form {gap:6px;} }
@media(prefers-reduced-motion:reduce) {.demo-theme-form button,.demo-brand-link {transition:none;}}
/* A identidade de demonstração também deve caber ao lado dos controles. */
.site-header .brand { min-width:0; flex-shrink:1; }
.site-header .brand span { min-width:0; }
.site-header .brand b { overflow-wrap:anywhere; }
.site-header .brand-wave { flex-shrink:0; }
@media(max-width:800px) {
 .site-header .brand { max-width:calc(100% - 140px); }
 .demo-theme-form { position:relative; }
 .demo-theme-form label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .demo-theme-form select { flex:1; width:auto; min-width:0; }
 .demo-theme-form button { flex-shrink:0; }
}
@media(max-width:900px) {
 .footer-main { flex-wrap:wrap; row-gap:18px; }
 .footer-main .brand { min-width:0; max-width:100%; }
 .footer-main .brand span { min-width:0; }
 .footer-main .brand b { overflow-wrap:anywhere; }
 .footer-main .powered { margin-left:0; border-left:0; padding-left:0; }
}

.demo-notice-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; flex-shrink:0; max-width:100%; }
.demo-panel-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid #8696a4; border-radius:6px; color:#fff; background:#252b32; font:700 12px Manrope,Arial,sans-serif; text-decoration:none; white-space:nowrap; transition:background .18s,border-color .18s; }
.demo-panel-link svg { width:16px; height:16px; flex-shrink:0; }
.demo-panel-link:hover { color:#fff; background:#364351; border-color:#c0d1df; }
.demo-panel-link:focus-visible { outline:3px solid #7bdbe9; outline-offset:3px; }
@media(min-width:801px) and (max-width:1250px) { .demo-notice-actions { flex-direction:column; align-items:stretch; } .demo-theme-form label { display:none; } }
@media(max-width:800px) { .demo-notice-actions { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; } .demo-theme-form { min-width:0; } .demo-theme-form select { min-width:68px; padding-left:8px; } .demo-theme-form button { padding:9px 10px; } }
@media(max-width:480px) { .demo-notice-actions { grid-template-columns:1fr; } .demo-panel-link { width:100%; } }
@media(prefers-reduced-motion:reduce) { .demo-panel-link { transition:none; } }