:root { color-scheme: dark; --bg:#0d1117; --panel:#161b22; --line:#30363d; --text:#e6edf3; --muted:#8b949e; --accent:#2ea043; --code:#0a0e14; --blue:#58a6ff; --purple:#d2a8ff; --warn:#d29922; --red:#da3633; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
  header { padding:22px 24px; border-bottom:1px solid var(--line); }
  h1 { margin:0 0 6px; font-size:22px; }
  .sub { color:var(--muted); font-size:14px; }
  main { max-width:1100px; margin:0 auto; padding:20px; }
  .bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  input[type=text], select { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:15px; }
  #domain { flex:1; min-width:260px; font-family: ui-monospace, Menlo, Consolas, monospace; }
  button { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px 12px; cursor:pointer; font-size:13px; }
  button:hover { border-color:var(--muted); }
  button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; padding:10px 18px; font-size:15px; }
  .msg { color:#f85149; margin-top:10px; min-height:18px; font-size:14px; }
  details { margin-top:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; }
  summary { cursor:pointer; color:var(--muted); }
  .settings { display:grid; grid-template-columns: 170px 1fr; gap:8px 12px; margin-top:12px; align-items:center; }
  .settings input, .settings select { width:100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size:13px; padding:6px 8px; }

  .tabs { display:flex; gap:6px; margin:22px 0 14px; border-bottom:1px solid var(--line); }
  .tab { border:none; border-bottom:2px solid transparent; border-radius:0; background:none; padding:10px 14px; color:var(--muted); }
  .tab.active { color:var(--text); border-bottom-color:var(--accent); }
  .pane { display:none; } .pane.active { display:block; }

  .legend { color:var(--muted); font-size:13px; line-height:1.7; margin-bottom:12px; }
  .legend b { color:var(--text); }
  .sw { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:4px; }
  #treeWrap { overflow:auto; border:1px solid var(--line); border-radius:10px; background:#0b1017; padding:20px; }
  #treeInner { position:relative; min-width:960px; }
  svg.edges { position:absolute; top:0; left:0; pointer-events:none; z-index:0; overflow:visible; }
  svg path { fill:none; stroke:#3b434c; stroke-width:1.4; transition:opacity .2s; }
  svg path.hot { stroke:var(--accent); stroke-width:2.4; stroke-dasharray:9 7; animation:flow .9s linear infinite; }
  @keyframes flow { to { stroke-dashoffset:-32; } }
  .layer { display:flex; flex-wrap:wrap; justify-content:center; gap:34px 14px; margin-bottom:34px; position:relative; z-index:1; }

  .node { width:206px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 11px; cursor:pointer; position:relative;
          transition:opacity .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, filter .35s ease; }
  .node:hover { filter:brightness(1.12); }
  .node.recon { --pulse:46,160,67; border-color:#2ea043; background:#0f1d15; }
  .node.vuln  { --pulse:218,54,51; border-color:#da3633; background:#1f1113; }
  .node.optional { border-style:dashed; }
  .node.faded { opacity:.22; }
  .node.lit { transform:translateY(-3px); filter:brightness(1.25); }
  .node.focus { animation:pulse 1.4s ease-out 2; }
  @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(var(--pulse), .6); } 100% { box-shadow:0 0 0 12px rgba(var(--pulse), 0); } }
  .node-stage { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
  .node.recon .node-stage { color:#56d364; }
  .node.vuln .node-stage { color:#ff7b72; }
  .node h4 { margin:3px 0 4px; font-size:13px; }
  .node.recon h4 { color:#7ee787; }
  .node.vuln h4 { color:#ffa198; }
  .node .tool { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11px; color:var(--blue); margin-bottom:6px; }
  .track { position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; border:1px solid var(--line); }
  .track.H { color:var(--blue); border-color:#1f6feb; }
  .track.V { color:var(--purple); border-color:#8957e5; }
  .io-label { font-size:10px; color:var(--muted); margin-top:5px; text-transform:uppercase; }
  .chip { display:inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size:10.5px; background:var(--code); border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin:2px 2px 0 0; word-break:break-all; }
  .chip.out { border-color:#1f6feb; color:#a5d6ff; }
  .chip.in { color:var(--text); }

  .divider { margin:28px 0 4px; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:6px; }
  .divider:first-child { margin-top:8px; }
  .chev { padding:0 6px; font-size:14px; line-height:1; flex-shrink:0; color:var(--muted); }
  .phase { background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-top:12px; overflow:visible; }
  .phase-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; cursor:pointer; user-select:none; }
  .phase-head:hover { background:#1a2029; }
  .phase-head.closed { border-bottom:none; }
  .phase-head h2 { font-size:16px; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .phase-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .badge { font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--line); color:var(--muted); font-weight:400; }
  .badge.Basic { color:var(--blue); border-color:#1f6feb; }
  .badge.Intermediate { color:var(--warn); border-color:#9e6a03; }
  .badge.Advanced { color:#f85149; border-color:#da3633; }
  .badge.Manual { color:var(--purple); border-color:#8957e5; }
  .pcount { font-size:12px; color:var(--muted); }
  .pcount.complete { color:#56d364; font-weight:600; }
  .cmd { padding:12px 16px; border-top:1px solid var(--line); }
  .cmd-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
  .cmd-title { font-size:14px; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:8px; min-width:0; }
  .cmd-title input { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; flex-shrink:0; }
  .cmd.done .cmd-title { text-decoration:line-through; opacity:.6; }
  .cmd.done pre { opacity:.55; }
  pre { background:var(--code); border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin:0; overflow-x:auto; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-all; font-family: ui-monospace, Menlo, Consolas, monospace; }
  .manual pre { color:var(--purple); }
  .toolbar { display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 4px; align-items:center; }
  .overall { margin-left:auto; color:var(--muted); font-size:13px; }
  .group-title { font-size:15px; margin:24px 0 8px; color:var(--text); }
  .tool-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px; }
  .tool-card .top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px; }
  .tool-card .name { font-weight:600; font-size:14px; }
  .tool-card .use { color:var(--muted); font-size:13px; margin-top:2px; }
  .steps { font-size:11px; color:var(--muted); }
  .note { color:var(--warn); font-size:13px; margin:10px 0; line-height:1.5; }
  footer { color:var(--muted); font-size:12px; text-align:center; padding:30px 20px; }

  /* ---------- Tree fit-to-screen ---------- */
  .treebar { display:flex; justify-content:flex-end; margin-bottom:8px; }
  #treeScale { position:relative; overflow:hidden; }

  /* ---------- Responsive ---------- */
  img, svg { max-width:100%; }

  /* Tablets and small laptops: keep the tree scrollable sideways */
  @media (max-width: 1100px) {
    main { padding:16px; }
    #treeInner { min-width:960px; }
  }

  /* Phones and narrow tablets: stack everything, tree becomes a vertical flow */
  @media (max-width: 720px) {
    body { font-size:15px; }
    header { padding:16px; }
    h1 { font-size:19px; }
    main { padding:12px; }

    .bar { flex-direction:column; align-items:stretch; }
    #domain { min-width:0; width:100%; font-size:16px; }
    .bar button.primary { width:100%; }

    .tabs { overflow-x:auto; white-space:nowrap; gap:0; -webkit-overflow-scrolling:touch; }
    .tab { padding:12px 14px; flex-shrink:0; }

    .settings { grid-template-columns:1fr; gap:4px; }
    .settings label { margin-top:10px; font-size:13px; color:var(--muted); }

    .legend { font-size:13px; }
    #treeWrap { padding:8px; border-radius:8px; }
    .track { top:6px; right:6px; }

    .toolbar { gap:8px; }
    .toolbar button { flex:1 1 45%; }
    .overall { margin-left:0; width:100%; text-align:left; }

    .divider { margin-top:22px; font-size:11px; }
    .phase { margin-top:10px; }
    .phase-head { padding:12px; gap:8px; }
    .phase-head h2 { font-size:15px; }
    .phase-actions { width:100%; justify-content:space-between; }
    .cmd { padding:12px; }
    .cmd-head { flex-wrap:wrap; align-items:flex-start; gap:8px; }
    .cmd-title { font-size:14px; line-height:1.4; flex:1; min-width:0; }
    .cmd-title input { width:20px; height:20px; }
    .cmd-head > button { flex-shrink:0; }
    pre { font-size:12px; padding:10px; }

    button { padding:10px 12px; }
    .tool-card { padding:12px; }
    .tool-card .top { flex-direction:column; gap:8px; }
    .tool-card .top > button { align-self:flex-start; }
  }

  /* Very small phones */
  @media (max-width: 380px) {
    h1 { font-size:17px; }
    .node h4 { font-size:12.5px; }
    .chip { font-size:10px; }
  }

  /* Touch devices: no hover-only effects */
  @media (hover: none) {
    .node:hover { filter:none; }
  }

  /* ---------- Guidance, notes, tree progress ---------- */
  .info { font-size:13px; color:var(--muted); line-height:1.6; padding:10px 16px; background:#0f141b; border-bottom:1px solid var(--line); }
  .info b { color:var(--text); }
  .guide { margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.5; border-left:3px solid #1f6feb; padding:4px 10px; }
  .guide b { color:var(--text); }
  .guide .gl { color:#a5d6ff; font-family: ui-monospace, Menlo, Consolas, monospace; }

  .flags { margin-top:8px; font-size:12.5px; color:var(--muted); line-height:1.6; background:#0f141b; border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
  .flags-title { color:var(--text); font-weight:600; margin-bottom:2px; }
  .flags code { color:#a5d6ff; font-family: ui-monospace, Menlo, Consolas, monospace; }
  .toolnote { color:var(--warn); font-size:13px; margin:6px 0; line-height:1.5; }
  .toolverify { margin-top:6px; }
  .tool-card label.small { font-size:12px; color:var(--muted); }

  .codebox { position:relative; }
  .codebox pre { padding-right:84px; }
  .codebox .copy { position:absolute; top:8px; right:8px; padding:6px 10px; }
  #toolSearch { width:100%; margin:6px 0 10px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:10px 12px; font-size:15px; }
  .tool-card[hidden] { display:none; }
  .flags-tool { color:var(--text); font-weight:600; margin-top:6px; }
  .flag-line { margin-left:8px; }

  .flags-row { line-height:1.7; margin-top:4px; }
  .flags-row .flags-tool { display:inline; color:var(--text); font-weight:600; margin:0; }
  .flags-row .flag-item { white-space:normal; }

  .details-btn { margin-right:8px; }
  .extra { margin-top:8px; }
  .extra[hidden], .info[hidden] { display:none; }

  .tip { position:relative; display:inline-block; margin-left:8px; vertical-align:middle; }
  .tipbtn { width:26px; height:26px; padding:0; border-radius:50%; font-size:14px; line-height:24px; text-align:center; flex-shrink:0; }
  .tip-pop { position:absolute; top:32px; right:0; z-index:30; width:min(360px, 80vw); max-height:60vh; overflow:auto; background:#0f141b; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.6; color:var(--muted); box-shadow:0 8px 24px rgba(0,0,0,.45); text-align:left; font-weight:400; }
  .tip-pop[hidden] { display:none; }
  .tip-pop b { color:var(--text); }
  .cmd-head { align-items:center; }
  .phase-head:first-child { border-radius:10px 10px 0 0; }

  /* ---------- Glass workflow cards ---------- */
  #treeWrap {
    background:
      radial-gradient(circle at 18% 12%, rgba(88,166,255,0.22), transparent 42%),
      radial-gradient(circle at 82% 88%, rgba(210,168,255,0.18), transparent 46%),
      radial-gradient(circle at 60% 40%, rgba(46,160,67,0.10), transparent 38%),
      #0b1017;
  }
  .node {
    background:rgba(22,27,34,0.42);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10);
  }
  .node.recon {
    background:linear-gradient(135deg, rgba(46,160,67,0.26), rgba(22,27,34,0.40));
    border-color:rgba(86,211,100,0.42);
  }
  .node.vuln {
    background:linear-gradient(135deg, rgba(218,54,51,0.28), rgba(22,27,34,0.40));
    border-color:rgba(255,123,114,0.48);
  }
  .node.optional { border-style:dashed; }
  .node:hover {
    transform:translateY(-2px);
    border-color:rgba(255,255,255,0.32);
    box-shadow:0 14px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .node .track {
    background:rgba(13,17,23,0.55);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  .node.recon h4 { text-shadow:0 1px 2px rgba(0,0,0,0.5); }
  .node.vuln h4 { text-shadow:0 1px 2px rgba(0,0,0,0.5); }

  /* ---------- Lighter tree background so the glass cards show ---------- */
  body {
    background:
      radial-gradient(circle at 15% 8%, rgba(88,166,255,0.28), transparent 40%),
      radial-gradient(circle at 85% 85%, rgba(210,168,255,0.22), transparent 45%),
      radial-gradient(circle at 55% 45%, rgba(46,160,67,0.14), transparent 40%),
      #0d1117;
    background-attachment:fixed;
  }
  #treeWrap {
    background:transparent;
    border:1px solid rgba(255,255,255,0.08);
  }
  .node {
    background:rgba(22,27,34,0.28);
  }
  .node.recon {
    background:linear-gradient(135deg, rgba(46,160,67,0.22), rgba(22,27,34,0.26));
  }
  .node.vuln {
    background:linear-gradient(135deg, rgba(218,54,51,0.24), rgba(22,27,34,0.26));
  }

  /* ---------- Info icon and popup: no visible borders ---------- */
  .tipbtn, .tipbtn:hover, .tipbtn:focus { border:none; background:transparent; }
  .tip-pop, .tip-pop * { border:none; }
  .tip-pop { outline:none; }

  /* ---------- WebRecon site header and footer ---------- */
  .wr-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 24px; border-bottom:1px solid #30363d; background:#0d1117; }
  .wr-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:#e6edf3; }
  .wr-logo-img { width:auto; height:50px; max-width:320px; border-radius:0; background:transparent; object-fit:contain; display:block; }
  .wr-tag { color:#8b949e; font-size:13px; }
  .wr-nav a { color:#8b949e; margin-left:18px; text-decoration:none; font-size:14px; cursor:pointer; }
  .wr-nav a:hover { color:#e6edf3; }
  .wr-footer { margin-top:40px; border-top:1px solid #30363d; padding:28px 24px 22px; background:#070a0e; color:#8b949e; font-size:13px; line-height:1.7; }
  .wr-footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr; gap:28px; }
  .wr-footer h4 { color:#e6edf3; margin:0 0 6px; font-size:14px; }
  .wr-footer p { margin:0 0 8px; }
  .wr-footer a { color:#8b949e; }
  .wr-footer a:hover { color:#e6edf3; }
  .wr-copy { max-width:1100px; margin:18px auto 0; padding-top:14px; border-top:1px solid #30363d; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  @media (max-width: 720px) {
    .wr-footer-inner { grid-template-columns:1fr; }
    .wr-nav a { margin-left:12px; }
  }

  /* =====================================================================
     Modern visual refresh (WebRecon)
     ===================================================================== */

  :root {
    --bg:#070a10; --panel:#0f141c; --panel2:#131a24; --line:rgba(148,163,184,0.14);
    --text:#e6ecf5; --muted:#8fa0b5; --accent:#22c55e; --accent2:#60a5fa; --purple:#a78bfa; --warn:#f59e0b; --red:#ef4444;
    --radius:16px;
  }
  html { scroll-behavior:smooth; }
  body {
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
      radial-gradient(1000px 500px at 10% -10%, rgba(96,165,250,0.18), transparent 60%),
      radial-gradient(900px 500px at 100% 0%, rgba(167,139,250,0.14), transparent 55%),
      radial-gradient(800px 600px at 50% 110%, rgba(34,197,94,0.10), transparent 60%),
      var(--bg);
    background-attachment:fixed;
    color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  ::selection { background:rgba(96,165,250,0.35); }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-thumb { background:rgba(148,163,184,0.25); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }

  /* Header */
  .wr-header {
    position:sticky; top:0; z-index:60; min-height:64px;
    background:rgba(7,10,16,0.72); border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
    padding:12px 28px;
  }
  .wr-brand { font-weight:800; letter-spacing:-0.01em; font-size:17px; }
  .wr-logo-img { height:50px; width:auto; max-width:320px; border-radius:0; background:transparent; }
  .wr-tag { display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.03); }
  .wr-nav a { display:inline-block; margin-left:6px; padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; transition:background .2s, color .2s; }
  .wr-nav a:hover { background:rgba(255,255,255,0.06); }

  /* Hero */
  .hero { max-width:1100px; margin:0 auto; padding:56px 20px 8px; text-align:left; }
  .hero-title { font-size:clamp(30px, 4.6vw, 46px); line-height:1.1; letter-spacing:-0.025em; margin:0 0 12px; font-weight:800; }
  .hero-title span { background:linear-gradient(90deg, var(--accent2), var(--purple), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-sub { margin:0; color:var(--muted); font-size:16px; max-width:640px; }

  main { max-width:1100px; padding:24px 20px 20px; }

  /* Search and buttons */
  .bar { gap:12px; margin-top:22px; }
  #domain {
    flex:1; min-width:260px; padding:15px 18px; font-size:16px; border-radius:14px;
    background:rgba(15,20,28,0.8); border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:border-color .2s, box-shadow .2s;
  }
  #domain:focus { outline:none; border-color:rgba(34,197,94,0.6); box-shadow:0 0 0 4px rgba(34,197,94,0.14); }
  #domain::placeholder { color:#55657a; }
  button {
    background:rgba(255,255,255,0.04); color:var(--text); border:1px solid var(--line);
    border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:500;
    transition:background .2s, border-color .2s, transform .15s, box-shadow .2s;
  }
  button:hover { background:rgba(255,255,255,0.08); border-color:rgba(148,163,184,0.35); }
  button:active { transform:scale(0.97); }
  button.primary {
    background:linear-gradient(135deg, #22c55e, #16a34a); border:none; color:#fff; font-weight:700;
    border-radius:14px; padding:15px 26px; font-size:15px; box-shadow:0 10px 30px rgba(34,197,94,0.28);
  }
  button.primary:hover { background:linear-gradient(135deg, #34d368, #1ca84b); box-shadow:0 14px 36px rgba(34,197,94,0.38); transform:translateY(-1px); }
  button.copy, .details-btn { font-size:12px; padding:6px 12px; }
  .msg { font-size:13.5px; }

  details { border-radius:var(--radius); background:rgba(15,20,28,0.6); backdrop-filter:blur(8px); }
  summary { font-weight:500; color:var(--muted); }
  .settings input, .settings select { border-radius:10px; background:rgba(7,10,16,0.7); border:1px solid var(--line); }

  /* Tabs as a segmented control */
  .tabs {
    display:inline-flex; gap:4px; padding:5px; margin:26px 0 18px; border:1px solid var(--line);
    border-radius:999px; background:rgba(15,20,28,0.7); border-bottom:1px solid var(--line);
  }
  .tab { border:none; border-radius:999px; padding:9px 18px; color:var(--muted); font-weight:500; background:transparent; }
  .tab:hover { color:var(--text); background:rgba(255,255,255,0.05); }
  .tab.active { background:linear-gradient(135deg, rgba(34,197,94,0.22), rgba(96,165,250,0.18)); color:var(--text); box-shadow:inset 0 0 0 1px rgba(34,197,94,0.35); }

  /* Legend and toolbar */
  .legend { font-size:13.5px; color:var(--muted); background:rgba(15,20,28,0.55); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
  .toolbar { gap:10px; margin:14px 0 6px; }
  .overall { font-size:13px; background:rgba(255,255,255,0.04); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }

  /* Dividers */
  .divider {
    display:flex; align-items:center; gap:14px; margin:36px 0 6px; border-bottom:none;
    font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  }
  .divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); }

  /* Phase cards */
  .phase {
    background:linear-gradient(180deg, rgba(19,26,36,0.85), rgba(15,20,28,0.85));
    border:1px solid var(--line); border-radius:20px; margin-top:14px;
    box-shadow:0 12px 40px rgba(0,0,0,0.25); transition:border-color .25s, box-shadow .25s;
  }
  .phase:hover { border-color:rgba(96,165,250,0.25); }
  .phase-head { padding:16px 20px; border-bottom:1px solid var(--line); border-radius:20px 20px 0 0; }
  .phase-head:hover { background:rgba(255,255,255,0.025); }
  .phase-head.closed { border-radius:20px; }
  .phase-head h2 { font-size:16px; font-weight:700; letter-spacing:-0.01em; }
  .chev { color:var(--accent2); }
  .badge { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,0.04); }
  .badge.Basic { color:#7dd3fc; border-color:rgba(125,211,252,0.35); }
  .badge.Intermediate { color:#fcd34d; border-color:rgba(252,211,77,0.35); }
  .badge.Advanced { color:#fca5a5; border-color:rgba(252,165,165,0.35); }
  .badge.Manual { color:#c4b5fd; border-color:rgba(196,181,253,0.35); }
  .pcount { font-size:12.5px; font-weight:500; }
  .pcount.complete { color:#4ade80; }
  .cmd { padding:16px 20px; border-top:1px solid var(--line); transition:background .2s; }
  .cmd:hover { background:rgba(255,255,255,0.015); }
  .cmd-title { font-size:14px; color:#c7d2e0; font-weight:500; }
  .cmd-title input { accent-color:#22c55e; }
  .cmd.done .cmd-title { color:var(--muted); }

  /* Command boxes */
  .codebox pre, pre {
    background:#05080d; border:1px solid rgba(148,163,184,0.12); border-radius:12px;
    font-size:13px; line-height:1.6; padding:14px 16px;
    font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    color:#d6e2f0;
  }
  .codebox .copy { top:10px; right:10px; }

  /* Flags and expected output inside popups */
  .flags, .guide { font-family:inherit; }
  .flags { background:rgba(7,10,16,0.6); border-radius:12px; border:1px solid var(--line); }

  /* Info popup */
  .tip-pop { border-radius:14px; background:rgba(12,16,23,0.92); backdrop-filter:blur(12px); box-shadow:0 18px 50px rgba(0,0,0,0.5); }
  .tipbtn { color:var(--accent2); font-size:15px; }

  /* Tool cards */
  #toolSearch { border-radius:14px; padding:14px 18px; background:rgba(15,20,28,0.8); border:1px solid var(--line); }
  #toolSearch:focus { outline:none; border-color:rgba(96,165,250,0.5); box-shadow:0 0 0 4px rgba(96,165,250,0.12); }
  .group-title { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:34px 0 12px; }
  .tool-card {
    background:linear-gradient(180deg, rgba(19,26,36,0.8), rgba(15,20,28,0.8));
    border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin-bottom:12px;
    transition:border-color .2s, transform .2s;
  }
  .tool-card:hover { border-color:rgba(96,165,250,0.25); transform:translateY(-1px); }
  .tool-card .name { font-size:15px; font-weight:700; }
  .tool-card .use { font-size:13.5px; }
  .toolnote { font-size:12.5px; color:#fcd34d; background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.18); border-radius:10px; padding:8px 12px; }

  /* Workflow tree area */
  #treeWrap { border-radius:20px; border:1px solid var(--line); background:transparent; }
  .node { border-radius:16px; }

  /* Footer */
  .wr-footer { margin-top:56px; background:rgba(7,10,16,0.85); border-top:1px solid var(--line); padding:36px 28px 26px; }
  .wr-footer-inner { max-width:1100px; }
  .wr-copy { border-top:1px solid var(--line); }

  /* Small screens */
  @media (max-width: 720px) {
    .wr-header { padding:10px 14px; }
    .hero { padding:36px 16px 4px; }
    main { padding:18px 14px; }
    .tabs { display:flex; width:100%; }
    .tab { flex:1; padding:9px 8px; font-size:13px; }
    button.primary { width:100%; }
  }

  /* Typewriter headline */
  .hero-title .grad { background:linear-gradient(90deg, var(--accent2), var(--purple), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .caret { display:inline-block; width:3px; height:0.95em; margin-left:4px; vertical-align:-0.08em; background:var(--accent); border-radius:2px; animation:blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .caret { animation:none; } }

  /* Navbar polish */
  .wr-header { box-shadow:0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.25); }
  .wr-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(96,165,250,0.5), rgba(34,197,94,0.5), transparent); }
  .wr-header { position:sticky; }
  .wr-nav { display:flex; gap:4px; }

  /* Footer redesign */
  .wr-footer { position:relative; margin-top:64px; background:linear-gradient(180deg, rgba(7,10,16,0.6), rgba(5,8,13,0.95)); border-top:none; padding:52px 28px 26px; }
  .wr-footer::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(96,165,250,0.45), rgba(34,197,94,0.45), transparent); }
  .wr-footer-inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
  .wr-footer h4 { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
  .wr-footer p { font-size:13.5px; color:var(--muted); }
  .wr-brand-foot { font-size:18px; font-weight:800; color:var(--text); display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; }
  .social { display:flex; flex-wrap:wrap; gap:8px; }
  .social a { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,0.03); color:var(--text); font-size:13.5px; font-weight:500; text-decoration:none; transition:background .2s, border-color .2s, transform .15s; }
  .social a:hover { background:rgba(255,255,255,0.08); border-color:rgba(96,165,250,0.45); transform:translateY(-1px); }
  .social .dot { width:8px; height:8px; border-radius:50%; }
  .dot.fb { background:#1877f2; } .dot.tg { background:#229ed9; } .dot.gh { background:#e6ecf5; } .dot.yt { background:#ff0033; }
  .wr-copy { margin-top:30px; }
  @media (max-width: 720px) {
    .wr-footer-inner { grid-template-columns:1fr; gap:28px; }
    .wr-footer { padding:40px 18px 22px; }
  }

  /* Typewriter: first part white, second part coloured, terminal pipe cursor */
  .hero-title .tw-white { color:#ffffff; }
  .hero-title .pipe { display:inline-block; margin-left:2px; color:var(--accent); font-weight:400; animation:blink 1s steps(1) infinite; }
  .hero-title .grad { background:linear-gradient(90deg, var(--accent2), var(--purple), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .caret { display:none; }

  /* Footer text uses a second typeface */
  .wr-footer, .wr-footer p, .wr-footer li, .wr-footer .wr-copy, .wr-footer .social a { font-family:Manrope, Inter, system-ui, sans-serif; }
  .wr-footer p { font-size:14px; line-height:1.75; }
  .wr-footer h4 { font-family:Manrope, Inter, sans-serif; }
  .wr-footer mark.hl { background:rgba(245,158,11,0.16); color:#fcd34d; padding:1px 7px; border-radius:6px; font-weight:700; }
  .wr-footer .about { font-size:14.5px; color:#aab7c8; max-width:440px; }
  .wr-footer .about b { color:var(--text); font-weight:700; }

  /* Social buttons with icons */
  .social a { gap:9px; padding:10px 15px; }
  .social svg { width:18px; height:18px; fill:currentColor; flex-shrink:0; }
  .social a.fb:hover { color:#4f9bff; border-color:rgba(24,119,242,0.6); }
  .social a.tg:hover { color:#4fc3f7; border-color:rgba(34,158,217,0.6); }
  .social a.gh:hover { color:#ffffff; border-color:rgba(255,255,255,0.45); }
  .social a.yt:hover { color:#ff5a6e; border-color:rgba(255,0,51,0.55); }
  .wr-footer .wr-responsible li { margin-bottom:10px; }

  /* ---------- Centred footer (new design) ---------- */
  .wf { background:#1c1c1c; color:#ffffff; text-align:center; padding:60px 20px 44px; margin-top:64px; font-family:Manrope, Inter, system-ui, sans-serif; border-top:none; }
  .wf-social { display:flex; justify-content:center; gap:46px; margin-bottom:48px; flex-wrap:wrap; }
  .wf-social a { color:#ffffff; display:inline-flex; transition:opacity .2s, transform .2s; }
  .wf-social a:hover { opacity:.7; transform:translateY(-2px); }
  .wf-social svg { width:26px; height:26px; fill:currentColor; }
  .wf-about, .wf-note { max-width:880px; margin:0 auto; font-size:14.5px; line-height:1.75; color:#e6e6e6; }
  .wf-note { margin-top:18px; color:#bdbdbd; font-size:13.5px; }
  .wf mark { background:rgba(245,158,11,0.16); color:#fcd34d; padding:1px 6px; border-radius:5px; font-weight:700; }
  .wf-logo { margin:52px 0 18px; font-size:30px; font-weight:800; letter-spacing:.01em; display:flex; justify-content:center; align-items:center; gap:10px; color:#ffffff; }
  .wf-logo .wr-logo-img { height:50px; width:auto; max-width:400px; }
  .wf-region { font-size:15px; color:#e6e6e6; }
  .wf-legal { margin-top:22px; font-size:12.5px; color:#8a8a8a; }
  .wf-legal a { color:#8a8a8a; }
  .wf-legal a:hover { color:#ffffff; }
  @media (max-width: 720px) {
    .wf { padding:44px 18px 34px; }
    .wf-social { gap:30px; margin-bottom:34px; }
    .wf-logo { font-size:26px; margin-top:40px; }
  }

  /* ---------- Footer refinements ---------- */
  .wf .wf-social a, .wf .wf-social a:visited, .wf .wf-social a:hover { color:#ffffff; }
  .wf .wf-social svg { fill:#ffffff; color:#ffffff; }
  .wf .wf-social a:hover { opacity:.75; }
  .wf .wf-about { font-family:"Times New Roman", Times, serif; font-size:16px; line-height:1.75; color:#e6e6e6; }
  .wf .wf-caution { margin:18px auto 0; font-size:14px; color:#ef4444; font-weight:600; }

  /* ---------- Header: centred logo with navigation on both sides ---------- */
  .wr-header {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
    min-height:76px; padding:12px 32px;
    background:linear-gradient(180deg, rgba(10,14,20,0.82), rgba(7,10,16,0.62));
    backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
    border-bottom:1px solid rgba(148,163,184,0.12);
  }
  .wr-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(96,165,250,0.55), rgba(34,197,94,0.55), transparent); }
  .wr-nav { display:flex; align-items:center; gap:6px; }
  .wr-nav-left { justify-content:flex-start; }
  .wr-nav-right { justify-content:flex-end; }
  .wr-nav a {
    position:relative; display:inline-block; padding:8px 14px; margin:0; border-radius:999px;
    color:var(--muted); font-size:14px; font-weight:500; letter-spacing:.01em; text-decoration:none; cursor:pointer;
    transition:color .2s, background .2s;
  }
  .wr-nav a::after {
    content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--accent2), var(--accent)); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .wr-nav a:hover { color:var(--text); background:rgba(255,255,255,0.04); }
  .wr-nav a:hover::after { transform:scaleX(1); }
  .wr-brand {
    display:inline-flex; align-items:center; gap:11px; font-size:21px; font-weight:800;
    letter-spacing:-0.02em; color:var(--text); text-decoration:none; white-space:nowrap;
  }
  .wr-brand:hover { text-decoration:none; }
  .wr-brand .wr-logo-img {
    height:50px; width:auto; max-width:360px; border-radius:0; background:transparent;
  }
  @media (max-width: 720px) {
    .wr-header { grid-template-columns:1fr; justify-items:center; gap:6px; padding:12px 14px 10px; }
    .wr-brand { order:-1; font-size:19px; }
    .wr-nav-left, .wr-nav-right { justify-content:center; flex-wrap:wrap; }
    .wr-nav a { padding:6px 11px; font-size:13.5px; }
  }

  /* ---------- Header: centred logo, navigation on both sides ---------- */
  .wr-header {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
    padding:14px 28px; min-height:72px;
    background:linear-gradient(180deg, rgba(10,14,20,0.9), rgba(7,10,16,0.72));
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  }
  .wr-header::after { content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(96,165,250,0.55), rgba(34,197,94,0.55), transparent); }
  .wr-brand { display:inline-flex; align-items:center; gap:10px; justify-self:center; text-decoration:none; }
  .wr-brand:hover { text-decoration:none; }
  .wr-brand .wr-logo-img { height:50px; width:auto; max-width:360px; border-radius:0; background:transparent; }
  .wr-brand-text { font-size:19px; font-weight:800; letter-spacing:-0.01em; color:#fff; }
  .wr-nav { display:flex; align-items:center; gap:6px; }
  .wr-nav-left { justify-self:start; }
  .wr-nav-right { justify-self:end; }
  .wr-nav a {
    position:relative; margin:0; padding:9px 14px; border-radius:999px; font-size:14px; font-weight:500;
    color:var(--muted); text-decoration:none; transition:color .2s, background .2s;
  }
  .wr-nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent2), var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
  .wr-nav a:hover { color:#fff; background:rgba(255,255,255,0.04); text-decoration:none; }
  .wr-nav a:hover::after { transform:scaleX(1); }
  .wr-nav a.wr-cta { color:#fff; background:linear-gradient(135deg, #22c55e, #16a34a); box-shadow:0 8px 22px rgba(34,197,94,0.25); margin-left:6px; }
  .wr-nav a.wr-cta::after { display:none; }
  .wr-nav a.wr-cta:hover { background:linear-gradient(135deg, #34d368, #1ca84b); }
  @media (max-width: 760px) {
    .wr-header { grid-template-columns:1fr; justify-items:center; padding:14px 14px 10px; gap:10px; }
    .wr-nav-left, .wr-nav-right { justify-self:center; flex-wrap:wrap; justify-content:center; }
    .wr-nav a { padding:7px 11px; font-size:13px; }
    .wr-brand .wr-logo-img { height:35px; width:auto; }
    .wr-brand-text { font-size:17px; }
  }

  /* ---------- Floating capsule header: logo left, menu right ---------- */
  .wr-header {
    position:sticky; top:14px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:14px;
    max-width:1080px; margin:14px auto 0; padding:8px 8px 8px 14px; min-height:auto; border-radius:999px;
    background:rgba(12,17,24,0.72); border:1px solid rgba(148,163,184,0.18);
    box-shadow:0 18px 50px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  }
  .wr-header::after { display:none; }
  .wr-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; justify-self:auto; }
  .wr-brand .wr-logo-img { height:50px; width:auto; max-width:360px; border-radius:0; background:transparent; }
  .wr-brand-text { font-size:17px; font-weight:800; letter-spacing:-0.01em; color:#fff; }
  .wr-nav-right { display:flex; align-items:center; gap:2px; }
  .wr-nav-right a {
    position:relative; padding:9px 15px; border-radius:999px; font-size:14px; font-weight:500; color:var(--muted);
    text-decoration:none; transition:color .2s, background .2s;
  }
  .wr-nav-right a:not(.wr-cta):not(:last-child):not(:nth-last-child(2))::before { content:""; position:absolute; right:-2px; top:50%; height:14px; width:1px; transform:translateY(-50%); background:var(--line); }
  .wr-nav-right a:hover { color:#fff; background:rgba(255,255,255,0.05); text-decoration:none; }
  .wr-nav-right a.wr-cta {
    margin-left:8px; color:#fff; font-weight:700; background:linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow:0 8px 22px rgba(34,197,94,0.28);
  }
  .wr-nav-right a.wr-cta:hover { background:linear-gradient(135deg, #34d368, #1ca84b); }
  @media (max-width: 760px) {
    .wr-header { flex-wrap:wrap; border-radius:22px; padding:10px 10px 10px 14px; margin:10px 10px 0; width:auto; }
    .wr-nav-right { width:100%; justify-content:center; flex-wrap:wrap; gap:4px; }
    .wr-nav-right a { padding:7px 11px; font-size:13px; }
    .wr-nav-right a:not(.wr-cta)::before { display:none; }
  }

  /* ---------- Clear social buttons in the footer ---------- */
  .wf .wf-social { gap:18px; margin-bottom:44px; }
  .wf .wf-social a {
    width:54px; height:54px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.22);
    color:#ffffff !important; text-decoration:none;
    transition:transform .2s, background .2s, border-color .2s;
  }
  .wf .wf-social a:hover { background:rgba(255,255,255,0.14); border-color:#ffffff; transform:translateY(-3px); opacity:1; }
  .wf .wf-social svg { width:24px; height:24px; fill:#ffffff !important; color:#ffffff !important; display:block; }
  @media (max-width: 720px) {
    .wf .wf-social { gap:14px; }
    .wf .wf-social a { width:48px; height:48px; }
  }

  /* ---------- Footer social icons: plain icons, bolder strokes (round buttons removed) ---------- */
  .wf .wf-social { gap:34px; margin-bottom:44px; }
  .wf .wf-social a {
    width:auto; height:auto; border-radius:0; background:none; border:none; transform:none;
    color:#ffffff !important; padding:0; display:inline-flex; align-items:center; justify-content:center;
  }
  .wf .wf-social a:hover { background:none; border:none; transform:translateY(-2px); opacity:.8; }
  .wf .wf-social svg { width:30px; height:30px; fill:#ffffff !important; stroke:#ffffff; stroke-width:1.6; stroke-linejoin:round; color:#ffffff !important; display:block; }
  @media (max-width: 720px) {
    .wf .wf-social { gap:24px; }
    .wf .wf-social svg { width:26px; height:26px; }
  }

  /* ---------- Workflow with a details panel ---------- */
  .tree-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
  .tree-layout #treeWrap { min-width:0; }
  .node-panel {
    position:sticky; top:110px; max-height:calc(100vh - 130px); overflow:auto;
    background:linear-gradient(180deg, rgba(19,26,36,0.88), rgba(12,17,24,0.92));
    border:1px solid var(--line); border-radius:20px; padding:20px;
    box-shadow:0 18px 50px rgba(0,0,0,0.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .np-empty { color:var(--muted); font-size:14px; line-height:1.7; }
  .np-step { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); }
  .np-title { font-size:19px; font-weight:800; margin:8px 0 4px; letter-spacing:-0.01em; color:#fff; }
  .np-tool { font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; color:var(--purple); margin-bottom:14px; }
  .np-sec { border-top:1px solid var(--line); padding:12px 0; }
  .np-sec h5 { margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .np-sec p { margin:0; font-size:14px; line-height:1.7; color:#d6e0ec; }
  .np-chips { display:flex; flex-wrap:wrap; gap:4px; }
  .np-btn { margin-top:14px; width:100%; border-radius:12px; padding:11px 14px; background:linear-gradient(135deg, rgba(34,197,94,0.22), rgba(96,165,250,0.18)); border:1px solid rgba(34,197,94,0.35); font-weight:600; }
  @media (max-width: 1100px) {
    .tree-layout { grid-template-columns:1fr; }
    .node-panel { position:static; max-height:none; }
  }

  /* =====================================================================
     Full-width layout
     ===================================================================== */
  main, .hero { max-width:none !important; }
  .hero { padding-left:32px; padding-right:32px; }
  main { padding-left:32px; padding-right:32px; }
  .wr-header { max-width:none; margin:14px 20px 0; }
  .tree-layout { grid-template-columns:minmax(0,1fr) 340px; gap:20px; }

  /* Wide screens: the workflow uses the full width, so no sideways scrolling */
  @media (min-width: 1100px) {
    #treeInner { min-width:0; width:100%; }
    #treeScale { margin:0 auto; }
  }

  /* Left column reserved for affiliate cards. It stays hidden until a card is added. */
  .affiliate-col { display:none; }
  .affiliate-col:not(:empty) { display:flex; flex-direction:column; gap:14px; position:sticky; top:110px; align-self:start; }
  .tree-layout:has(.affiliate-col:not(:empty)) { grid-template-columns:220px minmax(0,1fr) 340px; }
  .aff-card {
    background:linear-gradient(180deg, rgba(19,26,36,0.88), rgba(12,17,24,0.92));
    border:1px solid var(--line); border-radius:18px; padding:16px; color:var(--text);
    box-shadow:0 14px 40px rgba(0,0,0,0.3); text-decoration:none; transition:border-color .2s, transform .2s;
  }
  .aff-card:hover { border-color:rgba(96,165,250,0.4); transform:translateY(-2px); text-decoration:none; }
  .aff-card .aff-tag { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); }
  .aff-card h4 { margin:6px 0 4px; font-size:15px; }
  .aff-card p { margin:0; font-size:13px; color:var(--muted); }

  /* Narrower screens: stack the columns */
  @media (max-width: 1100px) {
    .tree-layout, .tree-layout:has(.affiliate-col:not(:empty)) { grid-template-columns:1fr; }
    .affiliate-col:not(:empty) { position:static; }
  }
  @media (max-width: 720px) {
    .hero, main { padding-left:14px; padding-right:14px; }
  }

  /* ---------- Mobile and tablet: details card stays on the right, no borders ---------- */
  #treeWrap { border:none !important; background:transparent !important; }
  .node-panel { border:none !important; box-shadow:none !important; }

  @media (max-width: 1100px) {
    .tree-layout, .tree-layout:has(.affiliate-col:not(:empty)) { grid-template-columns:minmax(0,1fr) 300px; gap:12px; }
    .affiliate-col { display:none !important; }
    .node-panel { position:sticky; top:96px; max-height:calc(100vh - 120px); }
  }
  @media (max-width: 720px) {
    .tree-layout, .tree-layout:has(.affiliate-col:not(:empty)) { grid-template-columns:minmax(0,1fr) 42%; gap:8px; }
    .node-panel { padding:10px 10px 12px; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .np-title { font-size:14px; margin:4px 0 2px; }
    .np-step { font-size:9.5px; letter-spacing:.06em; }
    .np-tool { font-size:10.5px; margin-bottom:6px; }
    .np-sec { padding:7px 0; }
    .np-sec h5 { font-size:9.5px; margin-bottom:3px; }
    .np-sec p { font-size:11.5px; line-height:1.5; }
    .np-chips .chip { font-size:9px; padding:0 4px; }
    .np-btn { font-size:11px; padding:7px 8px; margin-top:8px; }
    .np-empty { font-size:11.5px; }
    #treeScale { margin:0; }
  }

  /* ---------- Wide screens: the workflow takes the full column width, no scaling ---------- */
  @media (min-width: 1100px) {
    #treeScale { width:100% !important; height:auto !important; overflow:visible; }
    #treeInner { width:100% !important; min-width:0 !important; transform:none !important; }
    .layer { width:100%; justify-content:center; gap:34px 16px; }
  }

  /* ---------- Navbar progress bar ---------- */
  .wr-progress { flex:1; max-width:360px; min-width:150px; margin:0 14px; display:flex; flex-direction:column; gap:6px; }
  .wr-progress-text { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); white-space:nowrap; }
  #wrProgPct { color:#e6ecf5; font-weight:700; }
  .wr-progress-track { height:8px; border-radius:999px; background:rgba(148,163,184,0.16); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,0.35); }
  .wr-progress-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, #60a5fa, #a78bfa, #22c55e); box-shadow:0 0 14px rgba(34,197,94,0.35); transition:width .45s ease; }
  @media (max-width: 760px) {
    .wr-progress { order:3; flex-basis:100%; max-width:none; margin:6px 0 0; }
    .wr-header { flex-wrap:wrap; }
  }

  /* ---------- Segmented navbar progress ---------- */
  .wr-segs { display:flex; gap:3px; height:10px; }
  .wr-seg { flex:1; min-width:4px; border-radius:4px; background:rgba(148,163,184,0.14); overflow:hidden; cursor:default; transition:transform .2s; }
  .wr-seg:hover { transform:scaleY(1.5); }
  .wr-seg i { display:block; height:100%; width:0; border-radius:4px; transition:width .5s ease; }
  .wr-seg.rec i { background:linear-gradient(90deg, #16a34a, #4ade80); box-shadow:0 0 8px rgba(74,222,128,0.35); }
  .wr-seg.vul i { background:linear-gradient(90deg, #dc2626, #fb7185); box-shadow:0 0 8px rgba(251,113,133,0.35); }
  .wr-seg.full { box-shadow:0 0 0 1px rgba(255,255,255,0.25); }
  .wr-legend { display:flex; gap:14px; font-size:11px; color:var(--muted); }
  .wr-legend span { display:inline-flex; align-items:center; gap:6px; }
  .lg { width:8px; height:8px; border-radius:50%; display:inline-block; }
  .lg.rec { background:#4ade80; } .lg.vul { background:#fb7185; }
  .wr-progress.complete .wr-segs { animation:wrGlow 1.8s ease-in-out infinite; }
  .wr-progress.complete #wrProgText { color:#4ade80; }
  @keyframes wrGlow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.35) saturate(1.2); } }

  /* ---------- Progress bar: sticky at the bottom of the screen, above the footer ---------- */
  body { padding-bottom:110px; }
  .wr-progress {
    position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:70;
    width:min(960px, calc(100% - 32px)); box-sizing:border-box;
    display:grid; gap:9px; padding:14px 18px 12px; border-radius:20px;
    background:linear-gradient(180deg, rgba(14,19,27,0.86), rgba(9,13,19,0.92));
    border:1px solid rgba(148,163,184,0.18);
    box-shadow:0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  }
  .wr-progress-text { font-size:13px; }
  .wr-segs { height:12px; }
  .wr-legend { justify-content:flex-end; }
  @media (max-width: 760px) {
    .wr-progress { bottom:8px; width:calc(100% - 16px); padding:12px 12px 10px; border-radius:16px; }
    .wr-progress { order:0; flex-basis:auto; margin:0; max-width:none; min-width:0; }
    .wr-segs { gap:2px; height:10px; }
    .wr-legend { font-size:10px; }
    body { padding-bottom:130px; }
  }

  /* ---------- Progress ribbon: one thin line between the workflow and the footer ---------- */
  body { padding-bottom:0; }
  .wr-progress {
    position:relative; left:auto; right:auto; bottom:auto; top:auto; transform:none; z-index:auto;
    width:100%; max-width:none; box-sizing:border-box; margin:28px 0 0;
    display:flex; flex-direction:row; align-items:center; gap:18px; flex-wrap:nowrap;
    padding:16px 32px; background:none; border:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0;
  }
  .wr-progress-text { flex-shrink:0; display:flex; gap:10px; font-size:13px; color:var(--muted); white-space:nowrap; }
  #wrProgPct { color:#e6ecf5; font-weight:700; }
  .wr-segs { flex:1; min-width:0; height:8px; gap:3px; }
  .wr-seg { min-width:3px; }
  .wr-legend { flex-shrink:0; font-size:12px; }
  .wr-progress.complete #wrProgText { color:#4ade80; }
  @media (max-width: 760px) {
    .wr-progress { gap:12px; padding:12px 16px; margin-top:20px; }
    .wr-progress-text { font-size:12px; }
    .wr-legend { display:none; }
    .wr-segs { height:6px; gap:2px; }
  }

  /* ---------- Progress ribbon: sticky in its place, legend left, bar in the middle, counts right ---------- */
  .wr-progress {
    position:sticky; bottom:0; z-index:40;
  }
  .wr-legend { order:0; }
  .wr-segs { order:1; }
  .wr-progress-text { order:2; justify-content:flex-end; }
  .wr-progress-text { text-align:right; }
  .wr-progress-text #wrProgText { color:var(--muted); }

  /* ---------- Large PC screens: keep the middle content to a comfortable width ---------- */
  :root { --content-max:1240px; }
  main, .hero { max-width:var(--content-max) !important; margin-left:auto !important; margin-right:auto !important; }
  .wr-progress { max-width:var(--content-max); margin-left:auto; margin-right:auto; }