:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#173653;background:#f4f7fb}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{display:flex;flex-direction:column;height:100dvh}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-bottom:1px solid #d9e3ed;background:#fff;flex-shrink:0}
.demo-label{display:flex;align-items:center;gap:13px;min-width:0}.demo-label strong{font-size:12px;letter-spacing:.1em;background:#ddebfa;color:#175782;padding:8px 10px;border-radius:7px}
.demo-label b{font-size:14px;display:block}.demo-label span{display:block;font-size:12px;color:#617286;margin-top:4px;line-height:1.4}
button{border:1px solid #b6c9dc;color:#173653;background:white;border-radius:7px;padding:10px 14px;font:600 13px Arial;cursor:pointer;white-space:nowrap}
button:hover{background:#edf4fb}button:focus-visible{outline:3px solid #4096d4;outline-offset:2px}
iframe{display:block;border:0;width:100%;flex:1;min-height:0;background:#fff}
@media(max-width:600px){.demo-bar{padding:10px;gap:8px}.demo-label{gap:8px}.demo-label span{font-size:11px}.demo-label strong{padding:7px;font-size:10px}.demo-label b{font-size:13px}button{font-size:11px;padding:9px}}