*{box-sizing:border-box}body{margin:0;padding:24px;background:#091116;color:#dce7ec;font:14px system-ui,sans-serif}header,footer,#grid{max-width:1100px;margin:0 auto}a{color:#80dae9}h1{font-size:27px;margin:20px 0 10px}p{color:#9bb2bf;line-height:1.8}nav{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}button,select{padding:9px 13px;border:1px solid #426172;background:#172832;color:#dce7ec;border-radius:4px;font:inherit;cursor:pointer}button[aria-pressed=true]{background:#31515d;border-color:#84ddea}.controls{display:flex;gap:15px;align-items:center;flex-wrap:wrap}input{accent-color:#79d4e3}#status{color:#8adce9}#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:#13242e;border:1px solid #354c59;border-radius:5px;overflow:hidden}.card h2{font-size:13px;margin:0;padding:10px;font-weight:400}.card canvas{width:100%;height:235px;display:block}.card small{display:block;text-align:center;color:#9db9c8;padding:8px}.card[hidden]{display:none}#grid.transform{grid-template-columns:1fr;max-width:620px}#grid.transform canvas{height:440px}footer{margin:20px auto;font-size:12px}button:disabled,select:disabled{opacity:.45}@media(max-width:700px){body{padding:16px}#grid{grid-template-columns:repeat(2,1fr)}.card canvas{height:210px}h1{font-size:23px}}