:root{--portfolio-demo-height:66px}
.portfolio-demo-bar{position:sticky;top:0;z-index:95;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px;padding:10px 24px;background:#102e25;color:#eff5e6;border-bottom:1px solid #3c584a;font:400 13px/1.45 Arial,Helvetica,sans-serif}
.portfolio-demo-label{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.portfolio-demo-label strong{font-size:13px;letter-spacing:.02em;white-space:nowrap}
.portfolio-demo-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#d7eda8}
.portfolio-demo-caption{color:#c2d5c8;font-size:12px;margin-left:8px}
.portfolio-demo-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.portfolio-demo-actions a,.portfolio-demo-actions button{font:600 12px/1.4 Arial,Helvetica,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:5px;color:#eff5e6;text-decoration:none;cursor:pointer}
.portfolio-demo-actions button{background:#d7eda8;color:#163b2b;border:1px solid #d7eda8}
.portfolio-demo-actions button:hover{background:#e6f6c2}
.portfolio-demo-actions a:hover{text-decoration:underline;text-underline-offset:5px}
.portfolio-demo-actions a:focus-visible,.portfolio-demo-actions button:focus-visible{outline:3px solid #e6f6c2;outline-offset:4px}
.is-embedded-demo .portfolio-demo-bar{display:none}
.app-shell{min-height:calc(100vh - var(--portfolio-demo-height))}
.sidebar{top:var(--portfolio-demo-height)}
html{scroll-padding-top:calc(var(--portfolio-demo-height) + 14px)}
@media(max-width:760px){.portfolio-demo-bar{padding:8px 14px;gap:8px;min-height:60px;flex-wrap:wrap}.portfolio-demo-caption{display:none}.portfolio-demo-actions{gap:4px}.portfolio-demo-actions a,.portfolio-demo-actions button{padding:9px 8px}.sidebar{top:auto}}
@media print{.portfolio-demo-bar{display:none!important}.app-shell{min-height:0}}