.hpcpro-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;max-width:1100px;margin:10px auto}
.hpcpro-grid{display:grid;grid-template-columns:minmax(360px,600px) 1fr;gap:20px;align-items:start}
.canvas-col{display:flex;flex-direction:column;align-items:center}
.form-col .row{display:flex;align-items:center;gap:10px;margin:10px 0}
.form-col label{min-width:160px;font-weight:600}
.form-col input{width:120px;padding:8px;border:1px solid #d0d7de;border-radius:8px}
.group{border-top:1px solid #eee;margin-top:16px;padding-top:6px}
canvas{background:#fff;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.2)}
.legend{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;align-items:center}
.sw{display:inline-block;width:16px;height:12px;border:1px solid #bbb;border-radius:3px}
.sw-direct{background:#d0eaff}
.sw-parallel{background:#daddfb}
.sw-teardrop{background:#ffe0c2}
.sw-hold{background:#000}
.sw-entry{background:repeating-linear-gradient(90deg,#0a7cff 0 6px,transparent 6px 12px);border-color:#0a7cff}
.btn{padding:.5rem .75rem;border-radius:8px;border:1px solid #ff875e;background:#fff;color:#ff875e;cursor:pointer}
.btn.outline:hover{background:#fff1eb}
.btns{display:flex;gap:10px;margin:10px 0}
.seg{display:inline-flex;border:1px solid #61b3e6;border-radius:8px;overflow:hidden}
.seg-btn{background:#fff;border:none;border-right:1px solid #61b3e6;color:#0a6fb8;padding:.45rem .7rem;cursor:pointer}
.seg-btn:last-child{border-right:none}
.seg-btn.active{background:#17a2b8;color:#fff;border-color:#17a2b8}
.instructions{margin-top:10px;padding:10px 12px;background:#f7fbff;border:1px solid #cde8ff;border-radius:8px}
.instructions b{color:#0a6fb8}
@media(max-width:900px){.hpcpro-grid{grid-template-columns:1fr}}