:root{
      --muted:#98a2b3;
      --accent:#59d0ff;
      --accent-2:#7df9c6;
      --ok:#21c55d;
      --warn:#f59e0b;
      --bad:#ef4444;
      --border:rgba(255,255,255,.08);
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    .wrap{max-width:1200px; margin:0 auto; padding:0 20px}
    .brand{display:flex; align-items:center; gap:14px}

    /* Flow lane */
    .lane{
      margin:28px auto 8px; padding:18px; background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:18px;
    }
    .flow{
      display:flex; gap:16px; overflow:auto; padding-bottom:6px; scrollbar-width:thin;
    }
    .step{min-width:210px; max-width:260px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px; position:relative; box-shadow: var(--shadow)}
    .step h4{margin:0 0 8px; font-size:16px}
    .step p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}
    .arrow{align-self:center; min-width:52px; height:2px; background:linear-gradient(90deg, transparent, var(--accent) 40% 60%, transparent); position:relative}
    .arrow::after{content:""; position:absolute; right:-2px; top:-5px; border:6px solid transparent; border-left-color:var(--accent)}

    /* Two-track details */
    section{margin:28px 0}
    .section-title{font-size:22px; font-weight:700; margin:0 0 12px}
    .grid{display:grid; grid-template-columns:1fr; gap:16px}
    @media (min-width:900px){ .grid{grid-template-columns:1fr 1fr}}
    .card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
    .card h3{margin:0 0 6px}
    .pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
    .list{margin:10px 0 0; padding-left:18px}
    .list li{margin:6px 0}

    /* Swimlanes */
    .swim{display:grid; gap:16px}
    .lane-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
    .lane-head h4{margin:0}
    .badge{font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}

    /* Footer & small utilities */
    .footer{margin:28px 0 40px; color:var(--muted); font-size:12px}
    .muted{color:var(--muted)}
    .legend{display:flex; gap:8px; flex-wrap:wrap}
    .legend span{font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid var(--border)}

    /* Print */
    @media print{
      header{position:relative; background:transparent; padding-bottom:8px}
      .lane, .card{box-shadow:none}
      .arrow{min-width:40px}
    }