body{background:#0b141a;color:#dbe8ed;font:16px system-ui;max-width:1000px;margin:32px auto;padding:0 20px}h1{color:#d2ff58}p{line-height:1.6;color:#b3c5cc}a{color:#aeeedc}nav{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}button{background:#192c35;color:#e3eced;border:1px solid #536973;padding:12px;cursor:pointer}button.active{border-color:#d2ff58;color:#d2ff58}main{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}article{background:#14222b;border:1px solid #34505a;padding:20px}canvas{width:100%;height:auto}strong{font-size:22px}label{display:inline-flex;align-items:center;gap:12px;margin:12px}input{max-width:40vw}output{min-width:50px}.status{color:#d2ff58;min-height:26px}@media(max-width:600px){main{grid-template-columns:1fr}h1{font-size:26px}}