*{box-sizing:border-box}body{margin:0;background:#0b0d10;color:#f5f7fa;font-family:system-ui,sans-serif}
main{max-width:1400px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
h1{font-size:42px;margin:4px 0}p{color:#8f9aa8}small{color:#7cb8ff;font-weight:800;letter-spacing:.14em}
.layout{display:grid;grid-template-columns:1fr 310px;gap:20px}.panel,.card{background:#13171c;border:1px solid #29313a;border-radius:18px}
.toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #29313a}
.toolbar div:first-child{display:flex;flex-direction:column}.toolbar span{color:#8f9aa8;font-size:12px}.toolbar button{margin-left:8px}
.grid{margin:22px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);gap:9px;min-width:780px;aspect-ratio:1.5}
.panel{overflow:auto}.cell{position:relative;display:grid;place-items:center;border:1px solid #29313a;border-radius:12px;min-height:95px;cursor:pointer}
.cell:hover{border-color:#485563}.cell.selected{border:2px solid #7cb8ff;background:#111b25}.label{position:absolute;top:6px;left:8px;color:#687482;font-size:10px}
.shape{display:grid;place-items:center}.task,.subprocess{width:75px;height:45px;border:2px solid white;border-radius:7px}
.gateway{width:42px;height:42px;border:2px solid white;transform:rotate(45deg)}.start_event,.end_event,.unknown{width:46px;height:46px;border:2px solid white;border-radius:50%}
.end_event{border-width:5px}.unknown{border-style:dashed}.caption{font-size:9px;color:#9aa5b2;margin-top:8px;text-align:center}
.help{padding:0 18px 18px;font-size:13px}aside{display:flex;flex-direction:column;gap:20px}.card{padding:20px}.card h2{margin:14px 0 2px}
.code{font:700 18px monospace;color:#7cb8ff}.bits{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0}
.bits div{background:#1a2027;border-radius:9px;padding:8px;text-align:center;color:#8f9aa8;font-size:10px}.bits b{display:block;color:white;font-size:20px}
button{padding:9px 12px;border-radius:9px;border:1px solid #39434e;background:#20262e;color:white;cursor:pointer}button:disabled{opacity:.35}
.primary{width:100%;background:#7cb8ff;color:#07101a;border:0;font-weight:800}.hint{font-size:12px;line-height:1.5}
#status{color:#8f9aa8}@media(max-width:950px){.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr}}