.aw{
    --violet:#4733FF; --ink:#15141C; --muted:#6A6878; --line:#E2E0EC;
    --bg:#F5F6F8; --card:#FFFFFF;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-family:var(--sans); color:var(--ink); background:var(--bg);
    padding:34px 18px; display:flex; justify-content:center; position:relative;
  }
  .aw *{box-sizing:border-box;margin:0;padding:0}
  .aw .flow{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:stretch;position:relative}

  /* card */
  .aw .node{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:15px;
    padding:16px;box-shadow:0 10px 26px -18px rgba(20,15,60,.4);
    opacity:0;transform:translateY(12px) scale(.99);transition:opacity .42s ease, transform .42s ease}
  .aw .node.in{opacity:1;transform:none}
  .aw .node.drop{animation:awdrop .55s cubic-bezier(.34,1.45,.6,1) forwards}
  @keyframes awdrop{0%{opacity:0;transform:translateY(-16px) scale(.95)}60%{opacity:1}100%{opacity:1;transform:none}}
  .aw .node--narrow{width:66%;align-self:center}
  .aw .tile{width:42px;height:42px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center}
  .aw .tile svg{width:21px;height:21px}
  .aw .tile--violet{background:#ECE9FF;color:var(--violet)}
  .aw .tile--peach{background:#FBE6D6;color:#E07636}
  .aw .tile--mint{background:#D7F0EC;color:#1FA593}
  .aw .tile--gray{background:#EDEDF2;color:#3A3A44}
  .aw .tile--pink{background:#FBDBEB;color:#DB3E97}
  .aw .body{min-width:0;flex:1}
  .aw .lbl{font-size:13px;color:var(--muted);font-weight:500}
  .aw .ttl{font-size:16px;font-weight:700;letter-spacing:-.2px;margin-top:2px;line-height:1.3}
  .aw .desc{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
  .aw .awbadge{display:inline-flex;align-items:center;gap:6px;border:1px solid #EBB45F;color:#C07A00;
    border-radius:999px;padding:3px 11px 3px 8px;font-size:12px;font-weight:600;margin-top:11px;transition:.35s}
  .aw .awbadge svg{width:14px;height:14px}
  .aw .awbadge.live{border-color:#9BD8B6;color:#1E8E54;background:rgba(30,158,87,.08);box-shadow:0 0 0 0 rgba(30,158,87,.35);animation:awpulse 1s ease}
  @keyframes awpulse{0%{box-shadow:0 0 0 0 rgba(30,158,87,.4)}100%{box-shadow:0 0 0 12px rgba(30,158,87,0)}}

  /* connectors */
  .aw .conn{position:relative;height:30px}
  .aw .conn.plus{height:48px}
  .aw .conn .line{position:absolute;left:50%;top:0;width:2px;height:100%;background:var(--line);
    transform:translateX(-50%) scaleY(0);transform-origin:top}
  .aw .conn.in .line{animation:awline .5s ease forwards}
  @keyframes awline{0%{transform:translateX(-50%) scaleY(0);background:var(--violet)}100%{transform:translateX(-50%) scaleY(1);background:var(--line)}}
  .aw .addbtn{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:9px;background:#fff;
    border:1px solid var(--line);box-shadow:0 2px 7px rgba(20,15,60,.12);display:grid;place-items:center;
    color:var(--violet);transform:translate(-50%,-50%) scale(0);transition:transform .25s cubic-bezier(.34,1.6,.64,1) .12s, box-shadow .2s}
  .aw .addbtn svg{width:15px;height:15px}
  .aw .conn.in .addbtn{transform:translate(-50%,-50%) scale(1)}
  .aw .addbtn.hot{box-shadow:0 0 0 4px rgba(71,51,255,.18),0 2px 7px rgba(20,15,60,.12)}

  /* block picker */
  .aw .picker{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);width:100%;
    transition:max-height .42s ease, opacity .3s ease, transform .3s ease}
  .aw .picker.open{max-height:280px;opacity:1;transform:none;margin:4px 0}
  .aw .pcard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -20px rgba(20,15,60,.45);padding:8px}
  .aw .popt{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;transition:background .2s}
  .aw .popt + .popt{margin-top:2px}
  .aw .popt.sel{background:#F1EFFF}
  .aw .popt .tile{width:34px;height:34px;border-radius:9px}
  .aw .popt .tile svg{width:17px;height:17px}
  .aw .popt .pt{font-size:14px;font-weight:700;line-height:1.2}
  .aw .popt .ps{font-size:12px;color:var(--muted);margin-top:1px}

  /* end pill */
  .aw .end{align-self:center;font-size:12px;font-weight:600;color:var(--muted);background:#fff;
    border:1px solid var(--line);border-radius:999px;padding:5px 16px;
    opacity:0;transform:translateY(8px) scale(.96);transition:opacity .4s ease, transform .4s ease}
  .aw .end.in{opacity:1;transform:none}

  .aw .pend{display:none}

  /* fake cursor */
  .aw .cursor{position:absolute;left:0;top:0;width:24px;height:26px;z-index:60;pointer-events:none;opacity:0;
    transition:transform .62s cubic-bezier(.4,0,.2,1), opacity .3s ease}
  .aw .cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
  .aw .cursor .ring{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
    border:2px solid var(--violet);transform:scale(.2);opacity:0}
  .aw .cursor.click .ring{animation:awring .45s ease}
  @keyframes awring{0%{transform:scale(.2);opacity:.7}100%{transform:scale(1.7);opacity:0}}

  @media (prefers-reduced-motion: reduce){
    .aw .node,.aw .end,.aw .cursor,.aw .addbtn,.aw .picker{transition:none;animation:none}
  }