* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { display: grid; grid-template-rows: auto minmax(0, 1fr); color: #f7f5ef; background: #171916; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid #343830; background: #20231f; }
.demo-bar a { color: #f7f5ef; font-weight: 750; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.demo-bar p { margin: 0; color: #c6c9c0; font-size: .9rem; text-align: right; }
iframe { width: 100%; height: 100%; border: 0; background: white; }
@media (max-width: 720px) { .demo-bar { align-items: flex-start; flex-direction: column; } .demo-bar p { text-align: left; } }