*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#080a0b;color:#eee;font-family:Arial,sans-serif}#app{display:grid;grid-template-columns:minmax(0,1fr) 420px}#stage{position:relative;min-width:0}canvas{display:block;width:100%;height:100%}aside{background:#0d1011;border-left:1px solid #252b2d;padding:24px;overflow:auto}h1{font-size:21px;letter-spacing:1px;margin:0 0 22px}h1 b{color:#c1ff11}.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid #252b2d}.tab,.opt{border:1px solid #343b3d;background:#15191a;color:#ddd;border-radius:10px;padding:10px 13px;cursor:pointer}.tab.active,.opt.active{border-color:#c1ff11;color:#c1ff11}.section{padding:20px 0;border-bottom:1px solid #252b2d}.section h3{font-size:12px;letter-spacing:1.5px;color:#aeb4b6;margin:0 0 13px}.row{display:flex;gap:9px;flex-wrap:wrap}.swatch{width:42px;height:42px;border-radius:50%;border:2px solid #444;cursor:pointer}.swatch.active{outline:2px solid #c1ff11;outline-offset:3px}#status{position:absolute;left:18px;top:18px;background:#0b0e0ed9;border:1px solid #303638;border-radius:10px;padding:10px 13px;font-size:13px}#diag{position:absolute;left:18px;bottom:18px;background:#0b0e0ed9;border:1px solid #303638;border-radius:9px;padding:9px 12px;font-size:12px;color:#c1ff11}@media(max-width:900px){#app{grid-template-columns:1fr;grid-template-rows:58vh 42vh}aside{border-left:0;border-top:1px solid #252b2d;padding:16px}}