*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,Arial;background:#080b10;color:#eaf1ff}.app{display:grid;grid-template-columns:1fr 310px;height:100vh}main{min-width:0;display:grid;grid-template-rows:64px 1fr 36px;background:radial-gradient(circle at 50% 40%,#111c2c,#06080c 70%)}header{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #1b2636;background:#0b1018cc}header b{display:block;letter-spacing:.08em}header span,.muted{font-size:12px;color:#8090a7}#status{font-size:11px;color:#65e6ad;border:1px solid #235e4a;border-radius:999px;padding:6px 10px}canvas{width:100%;height:100%;display:block;cursor:grab}canvas:active{cursor:grabbing}footer{font-size:11px;color:#718198;padding:10px 20px;border-top:1px solid #151e2a}aside{padding:20px;background:#0d121a;border-left:1px solid #1b2636;overflow:auto}h2{margin:0 0 3px;font-size:20px}section{margin-top:22px;padding-top:17px;border-top:1px solid #1c2735}h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#9db1cc;margin:0 0 14px}label{display:flex;justify-content:space-between;font-size:12px;margin-top:12px}output{color:#68d9ff}input[type=range]{width:100%;accent-color:#6bdcff}button{width:100%;margin-top:12px;padding:9px;border:1px solid #2b415a;border-radius:8px;background:#142033;color:#ddecff;cursor:pointer}.stats div{display:flex;justify-content:space-between;padding:5px 0;font-size:12px}.stats b{color:#6fe2c1}pre{white-space:pre-wrap;color:#a9dfff;font-size:11px}@media(max-width:760px){.app{grid-template-columns:1fr;grid-template-rows:60vh auto;height:auto;min-height:100vh}main{height:60vh}aside{border-left:0;border-top:1px solid #1b2636}}