html{height:100%}body{margin:0}body{margin:0 auto;max-width:960px;background:linear-gradient(to bottom, #141E30, #243B55)}h1{font-family:"Roboto",Arial,sans-serif;font-size:3em;font-weight:bold;letter-spacing:2px;text-align:center;text-transform:uppercase;color:#e6f2ff;text-shadow:4px 4px 0 #000;cursor:default}h2{display:block;text-align:center;margin-top:-1em;font-size:1.5em;cursor:default}h3{display:block;text-align:center;font-size:1em;cursor:default}main{color:#e6f2ff;font-family:sans-serif}hr{border:1px solid #e6f2ff}a{color:#e6f2ff}textarea{padding:10px;border:1px solid #ccc;border-radius:5px;font-size:16px;width:100%;max-width:100%;box-sizing:border-box;resize:vertical}textarea:hover{border-color:#888}textarea:focus{border-color:#4caf50;box-shadow:0 0 5px rgba(76,175,80,.5);outline:none}textarea:disabled{background-color:#f0f0f0;cursor:not-allowed}textarea[readonly]{background-color:#f0f0f0}textarea.error{border-color:#ff5722}textarea.valid{border-color:#4caf50}input[type=text],input[type=number]{width:100%;max-width:100%;padding:10px;border:2px solid #ccc;border-radius:5px;box-sizing:border-box;font-size:16px;color:#333;transition:border-color .2s}input[type=text]:hover,input[type=number]:hover{border-color:#888}input[type=text]:focus,input[type=number]:focus{border-color:#4caf50;box-shadow:0 0 5px rgba(76,175,80,.5);outline:none}input[type=text]:disabled,input[type=number]:disabled{background-color:#f0f0f0;cursor:not-allowed}input[type=text].error,input[type=number].error{border-color:#ff5722}input[type=text].valid,input[type=number].valid{border-color:#4caf50}input[type=checkbox]{width:20px;height:20px;margin-right:10px;appearance:none;cursor:pointer;border:2px solid #ccc;border-radius:5px;transition:border-color .2s}input[type=checkbox]:checked::before{content:"✔";font-size:16px;color:#4caf50;display:block;text-align:center;line-height:20px}input[type=checkbox]:hover{border-color:#888}input[type=checkbox].error{border-color:#ff5722}input[type=checkbox].valid{border-color:#4caf50}select{width:100%;padding:10px;border:2px solid #ccc;border-radius:5px;font-size:16px;color:#333;background-color:#fff;appearance:none;cursor:pointer;transition:border-color .2s}select:hover{border-color:#888}select:focus{border-color:#4caf50;box-shadow:0 0 5px rgba(76,175,80,.5);outline:none}select:disabled{background-color:#f0f0f0;cursor:not-allowed}select.error{border-color:#ff5722}select.valid{border-color:#4caf50}button{display:inline-block;padding:12px 32px;font-size:16px;font-weight:600;color:#e6f2ff;text-transform:uppercase;background-color:#141e30;border:none;border-radius:25px;box-shadow:0px 8px 15px rgba(0,0,0,.1);transition:all .3s ease 0s}button:hover{background-color:#243b55;box-shadow:0px 15px 20px rgba(0,0,0,.3);transform:translateY(-7px)}button:active{transform:translateY(-2px);box-shadow:0px 2px 5px rgba(0,0,0,.2)}.tooltip{position:relative}.tooltip .tooltiptext{visibility:hidden;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding:16px;margin-top:16px;background-color:rgba(0,0,0,.8);color:#e6f2ff;width:260px}.tooltip .tooltiptext::before{content:"";position:absolute;top:0%;left:50%;transform:translateX(-50%);margin-top:-32px;border-width:16px;border-style:solid;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,.8) rgba(0,0,0,0)}.tooltip:hover .tooltiptext{visibility:visible}.clue{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #e6f2ff;text-align:center;font-size:12px;line-height:18px;cursor:default}.io-container{display:flex}.io-panel{flex:1}.io-panel-left{margin-right:6px}.io-panel-right{margin-left:6px}