:root{font:15px system-ui;color:#dce7ed;background:#10171d}body{margin:0}main{max-width:1440px;margin:auto;padding:28px}h1{font-weight:600}small{font-size:16px;color:#71d6be}p{line-height:1.6;color:#a9bcc9}nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}button,select,input{background:#263640;color:#edf6fb;border:1px solid #425665;border-radius:5px;padding:8px}button{cursor:pointer}#views{display:grid;grid-template-columns:1fr 1fr;gap:20px}article{min-width:0}h2{font-size:17px}.surface{height:420px;border:1px solid #425665;border-radius:8px;overflow:hidden;touch-action:none}.surface:focus-within{outline:2px solid #71d6be}canvas{display:block}output{display:block;font:12px monospace;color:#8ca4b6;padding:10px}#status{min-height:24px}@media(max-width:900px){#views{grid-template-columns:1fr}}