:root{--paper:#fff;--ink:#000;--pencil:#6b6b6b;--graph:#cfe0f1;--graph-major:#9cbfe2;--highlighter:#fff176;--redpen:#d32f2f}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:var(--paper);flex-direction:column;font:14px/1.4 Arial,Helvetica,sans-serif;display:flex}header.top{border-bottom:1px solid var(--ink);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.name{font-size:16px}.version{color:var(--pencil)}select,button{font:inherit}.instructions{border-bottom:1px solid var(--ink);padding:8px 16px;position:relative}.instructions h1{margin:0 0 8px;font-size:18px}.instructions p{margin:0 0 8px}.instructions details p{margin:8px 0 0}.commands-list{z-index:10;border:1px solid var(--ink);background:var(--paper);width:min(560px,100% - 32px);max-height:60vh;margin-top:-1px;padding:0 16px 8px;position:absolute;top:100%;left:16px;overflow:auto}.commands-list h2{margin:16px 0 4px;font-size:14px}.commands-list dl{margin:0}.commands-list dt{margin-top:8px}.commands-list code{white-space:pre;font:13px/1.4 Consolas,Courier New,monospace}.commands-list dd{color:var(--pencil);margin:2px 0 0 16px}.instructions .note{color:var(--pencil)}.instructions-row{align-items:flex-start;gap:16px;display:flex}main.work{flex:1;grid-template-columns:55% 45%;min-height:0;display:grid}.editor{border-right:1px solid var(--ink);min-height:0;overflow:hidden}.side{grid-template-rows:minmax(0,1fr) auto minmax(0,28%);min-height:0;display:grid}.sim{min-height:0;overflow:hidden}.sim canvas{display:block}.controls{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}button{padding:4px 10px}.speed{align-items:center;gap:8px;margin-left:16px;display:flex}.serial-box{flex-direction:column;min-height:0;padding:8px 16px 16px;display:flex}.serial-box h2{margin:0 0 8px;font-size:14px}.serial{border:1px solid var(--ink);white-space:pre-wrap;flex:1;min-height:0;padding:8px;font:14px/1.4 Consolas,Courier New,monospace;overflow:auto}.serial-placeholder,.serial-warning{color:var(--pencil)}.serial-error{color:var(--redpen)}footer{border-top:1px solid var(--ink);padding:8px 16px}@media (width<=899px){html,body{height:auto}main.work,.side{display:block}.editor{border-right:none;border-bottom:1px solid var(--ink);height:50vh;min-height:300px}.sim{height:360px}.serial{flex:none;height:200px}}