:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#000}html,body,#app{width:100%;height:100%;overflow:hidden}body{margin:0}#app>main{height:100%}button,input,select{font:inherit}.demo-page{color:#e8f1f8;background:#05070a;grid-template-columns:minmax(0,1fr) 320px;display:grid}.demo-preview{min-height:0}.demo-controls{background:#0b1017;border-left:1px solid #24313d;flex-direction:column;gap:14px;padding:28px;display:flex}.demo-controls h1,.demo-controls p{margin:0}.demo-controls h1{font-size:1.35rem}.demo-eyebrow{color:#8faabd;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}.demo-controls label{color:#b7c9d8;gap:7px;font-size:.8rem;display:grid}.demo-controls input,.demo-controls select,.demo-controls button{box-sizing:border-box;border:1px solid #334655;border-radius:5px;width:100%;padding:9px 10px}.demo-controls input,.demo-controls select{color:inherit;background:#101923}.demo-controls button{color:#e8f1f8;cursor:pointer;background:#18374a}.demo-controls button:hover{background:#20516c}.demo-note{color:#8296a6;font-size:.8rem;line-height:1.45}@media (width<=720px){html,body,#app{overflow:auto}.demo-page{grid-template-columns:1fr;min-height:100%}#app>main.demo-page{height:auto}.demo-preview{height:60vh}.demo-controls{border-top:1px solid #24313d;border-left:0}}