:root{--bg-color: #333;--text-color: #fff}body{margin:0;background-color:var(--bg-color);color:var(--text-color);font-size:16px;font-family:Fira Sans,sans-serif}input,select,button{font:inherit;cursor:pointer}input,select{border-radius:.25rem;border:1px solid var(--text-color);background-color:var(--bg-color);color:var(--text-color)}.page{padding:1rem;display:flex}.page .clouds{width:calc(100% - 220px);max-width:900px}.page .clouds .cloud-box{margin:0 0 2rem}.page .clouds .cloud-box .inline-controls{display:flex;flex-wrap:wrap;align-items:flex-end;margin:1rem 0 .5rem}.page .clouds .cloud-box .inline-controls label{margin-right:1rem}.page .clouds .cloud-box .inline-controls label>span{display:block;font-size:.8rem}.page .clouds .cloud-box .inline-controls input[type=number],.page .clouds .cloud-box .inline-controls input[type=range]{width:45px}.page .clouds .cloud-box .cloud{border-radius:1rem;height:200px}.page .clouds .scenarios{margin-bottom:2rem}.page .clouds .scenarios h3{margin:0}.page .clouds .scenarios button{padding:1rem;border:1px solid var(--text-color);background-color:var(--bg-color);color:var(--text-color);border-radius:1rem;margin:1rem .5rem}.page .clouds .scenarios button.selected{color:var(--bg-color);background-color:var(--text-color)}.page .global-controls{flex:1 1 200px;padding:1rem 0 0 1rem;text-align:right}.page .global-controls textarea{resize:vertical;width:100%;max-width:500px;padding:1rem 1rem 0;font-family:inherit;color:var(--bg-color);box-sizing:border-box}