*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#f4f6fb;color:#182033;font:13px Inter,ui-sans-serif,system-ui,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
.masthead{height:65px;padding:10px 24px;display:flex;align-items:center;gap:24px;background:#0a0e1a;color:#fff;flex:none}
.brand{display:flex;align-items:center;gap:24px;flex:none}
.brand img{width:110px;height:43px;object-fit:contain}
.brand>span{border-left:1px solid #30364a;padding-left:22px;font-size:10px;font-weight:650;letter-spacing:.18em;color:#bdc5d9;white-space:nowrap}
.preview-note{display:flex;align-items:center;flex:none;margin-left:auto}
.sample-badge{font-size:9px;font-weight:700;letter-spacing:.1em;border:1px solid #3e4662;border-radius:4px;padding:6px 8px;color:#c7d2fe;white-space:nowrap}
iframe{flex:1;display:block;width:100%;border:0;min-height:0;background:#fff}
.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:28px;padding:5px 16px;background:#f4f6fb;border-top:1px solid #dde3ee;color:#6a778d;font-size:9px;flex:none}
.demo-footer a{color:#5c5ac5;text-decoration:none;white-space:nowrap}
.demo-footer a:hover{text-decoration:underline}
.demo-footer a:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
@media(max-width:1100px){.masthead{gap:16px;padding-inline:16px}.brand img{width:90px;height:40px}.sample-badge{font-size:8px}.demo-footer>span:last-child{display:none}}
@media(max-width:800px){.masthead{height:54px;padding:7px 12px;gap:14px}.brand{gap:14px}.brand img{height:34px;width:80px}.brand>span{font-size:8px;padding-left:14px}.sample-badge{font-size:8px}.demo-footer{font-size:8px;padding:5px 8px;gap:6px}.demo-footer>span:first-child{max-width:255px}}