:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#08111e;color:#eef5ff;font:14px/1.45 system-ui,sans-serif}.cmp{padding:18px;max-width:1800px;margin:auto}.cmp header{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}.cmp h1{margin:2px 0 4px}.cmp p,footer{color:#9fb0c9}.cmp button,.cmp select{background:#1c2c44;color:#fff;border:1px solid #4b6689;border-radius:7px;padding:8px}.cmp-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.cmp-controls>div{display:flex;gap:8px;flex-wrap:wrap;border:1px solid #2d415d;background:#101d30;border-radius:10px;padding:10px}.cmp-controls label{display:grid;gap:4px;color:#aebbd0;min-width:180px}.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmp-grid article{min-width:0;border:1px solid #344c6a;border-radius:11px;overflow:hidden;background:#0d1828}.cmp-label{padding:8px 10px;border-bottom:1px solid #344c6a;color:#bed9ff;font-weight:650}iframe{display:block;width:100%;height:calc(100vh - 260px);min-height:540px;border:0;background:#0b0e12}footer{padding:12px 0}@media(max-width:900px){.cmp-grid{grid-template-columns:1fr}.cmp-controls{grid-template-columns:1fr}iframe{height:70vh;min-height:500px}.cmp header{display:block}.cmp header button{margin-top:8px}}